/* KOMETA Victor Serif — 55 Medium Italic, the single cut the reference uses.
   Licensed to Rockwell Park; file lives in assets/fonts/. */
/* STATIC Inter, self-hosted — Google serves the variable cut, which draws
   visibly lighter at text sizes; the reference site uses static Inter */
@font-face{font-family:'Inter';src:url('fonts/Inter-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/Inter-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{
  font-family:'Victor Serif';
  src:url('fonts/VictorSerif-55MediumItalic.woff2') format('woff2');
  font-weight:500;
  font-style:italic;
  font-display:swap;
}
/* ============================================================
   ROCKWELL PARK — v2
   Design system transcribed from fondationdesetatsunis.org:
   cream ground, hairline grid cells, Inter caps + serif-italic
   mixed display, vermilion star, bar-buttons + circle arrows,
   full-width color bands. Structure per wireframe template 01.
   ============================================================ */
:root{
  --cream:#F7F1E2;
  --ink:#1F1F1F;
  --verm:#DD573D;
  --sage:#A8C0B3;
  --white:#FFFFFF;
  --line:rgba(31,31,31,.18);
  --line-strong:rgba(31,31,31,.55);
  --line-light:rgba(255,255,255,.25);
  --sans:'Inter',sans-serif;   /* same stack as the reference — no system fallbacks */
  --serif:'Victor Serif',Georgia,serif;
  --pad:clamp(20px,3.4vw,48px);
  --navh:76px;
  /* shared button easing: gentle start, long soft landing — no snap on release */
  --pair-ease:cubic-bezier(.45,.05,.15,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  font-optical-sizing:none;   /* match the reference's static Inter weight */
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
::selection{background:var(--verm);color:var(--white)}
:focus-visible{outline:2px solid var(--verm);outline-offset:3px}
/* touch devices flag dialog auto-focus and poster taps as focus-visible —
   suppress the ring there (keyboard users on desktop keep it) */
@media(hover:none){
  .film-poster:focus-visible,.film-close:focus-visible,.play-circle:focus-visible{outline:none}
}

/* anchor targets clear the sticky nav so each section's headline lands
   just beneath it instead of hiding underneath */
section[id],footer[id]{scroll-margin-top:var(--navh)}
/* Sections that open with a tall band-head land PARTWAY into that padding —
   splitting the difference between the section's top border and its headline,
   so there isn't a dead band of white above the title. */
/* events tucks 3px under the nav so no hairline of the section above
   survives fractional scroll positions */
#events{scroll-margin-top:calc(var(--navh) - 3px)}
#film,#space,#amenities,#journal{
  scroll-margin-top:calc(var(--navh) - clamp(72px,10vw,140px) / 2);
}
/* Events' headline is bottom-aligned against its intro block, so it starts
   lower inside the band-head — take off the extra to match the others. */
@media(min-width:901px){
}

/* ============ PAGE-LOAD CURTAIN ============
   Three very-dark-grey panels cover the page and FALL AWAY DOWNWARD, so the
   top of the page is revealed first. Straight leading edge, staggered left to
   right. Knobs:
     --cur-bg     panel colour
     --cur-dur    how long one panel takes to clear
     --cur-step   delay between neighbouring panels
     --cur-ease   shared easing curve */
:root{
  --cur-bg:#22201E;          /* very dark warm grey — deliberately not black */
  --cur-dur:1.0s;
  --cur-step:.11s;
  --cur-ease:cubic-bezier(.7,0,.2,1);
}
.curtain{
  position:fixed;inset:0;z-index:300;display:flex;pointer-events:none;overflow:hidden;
}
.curtain i{
  flex:1;background:var(--cur-bg);
  transform:translateY(0);
  transition:transform var(--cur-dur) var(--cur-ease);
  /* fractional viewport widths can open hairline seams between the three
     compositing layers mid-stagger — overlap them and paint 1px past each
     edge so nothing behind can flash through */
  margin-left:-1px;
  box-shadow:1px 0 0 var(--cur-bg),-1px 0 0 var(--cur-bg);
}
.curtain i:first-child{margin-left:0}
/* stagger left → right */
.curtain i:nth-child(1){transition-delay:calc(var(--cur-step) * 0)}
.curtain i:nth-child(2){transition-delay:calc(var(--cur-step) * 1)}
.curtain i:nth-child(3){transition-delay:calc(var(--cur-step) * 2)}
/* .open drops them below the fold; .done removes the layer entirely */
.curtain.open i{transform:translateY(100%)}
.curtain.done{display:none}
@media (prefers-reduced-motion:reduce){
  .curtain{display:none}
}

/* ---------- shared atoms ---------- */
.caps{ text-transform:uppercase; letter-spacing:normal; }
.eyebrow{
  font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
}
.chip{
  display:inline-block;background:var(--white);color:var(--ink);
  font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
  padding:7px 12px;
}
/* FEU display headline: heavy compressed Inter caps with serif-italic words */
.disp{
  font-family:var(--sans);font-weight:600;text-transform:uppercase;
  line-height:1.10;letter-spacing:normal;
}
.disp em{
  font-family:var(--serif);font-style:italic;font-weight:500;
  text-transform:uppercase;letter-spacing:normal;
  font-size:1.04em;line-height:0;
}
.serif-num{
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:normal;
}
/* six-point star */
.star{display:inline-block;width:.62em;height:.62em;vertical-align:baseline;fill:var(--verm)}

/* bar button + circle arrow (the FEU pair).
   Two layers move together on hover: the bar-colored layer slides RIGHT and
   off the control while the sweep color follows it in from the LEFT — one
   shared boundary — and they finish together as a single flat-edged panel.
   The circle's ring drifts left and fades beneath; the arrow stays put and
   takes the contrast color. Per-background contrast via CSS variables:
     --pairbar  = the resting bar color (the layer that slides out)
     --pairsweep= the sweep that replaces it (must contrast the section bg)
     --pairtxt  = label/arrow color once swept */
.bar-btn{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:var(--white);
  font-size:14px;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:normal;
  padding:15px 26px;min-height:48px;flex:1;
  /* cross-fade the label with the sweep — an instant color snap reads as a
     blink (white-on-white) before the sweep reaches the text */
  transition:color .55s var(--pair-ease);
}
/* standalone bar (no circle): same two-layer motion inside the bar */
.bar-btn::after{
  content:"";position:absolute;inset:0;z-index:1;background:var(--pairbar,var(--ink));
  transition:transform .45s cubic-bezier(.4,0,.6,1);
}
.bar-btn::before{
  content:"";position:absolute;inset:0;z-index:2;
  background:var(--pairsweep,var(--verm));
  transform:translateX(-101%);
  transition:transform .45s cubic-bezier(.4,0,.6,1);
}
.bar-btn>*{position:relative;z-index:3}
.bar-btn:hover::after{transform:translateX(101%);transition:transform .9s cubic-bezier(.5,0,.15,1)}
.bar-btn:hover::before{transform:translateX(0);transition:transform .9s cubic-bezier(.5,0,.15,1)}
.bar-btn:hover{color:var(--pairtxt,var(--white))}
.bar-btn:active{transform:scale(.985)}
.bar-btn.outline{
  background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong);
  --pairbar:transparent;--pairsweep:var(--ink);--pairtxt:var(--white);
}
.bar-btn.outline::after{background:transparent}
.bar-btn.outline:hover{color:var(--white)}
.bar-btn.verm{--pairbar:var(--verm);background:var(--verm)}
.bar-btn.white{--pairbar:var(--white);background:var(--white);color:var(--ink)}
/* the pair: both layers span bar AND circle zone */
.btn-pair{display:flex;align-items:center;gap:0;position:relative;overflow:hidden}
.btn-pair .bar-btn{flex:1;overflow:visible;background:transparent}
.btn-pair .bar-btn::before,.btn-pair .bar-btn::after{display:none}
/* THE pair mechanics (perfected on the hero button, now universal).
   ENTERING: the bar layer slides right and out while the sweep slides in from
   the left, welded at the seam on one long glide.
   LEAVING: the bar layer is a full-width sheet whose resting 48px cut lives
   in a CLIP, not its geometry. Its transform snaps home invisibly (the sweep
   still covers everything at that instant) and the clip edge glides from the
   rightmost edge to its resting spot across the WHOLE release — same curve,
   same start, same finish as the sweep. Colors adapt per section via
   --pairbar / --pairsweep / --pairtxt; the mechanics never change. */
.btn-pair::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--pairbar,var(--ink));
  clip-path:inset(0 48px 0 0);              /* resting cut exposes the ring */
  transition:clip-path .45s cubic-bezier(.4,0,.6,1),transform 0s;
}
.btn-pair::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:var(--pairsweep,var(--verm));
  transform:translateX(-100%);
  transition:transform .45s cubic-bezier(.4,0,.6,1);
}
.btn-pair:hover::after{
  transform:translateX(100%);
  clip-path:inset(0 0 0 0);
  transition:transform .9s cubic-bezier(.5,0,.15,1),clip-path 0s .9s;
}
.btn-pair:hover::before{
  transform:translateX(0);
  transition:transform .9s cubic-bezier(.5,0,.15,1);
}
.btn-pair:hover .bar-btn{color:var(--pairtxt,var(--white))}
/* ring: fixed in place, painted UNDER the sweep (z-auto → no stacking
   context), while the arrow rises above and takes the contrast color */
.btn-pair .circle-btn{z-index:auto;transition:color .55s cubic-bezier(.5,0,.15,1)}
.btn-pair .circle-btn svg{position:relative;z-index:3}
.btn-pair:hover .circle-btn{border-color:currentColor;color:var(--pairtxt,var(--white))}
/* Hovering anywhere on a card drives its button — the image zoom and the
   button sweep fire together, so the whole card reads as one target. */
:is(.bld-card,.amen-card,.evf):hover .btn-pair::after{
  transform:translateX(100%);clip-path:inset(0 0 0 0);
  transition:transform .9s cubic-bezier(.5,0,.15,1),clip-path 0s .9s;
}
:is(.bld-card,.amen-card,.evf):hover .btn-pair::before{
  transform:translateX(0);
  transition:transform .9s cubic-bezier(.5,0,.15,1);
}
:is(.bld-card,.amen-card,.evf):hover .btn-pair .bar-btn{color:var(--pairtxt,var(--white))}
:is(.bld-card,.amen-card,.evf):hover .btn-pair .circle-btn{border-color:currentColor;color:var(--pairtxt,var(--white))}
.jr-card:hover .jr-more{color:var(--verm)}


/* contrast variants */
.pair-cream{--pairsweep:#F7F1E2;--pairtxt:var(--ink)}
.pair-verm-bar{--pairbar:var(--verm)}
.pair-ink-sweep{--pairsweep:var(--ink)}
.pair-white-sweep{--pairsweep:var(--white);--pairtxt:var(--ink)}
.pair-white-bar{--pairbar:var(--white)}
.pair-white-bar .bar-btn{color:var(--ink)}
.circle-btn{
  flex:0 0 auto;width:48px;height:48px;border-radius:50%;z-index:3;
  border:1px solid currentColor;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  /* border-color restores with a DELAY on hover release, so the ring never
     flashes through the sweep while it retreats */
  transition:color .6s var(--pair-ease),
    border-color .2s ease .45s,transform .6s var(--pair-ease);
}
/* carved fill, per the reference: a disc the SAME radius as the button
   slides in along the arrow's direction and settles concentric, so the
   leading edge is the disc's own arc bowing toward the arrow */
.circle-btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--verm);
  transform:translateX(-101%);
  transition:transform .65s var(--pair-ease);
}
.circle-btn:hover::before{transform:translateX(0)}
.circle-btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;position:relative;z-index:3}
.circle-btn:hover{border-color:var(--verm);color:var(--white);transition:color .35s,border-color .15s,transform .6s var(--pair-ease)}
.circle-btn:active{transform:scale(.94)}
.btn-pair .circle-btn{border-color:currentColor}
/* inside a pair the big sweep does the filling — the circle's own fill stays off */
.btn-pair .circle-btn::before{display:none}
.circle-btn svg{transition:transform .6s var(--pair-ease)}
@media (prefers-reduced-motion:reduce){
  .bar-btn::before,.bar-btn::after,.btn-pair::before,.btn-pair::after,.circle-btn,.circle-btn svg{transition-duration:.01s}
}

