/* Inner pages (works, about, services, contact): white paper look, mono uppercase labels, serif headings, index-card stacks. */
:root{
  --black:#000;
  --char:#171717;
  --paper:#fff;
  --sheet:#f0f0f0;
  --sheet-2:#e6e6e6;
  --ink:#111;
  --grey:#8a8a8a;
  --grey-2:#bdbdbd;
  --line:#9a9a9a;
  --tang:#ff8400;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --hand:"Reenie Beanie","Bradley Hand","Comic Sans MS",cursive;
  --side:max(16px,env(safe-area-inset-left,0px));
  --side-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
@media(min-width:900px){:root{--side:max(32px,env(safe-area-inset-left,0px));--side-r:max(32px,env(safe-area-inset-right,0px))}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.7;text-transform:uppercase;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit;text-transform:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:1px dashed currentColor;outline-offset:4px}
.wrap{padding-left:var(--side);padding-right:var(--side-r)}
.serif{font-family:var(--serif);font-weight:300;text-transform:none;letter-spacing:-.01em;line-height:1.05;margin:0;text-wrap:balance}
.hand{font-family:var(--hand);font-weight:400;text-transform:none;letter-spacing:0;line-height:1.35}
.u:hover{text-decoration:underline;text-underline-offset:4px}
.grey{color:var(--grey)}

/* header: 5 links on a 5-column grid */
.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:50;padding-block:16px;padding-left:var(--side);padding-right:var(--side-r);mix-blend-mode:difference;color:#fff;pointer-events:none}
.top>*{pointer-events:auto}
.top .desk{display:none}
.top .phone{display:flex;justify-content:space-between;align-items:center}
@media(min-width:900px){.top .desk{display:grid;grid-template-columns:repeat(4,1fr)}.top .desk a{justify-self:start}.top .phone{display:none}}
.top .desk a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.logo{display:block;width:96px;color:#fff}
.logo svg{display:block;width:100%;height:auto}
.agency{fill:var(--black);font-family:Helvetica,Arial,sans-serif;font-weight:700;font-size:51.87px}
.top .logo .agency{fill:#000}

/* black side tag on the white pages */
.sidetag{position:fixed;right:0;bottom:calc(9vh + env(safe-area-inset-bottom,0px));z-index:55;background:#000;width:48px;height:172px;display:grid;place-items:center;padding:14px 0;padding-right:env(safe-area-inset-right,0px);box-sizing:content-box;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.sidetag svg{height:100%;width:auto;display:block;color:#fff}
.sidetag .agency{fill:#000}
@media(max-width:600px){.sidetag{width:36px;height:128px;padding:10px 0}}

/* phone menu */
.overlay{position:fixed;inset:0;z-index:70;background:var(--paper);color:var(--ink);display:grid;grid-template-rows:auto 1fr auto;
  padding-block:calc(16px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-bottom,0px));padding-left:var(--side);padding-right:var(--side-r)}
.overlay .row{display:flex;justify-content:space-between;align-items:center;border:0;grid-template-columns:none}
.overlay .logo{color:var(--ink)}
.overlay nav{align-self:center;display:grid;gap:6px}
.overlay nav a{display:flex;gap:14px;align-items:baseline;font-family:var(--serif);font-weight:300;text-transform:none;font-size:clamp(40px,10vw,72px);line-height:1.05}
.overlay nav a small{font-family:var(--mono);font-size:11px;color:var(--grey)}
.overlay .foot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--grey);font-size:12px}

/* page top spacing */
main{padding-top:calc(96px + env(safe-area-inset-top,0px))}

/* ---------- index-card stack (about / services / contact) ---------- */
.stack{position:relative;display:grid;padding-bottom:40px}
.card{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);background:var(--sheet);border-top:1px dotted var(--line);border-bottom:1px dotted var(--line);
  width:var(--w,100%);margin-top:var(--mt,0);z-index:var(--z,1)}
.card.tang{background:var(--tang)}
.card.white{background:var(--paper);box-shadow:0 18px 48px rgba(0,0,0,.14)}
.card .holes{border-right:1px dotted var(--line);display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-block:18px}
.card .holes i{width:10px;height:10px;border-radius:50%;background:var(--paper);border:1px solid var(--grey-2);box-shadow:inset 0 1px 2px rgba(0,0,0,.15)}
.card.tang .holes i{background:#fff}
.card .hd{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:8px 14px;border-bottom:1px dotted var(--line);font-size:10px;letter-spacing:.06em}
.card .hd .c{text-align:center}
.card .hd .sq{font-size:8px}
.card .body{padding:18px 16px 28px;display:grid;gap:18px;min-width:0}
.card h2.serif{font-size:clamp(40px,5.2vw,72px)}
.card .cols{display:grid;gap:18px 32px;grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){
  .card .cols{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .card.c2{--w:50%;--mt:-72px;--z:2}
  .card.c3{--w:74%;--mt:-56px;--z:3}
  .card.c4{--w:60%;--mt:-48px;--z:4}
}
@media(max-width:899px){.card{--w:100%;--mt:0}.card+.card{margin-top:16px}}

/* tables inside cards */
.tbl{width:100%;border-collapse:collapse;font-size:12px}
.tbl th{font-weight:400;color:var(--ink);text-align:left;padding:10px 0;border-bottom:1px dotted var(--line);font-size:11px}
.tbl td{padding:14px 0;border-bottom:1px dotted var(--line);vertical-align:top}
.tbl td:first-child,.tbl th:first-child{width:14%;color:var(--grey)}
.tbl td:nth-child(2){width:46%}
.tbl td small{display:block;color:var(--grey);font-size:11px}
.tbl tr:last-child td{border-bottom:0}
@media(max-width:600px){.tbl thead{display:none}.tbl tr{display:grid;grid-template-columns:52px 1fr;border-bottom:1px dotted var(--line);padding:12px 0}.tbl td{display:block;border:0;padding:0;width:auto}.tbl td:first-child,.tbl td:nth-child(2){width:auto}.tbl td:nth-child(3){grid-column:2;color:var(--grey);font-size:11px;margin-top:4px}}

/* numbered list */
.nl{margin:0;padding:0;list-style:none;font-size:12px}
.nl li{display:grid;grid-template-columns:28px 1fr auto;gap:12px;padding:8px 0;border-bottom:1px dotted var(--line);align-items:baseline}
.nl li:last-child{border-bottom:0}
.nl li small{font-size:10px;opacity:.7}
.nl li .r{color:var(--grey);font-size:11px}
.card.tang .nl li .r{color:rgba(0,0,0,.55)}
.nl.big li{grid-template-columns:28px 1fr}
.nl.big li b{font-family:var(--serif);font-weight:300;text-transform:none;font-size:clamp(22px,2.6vw,34px);line-height:1.1}
.nl.big li p{margin:4px 0 0;color:var(--grey);text-transform:none;font-family:var(--serif);font-size:17px;line-height:1.35;max-width:52ch;grid-column:2}
.nl.big li .tags{grid-column:2;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:10px;margin-top:6px}
.nl.big li .tags span::before{content:"■ ";color:var(--tang);font-size:7px;vertical-align:middle}

/* handwritten bio + photo */
.bio{font-size:clamp(22px,2.2vw,28px);display:grid;gap:18px}
.bio p{margin:0}
.photo{width:100%;max-width:440px;aspect-ratio:4/3;object-fit:cover;display:block;background:var(--sheet-2)}

/* key/value rows (email / instagram …) */
.row{display:grid;grid-template-columns:36px minmax(0,1fr);border-bottom:1px dotted var(--line)}
.row .holes{border-right:1px dotted var(--line);display:grid;place-items:center}
.row .holes i{width:10px;height:10px;border-radius:50%;background:var(--paper);border:1px solid var(--grey-2)}
.row .kv{display:grid;gap:6px 32px;padding:22px 16px;align-items:baseline}
@media(min-width:900px){.row .kv{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
.row .kv .k{font-family:var(--serif);font-weight:300;text-transform:none;font-size:clamp(36px,4.6vw,64px);line-height:1}
.row .kv .v{font-family:var(--serif);font-weight:300;text-transform:none;font-size:clamp(22px,2.4vw,34px);line-height:1.2}
.row .kv .v small{display:block;font-family:var(--mono);text-transform:uppercase;font-size:11px;color:var(--grey);margin-top:6px}

/* contact form */
.form{display:grid;gap:14px;font-size:12px}
.form label{display:grid;gap:6px}
.form input,.form textarea{border:0;border-bottom:1px dotted var(--line);background:transparent;padding:8px 0;font-size:14px;text-transform:none;font-family:var(--serif);width:100%}
.form textarea{min-height:90px;resize:vertical}
.form button{justify-self:start;border:1px solid var(--ink);padding:8px 16px;font-size:12px;margin-top:6px}
.form button:hover{background:var(--ink);color:#fff}

/* ---------- works grid ---------- */
.works{display:grid;gap:40px}
@media(min-width:900px){.works{grid-template-columns:1fr 3fr}}
.filter{display:grid;gap:10px;font-size:14px;align-content:start}
@media(min-width:900px){.filter{position:sticky;top:120px}}
.filter button{text-align:left;display:flex;gap:10px;align-items:center;letter-spacing:.04em}
.filter button::before{content:"→";width:0;overflow:hidden;opacity:0;transition:width .3s,opacity .3s}
.filter button.on::before{width:18px;opacity:1}
.grid{display:grid;gap:36px 20px;grid-template-columns:repeat(2,1fr)}
@media(min-width:900px){.grid{grid-template-columns:repeat(3,1fr)}}
.wk{display:grid;gap:10px;cursor:zoom-in;text-align:left}
.wk .ph{aspect-ratio:1/1;overflow:hidden;background:var(--sheet)}
.wk .ph img,.wk .ph video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.wk:hover .ph img,.wk:hover .ph video{transform:scale(1.04)}
.wk h3{margin:0;font-weight:400;font-size:14px;line-height:1.3;letter-spacing:.04em}
.wk small{color:var(--grey);font-size:11px;margin-top:-6px}
.wk[hidden]{display:none}
.empty{color:var(--grey);font-size:12px;padding:40px 0}

/* ---------- footer (light) ---------- */
footer{position:relative;z-index:20;padding-block:40px calc(24px + env(safe-area-inset-bottom,0px));margin-top:80px;background:#1c1c1c;color:#f5f5f5}
footer .cats{display:grid;gap:2px;font-size:13px;justify-items:start}
footer .cats a{display:flex;gap:12px}
footer .cats a small{color:var(--grey);font-size:11px}
footer .links{display:grid;gap:2px;margin-top:28px;font-size:13px;justify-items:start}
footer .links span{color:var(--grey)}
footer .big{margin-top:72px;color:#ababab}
footer .big svg{width:100%;height:auto;display:block}
footer .big .agency{fill:#1c1c1c}
footer .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:13px;color:#ababab}

/* lightbox stays dark */
.lb{position:fixed;inset:0;z-index:80;background:#000;color:#f5f5f5;display:grid;grid-template-rows:auto 1fr auto;gap:16px;
  padding-block:calc(18px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-bottom,0px));padding-left:var(--side);padding-right:var(--side-r)}
.lb .row{display:flex;justify-content:space-between;gap:16px;align-items:center;font-size:13px;border:0;grid-template-columns:none}
.lb .st{display:grid;place-items:center;min-height:0}
.lb .st{display:block;min-height:0;overflow:hidden}
.lb img,.lb video{width:100%;height:100%;object-fit:contain;display:block}
.lb .num{color:#ababab;font-variant-numeric:tabular-nums}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  .card,.row,.wk,.filter{opacity:0;transform:translateX(-48px);transition:opacity .8s ease,transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .card.in,.row.in,.wk.in,.filter.in{opacity:1;transform:none}
  .card.in:hover{transform:translateY(-4px);transition-duration:.4s}
  .wk{transform:translateY(24px)}
  .card .holes i{animation:pop .6s ease both;animation-delay:calc(var(--d,0s) + .4s)}
  @keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
}

/* room under the first card so the overlapping cards never cover its content */
@media(min-width:900px){.card.c1 .body{padding-bottom:110px}.card.c2 .body{padding-bottom:84px}}
@media(max-width:600px){.nl li{grid-template-columns:28px 1fr}.nl li .r{grid-column:2}}

/* what-we-do: name on the left, description + tags in the empty space on the right */
@media(min-width:700px){
  .nl.big.two li{grid-template-columns:28px minmax(0,1fr) minmax(0,1fr);gap:8px 32px;padding:18px 0}
  .nl.big.two li p{grid-column:3;grid-row:1;margin:6px 0 0}
  .nl.big.two li .tags{grid-column:3;grid-row:2;margin-top:0}
}
/* footer contacts */
footer .contacts{display:grid;gap:12px;font-size:14px;justify-items:start;letter-spacing:.04em}
@media(min-width:900px){footer .contacts{grid-template-columns:repeat(4,1fr)}}

/* what-we-do: compact so the next cards are visible without a long scroll */
.nl.big.two{font-size:11px}
.nl.big.two li{padding:10px 0;gap:4px 24px}
.nl.big.two li b{font-size:clamp(18px,1.6vw,22px)}
.nl.big.two li p{font-size:14px;line-height:1.3;margin:0}
.nl.big.two li .tags{font-size:9px;margin-top:2px;gap:2px 10px}
@media(min-width:700px){.nl.big.two li{grid-template-columns:28px minmax(0,.8fr) minmax(0,1.6fr)}.nl.big.two li p{margin-top:2px}}
@media(min-width:900px){.card.c1 .body{padding-bottom:70px}}
.card.c1 h2.serif{font-size:clamp(32px,3.6vw,48px)}

/* phones: one work per row, bigger images */
/* works filter: a dropdown on phones */
.filter .ftog{display:none}
.filter .ftog::before{display:none}
@media(min-width:900px){.filter .fopts{display:grid;gap:10px}}
@media(max-width:899px){
  .filter{display:block}
  .filter .ftog{display:flex;width:100%;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid currentColor;font-size:13px;letter-spacing:.06em}
  .filter .ftog i{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .3s}
  .filter.open .ftog i{transform:translateY(2px) rotate(-135deg)}
  .filter .fopts{display:grid;gap:14px;max-height:0;overflow:hidden;transition:max-height .4s ease,padding .4s ease}
  .filter.open .fopts{max-height:420px;padding:16px 0 8px}
}
@media(max-width:600px){.grid{grid-template-columns:1fr;gap:28px}.wk .ph{aspect-ratio:1/1}.filter{gap:8px;font-size:13px}}

/* play marks on video / YouTube thumbnails, play button on project-page videos, YouTube embeds */
.ph,.pimg{position:relative}
.play,.vplay{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.55);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.play::after,.vplay::after{content:"";position:absolute;left:22px;top:17px;border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent}
.vplay{pointer-events:auto;cursor:pointer;padding:0}
.vplay.on{opacity:0;pointer-events:none;transform:scale(.8)}
a:hover .play{transform:scale(1.08)}
.pimg iframe{display:block;border:0;width:100%;aspect-ratio:16/9;max-height:78vh;background:#000}
.pimg iframe[data-r="9/16"]{width:auto;height:78vh;max-width:100%;aspect-ratio:9/16}
.lb iframe{display:block;border:0;width:100%;height:100%;background:#000}