/* ============================================================
   DESIGN PAGES — the index
   Deliberately a container, not an exhibit: graphite room, no
   colour of its own. Every accent on this page is inherited
   from the work it points at (--accent, set per card).
   ============================================================ */
:root{
  --ink:#0a0a0b;
  --ink-2:#0f0f11;
  --paper:#eae8e4;
  --dim:#8a8885;
  --dim-2:#5a5856;
  --line:rgba(234,232,228,.13);
  --line-soft:rgba(234,232,228,.07);
  --serif:"Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans:"Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --pad:clamp(20px, 4.2vw, 68px);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* A single soft light source, top-right, so the room has a direction. */
body::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(110% 80% at 82% -6%, rgba(255,255,255,.055), transparent 58%),
    radial-gradient(80% 60% at 8% 104%, rgba(255,255,255,.028), transparent 62%);
}
a{color:inherit}
img{display:block; max-width:100%}

.wrap{max-width:1360px; margin:0 auto; padding:0 var(--pad)}

/* ---------- masthead ---------- */
.top{
  display:flex; align-items:baseline; justify-content:space-between; gap:20px;
  padding:22px 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}
.top b{font-weight:500; color:var(--paper); letter-spacing:.14em}

.masthead{padding:clamp(56px,11vh,132px) 0 clamp(34px,6vh,64px)}
.masthead h1{
  margin:0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(42px, 6.6vw, 94px);
  line-height:.96; letter-spacing:-.015em;
  max-width:16ch; text-wrap:balance;
}
.masthead h1 em{font-style:italic; color:var(--dim)}
.masthead h1 .nb{white-space:nowrap}
.masthead p{
  margin:clamp(20px,3vh,30px) 0 0;
  max-width:52ch; font-size:clamp(15px,1.5vw,17px); color:var(--dim);
}

.rule{height:1px; background:var(--line); margin:0}

/* ---------- grid ----------
   Two across at most: these are designs, not thumbnails, and a 3-up grid
   shrinks them past the point where you can read the work. The newest entry
   runs the full width as a lead — which also keeps the page composed when
   there is only one of them. */
.grid{
  display:grid; gap:clamp(26px,3.4vw,54px);
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  padding:clamp(34px,6vh,64px) 0 clamp(56px,10vh,120px);
}
.card.lead{grid-column:1 / -1}
@media (min-width:900px){
  .card.lead{
    display:grid; grid-template-columns:1.4fr .6fr;
    gap:clamp(28px,3.4vw,52px); align-items:center;
  }
  .card.lead .shot{aspect-ratio:16/9.6}
  .card.lead .meta{margin-top:0}
  .card.lead h2{font-size:clamp(34px,3.6vw,50px)}
  .card.lead p{font-size:15.5px}
}

.card{
  --accent:var(--paper);
  display:block; text-decoration:none; color:inherit;
  outline-offset:6px;
}
.card:focus-visible{outline:2px solid var(--accent)}

.shot{
  position:relative; overflow:hidden;
  aspect-ratio:16/10;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:3px;
  isolation:isolate;
}
.shot img{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  transform:scale(1.001);
  transition:transform .9s cubic-bezier(.2,.7,.2,1), filter .5s ease;
  filter:saturate(.92) contrast(1.02);
}
/* Fallback plate when a page has no screenshot yet — never a broken image. */
.shot .plate{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 100% at 74% 12%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%),
    linear-gradient(160deg, var(--ink-2), #000);
  display:grid; place-items:center;
}
.shot .plate span{
  font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--dim-2);
}
/* accent hairline that draws in on hover */
.shot::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; z-index:2;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.7,.2,1);
}
.card:hover .shot::after,.card:focus-visible .shot::after{transform:scaleX(1)}
.card:hover .shot img,.card:focus-visible .shot img{transform:scale(1.045); filter:saturate(1) contrast(1.04)}
/* Reduced motion: none of this exists, so nothing waits on a delay. */
@media (prefers-reduced-motion: no-preference){
/* a single pass of the card's own accent across the plate on hover — tone,
   not shadow; the hub still has no colour of its own */
.shot::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(105deg, transparent 34%, color-mix(in srgb, var(--accent) 16%, transparent) 50%, transparent 66%);
  transform:translateX(-101%);
}
.card:hover .shot::before,.card:focus-visible .shot::before{
  transform:translateX(101%);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1);
}