/* reveal (opacity/transform only) */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}
/* word-by-word reveal (FEU): every word rises through its own line-clipped
   mask with a rolling stagger. .ws containers skip the block fade — the
   words themselves are the animation. */
.ws.rv{opacity:1;transform:none;transition:none}
/* Word masks: overflow-hidden line boxes, top-aligned. Sans words align
   exactly (same metrics as the container); the serif em words need a
   per-context line-height because the mask's glyph position depends on
   the container's line-height — each value below is measured against an
   unsplit control to <1px. */
.ws .w{
  display:inline-block;overflow:hidden;vertical-align:top;
  padding:0 .08em .15em 0;margin:0 -.08em -.15em 0;
}
.ws .ww{
  display:inline-block;transform:translateY(150%);
  transition:transform .9s cubic-bezier(.22,.55,.15,1);transition-delay:var(--wd,0ms);
}
.ws.in .ww{transform:none}
/* serif-word mask heights, calibrated against rendered INK of unsplit
   controls (sub-0.4px in all three contexts) */
.disp.ws em .w{line-height:1.042;padding:.3em .1em .3em 0;margin:-.3em -.1em -.3em 0}
.story-h.ws em .w{line-height:.915}
.mani-text.ws em .w{line-height:1.111;padding:.25em .1em .25em 0;margin:-.25em -.1em -.25em 0}
@media (prefers-reduced-motion:reduce){.ws .ww{transform:none;transition:none}}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:90;
  display:flex;align-items:stretch;
  background:var(--nav-bg,var(--cream));
  color:var(--nav-fg,var(--ink));
  border-bottom:1px solid var(--line);
  min-height:76px;
  transition:background-color .35s,color .35s;
}
.nav.on-ink{border-bottom-color:var(--line-light)}
.nav.on-ink .nav-cell{border-right-color:var(--line-light)}
.nav.on-ink .nav-logo img,.nav.on-ink .nav-mark img{filter:invert(1) brightness(1.7)}
.nav.on-ink .nav-est{color:rgba(255,255,255,.6)}
.nav-cell{display:flex;align-items:center;border-right:1px solid var(--line)}
/* logo + R-mark take EXACTLY the first grid column (25%); map + inquire take
   the last 25% — the nav dividers land on the section grid lines below */
.nav-left{display:flex;align-items:stretch;width:25%;flex:0 0 25%}
/* padding lives on the ANCHORS, not the cells, so the full cell is the
   click/hover target — same as the map icon and the inquire button */
.nav-logo{flex:1;padding:0;justify-content:center}
.nav-logo a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 clamp(12px,1.4vw,24px)}
.nav-logo img{width:clamp(118px,10vw,156px)}
.nav-mark{padding:0}
.nav-mark a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 clamp(16px,1.4vw,24px)}
.nav-mark img{width:40px;height:40px;object-fit:contain}
/* Ink→vermilion logo hover. A CSS filter can't be interpolated cleanly (the
   invert/hue-rotate chain passes through pink mid-transition), so the coloured
   copy is pre-filtered and only its OPACITY animates. */
.logo-swap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.logo-swap .tint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  opacity:0;transition:opacity .35s ease;pointer-events:none;
  filter:brightness(0) saturate(100%) invert(45%) sepia(57%) saturate(1244%) hue-rotate(331deg) brightness(96%) contrast(88%);
}
.nav-logo:hover .tint,.nav-mark:hover .tint{opacity:1}
.nav-right{display:flex;align-items:stretch;width:25%;flex:0 0 25%}
.nav-links{flex:1;justify-content:center;gap:clamp(4px,.9vw,14px);padding:0 10px;border-right:1px solid var(--line)}
.nav-link{
  font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
  padding:8px 7px;position:relative;white-space:nowrap;
  transition:color .35s ease;
}
.nav-link:hover{color:var(--verm)}
/* over the vermilion band, a vermilion hover would vanish — go white instead */
.nav.on-verm .nav-link:hover{color:var(--white)}
.nav.on-verm .nav-map a:hover{color:var(--white)}
/* When a nav cell's background flips to white on hover, the mark inside must
   read as ink — drop the vermilion tint and undo the on-ink inversion. */
/* ORANGE header: cells keep their background; the marks themselves go white */
.nav.on-verm .nav-logo:hover,.nav.on-verm .nav-mark:hover,.nav.on-verm .nav-map:hover,.nav.on-verm .nav-inquire:hover{background:transparent}
.nav.on-verm .nav-logo:hover .tint,.nav.on-verm .nav-mark:hover .tint{
  opacity:1;filter:brightness(0) invert(1);   /* white copy of the logo */
}
.nav.on-verm .nav-map a:hover{color:var(--white)}
/* ink footer band keeps the earlier behavior: white cell, ink mark */
.nav.on-ink .nav-logo:hover .tint,.nav.on-ink .nav-mark:hover .tint{opacity:0}
.nav.on-ink .nav-logo:hover img,.nav.on-ink .nav-mark:hover img{filter:none}
.nav.on-ink .nav-map a:hover{color:var(--ink)}
.nav.on-ink .nav-inquire a:hover{color:var(--ink)}
/* the logo, mark, map and inquire CELLS light up white on hover (menu links stay text-only) */
.nav-logo,.nav-mark,.nav-map,.nav-inquire{transition:background-color .35s ease}
.nav-logo:hover,.nav-mark:hover,.nav-map:hover,.nav-inquire:hover{background:var(--white)}
.nav-map{padding:0}
.nav-map a{display:flex;align-items:center;justify-content:center;height:100%;padding:0 clamp(16px,1.6vw,26px);transition:color .35s ease}
.nav-map a:hover{color:var(--verm)}
.nav-map svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none}
.nav-inquire{padding:0;border-right:none;flex:1}
/* Inquire blends into the band: no fill, text matches the nav links, only
   the star carries contrast (verm on cream/ink, white on the verm band) */
.nav-inquire a{
  display:flex;align-items:center;justify-content:center;gap:10px;height:100%;width:100%;
  font-size:14.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
  background:transparent;color:inherit;
  transition:background-color .55s var(--pair-ease),color .55s var(--pair-ease);
}
.nav-inquire a:hover{color:var(--verm)}
/* star pirouette: half-turn clockwise on hover, unwinds on release —
   the same ease drives both directions */
.nav-inquire .star{width:11px;height:11px;fill:var(--verm);
  transition:fill .35s,transform .6s cubic-bezier(.5,0,.15,1)}
.nav-inquire a:hover .star{transform:rotate(180deg)}
.nav.on-verm .nav-inquire a:hover{color:var(--white)}
.nav.on-verm .nav-inquire .star{fill:var(--white)}
@media(max-width:1120px){
  .nav-links{display:none}
  .nav-left{width:auto;flex:1}
  .nav-right{width:auto;flex:0 0 auto}
  .nav-inquire a{padding:0 clamp(18px,3vw,36px)}
}
@media(max-width:640px){.nav-mark{display:none}}

/* ============ HERO ============ */
.hero{background:var(--cream);position:relative}
.hero-type{
  padding:clamp(38px,5.5vh,74px) var(--pad) clamp(38px,5.8vh,78px);
  position:relative;
}
.hero-line{display:block}
/* three-line zigzag: Innovation District left, A Century swung right,
   in the Making back left — one type treatment, all ink.
   Scale matched to the FEU hero: 80px @1440 (5.56vw), serif accents 1:1
   with the sans (site default is 1.04em). */
/* Desktop: the two-line FEU mirror (80px @1440, serif 1:1, line 2 indented
   behind the star). Mobile (<=900): flush-left three-line stack, star riding
   after "District". Two lockups in the markup; media queries pick one. */
.hero-h{
  font-size:clamp(34px,5.56vw,90px);
  margin-left:clamp(12px,4vw,86px);
}
.hero-h em{font-size:1em}
.hero-h .l2{
  display:flex;align-items:center;gap:clamp(14px,2vw,34px);
  margin-left:clamp(16px,8.3vw,126px);
  white-space:nowrap;            /* Victor Serif is wide — keep the line intact */
}
.hero-h-m{display:none}
@media(max-width:900px){
  .hero-h-d{display:none}
  .hero-h-m{display:block;font-size:clamp(34px,10.8vw,74px);margin-left:0}
  .hero-h-m .hero-line svg.star{display:inline-block;vertical-align:middle;margin-left:.14em;top:-.1em}
}
/* star rides at the CAP-height center of its neighboring word (raw
   vertical-align:middle sits at x-height center — visibly low for caps) */
.hero-h .star{width:.58em;height:.58em;flex:0 0 auto;position:relative;top:-.05em}
.hero-sub{
  display:flex;justify-content:space-between;align-items:flex-end;gap:40px;
  margin-top:clamp(18px,3vh,36px);
}
.hero-sub-copy{max-width:520px;font-size:16px;line-height:1.55;margin-left:clamp(12px,28.7vw,516px)}
.hero-sub-copy em{font-family:var(--serif);font-style:italic;font-size:1.12em;letter-spacing:normal}
.hero-rings{display:flex;gap:10px;flex:0 0 auto}
.ring{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--verm);
  display:flex;align-items:center;justify-content:center;
  color:var(--verm);font-size:19px;font-weight:500;
}
.ring.yr{font-size:12.5px;letter-spacing:normal}
.hero-stats{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.stat-cell{
  padding:17px var(--pad);border-right:1px solid var(--line);  /* row height = sticky bar (83px) */
  display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;
}
.stat-cell:last-child{border-right:none}
.stat-cell b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(33px,3.3vw,48px);line-height:1}
.stat-cell span{font-size:16px;font-weight:500;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.72)}
.hero-media{position:relative;overflow:hidden;border-top:1px solid var(--line)}
.hero-media img,.hero-media video{width:100%;height:clamp(380px,62vh,640px);object-fit:cover;display:block}
@media(max-width:820px){
  .hero-sub-copy{margin-left:0}
  .hero-stats{grid-template-columns:1fr 1fr}
  .stat-cell:nth-child(2){border-right:none}
  .stat-cell:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ============ MANIFESTO — geometry matched to the reference:
   text spans 26.5%→96% of the viewport, Inter at 2.78vw / 1.22 leading,
   38px ringed dot in the first column, and the grid's vertical lines
   run full-height BEHIND the text, continuing into the grid below. ============ */
.manifesto{position:relative;background:var(--cream)}
.mani-lines{position:absolute;inset:0;pointer-events:none}
/* -1px: the building/nav borders paint INSIDE their cells ([25%-1px,25%)),
   so the lines must sit on that same pixel or they read shifted right */
.mani-lines i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.mani-lines i:nth-child(1){left:calc(25% - 1px)}
.mani-lines i:nth-child(2){left:calc(50% - 1px)}
.mani-lines i:nth-child(3){left:calc(75% - 1px)}
.mani-dot{
  position:absolute;left:var(--pad);top:clamp(64px,9vw,132px);
  width:38px;height:38px;border-radius:50%;border:2px solid var(--verm);
  display:flex;align-items:center;justify-content:center;
}
.mani-dot::after{content:"";width:13px;height:13px;border-radius:50%;background:var(--verm)}
.mani-text{
  position:relative;
  margin-left:26.5%;width:69.5%;
  padding:clamp(56px,8.5vw,124px) 0;
  font-weight:600;text-transform:uppercase;
  font-size:clamp(24px,2.78vw,42px);line-height:1.20;letter-spacing:normal;
}
.mani-text em{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.05em;text-transform:uppercase}
@media(max-width:820px){
  .mani-dot{position:static;margin:40px 0 0 var(--pad)}
  .mani-text{margin-left:var(--pad);width:auto;margin-right:var(--pad);padding-top:24px}
  .mani-lines{display:none}
}

/* ============ SECTION SCAFFOLD ============ */
.band{position:relative}
.band-head{
  padding:clamp(72px,10vw,140px) var(--pad) clamp(40px,5.5vw,72px);
}
.band-h{font-size:clamp(34px,5.2vw,76px);line-height:1.20}
.band-white{background:var(--white)}
.band-sage{background:var(--sage)}
.band-verm{background:var(--verm)}
.band-ink{background:var(--ink);color:var(--white)}
.band-ink .band-h{color:var(--white)}

/* ============ 02 FILM ============ */
.film-wrap{padding:0 var(--pad) clamp(48px,7vw,92px)}
.film-poster{
  position:relative;overflow:hidden;cursor:pointer;border:1px solid var(--line);
}
.film-poster img{width:100%;height:clamp(340px,58vh,600px);object-fit:cover;transition:transform .8s ease}
.film-poster:hover img{transform:scale(1.02)}
.film-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
}
.play-circle{
  width:clamp(76px,7vw,104px);height:clamp(76px,7vw,104px);border-radius:50%;
  background:var(--cream);display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  transition:background-color 1s var(--pair-ease),transform .25s;
}
/* same-radius vermilion disc slides in along the arrow of travel while the
   cream disc fades out beneath it — same mechanic as the other circles */
