/* ══════════════════════════════════════════════════════════════
   real-estate.css — the Real Estate world.

   Scoped to `.re`. Tokens, reset and the shared media viewer come
   from base.css; nothing here leaks past the body class.

   The page is the work and nothing else: a panoramic lead film, the
   remaining films, the photographs. What survives of the drawing-set
   chrome — the blueprint rules, the masthead rule, the 2° tilt — is
   all CSS, so the page carries no decorative image of its own, and
   the one readout left reports figures measured off the files.
   ══════════════════════════════════════════════════════════════ */

.re{
  background:var(--ink-900);
  color:var(--paper-000);
  font-family:var(--font-body);
  /* The design's architectural easing — used on every reveal here so the
     page moves with one hand. */
  --ease-arch:cubic-bezier(.5,0,0,1);
  --hair:rgba(255,255,255,.1);
  --wire:rgba(255,255,255,.2);
  --pad:clamp(20px,5.5vw,80px);
}

/* ── shared type ── */
.re-h2{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(24px,3.4vw,32px);
  line-height:1.04;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--paper-000);
  margin:0;
}
.re-code{
  font-family:var(--font-mono);
  font-size:clamp(10px,1.05vw,12px);
  letter-spacing:.06em;
  margin:0;
}
.re-hot{color:var(--accent);}
.re-dim{color:var(--ink-100);}

/* Every section leads with the same two-line header. */
.re-sec-head{display:flex;flex-direction:column;gap:12px;}

/* ── reveal ──
   One transition, one easing. Blocks start 18px low and arrive when the
   observer says so; under reduced motion js adds .is-in immediately and
   the transition below never has anything to animate. */
[data-re]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s var(--ease-arch), transform .7s var(--ease-arch);
}
[data-re].is-in{opacity:1;transform:none;}

@media (prefers-reduced-motion: reduce){
  [data-re]{opacity:1;transform:none;transition:none;}
}

/* ══════════════ 1 · TOP BAR ══════════════ */
.re-top{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:clamp(20px,2.4vw,32px) var(--pad);
  border-bottom:1px solid var(--hair);
}
.re-mark{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(16px,1.8vw,18px);
  letter-spacing:.04em;text-transform:uppercase;
  color:var(--paper-000);text-decoration:none;
}
.re-mark:hover{color:var(--accent);}
.re-mark-sub{
  font-family:var(--font-mono);
  font-weight:400;font-size:.62em;letter-spacing:.14em;
  color:var(--ink-300);
}
.re-mark:hover .re-mark-sub{color:var(--ink-300);}
.re-dot{width:6px;height:6px;background:var(--accent);flex:none;}
.re-top-meta{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;
  color:var(--accent);margin:0;
}

/* ══════════════ 2 · BLUEPRINT MASTHEAD ══════════════ */
.re-masthead{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:var(--s4);
  padding:clamp(64px,9vw,120px) var(--pad) clamp(40px,5vw,60px);
  overflow:clip;
}

/* four vertical rules that draw themselves downward */
.re-rules{
  position:absolute;inset:40px var(--pad) auto;
  display:flex;justify-content:space-between;
  pointer-events:none;
}
.re-rules i{
  display:block;width:1px;height:120px;
  background:var(--wire);
  transform:scaleY(0);transform-origin:top;
  transition:transform .9s var(--ease-arch);
}
.re-masthead.is-in .re-rules i{transform:scaleY(1);}
.re-masthead.is-in .re-rules i:nth-child(2){transition-delay:.08s;}
.re-masthead.is-in .re-rules i:nth-child(3){transition-delay:.16s;}
.re-masthead.is-in .re-rules i:nth-child(4){transition-delay:.24s;}

@media (prefers-reduced-motion: reduce){
  .re-rules i{transform:scaleY(1);transition:none;}
}

.re-title{
  position:relative;
  font-family:var(--font-display);
  font-weight:900;
  /* 180px at the 1440 mock; scales down to something a 320px phone can hold
     on one line. */
  font-size:clamp(52px,12.5vw,180px);
  line-height:.86;
  letter-spacing:-.01em;
  text-transform:uppercase;
  text-align:center;
  margin:0;
  color:var(--paper-000);
}

.re-mast-foot{
  width:100%;
  max-width:1200px;
  display:flex;flex-direction:column;gap:var(--s1);
  padding-inline:clamp(0px,3vw,40px);
}
.re-mast-row{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;
}
.re-mast-rule{display:flex;align-items:center;gap:0;}
.re-mast-rule i{width:6px;height:6px;background:var(--accent);flex:none;}
.re-mast-rule span{flex:1;height:1px;background:var(--wire);}

