/* ==========================================================================
   THE DISTRICT — Direction B
   Near-black canvas, Swiss grotesque set large in sentence case, full-bleed
   imagery, hairline rules. Deliberately the opposite register to the existing
   site: no cream, no poster-condensed caps, no rounded white cards.
   ========================================================================== */

:root{
  --void:    #0A0A09;
  --void-2:  #131312;
  --void-3:  #1B1B19;
  --bone:    #EDEBE5;
  --ash:     #8C8C84;
  --ash-dim: #5E5E58;
  --hair:    rgba(237,235,229,.13);
  --hair-2:  rgba(237,235,229,.26);
  --moss:    #93A277;

  --disp: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --gut: clamp(1.15rem, 4vw, 4rem);
  --sec: clamp(5rem, 11vw, 11rem);
  --ease: cubic-bezier(.19,1,.22,1);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; margin-top:0 !important }

/* Hide WordPress Admin Bar */
#wpadminbar{ display:none !important }

body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--disp);
  font-weight:400;
  font-size:1rem;
  line-height:1.6;
  letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
::selection{ background:var(--bone); color:var(--void) }
:focus-visible{ outline:1px solid var(--bone); outline-offset:4px }

.shell{ width:100%; max-width:1560px; margin-inline:auto; padding-inline:var(--gut) }
.section{ padding-block:var(--sec) }
.hair-rule{ height:1px; background:var(--hair); border:0; margin:0 }

/* --- type -------------------------------------------------------------- */

.t-mega{
  font-size:clamp(2.6rem, 8.2vw, 8.5rem);
  font-weight:500; line-height:.94; letter-spacing:-.042em; margin:0;
}
.t-lg{
  font-size:clamp(1.9rem, 4.6vw, 4.2rem);
  font-weight:500; line-height:1.02; letter-spacing:-.035em; margin:0;
}
.t-md{
  font-size:clamp(1.35rem, 2.3vw, 2.1rem);
  font-weight:500; line-height:1.12; letter-spacing:-.028em; margin:0;
}
.t-sm{ font-size:1.05rem; font-weight:500; letter-spacing:-.018em; margin:0 }

.idx{
  font-family:var(--mono); font-size:.63rem; font-weight:400;
  letter-spacing:.26em; text-transform:uppercase; color:var(--ash);
  display:block;
}
.idx--moss{ color:var(--moss) }

.body-lg{ font-size:clamp(1rem,1.25vw,1.16rem); line-height:1.62; color:var(--ash); max-width:52ch; margin:0 }
.body-sm{ font-size:.92rem; line-height:1.62; color:var(--ash); margin:0 }

/* --- links / buttons ---------------------------------------------------- */

.lnk{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.92rem; font-weight:500; letter-spacing:-.01em;
  padding-bottom:.35rem; border-bottom:1px solid var(--hair-2); white-space:nowrap;
  transition:border-color .4s var(--ease), color .4s var(--ease);
}
.lnk:hover{ border-bottom-color:var(--bone) }
.lnk svg{ flex:0 0 auto; width:10px; height:10px; transition:transform .4s var(--ease) }
.lnk:hover svg{ transform:translate(3px,-3px) }

.pill{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.86rem; font-weight:500; letter-spacing:-.008em;
  padding:.75rem 1.35rem; border-radius:100px;
  border:1px solid var(--hair-2); background:transparent; color:var(--bone);
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease);
}
.pill:hover{ background:var(--bone); color:var(--void); border-color:var(--bone) }
.pill--fill{ background:var(--bone); color:var(--void); border-color:var(--bone) }
.pill--fill:hover{ background:transparent; color:var(--bone); border-color:var(--hair-2) }
.pill svg{ flex:0 0 auto; width:10px; height:10px; transition:transform .4s var(--ease) }
.pill:hover svg{ transform:translate(3px,-3px) }

/* --- header ------------------------------------------------------------- */

.hd{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:1.35rem;
  transition:background .5s var(--ease), padding .5s var(--ease);
}
.hd.solid{
  background:var(--void);
  border-bottom:1px solid var(--hair);
}
.hd.stuck{
  background:rgba(10,10,9,.86);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  padding-block:.9rem; border-bottom:1px solid var(--hair);
}
/* Soft top scrim keeps the nav legible on bright frames. It fades out
   rather than ending on a line, so it never reads as a cropped video. */
.hd::before{
  content:''; position:absolute; left:0; right:0; top:0; height:230%;
  background:linear-gradient(to bottom, rgba(10,10,9,.66) 0%, rgba(10,10,9,.28) 48%, rgba(10,10,9,0) 100%);
  pointer-events:none; transition:opacity .5s var(--ease);
}
.hd.stuck::before, .hd.solid::before{ opacity:0 }
.hd .shell{ position:relative; z-index:1 }