.play-circle::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--verm);transform:translateX(-101%);
  transition:transform .65s var(--pair-ease);
}
.play-circle svg{width:26%;margin-left:7%;fill:var(--ink);transition:fill .6s var(--pair-ease);position:relative;z-index:1}
.film-poster:hover .play-circle{background:transparent;transform:scale(1.05)}
.film-poster:hover .play-circle::before{transform:translateX(0)}
.film-poster:hover .play-circle svg{fill:var(--white)}
.film-dur{
  position:absolute;left:18px;bottom:18px;
}
dialog.film-modal{margin:auto;border:1px solid var(--line-strong);background:var(--ink);padding:0;max-width:min(1100px,94vw);width:100%}
dialog.film-modal::backdrop{background:rgba(20,18,15,.85)}
.film-modal-inner{position:relative}
.film-modal video{width:100%;display:block}
.film-modal .placeholder{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;color:var(--cream);background:url(aerial-night.jpg) center/cover;text-align:center;padding:24px}
.film-modal .placeholder::before{content:"";position:absolute;inset:0;background:rgba(31,31,31,.74)}
.film-modal .placeholder *{position:relative}
.film-close{position:absolute;top:0;right:0;z-index:4;background:var(--cream);color:var(--ink);font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:normal;padding:13px 18px;
  transition:background-color .55s var(--pair-ease),color .55s var(--pair-ease)}
.film-close:hover{background:var(--verm);color:var(--white)}

/* ============ 03 STORY — clean split: copy left, full-height image right ============ */
.story-cols{display:grid;grid-template-columns:1.05fr .95fr}
.story-left{
  padding:clamp(56px,8vw,110px) clamp(28px,4vw,72px) clamp(48px,6vw,84px) var(--pad);
}
.story-h{font-size:clamp(36px,4.6vw,68px);margin-bottom:clamp(28px,3.5vw,48px)}
.story-copy p{max-width:56ch;margin-bottom:1.1em;font-size:clamp(15.5px,1.2vw,17.5px);line-height:1.55}
.story-copy p em{font-family:var(--serif);font-style:italic;font-size:1.1em}
.story-cta{margin-top:30px;max-width:360px}
.story-right{
  position:relative;margin:0;border-left:1px solid var(--line);
}
.story-right img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story-right .chip{position:absolute;left:16px;bottom:16px}
@media(max-width:820px){
  .story-cols{grid-template-columns:1fr}
  .story-right{position:relative;border-left:none;border-top:1px solid var(--line);min-height:300px}
}

/* ============ 04 TIMELINE ============ */
.tl{border-top:1px solid var(--line)}
.tl-stage{
  display:grid;grid-template-columns:1fr 1fr;min-height:clamp(300px,42vh,420px);
}
.tl-photo{overflow:hidden;border-right:1px solid var(--line)}
.tl-photo img{width:100%;height:100%;object-fit:cover;filter:sepia(.14)}
.tl-panel{padding:clamp(28px,4vw,56px) var(--pad);display:flex;flex-direction:column;justify-content:center;background:var(--white)}
.tl-year{font-family:var(--serif);font-style:italic;font-size:clamp(56px,7vw,104px);line-height:1}
.tl-title{font-size:clamp(19px,1.8vw,26px);font-weight:500;margin:12px 0 8px}
.tl-body{max-width:44ch;color:rgba(31,31,31,.8);font-size:15.5px}
.tl-ctrls{display:flex;align-items:center;gap:12px;margin-top:26px}
.tl-count{font-size:13px;color:rgba(31,31,31,.6)}
.tl-rail{display:flex;border-top:1px solid var(--line);overflow-x:auto}
.tl-rail button{
  flex:1;min-width:86px;padding:15px 10px;font-size:12.5px;font-weight:500;
  letter-spacing:normal;border-right:1px solid var(--line);
  transition:background-color .2s,color .2s;position:relative;white-space:nowrap;
}
.tl-rail button:hover{color:var(--verm)}
.tl-rail button[aria-current="true"]{background:var(--ink);color:var(--white)}
@media(max-width:820px){.tl-stage{grid-template-columns:1fr}.tl-photo{max-height:240px;border-right:none;border-bottom:1px solid var(--line)}}

/* ============ 05 BUILDINGS ============ */
.bld-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
  margin-bottom:clamp(72px,10vw,140px);
}
.bld-card{
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(14px,1.6vw,24px);display:flex;flex-direction:column;gap:14px;
  background:var(--cream);
}
.bld-card:nth-child(4n){border-right:none}
.bld-fig{overflow:hidden;aspect-ratio:4/3}
.bld-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.bld-card:hover .bld-fig img{transform:scale(1.05)}
.bld-name{font-size:clamp(17px,1.5vw,21px);font-weight:700;line-height:1.33;text-transform:uppercase;letter-spacing:normal}
.bld-meta{font-size:13px;color:rgba(31,31,31,.72);display:flex;gap:8px;flex-wrap:wrap;align-items:baseline;line-height:1.4}
.bld-meta b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:15.5px;color:var(--ink);line-height:1}
.bld-cta{margin-top:auto}
@media(max-width:1080px){.bld-grid{grid-template-columns:1fr 1fr}.bld-card:nth-child(2n){border-right:none}}
@media(max-width:560px){.bld-grid{grid-template-columns:1fr}.bld-card{border-right:none}}

/* ============ 06 AVAILABILITY ============ */
.avail-note{padding:0 var(--pad) 10px;font-size:13.5px;color:rgba(31,31,31,.75)}
.avail-table{border-top:1px solid var(--line-strong)}
.avail-row{
  display:grid;grid-template-columns:1.5fr .8fr 1fr auto;gap:clamp(12px,2vw,28px);
  align-items:center;padding:clamp(16px,2vw,26px) var(--pad);
  border-bottom:1px solid var(--line-strong);
}
.avail-row .who{font-size:clamp(16px,1.5vw,20px);font-weight:700;text-transform:uppercase;letter-spacing:normal}
.avail-row .who small{display:block;font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:normal;color:rgba(31,31,31,.66);margin-top:3px}
.avail-row .size{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.4vw,34px);line-height:1;white-space:nowrap}
.avail-row .size small{font-family:var(--sans);font-style:normal;font-size:11.5px;font-weight:500;letter-spacing:normal;margin-left:5px}
.avail-row .use{font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.78)}
.avail-actions{display:flex;gap:8px;flex-wrap:wrap}
/* the standard arrow button, one per row */
.avail-actions .btn-pair{width:min(300px,86vw)}
.avail-actions .bar-btn{padding:12px 20px;min-height:44px;font-size:13px}
.avail-row.leased{opacity:.45}
.avail-row .size.rng{font-size:clamp(18px,1.9vw,26px)}
.avail-row.leased .size small{letter-spacing:normal}
.fl-chip{display:inline-flex;align-items:center;justify-content:center;width:170px;min-height:44px;background:var(--verm);color:var(--white);font-size:13px;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:normal;padding:12px 20px;white-space:nowrap}
.fl-note{font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.85)}
.fl-dead{display:inline-flex;align-items:center;justify-content:center;width:min(300px,86vw);min-height:44px;padding:12px 20px;background:transparent;border:1px solid var(--ink);color:var(--ink);font-size:13px;font-weight:600;line-height:1.3;text-transform:uppercase;letter-spacing:normal;cursor:default;user-select:none}
.avail-row.leased .leased-tag{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:normal}
.avail-foot{display:flex;justify-content:space-between;gap:16px;padding:26px var(--pad) clamp(72px,10vw,130px);font-size:13.5px;flex-wrap:wrap}
.avail-foot a{font-weight:500;text-transform:uppercase;letter-spacing:normal;font-size:12.5px;border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .2s}
.avail-foot a:hover{color:var(--white)}
@media(max-width:900px){.avail-row{grid-template-columns:1fr auto;row-gap:10px}.avail-row .use{grid-column:1/-1}}

/* ============ 07 AMENITIES + TENANTS ============ */
.amen-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
/* padding (not margin) so the gap stays WHITE — a bottom margin collapses out
   of the section and shows the cream body through instead */
#amenities{padding-bottom:clamp(48px,7vw,96px)}
.amen-card{
  border-right:1px solid var(--line);padding:clamp(14px,1.8vw,26px);
  display:flex;flex-direction:column;gap:14px;
}
.amen-card:last-child{border-right:none}
.amen-fig{overflow:hidden;aspect-ratio:16/10}
.amen-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.amen-card:hover .amen-fig img{transform:scale(1.05)}
.amen-title{font-size:clamp(17px,1.6vw,22px);font-weight:700;line-height:1.33;text-transform:uppercase}
.amen-count{font-size:13.5px;color:rgba(31,31,31,.72)}
.tenant-head{padding:clamp(44px,6vw,80px) var(--pad) clamp(28px,3.5vw,48px);display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap}
.tenant-head h3{font-size:clamp(20px,2.4vw,32px)}
.tenant-head p{font-size:13.5px;color:rgba(31,31,31,.7)}
/* single-line marquee — roomy cells, ready for a growing logo roster */
.tenant-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tenant-track{display:flex;width:max-content;animation:tenants 38s linear infinite}
.tenant-marquee:hover .tenant-track{animation-play-state:paused}
.tenant-cell{
  display:flex;align-items:center;justify-content:center;min-height:170px;
  border-right:1px solid var(--line);padding:44px clamp(48px,5vw,84px);min-width:280px;
}
.tenant-cell img{max-height:60px;width:auto;max-width:190px;object-fit:contain;opacity:.75;filter:grayscale(1);transition:opacity .3s,filter .3s}
/* hover: recolor the dark logo to vermilion */
.tenant-cell:hover img{
  opacity:1;
  filter:brightness(0) saturate(100%) invert(45%) sepia(57%) saturate(1244%) hue-rotate(331deg) brightness(96%) contrast(88%);
}
@keyframes tenants{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tenant-track{animation:none}}
@media(max-width:900px){
  .amen-grid{grid-template-columns:1fr}
  .amen-card{border-right:none;border-bottom:1px solid var(--line)}
  .amen-card:last-child{border-bottom:none}
  .tenant-cell{min-height:130px;min-width:220px}
}

/* ============ 08 EVENTS — full-bleed slider, arrows slide in from the edges ============ */
.band-verm{color:var(--ink)}
/* split layout, mirror of the story section: slider left, copy right */
.ev-cols{display:grid;grid-template-columns:.95fr 1.05fr}
/* slider height tracks the story section's photo (~61vw) so the two
   split sections read as siblings */
