/* =============================================================================
   Playground — standalone gallery. Self-contained: tokens + shell + gallery.
   Palette mirrors the portfolio so it still feels like the same universe,
   even though it lives in its own repo.
   ============================================================================= */
:root{
  --bg:#0a0b0d; --bg-1:#101216; --bg-2:#16181d;
  --line:#22252c; --line-2:#2c303a;
  --text:#e7e5df; --muted:#8b909a; --faint:#565b64;
  --accent:#f5b841; --accent-ink:#0a0b0d; --accent-dim:rgba(245,184,65,.14);
  --maxw:1280px;
  --gutter:clamp(22px,6vw,42px);
  --ff-display:"Space Grotesk",system-ui,sans-serif;
  --ff-body:"Inter",system-ui,sans-serif;
  --ff-mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}
[data-theme="light"]{
  --bg:#eceae3; --bg-1:#f4f2ec; --bg-2:#e3e1d9;
  --line:#d6d3ca; --line-2:#c7c4ba;
  --text:#17181b; --muted:#5b5f68; --faint:#8d9099;
  --accent:#a86a00; --accent-ink:#fff; --accent-dim:rgba(168,106,0,.12);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--ff-body);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; min-height:100vh;
  transition:background .5s var(--ease), color .5s var(--ease); }
