/* THE TOOLKIT — the front door (2026-07-17).
   The homepage performs the house. The overture plays the build once on
   arrival — shell, first fix, the bench, the room — each state wiped in
   behind the travelling brass edge, unasked, in about five seconds. Then
   the page opens like the business does: the house, the nine doors, the
   rooms on record, the origin, the programme, the bench, the journal, the
   table. Scene register throughout ("this wins, run it throughout").
   Depends on main.css (tokens, chrome) and scene.css (bands). This file
   owns only the homepage's own moves. No inline scripts; js/home.js
   drives everything. */

/* overscroll at both ends lands on forest, never bare paper — but only inside
   the stage; above 1460 the HOLD-THE-LINE flanks (main.css, owner ruling
   2026-07-11) keep their warm bone and grain */
@media(max-width:1460px){html{background:var(--forest)}}
body.home{padding-top:0}

h1,h2{text-wrap:balance}
.b .lede,.b p,.qa p{text-wrap:pretty}

/* ============ the overture ============ */
/* Default (no JS, or reduced motion): a static, captioned sequence —
   nothing pins, nothing hides. js/home.js promotes it to the live show. */
.ov{position:relative;padding:0;background:var(--forest)}
.ov-pin{display:grid;gap:0}
.ov-frame{position:relative;margin:0}
.ov-frame img{width:100%;height:52vh;object-fit:cover;display:block}
.ov-frame figcaption{padding:10px var(--mx) 26px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.ov-intro{padding:calc(85px + 8vh) var(--mx) 7vh;background:var(--forest);color:var(--bone);order:-1}
.ov-edge,.ov-rail,.ov-caps,.ov-cue{display:none}

/* live: one screen, the build plays itself */
.ov-live{height:100svh;min-height:620px}
.ov-live .ov-pin{position:absolute;inset:0;overflow:hidden;display:block}
.ov-live .ov-frame{position:absolute;inset:0;will-change:clip-path}
.ov-frame picture{display:contents}
.ov-live .ov-frame img{width:100%;height:100%;object-fit:cover}
.ov-live .ov-frame figcaption{display:none}
.ov-live .ov-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,31,25,.42),rgba(20,31,25,.1) 34%,rgba(20,31,25,.6) 82%)}
.ov-live .ov-frame:first-child{clip-path:inset(0 0% 0 0)}
.ov-live .ov-frame:not(:first-child){clip-path:inset(0 100% 0 0)}

.ov-live .ov-edge{display:block;position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--brass);opacity:0;z-index:3;
  box-shadow:0 0 22px rgba(194,160,79,.55)}

.ov-live .ov-intro{display:flex;flex-direction:column;justify-content:flex-end;position:absolute;inset:0;z-index:4;background:none;
  padding:0 var(--mx) 12vh;order:0}
.ov-intro .idx{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;color:var(--bone);opacity:.78}
/* THE OPENER SIZE, LOCKED (owner ruling 2026-07-18, second pass): every page
   opener on this site sets at clamp(2.4rem,6vw,4.4rem) — homepage, projects,
   services, journal and the service pages, identical at every width. No page
   is ever larger than another. Do not give this H1 its own scale again. */
.ov-intro h1{font-family:var(--sans);font-weight:300;font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:.08em;text-transform:uppercase;
  line-height:1.05;margin:16px 0 0}
.ov-intro .stand{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.15rem,2.3vw,1.65rem);margin:22px 0 0;
  max-width:24em;opacity:.94;color:var(--bone)}
.ov-intro .line{margin:26px 0 0;font-family:var(--mono);font-size:.625rem;letter-spacing:.18em;text-transform:uppercase;opacity:.85;color:var(--bone)}
.ov-intro .acts{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin:28px 0 0}
.ov-intro .tel{font-family:var(--mono);font-size:.6875rem;letter-spacing:.14em;color:var(--bone);opacity:.85}

/* stage furniture: caption top-right, rail bottom-right, cue after the show */
.ov-live .ov-caps{display:block;position:absolute;right:var(--mx);top:calc(85px + 3vh);z-index:4;text-align:right}
.ov-cap{display:block;position:absolute;right:0;top:0;white-space:nowrap;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone);opacity:0;transition:opacity .5s var(--ease)}
.ov-cap.on{opacity:.75}

.ov-live .ov-rail{display:block;position:absolute;right:var(--mx);bottom:5vh;z-index:4}
.ov-rail ol{list-style:none;margin:0;padding:0;display:flex;gap:clamp(16px,2.4vw,34px)}
.ov-rail li{font-family:var(--mono);font-size:.625rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bone);opacity:.4;
  padding-top:10px;border-top:1px solid var(--hairline-bone);min-width:92px;transition:opacity .45s var(--ease),border-color .45s var(--ease)}
.ov-rail li.on{opacity:1;border-top-color:var(--brass)}

