/* locked to the CLEAN palette */
:root { --color-bg:#fff; --color-text:#272727; }

*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, h4, p, ul, li, a, dl, dt, dd, span { margin:0; padding:0; text-decoration:none; list-style:none; line-height:1; color:inherit; font:inherit; }
html { scrollbar-gutter: stable; }
body {
  font-family: "JetBrains Mono", Inter, sans-serif; font-weight:400; font-size:16px; min-height:100vh;
  background: var(--color-bg); color: var(--color-text); transition: background .4s, color .4s;
}
button { cursor:pointer; font:inherit; color:inherit; background:none; border:0; padding:0; }
img { display:block; }
.inter { font-family: Inter, sans-serif; }
.barcode { font-family: "Libre Barcode 39", system-ui; font-size:28px; }
.text-base { font-size:clamp(.75rem,.706rem + .1878vw,.875rem); line-height:1.2; font-weight:300; }
.text-sm { font-size:clamp(.625rem,.581rem + .1878vw,.75rem); font-weight:300; }
.plus { display:inline-block; }
.plus svg { width:clamp(16px,13.183px + .751vw,24px); height:clamp(16px,13.183px + .751vw,24px); display:block; }
.plus__line { stroke: var(--color-text); }
.divider { border-top:1px solid var(--color-text); }

/* page frame */
.page { display:grid; grid-template-columns: clamp(12px,.33px + 3.112vw,80px) .5px minmax(0,1fr) .5px clamp(12px,.33px + 3.112vw,80px); }
.page__border { border-left:1px solid var(--color-text); }
.page__wrapper { min-width:0; }
/* running text band (see initTicker in common.js); spans the full page grid */
.ticker { grid-column:1/-1; background:var(--color-text); color:var(--color-bg); overflow:hidden; padding:10px 0; white-space:nowrap; cursor:default; }
.ticker__track { display:flex; width:max-content; will-change:transform; }
.ticker__group { display:flex; flex:none; }
.ticker span { line-height:1.2; }
.ticker__sep { padding:0 1.5em; opacity:.6; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (min-width:1200px) { .ticker { padding:12px 0; } }
.bleed { width:100vw; margin-left:calc(50% - 50vw); border-top:1px solid var(--color-text); }
.footer-bleed { margin-bottom:48px; } /* the same strip of frame below it as the nav row above the top line */

/* keyboard focus: visible on light and dark surfaces; clipped-corner buttons get an inner ring (clip-path would cut an outer one) */
:focus-visible { outline:2px solid var(--color-text); outline-offset:3px; }
.info :focus-visible, .about__inner :focus-visible, .menu :focus-visible { outline-color:var(--color-bg); }
.file__link:focus-visible { outline:2px solid currentColor; outline-offset:-6px; }

/* nav row (every page, under the ticker), pinned to the top. Scrolled down (.is-compact, set in common.js),
   the bar and logo clear away and the links fold right, one after another, into the small Menu pill */
.nav-w { position:sticky; top:0; z-index:60; background:var(--color-bg); transition:background-color .4s; }
.nav-w .bleed, .nav__home { transition:opacity .4s .1s, visibility 0s; }
.nav-w.is-compact { background:transparent; pointer-events:none; }
.nav-w.is-compact .bleed, .nav-w.is-compact .nav__home { opacity:0; visibility:hidden; transition:opacity .3s, visibility 0s .3s; }
.nav { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:8px clamp(12px,2.141px + 2.629vw,40px); min-height:48px; }
.nav__home, .nav__link { padding:8px 0; }
.nav__home { display:flex; align-items:center; }
.nav__logo { height:20px; width:auto; flex:none; }
.nav__links { display:none; gap:clamp(20px,2.4vw,40px); }
.nav__link { display:flex; align-items:baseline; gap:6px;
  /* coming back out of the pill: nearest link (Contact) first, fanning out leftwards */
  transition:opacity .35s calc(var(--i) * -45ms + .28s), transform .55s cubic-bezier(.2,.7,.2,1) calc(var(--i) * -45ms + .28s), visibility 0s; }
.nav__link .text-sm { opacity:.5; }
/* folding into the pill: Contact first, then CV, About…; the further left a link is, the further it slides */
.nav-w.is-compact .nav__link { opacity:0; transform:translateX(calc((5 - var(--i)) * 22px)); visibility:hidden;
  transition:opacity .3s calc((4 - var(--i)) * 45ms), transform .4s cubic-bezier(.5,0,.75,0) calc((4 - var(--i)) * 45ms), visibility 0s calc(.3s + (4 - var(--i)) * 45ms); }

/* staircase icon: three bars stepping right. Hover flattens them into a plain hamburger;
   inside the open menu's Close chip they turn into an × */
.stair { position:relative; display:block; width:16px; height:11px; }
.stair i { position:absolute; left:0; height:2px; background:currentColor; transition:left .3s cubic-bezier(.2,.7,.2,1), width .3s cubic-bezier(.2,.7,.2,1), transform .4s cubic-bezier(.2,.7,.2,1), opacity .2s; }
.stair i:nth-child(1) { top:0; width:16px; }
.stair i:nth-child(2) { top:4.5px; left:4px; width:12px; }
.stair i:nth-child(3) { top:9px; left:8px; width:8px; }
@media (hover:hover) { .nav__menu:hover .stair i { left:0; width:16px; } }
.menu.is-open .menu__close .stair i { left:0; width:16px; top:4.5px; transition-delay:.25s; }
.menu.is-open .menu__close .stair i:nth-child(1) { transform:rotate(45deg); }
.menu.is-open .menu__close .stair i:nth-child(2) { opacity:0; }
.menu.is-open .menu__close .stair i:nth-child(3) { transform:rotate(-45deg); }

/* Menu chip: the site's clipped-corner shape, icon only. Desktop: appears once the links have folded away. Phones: always there */
.nav__menu, .menu__close { padding:9px 10px; clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px); }
.nav__menu { margin-left:auto; background:var(--color-text); color:var(--color-bg); pointer-events:auto; }
.nav__menu:focus-visible, .menu__close:focus-visible { outline:2px solid currentColor; outline-offset:-5px; }
@media (min-width:900px) {
  /* the links end on the right padding, mirroring the logo on the left. The pill takes no space:
     it sits over the end of the row, exactly where the links fold into */
  .nav { position:relative; }
  .nav__links { display:flex; margin-left:auto; }
  .nav__menu { position:absolute; top:50%; right:clamp(12px,2.141px + 2.629vw,40px); transform-origin:right center;
    opacity:0; transform:translateY(-50%) scale(.6); visibility:hidden; transition:opacity .2s, transform .25s, visibility 0s .25s; }
  .nav-w.is-compact .nav__menu { opacity:1; transform:translateY(-50%); visibility:visible;
    transition:opacity .3s .22s, transform .5s cubic-bezier(.2,.7,.2,1) .22s, visibility 0s .22s; }
}
@media (prefers-reduced-motion:reduce) { .nav-w, .nav-w *, .nav__link, .nav__menu, .stair i { transition:none !important; } }

/* staircase menu (see renderMenu in common.js): five panels share the screen height, each one step further right */
/* compact: hangs from the top-right corner under the Menu pill; the page stays scrollable (scrolling closes it) */
.menu { --step:clamp(12px,3vw,44px); --ph:clamp(68px,10.5vh,100px); position:fixed; inset:0; z-index:9002; visibility:hidden; }
.menu.is-open { visibility:visible; }
.menu__backdrop { position:absolute; inset:0; background:color-mix(in srgb,var(--color-bg) 55%,transparent); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); cursor:pointer; }
.menu__stack { position:absolute; top:0; right:0; width:min(640px,calc(100% - 28px)); }
.menu__slot { overflow:hidden; margin-left:calc(var(--i) * var(--step)); }
.menu__panel {
  display:flex; flex-direction:column; justify-content:space-between; height:var(--ph); padding:12px clamp(14px,1.6vw,24px) 8px;
  background:var(--pc); color:#fff; transition:filter .3s;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);
}
.menu__panel:hover { filter:brightness(1.18); }
.menu__panel:focus-visible { outline:2px solid #fff; outline-offset:-8px; }
.menu__top { display:flex; justify-content:space-between; gap:16px; }
.menu__slot:first-child .menu__top { padding-right:calc(clamp(12px,.33px + 3.112vw,80px) + clamp(12px,2.141px + 2.629vw,40px) + 56px); } /* clear of the Close pill */
.menu__top .text-sm { opacity:.6; }
.menu__sub { opacity:.75; text-align:right; }
.menu__mask { display:block; overflow:hidden; }
.menu__word { display:block; font:500 clamp(1.6rem,1rem + 1.6vw,2.75rem)/.95 Inter,sans-serif; letter-spacing:-.03em; text-transform:uppercase; white-space:nowrap; }
/* Close chip sits exactly where the Menu chip is (page gutter + nav padding), so one swaps for the other */
.menu__close { position:absolute; top:12px; right:calc(clamp(12px,.33px + 3.112vw,80px) + clamp(12px,2.141px + 2.629vw,40px));
  background:#fff; color:#272727; transition:opacity .2s; }
.menu__close:hover { opacity:.85; }
@media (max-width:899px) { .menu__sub { display:none; } } /* too narrow for the details on phones */
@media (prefers-reduced-motion:reduce) { .menu__panel { transition:none; } }

/* hero (home) */
/* name on top, then what + where, a short hello; proof points and buttons along the bottom */
.hero { display:flex; flex-direction:column; justify-content:space-between; gap:56px; min-height:calc(100svh - 84px); padding:32px clamp(12px,2.141px + 2.629vw,40px); }
.hero__name { display:flex; flex-direction:column; width:max-content; font:500 18vw/.86 Inter,sans-serif; letter-spacing:-.045em; text-transform:uppercase; }
.hero__head { position:relative; }
.hero__lens { position:absolute; pointer-events:none; } /* ASCII lens over the name, see initNameLens in home.js */
.hero__word { display:block; overflow:hidden; padding-bottom:.04em; }
.hero__word span { display:inline-block; }
.hero__sub { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; margin-top:20px; }
.hero__role { font:400 clamp(1rem,.85rem + .6vw,1.5rem)/1.25 Inter,sans-serif; text-transform:uppercase; letter-spacing:.01em; text-wrap:balance; }
.hero__role span { text-transform:none; letter-spacing:0; }
.hero__intro { margin-top:40px; max-width:46ch; font:400 clamp(.95rem,.88rem + .3vw,1.2rem)/1.5 Inter,sans-serif; text-wrap:pretty; }
.hero__foot { display:flex; flex-direction:column; gap:28px; }
.hero__proof { display:grid; grid-template-columns:1fr 1fr; gap:20px 16px; }
.hero__item { display:flex; flex-direction:column; gap:4px; line-height:1.3; }
.hero__item dt { opacity:.6; }
.hero__cta { display:flex; gap:12px; }
.hero__cta .file__link { flex:1; font-size:clamp(1rem,.8rem + 1vw,1.5rem); padding:18px 16px; }
@media (min-width:768px) {
  .hero__name { flex-direction:row; gap:.22em; font-size:8.4vw; }
  .hero__foot { flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; }
  .hero__proof { grid-template-columns:repeat(2,max-content); column-gap:clamp(20px,2.2vw,40px); }
  .hero__cta { margin-left:auto; } /* stays on the right if it wraps under the proof points */
  .hero__cta .file__link { flex:none; padding:20px 36px; }
}
@media (min-width:1200px) { .hero { padding:40px; } .hero__sub { margin-top:28px; } .hero__proof { grid-template-columns:repeat(4,max-content); } }

/* loader (see runLoader in common.js). It is in the HTML so it covers the page from the first paint;
   if the scripts never run (e.g. the animation library fails to load) it fades away on its own after 10s */
.loader { --lp:clamp(16px,.33px + 3.112vw,80px); position:fixed; inset:0; z-index:10000; background:var(--color-text); animation:loader-failsafe .4s 10s forwards; }
@keyframes loader-failsafe { to { opacity:0; visibility:hidden; } }
html.is-loading { overflow:hidden; }
.loader__panel { position:absolute; inset:0; background:var(--color-bg); color:var(--color-text); }
.loader__row { position:absolute; left:0; right:0; display:flex; justify-content:space-between; padding:0 var(--lp); }
.loader__row--top { top:24px; }
.loader__row--bottom { bottom:24px; }
.loader__pct { position:absolute; left:0; bottom:0; min-width:4ch; font-variant-numeric:tabular-nums; will-change:transform; }
.loader__mark { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.loader__ascii { margin:0; font:400 clamp(8px,1.1vw,14px)/1 "JetBrains Mono",ui-monospace,Consolas,monospace; letter-spacing:0; white-space:pre; }
.loader__logo { position:absolute; inset:0; width:100%; height:100%; opacity:0; }

/* heading */
.site-heading__inner { position:relative; display:flex; gap:6px; align-items:center; justify-content:center; padding:80px 0 64px; }
.site-heading__title { text-align:center; line-height:1.2; }
.deco { position:absolute; }
.deco.lt { top:8px; left:8px } .deco.rt { top:8px; right:8px } .deco.lb { bottom:8px; left:8px } .deco.rb { bottom:8px; right:8px }

/* section headers */
.sec-head { display:flex; justify-content:space-between; align-items:center; padding:64px clamp(12px,2.141px + 2.629vw,40px) 40px; }
.big { font-size:clamp(2.5rem,1.2676rem + 5.2582vw,6rem); display:flex; font-family:Inter,sans-serif; }
.big .br:first-child { padding-right:12px } .big .br:last-child { padding-left:12px }
.eye { display:inline-block; animation: blink 5s infinite; }
@keyframes blink { 0%,90%,100%{transform:scaleY(1)} 92%,96%{transform:scaleY(.1)} 94%,98%{transform:scaleY(1)} }
.lbl { display:flex; justify-content:center; align-items:center; text-align:center; gap:12px; }

.page-overlay { position:fixed; inset:0; opacity:0; pointer-events:none; background:var(--color-bg); z-index:9999; display:flex; justify-content:center; align-items:center; }
.page-overlay__inner { display:flex; justify-content:center; align-items:center; gap:16px; opacity:0; }
.page-overlay__label { font-size:14px; line-height:1.2; }
#page-container { transform-origin:50% 50%; }
html.lenis, html.lenis body { height:auto; }
.lenis.lenis-smooth { scroll-behavior:auto !important; }
.lenis.lenis-stopped { overflow:hidden; }

/* index */
.index { margin-bottom:220px; }
.index__content { padding:40px clamp(12px,2.141px + 2.629vw,40px) 0; }
.info {
  background:var(--color-text); color:var(--color-bg); padding:16px; display:flex; flex-direction:column; gap:16px; margin-bottom:40px; max-width:70vw;
  clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);
}
.info p { line-height:1.5; }
.works { margin-bottom:64px; }
.works__link { display:block; aspect-ratio:1/1; width:100%; padding:12px; border:1px solid color-mix(in srgb,var(--color-text) 80%,transparent); position:relative; }
.works__thumb { width:min(50%,240px); min-width:140px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); overflow:hidden; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.works__thumb img { width:100%; aspect-ratio:893/1263; object-fit:cover; }
.works__link:hover .works__thumb { transform:translate(-50%,-50%) scale(1.04); }
.works__item { position:absolute; display:flex; flex-direction:column; gap:4px; }
.works__item.no { top:8px; left:8px } .works__item.cat { top:8px; right:8px; text-align:right } .works__item.ttl { bottom:8px; left:8px }
.works__action { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:12px; }
.num { display:none; }

/* theme */
.theme { padding-top:240px; margin-bottom:80px; }
.theme__intro { height:300vh; margin-bottom:80px; position:relative; }
.theme__intro-w { position:sticky; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; gap:32px; }
.theme__lead { font-size:clamp(1.5rem,1.2rem + 1.5vw,3rem); letter-spacing:-.02em; text-align:center; line-height:1.3; padding:0 16px; font-family:Inter,sans-serif; }
.files { height:400vh; position:relative; }
.file { margin-bottom:120px; position:sticky; top:120px; }
.file:nth-child(1){z-index:20} .file:nth-child(2){z-index:30} .file:nth-child(3){z-index:40} .file:nth-child(4){z-index:50}
.file__tab { display:none; }
.file__body { height:60vh; background:var(--color-bg); border:1px solid var(--color-text); padding:clamp(16px,7.549px + 2.254vw,40px); border-radius:16px; display:flex; flex-direction:column; }
.file__items { display:flex; flex-direction:column; gap:12px; max-width:400px; }
.file__item { display:flex; flex-direction:column; gap:4px; line-height:1.4; }
.file__item p { line-height:1.5; }
.file__name { font-family:Inter,sans-serif; font-size:clamp(2rem,1rem + 4vw,6rem); font-weight:600; margin-bottom:8px; }
.file__apply { width:100%; margin-top:auto; display:flex; gap:12px; }
.file__link { display:block; flex:1; text-align:center; font:clamp(1.5rem,.9rem + 3vw,4.5rem)/1 Inter,sans-serif; background:var(--color-text); color:var(--color-bg); padding:16px 12px; clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px); transition:opacity .2s; }
.file__link:hover { opacity:.8; }
.file__link + .file__link { background:none; color:var(--color-text); box-shadow:inset 0 0 0 1px var(--color-text); clip-path:none; }
.file-end { height:60vh; }

/* about */
.about { margin-bottom:80px; }
/* held in the middle of the screen for about a screen of scrolling while the heading plays, like .theme__intro */
.about__intro { height:220vh; position:relative; }
.about__intro-w { position:sticky; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:64px; }
.about__panel { height:300vh; position:relative; margin-top:64px; }
.about__sticky { position:sticky; top:5vh; }
.about__inner { height:80vh; background:var(--color-text); color:var(--color-bg); border-radius:16px; position:relative; }
.about__inner .plus__line { stroke:var(--color-bg); }
/* phones: the panel is a 2-column grid (not enough room for items around the edges) */
.about__inner { display:grid; grid-template-columns:1fr 1fr; align-content:space-between; gap:18px 12px; padding:16px; overflow:hidden; }
.pi { display:flex; flex-direction:column; gap:4px; min-width:0; line-height:1.3; }
.pi p { line-height:1.4; }
.pi .text-base { line-height:1.4; }
.pi.tr, .pi.br, .pi.mr, .pi.bm { text-align:right; align-items:flex-end; }
.pi.tl{order:1} .pi.tr{order:2} .pi.tm{order:3} .pi.bm{order:4} .pi.c{order:5} .pi.ml{order:6} .pi.mr{order:7} .pi.bl{order:8} .pi.br{order:9}
.pi.c { grid-column:1/-1; align-items:center; text-align:center; gap:14px; }
.pi__photo { width:84px; aspect-ratio:4/5; border:1px solid color-mix(in srgb,var(--color-bg) 40%,transparent); position:relative; display:grid; place-items:center; overflow:hidden; }
.pi__photo img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:grayscale(1); }
.pi__photo span { opacity:.5; }
.pi__intro { font-family:Inter,sans-serif; font-size:clamp(1rem,.8rem + 1vw,1.75rem); line-height:1.25 !important; letter-spacing:-.01em; max-width:27ch; min-height:2.5em; text-wrap:balance; }
.pi__socialrow { display:flex; align-items:center; gap:16px; }
.pi__social { display:flex; flex-direction:column; align-items:center; gap:4px; }
.pi__links { display:flex; gap:12px; }
.pi__links a { text-decoration:underline; text-underline-offset:3px; }
.status { display:block; }
.status__dot { display:inline-block; vertical-align:middle; margin:-2px 8px 0 0; width:7px; height:7px; border-radius:50%; background:#4ade80; box-shadow:0 0 0 0 rgba(74,222,128,.6); animation:pulse 2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(74,222,128,.6)} 70%{box-shadow:0 0 0 7px rgba(74,222,128,0)} 100%{box-shadow:0 0 0 0 rgba(74,222,128,0)} }
.clock { font-variant-numeric:tabular-nums; }

/* tablet up: items sit around the edges, like the original */
@media (min-width:768px) {
  .about__inner { display:block; padding:0; }
  .pi { position:absolute; width:fit-content; max-width:30%; }
  .pi.tl { top:16px; left:16px } .pi.tr { top:16px; right:16px } .pi.bl { bottom:16px; left:16px } .pi.br { bottom:16px; right:16px }
  .pi.tm { top:16px; left:50%; transform:translateX(-50%); align-items:center; text-align:center }
  .pi.bm { bottom:16px; left:50%; transform:translateX(-50%); align-items:center; text-align:center }
  /* tablet: not enough width beside the centre block, so these sit under the top row */
  .pi.ml { top:96px; left:16px } .pi.mr { top:96px; right:16px }
  .pi.c { top:50%; left:50%; transform:translate(-50%,-50%); max-width:46%; }
  .pi__photo { width:110px; }
}
@media (prefers-reduced-motion:reduce) { .status__dot { animation:none; } }

/* footer */
.footer { border-top:1px solid var(--color-text); margin:40px 0 0; }
.footer__credit, .footer__theme { padding:16px; display:flex; flex-direction:column; gap:48px; position:relative; }
.footer__credit::after, .footer__theme::after { content:""; position:absolute; bottom:0; left:0; width:100%; border-top:1px solid var(--color-text); }
/* the hhh mark in characters (see initFooterAscii); lighter, so the details in the corner still read first */
.footer__ascii { margin:0; align-self:center; font:400 12px/1 "JetBrains Mono",ui-monospace,Consolas,monospace; letter-spacing:0; white-space:pre;
  color:color-mix(in srgb,var(--color-text) 55%,transparent); user-select:none; cursor:default; }
.footer__items { width:fit-content; margin-left:auto; display:flex; flex-direction:column; gap:16px; }
/* contact: the ASCII portrait (see initContactPortrait) on the left, as tall as the details beside it, so the two
   line up through the middle; stacked above the details on phones */
.footer__contact { display:flex; align-items:stretch; }
.footer__contact .footer__items { margin-left:0; flex:0 1 auto; }
/* the wrapper fills the space left of the details and centres the panel in it, with an equal margin either side */
.footer__portrait-w { flex:1 0 auto; display:flex; justify-content:center; padding:0 clamp(16px,2vw,32px); }
.footer__portrait-w[hidden] { display:none; }
.footer__portrait { position:relative; flex:none; aspect-ratio:4/5; background:#272727; overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); }
/* pinned inside, so the canvas's own size never decides the panel's: the details' height does */
.footer__portrait canvas { position:absolute; inset:0; display:block; width:100%; height:100%; }
@media (max-width:599px) { .footer__contact { flex-direction:column; gap:24px; } .footer__portrait-w { padding:0; } .footer__portrait { width:160px; } .footer__contact .footer__items { margin-left:auto; } }
.footer__link { text-decoration:underline; text-underline-offset:3px; }
.footer__item { display:flex; flex-direction:column; gap:4px; line-height:1.3; }
.footer__copy { padding:56px 0; display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }

@media (min-width:1200px) {
  .site-heading__inner { gap:12px; padding:140px 0 96px; }
  .deco.lt,.deco.rt { top:16px } .deco.lt,.deco.lb { left:16px } .deco.rt,.deco.rb { right:16px } .deco.lb,.deco.rb { bottom:16px }
  .big .br:first-child { padding-right:24px } .big .br:last-child { padding-left:24px }
  .index__content { padding-top:80px; display:grid; grid-template-columns:repeat(6,1fr); row-gap:120px; align-items:start; }
  /* staircase, same placement as the original: info, 2 large cards, numeral + large card, small card + numeral, 3 small cards stepping */
  .index__content > :nth-child(1){grid-column:1/3}
  .index__content > :nth-child(2){grid-column:4/7}
  .index__content > :nth-child(3){grid-column:1/4}
  .index__content > :nth-child(4){grid-column:1/4; justify-self:start}
  .index__content > :nth-child(5){grid-column:4/7}
  .index__content > :nth-child(6){grid-column:1/3}
  .index__content > :nth-child(7){grid-column:4/7; justify-self:end}
  .index__content > :nth-child(8){grid-column:3/5}
  .index__content > :nth-child(9){grid-column:5/7; grid-row:6}
  .index__content > :nth-child(10){grid-column:3/5; grid-row:7}
  .index__content > :nth-child(2) .works__thumb, .index__content > :nth-child(3) .works__thumb, .index__content > :nth-child(5) .works__thumb { width:20.83vw; }
  .info { padding:48px 24px; margin-bottom:0; }
  .works { margin-bottom:0; }
  .works__link { aspect-ratio:1/.823; padding:16px; }
  .works__item.no,.works__item.cat { top:16px } .works__item.no { left:16px } .works__item.cat { right:16px } .works__item.ttl { bottom:16px; left:16px }
  .works__thumb { width:10.42vw; }
  .num { display:flex; align-items:center; justify-content:center; font:clamp(6rem,3.7rem + 9.77vw,12.5rem) Inter,sans-serif; }
  .num .br:first-child { padding-right:24px } .num .br:last-child { padding-left:24px }
  .theme { padding-top:320px; margin-bottom:220px; }
  .file { top:80px; }
  .file__tab { display:grid; grid-template-columns:repeat(12,1fr); max-width:1440px; }
  /* one tab per card, each a step further along; the front card's tab is dark, covered ones turn light */
  .file__tab span { grid-column:calc(var(--i) * 2 + 1) / span 2; text-align:center; padding:24px 0; border:1px solid var(--color-text); border-bottom:0; border-radius:16px 16px 0 0;
    background:var(--color-text); color:var(--color-bg); position:relative; top:2px; z-index:10; font-size:.875rem; transition:background-color .4s, color .4s; }
  .file.is-covered .file__tab span { background:var(--color-bg); color:var(--color-text); }
  .file__body { height:70vh; border-radius:0 16px 16px 16px; }
  .file__apply { width:fit-content; margin-left:auto; gap:16px; }
  .file__link { flex:none; padding:28px 56px; white-space:nowrap; clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px); }
  .file-end { height:100vh; }
  .about { margin-bottom:220px; }
  .about__sticky { top:10vh; }
  .pi.tl,.pi.tr,.pi.tm { top:24px } .pi.tl,.pi.bl,.pi.ml { left:24px } .pi.tr,.pi.br,.pi.mr { right:24px } .pi.bl,.pi.br,.pi.bm { bottom:24px }
  .pi.ml, .pi.mr { top:50%; transform:translateY(-50%); }
  .pi__photo { width:128px; }
  /* about two-thirds of a screen; in the left column the ASCII mark sits beside the site details, not above them */
  .footer { height:clamp(520px,66vh,700px); margin:40px 0 0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; }
  .footer__credit { padding:32px; grid-column:1; grid-row:1/3; display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr); gap:24px 32px; }
  .footer__credit > .footer__item:first-child { grid-column:1 / -1; }
  .footer__credit .footer__ascii { grid-column:1; grid-row:2; align-self:center; justify-self:center; }
  .footer__credit .footer__items { grid-column:2; grid-row:2; align-self:end; margin-left:0; }
  .footer__credit::after { top:0; bottom:auto; left:auto; right:0; width:1px; height:100%; border-top:0; border-left:1px solid var(--color-text); }
  .footer__theme { padding:32px; grid-column:2; grid-row:1; justify-content:space-between; }
  .footer__copy { padding:0; grid-column:2; grid-row:2; justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { .eye { animation:none; } .theme__intro,.files,.about__intro,.about__panel { height:auto; } .theme__intro-w,.file,.about__intro-w,.about__sticky { position:static; transform:none; } }

/* project detail page */
.detail { margin-bottom:120px; }
.detail .sec-head .big { font-size:clamp(1.1rem,3.6vw,4.5rem); }
.detail .sec-head { gap:12px; }
.detail__heading { min-width:0; }
.detail__heading .br:first-child { padding-right:4px } .detail__heading .br:last-child { padding-left:4px }
.detail__content { padding:40px clamp(12px,2.141px + 2.629vw,40px) 0; margin:0 auto 80px; }
.detail__label { margin-bottom:40px; }
.detail__article { display:grid; gap:clamp(12px,2.141px + 2.629vw,40px); }
.detail__desc { min-width:0; overflow-wrap:break-word; display:flex; flex-direction:column; gap:24px; }
.detail__desc .item { display:flex; flex-direction:column; gap:4px; }
.detail__desc .text-base { line-height:1.6; }
.detail__desc--sp { margin-bottom:40px; } .detail__desc--pc { display:none; }
.detail__assets { width:65%; margin:0 auto; }
.detail__image { padding:40px 0; border:1px solid color-mix(in srgb,var(--color-text) 80%,transparent); background:linear-gradient(0deg,#131313,#000); overflow:hidden; }
.detail__image-w { width:min(60%,300px); min-width:150px; margin:0 auto; overflow:hidden; }
.detail__image-w img { width:100%; aspect-ratio:893/1263; object-fit:cover; }
.detail__note { margin-top:12px; line-height:1.5; opacity:.75; }
.detail__note span { opacity:.6; }
.detail__shots { margin-top:96px; }
.detail__shots:empty { display:none; }
.detail__shot { max-width:1100px; margin:0 auto 56px; }
.detail__shot img { width:100%; height:auto; border:1px solid color-mix(in srgb,var(--color-text) 80%,transparent); }
.detail__shot figcaption { margin-top:12px; line-height:1.4; }
.detail__shot figcaption span { opacity:.5; }
.detail__back { justify-content:center; align-items:center; width:fit-content; margin:0 auto 80px; }
.detail__back:hover .js-bracket-label { opacity:.6; }
.detail__other-sec { padding:0 clamp(12px,2.141px + 2.629vw,40px); }
.detail__other-label { margin-bottom:64px; }
@media (min-width:1200px) {
  .detail__content { margin-bottom:160px; }
  .detail__article { grid-template-columns:1fr auto 1fr; }
  .detail__desc--sp { display:none; } .detail__desc--pc { display:flex; }
  .detail__assets { width:calc(20.83vw + 80px); }
  .detail__image { padding:40px; }
  .detail__image-w { width:20.83vw; }
  .detail__back { margin-bottom:160px; }
  .detail__other { display:grid; grid-template-columns:repeat(12,1fr); }
  .detail__other-label { margin-bottom:32px; }
  .detail__other-item:nth-child(1){grid-column:1/5} .detail__other-item:nth-child(2){grid-column:5/9} .detail__other-item:nth-child(3){grid-column:9/13}
  .detail__other-item { padding:0 8px; }
  .detail__other .works__thumb { width:12vw; }
}

/* CV page */
.cv { padding:40px clamp(12px,2.141px + 2.629vw,40px) 0; margin-bottom:80px; }
.cv p, .cv li { line-height:1.6; }
.cv a { text-decoration:underline; text-underline-offset:3px; }
.cv__sec { display:grid; gap:12px; padding:32px 0; border-bottom:1px solid color-mix(in srgb,var(--color-text) 25%,transparent); }
.cv__body { display:flex; flex-direction:column; gap:28px; min-width:0; }
.cv__compact { gap:10px; }
.cv__entry { display:flex; flex-direction:column; gap:4px; }
.cv__title { font-weight:500; }
.cv__sub { opacity:.6; }
.cv__summary { max-width:640px; }
.cv__date { opacity:.7; line-height:1.6; }
.cv__row { display:grid; gap:2px; }
.cv ul li { position:relative; padding-left:16px; }
.cv ul li::before { content:"–"; position:absolute; left:0; opacity:.5; }
.cv__actions { display:flex; gap:12px; margin-top:48px; }
button.file__link { border:0; cursor:pointer; }
@media (min-width:1200px) {
  .cv { padding-top:80px; margin-bottom:160px; }
  .cv__sec { grid-template-columns:1fr 3fr; gap:40px; padding:48px 0; }
  .cv__row { grid-template-columns:220px 1fr; gap:24px; }
  .cv__body { max-width:880px; }
  .cv__actions { justify-content:flex-end; gap:16px; }
}
.cv__h { display:none; }

/* printed / saved PDF: single column, standard headings, plain font, real bullets — easy for ATS to parse */
@page { size:A4; margin:16mm 16mm 18mm; }
@media print {
  .loader, .ticker, .page-overlay, .nav-w, .footer-bleed, .menu, .site-heading, .sec-head, .divider, .cv__actions, .detail__back, .footer, .page__border, .cv__label { display:none !important; }
  html, body { background:#fff !important; color:#000 !important; }
  .page, .page__wrapper, #page-container { display:block !important; transform:none !important; }
  .cv, .cv * { font-family:Arial, Helvetica, sans-serif !important; color:#000 !important; }
  .cv { padding:0; margin:0; font-size:10.5pt; font-weight:400; }
  .cv p, .cv li, .cv span { line-height:1.4; font-weight:400; font-size:10.5pt; opacity:1; }
  .cv a { text-decoration:none; }
  .cv__sec { display:block; padding:0; border:0; margin:0 0 12pt; }
  .cv__h { display:block; font-size:11.5pt; font-weight:700; text-transform:uppercase; letter-spacing:.04em; border-bottom:1px solid #000; padding-bottom:2pt; margin:0 0 6pt; line-height:1.2; }
  .cv__sec:first-child .cv__h { margin-top:10pt; }
  .cv__sec:first-child { display:flex; flex-direction:column; }
  .cv__sec:first-child .cv__h { order:2; } .cv__sec:first-child .cv__body { display:contents; }
  .cv__sec:first-child .cv__entry { order:1; } .cv__sec:first-child .cv__summary { order:3; }
  .cv__name { font-size:20pt !important; font-weight:700 !important; line-height:1.2 !important; }
  .cv__body { gap:8pt; max-width:none; }
  .cv__compact { gap:2pt; }
  .cv__entry { gap:1pt; break-inside:avoid; }
  .cv__title, .cv__title * { font-weight:700 !important; }
  .cv__sub { opacity:1; font-weight:400 !important; }
  .cv__date { font-style:italic; }
  .cv__row { display:block; }
  .cv__row .cv__date { font-style:normal; font-weight:700 !important; }
  .cv__row .cv__date::after { content:": "; }
  .cv__row p, .cv__row span { display:inline; }
  .cv ul { margin:2pt 0 0; padding-left:14pt; }
  /* position:static keeps bullets in reading order in the PDF text (positioned elements are drawn last) */
  .cv ul li { list-style:disc; padding-left:2pt; position:static; }
  .cv ul li::before { content:none; }
}