/* ═══════════════════════════════════════════════════════════
   phiunit.com — "Work Order"
   Warm grey stock, oxblood ink, condensed uppercase display.
   Night stock lifts the accent to vermilion because oxblood
   drops to 1.8:1 on a dark ground and disappears.
   ═══════════════════════════════════════════════════════════ */

:root {
  --stock:#e9e7e2; --card:#f4f3f0;
  --t1:#1b1917; --t2:#55504a; --t3:#66605a;
  --line:#cfcbc4; --line-hard:#1b1917;
  --acc:#7c1f2e; --acc-on:#f4f3f0; --ok:#2b6a4a;

  --disp:"Bebas Neue","Avenir Next Condensed","Helvetica Neue Condensed Bold",Impact,sans-serif;
  --body:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,system-ui,sans-serif;
  --ut:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  --pad:clamp(20px,4vw,44px);
}

@media (prefers-color-scheme:dark){
  :root{
    --stock:#16140f; --card:#201c16;
    --t1:#f2ede2; --t2:#a8a094; --t3:#918a7c;
    --line:#322d25; --line-hard:#f2ede2;
    --acc:#d95f3c; --acc-on:#16140f; --ok:#63c9a0;
  }
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--stock); color:var(--t1);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit;}

/* ── shell ── */
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px var(--pad);
  border-bottom:2px solid var(--line-hard); flex-wrap:wrap;
}
.mark{
  font-family:var(--disp); text-transform:uppercase; font-weight:400;
  font-size:22px; letter-spacing:.05em; text-decoration:none;
}
.nav ul{
  display:flex; gap:18px; list-style:none; margin:0; padding:0;
  font-family:var(--ut); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; flex-wrap:wrap;
}
.nav a{color:var(--t2); text-decoration:none;}
.nav a:hover{color:var(--acc);}
.nav a[aria-current="page"]{color:var(--acc);}

main{display:block;}
.pad{padding:clamp(26px,4vw,46px) var(--pad);}
.sec{padding:clamp(26px,3.4vw,38px) var(--pad); border-top:1px solid var(--line);}

.eyebrow{
  font-family:var(--ut); font-size:10.5px; letter-spacing:.17em;
  text-transform:uppercase; color:var(--t3); margin:0 0 18px;
}
h1.big{
  font-family:var(--disp); text-transform:uppercase; font-weight:400;
  font-size:clamp(38px,7vw,74px); line-height:.94; letter-spacing:.01em;
  margin:0 0 22px; max-width:20ch; text-wrap:balance;
}
.big i{font-style:normal;color:var(--acc);}
h1.big u, h2.big u{
  text-decoration:none; color:var(--acc);
  box-shadow:inset 0 -.15em 0 var(--acc), inset 0 -.16em 0 var(--stock);
}
.lede{font-size:16px; line-height:1.62; color:var(--t2); max-width:56ch; margin:0 0 22px;}
.lede strong{color:var(--t1); font-weight:600;}

.btns{display:flex; gap:9px; flex-wrap:wrap; font-family:var(--ut); font-size:12px; letter-spacing:.06em; text-transform:uppercase;}
.btns a{padding:12px 20px; border-radius:2px; text-decoration:none; display:inline-block;}
.btn-p{background:var(--acc); color:var(--acc-on); font-weight:600;}
.btn-g{border:1px solid var(--line-hard); color:var(--t1);}

/* ── ticker ── */
.ticker{
  font-family:var(--disp); text-transform:uppercase; font-weight:400;
  font-size:15px; letter-spacing:.09em; color:var(--acc);
  padding:11px var(--pad);
  border-top:2px solid var(--line-hard); border-bottom:2px solid var(--line-hard);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ── section heads ── */
.sh{display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 18px; flex-wrap:wrap;}
.sh h2{font-family:var(--disp); text-transform:uppercase; font-weight:400; font-size:26px; letter-spacing:.02em; margin:0;}
.sh span{font-family:var(--ut); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--t3);}

