/* 117 — "anon" design: hero + editorial index + per-work detail pages.
   Ported from 117-anon.html; data comes from script.js (API/works.js). */

:root{
  color-scheme:light only;
  --bg:#FFFFFF;
  --ink:#0A0A0A;
  --muted:#8A8A8A;
  --line:#EBEAE6;
  --rust:#C25A33;
}
*{box-sizing:border-box;margin:0;padding:0;}
[hidden]{display:none !important;}
html{background:#fff;scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  font-size:15px;
}
a{color:inherit;text-decoration:none;}
::selection{background:var(--rust);color:#fff;}
img{max-width:100%;}

/* ---------- HEADER ---------- */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;justify-content:space-between;align-items:center;
  padding:20px 5vw;
  border-bottom:1px solid var(--line);
}
header .logo{font-size:20px;font-weight:700;letter-spacing:-0.01em;}
header nav{display:flex;gap:26px;font-size:13px;}
header nav a{opacity:0.7;transition:opacity .2s;}
header nav a:hover, header nav a.active{opacity:1;}

/* ---------- HERO SPLASH ---------- */
#hero{
  min-height:78svh;
  display:flex;align-items:center;justify-content:center;
  border-bottom:1px solid var(--line);
}
.hero-wrap{position:relative;display:inline-block;cursor:pointer;}
.hero-wrap .hero-num{
  font-size:clamp(110px,26vw,340px);
  font-weight:700;letter-spacing:-0.03em;line-height:0.85;
  color:var(--ink);
  display:block;
  transition:opacity .04s linear;
}
.hero-wrap canvas{
  position:absolute;left:0;top:0;
  opacity:0;pointer-events:none;
}
.hero-wrap.glitching .hero-num{opacity:0;}
.hero-wrap.glitching canvas{opacity:1;}

/* ---------- WORK INDEX ---------- */
#work-view{max-width:1200px;margin:0 auto;padding:0 5vw;}
.row{
  display:grid;grid-template-columns:220px 1fr;gap:40px;
  padding:70px 0;border-bottom:1px solid var(--line);
  align-items:start;
}
.row:first-child{padding-top:56px;}
.row-text{position:sticky;top:110px;}
.row-title{font-size:26px;font-weight:700;letter-spacing:-0.01em;}
.row-year{margin-top:4px;font-size:13px;color:var(--muted);}
.row-mat{margin-top:16px;font-size:13px;line-height:1.6;color:#444;max-width:180px;}
.row-dim{margin-top:12px;font-size:13px;color:var(--muted);}
.row-price{margin-top:12px;font-size:12px;letter-spacing:0.05em;text-transform:uppercase;color:var(--muted);}
.row-price.sold{color:var(--ink);font-weight:700;}
.row-thumb{
  cursor:pointer;overflow:hidden;background:#F7F6F3;
  display:flex;align-items:center;justify-content:center;
}
.row-thumb img{width:100%;height:auto;display:block;transition:transform .8s cubic-bezier(.2,.7,.2,1);}
.row-thumb:hover img{transform:scale(1.02);}

@media(max-width:720px){
  .row{grid-template-columns:1fr;gap:14px;padding:36px 0;}
  .row-text{position:static;}
  #work-view{padding:0;}
  .row{padding-left:5vw;padding-right:5vw;}
  .row-thumb{margin:0 -5vw;width:100vw;}
}

/* ---------- DETAIL VIEW ---------- */
#detail-view{
  display:none;
  max-width:900px;margin:0 auto;padding:50px 5vw 100px;
}
#detail-view.open{display:block;}
#work-view.hidden{display:none;}

.d-back{display:inline-block;margin-bottom:34px;font-size:13px;color:var(--muted);}
.d-back:hover{color:var(--ink);}
.d-title{font-size:32px;font-weight:700;letter-spacing:-0.01em;}
.d-year{margin-top:6px;font-size:13px;color:var(--muted);}
.d-mat{margin-top:20px;font-size:15px;line-height:1.7;color:#333;max-width:440px;}
.d-dim{margin-top:14px;font-size:13px;color:var(--muted);}
.d-price{margin-top:14px;font-size:13px;color:var(--muted);}
.d-price.sold{color:var(--ink);font-weight:700;letter-spacing:0.05em;text-transform:uppercase;}
.d-price a{color:var(--rust);}
.d-price a:hover{text-decoration:underline;}

.d-hero{margin-top:44px;background:#F7F6F3;}
.d-hero img{width:100%;display:block;}

@media(max-width:720px){
  #detail-view{padding-left:0;padding-right:0;}
  .d-back, .d-title, .d-year, .d-mat, .d-dim, .d-price, .d-section-label, .d-footer{margin-left:5vw;margin-right:5vw;}
  .d-hero{margin-left:0;margin-right:0;}
  .d-video, .d-details-grid{margin-left:5vw;margin-right:5vw;}
}

.d-section-label{
  margin:56px 0 20px;font-size:11px;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted);
  padding-top:26px;border-top:1px solid var(--line);
}

.d-video{
  position:relative;background:#111;aspect-ratio:16/10;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.d-video video{width:100%;height:100%;object-fit:cover;display:block;background:#000;}

.d-details-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.d-details-grid .dcrop{
  aspect-ratio:1/1;overflow:hidden;background:#F7F6F3;position:relative;
}
.d-details-grid .dcrop img{width:100%;height:100%;object-fit:cover;}

.d-footer{
  margin-top:70px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;font-size:12px;color:var(--muted);
  flex-wrap:wrap;gap:14px;
}
.d-footer .links{display:flex;gap:18px;}
.d-footer a:hover{color:var(--ink);}

@media(max-width:600px){
  .d-details-grid{grid-template-columns:repeat(2,1fr);}
}

/* ---------- INFO ---------- */
#info{
  max-width:900px;margin:0 auto;padding:100px 5vw 120px;
  border-top:1px solid var(--line);
}
.info-num{font-size:48px;font-weight:700;letter-spacing:-0.02em;}
.info-statement{margin-top:26px;font-size:15px;line-height:1.7;color:#444;max-width:440px;}
.info-contact{margin-top:36px;font-size:14px;}
.info-contact a{display:block;}
.info-contact a + a{margin-top:8px;text-decoration:underline;}