.hd__in{ display:flex; align-items:center; gap:2rem }

.wm{ display:flex; align-items:baseline; gap:.5rem; flex:0 0 auto }
.wm__a{ font-family:var(--mono); font-size:.56rem; letter-spacing:.3em; color:var(--ash); text-transform:uppercase }
.wm__b{ font-size:1.12rem; font-weight:600; letter-spacing:-.035em; text-transform:uppercase }

.hnav{ display:flex; gap:2rem; margin-inline:auto }
.hnav a{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ash);
  transition:color .35s var(--ease);
}
.hnav a:hover, .hnav a[aria-current="page"]{ color:var(--bone) }

.hact{ display:flex; align-items:center; gap:1rem; flex:0 0 auto }

.locsel{ position:relative }
.locsel__b{
  display:inline-flex; align-items:center; gap:.5rem; background:none;
  border:0; cursor:pointer; padding:.3rem 0;
  font-family:var(--mono); font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone);
}
.locsel__d{ width:5px; height:5px; border-radius:50%; background:var(--moss) }
.locsel__m{
  position:absolute; right:0; top:calc(100% + 1rem); min-width:270px;
  background:var(--void-2); border:1px solid var(--hair); padding:.3rem;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.locsel.open .locsel__m{ opacity:1; visibility:visible; transform:none }
.locsel__i{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:.75rem .85rem; color:var(--bone);
  transition:background .3s var(--ease);
}
.locsel__i:hover{ background:var(--void-3) }
.locsel__i b{ font-size:.9rem; font-weight:500; display:block; letter-spacing:-.015em }
.locsel__i span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; color:var(--ash); text-transform:uppercase }
.locsel__i em{ font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; font-style:normal; text-transform:uppercase; color:var(--ash-dim); white-space:nowrap }
.locsel__i[aria-current="true"] em{ color:var(--moss) }

.mbtn{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px;                 /* full tap target, not a 26px sliver */
  flex-direction:column; gap:5px;
  background:none; border:0; padding:0; cursor:pointer;
}
.mbtn span{ width:20px; height:1px; background:var(--bone); display:block; transition:transform .4s var(--ease), opacity .3s }
.mbtn[aria-expanded="true"] span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.mbtn[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.mbtn[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

/* Full-screen panel. The old version was only as tall as its links, so the
   hero showed through underneath it. */
.mnav{
  position:fixed; inset:0; z-index:99;   /* sibling of .hd (z-index:100) */
  background:var(--void);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  /* Mobile browsers resize the viewport as the address bar hides, so this
     panel is sometimes taller than the screen and sometimes not. Hiding the
     scrollbar keeps it looking identical either way, and overscroll
     containment stops a scroll gesture leaking to the page behind. */
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior:contain;
  opacity:0; visibility:hidden; transform:translateY(-10px);
  transition:opacity .4s var(--ease), transform .4s var(--ease), visibility .4s;
}
.mnav::-webkit-scrollbar{ width:0; height:0; display:none }
.mnav.open{ opacity:1; visibility:visible; transform:none }
.mnav__in{
  min-height:100%; padding-top:calc(74px + 1rem); padding-bottom:1.15rem;
  display:flex; flex-direction:column; gap:1rem;
}
.mnav__links{ display:flex; flex-direction:column }
.mnav__links a{
  padding:.66rem 0; border-bottom:1px solid var(--hair);
  font-size:1.12rem; font-weight:500; letter-spacing:-.03em; color:var(--bone);
}
.mnav__links a[aria-current="page"]{ color:var(--moss) }

.mnav__foot{ margin-top:auto }
.mnav__h{
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ash-dim); margin:0 0 .6rem;
}
.mnav__loc{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  width:100%; text-align:left; background:none; cursor:pointer; color:var(--bone);
  border:0; border-bottom:1px solid var(--hair); padding:.58rem 0;
}
.mnav__loc b{ font-size:1rem; font-weight:500; letter-spacing:-.02em; display:block }
.mnav__loc span span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash) }
.mnav__loc em{
  font-family:var(--mono); font-size:.54rem; letter-spacing:.16em; font-style:normal;
  text-transform:uppercase; color:var(--ash-dim); white-space:nowrap;
}
.mnav__loc[aria-current="true"] em{ color:var(--moss) }
.mnav__cta{ display:none }

/* --- hero --------------------------------------------------------------- */

.hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden }
.hero__bg{ position:absolute; inset:0 }
.hero__bg img,
.hero__bg video{ width:100%; height:100%; object-fit:cover; opacity:.78 }
.hero__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to right, rgba(10,10,9,.82) 0%, rgba(10,10,9,.34) 46%, rgba(10,10,9,.12) 100%),
    linear-gradient(to top, var(--void) 0%, rgba(10,10,9,.34) 34%, rgba(10,10,9,.26) 100%);
}
.hero__in{ position:relative; width:100%; padding-bottom:clamp(3rem,7vw,6rem); padding-top:9rem }
.hero__meta{ margin-bottom:clamp(1.5rem,3vw,2.25rem) }
.hero h1{ margin-bottom:clamp(2rem,4vw,3rem); max-width:13ch }
.hero__foot{ display:flex; justify-content:space-between; align-items:flex-end; gap:2.5rem; flex-wrap:wrap }
.hero__cta{ display:flex; gap:.75rem; flex-wrap:wrap }

.scroll-cue{
  display:flex; align-items:center; gap:.6rem;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ash-dim);
}
.scroll-cue i{ width:36px; height:1px; background:var(--hair-2); display:block; position:relative; overflow:hidden }
.scroll-cue i::after{
  content:''; position:absolute; inset:0; background:var(--bone);
  transform:translateX(-100%); animation:cue 2.6s var(--ease) infinite;
}
@keyframes cue{ 50%{ transform:translateX(0) } 100%{ transform:translateX(100%) } }

/* --- stat ledger -------------------------------------------------------- */

.ledger{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair) }
.ledger__c{ padding:clamp(1.5rem,3vw,2.5rem) 0; padding-right:2rem; border-right:1px solid var(--hair) }
.ledger__c:last-child{ border-right:0 }
.ledger__c:not(:first-child){ padding-left:clamp(1rem,2.5vw,2rem) }
.ledger__n{ font-size:clamp(2.2rem,4vw,3.4rem); font-weight:500; letter-spacing:-.05em; line-height:1; display:block; margin-bottom:.75rem }
.ledger__l{ font-size:.84rem; color:var(--ash); line-height:1.5 }

/* --- index rows (signature) --------------------------------------------- */

.index-list{ border-top:1px solid var(--hair) }

.irow{
  position:relative; display:grid;
  grid-template-columns:5rem minmax(0,1.1fr) minmax(0,1fr) 6rem;
  align-items:center; gap:2rem;
  padding-block:clamp(1.5rem,3.2vw,2.6rem);
  border-bottom:1px solid var(--hair);
  transition:padding-left .55s var(--ease), border-color .55s var(--ease);
}
.irow:hover{ padding-left:1.5rem; border-bottom-color:var(--hair-2) }
.irow::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--bone); transform:scaleY(0); transform-origin:top;
  transition:transform .55s var(--ease);
}
.irow:hover::before{ transform:scaleY(1) }

.irow__n{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--ash-dim); transition:color .5s var(--ease) }
.irow:hover .irow__n{ color:var(--moss) }
.irow__t{ font-size:clamp(1.4rem,2.8vw,2.4rem); font-weight:500; letter-spacing:-.035em; line-height:1.05 }
.irow__d{ font-size:.92rem; color:var(--ash); line-height:1.55 }
.irow__a{ justify-self:end; display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-dim); transition:color .5s var(--ease) }
.irow:hover .irow__a{ color:var(--bone) }

/* hover-preview image, desktop only */
.peek{
  position:fixed; top:0; left:0; width:min(24vw,340px); aspect-ratio:4/5;
  pointer-events:none; z-index:9999; opacity:0; overflow:hidden;
  border-radius:4px;
  box-shadow:0 12px 32px rgba(0,0,0,0.5);
  transition:opacity .35s var(--ease);
}
.peek.on{ opacity:1; }
.peek img{ position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; opacity:1; transition:opacity .3s var(--ease); }
.peek img.show{ opacity:1; }

/* --- full-bleed band ---------------------------------------------------- */

.band{ position:relative; height:min(78svh,760px); overflow:hidden }
@media (max-width:768px){ .band{ height:min(86svh,720px) } }
.band picture{ display:block; width:100%; height:100% }
.band img{ width:100%; height:100%; object-fit:cover; opacity:.86 }
/* Scrim only under the caption, so the image stays bright above it. */
.band::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:36%;
  background:linear-gradient(to top, rgba(10,10,9,.88), rgba(10,10,9,0));
  pointer-events:none;
}
.band__cap{
  z-index:1;
  position:absolute; left:var(--gut); bottom:clamp(1.5rem,3vw,2.5rem);
  font-family:var(--mono); font-size:.62rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--bone);
}

/* --- blueprint ---------------------------------------------------------- */

.bp{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:start }
.bp__sheet{ border:1px solid var(--hair); padding:clamp(1rem,2.2vw,2rem); background:var(--void-2) }
.bp__hd{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem }
.bp svg{ width:100%; height:auto; display:block }

