/* Landing-page-only styles: the portfolio and print layouts stay unchanged. */
.home-page {
  --home-bg: #f7f7f2;
  --home-accent: #28665f;
  --home-wash: #e8eee8;
  --home-rule: #d6ded6;
  --home-paper: #fff;
  --home-paper-ink: #10263b;
  background: var(--home-bg);
}
.home-page main { max-width: 76rem; padding: 4.5rem 2rem 1.5rem; }
.home-page .site-footer { max-width: 76rem; padding-top: 1rem; }
.home-hero { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 3rem; }
.home-intro { padding: 1rem 0 2rem; }
.home-eyebrow { color: var(--home-accent); margin-bottom: 1.6rem; }
.home-eyebrow span { margin: 0 .55rem; color: var(--muted); }
.home-intro h1 { max-width: 12ch; font-size: clamp(2.65rem, 4.5vw, 3.75rem); line-height: 1.08; font-weight: 600; letter-spacing: -.045em; overflow-wrap: normal; }
.home-intro h1 span { color: var(--home-accent); }
.home-description { max-width: 31rem; margin: 1.6rem 0 1.9rem; font-size: 1.05rem; line-height: 1.8; color: var(--ink-2); }
.home-sign-in { min-height: 52px; gap: 1.5rem; padding: .9rem 1.3rem; }
.home-sign-in span { font-size: 1.2rem; line-height: 1; }
.home-sign-in-help { margin: .8rem 0 0; font-size: .78rem; color: var(--muted); }

