/* ============================================================
   ALVERMERE · homepage · ported from the 9 Aug 2026 reference
   (docs/August 26 Copy Update/alvermere-homepage-design.html)

   Loads after styles.css and leans on its tokens: the cream family,
   greens, gold, --rule hairline and the self-hosted faces. Cormorant
   has no 300 here; the reference's light italic maps to 400 italic.
   Classes that would collide with shared furniture are renamed
   (.wrap -> .hwrap, .band -> .hband); everything
   else is index-only markup.

   Deliberate numbers, per the build handover — do not "improve":
   - measure 58ch, not 66ch: Jost's low x-height wants a tight measure
     and long leading (1.75). Body weight 400, never 300.
   - h2/h3 measures in em, not ch: Cormorant's zero under-sizes ch.
   - h1 max-width 17ch gives the three-line desktop break. No <br>.
   ============================================================ */
.home{
  /* 68ch, widened 2026-08-09 at founder request to cut scrolling. This overrides the
     build handover's explicit "do not widen the measure to 66ch": its 58ch was argued
     from Jost's low x-height giving fewer word-shape cues, which is sound, so the long
     1.75 leading that compensated for it is KEPT and matters more at this width, not
     less. 68ch still sits inside Bringhurst's 45 to 75 range. */
  --measure-home:68ch;
  --measure-lede:44ch;
  --gut:clamp(1.25rem,4.5vw,4.5rem);
  --band-y:clamp(3.5rem,5.5vw,4.75rem);
  /* 16px flat, per the v9 reference: its 68ch measure and 1.75 leading were
     computed at 16px, and the previous fluid 18px re-derived every paragraph
     block ~12% larger than the render. Mobile already resolved to 16px. */
  font-size:1rem;
  line-height:1.75;letter-spacing:.005em;color:var(--ink);
}
.home p{margin:0 0 1.2em;max-width:var(--measure-home)}
.home p:last-child{margin-bottom:0}
.hwrap{max-width:74rem;margin-inline:auto;padding-inline:var(--gut)}

/* ---------- type roles ---------- */
.home h1,.home h2,.home h3{font-family:var(--serif);font-weight:400;color:var(--green);
  margin:0;line-height:1.08;letter-spacing:-.004em}
.home h1{font-size:clamp(2.5rem,1.25rem + 2.5vw,3.5rem);line-height:1.06;max-width:17ch}
.home h2{font-size:clamp(1.85rem,1.25rem + 1.05vw,2.25rem);line-height:1.2;max-width:22ch}
.home h3{font-size:clamp(1.45rem,1.15rem + 1.15vw,2.15rem);line-height:1.2;max-width:12em}
.home h1 em,.home h2 em,.home h3 em{font-style:italic;font-weight:400;color:inherit}
/* The italic turn in section headings is Mid Green (design.md §5); the hero H1 keeps
   its as-live inherit, per the handover's "exactly as live". */
.home h2 em,.home h3 em{color:var(--green-mid)}

.home .eyebrow{font-family:var(--sans);font-size:var(--t-micro);font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--green-mid);margin:0 0 1.6rem;line-height:1.5;max-width:none}
.home .lede{font-family:var(--serif);font-size:clamp(1.3rem,1.1rem + .38vw,1.4rem);
  line-height:1.5;color:var(--green);max-width:var(--measure-lede);
  font-weight:400;letter-spacing:-.002em;margin:0}
.home .lede em{font-style:italic;font-weight:400;color:inherit}

/* signature device: the inset gold hairline mount */
.mount{position:relative;padding:clamp(2.25rem,4.5vw,4rem) clamp(1.5rem,4vw,4rem)}
.mount::after{content:"";position:absolute;inset:0;border:1px solid var(--gold);
  opacity:.45;pointer-events:none}

.home .link{display:inline-block;margin-top:2.25rem;font-family:var(--sans);
  font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-mid);text-decoration:none;padding-bottom:.4rem;
  border-bottom:1px solid var(--rule);
  transition:border-color .25s ease,color .25s ease}
