/* ---------- INTRO: THE O OPENS ----------
     The CG HOMES wordmark draws in, then the O becomes a window: a circular
     cut in the deep charcoal field that widens until it clears the screen and the
     hero is simply there. Geometry and the expansion are driven by js/core.js;
     CSS owns the entrance and the resting styles. */
  html.intro-active, html.intro-active body{overflow:hidden;height:100%;}
  /* While the intro is up, the canvas itself is the field colour: mobile
     browsers paint the page background under their toolbars and the home
     indicator, and it must not be the paper showing there. */
  html.intro-active, html.intro-active body.home{background:#0E0A09;}
  .intro-loader{display:none;}
  html.intro-seen .intro-loader{display:none;}
  .js .intro-loader{
    /* Oversized on purpose: mobile Safari resizes the viewport as its toolbars
       show and hide, and an exactly-fitted overlay can leave a strip where the
       hero shows through. The field bleeds well past every edge instead. */
    position:fixed;
    top:-60px;left:-60px;right:-60px;
    height:calc(100vh + 120px);
    height:calc(100lvh + 120px);
    z-index:300;
    display:block;
    overflow:hidden;
    background:transparent;
    cursor:default;
  }
  /* Until JS has measured the O, the field is a plain sheet (no window yet). */
  .js .intro-loader:not(.is-ready){background:#0E0A09;}
  .intro-field{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible;}
  /* Every moving part of the intro is driven frame by frame from js/core.js
     (SVG attributes, opacity and transform only — no CSS keyframes, filters
     or custom properties in animations), so it behaves the same in Safari,
     Chrome and Firefox. CSS only sets the resting state. */
  .intro-ring{stroke:var(--sand);stroke-linecap:round;}
  .intro-dot{fill:var(--sand);}

  /* Wordmark: two clipped copies so the letters can part around the O */
  .intro-word{
    position:absolute;
    left:50%;top:50%;
    width:min(80vw,640px);
    height:calc(min(80vw,640px) * 200 / 1024);
    transform:translate(-50%,-50%);
    pointer-events:none;
  }
  .intro-word-part{
    position:absolute;left:0;top:0;
    width:100%;height:100%;
    opacity:0;
    will-change:transform,opacity;
  }
  /* O spans 451-617 of the 1024px artwork (ring + clearance) */
  .intro-word-left{-webkit-clip-path:inset(0 55.9% 0 0);clip-path:inset(0 55.9% 0 0);}
  .intro-word-right{-webkit-clip-path:inset(0 0 0 60.3%);clip-path:inset(0 0 0 60.3%);}

  .intro-corner{
    position:absolute;
    z-index:5;
    font-family:var(--font-display);
    font-size:.62rem;
    font-weight:600;
    letter-spacing:.26em;
    text-transform:uppercase;
    color:rgba(242,236,223,0.5);
    opacity:0;
    transform:translateY(8px);
    animation:introFadeIn .9s var(--ease-out) .4s forwards;
    transition:opacity .45s ease;
  }
  .intro-loader.is-opening .intro-corner{opacity:0 !important;animation:none;}
  .intro-corner-left{top:calc(60px + 2.6rem);left:calc(60px + 2.6rem);}
  .intro-corner-right{top:calc(60px + 2.6rem);right:calc(60px + 2.6rem);text-align:right;}
  @keyframes introFadeIn{ to{opacity:1;transform:none;} }

  /* The hero waits slightly zoomed-in behind the field and settles as the O
     opens (JS eases the scale; this is only the resting start value). */
  html.intro-active .hero{transform:scale(1.14);transform-origin:var(--intro-origin,50% 50%);}
  html.intro-active .site-logo{animation:none;opacity:0;}

  @media (max-width:700px){
    .intro-corner{font-size:.56rem;letter-spacing:.2em;}
    .intro-corner-left{top:calc(60px + 1.8rem);left:calc(60px + 1.6rem);}
    .intro-corner-right{top:calc(60px + 1.8rem);right:calc(60px + 1.6rem);}
    .intro-word{width:min(84vw,440px);height:calc(min(84vw,440px) * 200 / 1024);}
  }

  /* ============================================================
     HOME.CSS — homepage only (loaded after core.css)
     Intro (unchanged, above) → Tokens & ground →
     Grid + type primitives → Captions, links →
     Hero → Statement → Difference → Dark sections → Residences →
     Founders → Closing (+ where we build) → Colophon →
     Nav on paper → Motion → Responsive → Reduced motion
     ============================================================ */

  /* ---------- TOKENS & GROUND ----------
     Headlines are the site's original display face, Jost Light (core.css
     @font-face), set in sentence case at large sizes.
     One continuous paper ground for the whole page. Type is mahogany; the
     secondary tone is mahogany at 65% (≈ 6:1 on paper). Gold is reserved for
     rules, the ring motif and hover — never for text on the light ground. */
  body.home{
    --hp-paper:#F2ECDF;
    --hp-panel:#FBF8F1;
    --hp-ink:#1A1413;
    --hp-ink-2:rgba(26,20,19,0.65);
    --hp-rule:rgba(26,20,19,0.16);
    --hp-gold:#B9975B;
    --hp-sand-2:rgba(242,236,223,0.72);
    --hp-serif:'Jost','Archivo',Helvetica,Arial,sans-serif;
    --hp-sans:'Inter',Helvetica,Arial,sans-serif;
    --hp-ease:cubic-bezier(.16,1,.3,1);
    --hp-d1:.7s;
    --hp-d2:.9s;
    --hp-d3:1.1s;
    --hp-margin:clamp(1.25rem,4vw,4.5rem);
    --hp-gap:clamp(1rem,2vw,2rem);
    /* one vertical unit; neighbouring paper sections pay it once, not twice */
    --hp-section:clamp(2.5rem,4.5vw,4.25rem);
    /* how far the residences' pictures start on paper before the dark ground
       begins beneath them */
    --hp-res-bleed:clamp(9rem,21vw,19rem);
    background:var(--hp-paper);
    color:var(--hp-ink);
    font-family:var(--hp-sans);
    font-weight:400;
    font-size:1rem;
    line-height:1.6;
  }
  body.home::before{display:none;}
  /* core.css justifies + hyphenates paragraphs site-wide; the homepage is
     set left, unhyphenated, everywhere. */
  body.home p,
  body.home li,
  body.home dd,
  body.home figcaption,
  body.home blockquote,
  body.home address{text-align:left;hyphens:manual;-webkit-hyphens:manual;text-wrap:pretty;}
  body.home address{font-style:normal;}
  body.home ::selection{background:rgba(185,151,91,0.35);}
  body.home :focus-visible{outline:2px solid currentColor;outline-offset:6px;border-radius:2px;}

  /* ---------- GRID + TYPE PRIMITIVES ---------- */
  .hp-grid{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--hp-gap);
    padding-left:var(--hp-margin);
    padding-right:var(--hp-margin);
  }
  .hp-section{position:relative;}
  .hp-h2{
    font-family:var(--hp-serif);
    font-weight:300;
    font-size:clamp(1.9rem,3.2vw,3.1rem);
    line-height:1.08;
    letter-spacing:-.01em;
    margin-top:1rem;
  }
  .hp-media{position:relative;overflow:hidden;background:#E6DECD;}
  .hp-img{display:block;width:100%;height:auto;object-fit:cover;}

  /* ---------- CAPTIONS (architecture-book style) ---------- */
  .hp-cap{
    font-size:.8rem;
    line-height:1.55;
    font-variant-numeric:tabular-nums;
    color:var(--hp-ink-2);
  }
  .hp-cap b{font-weight:500;color:var(--hp-ink);}

  /* ---------- LINKS: thin underline + arrow, no boxes ---------- */
  .hp-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:.55em;
    font-family:var(--hp-sans);
    font-size:1rem;
    font-weight:400;
    line-height:1.3;
    color:inherit;
    padding-bottom:.3em;
    white-space:nowrap;
  }
  .hp-link::after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    background:currentColor;
    opacity:.35;
  }
  .hp-link::before{
    content:"";
    position:absolute;
    left:0;right:0;bottom:0;
    height:1px;
    z-index:1;
    background:var(--hp-gold);
    transform:scaleX(0);
    transform-origin:left center;
    transition:transform var(--hp-d1) var(--hp-ease);
  }
  .hp-arrow{
    flex:none;
    width:.9em;height:.9em;
    transition:transform var(--hp-d1) var(--hp-ease);
  }
  .hp-link:hover::before,
  .hp-link:focus-visible::before,
  .hp-res:hover .hp-link::before,
  .hp-res:focus-visible .hp-link::before{transform:scaleX(1);}
  .hp-link:hover .hp-arrow,
  .hp-link:focus-visible .hp-arrow,
  .hp-res:hover .hp-arrow,
  .hp-res:focus-visible .hp-arrow{transform:translateX(4px);}

  /* ---------- HERO (dark moment 1) ---------- */
  .hero{
    position:relative;
    height:100svh;
    min-height:600px;
    width:100%;
    overflow:hidden;
    background:var(--hp-ink);
    color:var(--hp-paper);
  }
  .hero video{
    position:absolute;inset:0;
    width:100%;height:112%;
    object-fit:cover;
    will-change:transform;
  }
  .hero::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(26,20,19,0.14) 0%, rgba(26,20,19,0) 26%, rgba(26,20,19,0.22) 48%, rgba(26,20,19,0.58) 72%, rgba(26,20,19,0.86) 100%);
    pointer-events:none;
  }
  .hero-content{
    position:absolute;
    left:0;right:0;bottom:0;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--hp-gap);
    align-items:end;
    padding:0 var(--hp-margin) clamp(2rem,5.5vh,3.6rem);
  }
  .hero-copy{grid-column:1 / span 8;}
  .hero-title{
    font-family:var(--hp-serif);
    font-weight:300;
    font-size:clamp(2.6rem,6vw,6.2rem);
    line-height:1.04;
    letter-spacing:-.012em;
    max-width:14ch;
    text-wrap:balance;
    text-shadow:0 6px 44px rgba(0,0,0,0.45);
  }
  .hero-line{margin-top:1.5rem;font-size:1rem;color:var(--hp-sand-2);text-shadow:0 2px 18px rgba(0,0,0,0.5);}
  .hero-aside{grid-column:9 / -1;justify-self:end;text-align:right;padding-bottom:.4rem;}
  .hero-aside .hp-link{font-size:.9rem;color:var(--hp-paper);white-space:normal;text-align:left;}
  /* Entrance: handed over by the intro (or immediate when it is skipped) */
  .hero-copy,.hero-aside{transition:opacity var(--hp-d2) var(--hp-ease), transform var(--hp-d2) var(--hp-ease);}
  .hero-aside{transition-delay:.25s;}
  html.intro-active .hero-copy,
  html.intro-active .hero-aside{opacity:0;transform:translateY(12px);}

  /* ---------- STATEMENT ----------
     One large justified block, centred on the page and spanning the grid;
     the emphasised phrases set in italic at a slightly heavier weight. The
     link sits on the block's own left edge. The measure (44ch) is taken on
     the wrapper, at the paragraph's size, so text and link share it. */
  .hp-statement{padding-top:calc(var(--hp-section) * 1.15);padding-bottom:var(--hp-section);}
  .hp-statement-inner{
    grid-column:1 / -1;
    justify-self:center;
    width:100%;
    max-width:44ch;
    font-family:var(--hp-serif);
    font-size:clamp(1.65rem,3.05vw,3.15rem);
  }
  /* body.home p sets text-align:left; scope this one to win */
  body.home .hp-statement-text{
    margin:0;
    text-align:left;
    text-align-last:left;
    text-wrap:pretty;
    hyphens:manual;
    font-weight:300;
    font-size:inherit;
    line-height:1.15;
    letter-spacing:-.015em;
  }
  .hp-statement-text em{font-style:normal;font-weight:500;}
  .hp-statement .hp-link{margin-top:2rem;}
  /* running text is justified from tablet up, ragged on phones */
  @media (min-width:768px){
    body.home .hp-statement-text{text-align:justify;}
    body.home .hp-bio{text-align:justify;hyphens:auto;-webkit-hyphens:auto;}
  }

  /* ---------- DARK SECTIONS (residences, colophon) ----------
     Not a flat fill. A soft radial glow, warmer at the top and falling to
     near-black at the edges (the light the other pages use), under a very
     fine film grain. Both sit below the content inside the section's own
     stacking context (isolation), so nothing else needs a z-index. */
  .hp-dark{
    position:relative;
    isolation:isolate;
    background:var(--hp-ink) radial-gradient(140% 110% at 50% -10%, #2A1F1C 0%, var(--hp-ink) 46%, #0E0A09 100%);
    color:var(--hp-paper);
  }
  /* same ground, glow rising from the bottom edge instead: the top edge is
     then the same near-black a .hp-dark block ends on, so two can stack */
  .hp-dark--up{background:var(--hp-ink) radial-gradient(140% 110% at 50% 110%, #2A1F1C 0%, var(--hp-ink) 46%, #0E0A09 100%);}
  .hp-dark::before{
    content:"";
    position:absolute;inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.07;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:180px 180px;
  }
  .hp-dark .hp-cap{color:var(--hp-sand-2);}
  .hp-dark .hp-cap b{color:var(--hp-paper);}
  .hp-dark .hp-media{background:#241C1A;}
  .hp-dark ::selection{background:rgba(185,151,91,0.5);}

  /* ---------- SELECTED RESIDENCES (slideshow) ----------
     A scroll-snap track: swipe or drag, or step with the Previous / Next
     text links. Slides sit at 68% width so the next one peeks in from the
     right margin; the track bleeds to the viewport edge on that side.
     The block has no straight top edge: the heading and the upper part of
     the pictures sit on paper, and the dark ground (glow, grain, ambient
     backdrop) begins --hp-res-bleed down, behind the photographs. */
  .hp-res-section{
    padding-top:0;
    padding-bottom:calc(var(--hp-section) * 1.2);
    background-color:transparent;
    background-size:100% calc(100% - var(--hp-res-bleed));
    background-position:0 100%;
    background-repeat:no-repeat;
  }
  .hp-res-section::before{top:var(--hp-res-bleed);}
  .hp-res-paper{
    position:absolute;left:0;right:0;top:0;
    height:var(--hp-res-bleed);
    pointer-events:none;
  }
  /* Ambient light from the pictures: behind the strip, a heavily blurred,
     darkened copy of the leading slide's photograph (home.js drops in the
     480px webp of each slide) washes the section in that picture's colour
     and cross-fades as the strip drifts. It sits under the glow's grain and
     behind a dark gradient, so the mahogany stays the ground and the type
     stays crisp. Oversized so the blur has no soft edge. */
  .hp-res-bg{
    position:absolute;inset:0;
    top:var(--hp-res-bleed);
    z-index:-2;
    overflow:hidden;
    pointer-events:none;
    /* fade out towards the foot so the founders' dark ground joins without an edge */
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }
  .hp-res-bg img{
    position:absolute;
    top:-15%;left:-15%;
    width:130%;height:130%;
    object-fit:cover;
    filter:blur(64px) saturate(1.3) brightness(.62);
    opacity:0;
    transition:opacity 1.8s var(--hp-ease);
  }
  .hp-res-bg img.is-on{opacity:.72;}
  .hp-res-bg::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(26,20,19,0.50) 0%, rgba(26,20,19,0.06) 32%, rgba(26,20,19,0.06) 60%, rgba(26,20,19,0.66) 100%);
  }
  /* The heading is the section's one overlap: set large in ink on the paper
     part, it hangs over the top edge of the strip while the pictures drift
     beneath it. */
  .hp-res-head{grid-column:1 / -1;position:relative;z-index:2;pointer-events:none;}
  .hp-res-title{
    font-size:clamp(2.6rem,5.2vw,5.2rem);
    line-height:1.04;
    margin:0 0 -.42em;
    color:var(--hp-ink);
  }
  /* a breath of paper along the top of each slide keeps the overlapping ink
     type crisp over dark foliage */
  .hp-res-media::before{
    content:"";
    position:absolute;left:0;right:0;top:0;
    height:26%;
    z-index:1;
    pointer-events:none;
    background:linear-gradient(180deg, rgba(242,236,223,0.55) 0%, rgba(242,236,223,0) 100%);
  }
  /* folio line: counter, steps and the section link together on the left */
  .hp-res-foot{
    grid-column:1 / span 7;
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:1rem 2.4rem;
    margin-top:clamp(1.4rem,2.4vw,2rem);
  }
  .hp-res-controls{
    display:flex;
    align-items:baseline;
    gap:1.6rem;
  }
  .hp-res-count{
    font-size:.8rem;
    font-variant-numeric:tabular-nums;
    color:var(--hp-sand-2);
    margin-right:.4rem;
  }
  .hp-res-btn{
    font:inherit;
    font-size:.9rem;
    background:none;
    border:0;
    cursor:pointer;
    color:var(--hp-paper);
    padding-bottom:.3em;
  }
  .hp-res-btn[disabled]{opacity:.35;cursor:default;}
  .hp-res-btn[disabled]:hover::before{transform:scaleX(0);}
  .hp-res-btn[disabled]:hover .hp-arrow{transform:none;}
  .hp-arrow-back{transform:rotate(180deg);}
  .hp-link:hover .hp-arrow-back,
  .hp-link:focus-visible .hp-arrow-back{transform:rotate(180deg) translateX(4px);}
  .hp-res-list{
    grid-column:1 / -1;
    display:flex;
    gap:var(--hp-gap);
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    /* full bleed: the pictures run from edge to edge of the viewport, so
       they, not a straight line, are what meets the paper on the left */
    margin-left:calc(-1 * var(--hp-margin));
    margin-right:calc(-1 * var(--hp-margin));
    scroll-padding-left:0;
  }
  .hp-res-list::-webkit-scrollbar{display:none;}
  /* Flowing (JS, motion allowed): the strip drifts continuously and loops,
     so no snapping, no smooth-scroll fighting the drift, no end spacer. */
  .hp-res-list.is-flowing{scroll-snap-type:none;scroll-behavior:auto;}
  .hp-res-list.is-flowing::after{display:none;}
  /* the rail holds the slides in flow mode: full track width so the slide
     percentages still resolve against the track, translated by the
     sub-pixel remainder of the drift (home.js) */
  .hp-res-rail{
    display:flex;
    gap:var(--hp-gap);
    flex:0 0 100%;
    width:100%;
    min-width:0;
    will-change:transform;
    backface-visibility:hidden;
  }
  /* trailing spacer sized so the last slide can snap exactly to the left
     edge: slide + gap + spacer = one track width */
  .hp-res-list::after{content:"";flex:0 0 calc(32% - var(--hp-gap));}
  .hp-res-list:focus-visible{outline:2px solid var(--hp-paper);outline-offset:8px;}
  .hp-res{
    flex:0 0 68%;
    scroll-snap-align:start;
    display:block;
    color:inherit;
  }
  .hp-res figure{margin:0;}
  /* plates bleed, captions keep to the text margin */
  .hp-res .hp-cap{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:.5rem 1.5rem;
    margin-top:.8rem;
    padding-left:var(--hp-margin);
  }
  .hp-res .hp-link{font-size:.8rem;padding-bottom:.22em;flex:none;color:var(--hp-paper);}
  .hp-res .hp-img{aspect-ratio:3 / 2;}
  /* Pointer-only spotlight: a soft circular window that follows the cursor */
  @media (hover:hover) and (pointer:fine){
    .hp-res-media::after{
      content:"";
      position:absolute;inset:0;
      pointer-events:none;
      opacity:0;
      background:radial-gradient(circle clamp(10rem,18vw,18rem) at var(--sx,50%) var(--sy,50%), rgba(26,20,19,0) 0%, rgba(26,20,19,0) 55%, rgba(26,20,19,0.30) 100%);
      transition:opacity var(--hp-d1) var(--hp-ease);
    }
    .hp-res:hover .hp-res-media::after{opacity:1;}
  }

  /* ---------- FOUNDERS ----------
     Dark, continuing the residences' ground. Copy in the left five columns,
     vertically centred against a rounded picture card on the right; the
     founders' names sit over a gradient at the card's foot. */
  /* -1px: the residences' ground ends on a fractional pixel, which would
     otherwise show as a paper hairline between the two dark blocks */
  .hp-founders{margin-top:-1px;padding-top:calc(var(--hp-section) * .5 + 1px);padding-bottom:calc(var(--hp-section) * 1.1);align-items:center;}
  .hp-eyebrow{
    font-family:var(--hp-sans);
    font-size:.72rem;
    font-weight:500;
    letter-spacing:.22em;
    text-transform:uppercase;
    color:var(--hp-sand-2);
    margin:0;
  }
  .hp-founders-copy{grid-column:1 / span 5;align-self:center;}
  .hp-quote{
    margin-top:1.2rem;
    font-family:var(--hp-serif);
    font-weight:300;
    font-size:clamp(1.8rem,3.1vw,3.1rem);
    line-height:1.12;
    letter-spacing:-.01em;
    color:var(--hp-paper); /* core's blockquote rules are paper-agnostic */
    max-width:20ch;
  }
  .hp-quote p{margin:0;text-wrap:balance;}
  .hp-bio{margin-top:1.4rem;max-width:40ch;font-size:.95rem;line-height:1.65;color:var(--hp-sand-2);}
  .hp-bio + .hp-bio{margin-top:.9rem;}
  .hp-founders-card{grid-column:6 / -1;margin:0;}
  .hp-founders-frame{
    position:relative;
    overflow:hidden;
    border-radius:clamp(10px,1.1vw,18px);
    isolation:isolate;
  }
  .hp-founders-media .hp-img{aspect-ratio:16 / 10;}
  .hp-founders-overlay{
    position:absolute;
    inset:auto 0 0 0;
    padding:clamp(1.2rem,2.4vw,2.2rem);
    padding-top:clamp(5rem,12vw,9rem);
    background:linear-gradient(to top, rgba(14,10,9,0.82) 0%, rgba(14,10,9,0.45) 45%, rgba(14,10,9,0) 100%);
    color:var(--hp-paper);
  }
  .hp-pill{
    display:inline-block;
    font-family:var(--hp-sans);
    font-size:.68rem;
    font-weight:500;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:.4em .9em;
    border:1px solid rgba(242,236,223,0.4);
    border-radius:999px;
    background:rgba(26,20,19,0.28);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .hp-founders-names{
    margin:.9rem 0 0;
    font-family:var(--hp-serif);
    font-weight:300;
    font-size:clamp(1.4rem,2.3vw,2.3rem);
    line-height:1.1;
    letter-spacing:-.01em;
  }
  .hp-founders-role{margin:.5rem 0 0;font-size:.8rem;letter-spacing:.06em;color:var(--hp-sand-2);}
  .hp-founders-card .hp-cap{margin-top:.8rem;}

  /* ---------- CLOSING ----------
     Invitation and address on the left; where we build as the right-hand
     aside. No rule above: the title's size is the break. */
  .hp-close{padding-top:calc(var(--hp-section) * .6);padding-bottom:var(--hp-section);}
  .hp-close-title{
    grid-column:1 / -1;
    font-family:var(--hp-serif);
    font-weight:300;
    font-size:clamp(2.6rem,6vw,6rem);
    line-height:1.04;
    letter-spacing:-.012em;
  }
  .hp-close-cta{grid-column:1 / span 6;align-self:start;margin-top:clamp(1.4rem,2.6vw,2.2rem);}
  .hp-close-cta .hp-link{font-size:1.15rem;}
  .hp-close-contact{
    margin-top:1.4rem;
    font-size:.95rem;
    line-height:1.75;
    color:var(--hp-ink-2);
  }
  .hp-close-where{grid-column:8 / span 5;align-self:start;margin-top:clamp(1.4rem,2.6vw,2.2rem);}
  .hp-where-text{
    font-family:var(--hp-serif);
    font-weight:300;
    font-size:clamp(1.3rem,1.9vw,1.8rem);
    line-height:1.25;
    letter-spacing:-.01em;
    max-width:18ch;
  }
  .hp-close-where .hp-link{margin-top:1.1rem;}
  .hp-close-contact a,
  .hp-col-contact a,
  .hp-col-nav a{
    color:var(--hp-ink);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:.22em;
    text-decoration-color:rgba(26,20,19,0.3);
  }
  .hp-col-contact a,
  .hp-col-nav a{
    color:var(--hp-paper);
    text-decoration-color:rgba(242,236,223,0.35);
    transition:text-decoration-color var(--hp-d1) var(--hp-ease);
  }
  .hp-close-contact a:hover,
  .hp-col-contact a:hover,
  .hp-col-nav a:hover{text-decoration-color:var(--hp-gold);}

  /* ---------- COLOPHON (footer) ---------- */
  footer.hp-colophon{padding:calc(var(--hp-section) * .9) 0 calc(1.6rem + env(safe-area-inset-bottom, 0px));} /* viewport-fit=cover: keep clear of the home indicator */
  .hp-colophon-grid{row-gap:2.4rem;}
  .hp-col-brand{grid-column:1 / span 3;}
  .hp-col-logo{display:inline-block;}
  .hp-col-logo img{display:block;width:auto;height:1.6rem;}
  .hp-col-brand p{margin-top:1.1rem;font-size:.8rem;color:var(--hp-sand-2);}
  .hp-col-contact{grid-column:4 / span 5;font-size:.92rem;line-height:1.8;color:var(--hp-sand-2);}
  .hp-col-contact p + p{margin-top:.2rem;}
  .hp-col-social{display:flex;flex-wrap:wrap;gap:0 1.4rem;margin-top:.6rem;}
  .hp-col-nav{grid-column:9 / span 4;}
  .hp-col-nav ul{list-style:none;margin:0;padding:0;}
  .hp-col-nav li{font-family:var(--hp-serif);font-weight:300;font-size:1.2rem;line-height:1.6;}
  .hp-col-nav li a{text-decoration-color:transparent;}
  .hp-col-nav li a:hover{text-decoration-color:var(--hp-gold);}
  .hp-col-nav li a.is-current::before{
    content:"";
    display:inline-block;
    width:5px;height:5px;
    margin:0 .55rem 0 -.9rem;
    vertical-align:middle;
    border-radius:50%;
    background:var(--hp-gold);
  }
  .hp-col-bottom{
    grid-column:1 / -1;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:.6rem 1.5rem;
    margin-top:1.2rem;
    padding-top:1.2rem;
    border-top:1px solid rgba(242,236,223,0.10);
    font-size:.78rem;
    color:var(--hp-sand-2);
  }

  /* ---------- NAV ON PAPER ----------
     core.js mirrors .nav-on-light onto <body>. The white wordmark is
     invisible on paper wherever the bar has no mahogany fill, so darken it
     there (mobile bar is transparent; desktop only when not compact). */
  body.home.nav-on-light:not(.menu-open):not(.nav-compact) .site-logo-img{filter:brightness(.09);}
  @media (max-width:991px){
    body.home.nav-on-light:not(.menu-open) .site-logo-img{filter:brightness(.09);}
  }

  /* ---------- MOTION ----------
     Two reveals only: images open through a circle (echoing the intro), and
     large statements rise line by line out of word masks. JS assigns
     --hp-line per rendered line. Everything is opacity / transform /
     clip-path; nothing else animates on scroll. */
  /* The clip sits on the <picture>, not the observed wrapper: Chrome measures
     IntersectionObserver ratios against the clipped box, so clipping the
     wrapper itself would keep the ratio near zero and the reveal would never
     fire. */
  .js [data-hp-reveal="circle"] > :is(picture,img){
    display:block;
    clip-path:circle(6% at 50% 50%);
    transition:clip-path var(--hp-d3) var(--hp-ease);
  }
  .js [data-hp-reveal="circle"].is-in > :is(picture,img){clip-path:circle(75% at 50% 50%);}
  .js [data-hp-reveal="circle"].is-done > :is(picture,img){clip-path:none;transition:none;}
  .js [data-hp-reveal="lines"]:not(.is-split):not(.is-in){opacity:0;}
  .hp-w{
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
    padding:.14em 0 .18em;
    margin:-.14em 0 -.18em;
  }
  .hp-w > span{display:inline-block;}
  .js [data-hp-reveal="lines"] .hp-w > span{
    opacity:0;
    transform:translateY(12px);
    transition:opacity var(--hp-d2) var(--hp-ease), transform var(--hp-d2) var(--hp-ease);
    transition-delay:calc(var(--hp-line,0) * .11s);
  }
  .js [data-hp-reveal="lines"].is-in .hp-w > span{opacity:1;transform:none;}
  /* scrub: words sit in a light ink and fill one by one as --hp-scrub
     (set by home.js from the scroll position) runs from 0 to 1. Without JS
     the text is simply full ink. */
  /* each word fades up over a three-word band, so the fill reads as a
     visible wave: faint ink rising slightly into place */
  .js [data-hp-reveal="scrub"].is-split .hp-w > span{
    --hp-f:clamp(0, calc((var(--hp-scrub,0) * (var(--hp-n,1) + 2) - var(--hp-i,0)) / 3), 1);
    opacity:calc(.1 + .9 * var(--hp-f));
    transform:translateY(calc((1 - var(--hp-f)) * .22em));
    transition:opacity .35s linear, transform .35s var(--hp-ease);
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:1023px){
    body.home{--hp-res-bleed:clamp(8rem,22vw,15rem);}
    .hp-res{flex-basis:76%;}
    .hp-res-list::after{flex-basis:calc(24% - var(--hp-gap));}
    .hp-res-foot{grid-column:1 / span 6;}
    .hp-founders-copy{grid-column:1 / span 5;}
    .hp-founders-card{grid-column:6 / -1;}
    .hp-close-cta{grid-column:1 / span 7;}
    .hp-close-where{grid-column:8 / span 5;}
    .hp-col-brand{grid-column:1 / -1;}
    .hp-col-contact{grid-column:1 / span 6;}
    .hp-col-nav{grid-column:7 / span 6;}
  }
  @media (max-width:767px){
    body.home{--hp-gap:.9rem;}
    .hero{min-height:560px;}
    .hero-content{padding-bottom:1.9rem;}
    .hero-copy{grid-column:1 / -1;}
    .hero-aside{grid-column:1 / -1;justify-self:start;text-align:left;margin-top:1.7rem;padding-bottom:0;}
    .hero-line{margin-top:1.1rem;font-size:.95rem;}
    body.home{--hp-res-bleed:clamp(7rem,32vw,9rem);}
    /* no overlap on phones: type and picture would compete */
    .hp-res-title{font-size:clamp(1.9rem,3.2vw,3.1rem);margin:0 0 1.2rem;}
    .hp-res-media::before{display:none;}
    .hp-res-section{padding-bottom:calc(var(--hp-section) + 1.25rem);}
    .hp-res-foot{grid-column:1 / -1;}
    /* a lighter blur on phones: the layer is repainted on every cross-fade */
    .hp-res-bg img{filter:blur(36px) saturate(1.3) brightness(.62);}
    .hp-res-controls{gap:1.2rem;}
    .hp-res{flex-basis:86%;}
    .hp-res-list::after{flex-basis:calc(14% - var(--hp-gap));}
    .hp-res .hp-cap{flex-wrap:wrap;}
    /* copy first, card full width beneath */
    .hp-founders{padding-top:calc(var(--hp-section) * .4 + 1px);}
    .hp-founders-copy{grid-column:1 / -1;}
    .hp-founders-card{grid-column:1 / -1;margin-top:2rem;}
    .hp-founders-media .hp-img{aspect-ratio:4 / 3;}
    .hp-founders-overlay{padding-top:4.5rem;}
    .hp-close-cta,
    .hp-close-where{grid-column:1 / -1;}
    .hp-close-where{margin-top:1.8rem;}
    .hp-col-contact,
    .hp-col-nav{grid-column:1 / -1;}
    .hp-col-nav li a.is-current::before{margin-left:0;}
  }

  /* ---------- REDUCED MOTION: everything is simply there ---------- */
  @media (prefers-reduced-motion: reduce){
    .js [data-hp-reveal="circle"] > :is(picture,img),
    .js [data-hp-reveal="circle"].is-in > :is(picture,img){clip-path:none;transition:none;}
    .js [data-hp-reveal="lines"]:not(.is-split):not(.is-in){opacity:1;}
    .js [data-hp-reveal="lines"] .hp-w > span{opacity:1;transform:none;transition:none;}
    .js [data-hp-reveal="scrub"].is-split .hp-w > span{opacity:1;transform:none;transition:none;}
    .hero-copy,.hero-aside,
    html.intro-active .hero-copy,
    html.intro-active .hero-aside{opacity:1;transform:none;transition:none;}
    .hp-link::before,.hp-arrow,
    .hp-res-media::after,.hp-res-bg img,
    .hp-close-contact a,.hp-col-contact a,.hp-col-nav a{transition:none;}
  }