/* An abstract document, without invented marks or pretend controls. */
.portfolio-illustration { margin: 0; padding: 2rem 2.1rem 1.2rem; position: relative; isolation: isolate; min-width: 0; }
.portfolio-illustration::before {
  content: ""; position: absolute; z-index: -2; inset: 0 0 2.7rem;
  border-radius: 48% 48% 12px 12px; background: var(--home-wash);
}
.portfolio-paper {
  position: relative; background: var(--home-paper); color: var(--home-paper-ink);
  border: 1px solid #dce2db; border-radius: 4px; padding: 1.65rem 1.75rem 1.25rem;
  box-shadow: 0 16px 40px rgb(16 38 59 / 9%); transform: rotate(-3deg);
}
.portfolio-illustration::after {
  content: ""; position: absolute; z-index: -1; inset: 2rem 2.1rem 4.4rem;
  border: 1px solid var(--home-rule); border-radius: 4px;
  background: var(--home-paper); transform: rotate(3deg);
}
.paper-topline { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .68rem; font-weight: 650; }
.paper-year { font-weight: 500; color: #526376; }
.paper-title { margin: 1.75rem 0 1.5rem; font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1.2; letter-spacing: -.025em; }
.paper-section { border-top: 1px solid #e1e6e2; padding: 1.1rem 0 1.35rem; }
.paper-section-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: .9rem; font-size: .8rem; font-weight: 600; }
.paper-symbol { color: #397168; font-size: .6rem; font-variant-numeric: tabular-nums; }
.paper-rule { height: 5px; border-radius: 1px; background: #e2e8e6; margin: .65rem 0 0; }
.paper-rule-long { width: 93%; }
.paper-rule-medium { width: 76%; }
.paper-rule-short { width: 57%; }
.paper-reflection { background: #edf3ef; padding: 1rem; border-left: 2px solid #8bb3a3; }
.paper-reflection .paper-rule { background: #d5e2da; }
.paper-footer { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.75rem; padding-top: .9rem; border-top: 1px solid #e1e6e2; font-size: .6rem; color: #526376; }
.paper-export {
  position: absolute; right: -2rem; bottom: 1.8rem; display: flex; align-items: center; gap: .85rem;
  padding: .85rem 1.2rem; background: #10263b; color: #fff; border-radius: 8px;
  box-shadow: 0 8px 20px rgb(16 38 59 / 14%); transform: rotate(3deg);
}
.paper-export svg { flex-shrink: 0; color: #b8d6c5; }
.paper-export span { font-size: .65rem; line-height: 1.5; color: #c2cfd8; }
.paper-export strong { display: block; font-size: .85rem; font-weight: 550; color: #fff; }
.portfolio-illustration figcaption { position: relative; margin-top: 1.8rem; text-align: center; color: var(--muted); font-size: .67rem; }

.home-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 3.8rem; border-top: 1px solid var(--home-rule); padding-top: 2rem; }
.home-feature { padding: 0 1.8rem; }
.home-feature:first-child { padding-left: 0; }
.home-feature:last-child { padding-right: 0; }
.home-feature + .home-feature { border-left: 1px solid var(--home-rule); }
.feature-number { font-size: .65rem; font-weight: 600; letter-spacing: .1em; color: var(--home-accent); }
.home-feature h2 { margin: .8rem 0 .65rem; font-size: 1.05rem; font-weight: 600; line-height: 1.4; letter-spacing: -.015em; }
.home-feature p { margin: 0; font-size: .85rem; line-height: 1.8; color: var(--ink-2); }
.home-scope { display: flex; align-items: center; gap: .85rem; margin-top: 2.5rem; padding: 1rem 1.2rem; background: var(--home-wash); border-radius: 6px; color: var(--ink-2); }
.home-scope p { margin: 0; font-size: .75rem; }
.scope-mark { display: inline-flex; justify-content: center; align-items: center; flex-shrink: 0; width: 1.2rem; height: 1.2rem; border: 1px solid currentColor; border-radius: 50%; font: italic .8rem Georgia, serif; }

@media screen and (prefers-color-scheme: dark) {
  .home-page { --home-bg: #0b1722; --home-accent: #a5d0bf; --home-wash: #172e32; --home-rule: #324858; }
  .home-sign-in { background: #c3ded0; color: #10263b; }
  .home-sign-in:hover { background: #d6eade; }
  .portfolio-paper { box-shadow: 0 16px 40px rgb(0 0 0 / 18%); }
}
@media screen and (max-width: 1000px) {
  .home-page main { padding-top: 3rem; }
  .home-hero { gap: 1.5rem; }
  .portfolio-illustration { padding-right: 1.5rem; padding-left: 1.5rem; }
  .portfolio-paper { padding: 1.3rem; }
  .paper-export { right: -1rem; }
}
@media screen and (max-width: 760px) {
  .home-page main { padding: 2.5rem 1.25rem 1rem; }
  .home-hero { grid-template-columns: 1fr; gap: 1.5rem; }
  .home-intro { padding: 0; }
  .home-intro h1 { max-width: 16ch; font-size: clamp(2.65rem, 7.5vw, 3.5rem); }
  .home-description { max-width: 34rem; }
  .portfolio-illustration { width: 100%; max-width: 27rem; margin: .5rem auto 0; padding: 2rem 2rem 1rem; }
  .portfolio-paper { padding: 1.6rem; }
  .home-features { margin-top: 2rem; padding-top: 1.5rem; }
  .home-feature { padding: 0 1rem; }
}
@media screen and (max-width: 560px) {
  .home-page main { padding: 2rem 1rem 1rem; }
  .home-eyebrow { margin-bottom: 1.25rem; font-size: .65rem; }
  .home-intro h1 { font-size: clamp(2.35rem, 10vw, 3rem); }
  .home-description { font-size: .98rem; margin: 1.2rem 0 1.5rem; }
  .home-sign-in { width: 100%; justify-content: space-between; }
  .home-sign-in-help { font-size: .73rem; }
  .portfolio-illustration { padding: 1.7rem 1.35rem 1rem; }
  .portfolio-paper { padding: 1.25rem; }
  .paper-title { font-size: 1.8rem; }
  .paper-topline { font-size: .6rem; }
  .paper-export { right: -.7rem; padding: .7rem .9rem; }
  .home-features { grid-template-columns: 1fr; gap: 1.35rem; padding-top: 1.6rem; }
  .home-feature, .home-feature:first-child, .home-feature:last-child { padding: 0; }
  .home-feature + .home-feature { border-left: 0; border-top: 1px solid var(--home-rule); padding-top: 1.35rem; }
  .home-feature h2 { margin-top: .5rem; }
  .home-scope { align-items: flex-start; margin-top: 1.75rem; padding: 1rem; }
}
@media (forced-colors: active) {
  .portfolio-paper, .paper-reflection, .paper-export, .home-scope { border: 1px solid CanvasText; }
  .paper-rule { background: CanvasText; }
}