.home .link:hover{color:var(--green);border-bottom-color:var(--green-mid)}
.home .link::after{content:" \2192"}
.home .link--rev{color:var(--cream);border-bottom-color:rgba(212,176,122,.6)}
.home .link--rev:hover{color:#fff;border-bottom-color:var(--gold-light)}

/* ============================================================
   1 · HERO — photograph behind the type, masked hard
   ============================================================ */
/* The cream sweep. REINSTATED 2026-08-09 at founder instruction: the 9 August
   reference implementation had no scroll rig and its handover said not to add
   scroll-triggered reveals, so the rebuild dropped it. That was an error in the
   handover. Values are the ones tuned and shipped in PR #46: reach 53, a 24vh
   runway inside a 124vh container, and a 56vh sweep so the cream finishes
   closing just before the stage releases.

   The three ranges are coupled to the release point. Change one and check all:
     sweep closes (reach 100) at (100-60)/(178-60) * 56vh = 19.0vh
     stage releases at            124vh - 100vh          = 24vh
     headroom                                            = 5.0vh   (must stay > 0)
   reach 60, not 53: the widest hero text is the eyebrow at 855px on a 1440
   viewport, which is 59.4%. At 53 the cream stopped at 763px and the line ran
   onto the photograph. Sized to the content, not chosen. */
@property --reach    { syntax:"<number>"; inherits:false; initial-value:60 }
@property --softness { syntax:"<number>"; inherits:false; initial-value:36 }

.hhero__veil,.hhero__floor,.seam{display:none}

/* MOBILE MECHANIC, reinstated 2026-08-09. Portrait never ran the veil sweep:
   production gave it a different move, and the rebuild dropped both. The
   photograph is a sticky band, a transparent window lets it show through, and
   the cream panel carrying the type rises over it as you scroll, its top edge
   softened by a gradient so the join is never a hard line. Values are
   production's: 62vh band stuck at 130px, a 46vh window, a 130px fade. */
.hhero{position:relative;isolation:isolate;overflow:hidden;padding-block:0}
/* top:0, not production's 130px. There the band lived INSIDE header.top, so the
   offset placed it below the nav. Here the hero is a sibling of the header, so the
   band's natural position is already below it and a positive top is added on top of
   that: sticky behaves as relative until its threshold is crossed, which showed as a
   130px band of empty cream between the masthead and the photograph at rest. The
   header is sticky at 0 with z-index 20, so it covers the band's top edge while
   scrolling, which is the effect production had. */
.hhero__art{position:sticky;top:0;height:62vh;margin:0 0 -62vh;z-index:0;
  background:
    radial-gradient(90% 70% at 70% 34%,rgba(184,151,90,.16),transparent 62%),
    url("assets/hero-room.avif") 60% 100%/auto 155% no-repeat var(--cream);
  /* Hold the foot of the room, crop the top away. `cover` cannot do this here: at
     390x503 the image scales to exactly the band height, so there is no vertical
     overflow and background-position-y has no effect. Over-scaling to 155% of the
     band height gives 277px of overflow, and position-y 100% anchors the bottom
     edge, so the lower two-thirds of the frame is what shows. */
  filter:saturate(.96) brightness(.99)}
.hhero__window{position:relative;z-index:1;height:46vh}
.hhero__prop{position:relative;z-index:2;background:var(--cream);
  padding-block:18px 40px;min-height:54vh}
.hhero__prop::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:130px;
  pointer-events:none;background:linear-gradient(rgb(var(--cream-rgb)/0),var(--cream))}
.hhero__lede{margin-top:clamp(1.75rem,3.4vw,2.75rem)}
.hhero__foot{margin-top:clamp(1.9rem,3.6vw,3rem);padding-top:1.35rem;
  border-top:1px solid var(--gold);max-width:64rem}
/* v9 G1: the qualification block. Lives inside .hhero__foot, whose gold hairline
   and ~21px padding-top are the separation the handover asks for. The four-item
   list is the <strong>, Jost 500 in Primary Green. */
