/* Launch-only overrides for index.html. Kept out of concepts/ so the preserved
   portrait-study and background-preview snapshots stay exactly as approved. */
#about .about-copy{margin-top:22px}
.portrait-composition picture{display:contents}

/* No hero buttons: the icon bar is the full list of places to find Steve. */
.hero-actions:empty{display:none}

/* Numbers strip under the hero: no boxes, just oversized numerals in the same
   Inter 800 as the headlines, each under a rule, with body-style captions. Values pop as they count up. */
.numbers{margin-top:8px;container-type:inline-size}
@media(min-width:821px){
  /* Same width as the hero, wider than the page column, so the numerals have room. */
  .numbers{width:min(1280px,calc(100vw - 2*clamp(28px,4.5vw,140px)));margin-left:50%;transform:translateX(-50%)}
}
.numbers .stats{
  margin-top:0;display:grid;gap:3cqw;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  padding:2.2cqw 2.6cqw 2.6cqw;border-radius:var(--radius);
  background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(3px)
}
.numbers .stat{
  background:none;border:0;border-top:2px solid var(--ink);border-radius:0;box-shadow:none;
  gap:1.1cqw;padding:1.6cqw 0 0;overflow:visible
}
.numbers .stat::after{display:none}
.numbers .stat-value{
  font-size:5.4cqw;font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--ink);
  transform-origin:0 100%
}
.numbers .stat-value.is-counted{animation:stat-pop .7s cubic-bezier(.2,1.6,.4,1) both}
@keyframes stat-pop{0%{transform:scale(.6);opacity:0}60%{opacity:1}100%{transform:scale(1);opacity:1}}
.numbers .stat-label{
  font-family:var(--font);font-size:clamp(.9rem,1.25cqw,1.25rem);line-height:1.45;letter-spacing:0;
  text-transform:none;color:var(--ink-2);max-width:22ch
}
@media(max-width:820px){
  .numbers .stats{grid-auto-flow:row;grid-template-columns:1fr 1fr;gap:7cqw 6cqw;padding:5cqw 5cqw 6cqw}
  .numbers .stat{padding:3.4cqw 0 0;gap:2.2cqw}
  .numbers .stat:first-child:nth-last-child(odd){grid-column:1/-1}
  .numbers .stat-value{font-size:12cqw}
  .numbers .stat-label{font-size:.92rem}
}
@media(prefers-reduced-motion:reduce){.numbers .stat-value.is-counted{animation:none}}
div.project{cursor:default}
/* A project's own lettering in place of the text title (Dweller's pixel wordmark). */
.project-wordmark{height:30px;width:auto;display:block;image-rendering:pixelated}
/* A mark that is taller than wide gets extra height so it carries the same weight as the wide ones. */
.social--soon{opacity:.6;cursor:default}
.social--soon:hover{transform:none;border-color:var(--line)}

/* ONE HORIZON (chosen 2026-10-06 from concepts/bg-option-2.html; see concepts/ONE-HORIZON-HANDOFF.md).
   Bare paper everywhere, one engraved ridge at the foot of the page, no boxes or veils behind the reading sections. */
:root{--bg-2:#f1f1f1;--surface:#fbfaf8;--line:#dedede;--line-strong:#c9c9c9;--live:#666}
body{position:relative;isolation:isolate}
.bg-horizon{position:absolute;left:0;right:0;bottom:55px;height:360px;overflow:hidden;opacity:.27;mix-blend-mode:multiply;pointer-events:none;z-index:-1}
.bg-horizon img{display:block;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.bg-foot{height:320px}
.section:not([hidden]),#about,#contact,.contact-card,.footer,.numbers .stats{background:transparent;backdrop-filter:none;box-shadow:none}
.section:not([hidden]){border:0;border-radius:0;margin-top:112px}
/* Project cards: real cards on the paper. Three across on a wide screen, equal height, one clear hover. */
:root[data-background=scroll] .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;border-top:0}
:root[data-background=scroll] .project{
  padding:28px 28px 24px;gap:14px;min-height:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)
}
:root[data-background=scroll] a.project:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
/* Every card shares one grid: a 28px mark row, a title row two lines tall, the blurb, then the link.
   Marks and titles therefore sit on the same lines across all three cards. */