.bp .z{ cursor:pointer }
.bp .z rect{ fill:transparent; stroke:var(--hair-2); stroke-width:1; transition:fill .45s var(--ease), stroke .45s var(--ease) }
.bp .z:hover rect{ stroke:var(--bone) }
.bp .z.on rect{ fill:var(--moss); stroke:var(--moss) }
.bp .z text{ font-family:var(--mono); font-size:8px; letter-spacing:.16em; fill:var(--ash); text-transform:uppercase; pointer-events:none; transition:fill .45s var(--ease) }
.bp .z .s{ font-size:6.5px; fill:var(--ash-dim) }
.bp .z:hover text, .bp .z:hover .s{ fill:var(--bone) }
.bp .z.on text, .bp .z.on .s{ fill:var(--void) }
.bp .ln{ stroke:var(--hair); stroke-width:.8; fill:none }
.bp .lnh{ stroke:var(--hair-2); stroke-width:1; fill:none }
.bp .an{ font-family:var(--mono); font-size:6.5px; letter-spacing:.16em; fill:var(--ash-dim) }

.bp__read{ position:sticky; top:6rem }
.bp__read h3{ margin:1rem 0 1.15rem }
.bp__stat{ display:flex; gap:2.5rem; padding-block:1.25rem; border-block:1px solid var(--hair); margin:1.5rem 0 }
.bp__stat span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-dim); display:block; margin-bottom:.4rem }
.bp__stat b{ font-size:1.15rem; font-weight:500; letter-spacing:-.02em }

/* --- editorial split ---------------------------------------------------- */

.ed{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center }
.ed__list{ list-style:none; margin:2rem 0 0; padding:0 }
.ed__list li{ display:flex; gap:1.5rem; padding-block:1.15rem; border-top:1px solid var(--hair) }
.ed__list li:last-child{ border-bottom:1px solid var(--hair) }
.ed__list b{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--ash-dim); flex:0 0 2rem; padding-top:.25rem; font-weight:400 }
.ed__list p{ margin:0; font-size:.95rem; color:var(--ash); line-height:1.55 }
.ed__list strong{ color:var(--bone); font-weight:500; display:block; letter-spacing:-.015em; margin-bottom:.2rem }

.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.duo img{ width:100%; aspect-ratio:3/4; object-fit:cover }
.duo img:first-child{ margin-top:clamp(2rem,5vw,5rem) }

/* --- ticker ------------------------------------------------------------- */

.tick{ overflow:hidden; border-block:1px solid var(--hair); padding-block:1.15rem }
.tick__r{ display:flex; width:max-content; animation:tk 52s linear infinite }
.tick__r span{ font-family:var(--mono); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--ash); padding-inline:1.6rem; display:inline-flex; align-items:center; gap:1.6rem }
.tick__r span::after{ content:''; width:3px; height:3px; background:var(--moss) }
@keyframes tk{ to{ transform:translateX(-50%) } }

/* --- closing ------------------------------------------------------------ */

.close-b{
  position:relative; overflow:hidden; text-align:center;
  padding-block:clamp(5rem,13vw,11rem);
}
.close-b__bg{ position:absolute; inset:0 }
.close-b__bg picture{ display:block; width:100%; height:100% }
.close-b__bg img{ width:100%; height:100%; object-fit:cover; opacity:.46 }
.close-b__bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(78% 68% at 50% 48%, rgba(10,10,9,.34) 0%, rgba(10,10,9,.88) 100%),
    linear-gradient(to bottom, var(--void) 0%, rgba(10,10,9,.35) 22%, rgba(10,10,9,.35) 78%, var(--void) 100%);
}
.close-b__in{ position:relative; max-width:none }

/* Outlined mega type — the background reads through the letterforms, so the
   headline carries the section without a solid block of colour. */
.close-b__t{
  font-size:clamp(2.4rem,10.5vw,10.5rem);
  font-weight:500; line-height:.88; letter-spacing:-.045em;
  margin:clamp(1rem,2vw,1.5rem) 0 clamp(1.25rem,2.5vw,2rem);
  color:var(--bone);
  text-wrap:balance;
}
@supports (-webkit-text-stroke: 1px #fff){
  .close-b__t{
    color:transparent;
    -webkit-text-stroke:clamp(1px,.13vw,2.5px) rgba(237,235,229,.9);
  }
}

.close-b__sub{
  font-size:clamp(.95rem,1.2vw,1.1rem); line-height:1.6; color:var(--ash);
  max-width:44ch; margin:0 auto;
}