.qualify{font-size:.9em;line-height:1.7;color:var(--ink-soft);max-width:58ch;margin:0}
.qualify strong{font-weight:500;color:var(--green)}

/* ============================================================
   OUR POSITION — the one ceremonial green panel (v9 §6)
   Mount in Gold Light, wholly inside the panel (design.md §6).
   ============================================================ */
.continuity{background:var(--green);color:var(--cream);padding-block:var(--band-y)}
.continuity .mount::after{border-color:var(--gold-light);opacity:.55}
.continuity .eyebrow{color:var(--gold-light)}
.continuity h2{color:var(--cream);margin-bottom:1.4rem}
.continuity h2 em{color:var(--gold-light)}
.continuity p{color:var(--cream);opacity:.94;max-width:var(--measure-home)}
.continuity .lozenge{display:block;margin:2rem 0 0;color:var(--gold-light);opacity:.85}

/* ============================================================
   4 · EDITORIAL BANDS (firm / point of view / principal)
   ============================================================ */
.hband{padding-block:var(--band-y)}
.hband--sec{background:var(--cream-section)}
.hsplit{display:grid;gap:clamp(1.75rem,4vw,5rem);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:start}
.hsplit__aside{position:sticky;top:2rem}
.hsplit__aside .eyebrow{margin-bottom:1rem}
.hsplit__role{margin:.9rem 0 0;max-width:none;font-family:var(--sans);font-size:var(--t-micro);
  font-weight:400;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-soft);opacity:.85}

/* ============================================================
   WHAT WE DO — three practice columns (v9 §2)
   ============================================================ */
.offer__head{max-width:none;margin-bottom:clamp(2.25rem,4vw,3rem)}
.gold-hr{height:1px;background:var(--gold);margin:0 0 1rem}
.practice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(2rem,4vw,2.75rem)}
.pr__lab{margin:0 0 .9rem;max-width:none;font-family:var(--sans);
  font-size:calc(var(--t-micro) * .85);font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:var(--green-mid)}
.pr h3{font-family:var(--serif);font-weight:500;max-width:none;
  font-size:clamp(1.2rem,1.05rem + .5vw,1.35rem);line-height:1.25;margin:0 0 .8rem}
.pr p{font-size:.9em;color:var(--ink-soft)}
.pr__std{font-family:var(--sans);font-size:calc(var(--t-micro) * .82);font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--green-mid);line-height:2;
  margin-bottom:0}

/* ============================================================
   THE WAY IN — the RPA behind a left gold rail (v9 §3)
   ============================================================ */
.rpa{border-left:2px solid var(--gold);padding-left:clamp(1.4rem,3.2vw,2.75rem)}
.rpa h2{margin-bottom:1.5rem}
.rpa__terms{list-style:none;display:flex;flex-wrap:wrap;gap:1rem 1.8rem;
  margin:1.8rem 0 1.5rem;padding:0;max-width:none}
.rpa__terms li{font-family:var(--sans);font-size:calc(var(--t-micro) * .88);
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--green-mid);
  border-bottom:1px solid var(--gold);padding-bottom:.35rem}
.rpa__free{font-size:.9em;color:var(--ink-soft)}

/* ============================================================
   EVIDENCE — four checkable blocks (v9 §4)
   ============================================================ */
.ev{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(2.25rem,4.5vw,3.4rem) clamp(2.5rem,5vw,3.4rem)}
.ev__item h3{font-family:var(--serif);font-weight:500;max-width:none;
  font-size:clamp(1.125rem,1rem + .4vw,1.25rem);line-height:1.3;margin:0 0 .7rem}
.ev__item p{font-size:.9em;color:var(--ink-soft)}
.ev__chk{font-family:var(--sans);font-size:calc(var(--t-micro) * .82);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--green-mid);margin-bottom:0}
.ev__chk a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule);
  padding-bottom:2px;transition:color .25s ease,border-color .25s ease}
.ev__chk a:hover{color:var(--green);border-bottom-color:var(--green-mid)}

/* ============================================================
   THE PRINCIPAL — evidence and facts lines (v9 §7)
   ============================================================ */
