/* Final portfolio pass: plain-English case study, experiments and build videos. */
.skip { opacity:0; }
.skip:focus { opacity:1; }
.hero-description { max-width: 470px; }
.hero-role { display:block; color:var(--paper); font-size:13px; letter-spacing:.02em; margin-bottom:12px; }
.station-channel { position:absolute; top:98px; right:15%; z-index:4; display:flex; gap:10px; align-items:center; padding:9px 12px; background:#0c141bcc; border:1px solid #ffffff26; font-size:11px; transition:border-color .2s; }
.station-channel:hover { border-color:var(--orange); }
.youtube-symbol { display:inline-grid; place-items:center; width:27px; height:19px; border-radius:5px; background:#ee604d; color:white; font-size:10px; flex-shrink:0; }
.station-channel small { color:var(--muted); font-size:9px; display:block; }
.lawlab-art { background:radial-gradient(ellipse at 75% 80%,#3e332538,transparent 70%),#14212b; color:var(--paper); padding:58px 34px 28px; }
.lawlab-art .art-label { background:#111b23; color:#c2ced5; border-color:#ffffff29; }
.lawlab-card-label { font-size:11px; color:#a3b3bd; letter-spacing:.07em; }
.lawlab-card-headline { font-size:30px; letter-spacing:-.045em; line-height:1.16; max-width:320px; margin-top:14px; }
.lawlab-card-flow { display:flex; align-items:center; gap:10px; margin-top:24px; font-size:10px; }
.lawlab-card-flow span { border:1px solid #ffffff30; padding:7px 10px; }
.lawlab-card-flow i { font-style:normal; color:var(--orange); }
.case-section { background:#101a23; border-block:1px solid var(--line); position:relative; }
.case-heading { display:grid; grid-template-columns:1.25fr 1fr; gap:60px; align-items:end; margin-bottom:44px; }
.case-heading h2 { font-size:clamp(35px,4.1vw,58px); letter-spacing:-.055em; margin-top:18px; max-width:700px; }
.case-heading>p { font-size:15px; color:#b2c1cb; max-width:430px; line-height:1.85; }
.case-heading strong { color:var(--paper); font-weight:500; }
.case-layout { display:grid; grid-template-columns:.85fr 1.15fr; gap:55px; border-top:1px solid var(--line); padding-top:36px; align-items:start; }
.case-result { display:flex; gap:24px; align-items:center; margin-bottom:10px; }
.case-result strong { display:block; font-size:44px; font-weight:500; letter-spacing:-.06em; line-height:1.1; }
.case-result .after { color:var(--orange); }
.case-result small { display:block; color:var(--muted); font-size:11px; margin-top:7px; }
.case-result>span { color:#748995; font-size:24px; }
.case-context { font-size:11px; color:#93a5b2; max-width:390px; line-height:1.7; }
.case-story { margin-top:30px; display:grid; gap:22px; }
.case-story h3 { font-size:17px; letter-spacing:-.02em; margin-bottom:7px; }
.case-story p { font-size:13px; line-height:1.8; color:#adbec9; }
.case-tech { border-block:1px solid var(--line); margin-top:28px; padding:15px 0; font-size:12px; }
.case-tech summary { cursor:pointer; color:var(--paper); }
.case-tech p { color:#adbec9; line-height:1.8; margin-top:13px; }
.case-tech .tags { margin-top:15px; }
.case-example { border:1px solid #ffffff29; padding:28px; background:#0c131b; box-shadow:10px 10px 0 #ffffff03; }
.case-example-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; color:#9fb1be; font-size:10px; letter-spacing:.09em; text-transform:uppercase; }
.case-example-heading .status-dot { box-shadow:none; }
.case-switch { display:flex; padding:4px; gap:4px; background:#ffffff05; border:1px solid #ffffff1a; margin-bottom:24px; }
.has-js .case-switch { display:flex; width:100%; }
.case-switch button { flex:1; padding:10px 8px; background:none; color:#a9bac7; font-size:12px; }
.case-switch button[aria-selected=true] { background:#263a47; color:#f0f1e9; }
.case-panel h3 { font-size:25px; letter-spacing:-.035em; margin-bottom:10px; }
.case-panel>p { color:#a9bac7; font-size:12px; line-height:1.8; }
.document-pile { margin:23px 0; display:grid; gap:9px; }
.document-pile div { display:flex; align-items:center; justify-content:space-between; padding:14px 17px; border:1px solid #ffffff22; background:#17232e; font-size:12px; color:#c5d0d5; }
.document-pile span { color:#91a4b0; font-size:10px; }
.review-file { display:flex; gap:10px; align-items:center; color:#d7e1dc; font-size:11px; margin:22px 0 12px; }
.review-file svg { width:18px; height:20px; color:#aacaaf; }
.review-summary { border:1px solid #496555; background:#16271f; padding:17px; }
.review-summary dl { margin:0; }
.review-summary dl>div { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:10px 0; font-size:12px; border-bottom:1px solid #ffffff15; }
.review-summary dl>div:first-child { padding-top:0; }
.review-summary dt { color:#a4b9ac; }
.review-summary dd { margin:0; color:#e0eadf; text-align:right; }
.review-summary .review-flag { color:#ffc59f; }
.review-handover { display:flex; align-items:center; gap:10px; margin-top:14px; color:#b9d9be; font-size:11px; }
.case-example .example-note { font-size:10px; color:#8fa1ae; margin-top:21px; line-height:1.7; }
.case-panel[hidden] { display:none; }
.lab .section-heading { margin-bottom:27px; }
.experiment-navigation { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:22px; }
.experiment-hint { color:#99acba; font-size:12px; }
.experiment-arrows { display:flex; align-items:center; gap:12px; }
.experiment-arrows button { width:44px; height:44px; border:1px solid #ffffff36; background:#17242e; font-size:19px; }
.experiment-arrows button:hover { background:#263948; }
.experiment-arrows button:disabled { opacity:.32; }
.experiment-count { color:#a6b5bf; font-size:11px; min-width:38px; text-align:center; white-space:nowrap; }
.experiment-track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 46px)/3); gap:23px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:0; padding:0 0 23px; scrollbar-width:thin; scrollbar-color:#597183 #182630; }
.experiment-track:focus-visible { outline:2px solid var(--orange); outline-offset:6px; }
.experiment-track .lab-item { scroll-snap-align:start; display:flex; flex-direction:column; border:1px solid #ffffff20; padding-bottom:24px; background:#121e28; }
.experiment-track .lab-media { border:0; border-bottom:1px solid #ffffff20; flex-shrink:0; }
.experiment-track .lab-item h3,.experiment-track .lab-item>p,.experiment-track .lab-item>.text-link { margin-left:22px; margin-right:22px; }
.experiment-track .lab-item h3 { font-size:21px; margin-top:11px; }
.experiment-track .lab-item>p { font-size:13px; }
.experiment-track .lab-item>.experiment-kind { font-size:9px; text-transform:uppercase; letter-spacing:.1em; margin-top:22px; color:#8ba9bc; }
.experiment-track .lab-item>.text-link { margin-top:19px; align-self:flex-start; }
.experiment-track .browser-art { padding:0; }
.experiment-track .browser-art svg { width:100%; height:100%; }
.channel-panel { display:grid; grid-template-columns:.85fr 1.35fr; gap:55px; border:1px solid #ffffff25; margin-top:55px; padding:35px; background:radial-gradient(ellipse at 5% 100%,#703a3020,transparent 60%),#101820; }
.channel-identity { display:flex; align-items:center; gap:13px; margin-bottom:27px; }
.channel-avatar { width:45px; height:45px; border-radius:50%; }
.channel-identity strong { display:block; font-size:14px; font-weight:500; }
.channel-identity span { color:#9aaeba; font-size:11px; }
.channel-intro h3 { font-size:33px; letter-spacing:-.045em; line-height:1.12; max-width:350px; }
.channel-intro>p { font-size:13px; color:#a8bac6; line-height:1.8; margin-top:17px; max-width:355px; }
.channel-intro>.text-link { margin-top:21px; }
.channel-videos { display:grid; gap:14px; }
.channel-video { display:grid; grid-template-columns:142px 1fr auto; gap:17px; align-items:center; padding:10px; background:#ffffff04; border:1px solid #ffffff1f; }
.channel-video:hover { border-color:#ff845680; background:#ffffff08; }
.channel-thumbnail { position:relative; aspect-ratio:16/9; overflow:hidden; }
.channel-thumbnail img { width:100%; height:100%; object-fit:cover; }
.channel-thumbnail .duration { position:absolute; bottom:4px; right:4px; background:#070b11d9; color:white; padding:1px 4px; font-size:9px; }
.channel-video h4 { font-size:14px; font-weight:500; line-height:1.5; margin:0; }
.channel-video p { font-size:10px; color:#9eafbc; margin-top:5px; }
.channel-video .video-play { font-size:12px; color:var(--orange); padding:0 8px; }
.youtube-frame { width:100%; aspect-ratio:16/9; min-height:200px; border:0; background:#06090d; }
.youtube-outbound { display:flex; justify-content:space-between; gap:20px; align-items:center; margin-top:18px; }
.youtube-outbound p { font-size:12px; color:var(--muted); }
.phone-workshop { position:relative; min-width:0; }
.phone-stage { position:relative; aspect-ratio:1; background:radial-gradient(ellipse at 50% 55%,#203e3a80,transparent 70%); border:1px solid var(--line); }
.phone-stage img,.phone-stage canvas { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.phone-stage canvas { opacity:0; transition:opacity .6s; touch-action:pan-y; }
.phone-stage canvas { cursor:grab; }
.phone-stage canvas:focus-visible { outline:2px solid var(--orange); outline-offset:-4px; }
.phone-workshop.is-dragging canvas { cursor:grabbing; }
.phone-workshop.is-live canvas { opacity:1; }
.phone-workshop.is-live .phone-still { opacity:0; }
.phone-still { transition:opacity .6s; }
.phone-stamp { position:absolute; left:18px; top:18px; z-index:1; font-size:9px; letter-spacing:.12em; color:#a7bfc3; }
.phone-caption { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:15px; margin-top:16px; }
.phone-caption p { color:#91a7b3; font-size:10px; }
.phone-controls { display:flex; gap:7px; }
.phone-controls button { font-size:11px; background:#15222c; padding:9px 10px; border:1px solid var(--line); min-height:38px; }
.phone-controls button:hover { border-color:var(--orange); }
.phone-controls [hidden] { display:none; }
.motion-preference { color:#9faeba; font-size:10px; background:none; padding:0; border-bottom:1px solid #ffffff30; }
.flight-courier { position:fixed; left:0; top:0; width:96px; height:96px; pointer-events:none; z-index:5; opacity:0; will-change:transform; }
.flight-courier img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 7px #0006); }
.flight-courier::before { content:""; position:absolute; width:12%; height:35%; left:44%; top:6%; border-radius:60%; background:linear-gradient(transparent,#a0e7ff99); filter:blur(3px); opacity:var(--thrust,0); }
.flight-rail { position:fixed; right:18px; top:28vh; width:1px; height:44vh; background:linear-gradient(transparent,#8eacbd30,transparent); opacity:0; pointer-events:none; z-index:2; }
.flight-rail.is-visible { opacity:1; }
@media(max-width:1100px) {
  .station-channel { top:81px; right:9%; }
  .case-heading { gap:35px; }
  .case-layout { gap:30px; }
  .case-result { gap:16px; }
  .case-result strong { font-size:37px; }
  .channel-panel { gap:30px; padding:27px; }
  .channel-video { grid-template-columns:110px 1fr; gap:12px; }
  .channel-video .video-play { display:none; }
}
@media(max-width:800px) {
  .lawlab-card-flow { gap:5px; font-size:8px; }
  .lawlab-card-flow span { padding:6px 5px; }
  .station-channel { top:57px; right:9%; padding:6px 9px; }
  .station-channel small { display:none; }
  .case-heading { grid-template-columns:1fr; gap:22px; }
  .case-heading>p { max-width:600px; }
  .case-layout { grid-template-columns:1fr 1.1fr; gap:25px; }
  .case-example { padding:21px; }
  .case-result { flex-wrap:wrap; gap:12px; }
  .case-result strong { font-size:32px; }
  .experiment-track { grid-auto-columns:calc((100% - 23px)/2.15); }
  .channel-panel { grid-template-columns:1fr; gap:28px; }
  .channel-intro h3,.channel-intro>p { max-width:550px; }
  .channel-identity { margin-bottom:20px; }
  .channel-video { grid-template-columns:150px 1fr auto; }
  .channel-video .video-play { display:block; }
}
@media(max-width:560px) {
  .station-channel { top:54px; font-size:9px; right:8%; }
  .station-channel .youtube-symbol { width:21px; height:15px; font-size:8px; }
  .case-heading { margin-bottom:29px; }
  .case-heading h2 { font-size:37px; }
  .case-heading>p { font-size:14px; }
  .case-layout { grid-template-columns:1fr; gap:30px; padding-top:29px; }
  .case-result strong { font-size:39px; }
  .case-story { gap:19px; }
  .case-example { padding:20px; }
  .case-example-heading { font-size:9px; }
  .case-panel h3 { font-size:24px; }
  .experiment-navigation { gap:10px; }
  .experiment-hint { font-size:10px; max-width:150px; }
  .experiment-arrows { gap:7px; }
  .experiment-arrows button { width:40px; height:40px; }
  .experiment-track { grid-auto-columns:87%; gap:16px; }
  .experiment-track .lab-media { aspect-ratio:1.6; }
  .channel-panel { padding:21px; margin-top:34px; }
  .channel-intro h3 { font-size:31px; }
  .channel-video { grid-template-columns:97px 1fr; gap:11px; padding:8px; }
  .channel-video h4 { font-size:12px; }
  .channel-video .video-play { display:none; }
  .channel-video p { font-size:9px; }
  .phone-workshop { width:100%; max-width:450px; margin-inline:auto; }
  .phone-controls button { min-height:44px; }
  .youtube-outbound { align-items:start; flex-direction:column; gap:8px; }
  .flight-rail { right:10px; }
}
@media(min-width:561px) and (max-width:700px) {
  .case-layout { grid-template-columns:1fr; }
}
@media(max-width:360px) {
  .case-result { gap:10px; }
  .case-result strong { font-size:31px; }
  .lawlab-card-flow { gap:6px; font-size:8px; }
  .lawlab-card-flow span { padding:7px 5px; }
}
@media(prefers-reduced-motion:reduce) {
  .experiment-track { scroll-behavior:auto; }
  .flight-courier,.flight-rail { display:none; }
}