.ov-live .ov-cue{display:block;position:absolute;right:var(--mx);bottom:calc(5vh + 58px);z-index:4;font-family:var(--mono);
  font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);opacity:0;transition:opacity .9s var(--ease)}
.ov-done .ov-cue{opacity:.8}
.ov-cue::before{content:"";display:inline-block;width:34px;height:1px;background:var(--brass);vertical-align:middle;margin-right:12px}

/* ============ the nine doors — a ledger, not a directory ============ */
.lgx{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px)}
.lg{list-style:none;margin:clamp(26px,4vh,42px) 0 0;padding:0;border-bottom:1px solid var(--hairline-bone)}
.lg-row{display:grid;grid-template-columns:44px minmax(0,15em) minmax(0,1fr) 22px;gap:14px;align-items:baseline;
  padding:19px 0 17px;border-top:1px solid var(--hairline-bone);text-decoration:none;color:inherit;position:relative}
.lg-row .n{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--bone);opacity:.5;transition:color .3s var(--ease),opacity .3s var(--ease)}
.lg-row .nm{font-family:var(--sans);font-weight:400;font-size:.9375rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.lg-row .ln{font-size:.875rem;line-height:1.6;color:var(--bone);opacity:.62;transition:opacity .3s var(--ease)}
.lg-row .go{font-family:var(--sans);font-size:.8125rem;color:var(--bone);opacity:.45;justify-self:end;
  transition:transform .35s var(--ease),opacity .3s var(--ease),color .3s var(--ease)}
/* hover lights the BOTTOM line + the arrow, never the top (owner ruling 2026-07-20) */
.lg-row::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.lg-row:hover::before,.lg-row:focus-visible::before,.lg-row.is-lit::before{transform:scaleX(1)}
.lg-row:hover .n,.lg-row:focus-visible .n,.lg-row.is-lit .n{color:var(--brass);opacity:1}
.lg-row:hover .ln,.lg-row:focus-visible .ln,.lg-row.is-lit .ln{opacity:.92}
.lg-row:hover .go,.lg-row:focus-visible .go,.lg-row.is-lit .go{opacity:1;transform:translateX(5px);color:var(--brass)}
.lg-more{margin-top:clamp(22px,3.5vh,34px)}
.lg-more a{font-family:var(--sans);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}
.b--bone .lg-more a{color:var(--green)}

/* the preview window — desktop only, crossfades with the reader's hand */
.lg-view{display:none}
@media(min-width:1100px) and (hover:hover){
  .lgx{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
  .lg-view{display:block;position:sticky;top:calc(85px + 6vh);margin-top:clamp(26px,4vh,42px)}
  .lg-view .win{position:relative;aspect-ratio:3/2;overflow:hidden;background:rgba(20,31,25,.55)}
  .lg-view .win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s var(--ease)}
  .lg-view .win img.on{opacity:1}
  .lg-view .cap{display:block;margin-top:12px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
    color:var(--bone);opacity:.6;min-height:1.4em}
}

/* ============ the rooms on record — an asymmetric folio ============ */
.fol{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,2.5vw,32px);margin-top:clamp(28px,4vh,44px)}
.fol a{display:block;text-decoration:none;color:inherit}
.fol .side{display:grid;gap:clamp(18px,2.5vw,32px);align-content:start}
.fol figure{margin:0;overflow:hidden}
.fol img{width:100%;object-fit:cover;display:block;transition:transform .8s var(--ease)}
.fol .feat img{aspect-ratio:4/3;height:100%}
.fol .feat figure{height:calc(100% - 30px)}
.fol .side img{aspect-ratio:16/10}
.fol a:hover img,.fol a:focus-visible img{transform:scale(1.04)}
.fol figcaption{margin-top:12px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);
  display:inline-block;position:relative;padding-bottom:6px}
.fol figcaption::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.fol a:hover figcaption::after,.fol a:focus-visible figcaption::after{transform:scaleX(1)}
.fol-note{margin:clamp(30px,5vh,46px) 0 0;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone);line-height:2;max-width:74ch}
.fol-note a{color:var(--green);white-space:nowrap}

/* ============ the origin — we have probably met ============ */
.org-plate{margin:0}
.org-plate img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.org-plate figcaption{margin-top:12px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.org-link{display:inline-block;margin-top:1.8em;font-family:var(--sans);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--green)}

/* ============ the programme — five chips, one line each ============ */
.prg{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,26px);margin-top:clamp(30px,5vh,48px)}
.prg li{list-style:none}
.prg figure{margin:0;overflow:hidden}
.prg img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.prg .n{display:block;margin-top:14px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--brass)}
.prg .st{display:block;margin-top:8px;font-family:var(--sans);font-weight:400;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone)}
.prg p{margin:10px 0 0;font-size:.8125rem;line-height:1.7;color:var(--bone);opacity:.72}
.prg-close{margin:clamp(44px,7vh,64px) auto 0;max-width:30em;text-align:center;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.15rem,2.3vw,1.55rem);color:var(--bone)}