.pfacts{font-family:var(--sans);font-size:calc(var(--t-micro) * .88);font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--green-mid);line-height:2.3;
  margin:1.6rem 0 0;max-width:var(--measure-home)}
.pfacts--ev{border-top:1px solid var(--gold);padding-top:1rem}
.pfacts + .pfacts{margin-top:1.1rem}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-aspect-ratio:3/2),(min-width:1001px) and (orientation:landscape){
  /* overflow must NOT be `hidden` here. The base rule carries it from the reference,
     which had no sticky child; on an ancestor of a position:sticky element it makes
     this box the scroll container, so the stage pins to the hero instead of the
     viewport and the sweep never runs. `clip` clips without creating a scroll
     container. Production kept the sticky parent overflow-free for the same reason. */
  /* The masthead leaves the flow on the homepage, as production did. It is sticky
     elsewhere, which means it occupies 93px before the hero starts, so a 100vh stage
     ran from 93 to 993 and its last 93px sat below the fold. Content centred in that
     overflowing box put the scope line 3px from the bottom edge, which is why the
     hero read as needing a scroll. Fixed, the stage is a true 0 to 100vh at rest and
     while pinned, and the type sits about 80px higher with 83px of clearance. */
  body:has(.hhero) .top{position:fixed;top:0;left:0;right:0;z-index:20}
  .hhero{height:124vh;padding-block:0;overflow:clip}
  .hhero__window{display:none}
  /* Align the hero type with the masthead rather than with the centred 74rem
     column. The brand sits at clamp(40px,5vw,96px) from the viewport edge; the
     hero was starting at 193px on a 1440 screen against the masthead's 72px, and
     that misalignment is what read as squashed. Production used this same inset.
     The gold rule and qualification block move with it, being inside the same box. */
  .hhero__prop{background:none;min-height:0;padding-block:24px 0;
    max-width:none;padding-inline:clamp(40px,5vw,96px);
    position:relative;z-index:2;width:100%}
  .hhero__prop::before{display:none}
  /* The masthead is fixed and ~112px tall; the stage reserves that band as
     padding so the flex centring happens in the space BELOW the header. Without
     it, short viewports centred the prop into the header and the eyebrow
     disappeared behind the nav (found at 1280x800, 10 Aug). `safe center` matters
     as much as the padding: plain center overflows INTO the padding band on short
     viewports, safe center falls back to start, so an overflowing prop clips at
     the bottom, never under the header. The plain center line before it is the
     fallback for engines without `safe`. */
  .hhero__stage{position:sticky;top:0;height:100vh;overflow:hidden;
    display:flex;align-items:center;align-items:safe center;padding-top:108px}
  /* the veil now does the masking, so the art drops its static fades and keeps
     only the photograph and the warm glow */
  .hhero__art{position:absolute;inset:0;height:auto;margin:0;top:0;
    background:
    radial-gradient(90% 70% at 88% 34%,rgba(184,151,90,.20),transparent 60%),
    url("assets/hero-room.avif") 82% 38%/cover no-repeat var(--cream);
    filter:saturate(1.04) brightness(.97) contrast(1.06);z-index:0}
  .hhero__art::after{display:none}
  /* Keep the hero content inside the veil's opaque zone. At rest the cream holds to
     --reach (53%) and is clear by 89%, so anything wider than that runs onto the
     photograph. First observed on the retired scope line; the guard now protects the
     qualification block. Production constrained the whole prop to min(560px,44vw) for
     the same reason; this is the same guard, sized to the current type. */
  .hhero__prop .lede{max-width:min(44ch,46vw)}
  .hhero__foot{max-width:min(52vw,44rem)}
  .hhero__veil{display:block;position:absolute;inset:0;z-index:1;pointer-events:none;
    --reach:60; --softness:36;
    background:linear-gradient(100deg,
      rgb(var(--cream-rgb)/.99) 0%,
      rgb(var(--cream-rgb)/.97) calc(var(--reach) * 1%),
      rgb(var(--cream-rgb)/.35) calc((var(--reach) + var(--softness) * .5) * 1%),
      rgb(var(--cream-rgb)/0)   calc((var(--reach) + var(--softness)) * 1%))}
  .hhero__floor{display:block;position:absolute;inset:0;z-index:1;
    background:var(--cream);opacity:0;pointer-events:none}
  .seam{display:block;position:relative;z-index:6;height:1px;background:var(--gold);
    transform-origin:left center}

  @supports (animation-timeline: scroll()){
    @media (prefers-reduced-motion: no-preference){
      @keyframes cream-close{ from{ --reach:60; --softness:36 } to{ --reach:178; --softness:40 } }
      .hhero__veil{animation:cream-close linear both;animation-timeline:scroll(root block);
        animation-range:0 56vh}
      @keyframes cream-solidify{ to{ opacity:1 } }
      .hhero__floor{animation:cream-solidify linear both;animation-timeline:scroll(root block);
        animation-range:20vh 24vh}
      @keyframes hero-leave{ to{ opacity:0 } }
      .hhero__prop{animation:hero-leave linear both;animation-timeline:scroll(root block);
        animation-range:3vh 22vh}
      @keyframes seam-draw{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }
      .seam{animation:seam-draw linear both;animation-timeline:view();
        animation-range:entry 0% entry 55%}
    }
  }
}
@media (max-width:60rem){
  .hsplit{grid-template-columns:1fr}
  .hsplit__aside{position:static}
  .practice{grid-template-columns:1fr;gap:2.25rem}
  .ev{grid-template-columns:1fr}
}
/* ============================================================
   LARGE DISPLAYS. Founder, 14 Aug: at 27in the hero froze while the
   page grew, body copy read small, and the band sat inside a 760px
   moat each side. The interior pages already scale on the shared
   fluid tokens; the homepage's render-pinned clamps all capped at
   their 1440 value, so above that nothing moved. This ramp starts at
   1600px with every value continuous at the boundary, so the
   approved 1280 to 1440 sizes are untouched. At 2560: body 19px,
   H1 68px, H2 44px, lede 26px, wrap 1453px (margins 554 a side,
   from 760). The veil guard holds: the widest hero line at 2560 is
   ~1000px, well inside reach 60 (1536px).
   ============================================================ */