/* ══════════════ 3 · PANORAMIC HERO ══════════════ */
.re-hero-section{
  padding:0 var(--pad) clamp(64px,9vw,120px);
}
.re-hero{
  position:relative;
  width:100%;
  /* panoramic: the lead film is the one the studio tagged for this band */
  aspect-ratio:21/9;
  min-height:260px;
  border-radius:24px;
  overflow:clip;
  transform:rotate(2deg);
  /* rotating a full-width block bleeds past the gutter — the vertical margin
     absorbs what the rotation costs so the corners stay inside the page */
  margin-block:clamp(20px,3vw,44px);
}

.re-hero-frame{
  position:absolute;inset:0;
  border-radius:24px;
  overflow:clip;
  cursor:pointer;
}
.re-hero-frame video,
.re-hero-frame img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  border-radius:24px;
}
.re-hero::after{
  /* the design's flat 20% knockdown over the plate, so white type holds */
  content:"";position:absolute;inset:0;
  background:rgba(17,17,17,.2);
  border-radius:24px;
  pointer-events:none;
}

/* wireframe trace: a hairline box with mono readouts in the top corners */
.re-trace{
  position:absolute;inset:0;
  border:1px solid var(--wire);
  border-radius:24px;
  padding:clamp(20px,3.4vw,48px);
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  pointer-events:none;
  z-index:2;
}
.re-trace-l{color:rgba(255,255,255,.6);margin:0;}
.re-trace-r{color:var(--accent);margin:0;}

/* the glass caption card, bottom-left */
.re-hero-card{
  position:absolute;
  left:clamp(20px,3.4vw,48px);
  bottom:clamp(20px,3.4vw,48px);
  z-index:3;
  width:min(500px, calc(100% - 2 * clamp(20px,3.4vw,48px)));
  display:flex;flex-direction:column;gap:var(--s2);
  padding:clamp(20px,2.4vw,32px);
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(17,17,17,.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  pointer-events:none;             /* the frame beneath owns the click */
}
.re-hero-t{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(26px,4vw,40px);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;
  margin:0;color:var(--paper-000);
}
.re-hero-s{
  font-family:var(--font-mono);font-size:13px;letter-spacing:.05em;
  margin:0;color:var(--accent);
}

/* 21:9 needs the width to earn it. Below ~1100px the band gets too letterboxed
   to read, and below 720px the 2° tilt only eats the gutters. */
@media (max-width: 1100px){
  .re-hero{aspect-ratio:16/9;}
}
@media (max-width: 720px){
  .re-hero{transform:none;margin-block:0;aspect-ratio:4/3;}
}

/* ══════════════ 4 · FILMS ══════════════ */
.re-films{
  padding:clamp(48px,7vw,80px) var(--pad);
  display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);
}

/* Justified rows. Each card is given a width of --share of the row, where
   --share is its aspect ratio over the row's total. Its own aspect-ratio then
   forces height = W/ΣA, which is the same for every card in the row — so a
   9:16 vertical stands exactly as tall as the 16:9 beside it and the row is
   exactly full. Same maths as .bx-plates on the branding page.

   The -.5px is not cosmetic: shares sum to exactly 1, so the row totals exactly
   100% and sub-pixel rounding tips the last card onto its own line. */
.re-films{--film-gap:clamp(14px,1.8vw,24px);}
.re-film-row{
  display:flex;flex-wrap:wrap;
  gap:var(--film-gap);
  align-items:flex-start;
}
.re-film{
  flex:0 0 calc((100% - (var(--n,1) - 1) * var(--film-gap)) * var(--share,1) - .5px);
  display:flex;flex-direction:column;gap:14px;
  min-width:0;
}

/* Below this the proportional split makes a vertical card too narrow to read,
   so cards stack and each takes its natural height. */
@media (max-width: 700px){
  .re-film{flex-basis:100%;}
}
.re-film-media{
  position:relative;
  aspect-ratio:var(--ar,16/9);
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-800);
  cursor:pointer;
}
.re-film-media video,
.re-film-media img{
  position:absolute;inset:0;
  width:100%;height:100%;object-fit:cover;
  display:block;
}
.re-film-media::after{
  /* keeps the duration pill and play button legible over a bright frame */
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(17,17,17,.5), transparent 45%);
  pointer-events:none;
}
.re-dur{
  position:absolute;right:10px;bottom:10px;z-index:2;
  margin:0;padding:4px 8px;
  border-radius:3px;
  background:rgba(17,17,17,.85);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
  color:var(--paper-000);
}
.re-play{
  position:absolute;inset:0;margin:auto;z-index:2;
  /* 46px, not 56: a justified row can hand a vertical cut a ~170px card, and a
     badge much bigger than this starts to own the frame instead of marking it.
     The hero, which is an order of magnitude wider, scales up below. */
  width:46px;height:46px;
  display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
  background:rgba(17,17,17,.42);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  color:var(--paper-000);
  cursor:pointer;
  transition:background-color .3s var(--ease-arch), border-color .3s var(--ease-arch), transform .3s var(--ease-arch);
}
.re-play svg{width:20px;height:20px;margin-left:2px;}
.re-film-media:hover .re-play,
.re-film-media:focus-visible .re-play,
.re-hero-frame:hover .re-play,
.re-hero-frame:focus-visible .re-play{
  background:var(--accent);border-color:var(--accent);color:var(--ink-900);
  transform:scale(1.06);
}
/* The hero band is much larger than a card, so its trigger scales with it. */
.re-hero-frame .re-play{width:clamp(56px,5vw,74px);height:clamp(56px,5vw,74px);}
.re-hero-frame .re-play svg{width:clamp(20px,1.8vw,26px);height:clamp(20px,1.8vw,26px);}

