/* CADEN FINCKE — Special Offer system: warm black, bone Helvetica bold, red info panel. */
:root{
  --bg:#0f0e0c; --ink:#c7c1b4; --red:#e40000; --pink:#ff06d2; --yellow:#dfab1a;
  --disp:"HelveticaNeue-CondensedBlack","Arial Narrow",Impact,"Helvetica Neue",sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --fs-ui:14px; --fs-body:20px; --fs-display:64px;
  --pad-x:64px; --pad-y:32px;                   /* 12-col grid: 80px cols + 32px gaps */
  --t-fade:.5s; --t-page:.3s; --bloom:1.2s;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bg)}
body{font-family:var(--body);font-weight:700;font-size:var(--fs-ui);color:var(--ink);
     letter-spacing:-.01em;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:hover{opacity:.6}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
button:hover{opacity:.6}

/* header — wordmark / Project Archive (col 8) / Information (right) */
.top{position:fixed;inset:0 0 auto 0;z-index:20;display:grid;gap:0 32px;
     grid-template-columns:repeat(12,1fr);align-items:baseline;
     padding:var(--pad-y) var(--pad-x) 0}
.wordmark{grid-column:1/8;font-size:var(--fs-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-archive{grid-column:8/11;justify-self:start}
.info-btn{grid-column:11/13;justify-self:end}

/* home — one full-viewport slide, random per visit */
body.home{height:100dvh;overflow:hidden}
.hs{display:none}
.hs.on{display:block}
.hs a.slide{position:fixed;inset:0;z-index:1}
.hs a.slide:hover{opacity:1}
.hs img{width:100%;height:100%;object-fit:cover;display:block}
.hs figcaption{position:fixed;left:var(--pad-x);bottom:var(--pad-y);z-index:20}
.home-contact{position:fixed;right:var(--pad-x);bottom:var(--pad-y);z-index:20}

/* reveal machinery (zero-specificity hide so .in always wins) */
:where(html.js) .fade{opacity:0;transition:opacity var(--t-fade) ease}
html.js .fade.in{opacity:1;transition-delay:var(--d,0s)}
html.leaving{opacity:0;transition:opacity var(--t-page) ease}
img{max-width:100%;height:auto;display:block}
:where(html.js) main img,:where(html.js) .hs img{opacity:0}
html.js main img.ld.vis,html.js .hs img.ld.vis{opacity:1;transition:opacity var(--bloom) ease}

/* archive — giant client list + flat sortable table */
main{padding:0 var(--pad-x)}
.arch-hero{padding:150px 0 120px;max-width:1220px;margin:0 auto;text-align:center;
  font-size:var(--fs-display);line-height:1;letter-spacing:-.01em}
.thead{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;
  padding:10px 0;border-bottom:1px solid rgba(199,193,180,.25)}
.thead button{text-align:left}
.thead .h-y{grid-column:1/2}.thead .h-c{grid-column:2/5}
.thead .h-p{grid-column:5/9}.thead .h-k{grid-column:9/13}
.thead .dir{display:inline-block;margin-right:.35em}
#rows{padding-bottom:120px}
a.row{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;
  font-size:var(--fs-body);font-weight:500;padding:6px 0}
a.row .ry{grid-column:1/2}a.row .rc{grid-column:2/5}
a.row .rp{grid-column:5/9}a.row .rk{grid-column:9/13}
a.row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* project pages */
.proj-head{padding:180px 0 90px;text-align:center;font-size:var(--fs-display);line-height:1}
.proj-head .client,.proj-head h1{font-size:inherit;font-weight:700;letter-spacing:-.01em}
.proj-meta{display:grid;grid-template-columns:repeat(12,1fr);gap:0 32px;
  font-size:var(--fs-body);font-weight:500;padding-bottom:90px}
.proj-meta .m-roles{grid-column:1/7}
.proj-meta .m-client{grid-column:7/10}
.proj-meta .m-year{grid-column:10/13}
.proj-meta .m-roles span{display:block}
.stack{display:flex;flex-direction:column;gap:32px}
.stack img{width:100%}
.stack .video{aspect-ratio:16/9}
.stack .video iframe{width:100%;height:100%;border:0}
.proj-next{display:flex;justify-content:space-between;gap:32px;padding:90px 0 var(--pad-y);
  font-size:var(--fs-body);font-weight:500}

/* 404 */
.lost{padding:180px 0;text-align:center;font-size:var(--fs-body);font-weight:500}

/* information panel — Special Offer red */
.info-panel{position:fixed;inset:0 0 0 auto;width:50vw;background:var(--red);color:#000;
  padding:96px 40px 40px;overflow-y:auto;overscroll-behavior:contain;z-index:30;
  visibility:hidden;transform:translateX(100%);
  transition:transform .35s ease,visibility 0s .35s}
html.info-open .info-panel{visibility:visible;transform:none;transition:transform .35s ease}
.info-close{position:absolute;top:var(--pad-y);right:var(--pad-x);color:#000}
.ip-photo{position:relative;max-width:360px;margin:0 auto 64px}
.ip-photo img{width:100%}
.ip-photo .over{position:absolute;top:40px;left:0;right:0;text-align:center;
  color:var(--yellow);font-size:20px}
.ip-display{font-family:var(--disp);font-weight:900;text-transform:uppercase;
  color:var(--pink);text-align:center;font-size:clamp(44px,6vw,88px);line-height:.9;
  letter-spacing:-.002em;margin:0 0 56px}
.ip-groups{display:flex;justify-content:center;gap:48px;flex-wrap:wrap;margin:0 0 72px}
.ip-groups .g{font-size:11px;line-height:1.15;letter-spacing:-.02em}
.ip-groups .g h3{font-size:11px;margin-bottom:.9em}
.ip-groups .g p{margin:0}
.ip-copy{max-width:400px;margin:0 auto 56px;font-size:15px;font-weight:500;line-height:1.35;text-align:center}
.ip-copy a{text-decoration:underline}
.ip-foot{text-align:center;font-size:11px;margin-top:72px}
@media(max-width:900px){.info-panel{width:100vw}}

/* mobile */
@media(max-width:640px){
  :root{--pad-x:20px;--pad-y:20px;--fs-display:34px}
  .top{display:flex;justify-content:space-between;gap:16px}
  .wordmark{flex:1 1 auto}
  .arch-hero{padding:110px 0 70px}
  .thead .h-p,.thead .h-k,a.row .rk{display:none}
  .thead,a.row{grid-template-columns:64px 1fr;gap:0 16px}
  .thead .h-y,a.row .ry{grid-column:1/2}
  .thead .h-c,a.row .rc{grid-column:2/3}
  a.row .ry{grid-row:1}
  a.row .rc{grid-column:2;grid-row:1;white-space:normal}
  a.row .rp{grid-column:2;grid-row:2;white-space:normal}
  .proj-head{padding:120px 0 56px}
  .proj-meta{display:block;padding-bottom:56px}
  .proj-meta>div{margin-bottom:1.2em}
  .stack{gap:16px}
  .info-panel{padding:80px 20px 32px}
}