/* Layout: a light gallery. Home = an introduction, then one framed cover per project with its
   plate (title, year, materials) under it. Project page = images scrolling on the left, a sticky
   spec sheet on the right, like a museum label next to the object. */
:root{
  --bg:#f3f4f6; --panel:#ffffff; --fg:#16181b; --muted:#6b727b; --line:#dcdfe4; --soft:#e8eaee;
  --glint:linear-gradient(90deg,#ff4fc3,#ff9d2e,#19c6ff);   /* dichroic: the one flourish */
  --display:"Bricolage Grotesque","Arial Narrow",Arial,sans-serif;
  --body:"Instrument Sans","Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",Consolas,monospace;
  --gutter:clamp(12px,1.6vw,24px);
  --gap:clamp(8px,1vw,14px);
  color-scheme:light dark;
}
/* Dark mode follows the visitor's system setting. Cover labels sit on photos with their own
   dark gradient, so they keep their light text in both themes. */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f1113; --panel:#171a1d; --fg:#ece8e1; --muted:#9aa3ab; --line:#2a3036; --soft:#1c2024;
    --glint:linear-gradient(90deg,#ff7ad9,#ffb85c,#5fd8ff);
  }
  .draft-note{color:#e0b341}
  img,video{filter:brightness(.94)}   /* photos sit a touch lower so they don't glare on a dark page */
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--body);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
img,video{display:block;max-width:100%}

/* header */
.top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:22px var(--gutter) 0}
.brand{font-family:var(--display);font-weight:700;font-size:19px;text-decoration:none}
.top nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 22px;font-size:15px;min-width:0}
.top nav a{text-decoration:none;color:var(--muted)}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg)}

/* home: introduction, then the covers */
.intro-home{padding:clamp(36px,7vh,88px) var(--gutter) clamp(24px,4vh,48px);max-width:1200px}
.intro-home h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,7vw,104px);line-height:.95;letter-spacing:-.02em;margin:0;text-wrap:balance}
.intro-home p{font-size:clamp(18px,1.9vw,24px);line-height:1.4;color:var(--muted);max-width:40ch;margin:22px 0 0;text-wrap:pretty}
.intro-home .where{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:26px;letter-spacing:.04em}

/* Covers: a two-column grid. A "full" project spans both columns as a 2:1 rectangle; a "half"
   project is a square, so two halves sit side by side at exactly the height of one full. */
