/* gdshow_v1 · strata.css · GD student showcase (graphic-design.html only).
   Vanilla port of Rowan's Framer "Strata" component (CMS Masonry + 3D Infinite Gallery), per Rowan 16:01 via Relay.
   No Framer runtime, no framerusercontent assets, no tracking. Everything scoped under .sg / .sg-lb.
   Glass recipe = glass v1.1 tokens (--gl-*). Phones (<=600px) and reduced motion: masonry only, no 3D, no animation. */
.sg{--sg-gap:16px;--sg-r:16px;--sg-tone:#101a3d;position:relative;margin-top:8px}
.sg *{box-sizing:border-box}
.sg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin:0 0 16px}
.sg-label{display:inline-block;margin:0 0 8px;padding:4px 12px;border-radius:999px;background:#14204A;color:#fff;font:700 12px/1.5 var(--font,inherit);letter-spacing:.02em}
.sg-h{font:800 clamp(22px,2.4vw,28px)/1.2 var(--font-d,inherit);margin:0 0 6px;color:#14204A}
.sg-fine{margin:6px 0 0;max-width:62ch;color:#4A5578;font-size:12.5px;line-height:1.45}
.sg-lede{margin:0;max-width:62ch;color:#3E4866;font-size:16px;line-height:1.5}
/* ---- glass pill switcher (port of SwitchLive: sliding thumb, radiogroup, arrow keys) ---- */
.sg-sw{position:relative;display:inline-flex;gap:2px;height:44px;padding:4px;border-radius:999px;
  background-color:rgba(255,255,255,.66);background-image:var(--gl-sheen);border:1px solid var(--gl-line,#D6DCE8);
  -webkit-backdrop-filter:var(--gl-blur,blur(18px) saturate(1.7));backdrop-filter:var(--gl-blur,blur(18px) saturate(1.7));
  box-shadow:var(--gl-rim,none),var(--gl-drop,0 10px 26px rgba(20,32,74,.12))}
.sg-sw-thumb{position:absolute;top:4px;bottom:4px;left:0;border-radius:999px;background:#14204A;
  background-image:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 60%);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 14px -6px rgba(0,0,0,.45);pointer-events:none}
.sg-sw.is-set .sg-sw-thumb{transition:transform .5s cubic-bezier(.32,.72,0,1),width .5s cubic-bezier(.32,.72,0,1)}
.sg-sw-btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:100%;margin:0;padding:0 16px 0 12px;border:0;
  border-radius:999px;background:transparent;color:#14204A;font:600 14px/1 var(--font,inherit);white-space:nowrap;cursor:pointer;
  transition:color .35s ease,transform .3s cubic-bezier(.32,.72,0,1)}
.sg-sw-btn[aria-checked="true"]{color:#fff;cursor:default}
.sg-sw-btn:active{transform:scale(.96)}
.sg-sw-btn:focus-visible,.sg-chip:focus-visible,.sg-tile:focus-visible,.sg-dock button:focus-visible,.sg-stage:focus-visible,.sg-lb button:focus-visible{outline:3px solid #F57E20;outline-offset:2px}
.sg-sw-btn svg{width:16px;height:16px;flex:none}
/* ---- view container + fade-in on view change (port of the -in keyframe) ---- */
.sg-view{animation:sg-in .55s cubic-bezier(.32,.72,0,1) both}
@keyframes sg-in{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
/* ---- masonry: brief filter chips ---- */
.sg-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px;padding:0;list-style:none}
.sg-chip{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--gl-line,#D6DCE8);
  background-color:rgba(255,255,255,.7);background-image:var(--gl-sheen);box-shadow:var(--gl-rim,none),0 4px 12px rgba(20,32,74,.08);
  color:#14204A;font:600 14px/1.2 var(--font,inherit);cursor:pointer}
.sg-chip[aria-pressed="true"]{background-color:#14204A;background-image:none;color:#fff;border-color:#14204A}
.sg-chip .sg-n{margin-left:6px;font-weight:700;opacity:.75}
.sg-count{margin:0 0 14px;color:#3E4866;font-size:14px}
.sg-wall{display:flex;gap:var(--sg-gap);align-items:flex-start;width:100%}
.sg-lane{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sg-gap)}
.sg-tile{display:block;width:100%;margin:0;padding:8px;border:1px solid var(--gl-line,#D6DCE8);border-radius:calc(var(--sg-r) + 6px);text-align:left;cursor:zoom-in;
  background-color:rgba(255,255,255,.66);background-image:var(--gl-sheen);color:#14204A;font:inherit;
  -webkit-backdrop-filter:var(--gl-blur,none);backdrop-filter:var(--gl-blur,none);box-shadow:var(--gl-rim,none),var(--gl-drop,0 10px 26px rgba(20,32,74,.12))}
.sg-media{position:relative;display:block;overflow:hidden;border-radius:var(--sg-r);background:#E7EBF3}
.sg-media img{display:block;width:100%;height:auto;transform:scale3d(1,1,1);backface-visibility:hidden;transition:transform .5s ease-out}
.sg-tile:hover .sg-media img,.sg-tile:focus-visible .sg-media img{transform:scale3d(1.1,1.1,1)}
.sg-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 8px;padding:10px 4px 2px}
.sg-cap b{font:700 15px/1.3 var(--font,inherit)}
.sg-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:#FFF1E4;color:#7A3505;font:700 12px/1.6 var(--font,inherit)}
/* fade-up entrance (port of the -rise keyframe; applied once, when a tile scrolls into view) */
.sg.sg-anim .sg-wall .sg-tile{opacity:0}
.sg.sg-anim .sg-wall .sg-tile.is-in{animation:sg-rise .7s cubic-bezier(.22,.9,.24,1) both;animation-delay:var(--d,0ms)}
@keyframes sg-rise{from{opacity:0;transform:translate3d(0,22px,0) scale(.97)}to{opacity:1;transform:none}}
/* ---- 3D Infinite Gallery (port of InfiniteGallery3DLive: pose, lanes, copies, drift, edge veils) ---- */
.sg-stage{position:relative;height:640px;overflow:hidden;border-radius:22px;background:var(--sg-tone);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--gl-drop,0 10px 26px rgba(20,32,74,.12));touch-action:pan-y;isolation:isolate}
.sg-persp{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.sg-plane{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.4,0,.2,1);will-change:transform}
.sg-lanes{position:absolute;left:0;width:100%;display:flex;justify-content:center;gap:24px;padding:24px;transition:top .6s cubic-bezier(.4,0,.2,1)}
.sg-glane{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px;will-change:transform}
.sg-copy{display:flex;flex-direction:column;gap:24px}
.sg-gtile{position:relative;display:block;width:100%;padding:0;margin:0;border:0;border-radius:var(--sg-r);overflow:hidden;background:#1d2a57;cursor:zoom-in}
.sg-gtile img{display:block;width:100%;height:auto;transform:scale3d(1,1,1);backface-visibility:hidden;transition:transform .5s ease-out;will-change:transform}
.sg-gtile:hover img{transform:scale3d(1.1,1.1,1)}
.sg-veil{position:absolute;pointer-events:none;z-index:10;opacity:.8}
.sg-veil.t{top:0;left:0;right:0;height:20%;background:linear-gradient(to bottom,var(--sg-tone),transparent)}
.sg-veil.b{bottom:0;left:0;right:0;height:20%;background:linear-gradient(to top,var(--sg-tone),transparent)}
.sg-veil.l{top:0;bottom:0;left:0;width:20%;background:linear-gradient(to right,var(--sg-tone),transparent)}
.sg-veil.r{top:0;bottom:0;right:0;width:20%;background:linear-gradient(to left,var(--sg-tone),transparent)}
/* stance dock (port of StanceDock: 7 chips, radiogroup, arrows/Home/End) + pause */
.sg-dock{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:100;width:max-content;max-width:calc(100% - 32px);
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sg-dock button{height:32px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(16,20,40,.55);
  -webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  color:rgba(255,255,255,.92);font:600 13px/1 var(--font,inherit);letter-spacing:.01em;white-space:nowrap;cursor:pointer;transition:background-color .3s,color .3s,transform .3s}
.sg-dock button:hover{background:rgba(255,255,255,.18)}
.sg-dock button[aria-checked="true"]{background:#fff;color:#14204A;border-color:#fff}
.sg-dock .sg-pause{margin-left:8px;border-color:rgba(245,126,32,.8)}
.sg-hint{margin:10px 0 0;color:#3E4866;font-size:14px}
.sg-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* ---- lightbox ---- */
.sg-lb{position:fixed;inset:0;z-index:2147483000;display:none;align-items:center;justify-content:center;padding:24px}
.sg-lb.is-open{display:flex}
.sg-lb-veil{position:absolute;inset:0;background:rgba(10,16,40,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:sg-veil .3s both}
@keyframes sg-veil{from{opacity:0}to{opacity:1}}
.sg-lb-box{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:min(92vw,1000px);max-height:100%;margin:0}
.sg-lb-img{display:block;max-width:100%;max-height:calc(100vh - 170px);width:auto;height:auto;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#1d2a57;
  animation:sg-open .45s cubic-bezier(.22,.9,.24,1) both}
@keyframes sg-open{from{clip-path:inset(12% 12% 12% 12% round 18px);opacity:.4}to{clip-path:inset(0 0 0 0 round 18px);opacity:1}}
.sg-lb-cap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;padding:10px 16px;border-radius:999px;color:#14204A;
  background-color:rgba(255,255,255,.86);background-image:var(--gl-sheen);box-shadow:var(--gl-rim,none),var(--gl-drop,none);font-size:15px;text-align:center}
.sg-lb-cap b{font-weight:800}
.sg-lb-cap .sg-lb-made{font-size:13px;color:#3E4866}
.sg-lb button{position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:999px;border:1px solid rgba(255,255,255,.4);
  background:rgba(255,255,255,.9);color:#14204A;font:800 22px/1 var(--font,inherit);cursor:pointer;z-index:2;box-shadow:0 8px 24px rgba(0,0,0,.25)}
.sg-lb-x{top:16px;right:16px}
.sg-lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.sg-lb-next{right:16px;top:50%;transform:translateY(-50%)}
.sg-lb svg{width:22px;height:22px}
html.sg-lock{overflow:hidden}
/* ---- phones: simple 2-column masonry, no 3D ---- */
@media (max-width:600px){
  .sg{--sg-gap:10px;--sg-r:12px}
  .sg-sw{display:none}
  .sg-chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-2px;margin-right:-2px;padding:2px 2px 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .sg-chips::-webkit-scrollbar{display:none}
  .sg-chip{flex:none;min-height:40px;font-size:13px}
  .sg-tile{padding:5px;border-radius:16px;-webkit-backdrop-filter:none;backdrop-filter:none}
  .sg-cap{padding:7px 2px 1px}
  .sg-cap b{font-size:13px}
  .sg-tag{font-size:11px;padding:1px 8px}
  .sg-media img{transition:none}
  .sg-tile:hover .sg-media img{transform:none}
  .sg-lb{padding:12px}
  .sg-lb-img{max-height:calc(100vh - 220px);border-radius:14px}
  .sg-lb-prev,.sg-lb-next{top:auto!important;bottom:16px;transform:none!important}
  .sg-lb-box{margin-bottom:56px}
}
/* ---- reduced motion (OS setting or the page's own "Reduce motion" button = html.rm-user) ---- */
@media (prefers-reduced-motion:reduce){
  .sg-view,.sg-lb-veil,.sg-lb-img,.sg.sg-anim .sg-wall .sg-tile.is-in{animation:none!important}
  .sg.sg-anim .sg-wall .sg-tile{opacity:1}
  .sg-media img,.sg-gtile img,.sg-sw-thumb,.sg-sw-btn,.sg-plane,.sg-lanes{transition:none!important}
  .sg-tile:hover .sg-media img,.sg-tile:focus-visible .sg-media img{transform:none}
}
html.rm-user .sg-view,html.rm-user .sg-lb-veil,html.rm-user .sg-lb-img,html.rm-user .sg.sg-anim .sg-wall .sg-tile.is-in{animation:none!important}
html.rm-user .sg.sg-anim .sg-wall .sg-tile{opacity:1}
html.rm-user .sg-media img,html.rm-user .sg-sw-thumb{transition:none!important}
html.rm-user .sg-tile:hover .sg-media img{transform:none}
/* ---- v1.1 (Rowan 16:13): topic line, atmosphere photos (secondary), soft backdrop, 3D hover label ---- */
.sg-cap small{flex:1 0 100%;order:3;color:#4A5578;font-size:12.5px;line-height:1.3}
.sg-hasbd::before{content:"";position:absolute;z-index:-1;inset:-18px -12px;border-radius:28px;background:var(--sg-bd) center/cover no-repeat;opacity:.28;filter:saturate(1.15);pointer-events:none}
.sg-hasbd{isolation:isolate}
.sg-hasbd .sg-stage{background:linear-gradient(180deg,rgba(16,26,61,.86),rgba(16,26,61,.94)),var(--sg-bd) center/cover no-repeat,var(--sg-tone)}
.sg-ph{margin:0;padding:8px;border-radius:calc(var(--sg-r) + 6px);background:rgba(255,255,255,.45);border:1px dashed rgba(122,134,159,.55)}
.sg-ph .sg-media{opacity:.92}
.sg-ph figcaption{padding:8px 4px 2px;color:#4A5578;font-size:12px;font-style:italic}
.sg.sg-anim .sg-wall .sg-ph{animation:sg-rise .7s cubic-bezier(.22,.9,.24,1) both}
.sg-glab{position:absolute;left:10px;right:10px;bottom:10px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.88);color:#14204A;
  font:600 12px/1.3 var(--font,inherit);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translateY(6px);transition:opacity .3s,transform .3s;pointer-events:none}
.sg-gtile:hover .sg-glab{opacity:1;transform:none}
.sg-lb-brief{color:#3E4866;font-size:14px}
.sg-credit{margin:10px 0 0;text-align:right;color:#4A5578;font-size:12px;font-style:italic}
.sg-credit:empty{display:none}
@media (max-width:600px){.sg-hasbd::before{inset:-10px -8px;border-radius:20px}.sg-ph{padding:5px;border-radius:16px}.sg-cap small{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.sg.sg-anim .sg-wall .sg-ph{animation:none}.sg-glab{transition:none}}
html.rm-user .sg.sg-anim .sg-wall .sg-ph{animation:none}

/* blend_v1 LOW 7/9 (2026-11-03): tiles inherit the site font; pause pill: see note below. Rollback: delete this block. */
.sg-gtile,.sg-tile{font-family:inherit}
/* .sg-pause left as-is: it sits in the dark dock over the 3D stage beside the other dock chips (white on dark, 17.7:1); a light pill there would be the odd one out. */