.close-b__act{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.85rem,2vw,1.5rem); flex-wrap:wrap;
  margin-top:clamp(2rem,4vw,3rem);
}
.close-b__or{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--ash);
}

/* Stroke text loses too much legibility at small sizes — fill it instead. */
@media (max-width:640px){
  .close-b__t{ color:var(--bone); -webkit-text-stroke:0 }
  @supports (-webkit-text-stroke: 1px #fff){
    .close-b__t{ color:var(--bone); -webkit-text-stroke:0 }
  }
}

/* --- footer ------------------------------------------------------------- */

.ft{ border-top:1px solid var(--hair); padding-top:clamp(3rem,6vw,5rem) }
.ft__g{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.5fr; gap:clamp(2rem,4vw,3.5rem) }
.ft__h{ font-family:var(--mono); font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--ash-dim); margin:0 0 1.35rem }
.ft__l{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem }
.ft__l a{ font-size:.92rem; color:var(--ash); transition:color .35s var(--ease) }
.ft__l a:hover{ color:var(--bone) }
.ft__s{ display:grid; gap:1.35rem }
.ft__s div b{ display:block; font-size:.92rem; font-weight:500; letter-spacing:-.015em; margin-bottom:.3rem }
.ft__s div span{ display:block; font-size:.84rem; color:var(--ash) }
.ft__bar{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:clamp(3rem,6vw,5rem); padding-block:1.5rem; border-top:1px solid var(--hair) }
.ft__bar span{ font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ash-dim) }

/* --- reveal ------------------------------------------------------------- */

.rv{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease) }
.rv.in{ opacity:1; transform:none }

/* --- responsive --------------------------------------------------------- */

@media (max-width:1200px){
  .irow{ grid-template-columns:4rem minmax(0,1fr) 5rem }
  .irow__d{ display:none }
}
@media (max-width:992px){
  .hnav{ display:none }
  .mbtn{ display:flex }
  .peek{ display:none }
  .bp, .ed{ grid-template-columns:1fr }
  .bp__read{ position:static }
  .ledger{ grid-template-columns:1fr 1fr }
  .ledger__c:nth-child(2){ border-right:0 }
  .ledger__c:nth-child(-n+2){ border-bottom:1px solid var(--hair) }
  .ledger__c:nth-child(odd){ padding-left:0 }
  .ft__g{ grid-template-columns:1fr 1fr }
}
@media (max-width:640px){
  .locsel{ display:none }
  .hd__cta{ padding:.6rem 1rem; font-size:.78rem }
  .hd__in{ gap:1rem }
  .hero__bg::after{ background:linear-gradient(to top, var(--void) 4%, rgba(10,10,9,.5) 46%, rgba(10,10,9,.3) 100%) }
  .ledger{ grid-template-columns:1fr }
  .ledger__c{ border-right:0; border-bottom:1px solid var(--hair); padding-left:0 !important }
  .irow{ grid-template-columns:2.6rem minmax(0,1fr); gap:1rem }
  .irow__a{ display:none }
  .ft__g{ grid-template-columns:1fr }
  .duo img:first-child{ margin-top:0 }
}
@media (prefers-reduced-motion:reduce){
  .slider__track{ transition:none }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
  .rv{ opacity:1; transform:none }
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* --- page head ---------------------------------------------------------- */

.phead{ padding-top:clamp(8rem,14vw,13rem); padding-bottom:clamp(2.5rem,5vw,4.5rem) }
.phead h1{ margin:1.25rem 0 0; max-width:15ch }
.phead .body-lg{ margin-top:1.75rem }
.phead__row{ display:flex; justify-content:space-between; align-items:flex-start; gap:2.5rem; flex-wrap:wrap }
.phead__row .lnk{ margin-top:.35rem }

/* --- hairline cell grid ------------------------------------------------- */

.hgrid{ display:grid; border-top:1px solid var(--hair) }
.hgrid--3{ grid-template-columns:repeat(3,1fr) }
.hgrid--2{ grid-template-columns:repeat(2,1fr) }
.hcell{
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2.5vw,2.25rem);
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  transition:background .5s var(--ease);
}
.hgrid--3 .hcell:nth-child(3n){ border-right:0 }
.hgrid--2 .hcell:nth-child(2n){ border-right:0 }
.hgrid--3 .hcell:nth-child(3n+1),
.hgrid--2 .hcell:nth-child(2n+1){ padding-left:0 }
.hcell:hover{ background:var(--void-2) }
.hcell__n{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--ash-dim); display:block; margin-bottom:1rem }
.hcell h3{ font-size:1.12rem; font-weight:500; letter-spacing:-.022em; margin:0 0 .65rem }
.hcell p{ margin:0; font-size:.9rem; line-height:1.6; color:var(--ash) }

