/* Ported from the approved r7 prototype (_workspace/brd_site_2026-09/preview/r7/case/index.html <style>) —
   the design of record, unchanged. */
/* PROJECT PAGE. Only facts we can source. The piece you clicked arrives as this page's hero (view transition). */
.top { padding: calc(150 * var(--u)) var(--m) 0; }
.top .kicker { color: var(--dim); margin-bottom: calc(26 * var(--u)); }
.top h1 { font-size: calc(200 * var(--u)); line-height: .8; }
.top h1 .wrap { display: inline-block; overflow: hidden; padding-bottom: .03em; vertical-align: top; }
.top h1 .ch { transform: translateY(105%); transition: transform 1s var(--e-out); }
.go .top h1 .ch { transform: none; }
.meta { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); margin-top: calc(50 * var(--u)); line-height: 1.6; }
.meta div { grid-column: span 3; } .meta div p:first-child { color: var(--dim); margin-bottom: 8px; }
.meta .visit { grid-column: 10 / span 3; text-align: right; align-self: end; }
.meta > * { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--e-out), transform .8s var(--e-out); }
.go .meta > * { opacity: 1; transform: none; }
.hero2 { margin: calc(60 * var(--u)) var(--m) 0; }
.hero2 .m { aspect-ratio: var(--r); background: var(--panel); overflow: hidden; view-transition-name: piece; max-height: 86vh; margin: 0 auto; }
.hero2.tall .m { width: min(100%, calc(86vh * var(--r))); }
.hero2 video, .hero2 img { width: 100%; height: 100%; display: block; }
.story { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--g); padding: calc(120 * var(--u)) var(--m) 0; }
.story h2 { grid-column: 1 / span 4; color: var(--dim); }
.story p { grid-column: 6 / span 6; font-size: max(17px, calc(30 * var(--u))); line-height: 1.3; letter-spacing: -.01em; }
.walk { padding: calc(60 * var(--u)) var(--m) 0; }
.walk__head { display: flex; justify-content: space-between; align-items: end; margin-bottom: calc(40 * var(--u)); }
.walk__head h2 { font-size: calc(96 * var(--u)); line-height: .8; }
.seg { display: flex; gap: 4px; background: rgba(238,240,236,.07); padding: 5px; border-radius: 999px; }
.seg button { font: inherit; letter-spacing: inherit; text-transform: inherit; border: 0; background: none; color: var(--dim); padding: 1em 1.2em; border-radius: 999px; transition: background .25s var(--e-ui), color .25s var(--e-ui); }
.seg button.on { background: var(--foam); color: var(--ink); }
.stage { display: grid; place-items: center; height: min(calc(760 * var(--u)), 80vh); }
.dev { margin: 0; background: #1c1b19; box-shadow: 0 calc(40 * var(--u)) calc(100 * var(--u)) rgba(0,0,0,.5); view-transition-name: piece; transition: width .6s var(--e-out); }
.dev video { display: block; width: 100%; height: 100%; object-fit: cover; }
.dev .bar { height: 30px; background: #262522; display: flex; align-items: center; justify-content: center; }
.dev .bar span { font-size: 11.5px; color: rgba(242,239,233,.6); background: rgba(242,239,233,.08); padding: 2px 44px; border-radius: 999px; }
.dev[data-d="desktop"] { width: min(100%, calc((min(calc(760 * var(--u)), 80vh) - 30px) * 1.6)); border-radius: 12px; overflow: hidden; }
.dev[data-d="desktop"] .scr { aspect-ratio: 1440 / 900; }
.dev[data-d="tablet"] { height: 100%; aspect-ratio: 844 / 1204; padding: 12px; border-radius: 26px; }
.dev[data-d="tablet"] .scr { height: 100%; border-radius: 14px; overflow: hidden; }
.dev[data-d="phone"] { height: 100%; aspect-ratio: 406 / 860; padding: 8px; border-radius: 40px; }
.dev[data-d="phone"] .scr { height: 100%; border-radius: 32px; overflow: hidden; }
.dev:not([data-d="desktop"]) .bar { display: none; }
/* OLLIN's tour (walk4): the SCREEN carries the recording's own ratio (ffprobe: tablet 984x1416, phone
   780x1688) and the frame wraps it. The frame's outer ratio above (844/1204, 406/860) is only right at
   one exact width, so the walk was cover-cropped 1-2% everywhere else (scripts/brd_walk_fidelity_check.py).
   The screen's height is the stage's height minus the frame padding, written out: a % height does not
   resolve while the grid sizes the frame to its content. Scoped to OLLIN: Crystal Hook Media's walk2
   frames are left exactly as they are until its rebuild (same crop, measured; same fix applies). */
.dev[data-walk="ollin"][data-d="tablet"], .dev[data-walk="ollin"][data-d="phone"] { height: auto; aspect-ratio: auto; }
.dev[data-walk="ollin"][data-d="tablet"] .scr { height: calc(min(calc(760 * var(--u)), 80vh) - 24px); aspect-ratio: 984 / 1416; }
.dev[data-walk="ollin"][data-d="phone"] .scr { height: calc(min(calc(760 * var(--u)), 80vh) - 16px); aspect-ratio: 780 / 1688; }
.more { padding: calc(140 * var(--u)) var(--m) 0; }
.more h2 { margin-bottom: calc(26 * var(--u)); color: var(--dim); }
.row { display: flex; gap: var(--g); align-items: flex-start; }
.row figure { opacity: 0; transform: translateY(40px); transition: opacity .8s var(--e-out), transform 1s var(--e-out); }
.row.in figure { opacity: 1; transform: none; }
.row .m { aspect-ratio: var(--r); background: var(--panel); overflow: hidden; }
.row video, .row img { width: 100%; height: 100%; display: block; }
.row figcaption { padding-top: 12px; color: var(--dim); }
.next { display: block; margin: calc(170 * var(--u)) var(--m) 0; }
.next .lbl { color: var(--dim); }
.next .disp { font-size: calc(170 * var(--u)); line-height: .8; margin-top: 16px; transition: color .3s var(--e-ui); }
.next:hover .disp { color: var(--sea); }
@media (max-width: 700px) {
  .top { padding-top: 90px; } .top h1 { font-size: 17vw; }
  .meta { grid-template-columns: 1fr 1fr; row-gap: 18px; } .meta div, .meta .visit { grid-column: auto; text-align: left; }
  .story { grid-template-columns: 1fr; row-gap: 14px; padding-top: 70px; } .story h2, .story p { grid-column: 1; }
  .walk__head { flex-direction: column; align-items: flex-start; gap: 14px; } .walk__head h2 { font-size: 13vw; }
  .stage { height: auto; } .dev[data-d="tablet"] { height: auto; width: 86%; } .dev[data-d="phone"] { height: auto; width: 68%; }
  .dev[data-walk="ollin"][data-d="tablet"] .scr { height: auto; width: 100%; }
  /* the phone frame is the DEFAULT on phones: it keeps exactly the height it had (68% of the stage at
     406/860, so nothing under it moves) and its width follows the recording's ratio instead (+3px at 390) */
  .stage:has(> .dev[data-walk="ollin"]) { container-type: inline-size; }
  .dev[data-walk="ollin"][data-d="phone"] { width: auto; }
  .dev[data-walk="ollin"][data-d="phone"] .scr { width: auto; height: calc(100cqw * .68 * 860 / 406 - 16px); }
  .row { flex-wrap: wrap; } .row > figure { flex-basis: 100% !important; } .next .disp { font-size: 17vw; }
}