.ev-slider.ev-split{height:auto;min-height:clamp(520px,61vw,880px);border-top:none;border-right:1px solid rgba(31,31,31,.35)}
/* mirrors .story-left exactly (sides flipped): same top air, same headline
   scale, same body measure — the two splits read as one family */
.ev-right{
  padding:clamp(56px,8vw,110px) var(--pad) clamp(48px,6vw,84px) clamp(28px,4vw,72px);
}
.ev-right .story-cta{max-width:320px}
@media(max-width:900px){
  .ev-cols{grid-template-columns:1fr}
  .ev-slider.ev-split{border-right:none;border-bottom:1px solid rgba(31,31,31,.35);min-height:320px}
}
.ev-slider{
  position:relative;overflow:hidden;
  height:clamp(560px,82vh,840px);
  border-top:1px solid rgba(31,31,31,.35);
}
.ev-slide{position:absolute;inset:0;opacity:0;transition:opacity .8s ease;pointer-events:none}
.ev-slide.on{opacity:1;pointer-events:auto}
.ev-slide img{width:100%;height:100%;object-fit:cover}
.ev-slide::after{content:"";position:absolute;inset:0;background:linear-gradient(185deg,rgba(31,31,31,0) 55%,rgba(31,31,31,.6) 100%)}
.ev-slide .cap{
  position:absolute;left:clamp(20px,2.6vw,44px);bottom:clamp(18px,2.4vh,32px);z-index:2;color:var(--white);
  font-family:var(--serif);font-style:italic;font-size:clamp(18px,2vw,28px);
  text-shadow:0 2px 16px rgba(0,0,0,.4);
}
.sl-count{
  position:absolute;right:clamp(20px,2.6vw,44px);bottom:clamp(18px,2.4vh,32px);z-index:2;
}
/* slider arrows: parked off-canvas, slide in from the edges on slider hover */
.sl-btn{
  position:absolute;top:50%;z-index:3;overflow:hidden;
  width:clamp(52px,4.5vw,64px);height:clamp(52px,4.5vw,64px);border-radius:50%;
  background:var(--white);color:var(--ink);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:transform .45s var(--pair-ease),color .4s,background-color 1s var(--pair-ease);
}
/* same carved fill as the circle buttons — and the disc always travels in
   the arrow's direction: next (→) fills left-to-right, prev (←) fills
   right-to-left */
.sl-btn::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--verm);
  transform:translateX(-101%);
  transition:transform .65s var(--pair-ease);
}
.sl-btn.sl-prev::before{transform:translateX(101%)}
.sl-btn:hover::before{transform:translateX(0)}
/* the white disc fades out beneath the incoming vermilion */
.sl-btn:hover{color:var(--white);background:transparent}
.sl-btn svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.6;fill:none;position:relative;z-index:2}
.sl-btn.sl-prev{left:clamp(16px,2vw,32px);transform:translate(calc(-100% - 40px - 2vw),-50%)}
.sl-btn.sl-next{right:clamp(16px,2vw,32px);transform:translate(calc(100% + 40px + 2vw),-50%)}
.ev-slider:hover .sl-btn.sl-prev,.ev-slider:focus-within .sl-btn.sl-prev{transform:translate(0,-50%)}
.ev-slider:hover .sl-btn.sl-next,.ev-slider:focus-within .sl-btn.sl-next{transform:translate(0,-50%)}
@media (prefers-reduced-motion:reduce){.ev-slide{transition-duration:.01s}.sl-btn{transition-duration:.01s;transform:translate(0,-50%)!important}}

/* ============ 09 INSTAGRAM — full-bleed strip, flush against the section above ============ */
#socials{padding-bottom:clamp(40px,5vw,72px)}   /* breathing room above the footer */
/* Instagram marquee — a single gridded row that drifts like the tenant
   logos: bordered cells, breathing room around each 4:5 image, pause +
   vermilion wash + ring on hover. No captions, no buttons. */
.ig-marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ig-track{display:flex;width:max-content;animation:igscroll 64s linear infinite}
.ig-marquee:hover .ig-track{animation-play-state:paused}
.ig-cell{display:block;padding:clamp(14px,1.6vw,24px);border-right:1px solid var(--line)}
.ig-fig{position:relative;display:block;width:clamp(200px,18.75vw,270px);aspect-ratio:4/5;overflow:hidden}
.ig-fig img{width:100%;height:100%;object-fit:cover;display:block}
/* soft vermilion wash — flat tint, no multiply (multiply read as blood orange) */
.ig-glow{position:absolute;inset:0;background:var(--verm);opacity:0;transition:opacity .3s}
.ig-cell:hover .ig-glow{opacity:.68}
.ig-ring{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  border:1px solid var(--white);display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.85);transition:opacity .3s,transform .35s;
}
.ig-ring svg{width:19px;height:19px;fill:none;stroke:var(--white);stroke-width:1.7}
.ig-ring svg .ico-dot{fill:var(--white);stroke:none}
.ig-cell:hover .ig-ring{opacity:1;transform:scale(1)}
@keyframes igscroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ig-track{animation:none}}

/* ============ 10 JOURNAL ============ */
.jr-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.jr-card{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(14px,1.8vw,26px);display:flex;flex-direction:column;gap:13px}
.jr-fig{overflow:hidden;aspect-ratio:16/10}
.jr-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.jr-card:hover .jr-fig img{transform:scale(1.05)}
.jr-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jr-tag{background:var(--white);border:none;font-size:11px;font-weight:500;text-transform:uppercase;letter-spacing:normal;padding:6px 11px}
.jr-date{font-family:var(--serif);font-style:italic;font-size:15px;color:rgba(31,31,31,.7)}
.jr-title{font-size:clamp(16px,1.5vw,20px);font-weight:700;line-height:1.33;text-transform:uppercase}
.jr-more{font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;margin-top:auto;border-bottom:1px solid currentColor;align-self:flex-start;padding-bottom:2px;transition:color .2s}
.jr-more:hover{color:var(--verm)}
.jr-all{padding:clamp(32px,4vw,56px) var(--pad) clamp(72px,10vw,130px);display:flex;justify-content:flex-end}
@media(max-width:900px){.jr-grid{grid-template-columns:1fr}.jr-card{border-right:none}}

/* ============ 11 INQUIRY ============ */
/* dark inquiry section — the cream Instagram strip below buffers it from
   the black footer */