/* The room's light comes up once on arrival: the title settles, its italic
   follows, the lede after it, and the rule draws across the way a card's
   accent hairline does. Nothing else on the hub moves unless hovered. */
@keyframes settle{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.masthead h1{animation:settle .9s cubic-bezier(.2,.7,.2,1) .1s backwards}
.masthead h1 em{display:inline-block; animation:settle .9s cubic-bezier(.2,.7,.2,1) .45s backwards}
.masthead p{animation:settle .9s cubic-bezier(.2,.7,.2,1) .7s backwards}
.masthead + .rule{transform-origin:left; animation:draw 1.2s cubic-bezier(.2,.7,.2,1) .9s backwards}
}

.meta{
  display:flex; align-items:baseline; gap:12px;
  margin:16px 0 0;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--dim-2);
}
.meta .no{color:var(--accent)}
.meta .dot{flex:1 1 auto; height:1px; background:var(--line-soft); transform:translateY(-3px)}

.card h2{
  margin:9px 0 0;
  font-family:var(--serif); font-weight:400;
  font-size:clamp(26px,2.5vw,34px); line-height:1.06; letter-spacing:-.01em;
}
.card h2 .series{
  display:block; font-family:var(--mono); font-size:10.5px; font-style:normal;
  letter-spacing:.2em; text-transform:uppercase; color:var(--dim-2);
  margin-top:9px;
}
.card p{margin:12px 0 0; font-size:14.5px; color:var(--dim); max-width:46ch}
.tags{
  display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 0; padding:0; list-style:none;
}
.tags li{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--dim-2); border:1px solid var(--line); border-radius:99px; padding:3px 9px;
}

/* ---------- elements ledger ----------
   A second shelf below the exhibit grid: modules extracted from
   shipped exhibits. A ledger, not cards — number · title · source ·
   blurb · tech · links. No images by default; the row's only colour
   is a dot in the source exhibit's accent. */
.shelf-head{
  padding:clamp(30px,5vh,56px) 0 0;
  display:flex; align-items:baseline; justify-content:space-between; gap:20px; flex-wrap:wrap;
}
.shelf-head h2{
  margin:0; font-family:var(--serif); font-weight:400;
  font-size:clamp(24px,2.4vw,32px); letter-spacing:-.01em;
}
.shelf-head p{margin:0; font-size:13px; color:var(--dim); max-width:54ch}
.ledger{display:flex; flex-direction:column; padding:16px 0 clamp(56px,10vh,120px)}
.elrow{
  display:grid; grid-template-columns:minmax(64px,86px) minmax(0,1fr) auto auto auto;
  gap:10px 28px; align-items:baseline;
  padding:20px 0; border-bottom:1px solid var(--line-soft);
}
.elrow:first-child{border-top:1px solid var(--line-soft)}
.el-no{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--dim-2)}
.el-no::before{
  content:""; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--accent); margin-right:9px;
}
a.el-title{
  font-family:var(--serif); font-size:22px; line-height:1.15;
  color:var(--paper); text-decoration:none;
}
a.el-title:hover{border-bottom:1px solid var(--accent)}
.el-blurb{margin:5px 0 0; font-size:13px; color:var(--dim); max-width:62ch}
.el-src{font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--dim-2); white-space:nowrap}
.el-src a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)}
.el-tags{margin:0}
.el-links{display:flex; gap:16px; font-family:var(--mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; white-space:nowrap}
.el-links a{color:var(--dim); text-decoration:none; border-bottom:1px solid var(--line)}
.el-links a:hover{color:var(--paper); border-bottom-color:currentColor}
@media (max-width:880px){
  .elrow{grid-template-columns:1fr; gap:8px}
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:26px 0 40px;
  display:flex; flex-wrap:wrap; gap:12px 26px; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim-2);
}
footer a{text-decoration:none; border-bottom:1px solid var(--line)}
footer a:hover{color:var(--paper); border-bottom-color:currentColor}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}