/* Layout: a two-half page. The left half holds only [ LABELS ]; display type and content start on the center line. Single light theme by design (dark mode is out of scope). */
:root{
  --ink:#111111;
  --paper:#FAFAFA;
  --muted:#555555;
  --mat:#FFFFFF;
  --ph:#F2F2F2;
  --surface-muted:#E6E6E6;
  --surface-logo:#F2F2F2;
  --overlay:#000000;
  --on-overlay:#FFFFFF;
  --accent:#11B5EA;          /* lines, progress bar, focus, labels, and the front-page headline. */
  --accent-label:#007CA6;    /* metadata labels */
  --gap-ink:#8A5A00;
  --gap-bg:#FFF4D6;

  --fallback:'Hanken Grotesk';
  --font:'Helvetica Neue', Helvetica, var(--fallback), Arial, sans-serif;

  --display:clamp(45px, 7.2vw, 115px);
  --matpad:clamp(16px,4vw,56px);
  --statement:clamp(26px, 2.6vw, 40px);
  --body:15px;
  --label:12px;

  --s-xs:4px; --s-s:12px; --s-m:24px; --s-l:48px; --s-xl:72px; --s-xxl:112px;
  --pad:clamp(16px, 3.4vw, 48px);
  --max:1440px;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
h1[tabindex="-1"]:focus{outline:none}
html{scroll-behavior:auto}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:var(--body);line-height:1.4;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.label{font-size:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;line-height:1.3}
.meta-label{color:var(--accent-label)}
.muted{color:var(--muted)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.display{font-size:var(--display);font-weight:500;line-height:.88;letter-spacing:-.02em;text-transform:uppercase;margin:0;overflow-wrap:normal;word-break:keep-all;text-wrap:balance;min-width:0}
.statement{font-size:var(--statement);font-weight:500;line-height:1.08;letter-spacing:-.015em;margin:0;text-wrap:balance;max-width:24ch}
.body{font-size:var(--body);max-width:32ch;margin:0}
.rule{border:0;border-top:1px solid var(--ink);margin:0}

/* Two halves */
.split{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-m);align-items:start}
.split > *{min-width:0}
@media (max-width:760px){.split{grid-template-columns:1fr;row-gap:var(--s-s)}}

/* Header & footer: three points */
.bar{display:grid;grid-template-columns:1fr auto 1fr;gap:var(--s-s) var(--s-m);align-items:start;padding-block:var(--s-m)}
.bar > :nth-child(2){text-align:center;justify-self:center}
.bar > :nth-child(3){text-align:right;justify-self:end}
.bar a{text-decoration:none}
.bar a:hover{text-decoration:underline;text-underline-offset:3px}
.bar .stack{display:flex;flex-direction:column;gap:2px}
.nav{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-xs) var(--s-m)}
.nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.nav a, .bar a{display:inline-flex;align-items:center;min-height:24px}
@media (max-width:760px){
  .bar{grid-template-columns:1fr 1fr}
  .bar > :nth-child(2){grid-column:1 / -1;grid-row:2;text-align:left;justify-self:start}
  .bar .nav{justify-content:flex-start}
  .nav a{min-height:44px}
}
footer .bar{padding-block:var(--s-l) var(--s-m)}

/* Progress bar */
.progress{position:fixed;left:0;right:0;top:0;height:calc(4px + env(safe-area-inset-top,0px));padding-top:env(safe-area-inset-top,0px);background:var(--surface-muted);z-index:20}
.progress span{display:block;height:4px;width:0;background:var(--accent)}

/* Sections */
.sec{padding-block:var(--s-xxl) 0}
.sec.tight{padding-block:var(--s-xl) 0}
.hero-sec{padding-block:clamp(72px,12vw,180px) 0}
.front-hero .display{color:var(--accent)}
.row{padding-block:var(--s-xl) 0}
.row + .row{padding-top:var(--s-l)}