.inq-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,90px);padding:clamp(52px,7vw,96px) var(--pad)}
.inq-copy .band-h{margin-bottom:20px}
.inq-copy p{color:rgba(255,255,255,.8);max-width:46ch;font-size:15.5px}
.inq-copy .rings{display:flex;gap:10px;margin-top:34px}
.inq-copy .ring{border-color:var(--verm);color:var(--verm)}
.form{display:flex;flex-direction:column;gap:24px}
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.field label{display:block;font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;color:rgba(255,255,255,.65);margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%;background:transparent;border:none;border-bottom:1px solid rgba(255,255,255,.4);
  color:var(--white);font-family:var(--sans);font-size:16px;padding:6px 0 12px;border-radius:0;
  transition:border-color .25s;outline:none;
}
.field select{appearance:none;cursor:pointer}
.field option{background:var(--white);color:var(--ink)}
.field textarea{resize:vertical;min-height:84px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--verm)}
.form .btn-pair{max-width:340px}
.form .circle-btn{color:var(--white)}
.ftr-id .circle-btn{color:var(--white)}
@media(max-width:900px){.inq-grid{grid-template-columns:1fr}.f-row{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
.footer{background:var(--ink);color:var(--white)}
/* Footer, simplified: two cells — dark-grey newsletter, black identity
   (per the FEU reference) */
.footer{background:#000}
.fx{display:grid;grid-template-columns:5fr 7fr;border-top:1px solid var(--line-light)}
/* Newsletter cell measured off FEU: ink #1F1F1F on the grey side, 80/64
   padding, 24px/500 heading, 40px input with a faint .16 white border,
   pure-white placeholder and fine print, 38px white disc with ink arrow */
.ftr-news{
  background:var(--ink);color:var(--white);
  padding:clamp(48px,5.6vw,80px) clamp(36px,4.5vw,64px);
  display:flex;flex-direction:column;justify-content:center;
}
.ftr-news h3{font-size:clamp(22px,1.9vw,27px);font-weight:500;line-height:1.2;margin-bottom:24px;color:var(--white)}
/* ring tangent to the input's right edge, same attachment as the btn-pairs */
.news-row{display:flex;gap:0;align-items:center}
.news-row input{
  flex:1;background:transparent;border:1px solid rgba(255,255,255,.16);color:var(--white);
  font-family:var(--sans);font-size:15px;padding:12px 16px;border-radius:0;outline:none;
  transition:border-color .25s;
}
.news-row input::placeholder{color:var(--white)}
.news-row input:focus{border-color:var(--verm)}
/* solid white disc, ink arrow; on hover the vermilion disc slides in while
   the white disc underneath fades out (FEU behavior) */
.news-row .circle-btn{width:42px;height:42px;border:none;background:var(--white);color:var(--ink);
  transition:background-color 1s var(--pair-ease),color .6s var(--pair-ease)}
.news-row .circle-btn svg{width:17px;height:17px}
.news-row .circle-btn:hover{background:transparent;color:var(--white)}
/* disclaimer matches the contacts type on the right (13px) */
.ftr-news small{display:block;margin-top:9px;font-size:13px;line-height:1.35;color:var(--white)}
.ftr-news small a{text-decoration:underline}
/* identity cell: socials top-left; logo / View-spaces button / clickable
   address / contacts stacked right-aligned on the logo's edge; legals +
   copyright pinned to the bottom below the faint full-width rule */
/* address rides inside the contacts block: street in white, city in gray */
.ftr-contacts .addr-link{border-bottom:none}
.ftr-contacts .addr-link:hover{color:var(--verm)}
.ftr-contacts .addr-link:hover b{color:var(--verm)}
.ftr-id{padding:clamp(24px,3vw,40px) var(--pad) 0;display:flex;flex-direction:column}
.fid-top{display:flex;justify-content:space-between;gap:24px;flex:1;padding-bottom:clamp(24px,3vw,40px)}
.fid-l{display:flex;flex-direction:column;align-items:flex-start}
.fid-r{display:flex;flex-direction:column;gap:18px;align-items:flex-end}
/* copyright rides the legals band, pushed to the far right */
.copy-line{margin-left:auto;font-size:12.5px;color:rgba(255,255,255,.55)}
.legals-band{
  margin:0 calc(-1 * var(--pad));
  border-top:1px solid rgba(255,255,255,.25);
  padding:16px var(--pad);
  display:flex;gap:26px;font-size:13px;color:rgba(255,255,255,.75);
}
.legals-band a:hover{color:var(--white)}
.ftr-id .socials{display:flex;gap:10px}
.soc{
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;transition:background-color .25s,border-color .25s;
}
.soc:hover{background:var(--verm);border-color:var(--verm)}
.soc svg{width:17px;height:17px;fill:var(--white)}
.soc svg.ico-stroke{fill:none;stroke:var(--white);stroke-width:1.7}
.soc svg .ico-dot{fill:var(--white);stroke:none}
.ftr-logo img{width:clamp(170px,16vw,240px);filter:invert(1) brightness(1.7)}
.ftr-contacts{text-align:right;font-size:13px;color:rgba(255,255,255,.75);line-height:1.65}
.ftr-contacts b{color:var(--white);font-weight:500}
.ftr-contacts a{border-bottom:1px solid rgba(255,255,255,.3);transition:color .2s}
.ftr-contacts a:hover{color:var(--verm)}
.ftr-id .btn-pair{width:min(300px,100%)}
@media(max-width:900px){
  .fx{grid-template-columns:1fr}
  .ftr-id{align-items:flex-start}
  .ftr-contacts{text-align:left}
  .ftr-addr-line{text-align:left}
}

/* ============ MOBILE ============ */
/* NOTE: no overflow on <html>/<body>, ever — any clipped root demotes the
   sticky nav (iOS WebKit and Chrome alike). The menu panel contains its own
   scrolling instead of locking the page. */
/* burger: three bars folding to an X, tinted with the nav */
.nav-burger{padding:0;border-right:none;display:none}
.nav-burger button{
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:64px;height:100%;cursor:pointer;color:inherit;
}
.nav-burger span{display:block;width:22px;height:2px;background:currentColor;transition:transform .3s ease,opacity .25s}
html.menu-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
html.menu-open .nav-burger span:nth-child(2){opacity:0}
html.menu-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* full-screen menu under the sticky bar (FEU pattern): stacked hairline
   rows, and the Inquire strip pinned to the bottom on white */
.mnav{
  position:fixed;top:var(--navh);left:0;right:0;bottom:0;z-index:85;
  background:var(--white);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s .35s;
}
.mnav.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.mnav-links{flex:1;overflow:auto;overscroll-behavior:contain}
.mnav-link{
  display:block;padding:10px var(--pad);border-bottom:1px solid var(--line);
  font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
}
/* the whole chrome goes white while the menu is open — the header fades
   there and back on its existing tint transition */
html.menu-open .nav{background:var(--white);color:var(--ink);border-bottom-color:var(--line)}
html.menu-open .nav-cell{border-right-color:var(--line)}
html.menu-open .nav .nav-logo img,html.menu-open .nav .nav-mark img{filter:none}
html.menu-open .nav .tint{opacity:0}
.mnav-inquire{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:20px var(--pad);background:var(--verm);
  font-size:14.5px;font-weight:600;text-transform:uppercase;letter-spacing:normal;color:var(--white);
}
.mnav-inquire .star{width:12px;height:12px;fill:var(--white)}
@media(max-width:1120px){
  .nav-inquire{display:none}
  .nav-burger{display:flex}
  /* reference tablet header: wordmark flush LEFT at reference scale, no
     R-mark, then map + burger as perfect squares on the right */
  .nav-mark{display:none}
  /* wordmark hangs on the page's content edge, and the vermilion tap-tint
     anchors to the same spot instead of the cell's center */
  .nav-logo a{justify-content:flex-start;padding-left:var(--pad)}
  .nav-logo img{width:clamp(140px,19vw,190px)}
  .nav-logo .tint{left:var(--pad);transform:translateY(-50%)}
  .nav-map,.nav-burger{width:var(--navh);flex:0 0 var(--navh)}
  .nav-map a{width:100%;height:100%;padding:0}
  .nav-burger button{width:100%}
}
@media(min-width:1121px){.nav-burger,.mnav{display:none !important}}
@media(max-width:640px){
  /* hero: FEU-style mobile staircase — lines wrap, type scales up */
  .hero-sub{flex-direction:column;align-items:flex-start;gap:22px}
  .hero-sub-copy{margin-left:0;max-width:none}
  /* availability rows read as cards; the two buttons share one full row */
  .avail-row{grid-template-columns:1fr 1fr;row-gap:12px}
  .avail-row .who{grid-column:1/-1}
  .avail-row .size{text-align:left}
  .avail-actions{grid-column:1/-1;width:100%}
  .avail-actions .bar-btn{flex:1 1 auto}
}
@media(max-width:640px){
  .jr-all{justify-content:flex-start}
  /* legals row, then the copyright as its own strip below */
  .legals-band{flex-wrap:wrap;row-gap:12px}
  .copy-line{flex-basis:calc(100% + 2 * var(--pad));margin:0 calc(-1 * var(--pad));padding:12px var(--pad) 0;border-top:1px solid rgba(255,255,255,.15)}
  /* newsletter hugs the page's left edge like everything else */
  .ftr-news{padding-left:var(--pad);padding-right:var(--pad);justify-content:flex-start}
  /* narrower screens see fewer tiles — drift faster */
  .ig-track{animation-duration:36s}
  .tenant-track{animation-duration:24s}
}
@media(max-width:900px){
  /* footer identity stacks left, full width, like the reference mobile */
  .fid-top{flex-direction:column;align-items:flex-start;gap:30px}
  .fid-r{align-items:flex-start;width:100%}
  .fid-r .btn-pair{width:100%}
  .fid-r .ftr-contacts{text-align:left}
  .ftr-addr-line{text-align:left}
}

/* ============ STICKY AVAILABILITY BAR (global) ============ */
.avail-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:flex;align-items:center;gap:18px;
  background:var(--white);border-top:1px solid var(--line);
  padding:17px var(--pad);
  transform:translateY(110%);transition:transform .45s ease;
}
.avail-bar.show{transform:none}
/* text and button share one type size; no dismiss control — the bar retires
   on its own at the inquiry section */
.avail-bar p{flex:1;font-size:clamp(16px,1.5vw,19.5px)}
.avail-bar p .star{width:12px;height:12px;margin-right:9px}
.avail-bar .btn-pair{width:min(400px,55vw)}
.avail-bar .bar-btn{padding:12px 18px;min-height:42px;font-size:14.5px} /* = nav Inquire */
@media(max-width:700px){.avail-bar p{display:none}.avail-bar .btn-pair{width:100%}}
/* ============ BUILDING DETAIL TEMPLATE ============ */
/* hero mirrors the homepage hero-type strip; star rides after the name */
.bd-hero2 .hero-h svg.star{display:inline-block;vertical-align:middle;margin-left:.16em;top:-.1em}
.bd-wide{margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bd-wide img{display:block;width:100%;height:clamp(380px,62vh,720px);object-fit:cover}
.gal-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.gal-head p{font-size:13.5px;color:rgba(31,31,31,.7)}
.bd-news{padding-bottom:0}
.bd-news .jr-grid{border-bottom:none}
/* single breath between the gallery and the stories band */
#gallery{padding-bottom:0}
/* building stats: inline number + label like the home page; the numerals
   run smaller than home's so the SF range holds one line, and the extra
   padding keeps the row at the same 83px height */
.bd-hero2 .stat-cell{padding:25px clamp(18px,2vw,29px)}
.bd-hero2 .stat-cell b{font-size:clamp(21px,2.25vw,32px)}
.bd-ov .story-left{display:flex;flex-direction:column;align-items:flex-start}
.bd-ov .bd-specs{width:100%;max-width:460px}
.bd-ov .story-right{min-height:clamp(360px,40vw,560px)}
/* hero: the events-section split — photo left, editorial column right */
.bd-cols{display:grid;grid-template-columns:.95fr 1.05fr}
.bd-fig{margin:0;border-right:1px solid var(--line);min-height:clamp(480px,52vw,760px)}
.bd-fig img{display:block;width:100%;height:100%;object-fit:cover}
.bd-right{padding:clamp(48px,6.5vw,96px) var(--pad) clamp(48px,6vw,84px) clamp(28px,4vw,72px)}
.bd-back{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:clamp(20px,3vw,36px);
  font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:normal;
  color:rgba(31,31,31,.65);transition:color .25s;
}
.bd-back:hover{color:var(--verm)}
.bd-back-arrow{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;transform:rotate(180deg)}
.bd-desc{margin-top:clamp(16px,2.2vw,26px);max-width:46ch;font-size:16px;line-height:1.55;color:rgba(31,31,31,.8)}
/* highlights: hairline spec rows — label left, serif value right */
.bd-specs{margin-top:clamp(20px,2.8vw,34px);max-width:440px;border-top:1px solid var(--line)}
.bd-specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid var(--line)}
.bd-specs dt{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.6)}
.bd-specs dd{font-family:var(--serif);font-style:italic;font-size:18.5px}
.bd-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:clamp(24px,3.2vw,38px)}
.bd-ctas .btn-pair{width:min(320px,100%)}
@media(max-width:900px){
  .bd-cols{grid-template-columns:1fr}
  .bd-fig{border-right:none;border-bottom:1px solid var(--line);min-height:300px;max-height:380px}
}

/* gallery: gridded cells like the IG strip, lightbox on click */
.gal-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.gal-cell{
  padding:clamp(14px,1.6vw,24px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  cursor:pointer;background:none;
}
.gal-cell:nth-child(3n){border-right:none}
.gal-cell:nth-last-child(-n+3){border-bottom:none}
/* the image zooms INSIDE a clipped frame, so the wash and the photo edges
   are one and the same — nothing to drift on hover */
.gal-fig{position:relative;display:block;overflow:hidden;aspect-ratio:4/3}
.gal-cell img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gal-cell:hover img{transform:scale(1.04)}
/* last tile: permanent vermilion wash + label — there's more where this came from */
.gal-cell.gal-more .gal-wash{
  position:absolute;inset:0;background:rgba(221,87,61,.68);
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:normal;
  transition:background-color .3s;
}
.gal-cell.gal-more:hover .gal-wash{background:rgba(221,87,61,.82)}
/* full-viewport transparent dialog: photo strip slides in a fixed 3:2
   stage, arrows OUTSIDE the image, close pinned top-right, no chrome */
.gal-box{
  width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;
  margin:0;padding:0;border:none;background:transparent;outline:none;
}
.gal-box[open]{display:flex;align-items:center;justify-content:center}
.gal-box::backdrop{background:rgba(22,21,19,.86)}
.gal-stage{position:relative;width:min(78vw,1180px);aspect-ratio:3/2;overflow:hidden}
.gal-strip{display:flex;height:100%;transition:transform .55s var(--pair-ease)}
.gal-strip img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;border:none;outline:none}
/* close rides the image's own top-right corner */
.gal-box .film-close{position:absolute;top:0;right:0;z-index:6}
/* arrows live INSIDE the image, parked off its edges; they glide in when
   the cursor is over the photo and leave with it (events-slider pattern) */
.gal-box .gal-nav{position:absolute;top:50%;z-index:5}
.gal-box .gal-nav.prv{left:clamp(12px,1.8vw,26px);transform:translate(calc(-100% - 70px),-50%)}
.gal-box .gal-nav.nxt{right:clamp(12px,1.8vw,26px);transform:translate(calc(100% + 70px),-50%)}
.gal-stage:hover .gal-nav.prv,.gal-stage:hover .gal-nav.nxt{transform:translate(0,-50%)}
.gal-box .gal-nav:focus-visible{transform:translate(0,-50%)}
/* touch devices can't hover — arrows stay in (hover:none + phone widths) */
@media(hover:none){
  .gal-box .gal-nav.prv,.gal-box .gal-nav.nxt{transform:translate(0,-50%)}
}
@media(max-width:700px){
  .gal-stage{width:88vw}
  .gal-box .gal-nav.prv,.gal-box .gal-nav.nxt{transform:translate(0,-50%)}
}
/* building page, phones: hero flush-left at the home page's mobile scale;
   figure cards stack number over label; prev/next share one line */
@media(max-width:900px){
  .bd-hero2 .hero-h{margin-left:0;font-size:clamp(34px,10.8vw,74px)}
}
@media(max-width:640px){
  .bd-hero2 .stat-cell{flex-direction:column;align-items:flex-start;gap:4px}
}
@media(max-width:820px){
  .gal-grid{grid-template-columns:1fr 1fr}
  .gal-cell:nth-child(3n){border-right:1px solid var(--line)}
  .gal-cell:nth-child(2n){border-right:none}
  .gal-cell:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .gal-cell:nth-last-child(-n+2){border-bottom:none}
}

/* prev / next building — slim beige strip under the hero photo */
.bd-adj{display:grid;grid-template-columns:1fr 1fr;background:var(--cream);color:var(--ink);border-bottom:1px solid var(--line)}
.bd-adj-cell{
  padding:clamp(16px,2.2vw,26px) var(--pad);display:flex;flex-direction:column;gap:6px;
  border-right:1px solid var(--line);transition:background-color .3s;
}
.bd-adj-cell.nx{border-right:none;text-align:right;align-items:flex-end}
.bd-adj-cell .dir{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.55)}
.bd-adj-cell .nm{font-size:clamp(19px,2.1vw,28px);font-weight:600}
.bd-adj-cell:hover{background:var(--white)}
.bd-adj-cell:hover .nm em{color:var(--verm)}
@media(max-width:640px){
  .bd-ctas .btn-pair{width:100%}
  .bd-adj-cell{padding:14px var(--pad);gap:4px}
  .bd-adj-cell .nm{font-size:17px}
  .bd-adj-cell .dir{font-size:10.5px}
}

