/* Design Master Portfolio. Tokens from the Drafting Table system (designmastersolutions DESIGN-SYSTEM.md):
   monochrome blue, Archivo + IBM Plex Mono. Signature: every piece is a numbered plate with a title block. */
@font-face{font-family:"Archivo";src:url("/fonts/archivo-wght-latin.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Archivo Fallback";src:local("Arial");size-adjust:100%;ascent-override:88%;descent-override:22%}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-400-latin.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/fonts/plexmono-500-latin.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
  --navy-800:#00327B;--blue-500:#006DA9;--cyan-400:#009FD1;--sky-300:#4CC3E8;--sky-200:#A9DFF2;--ice-100:#EAF4FA;
  --ink-950:#041424;--ink-900:#062038;--ink-850:#0A2944;
  --bg:var(--ink-950);--surface:var(--ink-900);--text:var(--ice-100);--text-2:var(--sky-200);
  --line:rgba(0,159,209,.16);--line-strong:rgba(0,159,209,.38);--accent:var(--cyan-400);
  --sans:"Archivo","Archivo Fallback",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;
  --step--1:clamp(.78rem,.75rem + .15vw,.86rem);--step-0:clamp(1rem,.96rem + .2vw,1.1rem);
  --step-2:clamp(1.5rem,1.2rem + 1.4vw,2.3rem);--step-4:clamp(2.4rem,1.6rem + 4vw,5rem);
  --gap:clamp(.75rem,.5rem + 1vw,1.25rem);--pad:clamp(1rem,.6rem + 2.4vw,2.75rem);
  --ease:cubic-bezier(.16,1,.3,1);--dur:420ms;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 var(--step-0)/1.55 var(--sans);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;background-position:-1px -1px}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit}
a:focus-visible,button:focus-visible,video:focus-visible,:focus-visible{outline:2px solid var(--sky-300);outline-offset:3px}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em;font-size:var(--step--1)}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:20;background:var(--surface);padding:.5rem 1rem}

/* top bar: solid colour on the fixed element itself (iPhone status bar gotcha) */
.top{position:sticky;top:0;z-index:10;background-color:var(--ink-950);border-bottom:1px solid var(--line);transition:box-shadow var(--dur) var(--ease)}
.top.scrolled{box-shadow:0 8px 24px rgba(0,0,0,.35)}
.top .wrap{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;white-space:nowrap}
.brand img{width:34px;height:34px}
.brand b{font-weight:800;letter-spacing:.02em}.brand span{color:var(--text-2);font-weight:300}
.top nav{margin-left:auto;display:flex;gap:1.1rem;align-items:center;flex-wrap:nowrap}
.top nav a{text-decoration:none;color:var(--text-2);white-space:nowrap}
.top nav a:hover{color:var(--text)}
.top .cta{color:var(--ink-950);background:var(--sky-300);padding:.5rem .9rem;border-radius:2px;font-weight:700}
.top .cta:hover{color:var(--ink-950);background:var(--ice-100)}
@media (max-width:1080px){.top nav .hide-s{display:none}}
.cta-s{display:none}
@media (max-width:560px){.brand span{display:none}.top .cta{padding:.45rem .7rem;font-size:.92rem}.cta-l{display:none}.cta-s{display:inline}}
@media (max-width:380px){.brand b{font-size:.92rem}.brand img{width:28px;height:28px}}

/* hero: the drawing sheet title */
.hero{padding-top:clamp(3rem,2rem + 6vw,7rem);padding-bottom:clamp(1.5rem,1rem + 2vw,3rem)}
.hero .sheet{display:flex;gap:1rem;color:var(--accent);margin-bottom:1.25rem}
.hero h1{font-size:var(--step-4);line-height:.98;font-weight:850;letter-spacing:-.02em;margin:0;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--sky-300)}
.hero p{max-width:60ch;color:var(--text-2);margin:1.25rem 0 0}

/* index tabs: the drawer labels with counts */
.tabs{display:flex;gap:0;border:1px solid var(--line-strong);overflow-x:auto;scrollbar-width:none;margin:1.5rem 0 var(--gap)}
.tabs a{flex:1 0 auto;display:flex;justify-content:space-between;gap:1.25rem;padding:.85rem 1.1rem;text-decoration:none;
  border-right:1px solid var(--line-strong);color:var(--text-2);white-space:nowrap;min-height:48px;align-items:center}