/* ── work tiles ── */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px;}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:3px;
  display:flex; flex-direction:column; overflow:hidden;
  text-decoration:none; color:inherit;
}
a.tile:hover{border-color:var(--acc);}
.shim{padding:9px 9px 0; background:var(--card);}
.plate{
  display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
  border:1px solid var(--line-hard); background:var(--stock);
}
@media (prefers-color-scheme:dark){ .plate{filter:brightness(.94);} }
.slug{
  aspect-ratio:3/2; border:1px solid var(--line-hard); background:var(--stock);
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:22px 14px; position:relative;
}
/* two hard rules, like a printer's slug standing in for artwork */
.slug::before,.slug::after{content:""; position:absolute; left:14px; right:14px; height:3px; background:var(--acc);}
.slug::before{top:14px;} .slug::after{bottom:14px;}
.slug b{
  font-family:var(--disp); text-transform:uppercase; font-weight:400;
  font-size:clamp(22px,2.6vw,32px); letter-spacing:.02em; color:var(--acc);
  line-height:.92; max-width:12ch;
}
.tile-in{padding:14px 14px 0; display:flex; flex-direction:column; gap:6px; flex:1;}
.tile h3{font-family:var(--disp); text-transform:uppercase; font-weight:400; font-size:20px; line-height:1.05; letter-spacing:.02em; margin:0;}
.tile p{font-size:13px; line-height:1.5; color:var(--t2); margin:0; flex:1;}
.tile footer{display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:4px; padding:9px 0; border-top:1px solid var(--line);}
.tile footer b{font-family:var(--ut); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--t3); font-weight:400;}
.live{font-family:var(--ut); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--ok);}
.wip{font-family:var(--ut); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--t3);}

/* ── log / post list ── */
.log{display:flex; flex-direction:column;}
.log a{
  display:grid; grid-template-columns:92px minmax(0,1fr) auto; gap:16px;
  align-items:baseline; padding:14px 0; border-bottom:1px solid var(--line);
  text-decoration:none;
}
.log a:last-child{border-bottom:0;}
.log a:hover h3{color:var(--acc);}
.log .d{font-family:var(--ut); font-size:10.5px; letter-spacing:.07em; color:var(--t3); font-variant-numeric:tabular-nums;}
.log h3{font-family:var(--disp); text-transform:uppercase; font-weight:400; font-size:19px; letter-spacing:.02em; margin:0; line-height:1.12;}
.log .m{font-family:var(--ut); font-size:10px; color:var(--t3); letter-spacing:.06em;}

/* ── prose ── */
.prose{max-width:58ch;}
.prose p{font-size:16.5px; line-height:1.62; color:var(--t2); margin:0 0 16px;}
.prose p.first{font-size:19px; color:var(--t1);}
.prose strong{color:var(--t1); font-weight:600;}
.prose h3{font-family:var(--disp); text-transform:uppercase; font-weight:400; font-size:20px; letter-spacing:.02em; margin:28px 0 10px; color:var(--t1);}
.prose ul{margin:0 0 16px; padding:0; list-style:none;}
.prose ul li{font-size:15px; color:var(--t2); padding:9px 0; border-bottom:1px solid var(--line);}
.prose ul li:last-child{border-bottom:0;}
.sig{font-family:var(--ut); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--t3); margin-top:24px;}

/* ── tracks ── */
.tracks{display:flex; flex-direction:column; border-top:2px solid var(--line-hard);}
.track{padding:14px 0; border-bottom:1px solid var(--line);}
.track .row{display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.track h3{font-family:var(--disp); text-transform:uppercase; font-weight:400; font-size:21px; letter-spacing:.02em; margin:0 0 3px;}
.track .sub{font-size:12.5px; color:var(--t2); margin:0;}
.track .kind{font-family:var(--ut); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--t3);}
audio{width:100%; margin-top:11px; max-width:520px;}

/* ── friends ── */
.roster{display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:14px;}
.init{aspect-ratio:3/2; border:1px solid var(--line-hard); background:var(--stock); display:flex; align-items:center; justify-content:center;}
.init b{font-family:var(--disp); text-transform:uppercase; font-weight:400; font-size:46px; color:var(--acc);}
.alias{font-family:var(--ut); font-size:9.5px; letter-spacing:.11em; text-transform:uppercase; color:var(--acc);}
.meta{display:flex; flex-wrap:wrap; gap:24px; padding:16px 0; margin:0 0 22px; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.meta > div{display:flex; flex-direction:column; gap:3px;}
.meta dt{font-family:var(--ut); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--t3);}
.meta dd{margin:0; font-size:13.5px; color:var(--t1); font-weight:600;}

/* ── footer ── */
.foot{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:12px; padding:20px var(--pad); border-top:2px solid var(--line-hard);
  font-family:var(--ut); font-size:10.5px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--t3);
}
.foot a{color:var(--t3); text-decoration:none;}
.foot a:hover{color:var(--acc);}

@media (max-width:560px){
  .log a{grid-template-columns:1fr; gap:4px;}
  .log .m{display:none;}
  h1.big{font-size:clamp(32px,10vw,44px);}
}