/* ============ the workshop — the bench behind every room ============ */
.ws-plates{display:grid;grid-template-columns:7fr 5fr;gap:clamp(16px,2vw,28px);align-items:start}
.ws-plates figure{margin:0;overflow:hidden}
.ws-plates img{width:100%;object-fit:cover;display:block}
.ws-plates .a img{aspect-ratio:3/2}
.ws-plates .bfig{margin-top:clamp(28px,4vh,52px)}
.ws-plates .bfig img{aspect-ratio:4/5}
.ws-plates figcaption{margin-top:10px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}
.ws-copy .forword{margin-top:2em;padding-top:1.6em;border-top:1px solid var(--hairline)}
.ws-copy .forword .fw{font-family:var(--sans);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--stone);display:block}
.ws-copy .forword p{margin:.9em 0 0;font-size:.9375rem;line-height:1.85;color:var(--green)}
.ws-visit{margin-top:2em;font-size:.9375rem;line-height:1.85;color:var(--green)}

/* ============ the journal — three essays and a reading corner ============ */
.jr-list{list-style:none;margin:clamp(24px,4vh,36px) 0 0;padding:0;border-bottom:1px solid var(--hairline)}
.jr-list a{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:14px;align-items:baseline;padding:18px 0 16px;
  border-top:1px solid var(--hairline);text-decoration:none;color:inherit;position:relative}
.jr-list .n{font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;color:var(--stone);transition:color .3s var(--ease)}
.jr-list .t{font-family:var(--serif);font-weight:300;font-size:clamp(1.05rem,1.9vw,1.3rem);line-height:1.4;color:var(--green)}
.jr-list .go{font-size:.8125rem;color:var(--green);opacity:.45;justify-self:end;transition:transform .35s var(--ease),opacity .3s var(--ease),color .3s var(--ease)}
.jr-list a::before{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--brass);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.jr-list a:hover::before,.jr-list a:focus-visible::before{transform:scaleX(1)}
.jr-list a:hover .n,.jr-list a:focus-visible .n{color:var(--brass)}
.jr-list a:hover .go,.jr-list a:focus-visible .go{opacity:1;transform:translateX(5px);color:var(--brass)}
.jr-peek{margin:0;overflow:hidden}
.jr-peek img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.jr-peek figcaption{margin-top:10px;font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone)}

/* ============ the invitation, extended ============ */
.invite .say{text-wrap:balance}
.invite .sub{margin:1.6em 0 0;font-size:.9375rem;line-height:1.85;max-width:56ch;color:var(--bone);opacity:.85}
.invite .em{font-family:var(--sans);font-size:.6875rem;letter-spacing:.24em;text-transform:uppercase;color:var(--bone)}

/* anchors clear the fixed header */
[id]{scroll-margin-top:96px}

/* gentle drift on band plates — depth, not spectacle (home.js).
   The wrap clips ONLY the media; captions live outside it, never painted over. */
.drift-wrap{display:block;overflow:hidden}
.drift-wrap img.plx{transform:scale(1.1);will-change:transform}
.ws-plates .drift-wrap,.org-plate .drift-wrap{display:block}

/* ============ small screens ============ */
@media(max-width:1099px){
  .fol{grid-template-columns:1fr}
  .fol .feat figure{height:auto}
  .fol .feat img{aspect-ratio:3/2;height:auto}
}
@media(max-width:880px){
  .ov-live{min-height:560px}
  /* no mobile override — the locked clamp already matches every other page */
  .ov-live .ov-caps{display:none}
  .ov-live .ov-cue{display:none}
  .ov-rail li{min-width:0}
  .ov-rail ol{gap:12px}
  .ov-live .ov-rail{left:var(--mx);right:auto;bottom:4vh}
  .ov-live .ov-intro{padding-bottom:calc(4vh + 64px)}
  .ov-frame img{height:38vh}
  .lg-row{grid-template-columns:34px minmax(0,1fr) 18px;grid-template-rows:auto auto;gap:4px 12px;padding:16px 0 15px}
  .lg-row .n{grid-column:1;grid-row:1}
  .lg-row .nm{grid-column:2;grid-row:1;font-size:.875rem}
  .lg-row .ln{grid-column:2;grid-row:2;font-size:.8125rem}
  .lg-row .go{grid-column:3;grid-row:1}
  .prg{grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,30px)}
  .prg li:last-child{grid-column:1/-1}
  .ws-plates{grid-template-columns:1fr}
  .ws-plates .bfig{margin-top:0}
  .jr-list a{grid-template-columns:34px minmax(0,1fr) 18px}
}