/* =========================================================================
   DANCE ADDICTION — INTERIOR PAGES (room-hire, findus)
   Loads after style.css and reuses its tokens. Everything here exists only
   on the interior pages: the page head, the two technical drawings, the
   walk list, the spec card, the rates row.

   Drawing rule: the floor plan and the walking map are LIGHT DRAWINGS —
   the same recorded light as the signature trail. Chalk hairlines carry
   geometry; brass is spent only on the subject (the studio dot, the room's
   usable area, a dimension figure). Nothing in a drawing is ever a flat
   solid — light, not paint.
   ========================================================================= */

/* =========================== PAGE HEAD ================================ */

.pagehead{
  position:relative;
  padding:clamp(48px,7vw,92px) 0 clamp(30px,4vw,48px);
}
.pagehead__kick{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass);
  display:flex; align-items:center; gap:12px; margin-bottom:clamp(14px,2vw,20px);
}
.pagehead__kick i{ width:26px; height:1px; background:var(--hair-warm); display:block }
.pagehead__title{
  font-size:clamp(2.6rem,7.2vw,6rem);
  max-width:16ch; text-wrap:balance;
}
.pagehead__title em{
  font-style:normal; color:var(--brass); display:block;
  font-size:.62em; letter-spacing:-.012em; margin-top:.12em;
  text-shadow:0 0 42px rgba(232,161,60,.28);
}
.pagehead__sub{
  margin:clamp(18px,2.6vw,28px) 0 0; max-width:56ch;
  font-size:clamp(1rem,1.3vw,1.14rem); color:var(--chalk);
}
/* the measured facts, straight under the head, set like the count on home */
.pagehead__facts{
  display:flex; flex-wrap:wrap; gap:8px clamp(18px,2.6vw,34px);
  margin-top:clamp(22px,3vw,34px); padding-top:18px;
  border-top:1px solid var(--hair);
  font-family:var(--f-mono); font-size:.84rem; letter-spacing:.07em;
  text-transform:uppercase; color:var(--chalk-dim);
}
.pagehead__facts b{ color:var(--brass); font-weight:500 }

/* ======================= DRAWING FIGURES ============================== */

.grid-draw{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(20px,3vw,48px); align-items:start;
}
@media (max-width:920px){ .grid-draw{ grid-template-columns:1fr } }

.drawfig{ margin:0 }
.drawfig svg{ width:100%; height:auto; display:block }
.drawfig figcaption{
  margin-top:14px;
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--chalk-dim); line-height:1.7;
}

/* ---- shared drawing strokes ---- */
.fp-grid-minor-line{ fill:none; stroke:rgba(238,242,240,.07); stroke-width:2 }

/* =================== FLOOR PLAN (fp-*) ================================ */

.fp-floor{ fill:rgba(18,57,67,.5) }
.fp-block{
  fill:rgba(5,17,24,.85);
  stroke:rgba(238,242,240,.34); stroke-width:3;
}
.fp-wall{ fill:rgba(238,242,240,.78) }
.fp-grid-major line{ stroke:rgba(238,242,240,.13); stroke-width:2.5 }

/* the mirrored wall — installed August 2026, so drawn solid */
.fp-mirror line{
  stroke:var(--brass); stroke-width:5; opacity:.85;
}

/* ---- video in a .shot frame: the slow pan of the hall ---- */
.shot__video{
  width:100%; height:100%; object-fit:cover; display:block;
  filter:saturate(.8) contrast(1.05) brightness(.88);
}

.fp-door-leaf{ stroke:rgba(238,242,240,.85); stroke-width:8; fill:none }
.fp-door-arc{ stroke:rgba(238,242,240,.4); stroke-width:3; fill:none;
  stroke-dasharray:10 12 }

/* dimensions: the brass-lit facts of the drawing */
.fp-dim-ext{ stroke:rgba(238,242,240,.3); stroke-width:2.5 }
.fp-dim-line{ stroke:var(--hair-warm); stroke-width:2.5 }
.fp-dim-label{
  fill:var(--brass); font-family:var(--f-mono); font-size:64px;
  letter-spacing:.04em;
}
.fp-dim-label--minor{ fill:var(--chalk-dim); font-size:54px }

.fp-area-main{
  fill:var(--chalk); font-family:var(--f-display); font-weight:800;
  font-size:132px; letter-spacing:-.01em; text-transform:uppercase;
}
.fp-area-sub{
  fill:var(--chalk-dim); font-family:var(--f-mono); font-size:56px;
  letter-spacing:.05em;
}
.fp-detail{
  fill:var(--chalk-dim); font-family:var(--f-mono); font-size:48px;
  letter-spacing:.08em; text-transform:uppercase;
}
.fp-detail--block{ fill:rgba(168,188,192,.85); font-size:44px }
@media (max-width:720px){ .fp-detail{ display:none } }

/* =================== WALKING MAP (fm-*) =============================== */

.fm-ring{ fill:none; stroke:rgba(238,242,240,.16); stroke-width:2.5;
  stroke-dasharray:4 10 }
.fm-ring-label{
  fill:var(--chalk-dim); font-family:var(--f-mono); font-size:18px;
  letter-spacing:.08em; text-transform:uppercase;
}
.fm-north text{ fill:var(--chalk-dim); font-family:var(--f-mono); font-size:20px }
.fm-north polygon{ fill:rgba(238,242,240,.55) }
.fm-north line{ stroke:rgba(238,242,240,.55); stroke-width:2.5 }
.fm-scale-bar,.fm-scale-tick{ stroke:rgba(238,242,240,.4); stroke-width:2.5 }
.fm-scale-label{ fill:var(--chalk-dim); font-family:var(--f-mono); font-size:18px;
  letter-spacing:.06em }