/* Wraps rather than colliding: a justified row can hand a vertical cut a
   ~170px card, where the title and the spec do not fit on one line. */
.re-film-meta{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:4px var(--s2);
  flex-wrap:wrap;
  min-width:0;
}
.re-film-t{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(18px,1.9vw,24px);line-height:1.05;
  letter-spacing:.01em;text-transform:uppercase;
  margin:0;color:var(--paper-000);
  min-width:0;
}
.re-film-c{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  margin:0;color:rgba(229,229,229,.55);
  white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  .re-play{transition:none;}
  .re-film-media:hover .re-play{transform:none;}
}

/* ══════════════ 5 · PHOTOGRAPH CAROUSEL ══════════════ */
.re-gallery{
  padding-block:clamp(48px,7vw,80px);
  display:flex;flex-direction:column;gap:clamp(24px,3.4vw,40px);
  border-top:1px solid var(--hair);
}
/* header and footer sit on the page gutter; the track runs edge to edge so
   photographs bleed off the right the way a contact sheet continues */
.re-gallery > .re-sec-head,
.re-gal-foot{padding-inline:var(--pad);}

.re-gal-head{
  flex-direction:row;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;
}
/* Scoped to the title block by class, NOT `> div`: the nav is also a direct
   div child, and a bare child selector turned the two arrows into a column. */
.re-gal-title{display:flex;flex-direction:column;gap:12px;}
.re-gal-nav{display:flex;flex-direction:row;gap:8px;}
.re-gal-btn{
  width:44px;height:44px;
  display:grid;place-items:center;
  border:1px solid var(--wire);
  border-radius:50%;
  background:transparent;
  color:var(--paper-000);
  cursor:pointer;
  transition:border-color .3s var(--ease-arch), color .3s var(--ease-arch);
}
.re-gal-btn svg{width:18px;height:18px;}
.re-gal-btn:hover{border-color:var(--accent);color:var(--accent);}
.re-gal-btn[disabled]{opacity:.28;cursor:default;}
.re-gal-btn[disabled]:hover{border-color:var(--wire);color:var(--paper-000);}

.re-gal-track{
  display:flex;
  gap:clamp(10px,1.2vw,18px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* the gutter belongs to the track's padding so the first frame lines up with
     the header above it, and scroll-padding makes a snapped frame land there
     too rather than flush against the viewport edge */
  padding-inline:var(--pad);
  scroll-padding-inline:var(--pad);
  padding-block:3px;                 /* room for the focus ring */
  scrollbar-width:none;
}
.re-gal-track::-webkit-scrollbar{display:none;}
/* Looping: snap points would fight a continuous sub-pixel drift, hauling the
   strip back to the nearest frame every time it moves. Smooth scrolling goes
   too — the arrows animate their own jump, and a smooth behaviour applied to a
   per-frame write would queue animations on top of each other. */
.re-gal-track.is-loop{scroll-snap-type:none;scroll-behavior:auto;}

.re-gal-slide{
  flex:0 0 auto;
  /* fixed height + the frame's OWN ratio = every photograph on one baseline,
     none of them cropped, whatever mix of 3:2 and 1:1 arrives */
  height:clamp(220px,32vw,440px);
  aspect-ratio:var(--ar,1.5);
  margin:0;
  position:relative;
  border-radius:10px;
  overflow:hidden;
  background:var(--ink-800);
  scroll-snap-align:start;
  cursor:pointer;
}
.re-gal-slide img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  /* An <img> is draggable by default, and starting a native image drag on the
     strip swallows the pointerup that ends a swipe — which used to strand the
     drift's `dragging` flag on forever. */
  -webkit-user-drag:none;
  user-select:none;
}
.re-gal-slide::after{
  content:"";position:absolute;inset:0;
  background:rgba(255,145,36,0);
  transition:background-color .3s var(--ease-arch);
  pointer-events:none;
}
.re-gal-slide:hover::after{background:rgba(255,145,36,.12);}