/* Front door */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-s);margin:0;padding:0;list-style:none}
@media (max-width:520px){.logos{grid-template-columns:repeat(2,1fr)}}
.logo{position:relative;height:96px;background:var(--surface-logo);overflow:hidden}
.logo > span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:var(--s-s);text-align:center;opacity:0;transition:opacity 700ms ease}
.logo > span.on{opacity:1}
.logo .nm{font-weight:700;font-size:13px;letter-spacing:.01em;line-height:1.15;color:var(--ink)}
.logo img{max-height:36px;max-width:68%;width:auto;filter:grayscale(1)}
.access{display:flex;flex-direction:column;gap:var(--s-m);max-width:520px}
.field{display:flex;flex-direction:column;gap:var(--s-xs)}
.inline{display:flex;gap:var(--s-s);flex-wrap:wrap;align-items:stretch}
input[type=password],input[type=text]{flex:1 1 220px;min-width:0;font:inherit;font-size:16px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:12px 0;min-height:44px}
input::placeholder{color:#6B6B6B}
input:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.btn{font:inherit;font-size:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;background:var(--ink);color:var(--paper);border:0;border-radius:0;padding:0 var(--s-m);min-height:44px;cursor:pointer}
.btn{transition:background-color 150ms ease,color 150ms ease}
.btn:hover{background:var(--accent);color:var(--ink)}
.link-u,.bar a{transition:color 150ms ease}
.link-u:hover,.bar a:hover{color:var(--accent)}
.resume-row{display:flex;align-items:center;gap:var(--s-m);flex-wrap:wrap;max-width:none}
.icon-link{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin-left:-12px;color:var(--ink);transition:color 150ms ease}
.icon-link:hover{color:var(--accent)}
.err{color:#B00020;min-height:1.3em}
.link-u{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Work index */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:56px 24px}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.tile .hair{border:0;border-top:1px solid var(--ink);margin:24px 0 12px;width:100%}
.tile:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.tile .img{position:relative;aspect-ratio:4/3;max-width:100%;background:var(--surface-muted);overflow:hidden}
.tile .img img,.tile .img video{width:100%;height:100%;object-fit:cover;display:block}
.br{color:var(--accent)}
.tile .over{position:absolute;inset:0;background:rgba(0,124,166,.66);-webkit-backdrop-filter:blur(10px) saturate(1.15);backdrop-filter:blur(10px) saturate(1.15);color:var(--on-overlay);display:flex;align-items:flex-end;padding:var(--s-m);opacity:0;transition:opacity 200ms ease}
.tile .over p{margin:0;font-size:var(--statement);font-weight:500;line-height:1.05;letter-spacing:-.015em;text-wrap:balance}
.tile:hover .over,.tile:focus-visible .over{opacity:1}
.tile .cap{display:flex;flex-direction:column;gap:2px}
.tile .cap b{font-weight:700}
.tile .cap .label{margin-top:var(--s-xs)}

/* Case study */
.meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:var(--s-m);border-top:1px solid var(--ink);padding-top:var(--s-s)}
.meta div{display:flex;flex-direction:column;gap:var(--s-xs)}
.meta dd{margin:0}
.meta dl,.meta{margin:0}
.lede{display:flex;flex-direction:column;gap:var(--s-l)}
.intro{display:flex;flex-direction:column;gap:var(--s-s)}
.mat{background:var(--mat);display:flex;align-items:center;justify-content:center;padding:var(--matpad);max-width:100%}
.mat img,.mat video{max-height:min(82vh,1000px);width:auto;max-width:100%;object-fit:contain;box-shadow:0 1px 0 rgba(0,0,0,.04);display:block}
.hero-band{margin-top:var(--s-xl)}
.hero-band .mat{padding:clamp(16px,5vw,96px)}
.hero-band .mat img,.hero-band .mat video{max-height:min(86vh,1100px)}
.beats{display:flex;flex-direction:column;gap:var(--s-xxl);padding-top:var(--s-xxl)}
.beat{margin:0;display:flex;flex-direction:column;gap:var(--s-m)}
/* Pairs: equal image heights. Each side grows in proportion to its image's
   width-to-height ratio (set by sizePairs once the image loads), so the gap
   moves toward the narrower image instead of sitting on the centre line. */
.pair{display:flex;gap:var(--s-s);align-items:flex-start}
.pair > *{flex:1 1 calc(2 * var(--matpad));min-width:0}
.pair > .mat img,.pair > .mat video{width:100%;height:auto;max-height:none}
@media (max-width:760px){.pair{flex-direction:column;align-items:stretch}.pair > *{flex:none !important}}
.ph{background:var(--ph);display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;width:100%;color:var(--muted);text-align:center;padding:var(--s-m)}
.next-band{display:block;background:var(--overlay);color:var(--on-overlay);text-decoration:none;margin-top:var(--s-xxl)}
.next-band .wrap{padding-block:var(--s-xl)}
.next-band .wrap{align-items:baseline}
.next-name{display:block;font-size:var(--statement);font-weight:500;line-height:1.08;letter-spacing:-.015em;color:var(--accent);margin-top:var(--s-xs)}
.next-band:hover .next-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.next-band:focus-visible{outline:3px solid var(--accent);outline-offset:-6px}

/* Gaps ([TBD] markers, preview only) */
.gap{display:inline-block;font-size:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--gap-ink);background:var(--gap-bg);outline:1px dashed var(--gap-ink);outline-offset:-1px;padding:1px 6px;vertical-align:middle;line-height:1.4;font-style:normal}
.display .gap,.statement .gap{font-size:max(12px,.16em)}
body.nogaps .gap,body.nogaps .gap-only{display:none!important}