/* the studio: the one place the map spends brass, glowing like the trail */
.fm-studio-dot{
  fill:var(--brass);
  filter:drop-shadow(0 0 18px rgba(232,161,60,.9))
         drop-shadow(0 0 46px rgba(232,161,60,.45));
}
.fm-studio-label{
  fill:var(--chalk); font-family:var(--f-mono); font-size:20px;
  letter-spacing:.1em; text-transform:uppercase;
}
.fm-studio-label-2{ fill:var(--brass) }

.fm-pin circle{ fill:var(--petrol-lift); stroke:rgba(238,242,240,.6);
  stroke-width:2 }
.fm-pin-num{ fill:var(--chalk); font-family:var(--f-mono); font-size:13px;
  font-weight:600 }
.fm-pin-label{ fill:var(--chalk-dim); font-family:var(--f-mono); font-size:17px;
  letter-spacing:.05em }
.fm-pin-light circle{ stroke:rgba(238,242,240,.3) }
.fm-pin-light .fm-pin-num,
.fm-pin-light .fm-pin-label{ fill:rgba(168,188,192,.6) }

/* ======================= WALK LIST ==================================== */

.walklist{
  list-style:none; margin:0; padding:0; counter-reset:walk;
}
.walklist li{
  display:flex; align-items:baseline; gap:16px;
  padding:12px 0; border-top:1px solid var(--hair);
  font-family:var(--f-mono); letter-spacing:.03em;
}
.walklist li:last-child{ border-bottom:1px solid var(--hair) }
.walklist .num{
  flex:none; width:1.6em; color:var(--brass); font-size:.86rem;
}
.walklist .place{ flex:1; color:var(--chalk); font-size:.92rem }
.walklist .time{ flex:none; color:var(--chalk-dim); font-size:.86rem;
  text-transform:uppercase; letter-spacing:.08em }

.sidenote{
  margin-top:18px; color:var(--chalk-dim); font-size:.92rem; max-width:44ch;
}

/* ======================= SPEC CARD ==================================== */

.aside{
  background:var(--petrol-lift); border-radius:2px;
  padding:clamp(20px,2.6vw,30px);
  display:flex; flex-direction:column; gap:12px;
}
.aside__head{ font-size:clamp(1.4rem,2.2vw,1.8rem); color:var(--chalk) }

.speclist{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.speclist li{
  display:flex; gap:14px; align-items:baseline;
  font-family:var(--f-mono); font-size:.85rem; letter-spacing:.03em;
  color:var(--chalk); padding:10px 0; border-top:1px solid var(--hair);
}
.speclist b{ color:var(--brass); font-weight:500; flex:none; min-width:5.6em }
.speclist span{ color:var(--chalk-dim) }

.aside .muted{
  margin:0; color:var(--chalk-dim); font-size:.88rem; line-height:1.6;
}
.aside .muted + .muted{ margin-top:2px }

/* ======================= USES — three quiet frames ==================== */

.uses{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.4vw,30px);
  border-top:1px solid var(--hair); padding-top:clamp(26px,3.4vw,40px);
}
@media (max-width:820px){ .uses{ grid-template-columns:1fr } }
.uses--4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:1020px){ .uses--4{ grid-template-columns:1fr 1fr } }
@media (max-width:560px){ .uses--4{ grid-template-columns:1fr } }
.uses__close{
  margin:clamp(22px,3vw,32px) 0 0; color:var(--chalk);
  font-size:1.02rem; max-width:60ch;
}
.uses h3{ font-size:clamp(1.2rem,1.9vw,1.5rem); color:var(--chalk);
  margin-bottom:9px; line-height:1 }
.uses p{ margin:0; color:var(--chalk-dim); font-size:.95rem }

/* ======================= RATES — honest tickets ======================= */
/* Four frames with no number in them yet. Like the "gap" on home, they are
   set dim and carry no brass fill: a rate that does not exist is never lit
   as if it did. */

.rates{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(14px,2vw,24px);
}
@media (max-width:920px){ .rates{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:520px){ .rates{ grid-template-columns:1fr } }
.rate{
  border:1px solid var(--hair); border-radius:2px;
  padding:clamp(18px,2.2vw,26px);
  display:flex; flex-direction:column; gap:6px;
}
.rate b{
  font-family:var(--f-display); font-weight:800; font-size:clamp(1.7rem,2.6vw,2.3rem);
  color:var(--chalk-dim); line-height:.9; letter-spacing:-.01em;
  text-transform:uppercase;
}
.rate span{
  font-family:var(--f-mono); font-size:.8rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--chalk);
}
.rate small{
  font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--chalk-dim);
}
.rates__note{
  grid-column:1/-1; margin:4px 0 0;
  color:var(--chalk-dim); font-size:.92rem; max-width:70ch;
}

/* ======================= BOOKING ====================================== */

.book{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(20px,3vw,48px);
}
@media (max-width:820px){ .book{ grid-template-columns:1fr } }
.book h3{ font-size:clamp(1.3rem,2vw,1.7rem); color:var(--chalk);
  margin-bottom:12px }
.book p{ color:var(--chalk-dim) }
.book .btn{ margin-top:14px }