.re-gal-foot{
  margin:0;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  color:var(--ink-300);
}
.re-gal-foot b{color:var(--accent);font-weight:500;}

@media (prefers-reduced-motion: reduce){
  .re-gal-track{scroll-behavior:auto;}
  .re-gal-slide::after,
  .re-gal-btn{transition:none;}
}

/* ══════════════ empty-state slot ══════════════
   Wherever a page slot has no asset yet, it renders as a piece of the
   drawing set rather than a broken box: hairline dashes, a faint grid, a
   mono label. build-real-estate.mjs replaces these outright. */
.re-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
  border:1px dashed rgba(255,255,255,.22);
  background:
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(255,255,255,.045) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, rgba(255,255,255,.045) 23px 24px),
    var(--ink-800);
  text-align:center;
  padding:var(--s2);
  cursor:default;
}
.re-slot-label{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;
  color:rgba(244,244,244,.5);margin:0;
}
.re-slot-note{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:rgba(244,244,244,.32);margin:0;
}

/* ══════════════ 6 · FIELD KIT ══════════════ */
.re-kit{
  padding:clamp(48px,7vw,80px) var(--pad);
  display:flex;flex-direction:column;gap:clamp(28px,4vw,48px);
  border-top:1px solid var(--hair);
}
.re-kit-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(240px,100%), 1fr));
  gap:clamp(14px,1.8vw,24px);
}
.re-kit-card{
  display:flex;flex-direction:column;gap:var(--s3);
  padding:clamp(20px,2.2vw,28px);
  border:1px solid var(--wire);
  background:rgba(255,255,255,.02);
  min-width:0;
  transition:border-color .3s var(--ease-arch), transform .3s var(--ease-arch),
             background-color .3s var(--ease-arch);
}
.re-kit-card:hover{
  border-color:var(--accent);
  background:rgba(255,145,36,.04);
  transform:translateY(-4px);
}
.re-kit-top{display:flex;align-items:center;gap:12px;}
.re-kit-ico{
  width:44px;height:44px;flex:none;
  display:grid;place-items:center;
  border:1px solid var(--wire);
  color:var(--accent);
}
.re-kit-ico svg{width:22px;height:22px;}
.re-kit-role{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  color:var(--accent);margin:0;
}
.re-kit-t{
  font-family:var(--font-display);
  font-weight:800;font-size:clamp(18px,1.9vw,24px);line-height:1.05;
  letter-spacing:.01em;text-transform:uppercase;
  margin:0;color:var(--paper-000);
}
.re-kit-s{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  color:rgba(229,229,229,.55);margin:4px 0 0;
}
.re-kit-d{
  font-size:14px;line-height:1.6;
  color:var(--ink-300);margin:0;
}

@media (prefers-reduced-motion: reduce){
  .re-kit-card{transition:none;}
  .re-kit-card:hover{transform:none;}
}

/* ══════════════ 7 · CTA ══════════════ */
.re-cta{
  padding:clamp(56px,8vw,100px) var(--pad);
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  text-align:center;
  border-top:1px solid var(--hair);
}
.re-cta-t{
  font-family:var(--font-display);
  font-weight:900;font-size:clamp(30px,5.5vw,60px);line-height:1;
  letter-spacing:.01em;text-transform:uppercase;
  margin:0;color:var(--paper-000);
}
.re-cta-s{
  max-width:52ch;
  font-size:clamp(14px,1.4vw,16px);line-height:1.6;
  color:var(--ink-300);margin:0;
}
.re-cta-btn{
  margin-top:var(--s2);
  display:inline-flex;align-items:center;
  padding:16px 32px;
  font-family:var(--font-mono);font-size:13px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  color:var(--ink-900);background:var(--accent);
  border-radius:2px;
  transition:transform .3s var(--ease-arch), background-color .3s var(--ease-arch);
}
.re-cta-btn:hover{background:var(--paper-000);transform:translateY(-2px);}

@media (prefers-reduced-motion: reduce){
  .re-cta-btn{transition:none;}
  .re-cta-btn:hover{transform:none;}
}

/* ══════════════ 8 · FOOTER ══════════════ */
.re-foot{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex-wrap:wrap;
  padding:clamp(28px,3.6vw,48px) var(--pad);
  border-top:1px solid var(--hair);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;
  color:var(--ink-300);
}
.re-foot-link{color:var(--paper-000);text-decoration:none;}
.re-foot-link:hover{color:var(--accent);}
.re-foot-mark,
.re-foot-geo{margin:0;}
.re-foot-geo{color:var(--ink-300);}