/* light contact form (building template): the dark inq recolored for white */
.inq-light .inq-copy p{color:rgba(31,31,31,.8)}
.inq-light .field label{color:rgba(31,31,31,.6)}
.inq-light .field input,.inq-light .field select,.inq-light .field textarea{
  color:var(--ink);border-bottom-color:rgba(31,31,31,.4);
}
.inq-light .form .circle-btn{color:var(--ink)}


/* =====================================================================
   CONTENT PAGES (journal / post / events / event / visit / tenant / about)
   ===================================================================== */

/* page hero: reuses the building hero type block, without the stat strip */
.pg-hero{min-height:0;padding-bottom:clamp(10px,1.5vw,22px)}

/* filter pills */
.filt{display:flex;flex-wrap:wrap;gap:10px;padding:6px var(--pad) clamp(28px,4vw,44px)}
.filt button{
  font-family:var(--sans);font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
  padding:11px 20px;border:1px solid var(--line-strong);border-radius:999px;background:transparent;
  color:var(--ink);cursor:pointer;transition:background .25s,color .25s,border-color .25s;
}
.filt button:hover{border-color:var(--ink)}
.filt button.on{background:var(--ink);border-color:var(--ink);color:var(--cream)}

/* journal listing: same jr cards, wrapped rows */
.lst-grid .jr-card{border-bottom:1px solid var(--line)}

/* events: featured event (square image | title | serif dates + read more) */
.evl-tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.evd{display:inline-flex;flex-direction:row;align-items:baseline;gap:10px}
.evd b{font-family:var(--serif);font-style:italic;font-weight:500;line-height:1;white-space:nowrap;text-transform:uppercase}
.evd small{font-size:12px;font-weight:500;color:var(--ink);white-space:nowrap}
.evd-sep{display:inline-block;width:18px;height:1.5px;background:rgba(31,31,31,.42);
  font-size:0;overflow:hidden;margin:0 12px;position:relative;top:-4px;align-self:baseline}
.evf{
  display:grid;grid-template-columns:minmax(220px,335px) 1fr minmax(240px,335px);
  gap:clamp(20px,3.5vw,52px);align-items:start;
  padding:clamp(24px,3vw,44px) var(--pad);margin:0 0 clamp(60px,9vw,150px);
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  color:inherit;text-decoration:none;
}
.evf-fig{display:block;aspect-ratio:1/1;overflow:hidden}
.evf-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.evf:hover .evf-fig img{transform:scale(1.04)}
.evf-main{display:flex;flex-direction:column;align-self:stretch}
.evf-title{display:block;font-size:clamp(24px,2.5vw,36px);font-weight:600;line-height:1.18;margin-bottom:12px}
.evf-where{font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.78)}
.evf-main .evl-tags{margin-top:auto;margin-bottom:0;padding-top:18px}
.evf-side{display:flex;flex-direction:column;gap:16px;align-items:stretch}
.evf-when{display:flex;align-items:baseline}
.evf-when .evd b{font-size:clamp(26px,2.5vw,36px)}
.evf-when .evd-sep{font-size:clamp(26px,2.5vw,36px)}
.evf-side .btn-pair{width:100%}
.evf-side .bar-btn{min-height:44px;padding:10px 22px;font-size:13px}
@media(max-width:900px){
  .evf{grid-template-columns:1fr}
  .evf-fig{max-width:420px}
}

/* events: card grid, FEU 1:1 (16:9 image, 24px title, serif date + arrow disc) */
.evc-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.evc{display:flex;flex-direction:column;color:inherit;text-decoration:none;
  padding:clamp(16px,2vw,28px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}

.evc-fig{display:block;aspect-ratio:16/9;overflow:hidden;margin-bottom:22px}
.evc-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.evc:hover .evc-fig img{transform:scale(1.05)}
.evc-title{font-size:clamp(19px,1.7vw,24px);font-weight:600;line-height:1.25;margin-bottom:14px}
.evc-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:auto;padding-top:18px}
.evc-when{display:flex;align-items:baseline}
.evc-when .evd b{font-size:clamp(20px,1.7vw,24px)}
.evc-when .evd-sep{font-size:clamp(20px,1.7vw,24px)}
.evc-go{flex:0 0 auto}
.evc:hover .evc-go{border-color:var(--verm);color:var(--white)}
.evc:hover .evc-go::before{transform:translateX(0)}
@media(max-width:900px){.evc-grid{grid-template-columns:1fr}.evc{border-right:none}}

/* detail layout: left rail (back + share), right content column */
.dtl{display:grid;grid-template-columns:minmax(220px,40%) minmax(0,1fr);
  gap:clamp(24px,3vw,60px);padding:clamp(120px,14vw,170px) var(--pad) clamp(56px,7vw,100px);align-items:stretch}
.back-pair{width:min(220px,100%);flex-direction:row-reverse}
body[data-page="space"] .back-pair{width:min(310px,100%)}
.back-pair .bar-btn{white-space:nowrap}
/* mirrored pair: ring on the LEFT, sweep travels right-to-left */
.back-pair::after{clip-path:inset(0 0 0 48px)}
.back-pair::before{transform:translateX(100%)}
.back-pair:hover::after{transform:translateX(-100%);clip-path:inset(0 0 0 0)}
.back-pair:hover::before{transform:translateX(0)}
.dtl-rail{display:flex;flex-direction:column;align-items:flex-start}
.shr{margin-top:auto;padding-top:48px}
.shr small{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:normal;color:var(--ink);margin-bottom:10px}
.shr-row{display:flex;gap:10px}
.shr-row a{width:44px;height:44px;border:1px solid var(--line-strong);border-radius:50%;display:grid;place-items:center;transition:background .3s,border-color .3s}
.shr-row a svg{width:16px;height:16px;fill:var(--ink);transition:fill .3s}
.shr-row a:hover{background:var(--ink);border-color:var(--ink)}
.shr-row a:hover svg{fill:var(--cream)}
.dtl-meta{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.dtl-date{font-family:var(--serif);font-style:italic;font-size:17px}
.dtl-title{font-size:clamp(28px,3.6vw,52px);font-weight:600;line-height:1.12;text-transform:uppercase;letter-spacing:normal;margin:0 0 clamp(22px,3vw,36px)}
.dtl-hero{margin:0 0 clamp(24px,3vw,40px)}
.dtl-hero img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.dtl-body p{max-width:620px;font-size:16.5px;line-height:1.68;margin:0 0 18px;color:rgba(31,31,31,.92)}
@media(max-width:900px){
  .dtl{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:86px}
  .dtl-rail{flex-direction:column;align-items:stretch;width:100%;gap:30px}
  .back-pair{width:100%}
  .back-pair .bar-btn{min-height:40px;padding:9px 18px;font-size:12.5px}
  .back-pair .circle-btn{width:40px;height:40px}
  .shr{margin-top:0;padding-top:0;display:flex;align-items:center;gap:14px}
  .shr small{display:block;margin:0}
  .shr-row a{width:38px;height:38px}
}

/* event extras */
.ev-when{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:18px 0;margin-bottom:clamp(24px,3vw,36px)}
.evw-l{display:flex;flex-direction:column;gap:3px}
.evw-l small{font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.6)}
.reg-pair{width:min(280px,100%);flex:0 0 auto}
.ev-price{display:flex;align-items:center;gap:10px;font-weight:500}
.ev-price .star{width:13px;height:13px;fill:var(--verm)}

/* visit: tenant cards */
.tn-grid{display:grid;grid-template-columns:1fr 1fr}
.tn-card{display:grid;grid-template-columns:minmax(150px,240px) 1fr;gap:clamp(16px,2vw,28px);
  padding:clamp(22px,3vw,40px) var(--pad);border-bottom:1px solid var(--line-strong);
  color:inherit;text-decoration:none}
.tn-card.bT{border-top:1px solid var(--line-strong)}
.tn-card.bR{border-right:1px solid var(--line-strong)}
.tn-fig{display:block;aspect-ratio:4/5;overflow:hidden}
.tn-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.tn-card:hover .tn-fig img{transform:scale(1.05)}
.tn-body{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.tn-top{margin-bottom:12px}
.tn-name{font-size:clamp(19px,1.9vw,26px);font-weight:600;line-height:1.2;margin-bottom:10px}
.tn-short{font-size:14px;line-height:1.5;color:rgba(31,31,31,.75)}
.tn-more{margin-top:auto;padding-top:16px;display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
  border-bottom:1px solid currentColor;padding-bottom:2px;transition:color .25s}
.tn-card:hover .tn-more{color:var(--verm)}
.tn-more .star{width:11px;height:11px;fill:var(--verm)}
@media(max-width:900px){
  .tn-grid{grid-template-columns:1fr}
  .tn-card.bR{border-right:none}
  .tn-card{grid-template-columns:minmax(110px,150px) 1fr}
}

/* tenant detail */
.tn-shortline{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,21px);line-height:1.4}
.dtl-body .tn-shortline{max-width:620px;margin:0 0 20px}
.tn-facts{display:flex;flex-direction:column;gap:22px;max-width:620px;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong);
  padding:24px 0;margin:clamp(24px,3vw,40px) 0 0}
.tn-facts small{display:block;font-size:11.5px;font-weight:500;text-transform:uppercase;letter-spacing:normal;color:rgba(31,31,31,.6);margin-bottom:6px}
.tn-facts div{font-size:14.5px;line-height:1.65}
.tn-facts a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* about: alternating history rows */
.ab-band{padding:clamp(40px,6vw,90px) 0 0}
.ab-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,80px);
  align-items:center;padding:clamp(32px,5vw,80px) var(--pad)}
.ab-fig{margin:0;position:relative}
.ab-fig .chip{position:absolute;left:16px;bottom:16px}
.ab-fig img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.ab-txt .story-h{margin-bottom:clamp(18px,2.5vw,32px)}
.ab-row .story-copy p{max-width:520px}
@media(max-width:900px){
  .ab-row{grid-template-columns:1fr;gap:22px;padding:clamp(24px,5vw,40px) var(--pad)}
  .ab-row.flip .ab-fig{order:2}
}

/* about: numbered timeline on ink */
.tl-band{padding-bottom:0}
.tl{list-style:none;margin:0;padding:0;border-top:1px solid rgba(247,241,226,.25)}
.tl li{display:grid;grid-template-columns:minmax(70px,110px) minmax(120px,220px) 1fr;gap:clamp(14px,3vw,40px);
  align-items:start;padding:clamp(20px,2.6vw,34px) var(--pad);border-bottom:1px solid rgba(247,241,226,.25)}
.tl-n{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.4vw,50px);line-height:1;color:var(--verm)}
.tl-y{font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.4vw,50px);line-height:1}
.tl li p{margin:0;max-width:640px;font-size:15.5px;line-height:1.6;color:rgba(247,241,226,.85);padding-top:.35em}
@media(max-width:700px){
  .tl li{grid-template-columns:44px 1fr;row-gap:8px}
  .tl li p{grid-column:1/-1}
}

/* about: values row */
.val-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  padding:clamp(44px,6vw,80px) var(--pad) 0}
.val{padding:0 clamp(18px,2.5vw,36px);border-left:1px solid rgba(247,241,226,.25)}
.val:first-child{border-left:none;padding-left:0}
.val .ico{width:64px;height:64px;background:var(--white);display:grid;place-items:center;margin-bottom:18px}
.val svg{width:28px;height:28px;stroke:var(--verm);fill:none;stroke-width:1.6}
.val h4{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:normal;margin:0 0 8px}
.val p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(247,241,226,.75)}
@media(max-width:900px){.val-grid{grid-template-columns:1fr 1fr;row-gap:30px}.val:nth-child(odd){border-left:none;padding-left:0}}
@media(max-width:480px){.val-grid{grid-template-columns:1fr}}

