/* ── timso — white-cube gallery × Off-White ─────────────────────────────────── */
:root{
  --paper:#efeee9;          /* warm gallery wall */
  --paper-2:#e6e5df;
  --ink:#0b0b0c;            /* near-black */
  --ink-2:#62615b;          /* muted */
  --line:rgba(11,11,12,.13);
  --line-2:rgba(11,11,12,.07);
  --glass:rgba(255,255,255,.6);
  --glass-bd:rgba(255,255,255,.5);
  --accent:#ff4d00;         /* safety orange, used sparingly */
  --card:#fff;
  --radius:22px;
  --shadow:0 22px 50px -24px rgba(0,0,0,.45);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,"Inter",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#0b0b0c; --paper-2:#161618; --ink:#f4f3ee; --ink-2:#928f87;
    --line:rgba(244,243,238,.15); --line-2:rgba(244,243,238,.07);
    --glass:rgba(22,22,24,.55); --glass-bd:rgba(255,255,255,.1);
    --card:#161618; --shadow:0 24px 56px -22px rgba(0,0,0,.7);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.4;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; overflow-x:hidden;
  animation:fade .6s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
a{color:inherit; text-decoration:none}
::selection{background:var(--accent); color:#fff}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* subtle paper grain */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.45;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.03'/%3E%3C/svg%3E");
}
main,header{position:relative; z-index:1}

/* scrollbar */
*{scrollbar-width:thin; scrollbar-color:var(--line) transparent}
::-webkit-scrollbar{width:10px; height:10px}
::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px; border:3px solid transparent; background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--ink-2); background-clip:content-box}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar{position:sticky; top:0; z-index:40;
  backdrop-filter:saturate(1.2) blur(14px); -webkit-backdrop-filter:saturate(1.2) blur(14px);
  background:color-mix(in srgb,var(--paper) 72%, transparent);
  border-bottom:1px solid var(--line-2)}
.bar-in{max-width:1200px; margin:0 auto; padding:15px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:18px}
.word{font-weight:800; font-size:23px; letter-spacing:-.045em}
.word .tm{font-size:11px; vertical-align:super; margin-left:1px; color:var(--ink-2)}
.bar-right{display:flex; align-items:center; gap:22px}
.nav{display:flex; gap:18px; font-family:var(--mono); font-size:11px; letter-spacing:.09em}
.nav a{color:var(--ink-2); padding:3px 0; border-bottom:1px solid transparent; transition:.18s}
.nav a:hover{color:var(--ink); border-color:var(--ink)}
.live{display:flex; align-items:center; gap:7px; font-family:var(--mono);
  font-size:10.5px; letter-spacing:.11em; color:var(--ink-2)}
.live .dot{width:7px; height:7px; border-radius:50%; background:var(--ink-2); transition:.3s}
.live.on .dot{background:var(--accent); animation:pulse 2.4s infinite}
.live.on{color:var(--ink)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,0,.5)}70%{box-shadow:0 0 0 7px rgba(255,77,0,0)}100%{box-shadow:0 0 0 0 rgba(255,77,0,0)}}

/* ── headings (Off-White) ────────────────────────────────────────────────── */
.ow{font-weight:800; letter-spacing:-.035em; line-height:.9; margin:0; text-transform:uppercase}

/* ── hero / feed ─────────────────────────────────────────────────────────── */
.hero{max-width:1200px; margin:0 auto; padding:54px 24px 8px}
.hero-head h1{font-size:clamp(48px,11.5vw,124px)}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  margin:40px 0 34px; background:var(--line-2); border:1px solid var(--line);
  border-radius:16px; overflow:hidden}