/* --- spec list ---------------------------------------------------------- */

.spec{ list-style:none; margin:0; padding:0 }
.spec li{
  display:flex; gap:1rem; align-items:baseline;
  padding-block:.85rem; border-top:1px solid var(--hair);
  font-size:.93rem; color:var(--ash); line-height:1.5;
}
.spec li:last-child{ border-bottom:1px solid var(--hair) }
.spec li::before{
  content:''; flex:0 0 auto; width:4px; height:4px; margin-top:.5rem;
  background:var(--moss); border-radius:50%;
}

/* --- spaces blocks ------------------------------------------------------ */

.sblock{ padding-block:clamp(4rem,8vw,8rem); border-top:1px solid var(--hair) }
.sblock__grid{
  display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:clamp(2rem,5vw,5rem); align-items:start;
}
.sblock__grid.flip{ grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr) }
.sblock__grid.flip .sblock__txt{ order:2 }

/* Text pins while the taller image stack scrolls past it — kills the well of
   empty space a short column leaves under itself. The grid item must stretch
   to the row height or the sticky child has no room to travel. */
.sblock__txt{ align-self:stretch }
.sblock__pin{ position:sticky; top:7rem }
.sblock__num{
  font-size:clamp(3rem,6vw,5.5rem); font-weight:500; letter-spacing:-.05em;
  line-height:1; color:var(--void-3); display:block; margin-bottom:.5rem;
}
.sblock__txt h2{ margin:0 0 1.35rem }
.sblock__txt .body-lg{ margin-bottom:2rem }
.sblock__txt .spec{ margin-bottom:2rem }

/* --- slider ------------------------------------------------------------- */

.slider{ position:relative }

.slider__stage{
  position:relative; overflow:hidden;
  background:var(--void-2);
}
.slider__track{
  display:flex;
  transition:transform .75s var(--ease);
  will-change:transform;
}
.slider__slide{
  flex:0 0 100%; margin:0; position:relative;
  aspect-ratio:4/3;
}
.slider__slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  -webkit-user-drag:none; user-select:none;
}
.slider__slide figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:clamp(2.5rem,6vw,4rem) clamp(1rem,2.5vw,1.75rem) clamp(.9rem,2vw,1.35rem);
  font-family:var(--mono); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--bone);
  background:linear-gradient(to top, rgba(10,10,9,.86), rgba(10,10,9,0));
  pointer-events:none;
}

.slider__nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:clamp(38px,4vw,54px); aspect-ratio:1; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  background:rgba(10,10,9,.3); border:1px solid rgba(237,235,229,.5);
  color:var(--bone);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .35s var(--ease), border-color .35s var(--ease),
             opacity .35s var(--ease);
}
.slider__nav:hover{ background:var(--bone); border-color:var(--bone); color:var(--void) }
.slider__nav[disabled]{ opacity:.28; cursor:default }
.slider__nav[disabled]:hover{ background:rgba(10,10,9,.3); border-color:rgba(237,235,229,.5); color:var(--bone) }
.slider__nav.prev{ left:clamp(.6rem,1.5vw,1.25rem) }
.slider__nav.next{ right:clamp(.6rem,1.5vw,1.25rem) }
.slider__nav svg{ width:14px; height:14px }

.slider__count{
  position:absolute; top:clamp(.75rem,1.5vw,1.25rem); right:clamp(.75rem,1.5vw,1.25rem);
  z-index:3; font-family:var(--mono); font-size:.62rem; letter-spacing:.18em;
  color:var(--bone); background:rgba(10,10,9,.55); backdrop-filter:blur(6px);
  padding:.3rem .65rem;
}
.slider__count b{ font-weight:400 }
.slider__count span{ color:var(--ash) }

.slider__thumbs{
  display:flex; gap:.6rem; margin-top:.6rem;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
}
.slider__thumbs::-webkit-scrollbar{ display:none }
.slider__thumb{
  flex:0 0 clamp(74px,9vw,116px); aspect-ratio:4/3;
  padding:0; border:0; cursor:pointer; background:none; position:relative;
  opacity:.4; transition:opacity .4s var(--ease);
}
.slider__thumb img{ width:100%; height:100%; object-fit:cover; display:block }
.slider__thumb::after{
  content:''; position:absolute; inset:auto 0 0 0; height:2px;
  background:var(--moss); transform:scaleX(0); transform-origin:left;
  transition:transform .45s var(--ease);
}
.slider__thumb:hover{ opacity:.75 }
.slider__thumb.on{ opacity:1 }
.slider__thumb.on::after{ transform:scaleX(1) }

@media (hover:none){
  .slider__nav{ background:rgba(10,10,9,.45) }
}