/* about page refinements */
.ab-line{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;width:100%}
.ab-line>.star{margin-top:.18em}
.ab-words{text-align:right}
.ab-wl{display:block}
.ab-h{width:100%;margin-left:0}
.ab-bleed{position:relative}
.ab-bleed img{height:100vh}
.ab-bleed .chip{position:absolute;left:18px;bottom:18px}
.ab-frame{height:clamp(520px,92vh,980px)}

/* contact page (FEU request-information, structural copy) */
.ct-head{display:flex;align-items:center;gap:clamp(18px,3vw,44px);padding:clamp(150px,17vw,210px) var(--pad) clamp(28px,4vw,52px)}
.ct-star{width:clamp(34px,4vw,58px);height:clamp(34px,4vw,58px);fill:var(--verm);flex:0 0 auto}
.ct-title{font-size:clamp(38px,5.56vw,80px);line-height:1.1}
.ct-head .hero-rings{margin-left:auto}
.ct{padding-bottom:0}
/* left column width mirrors the footer newsletter cell: 5fr of 5/7 */
.ct-grid{display:grid;grid-template-columns:5fr 7fr;align-items:stretch}
.ct-left{display:flex;flex-direction:column;position:relative}
/* the image is the column: absolute fill so it runs flush into the footer */
.ct-fig{position:absolute;inset:0;margin:0}
.ct-fig img{width:100%;height:100%;object-fit:cover;object-position:54% 30%;display:block}
/* the white card rides ON TOP of the image, pinned to the viewport bottom
   until it lands at the bottom of the image / top of the footer */
.ct-card{
  position:sticky;bottom:0;margin-top:auto;align-self:flex-start;z-index:2;
  background:var(--white);width:min(92%,560px);
  padding:clamp(20px,2.2vw,30px) clamp(22px,2.5vw,36px) clamp(22px,2.5vw,32px);
  font-size:15px;line-height:1.5;
}
.ct-card .ct-addr,.ct-card .ct-lines{display:block}
.ct-card .ct-lines{margin-top:14px}
.ct-card .ct-tel{text-decoration:none}
.ct-card b{display:block;font-size:15.5px;margin-bottom:2px}
.ct-card a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ct-card .ct-dir{
  position:absolute;top:clamp(20px,2.2vw,30px);right:clamp(20px,2.2vw,30px);
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:15px;letter-spacing:normal;color:var(--ink);
  text-decoration:underline;text-underline-offset:4px;transition:color .25s;
}
.ct-card .ct-dir:hover{color:var(--verm)}
.ct-card .ct-dir svg{width:19px;height:19px;stroke:var(--verm);fill:none;stroke-width:1.6}
.ct-right{padding:clamp(28px,3.5vw,48px) var(--pad) clamp(28px,3.5vw,44px) clamp(28px,3vw,52px);border-top:1px solid var(--line)}
.ct-form-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(22px,3vw,36px)}
.ct-form-h{font-size:clamp(19px,1.8vw,25px);font-weight:700;text-transform:uppercase;letter-spacing:normal;margin:0}
.ct-form-head small{font-size:13px;color:rgba(31,31,31,.55)}
/* FEU form: white boxes, 55px, hairline borders */
.ct-form{gap:8px}
.ct-form .f-row{gap:8px}
.ct-form .field input,.ct-form .field select,.ct-form .field textarea{
  width:100%;height:55px;background:var(--white);border:1px solid rgba(0,0,0,.08);
  padding:0 18px;font-family:var(--sans);font-size:14px;color:var(--ink);border-radius:0;
}
.ct-form .field textarea{height:128px;padding:16px 18px;resize:vertical}
.ct-form .field input::placeholder,.ct-form .field textarea::placeholder{color:rgba(31,31,31,.55)}
/* select reads as a placeholder until something is chosen */
.ct-form .field select{color:rgba(31,31,31,.55)}
.ct-form .field select.picked{color:var(--ink)}
.ct-form .field input:focus,.ct-form .field select:focus,.ct-form .field textarea:focus{border-color:var(--ink);outline:none}
.ct-form .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.ct-consent{display:flex;align-items:flex-start;gap:12px;margin-top:18px;font-size:15px;cursor:pointer}
.ct-consent input{appearance:none;width:20px;height:20px;border:1.5px solid var(--verm);border-radius:4px;background:transparent;cursor:pointer;flex:0 0 auto;margin-top:1px;display:grid;place-items:center}
.ct-consent input:checked::after{content:"";width:11px;height:11px;background:var(--verm);border-radius:2px}
.ct-consent a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ct-form .circle-btn{color:var(--ink)}
.ct-legal{max-width:none;font-size:13px;line-height:1.6;color:rgba(31,31,31,.7);margin:14px 0 0}
.ct-send{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;margin-top:22px}
.ct-sendbtn{width:min(380px,100%)}
.ct-send .btn-pair{width:min(335px,100%)}
@media(max-width:900px){
  .ct-grid{grid-template-columns:1fr}
  .ct-left{flex-direction:column;position:static}
  .ct-fig{position:static;margin:0}
  .ct-fig img{width:100%;height:auto;aspect-ratio:3/2;object-position:center}
  .ct-card{position:relative;bottom:auto;width:auto;align-self:stretch;margin:0}
  .ct-card .ct-dir{top:20px;right:20px}
  .ct-right{padding:28px var(--pad) 56px}
  .ct-sendbtn{width:100%}
  .ct-form-head{flex-wrap:nowrap;align-items:baseline;gap:12px}
  .ct-form-h{font-size:16px;white-space:nowrap}
  .ct-form-head small{font-size:11px;white-space:nowrap}
}

/* ============ EVENTS NAV DROPDOWN (FEU full-width panel) ============ */
.nav-drop{display:flex;align-items:stretch}
.nav-drop .nav-link{display:inline-flex;align-items:center;gap:7px}
.chev{width:11px;height:8px;stroke:var(--verm);stroke-width:1.8;fill:none}
.nav-drop.open .chev{transform:rotate(180deg)}
.drop-panel{
  position:absolute;top:100%;left:0;right:0;
  background:var(--nav-bg,var(--cream));
  border-top:1px solid color-mix(in srgb,var(--nav-fg,#1F1F1F) 22%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--nav-fg,#1F1F1F) 22%,transparent);
  display:grid;grid-template-columns:repeat(3,1fr);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .3s ease,transform .3s ease,visibility 0s .3s;
}
.nav-drop.open .drop-panel{
  opacity:1;visibility:visible;transform:none;transition:opacity .3s ease,transform .3s ease;
}
/* dim the page under the open dropdown; scroll is locked while open */
.drop-dim{position:fixed;inset:0;z-index:80;background:rgba(31,31,31,.45);opacity:0;pointer-events:none;transition:opacity .35s ease}
html.drop-lock .drop-dim{opacity:1;pointer-events:auto}
.drop-panel a{
  display:flex;flex-direction:column;align-items:center;gap:26px;
  padding:clamp(40px,5vw,72px) 20px;color:var(--nav-fg,var(--ink));text-decoration:none;
  border-left:1px solid color-mix(in srgb,var(--nav-fg,#1F1F1F) 22%,transparent);
}
.drop-panel a:first-child{border-left:none}
.dp-t{font-size:16px;font-weight:600;text-transform:uppercase;letter-spacing:normal}
.dp-c{width:46px;height:46px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;
  color:var(--nav-fg,var(--ink));position:relative;overflow:hidden;
  transition:border-color .3s,color .3s}
.dp-c::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--verm);
  transform:translateX(-101%);transition:transform .65s var(--pair-ease)}
.dp-c svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.6;fill:none;position:relative;z-index:2}
.drop-panel a:hover .dp-c{border-color:var(--verm);color:var(--white)}
.drop-panel a:hover .dp-c::before{transform:translateX(0)}
/* vermilion header: white chevron; discs are black outlines that fill WHITE on hover */
.nav.on-verm .chev{stroke:var(--white)}
.nav.on-verm .dp-c{background:transparent;border-color:var(--ink);color:var(--ink)}
.nav.on-verm .dp-c::before{background:var(--white)}
.nav.on-verm .drop-panel a:hover .dp-c{border-color:var(--ink);color:var(--ink)}
@media(max-width:1100px){.drop-panel{display:none}}
.mnav-sub{padding-left:34px;opacity:.8}

/* ============ CENTERED EVENT HEROES (FEU: giant serif italic) ============ */
.ctr-hero{padding:clamp(110px,13vw,170px) var(--pad) clamp(60px,7vw,110px);text-align:center}
.ctr-title{
  font-family:var(--serif);font-style:italic;font-weight:500;
  font-size:clamp(34px,5.56vw,80px);line-height:1;text-transform:uppercase;letter-spacing:normal;margin:0;
}
.ctr-link{
  display:inline-flex;align-items:center;gap:10px;margin-top:30px;
  font-size:15px;font-weight:500;color:inherit;text-decoration:none;transition:color .25s;
}
.ctr-link .ctr-l{border-bottom:1px solid currentColor;padding-bottom:3px}
.ctr-link:hover{color:var(--verm)}
.ctr-link .star{width:14px;height:14px;fill:var(--verm)}
.disp.ctr{text-align:center;padding:0 var(--pad)}
.band .disp.ctr{margin:0 auto clamp(30px,4vw,56px)}

/* the free/open note + filter select bar */
.ev-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:clamp(18px,2.5vw,30px) var(--pad);
  position:sticky;top:74px;z-index:40;background:var(--cream)}
body[data-page="past"] .ev-bar{background:var(--sage)}
.ev-bar p{margin:0;display:flex;align-items:center;gap:16px;font-size:19px;font-weight:600}
.ev-bar p em{font-family:var(--serif);font-style:italic;font-weight:500}
.ev-dot{width:24px;height:24px;border-radius:50%;border:2px solid var(--verm);display:inline-block;position:relative;flex:0 0 auto}
.ev-dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--verm)}
.ev-filter{display:flex;align-items:center;gap:18px;font-family:var(--serif);font-style:italic;text-transform:uppercase;font-size:clamp(20px,2vw,28px)}
.ev-filter select{
  font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--white);
  border:1px solid rgba(0,0,0,.1);padding:17px 48px 17px 18px;min-width:min(425px,40vw);appearance:none;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231F1F1F' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
}
.past-band .ev-bar{border-top-color:rgba(31,31,31,.3)}
.past-band .evc-grid{border-top-color:rgba(31,31,31,.3)}
.past-band .evc{border-color:rgba(31,31,31,.3)}

/* ============ RENT A SPACE ============ */
.rent-hero{position:relative}
.rh-star{position:absolute;left:var(--pad);top:clamp(160px,19vw,240px);width:clamp(40px,4.5vw,64px);height:clamp(40px,4.5vw,64px);fill:var(--verm)}
.rh-sub{max-width:560px;margin:34px 0 0 auto;text-align:left;font-size:16.5px;line-height:1.6;padding-right:clamp(0px,4vw,60px)}
.rh-sub em{font-family:var(--serif);font-style:italic}