:root[data-background=scroll] .project .project-logo{
  height:28px;width:auto;max-width:140px;object-fit:contain;object-position:left center;
  margin:0 0 16px;opacity:1;filter:none;align-self:flex-start
}
:root[data-background=scroll] .project .project-title{
  font:800 1.3rem/1.15 var(--font);letter-spacing:-.02em;
  display:flex;align-items:flex-start;gap:8px;min-height:2.3em;margin:0
}
.project-name{display:block}
.project-wordmark{height:24px;margin-top:3px} /* cap height of the text titles */
:root[data-background=scroll] .project .project-arrow{margin-left:auto;margin-top:.2em;flex:0 0 18px}
:root[data-background=scroll] .project .project-blurb{font-size:.97rem;line-height:1.65;max-width:none}
:root[data-background=scroll] .project .project-link{margin-top:auto;padding-top:12px;font-size:.72rem;letter-spacing:.06em;text-decoration:none;border-top:1px solid var(--line);color:var(--ink-soft)}
@media(max-width:1100px){:root[data-background=scroll] .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:820px){:root[data-background=scroll] .project-grid{grid-template-columns:1fr;gap:14px}:root[data-background=scroll] .project{padding:22px 22px 20px}:root[data-background=scroll] .project+.project{border-top:1px solid var(--line)}}
.contact-card{border:0;border-radius:0;padding-inline:0}
.footer{border:0;border-top:1px solid var(--line);border-radius:0;margin-top:0}
@media(max-width:820px){
  .bg-foot{height:250px}
  .bg-horizon{height:240px;bottom:95px;opacity:.25}
  .bg-horizon img{object-position:57% bottom}
  .section:not([hidden]){margin-top:88px}
}

/* Phones: the first screen is the portrait, the greeting, and the intro.
   The portrait takes whatever height the text leaves; buttons start below the fold. */
@media(max-width:820px){
  /* The first screen is the hero and nothing else: the hero is one small-viewport screen tall with its
     content centered (a touch high), and the numbers stay invisible until the visitor scrolls
     (launch.js hides them inline on load and clears that on the first scroll). No tall gap, no peeking. */
  :root[data-background=scroll] .hero{
    padding-top:12px;min-height:calc(100svh - var(--nav-h));
    display:flex;flex-direction:column;justify-content:center;gap:0;padding-bottom:40px
  }
  .numbers{margin-top:16px;transition:opacity .5s ease,transform .5s ease}
  @media(prefers-reduced-motion:reduce){.numbers{transition:none}}
  :root[data-background=scroll] .hero-photo.portrait-study{order:-1}
  :root[data-background=scroll] .hero-photo.portrait-study{
    width:clamp(220px,calc(100svh - 410px),92vw)!important;
    max-width:none;padding:0;margin:0 auto 10px
  }
  .hero-photo.portrait-study .portrait-person{width:100%}
  :root[data-background=scroll] .hero .lede{font-size:16px;line-height:1.7;max-width:none;margin-top:18px}
  :root[data-background=scroll] .hero-links{margin-top:22px;flex-wrap:wrap}
}

/* Desktop: the whole hero scales from one unit tied to the window, so the
   composition keeps its proportions from a small laptop to a large display.
   --u follows the width until the window gets short, then follows the height:
   portrait (37u) plus hero padding (6u + 40px) always fits under the nav. */
@media(min-width:821px){
  :root[data-background=scroll] .hero{
    --u:min(1vw,calc((100svh - 104px)/44));
    /* "Tight pair" (chosen 2026-10-06 from concepts/hero-d.html): text and portrait sit as one centered
       block with a small fixed gap, instead of being pushed to the page's far edges. */
    width:min(1280px,calc(100vw - 2*clamp(28px,4.5vw,140px)));
    grid-template-columns:minmax(0,1.1fr) auto;gap:clamp(24px,3vw,56px);
    align-items:center;
    min-height:calc(100svh - var(--nav-h));
    padding:calc(2*var(--u)) 0 calc(4*var(--u) + 40px)
  }
  :root[data-background=scroll] .hero h1{font-size:clamp(40px,calc(5*var(--u)),76px);letter-spacing:-.03em} /* capped so "Hey, I'm Steve." stays on one line in the 1280px block */
  :root[data-background=scroll] .hero .rotate-line{margin-top:.3em;letter-spacing:-.02em}
  :root[data-background=scroll] .hero .lede{
    font-size:clamp(15px,calc(1.3*var(--u)),24px);line-height:1.75;max-width:30em;margin-top:1.5em
  }
  :root[data-background=scroll] .hero-actions{gap:calc(.8*var(--u));margin-top:calc(2.2*var(--u))}
  .hero-actions .btn{font-size:clamp(14px,calc(1.05*var(--u)),20px);padding:.8em 1.35em}
  :root[data-background=scroll] .hero-links{gap:calc(.75*var(--u));margin-top:calc(2*var(--u))}
  .hero-links .hero-link{width:clamp(38px,calc(2.8*var(--u)),56px);height:clamp(38px,calc(2.8*var(--u)),56px)}
  .hero-links .hero-link svg{width:42%;height:42%}
  .hero-links .hero-link img{width:55%;height:auto}
  .hero-links .hero-link[title="HXP"] img{width:60%}
  :root[data-background=scroll] .hero-photo.portrait-study{
    width:clamp(340px,calc(36*var(--u)),560px);max-width:42vw;justify-self:start
  }
  /* On bare paper the cutout's straight bottom edge showed; let the torso dissolve into the page instead. */
  .hero-photo.portrait-study .portrait-person{width:100%}
  /* !important because concepts/original-theme.css forces mask-image:none on hero images. */
  :root[data-background=scroll] .hero-photo.portrait-study .portrait-person{
    -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)!important;
    mask-image:linear-gradient(to bottom,#000 72%,transparent 100%)!important
  }

}