.tabs a:last-child{border-right:0}
.tabs a b{font-weight:700;color:var(--text);text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:var(--step-0)}
.tabs a[aria-current=page]{background:var(--sky-300);color:var(--ink-950)}.tabs a[aria-current=page] b{color:var(--ink-950)}
.tabs a:hover:not([aria-current]){background:var(--ink-850)}

/* section headers on home */
.sec{padding:clamp(2rem,1.5rem + 3vw,4rem) 0 0}
.sec header{display:flex;align-items:end;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line-strong);padding-bottom:.75rem;margin-bottom:var(--gap)}
.sec h2{font-size:var(--step-2);margin:0;font-weight:800;letter-spacing:-.01em}
.sec header a{white-space:nowrap;color:var(--sky-300)}

/* plates grid: masonry with CSS columns, every card is a plate with a title block */
.plates{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,270px),1fr));gap:var(--gap)}
.plate{margin:0;background:var(--surface);border:1px solid var(--line);position:relative;
  text-decoration:none;display:block;overflow:hidden}
.plate .media{overflow:hidden;background:#000;aspect-ratio:4/3}
.plate img,.plate video{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 900ms var(--ease)}
.plate:hover img,.plate:hover video{transform:scale(1.035)}
.tb{display:grid;grid-template-columns:auto 1fr;border-top:1px solid var(--line-strong)}
.tb>*{padding:.55rem .7rem}
.tb .no{border-right:1px solid var(--line-strong);color:var(--accent)}
.tb .kind{color:var(--text-2)}
.tb h3{grid-column:1/-1;margin:0;border-top:1px solid var(--line);font-size:1.02rem;font-weight:700;line-height:1.25}
.plate .tag{position:absolute;top:.6rem;left:.6rem;background:rgba(4,20,36,.82);color:var(--ice-100);padding:.25rem .5rem;font-size:.7rem}
.plate .play{position:absolute;top:.6rem;right:.6rem;background:var(--sky-300);color:var(--ink-950);padding:.25rem .5rem;font-size:.7rem}
.reveal{opacity:0;transform:translateY(18px);transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
.reveal.in{opacity:1;transform:none}

/* piece page */
.piece{padding-top:clamp(2rem,1.5rem + 3vw,4rem);padding-bottom:clamp(2rem,1.5rem + 3vw,4rem)}
.piece .crumbs{color:var(--text-2);margin-bottom:1rem}.piece .crumbs a{color:var(--sky-300)}
.piece h1{font-size:var(--step-4);line-height:1;margin:0 0 1rem;font-weight:850;letter-spacing:-.02em}
.block{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:1px solid var(--line-strong);margin:0 0 1.5rem}
.block div{padding:.7rem .9rem;border-right:1px solid var(--line-strong)}.block div:last-child{border-right:0}
.block dt{color:var(--accent)}.block dd{margin:.2rem 0 0;font-weight:600}
.piece .lead{max-width:68ch;color:var(--text-2)}
.gallery{display:grid;gap:var(--gap);margin-top:1.5rem}
.gallery figure{margin:0;border:1px solid var(--line);background:#000}
.gallery video{width:100%;max-height:82vh;margin:0 auto}
.note{font-size:var(--step--1);color:var(--text-2);border:1px solid var(--line-strong);padding:.8rem 1rem;margin:1.5rem 0;max-width:70ch}
.pager{display:flex;justify-content:space-between;gap:1rem;margin-top:2rem;border-top:1px solid var(--line-strong);padding-top:1rem}
.pager a{text-decoration:none;color:var(--sky-300);max-width:45%}

/* closing call and footer */
.call{margin:clamp(3rem,2rem + 4vw,6rem) 0 0;border:1px solid var(--line-strong);padding:var(--pad);display:flex;
  flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;background:var(--ink-900)}
.call h2{margin:0;font-size:var(--step-2);font-weight:800;max-width:24ch}
.call a{background:var(--sky-300);color:var(--ink-950);text-decoration:none;font-weight:700;padding:.85rem 1.25rem;white-space:nowrap}
.call a:hover{background:var(--ice-100)}
footer{margin-top:3rem;border-top:1px solid var(--line);padding:2rem 0 3rem;color:var(--text-2);font-size:var(--step--1)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.75rem 2rem;justify-content:space-between}
footer a{color:var(--sky-200)}
footer button{background:none;border:0;color:var(--sky-200);text-decoration:underline;font:inherit;cursor:pointer;padding:0}
.err{min-height:60vh;display:grid;place-content:center;text-align:center}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}}
:root{--dms-cookies-bg:#062038;--dms-cookies-fg:#EAF4FA;--dms-cookies-accent:#4CC3E8;--dms-cookies-accent-fg:#041424}