body::before{ /* faint technical grid, like the portfolio */
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),
                   linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(circle at 50% 20%,#000,transparent 80%);
          mask-image:radial-gradient(circle at 50% 20%,#000,transparent 80%); }
a{color:var(--accent); text-decoration:none}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.wrap{ max-width:var(--maxw); margin:0 auto;
  padding-left:max(var(--gutter),env(safe-area-inset-left));
  padding-right:max(var(--gutter),env(safe-area-inset-right)); }

/* ---- top bar ---- */
.bar{ border-bottom:1px solid var(--line); position:sticky; top:0; z-index:40;
  background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(8px) }
.bar .wrap{ display:flex; align-items:center; justify-content:space-between; height:56px; max-width:none }
.brand{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.12em; color:var(--text) }
.brand b{ color:var(--accent); font-weight:500 }
.bar-tools{ display:flex; align-items:center; gap:16px }
.bar-tools a,.bar-tools button{ font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.06em;
  color:var(--muted); background:none; border:0; cursor:pointer; transition:color .25s }
.bar-tools a:hover,.bar-tools button:hover{ color:var(--accent) }

/* ---- hero ---- */
.hero{ padding-block:clamp(44px,7vw,80px) 8px }
.eyebrow{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:12px; margin:0 0 18px }
.eyebrow .line{ flex:1; height:1px; background:var(--line) }
.eyebrow .tag{ color:var(--faint); letter-spacing:.1em }
.hero h1{ font-family:var(--ff-display); font-weight:600; letter-spacing:-.03em; line-height:.92;
  font-size:clamp(2.4rem,8vw,6rem); margin:0 }
.hero h1 .dot{ color:var(--accent) }
.standfirst{ color:var(--muted); font-size:17px; max-width:56ch; margin:22px 0 0 }
.standfirst em{ color:var(--accent); font-style:normal }

/* ---- controls ---- */
.section{ padding-block:0 }
.g-controls{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; margin:clamp(24px,4vw,44px) 0 16px }
.g-toggle{ display:inline-flex; border:1px solid var(--line-2); border-radius:100px; overflow:hidden }
.g-toggle button{ font-family:var(--ff-mono); font-size:12px; letter-spacing:.04em; color:var(--muted);
  background:transparent; border:0; padding:9px 16px; cursor:pointer; transition:all .2s var(--ease) }
.g-toggle button+button{ border-left:1px solid var(--line-2) }
.g-toggle button.on{ background:var(--accent-dim); color:var(--accent) }
.g-meta{ font-family:var(--ff-mono); font-size:12px; color:var(--faint) }
.g-meta b{ color:var(--accent); font-weight:500 }
.g-drag-hint{ margin-left:auto; font-family:var(--ff-mono); font-size:11.5px; color:var(--faint) }

/* ---- cloud stage ---- */
.g-stage{ position:relative; height:clamp(440px,74vh,820px); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; background:var(--bg-1);
  cursor:grab; touch-action:none; user-select:none; -webkit-user-select:none }
.g-stage.dragging{ cursor:grabbing }
.g-stage::after{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:12px;
  box-shadow:inset 0 0 90px 30px var(--bg-1) }
.g-plane{ position:absolute; top:0; left:0; will-change:transform }
.g-item{ position:absolute; transform:translate(-50%,-50%); border:1px solid var(--line-2);
  border-radius:8px; overflow:hidden; background:var(--bg-2); cursor:pointer;
  transition:transform .28s var(--ease), border-color .2s, opacity .3s, filter .3s;
  opacity:0; box-shadow:0 12px 34px rgba(0,0,0,.4) }
.g-item.in{ opacity:1 }
.g-item img{ display:block; width:100%; height:auto; pointer-events:none }
.g-plane:has(.g-item:hover) .g-item:not(:hover){ opacity:.4; filter:saturate(.55) }
.g-item:hover{ transform:translate(-50%,-50%) scale(1.07); z-index:6; border-color:var(--accent) }
.g-cap{ position:absolute; left:0; right:0; bottom:0; padding:10px 12px 9px;
  background:linear-gradient(transparent, rgba(8,9,11,.9)); opacity:0; transition:opacity .25s;
  display:flex; align-items:baseline; gap:8px }
.g-item:hover .g-cap{ opacity:1 }
.g-cap .t{ font-family:var(--ff-display); font-weight:500; font-size:14px; color:#fff }
.g-cap .y{ font-family:var(--ff-mono); font-size:11px; color:var(--accent) }

/* ---- masonry grid ---- */
.g-grid{ column-gap:16px; columns:3 }
.g-grid .cell{ break-inside:avoid; margin:0 0 16px; border:1px solid var(--line-2); border-radius:8px;
  overflow:hidden; background:var(--bg-2); cursor:pointer; position:relative;
  transition:border-color .2s, transform .2s var(--ease) }
.g-grid .cell:hover{ border-color:var(--accent) }
.g-grid .cell img{ display:block; width:100%; height:auto }
.g-grid .cell .g-cap{ opacity:0 } .g-grid .cell:hover .g-cap{ opacity:1 }
@media (max-width:820px){ .g-grid{ columns:2 } .g-drag-hint{ display:none } }
@media (max-width:460px){ .g-grid{ columns:1 } }

.g-hide{ display:none !important }

/* ---- photography outro ---- */
.g-outro{ padding-block:clamp(46px,8vw,88px) 6px }
.g-outro .rule{ height:1px; background:var(--line); margin-bottom:26px }
.g-outro .quip{ font-family:var(--ff-display); font-weight:500; letter-spacing:-.01em; line-height:1.34;
  font-size:clamp(1.25rem,2.8vw,1.9rem); color:var(--text); max-width:24ch; margin:0 }
.g-outro .quip em{ color:var(--accent); font-style:normal }
.g-outro .exif{ display:flex; flex-wrap:wrap; gap:9px 30px; margin-top:24px;
  font-family:var(--ff-mono); font-size:12px; color:var(--muted) }
.g-outro .exif b{ color:var(--faint); font-weight:400; letter-spacing:.1em; margin-right:9px }
.g-outro .exif .v{ color:var(--accent) }

/* ---- empty / error states ---- */
.g-note{ border:1px dashed var(--line-2); border-radius:12px; background:var(--bg-1);
  padding:clamp(30px,6vw,56px); text-align:center }
.g-note .k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:.16em; color:var(--accent) }
.g-note p{ font-family:var(--ff-display); font-weight:500; font-size:clamp(1.1rem,2.4vw,1.5rem);
  color:var(--text); margin:12px auto 0; max-width:46ch; line-height:1.4 }
.g-note code{ font-family:var(--ff-mono); font-size:.82em; color:var(--accent); background:var(--accent-dim);
  padding:2px 7px; border-radius:5px }

/* ---- lightbox ---- */
.lb{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); padding:5vh 4vw }
.lb.open{ display:flex }
.lb img{ max-width:92vw; max-height:82vh; border-radius:8px; border:1px solid var(--line-2);
  box-shadow:0 30px 80px rgba(0,0,0,.6) }
.lb-cap{ position:absolute; left:0; right:0; bottom:22px; text-align:center; font-family:var(--ff-mono);
  font-size:12.5px; color:var(--muted) }
.lb-cap b{ font-family:var(--ff-display); color:var(--text); font-weight:500; font-size:15px; margin-right:10px }
.lb-cap .y{ color:var(--accent) } .lb-cap .tags{ color:var(--faint) }
.lb-x,.lb-nav{ position:absolute; background:var(--bg-1); border:1px solid var(--line-2); color:var(--text);
  font-family:var(--ff-mono); cursor:pointer; border-radius:8px; transition:all .2s }
.lb-x:hover,.lb-nav:hover{ border-color:var(--accent); color:var(--accent) }
.lb-x{ top:20px; right:20px; width:40px; height:40px; font-size:15px }
.lb-nav{ top:50%; transform:translateY(-50%); width:44px; height:60px; font-size:20px }
.lb-prev{ left:16px } .lb-next{ right:16px }
.lb-count{ position:absolute; top:26px; left:24px; font-family:var(--ff-mono); font-size:12px; color:var(--faint) }
.lb-count b{ color:var(--accent); font-weight:500 }
@media (max-width:560px){ .lb-nav{ width:38px; height:52px } }

/* ---- footer ---- */
footer{ border-top:1px solid var(--line); margin-top:50px; padding-block:26px 46px }
footer .wrap{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; max-width:none }
footer p,footer a{ font-family:var(--ff-mono); font-size:12px; color:var(--faint) }
footer a:hover{ color:var(--accent) }