/* --- spaces blocks: layout --------------------------------------------- */

/* --- amenity blocks ----------------------------------------------------- */

.ablock{ border-top:1px solid var(--hair); padding-block:clamp(2.5rem,5vw,4rem) }
.ablock__g{ display:grid; grid-template-columns:5rem minmax(0,1fr) minmax(0,1.1fr); gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start }
.ablock__n{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--ash-dim) }
.ablock h2{ margin:0 0 1rem }
.ablock picture{ display:block; width:100% }
.ablock img{ width:100%; aspect-ratio:16/10; object-fit:cover }
@media (max-width:768px){ .ablock img{ aspect-ratio:4/5 } }

/* --- pricing tiers ------------------------------------------------------ */

.tiers{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair) }
.tier{
  padding:clamp(1.75rem,3vw,2.5rem) clamp(1.25rem,2vw,2rem);
  border-right:1px solid var(--hair); border-bottom:1px solid var(--hair);
  display:flex; flex-direction:column;
  transition:background .5s var(--ease);
}
.tier:last-child{ border-right:0 }
.tier:first-child{ padding-left:0 }
.tier:hover{ background:black }
.tier--pick{ background:unset }
.tier__tag{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--moss); display:block; margin-bottom:1.1rem; min-height:1em;
}
.tier h2{ font-size:1.3rem; font-weight:500; letter-spacing:-.028em; margin:0 0 .4rem }
.tier__for{ font-size:.85rem; color:var(--ash-dim); margin:0 0 1.5rem }
.tier__rate{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bone); padding-block:1rem; border-block:1px solid var(--hair); margin-bottom:1.35rem;
}
.tier .spec{ margin-bottom:2rem }
.tier .spec li:first-child{ border-top:0; padding-top:0 }
.tier .pill{ margin-top:auto; align-self:flex-start }

/* --- location blocks ---------------------------------------------------- */

.lblock{ border-top:1px solid var(--hair); padding-block:clamp(2.25rem,4.5vw,3.5rem) }
.lblock__g{ display:grid; grid-template-columns:6rem minmax(0,1fr) minmax(0,1.2fr) auto; gap:clamp(1.5rem,3vw,3rem); align-items:start }
.lblock__code{ font-family:var(--mono); font-size:.68rem; letter-spacing:.2em; color:var(--ash-dim) }
.lblock h2{ font-size:clamp(1.6rem,3vw,2.4rem); font-weight:500; letter-spacing:-.035em; margin:0 0 .5rem; line-height:1.05 }
.lblock__place{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash-dim) }
.lblock__st{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase;
  padding:.25rem .6rem; border:1px solid var(--hair-2); color:var(--ash); white-space:nowrap;
}
.lblock__st.live{ color:var(--moss); border-color:rgba(147,162,119,.45) }
.lblock dl{ margin:1.5rem 0 0; display:grid; grid-template-columns:1fr 1fr; gap:1.1rem }
.lblock dt{ font-family:var(--mono); font-size:.56rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ash-dim); margin-bottom:.3rem }
.lblock dd{ margin:0; font-size:.9rem; color:var(--ash) }

/* --- contact ------------------------------------------------------------ */

.cstrip{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--hair); border-bottom:1px solid var(--hair) }
.cstrip > div{ padding:clamp(1.5rem,3vw,2.25rem) 1.5rem; border-right:1px solid var(--hair) }
.cstrip > div:last-child{ border-right:0 }
.cstrip > div:first-child{ padding-left:0 }
.cstrip dt{ font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ash-dim); margin-bottom:.7rem }
.cstrip dd{ margin:0; font-size:.94rem; line-height:1.55 }

.fld label{
  display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ash-dim); margin-bottom:.6rem;
}
.fld input, .fld select, .fld textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--hair-2);
  padding:.65rem 0; font-family:var(--disp); font-size:1rem; color:var(--bone);
  letter-spacing:-.012em; border-radius:0;
  transition:border-color .4s var(--ease);
}
.fld textarea{ resize:vertical; min-height:92px }
.fld input:focus, .fld select:focus, .fld textarea:focus{ outline:none; border-bottom-color:var(--bone) }
.fld select{ appearance:none; cursor:pointer }
.fld select option{ background:var(--void-2); color:var(--bone) }
.fld input::placeholder{ color:var(--ash-dim) }
.fld input[type="date"]{ color-scheme:dark }

