/* ============================================================
   Sunday Labs — styles.css
   Editorial light + dark studio band (Direction A + C fusion).
   Recreated from the Claude Design handoff. No build step.
   ============================================================ */

:root{
  --paper:#FBFAF7; --ink:#1B1A17; --muted:#6E6A61; --line:#E6E2DA;
  --accent:#B4502F; --tile:#FFFFFF;
  --dark:#111214; --dark-line:rgba(255,255,255,.12); --dark-muted:#9C988F; --dark-soft:#E9E5DD;
  --mx:clamp(20px,6vw,72px); /* horizontal page margin */
  --maxw:1320px;
}
*{box-sizing:border-box;}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;}
.serif{font-family:'Instrument Serif',Georgia,serif; font-weight:400;}
.mono{font-family:'Space Mono',ui-monospace,monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--mx); padding-right:var(--mx);}
.eyebrow{font-family:'Space Mono',monospace; font-size:clamp(11px,1.5vw,12.5px);
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.accent{color:var(--accent);}

/* ── nav ───────────────────────────── */
.nav{position:sticky; top:0; z-index:50; background:rgba(251,250,247,.82);
  backdrop-filter:saturate(140%) blur(12px); -webkit-backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);}
.nav .inner{display:flex; align-items:center; justify-content:space-between;
  height:clamp(60px,8vw,76px);}
.wordmark{display:flex; align-items:center; gap:11px; font-weight:600;
  font-size:clamp(17px,2.4vw,20px); letter-spacing:-.01em; text-decoration:none;}
.wordmark .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); flex:0 0 auto;}
.navlinks{display:flex; gap:clamp(20px,3vw,38px); font-size:15px; color:var(--muted);}
.navlinks a{text-decoration:none; transition:color .15s;}
.navlinks a:hover{color:var(--ink);}

/* ── hero ──────────────────────────── */
.hero{padding:clamp(56px,11vw,128px) 0 clamp(48px,8vw,92px); border-bottom:1px solid var(--line);}
.hero h1{font-size:clamp(44px,8.6vw,104px); line-height:1.08; letter-spacing:-.02em;
  margin:clamp(20px,3vw,28px) 0 clamp(52px,8vw,96px); max-width:15ch;}
.hero h1 em{font-style:italic; color:var(--accent);}
.hero .lede{font-size:clamp(17px,2.3vw,21px); line-height:1.5; color:var(--muted);
  max-width:48ch; margin-top:0;}
.meta{display:flex; flex-wrap:wrap; gap:clamp(28px,5vw,56px); margin-top:clamp(36px,5vw,56px);}
.meta .k{font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);}
.meta .v{font-size:clamp(15px,2vw,17px); margin-top:7px;}

/* ── section frame ─────────────────── */
section.block{padding:clamp(54px,8vw,92px) 0;}
.sechead{display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom:8px;}
.sechead h2{font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); font-weight:400; margin:0;}

/* ── work index ────────────────────── */
.work .row{display:grid; grid-template-columns:54px 64px 1fr auto auto; align-items:center;
  gap:clamp(16px,2.4vw,30px); padding:clamp(22px,3vw,30px) 0; border-top:1px solid var(--line);
  text-decoration:none; color:inherit; transition:background .18s;}
.work .row:last-child{border-bottom:1px solid var(--line);}
.work .row:hover{background:rgba(180,80,47,.04);}
.work .num{font-family:'Instrument Serif',serif; font-size:clamp(20px,2.6vw,26px); color:var(--muted);}
.work .tile{width:clamp(48px,6vw,62px); height:clamp(48px,6vw,62px); border-radius:14px;
  border:1px solid var(--line); background:var(--tile); display:flex; align-items:center; justify-content:center;
  font-family:'Instrument Serif',serif; font-size:clamp(24px,3.2vw,32px); color:var(--ink); flex:0 0 auto;
  overflow:hidden;}
.work .tile img{width:100%; height:100%; object-fit:cover; display:block;}
.work .info{min-width:0;}
.work .nm{font-family:'Instrument Serif',serif; font-size:clamp(28px,4.4vw,40px); line-height:1.06; letter-spacing:-.005em;}
.work .tg{font-size:clamp(14px,1.9vw,17px); color:var(--muted); margin-top:8px;}
.work .cat{font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;}
.work .yr{font-family:'Space Mono',monospace; font-size:13px; color:var(--muted); text-align:right;
  min-width:48px; white-space:nowrap;}

/* ── studio (dark band) ────────────── */
.studio{background:var(--dark); color:var(--paper);}
.studio .wrap{padding-top:clamp(64px,9vw,104px); padding-bottom:clamp(64px,9vw,104px);}
.studio .eyebrow{color:var(--accent);}
.studio .grid{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(40px,6vw,80px); align-items:start;}
.studio h2{font-family:'Instrument Serif',serif; font-weight:400;
  font-size:clamp(32px,4.6vw,54px); line-height:1.12; letter-spacing:-.01em; margin:clamp(16px,2vw,22px) 0 0; max-width:18ch;}
.studio h2 em{font-style:italic; color:#E0794C;}
.studio p{font-size:clamp(16px,2vw,18px); line-height:1.62; color:var(--dark-soft); margin:clamp(28px,4vw,38px) 0 0; max-width:44ch;}
.facts{display:flex; flex-direction:column;}
.facts .f{display:grid; grid-template-columns:118px 1fr; gap:18px; padding:18px 0; border-top:1px solid var(--dark-line);}
.facts .f:first-child{border-top:none; padding-top:4px;}
.facts .k{font-family:'Space Mono',monospace; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#E0794C;}
.facts .v{font-size:15.5px; line-height:1.55; color:var(--dark-soft);}

/* ── contact ───────────────────────── */
.contact{display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:32px;}
.contact h3{font-family:'Instrument Serif',serif; font-weight:400; font-size:clamp(44px,8vw,80px);
  line-height:1.04; letter-spacing:-.01em; margin:clamp(14px,2vw,18px) 0 0;}
.contact .links{font-family:'Space Mono',monospace; font-size:14px; color:var(--muted); line-height:2; text-align:right;}
.contact .links a{color:var(--accent); text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px;}

/* ── footer ────────────────────────── */
footer{border-top:1px solid var(--line);}
footer .inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding-top:clamp(24px,4vw,32px); padding-bottom:clamp(24px,4vw,32px);
  font-family:'Space Mono',monospace; font-size:12.5px; color:var(--muted);}
footer .links{display:flex; gap:24px;}
footer .links a{text-decoration:none;}
footer .links a:hover{color:var(--ink);}

/* ── responsive ────────────────────── */
@media (max-width:860px){
  .studio .grid{grid-template-columns:1fr; gap:clamp(32px,7vw,48px);}
}
@media (max-width:620px){
  .navlinks{display:none;}
  .work .row{grid-template-columns:34px 1fr auto; grid-template-areas:
    "num info cat" "num tg tg"; row-gap:6px; column-gap:16px; align-items:center;}
  .work .tile{display:none;}
  .work .num{grid-area:num; align-self:start; padding-top:2px;}
  .work .info{grid-area:info;}
  .work .cat{grid-area:cat; align-self:start; padding-top:6px;}
  .work .yr{display:none;}
  .work .tg{grid-area:tg; margin-top:2px;}
  .contact{flex-direction:column; align-items:flex-start;}
  .contact .links{text-align:left;}
  .facts .f{grid-template-columns:96px 1fr; gap:14px;}
}
@media (max-width:380px){
  .facts .f{grid-template-columns:1fr; gap:4px;}
}