/* Styles for /studio, the campus prototype.
 *
 * Its own file, not a <style> block: the CSP sets style-src 'self' with no
 * 'unsafe-inline', so an inline block is dropped silently. See
 * functions/_middleware.js. Tokens come from site.css, which loads first.
 */

/* ---------------------------------------------------------------- hero */
.shero{padding-block:clamp(38px,6vw,68px) 0}
.shero h1{font-family:var(--display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(32px,5.2vw,58px); line-height:1.06; max-width:18ch}
.shero h1 em{font-style:normal; color:var(--gold)}
.shero .lede{margin-top:20px; max-width:60ch}

/* the public-record numbers. every figure here is sourced. */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  gap:14px; margin-top:38px}
.fact{background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:20px 20px 18px; box-shadow:var(--lift); position:relative; overflow:hidden}
.fact::after{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--gold)}
.fact b{display:block; font-family:var(--display); font-weight:700; letter-spacing:-.025em;
  font-size:clamp(26px,3.2vw,34px); line-height:1;
  text-shadow:0 1px 0 var(--emboss), 0 3px 7px rgba(20,23,26,.10)}
.fact span{display:block; margin-top:8px; font-size:12px; color:var(--ink-3); line-height:1.5}

/* ------------------------------------------------------------- venues */
.venues{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:16px}
.venue{background:var(--surface); border:1px solid var(--line); border-radius:10px;
  box-shadow:var(--lift); display:flex; flex-direction:column; overflow:hidden;
  transition:transform .18s ease, box-shadow .18s ease}
.venue:hover{transform:translateY(-3px); box-shadow:var(--lift-hi)}
.venue .plate{aspect-ratio:16/10; background:var(--surface-2);
  border-bottom:1px solid var(--line); display:grid; place-items:center; padding:16px}
.venue .plate span{font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); text-align:center; line-height:1.7}
.venue .vbody{padding:20px; display:flex; flex-direction:column; flex:1}
.venue h3{font-size:15.5px; font-weight:600; letter-spacing:-.01em}
.venue .status{display:inline-block; align-self:flex-start; margin-top:8px; font-family:var(--mono);
  font-size:10px; letter-spacing:.11em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold); border-radius:3px; padding:3px 7px}
.venue p{font-size:13.5px; line-height:1.62; color:var(--ink-2); margin-top:12px}

/* Spec rows deliberately left blank. We do not invent square footage for a
   real company's facility: the empty field IS the argument. */
.specs{list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--line);
  margin-top:auto; padding-top:14px}
.specs li{display:flex; justify-content:space-between; gap:14px; align-items:baseline;
  padding-block:8px; border-bottom:1px solid var(--line);
  font-family:var(--mono); font-size:11px}
.specs dt, .specs .k{color:var(--ink-3); letter-spacing:.08em; text-transform:uppercase}
.specs .v{color:var(--ink-3); opacity:.6}

/* -------------------------------------------------------------- crew */
.depts{display:flex; flex-wrap:wrap; gap:8px; margin-top:20px}
.dept{font-family:var(--mono); font-size:11.5px; color:var(--ink-2);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill,999px);
  padding:6px 13px}

/* ------------------------------------------------------------ record */
.record{list-style:none; margin:22px 0 0; padding:0}
.record li{display:grid; grid-template-columns:104px 1fr; gap:6px 20px;
  padding-block:14px; border-bottom:1px solid var(--line); align-items:baseline}
.record b{font-family:var(--mono); font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold)}
.record p{font-size:14px; line-height:1.6; color:var(--ink-2)}
.record p strong{color:var(--ink); font-weight:600}

/* --------------------------------------------------------- handoff */
.handoff{display:grid; grid-template-columns:1.1fr 1fr; gap:24px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:clamp(22px,3.5vw,34px); box-shadow:var(--lift); margin-top:28px}
.handoff h3{font-family:var(--display); font-weight:700; letter-spacing:-.022em;
  font-size:clamp(20px,2.6vw,26px); line-height:1.15}
.handoff p{font-size:14.5px; line-height:1.62; color:var(--ink-2); margin-top:12px}
.handoff .go{display:flex; flex-direction:column; gap:10px}

/* ------------------------------------------------------------ source */
.sourced{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  color:var(--ink-3); margin-top:16px; line-height:1.8}
.sourced b{color:var(--ink-2); font-weight:500}

@media (max-width:760px){
  .handoff{grid-template-columns:1fr; gap:18px}
}
@media (max-width:560px){
  .shero{padding-block:26px 0}
  .venues{grid-template-columns:1fr}
  .record li{grid-template-columns:1fr; gap:4px; padding-block:12px}
  .facts{gap:10px}
}