.stat{background:var(--paper); padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.stat .l{font-family:var(--mono); font-size:10px; letter-spacing:.13em; color:var(--ink-2)}
.stat .k{font-size:30px; font-weight:800; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1}
.stat .v{font-family:var(--mono); font-size:11px; letter-spacing:.03em; color:var(--ink-2); font-variant-numeric:tabular-nums}

.feed{max-width:none; margin:0; min-height:120px}
.row{
  display:grid; grid-template-columns:78px 1fr auto; gap:20px; align-items:center;
  padding:22px 18px; border-bottom:1px solid var(--line-2);
  border-radius:16px; transition:background .18s, transform .18s;
}
.row:hover{background:var(--card); transform:translateX(2px); box-shadow:var(--shadow)}
.row.fresh{animation:slideIn .55s cubic-bezier(.2,.7,.3,1)}
@keyframes slideIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}}
.thumb{width:78px; height:78px; border-radius:18px; overflow:hidden; background:var(--paper-2);
  box-shadow:inset 0 0 0 1px var(--line); position:relative; flex:none}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.rmid{min-width:0}
.rcoll{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-2);
  text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rcoll b{color:var(--ink); font-weight:600}
.rname{font-weight:700; font-size:15.5px; letter-spacing:-.012em; margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rmeta{font-family:var(--mono); font-size:10.5px; color:var(--ink-2); margin-top:5px;
  display:flex; gap:9px; flex-wrap:wrap; align-items:center}
.chip{border:1px solid var(--line); border-radius:999px; padding:1.5px 8px;
  text-transform:uppercase; letter-spacing:.05em}
.rright{text-align:right; white-space:nowrap}
.price{font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.ago{font-family:var(--mono); font-size:10.5px; color:var(--ink-2); margin-top:4px}
.ext{opacity:0; transition:opacity .18s; font-family:var(--mono); font-size:10px; color:var(--accent)}
.row:hover .ext{opacity:1}

.more{display:block; margin:30px auto 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.13em; padding:12px 24px; border:1px solid var(--ink); border-radius:999px;
  background:transparent; color:var(--ink); cursor:pointer; transition:.18s}
.more:hover{background:var(--ink); color:var(--paper)}

/* states */
.state{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-2); text-align:center; padding:54px 20px}
.skeleton-feed .srow{height:80px; border-radius:16px; margin-bottom:14px}
.skeleton-feed .srow,.gskel{position:relative; overflow:hidden; background:var(--paper-2)}
.gskel{aspect-ratio:1; border-radius:var(--radius)}
.skeleton-feed .srow::after,.gskel::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--card) 65%,transparent),transparent);
  transform:translateX(-100%); animation:shimmer 1.5s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}

/* ── collections gallery ─────────────────────────────────────────────────── */
.works{max-width:1200px; margin:0 auto; padding:72px 24px 80px}
.works-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap}
.works-head h2{font-size:clamp(34px,6vw,62px)}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(236px,1fr));
  gap:22px; margin-top:34px}
.card{position:relative; aspect-ratio:1; border-radius:var(--radius); overflow:hidden;
  background:var(--paper-2); box-shadow:inset 0 0 0 1px var(--line); display:block;
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s}
.card:hover{transform:translateY(-5px); box-shadow:var(--shadow)}
.card .art{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.card .art.fallback{display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:38px; color:var(--ink-2); background:var(--paper-2)}
.card .label{position:absolute; left:11px; right:11px; bottom:11px;
  background:var(--glass); backdrop-filter:blur(16px) saturate(1.4);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--glass-bd); border-radius:15px; padding:11px 13px;
  box-shadow:0 8px 24px -12px rgba(0,0,0,.55)}
.card .name{font-weight:800; font-size:14px; letter-spacing:-.02em; text-transform:uppercase;
  line-height:1.05; color:var(--ink); display:flex; gap:4px; align-items:baseline;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.card .name .q{color:var(--ink-2)}
.card .cmeta{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; color:var(--ink-2);
  margin-top:7px; display:flex; gap:9px; text-transform:uppercase}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width:680px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .row{grid-template-columns:60px 1fr auto; gap:14px; padding:18px 8px}
  .thumb{width:60px; height:60px; border-radius:15px}
  .nav{display:none}
  .hero{padding-top:34px}
  .works{padding-top:56px}
}
@media (prefers-reduced-motion: reduce){*{animation:none !important; transition:none !important; scroll-behavior:auto !important}}