/* Placeholder pages */
.principles{display:flex;flex-direction:column}
.principles > div{border-top:1px solid var(--ink);padding-block:var(--s-m)}

/* Preview controls (not part of the site) */
.pv{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;font-family:-apple-system,system-ui,sans-serif;font-size:13px}
.pv > button{background:var(--accent-label);color:#fff;border:0;border-radius:999px;padding:8px 14px;font-size:12px;font:inherit;font-weight:600;letter-spacing:.04em;cursor:pointer;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.pv .panel{position:absolute;right:0;bottom:52px;width:min(300px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;background:#fff;color:#111;border:1px solid #ccc;box-shadow:0 10px 40px rgba(0,0,0,.18);padding:14px;display:flex;flex-direction:column;gap:12px}
.pv h3{margin:0;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#555}
.pv ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.pv ul a{display:block;padding:5px 0;text-decoration:none}
.pv ul a:hover{text-decoration:underline}
.pv label{display:flex;gap:8px;align-items:center}
.pv select{font:inherit;padding:4px;width:100%}
.pv p{margin:0;color:#555;font-size:12px;line-height:1.4}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ===== CMS (admin) ===== */
.cms{--line:#D9D9D9;--soft:#F2F2F2;font-size:14px}
.cms .bar{border-bottom:1px solid var(--ink)}
.cms main{padding-block:var(--s-l) var(--s-xxl)}
.cms h1{font-size:clamp(32px,4vw,56px);font-weight:500;letter-spacing:-.02em;line-height:1;text-transform:uppercase;margin:0}
.cms h2{font-size:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:0;color:var(--accent-label)}
.cms .top{display:flex;flex-wrap:wrap;gap:var(--s-m);align-items:end;justify-content:space-between;padding-bottom:var(--s-l)}
.cms .help{color:var(--muted);max-width:60ch;margin:var(--s-s) 0 0}
.cms .btn.ghost{background:transparent;color:var(--ink);outline:1px solid var(--ink);outline-offset:-1px}
.cms .btn.ghost:hover{background:var(--accent);outline-color:var(--accent)}
.cms .btn.small{min-height:32px;padding:0 var(--s-s)}
.cms .btn.danger{background:#B00020;color:#fff}
.cms .btn:disabled{opacity:.4;cursor:not-allowed}
.cms .icon{font:inherit;background:transparent;border:1px solid var(--line);min-width:32px;min-height:32px;cursor:pointer;color:var(--ink)}
.cms .icon:hover:not(:disabled){border-color:var(--accent);color:var(--accent-label)}
.cms .icon:disabled{opacity:.3;cursor:not-allowed}
.cms table{width:100%;border-collapse:collapse}
.cms th{font-size:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;text-align:left;color:var(--muted);padding:var(--s-s) var(--s-s) var(--s-s) 0;border-bottom:1px solid var(--ink)}
.cms td{padding:var(--s-s) var(--s-s) var(--s-s) 0;border-bottom:1px solid var(--line);vertical-align:middle}
.cms td.thumb{width:96px}
.cms td.thumb img,.cms td.thumb .nothumb{width:80px;aspect-ratio:4/3;object-fit:cover;background:var(--soft);display:block}
.cms .tablewrap{overflow-x:auto}
.cms .pill{display:inline-block;font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border:1px solid currentColor}
.cms .pill.on{color:var(--accent-label)}
.cms .pill.off{color:var(--muted)}
.cms .pill.warn{color:var(--gap-ink);background:var(--gap-bg);border-style:dashed}
.cms .pill.ok{color:#2E6B2E}
.cms form.ed{display:flex;flex-direction:column;gap:var(--s-xl)}
.cms fieldset{border:0;border-top:1px solid var(--ink);padding:var(--s-s) 0 0;margin:0;min-width:0}
.cms fieldset > legend{float:left;width:100%;font-size:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase;padding:0 0 var(--s-s)}
.cms .fs-grid{clear:both;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-m)}
.cms .f input,.cms .f select,.cms .f textarea{flex:none}
.cms fieldset .fs-head{display:flex;flex-direction:column;gap:var(--s-xs)}
.cms fieldset .fs-head p{margin:0;color:var(--muted);max-width:34ch}
.cms .fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-m) var(--s-m)}
.cms .fields .wide{grid-column:1 / -1}
@media (max-width:860px){.cms .fs-grid{grid-template-columns:1fr}.cms .fields{grid-template-columns:1fr}}
.cms .f{display:flex;flex-direction:column;gap:6px;min-width:0}
.cms .f > label,.cms .f > .lab{font-size:var(--label);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.cms .f small{color:var(--muted);font-size:12px}
.cms .f input[type=text],.cms .f input[type=date],.cms .f textarea,.cms .f select{font:inherit;font-size:15px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0;padding:10px 12px;min-height:44px;width:100%}
.cms .f textarea{min-height:88px;resize:vertical;line-height:1.4}
.cms .f input:focus-visible,.cms .f textarea:focus-visible,.cms .f select:focus-visible{outline:3px solid var(--accent);outline-offset:0;border-color:var(--ink)}
.cms .f input[readonly]{background:var(--soft);color:var(--muted)}
.cms .f.missing input,.cms .f.missing textarea{border-color:var(--gap-ink);border-style:dashed}
.cms .imgpick{display:grid;grid-template-columns:140px minmax(0,1fr);gap:var(--s-s);align-items:start}
.cms .imgpick .pv-img{width:140px;aspect-ratio:4/3;background:var(--soft);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.04em;text-align:center}
.cms .imgpick .pv-img img{width:100%;height:100%;object-fit:contain;background:#fff}
.cms .imgpick .ctl{display:flex;flex-direction:column;gap:var(--s-xs);min-width:0}
.cms .imgpick .row2{display:flex;flex-wrap:wrap;gap:var(--s-xs);align-items:center}
.cms .imgpick .row2 small{color:var(--muted)}
@media (max-width:520px){.cms .imgpick{grid-template-columns:1fr}}
.cms .file{position:relative;overflow:hidden;display:inline-flex;align-items:center}
.cms .file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cms .file:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.cms .blocks{display:flex;flex-direction:column;gap:var(--s-m)}
.cms .block{border:1px solid var(--line);background:#fff;padding:var(--s-m);display:flex;flex-direction:column;gap:var(--s-m)}
.cms .block .bh{display:flex;flex-wrap:wrap;gap:var(--s-s);align-items:center;justify-content:space-between}
.cms .block .bh .label{color:var(--accent-label)}
.cms .block .tools{display:flex;gap:var(--s-xs)}
.cms .addrow{display:flex;flex-wrap:wrap;gap:var(--s-s)}
.cms .savebar{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--ink);padding-block:var(--s-s) calc(var(--s-s) + env(safe-area-inset-bottom,0px));display:flex;flex-wrap:wrap;gap:var(--s-s);align-items:center;z-index:5}
.cms .savebar .status{margin-right:auto;color:var(--muted)}
.cms .savebar .status.dirty{color:var(--gap-ink)}
.cms .order{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.cms .order li{display:grid;grid-template-columns:40px 64px minmax(0,1fr) auto;gap:var(--s-s);align-items:center;padding-block:var(--s-s);border-bottom:1px solid var(--line)}
.cms .order li .n{font-variant-numeric:tabular-nums;color:var(--accent-label);font-weight:500}
.cms .order li img,.cms .order li .nothumb{width:64px;aspect-ratio:4/3;object-fit:cover;background:var(--soft);display:block}
.cms .order li .tools{display:flex;gap:var(--s-xs)}
.cms .order li.dragging{opacity:.4}
.cms .order li.over{box-shadow:inset 0 2px 0 var(--accent)}
.cms .order li[draggable=true]{cursor:grab}
@media (max-width:520px){.cms .order li{grid-template-columns:32px minmax(0,1fr) auto}.cms .order li img,.cms .order li .nothumb{display:none}}
.cms .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s-m)}
.cms .card{border-top:1px solid var(--ink);padding-top:var(--s-s);display:flex;flex-direction:column;gap:var(--s-xs);text-decoration:none;color:inherit}
.cms .card:hover b{color:var(--accent-label)}
.cms .card b{font-size:20px;font-weight:500}
.cms .empty{border:1px dashed var(--line);padding:var(--s-l);color:var(--muted);text-align:center}
.cms .confirm{display:flex;flex-wrap:wrap;gap:var(--s-s);align-items:center;background:#FDECEE;padding:var(--s-s)}
body.in-cms .pv{display:none}
.notice{max-width:60ch;margin:var(--s-xxl) auto;padding-inline:var(--pad);display:flex;flex-direction:column;gap:var(--s-s)}