.covers{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);padding:0 var(--gutter) clamp(28px,5vh,56px)}
.cover{display:block;text-decoration:none;color:#fff;min-width:0}
.cover.full{grid-column:1/-1}
.cover .frame{position:relative;overflow:hidden;border-radius:4px;background:var(--soft);isolation:isolate}
.cover.full .frame{aspect-ratio:2/1}
.cover.half .frame{aspect-ratio:1/1}
.cover .still,.cover .motion{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto!important}
.cover .still{transition:transform 1.2s ease}
.cover:hover .still{transform:scale(1.015)}
.cover .motion{opacity:0;transition:opacity .4s ease;z-index:1;pointer-events:none}
.cover.playing .motion{opacity:1}
/* only appears in studio previews: published builds leave hidden projects out entirely */
.cover .hidden-badge{position:absolute;top:12px;left:12px;z-index:3;font-family:var(--mono);font-size:12px;background:#ffd36e;color:#16181b;padding:3px 8px;border-radius:3px}
.cover.is-hidden .still{opacity:.45}
.cover .frame::after{content:"";position:absolute;inset:auto 0 0;height:48%;z-index:2;background:linear-gradient(to top,rgba(8,9,11,.78),rgba(8,9,11,0))}
.label{position:absolute;left:clamp(16px,2.4vw,32px);right:clamp(16px,2.4vw,32px);bottom:clamp(14px,2.4vw,30px);z-index:3;
  display:grid;grid-template-columns:auto 1fr auto;gap:8px 18px;align-items:end}
.label > *{min-width:0}
.label .num{font-family:var(--mono);font-size:12px;color:#d6dce1;padding-bottom:5px}
.label .t{display:flex;flex-direction:column;overflow-wrap:anywhere}
.label strong{font-family:var(--display);font-weight:700;font-size:clamp(26px,4vw,56px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.cover.half .label strong{font-size:clamp(22px,2.6vw,36px)}
.label em{font-style:normal;font-size:clamp(14px,1.3vw,18px);color:#e4e8ec;margin-top:7px;max-width:60ch}
.cover.half .label em{font-size:clamp(13px,1.1vw,15px)}
.label .meta{font-family:var(--mono);font-size:12px;color:#d6dce1;padding-bottom:5px;text-align:right;white-space:nowrap}
.cover.half .label .meta,.cover.half .label .num{display:none}
.cover:hover .label strong{background:var(--glint);-webkit-background-clip:text;background-clip:text;color:transparent}
@media (max-width:640px){
  .covers{grid-template-columns:1fr}
  .cover.full .frame{aspect-ratio:4/5}
  .cover.half .frame{aspect-ratio:1/1}
  .label{grid-template-columns:1fr}
  .label .num{display:none}
  .label .meta{text-align:left;white-space:normal}
}

/* project page: gallery left, sticky sheet right */
.project main{padding:28px var(--gutter) 40px}
.sheet-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,4vw,64px);align-items:start}
.side{position:sticky;top:24px}
.side h1{font-family:var(--display);font-weight:700;font-size:clamp(30px,3.2vw,44px);line-height:1.02;letter-spacing:-.01em;margin:0;text-wrap:balance}
.side .sub{font-size:17px;color:var(--muted);margin:10px 0 0;text-wrap:pretty}
.spec{display:grid;grid-template-columns:1fr;gap:10px;margin:22px 0 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec div{display:grid;grid-template-columns:96px 1fr;gap:12px;min-width:0}
.spec dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.spec dd{margin:0;font-size:15px;line-height:1.45}
.summary{font-size:15.5px;line-height:1.55;margin:18px 0 0}
.summary p{margin:0 0 10px}
.links{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-size:14px;text-decoration:none;background:var(--panel)}
.links a:hover{border-color:var(--fg)}
.draft-note{font-family:var(--mono);font-size:12px;color:#b8860b;margin:0 0 10px}

.gallery{min-width:0}
.gallery > p,.gallery > h2,.gallery > h3,.gallery > ul,.gallery > ol,.gallery > blockquote{max-width:62ch}
.gallery > p{margin:14px 0 22px}
.gallery > h2{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.2vw,28px);line-height:1.1;margin:36px 0 6px}
.gallery > h3{font-family:var(--display);font-weight:600;font-size:19px;margin:26px 0 4px}
.gallery li{margin:4px 0}
.gallery figure{margin:0 0 18px;padding:0}
.gallery figure img{width:100%;height:auto;border-radius:4px;background:var(--soft)}
.gallery figcaption{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:8px}
.gallery .video{position:relative;aspect-ratio:16/9;margin:0 0 18px;border-radius:4px;overflow:hidden;background:var(--soft)}
.gallery .video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.gallery .row{display:grid;grid-template-columns:repeat(var(--n,2),1fr);gap:14px;margin:0 0 18px}
.gallery .row figure{margin:0}
@media (max-width:900px){
  .sheet-layout{grid-template-columns:1fr}
  .side{position:static;order:-1}
}
@media (max-width:700px){.gallery .row{grid-template-columns:1fr}}

.pn{display:flex;justify-content:space-between;gap:20px;margin:48px 0 0;padding:22px 0 0;border-top:1px solid var(--line)}
.pn a{text-decoration:none;font-family:var(--display);font-weight:600;font-size:20px;display:flex;flex-direction:column;gap:4px}
.pn a span{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pn .next{text-align:right}
.pn a:hover{background:var(--glint);-webkit-background-clip:text;background-clip:text;color:transparent}
.pn a:hover span{color:var(--muted)}

.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:28px var(--gutter);font-family:var(--mono);font-size:12.5px;color:var(--muted);border-top:1px solid var(--line)}

:focus-visible{outline:2px solid #19c6ff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  .cover .still,.cover .motion{transition:none}
  .cover:hover .still{transform:none}
}