.fnote{ display:none; font-size:.92rem; margin-top:1.5rem; padding:1rem 1.25rem; border-left:2px solid var(--moss); background:var(--void-2); color:var(--bone) }
.fnote.ok{ display:block }
.fnote.err{ display:block; border-left-color:#c0563f }

/* --- interior responsive ------------------------------------------------ */

@media (max-width:992px){
  .hgrid--3{ grid-template-columns:1fr 1fr }
  .hgrid--3 .hcell:nth-child(3n){ border-right:1px solid var(--hair) }
  .hgrid--3 .hcell:nth-child(2n){ border-right:0 }
  .hgrid--3 .hcell{ padding-left:clamp(1.25rem,2.5vw,2.25rem) }
  .hgrid--3 .hcell:nth-child(2n+1){ padding-left:0 }
  .sblock__grid,
  .sblock__grid.flip{ grid-template-columns:1fr }
  .sblock__grid.flip .sblock__txt{ order:0 }
  .sblock__pin{ position:static }
  .slider__slide{ aspect-ratio:3/2 }
  .ablock__g{ grid-template-columns:1fr }
  .ablock__n{ margin-bottom:-.5rem }
  .tiers{ grid-template-columns:1fr 1fr }
  .tiers .tier:nth-child(2n){ border-right:0 }
  .tiers .tier:nth-child(3){ padding-left:0 }
  .lblock__g{ grid-template-columns:1fr }
  .cstrip{ grid-template-columns:1fr 1fr }
  .cstrip > div:nth-child(2n){ border-right:0 }
  .cstrip > div:nth-child(3){ padding-left:0 }
}
@media (max-width:640px){
  .hgrid--3, .hgrid--2, .tiers, .cstrip{ grid-template-columns:1fr }
  .hgrid .hcell, .tiers .tier, .cstrip > div{ border-right:0 !important; padding-left:0 !important; padding-right:0 }
  .lblock dl{ grid-template-columns:1fr }
  .slider__slide{ aspect-ratio:4/3 }
}

/* ==========================================================================
   Mobile responsiveness pass
   ========================================================================== */

@media (max-width:992px){
  /* .hnav carried the auto margin that pushed the actions right. With the nav
     hidden, everything collapsed to the left edge. */
  .hact{ margin-left:auto }
  .hd__in{ gap:.75rem }

  /* Comfortable tap targets — these were 16–30px tall. */
  .ft__l a{ display:inline-block; padding-block:.7rem }
  .lnk{ padding-block:.85rem }
  .wm{ padding-block:.6rem }
  .slider__nav{ width:44px }
  .slider__thumb{ min-height:44px }
  .locsel__i, .mnav__loc{ min-height:44px }

  /* Type that fell below a readable size once it scaled down. Mono labels
     hold at .7rem; anything carrying a full sentence goes higher. */
  .idx{ font-size:.7rem }
  .ft__bar span,
  .slider__slide figcaption,
  .band__cap,
  .lblock__place,
  .fld label,
  .bp__hint,
  .cstrip dt, .mnav__h, .ft__h,
  .tick__r span{ font-size:.7rem }
  .tier__rate{ font-size:.76rem }
}

/* The floor plan is a technical drawing — scaling it to 390px rendered its
   labels at 4px. It keeps its true size and scrolls sideways instead. */
@media (max-width:768px){
  .bp__sheet{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .bp__sheet svg{ min-width:620px }
  /* Drafting annotation was rendering near 6px once the viewBox scaled. */
  .bp .an, .bp .z .s{ font-size:8.5px }
  .bp .z text{ font-size:9.5px }
  .bp__hint{
    display:block; margin:.85rem 0 0;
    font-family:var(--mono); font-size:.6rem; letter-spacing:.18em;
    text-transform:uppercase; color:var(--ash-dim);
  }
}
.bp__hint{ display:none }

@media (max-width:560px){
  .hd__in{ gap:.6rem }
  .wm__b{ font-size:1.02rem }
  .idx{ letter-spacing:.16em }
  .slider__count{ font-size:.6rem }
}

/* --- hero video framing on narrow screens -------------------------------
   A 16:9 clip inside a full-height portrait hero survives as a 26% centre
   slice — one chair back, no room. Below 768px the video gets its own band
   at a sane aspect and the copy sits beneath it on solid ground.
   ------------------------------------------------------------------------ */
@media (max-width:768px){
  .hero{
    min-height:0; display:block;
    padding-bottom:clamp(2.5rem,7vw,3.5rem);
  }
  .hero__bg{ position:relative; inset:auto; aspect-ratio:4/3; width:100% }
  .hero__bg img,
  .hero__bg video{ opacity:.86 }
  .hero__bg::after{
    background:linear-gradient(to top, var(--void) 1%, rgba(10,10,9,.18) 45%, rgba(10,10,9,.42) 100%);
  }
  .hero__in{ padding-top:clamp(1.75rem,5vw,2.5rem); padding-bottom:0 }
  .hero__meta{ margin-bottom:1rem }
}