@media (min-width:1600px){
  .home{font-size:clamp(1rem,0.6875rem + 0.3125vw,1.1875rem)}
  .home h1{font-size:clamp(3.5rem,2.25rem + 1.25vw,4.25rem)}
  /* Measure in em, not ch: design.md 5 warns Cormorant's narrow zero under-sizes
     ch columns, and at 44px the 22ch base measure collapsed the What-we-do heading
     into six short lines. em holds the approved shape as the type grows. */
  .home h2{font-size:clamp(2.25rem,1.417rem + 0.833vw,2.75rem);max-width:15em}
  .home h3{font-size:clamp(2.15rem,1.567rem + 0.583vw,2.5rem)}
  .home .lede{font-size:clamp(1.4rem,0.983rem + 0.417vw,1.65rem)}
  .hwrap{max-width:clamp(74rem,46rem + 28vw,93.75rem)}
  /* The hero prop is also .hwrap, and this block sits later in the file than the
     desktop hero rules, so without this re-assertion the wrap growth re-centres
     the prop and breaks its masthead alignment (96px vs 642px at 2560). */
  .hhero__prop{max-width:none}
}

@media (max-width:44rem){
  .hhero__art::after{background:linear-gradient(180deg,var(--cream) 0 42%,rgb(var(--cream-rgb)/.6))}
  .rpa{padding-left:clamp(1.1rem,4.5vw,1.5rem)}
  /* Founder, 10 Aug: on a phone the tracked caps lines wrap into two and three
     rows and read as headings. Pinned to the render's 11px on mobile only; the
     desktop sizes stay on the raised label token. */
  .pr__lab,.pr__std,.ev__chk,.rpa__terms li,.pfacts{font-size:.6875rem}
  .pr__std,.pfacts{line-height:1.9}
}