/* =============================================================
   site.css — the shared look for every page: header, menu, footer,
   buttons and the full-screen photo viewer. Each page adds a few
   styles of its own on top.
   ============================================================= */
:root{
  --bg:#0b0b0a; --panel:#131312; --fg:#f4f4f1;
  --mute:rgba(244,244,241,.62); --faint:rgba(244,244,241,.42); --line:rgba(244,244,241,.12);
  --mx:clamp(20px,3.4vw,52px); --out:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:'Geist',system-ui,-apple-system,sans-serif;font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:calc(env(safe-area-inset-top) + 22px) var(--mx) 22px;background:rgba(11,11,10,.88);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:16px;letter-spacing:-.01em;white-space:nowrap}
.brand-mark{display:block;flex:none;width:29px;height:20px;overflow:visible}
.brand-mark .dot{fill:#E4572E}
.site-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,32px);font-size:14px}
.site-nav a,.site-nav button{color:rgba(255,255,255,.68);transition:color .2s;white-space:nowrap}
.site-nav a:hover,.site-nav button:hover,.site-nav [aria-current="page"]{color:#fff}
.cart-n{font-variant-numeric:tabular-nums}

main{flex:1;padding:0 var(--mx)}

/* ---------- page heading row ---------- */
.page-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px 28px;flex-wrap:wrap;padding:36px 0 30px}
.page-head h1{font-weight:500;font-size:clamp(20px,1.7vw,24px);letter-spacing:-.02em}
.page-head .note{color:var(--mute);font-size:14px}

/* ---------- text tabs (filters) ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.tabs button{color:var(--faint);padding:4px 0;transition:color .2s}
.tabs button:hover{color:var(--mute)}
.tabs button[aria-pressed="true"]{color:#fff}
.tabs .ct{font-size:12px;margin-left:5px;font-variant-numeric:tabular-nums;opacity:.7}
.tabs .sep{width:1px;align-self:stretch;background:var(--line);margin:4px 2px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:999px;
  background:#fff;color:#0b0b0a;font-weight:500;font-size:15px;transition:opacity .2s,transform .2s var(--out)}
.btn:hover{opacity:.9}
.btn:active{transform:scale(.98)}
.btn.block{width:100%}
.btn.ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);opacity:1}
.link{color:var(--mute);transition:color .2s}
.link:hover{color:#fff}

/* ---------- footer ---------- */
.site-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;
  padding:96px var(--mx) calc(env(safe-area-inset-bottom) + 34px);color:var(--faint);font-size:13px}
.site-foot nav{display:flex;gap:22px}
.site-foot a:hover{color:#fff}

/* ---------- full-screen viewer (portfolio + shop) ---------- */
.viewer{position:fixed;inset:0;z-index:50;background:var(--bg);opacity:0;visibility:hidden;
  transition:opacity .35s var(--out),visibility 0s linear .35s;touch-action:none}
.viewer.open{opacity:1;visibility:visible;transition:opacity .35s var(--out),visibility 0s}
.viewer .top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:calc(env(safe-area-inset-top) + 22px) var(--mx) 0;font-size:14px;z-index:2}
.viewer .top .count{color:var(--faint);font-variant-numeric:tabular-nums}
.viewer .frame{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 76px);bottom:calc(env(safe-area-inset-bottom) + 92px)}
.viewer .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .35s var(--out),transform .5s var(--out)}
.viewer .frame img.out{opacity:0;transform:scale(.985)}
.viewer .bottom{position:absolute;left:var(--mx);right:var(--mx);bottom:calc(env(safe-area-inset-bottom) + 28px);
  display:flex;justify-content:space-between;align-items:flex-end;gap:20px}
.viewer .cap{min-width:0}
.viewer .cap .t{font-weight:500;font-size:17px;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer .cap .l{font-size:14px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer .side{position:absolute;top:76px;bottom:92px;width:33%;z-index:1}
.viewer .side.prev{left:0;cursor:w-resize}
.viewer .side.next{right:0;cursor:e-resize}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 28px);transform:translate(-50%,12px);z-index:80;
  background:#fff;color:#0b0b0a;padding:12px 20px;border-radius:999px;font-size:14px;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .3s var(--out),transform .4s var(--out);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- phone menu (site.js adds the button and the sheet) ---------- */
.menu-btn{display:none;align-items:center;gap:5px;font-size:14px;color:rgba(255,255,255,.85)}
.menu-sheet{position:fixed;inset:0;z-index:60;background:rgba(11,11,10,.97);display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 22px) var(--mx) calc(env(safe-area-inset-bottom) + 34px);opacity:0;transition:opacity .25s var(--out)}
.menu-sheet[hidden]{display:none}
.menu-sheet.open{opacity:1}
.menu-sheet .menu-top{display:flex;justify-content:space-between;align-items:center;gap:20px}
.menu-sheet .menu-close{font-size:14px;color:rgba(255,255,255,.85)}
.menu-sheet nav{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin-top:9vh}
.menu-sheet nav a,.menu-sheet nav button{font-size:38px;font-weight:500;letter-spacing:-.03em;line-height:1.25;color:rgba(255,255,255,.62);text-align:left}
.menu-sheet nav [aria-current="page"]{color:#fff}
.menu-sheet nav .cart-n{font-size:.5em;vertical-align:.7em;margin-left:4px}

@media (max-width:640px){
  .site-nav{gap:18px}
  .site-head .site-nav{display:none}
  .menu-btn{display:inline-flex}
  .page-head{padding:22px 0 22px}
  .viewer .side{display:none}
}

/* photos: no long-press "Save image" on phones */
img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}