.sp-band{padding:clamp(48px,7vw,100px) 0}
.sp-grid{display:grid;grid-template-columns:minmax(240px,40%) 1fr;gap:clamp(24px,4vw,70px);padding:0 var(--pad);align-items:start}
.sp-head{
  font-family:var(--serif);font-style:italic;font-weight:500;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,76px);line-height:1;margin:0;
}
.sp-list{border-top:1px solid var(--line)}
.sp-item{border-bottom:1px solid var(--line);transition:background .3s}
.sp-sum{
  width:100%;text-align:left;background:transparent;border:none;font-family:var(--sans);color:inherit;
  cursor:pointer;display:grid;grid-template-columns:56px 1fr auto;align-items:baseline;
  gap:10px;padding:clamp(22px,2.6vw,34px) clamp(14px,1.5vw,24px);
}
.sp-n{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:17px;transition:color .25s}
.sp-t{font-size:clamp(17px,1.6vw,22px);font-weight:700;text-transform:uppercase;letter-spacing:normal}
.sp-x{position:relative;width:16px;height:16px;align-self:center}
.sp-x::before,.sp-x::after{content:"";position:absolute;background:var(--ink);left:0;top:7px;width:16px;height:1.6px;transition:opacity .25s,background .25s}
.sp-x::after{transform:rotate(90deg)}
.sp-item:hover{background:var(--white)}
.sp-item:hover .sp-n,.sp-item.open .sp-n{color:var(--verm)}
.sp-item:hover .sp-x::before,.sp-item:hover .sp-x::after,
.sp-item.open .sp-x::before,.sp-item.open .sp-x::after{background:var(--verm)}
.sp-item.open .sp-x::after{opacity:0}
.sp-item.open{background:var(--white)}
.sp-body{overflow:hidden;max-height:0;transition:max-height .5s cubic-bezier(.4,0,.2,1)}
.sp-inner{padding:0 clamp(14px,1.5vw,24px) clamp(24px,3vw,38px)}
.sp-inner p{max-width:560px;margin:0 0 16px 25%;font-size:15.5px;line-height:1.65}
@media(max-width:900px){
  .sp-grid{grid-template-columns:1fr}
  .sp-inner p{margin-left:0}
}

.sp-disc{padding-top:clamp(80px,11vw,180px);padding-bottom:clamp(90px,12vw,200px)}
.sp-cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.sp-card{display:flex;flex-direction:column;color:inherit;text-decoration:none;
  padding:clamp(20px,2.4vw,36px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.sp-fig{display:block;aspect-ratio:4/3;overflow:hidden;margin-bottom:24px}
.sp-fig img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,.61,.36,1)}
.sp-card:hover .sp-fig img{transform:scale(1.05)}
.sp-name{font-size:clamp(20px,2vw,26px);font-weight:600;margin-bottom:26px}
.sp-card .btn-pair{width:100%;margin-top:auto}
@media(max-width:900px){.sp-cards{grid-template-columns:1fr}.sp-card{border-right:none}}

/* sized so the 3:2 gallery fits a laptop viewport under the nav,
   with the download band below at exactly the same width */
.rs-slider{--rsw:min(1100px,calc((100vh - 185px)*1.5),calc(100vw - 120px));padding:clamp(10px,2vw,30px) 0 0}
.rs-frame{width:var(--rsw);margin:0 auto}
.rs-frame{position:relative;height:auto;aspect-ratio:3/2}
.dl-band{width:min(1100px,calc((100vh - 185px)*1.5),calc(100vw - 120px));margin:0 auto}
.rs-ctl{
  position:absolute;left:0;bottom:0;z-index:5;background:var(--white);
  display:flex;align-items:center;gap:10px;padding:18px 24px;min-width:300px;
}
.rs-ctl .sl-count{position:static;font-size:17px;font-weight:500;text-align:left;margin-right:auto}
.rs-ctl .sl-btn{position:relative;inset:auto;transform:none !important;width:44px;height:44px;background:transparent;color:var(--ink);border:1px solid var(--ink);border-radius:50%;overflow:hidden}
.rs-ctl .sl-btn:hover{border-color:var(--verm);color:var(--white)}

.dl-wrap{padding:clamp(48px,7vw,100px) 20px}
.dl-band{background:#000;color:var(--white);padding:clamp(40px,6vw,90px) clamp(24px,4vw,64px) clamp(32px,4vw,56px)}
.dl-title{
  font-family:var(--serif);font-style:italic;font-weight:500;text-transform:uppercase;
  font-size:clamp(30px,5.2vw,76px);line-height:1;margin:0 0 clamp(36px,5vw,70px);
}
.dl-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dl-chip{background:var(--white);color:var(--ink);font-size:12px;font-weight:600;padding:5px 10px}
.dl-size{font-size:13.5px;color:rgba(255,255,255,.7)}
.dl-name{font-size:clamp(17px,1.8vw,24px);font-weight:500}
.dl-btn{margin-left:auto;width:56px;height:56px;color:var(--white)}
.dl-btn svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.6;fill:none}

/* grids that end a section meet the next band with no gap */
.band.pad0{padding-bottom:0}
.band.pad0 .jr-grid,.band.pad0 .tn-grid,.band.pad0 .evc-grid{border-bottom:none}
.band.pad0 .bld-grid,.band.pad0 .amen-grid{margin-bottom:0}

/* past events: the whole page is sage, FEU-style */
body[data-page="past"]{background:var(--sage)}
body[data-page="past"] .ctr-hero{background:var(--sage)}
.past-band{padding-bottom:0}
.past-band .evc-grid{border-bottom:none}

/* FEU "MORE EVENTS" tail: centered serif headline, button, grid flush to next band */
.more-band{padding-top:clamp(56px,8vw,120px)}
.more-h{
  font-family:var(--serif);font-style:italic;font-weight:500;text-transform:uppercase;
  font-size:clamp(34px,5.2vw,76px);line-height:1;text-align:center;margin:0 0 clamp(26px,3vw,42px);
}
.more-cta{display:flex;justify-content:center;margin-bottom:clamp(44px,6vw,90px)}
.more-cta .btn-pair{width:min(320px,100%)}

/* FEU pagination */
.pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:clamp(36px,5vw,64px) var(--pad)}
.pg-box{background:var(--ink);display:flex;align-items:center;gap:8px;padding:10px 16px}
.pg-n{width:30px;height:30px;border-radius:50%;background:transparent;border:1px solid transparent;color:var(--cream);
  font-family:var(--sans);font-size:14px;font-weight:500;cursor:pointer;transition:border-color .25s,background .25s}
.pg-n.on{background:var(--verm);border-color:var(--verm);color:var(--white)}
.pg-n:hover:not(.on){border-color:var(--white)}
.pg-arr{width:46px;height:46px;border-radius:50%;border:1px solid var(--ink);background:transparent;
  display:grid;place-items:center;cursor:pointer;color:var(--ink);position:relative;overflow:hidden;
  transition:color .35s,border-color .35s}
.pg-arr svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;position:relative;z-index:2}
.pg-arr::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--verm);
  transform:translateX(-101%);transition:transform .65s var(--pair-ease)}
.pg-arr.prev::before{transform:translateX(101%)}
.pg-arr:not(.dead):hover::before{transform:translateX(0)}
.pg-arr:not(.dead):hover{color:var(--white);border-color:var(--verm)}
.pg-arr.dead{cursor:default}

/* rent page v2 */
.rent-bleed img{height:min(88vh,940px)}

/* boxed inquiry form on dark sections: same white fields as the contact page */
.band-ink .ct-consent,.band-ink .ct-consent a{color:rgba(255,255,255,.92)}
.band-ink .ct-legal{color:rgba(255,255,255,.6)}
.band-ink .ct-form .field select{color:rgba(31,31,31,.55)}
.band-ink .ct-form .field select.picked{color:var(--ink)}
.ct-form .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.band-ink .ct-form .btn-pair{margin-top:8px}
.band-ink .ct-form .circle-btn{color:var(--white)}

/* space detail: in-article slider gallery + inquiry button */
.sp-gal{position:relative;height:auto;min-height:0;aspect-ratio:3/2;overflow:hidden;margin:0 0 clamp(24px,3vw,40px);width:100%;max-width:calc((100vh - 185px)*1.5)}
.sp-inq{margin-top:clamp(24px,3vw,40px)}
.sp-inq .btn-pair{width:min(340px,100%)}

/* mobile: gallery and download band go near full width */
@media(max-width:700px){
  .rs-frame,.dl-band{width:calc(100vw - 40px)}
  .sp-gal{width:100%}
  .rs-ctl{min-width:0;padding:12px 16px}
}

/* mobile headline scaling for the serif display titles */
@media(max-width:640px){
  .disp.ctr{font-size:26px}
  .dl-title{font-size:22px}
  .more-h{font-size:34px}
  .sp-head{font-size:38px}
}

/* mixed-type variant for the centered serif titles: sans base, serif em */
.ctr-title.mix,.dl-title.mix{font-family:var(--sans);font-style:normal;font-weight:600}

/* ============ MOBILE POLISH (reference pass) ============ */
@media(max-width:700px){
  /* full-bleed images stay horizontal, never tall-cropped */
  .bd-wide img,.ab-bleed img,.rent-bleed img{height:auto !important;aspect-ratio:3/2;object-fit:cover}
  /* slider control bar sits BELOW the image, count left / arrows right */
  .rs-frame,.sp-gal{overflow:visible;margin-bottom:96px}
  .rs-ctl{top:100%;bottom:auto;left:0;right:0;width:100%;min-width:0;padding:14px 16px}
  /* download band: bigger two-line title */
  .dl-title{font-size:33px;line-height:1.08}
  /* centered page titles larger on phones */
  .ctr-title{font-size:46px}
  /* filter: full row, wider + shorter select */
  .ev-filter{width:100%;justify-content:space-between}
  .ev-filter select{flex:1;min-width:0;max-width:68vw;padding:13px 40px 13px 14px}
}

/* mobile events accordion in the burger menu */
.mnav-toggle{font:inherit;color:inherit;background:none;border:none;border-bottom:1px solid var(--line);cursor:pointer;display:flex;align-items:center;gap:9px;width:100%;text-align:left}
.mnav-toggle .chev{margin-left:auto;margin-right:12px}
.mnav-toggle .chev{width:11px;height:8px;stroke:var(--verm);stroke-width:1.8;fill:none;transition:transform .25s}
.mnav-drop.open .mnav-toggle .chev{transform:rotate(180deg)}
.mnav-panel{max-height:0;overflow:hidden;transition:max-height .45s ease}
.mnav-drop.open .mnav-panel{max-height:420px}
.mnav-panel a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 19px 13px calc(var(--pad) + 8px);color:inherit;text-decoration:none;
  font-size:15px;font-weight:500;text-transform:uppercase;letter-spacing:normal;
  border-bottom:1px solid var(--line);
}
.mnav-panel .dp-c{width:38px;height:38px;flex:0 0 auto}
.mnav-panel .dp-c svg{width:15px;height:15px}

/* History page: in-row galleries (Apollo cards 4:5) and portrait figures */
.ab-gal{position:relative;height:auto;min-height:0;aspect-ratio:4/5;overflow:hidden;width:100%}
.ab-fig.tall img{aspect-ratio:3/4}

/* Tenant page: portrait images letterbox with a blurred self-fill instead of cropping */
.ev-slide.pt img:not(.pt-bg),figure.dtl-hero.pt img:not(.pt-bg),.evc-fig.pt img:not(.pt-bg),.evf-fig.pt img:not(.pt-bg){object-fit:contain;position:relative;z-index:1}
.evc-fig.pt,.evf-fig.pt{position:relative}
.pt-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(30px) saturate(.85) brightness(.97);transform:scale(1.18);z-index:0}
figure.dtl-hero.pt{position:relative;overflow:hidden}


.ev-slider.ev-live{cursor:pointer}

/* contact form: honeypot + captcha + status */
.hp-field{position:absolute !important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.ct-status{margin:14px 0 0;font-size:14.5px;font-weight:600;color:#0AA14E;min-height:1.4em}
.ct-status.err{color:var(--verm)}
@media(max-width:640px){.ct-send{justify-content:center}}

.inq .ct-status{color:#3BD584}
.inq .ct-status.err{color:#E87057}

/* inquiry forms: captcha left, send button right, same row */
.inq-send{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:18px;margin-top:18px}
.inq-send .btn-pair{margin:0;flex:0 1 auto;min-width:240px}
@media(max-width:640px){.inq-send{justify-content:center}}