/* Revezie Studio — design system v1.0 ("The Modern Atelier") */

/* ---------- Fonts (self-hosted, latin subset; see fonts/LICENSES.txt) ---------- */
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/hanken-grotesk-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/newsreader-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(fonts/newsreader-italic-latin.woff2) format('woff2');
}

/* ---------- Tokens ---------- */
:root {
  --paper: #F4EFE6;
  --paper-deep: #ECE5D8;
  --ink: #1B1A17;
  --accent: #C8442B;
  --graphite: #6B665E;
  --ink-soft: #4A4640;
  --stone: #BDB5A6;
  --stone-dim: #8E877B;
  --rule: #D9D1C3;
  --rule-dark: #3A3833;

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --gutter: clamp(20px, 5vw, 80px);
  --nav-pad: clamp(20px, 4vh, 36px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
a { color: inherit; transition: color .3s var(--ease); }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
em { font-style: italic; }
h1, h2, p { margin: 0; }
.serif { font-family: var(--serif); }
.mono { font-family: var(--mono); }
.label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
  font-family: var(--mono); font-size: 12px; text-decoration: none;
}
.skip:focus { top: 16px; color: var(--paper); }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  box-sizing: content-box;
}
.split { display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: end; }

/* ---------- Wordmark ---------- */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand:hover { color: inherit; }
.brand-mark { width: 48px; height: 48px; margin-left: -7px; margin-right: -2px; flex-shrink: 0; }
.brand-word { font-family: var(--serif); font-size: 30px; font-weight: 400; letter-spacing: -.01em; }
.brand-label { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--graphite); }

/* ---------- Header ---------- */
.nav { display: flex; justify-content: space-between; align-items: center; padding: var(--nav-pad) 0; }
.navlinks { display: flex; gap: 40px; font-size: 15px; align-items: center; }
.navlinks a { text-decoration: none; }
.navlinks .nav-cta { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.menu-btn {
  min-height: 44px; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  color: inherit; font-family: var(--mono); font-size: 12px; letter-spacing: .1em;
}
.menu-btn .dot { width: 10px; height: 10px; border-radius: 50%; border: 1px dashed currentColor; }

/* ---------- Hero ---------- */
.hero .wrap { min-height: calc(100svh - 48px - 2 * var(--nav-pad)); display: flex; flex-direction: column; }
.hero-grid { flex: 1; display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: center; padding: clamp(16px, 4vh, 72px) 0 clamp(24px, 5vh, 96px); }
.hero-text { display: flex; flex-direction: column; gap: clamp(20px, 3.5vh, 40px); }
.hero-eyebrow { color: var(--accent); }
.hero h1 {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(56px, min(9vw, 13.5vh), 136px);
  line-height: .95;
  letter-spacing: -.035em;
}
.hero h1 .indent { padding-left: 1em; }
.hero h1 em { font-weight: 400; color: var(--accent); }
.hero-sub { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; max-width: 680px; padding-top: 8px; }
.hero-sub p { font-size: 18px; line-height: 1.6; }
.hero-sub .aside { font-family: var(--serif); font-style: italic; line-height: 1.55; color: var(--graphite); }
.aside .word { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink); }
.motif { position: relative; height: min(540px, 60vh); min-height: 320px; }
.motif svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.motif-mob { position: relative; height: 230px; margin-top: 12px; }
.motif-mob svg { width: 100%; max-width: 350px; height: 230px; display: block; }
.idea { transform-box: view-box; transform-origin: 50% 50%; animation: spin 48s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero-foot {
  display: flex; gap: 12px;
  padding: clamp(16px, 2.5vh, 24px) 0 clamp(20px, 4vh, 40px); border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 12px; color: var(--graphite);
}
.hero-foot a { color: var(--graphite); text-decoration: none; }
.hero-foot a:hover { color: var(--accent); }

.rv { animation: rv 1s var(--ease) both; }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .25s; } .d3 { animation-delay: .45s; } .d4 { animation-delay: .7s; }
@keyframes rv { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Reveal once on first view (only when JS is running) */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Section openers ---------- */
.opener { display: flex; flex-direction: column; gap: 20px; }
.opener h2 { font-family: var(--serif); font-weight: 300; letter-spacing: -.03em; line-height: 1; }
.lede { font-size: 16px; line-height: 1.65; }

/* ---------- Selected work ---------- */
.work { background: var(--ink); color: var(--paper); }
.work .wrap { padding-top: 112px; padding-bottom: 128px; display: flex; flex-direction: column; gap: 72px; }
.work .label, .work .lede { color: var(--stone); }
.work h2 { font-size: clamp(48px, 6vw, 88px); }

.tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 96px; }
.tile { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 28px; }
.tile:hover { color: inherit; }
.tile--1 { grid-column: span 7; }
.tile--2 { grid-column: 9 / span 4; margin-top: 160px; }
.tile--3 { grid-column: 2 / span 5; }
.tile--4 { grid-column: 8 / span 5; margin-top: 96px; }

.plate {
  outline: 1px dashed #F4EFE655;
  outline-offset: 10px;
  transition: outline-color .4s ease, outline-offset .5s var(--ease), transform .6s var(--ease);
}
.tile:hover .plate, .tile:focus-visible .plate {
  outline-style: solid; outline-color: var(--accent); outline-offset: 0; transform: translateY(-4px);
}
.tile:focus-visible { outline: none; }
.tile:hover .go, .tile:focus-visible .go { color: var(--accent); }

/* Captions: number, name, sentence, audience, link */
.cap { display: grid; grid-template-columns: 64px 1fr; gap: 16px; align-items: baseline; }
.cap--wide { grid-template-columns: 64px 1fr auto; }
.cap--stack { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.cap--stack .cap-body { display: contents; }
.cap-no { font-family: var(--mono); font-size: 12px; color: var(--stone); }
.cap-body { display: flex; flex-direction: column; gap: 8px; }
.cap-name { margin: 0; font-weight: inherit; font-family: var(--serif); font-size: 32px; line-height: 1; }
.cap--wide .cap-name { font-size: 36px; }
.cap-name .badge { font-family: var(--mono); font-size: 11px; color: var(--stone); vertical-align: middle; }
.cap p { font-size: 16px; line-height: 1.55; color: var(--stone); max-width: 520px; }
.cap-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; }
.cap-for { font-family: var(--mono); font-size: 11px; color: var(--stone-dim); }
.go { font-family: var(--mono); font-size: 12px; transition: color .3s var(--ease); }
.go-u { border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* Plate 01 · GTeam Tool */
.p-gteam {
  background: #F6F5F0; color: #23302B; aspect-ratio: 16 / 10; padding: 6%;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px;
}
.p-gteam .main { display: flex; flex-direction: column; gap: 14px; }
.p-kicker { font-size: 10px; font-weight: 600; letter-spacing: .14em; }
.p-gteam .p-kicker { color: #1E6B52; }
.p-gteam .title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 38px); line-height: 1.05; }
.p-gteam .rows { margin-top: auto; display: flex; flex-direction: column; font-size: 12px; }
.p-gteam .rows > span { border-top: 1px solid #D8D6CE; padding: 10px 0; display: flex; justify-content: space-between; gap: 8px; }
.p-gteam .rows > span:first-child { border-top-color: #23302B; }
.p-gteam .rows .v { color: #1E6B52; }
.p-gteam .ref { border-top: 2px solid #23302B; padding-top: 12px; display: flex; flex-direction: column; gap: 6px; font-size: 10px; letter-spacing: .1em; color: #5B625E; }
.p-gteam .ref .time { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: 0; color: #23302B; font-weight: 500; font-variant-numeric: tabular-nums; }
.p-gteam .ref .date { letter-spacing: 0; }
.p-gteam .ref .week { border-top: 1px solid #D8D6CE; margin-top: 10px; padding-top: 8px; letter-spacing: 0; display: flex; justify-content: space-between; }
.p-gteam .ref .week b { color: #23302B; }

/* Plate 02 · CatalogHandoff */
.p-catalog {
  background: #FAF8F2; color: #17261E; aspect-ratio: 4 / 5; padding: 8%;
  display: flex; flex-direction: column; gap: 16px;
}
.p-catalog .p-kicker { color: #1B5E40; }
.p-catalog .title { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 30px); line-height: 1.02; }
.p-catalog .private { font-size: 11px; font-weight: 600; color: #1B5E40; border-left: 2px solid #1B5E40; padding-left: 8px; }
.p-catalog .drop {
  flex: 1; border: 1.5px dashed #7C9A88; border-radius: 12px; padding: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.p-catalog .drop-t { font-size: 12px; font-weight: 600; text-align: center; }
.p-catalog .btn { background: #1B5E40; color: #fff; font-size: 11px; font-weight: 600; padding: 9px 16px; border-radius: 999px; }

/* Plate 03 · VanishMeta */
.p-vanish { aspect-ratio: 5 / 4; display: grid; grid-template-columns: 1fr 1fr; color: #10231B; }
.p-vanish .l { background: #fff; padding: 9%; display: flex; flex-direction: column; gap: 12px; }
.p-vanish .beta { font-family: var(--mono); font-size: 9px; color: #B34A3C; border: 1px solid #E8B9B0; align-self: start; padding: 2px 5px; }
.p-vanish .title { font-size: clamp(16px, 1.7vw, 24px); font-weight: 600; line-height: 1.08; letter-spacing: -.02em; }
.p-vanish .meta { margin-top: auto; display: flex; flex-direction: column; gap: 6px; font-family: var(--mono); font-size: 10px; }
.p-vanish s { color: #B34A3C; }
.p-vanish .ok { color: #1E6B4E; }
.p-vanish .r {
  background: #174A36;
  background-image: linear-gradient(#ffffff12 1px, transparent 1px), linear-gradient(90deg, #ffffff12 1px, transparent 1px);
  background-size: 22px 22px;
  display: flex; align-items: center; justify-content: center; padding: 8%;
}
.p-vanish .card { background: #fff; border-radius: 8px; padding: 14px; width: 100%; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.p-vanish .btn { background: #174A36; color: #fff; font-size: 10px; font-weight: 600; padding: 8px; width: 100%; text-align: center; border-radius: 4px; }
.p-vanish .hint { font-size: 9px; color: #4C5A54; text-align: center; }
.p-vanish .pill { background: #fff; color: #174A36; font-size: 10px; font-weight: 600; padding: 10px 12px; border-radius: 6px; text-align: center; }

/* Plate 04 · PlayerMemo */
.p-memo {
  background: #070D14; box-shadow: inset 0 0 0 1px #2A3138; color: #F2F4F3;
  aspect-ratio: 5 / 4; padding: 8%;
  display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
}
.p-memo .top { display: flex; flex-direction: column; gap: 10px; }
.p-memo .p-kicker { font-family: var(--mono); font-weight: 400; font-size: 9px; letter-spacing: .12em; color: #34E3C2; }
.p-memo .title { font-size: clamp(22px, 2.6vw, 38px); font-weight: 700; line-height: .95; letter-spacing: -.04em; }
.p-memo .title span { color: #34E3C2; }
.p-memo .facts { border: 1px solid #263039; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); font-size: 10px; }
.p-memo .facts > span { padding: 10px; border-right: 1px solid #263039; }
.p-memo .facts > span:last-child { border-right: 0; }
.p-memo .k { font-family: var(--mono); font-size: 8px; color: #9AA4AD; }
.p-memo .brief { border: 1px solid #263039; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.p-memo .brief .k:first-child { color: #34E3C2; }
.p-memo .brief b { font-size: 13px; }

/* ---------- The maker ---------- */
.maker .wrap { padding-top: 128px; padding-bottom: 128px; }
.maker-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px; }
.maker-side { grid-column: span 4; display: flex; flex-direction: column; gap: 28px; }
.maker-side .label { color: var(--graphite); }
.maker-fig { display: flex; flex-direction: column; gap: 28px; }
.portrait {
  position: relative; width: 100%; max-width: 320px; aspect-ratio: 4 / 5;
  border: 1.2px dashed var(--ink); border-radius: 999px 999px 0 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden;
}
.portrait .z { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 168px; line-height: .8; letter-spacing: -.04em; }
.portrait .n { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--graphite); }
.portrait .dot { position: absolute; right: 18%; bottom: 14%; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); }
.maker-fig figcaption { font-family: var(--mono); font-size: 12px; color: var(--graphite); }
.maker-main { grid-column: 6 / span 7; display: flex; flex-direction: column; gap: 32px; }
.maker h2 { font-family: var(--serif); font-weight: 300; font-size: clamp(40px, 4.6vw, 64px); line-height: 1.05; letter-spacing: -.025em; }
.story { display: flex; flex-direction: column; gap: 22px; font-size: 19px; line-height: 1.7; max-width: 640px; }
.story em { font-family: var(--serif); font-size: 21px; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; padding-top: 32px; border-top: 1px solid var(--rule); }
.value { display: flex; flex-direction: column; gap: 8px; }
.value-t { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--accent); }
.value-d { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }

/* ---------- Workshop ---------- */
.workshop { background: var(--paper-deep); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.workshop .wrap { padding-top: 112px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 56px; }
.workshop .label { color: var(--graphite); }
.workshop h2 { font-size: clamp(44px, 5.4vw, 80px); }
.workshop .lede { color: var(--ink-soft); }
.benches { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.bench {
  border: 1.2px dashed var(--ink); background: var(--paper); padding: 28px;
  display: flex; flex-direction: column; gap: 14px;
  transform: rotate(var(--tilt, 0deg));
  transition: border-style .3s, transform .4s var(--ease);
}
.bench:hover { border-style: solid; transform: rotate(0); }
.bench-k { font-family: var(--mono); font-size: 11px; color: var(--graphite); }
.bench-t { font-family: var(--serif); font-size: 26px; line-height: 1.15; }
.bench-d { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.bench-s { margin-top: auto; font-family: var(--mono); font-size: 11px; }
.bench-dots { flex: 1; min-height: 80px; background-image: radial-gradient(#1B1A1733 1px, transparent 1px); background-size: 12px 12px; }
.bench--1 { --tilt: -1deg; min-height: 260px; }
.bench--2 { --tilt: .8deg; margin-top: 40px; min-height: 220px; }
.bench--3 { --tilt: -.6deg; margin-top: 12px; min-height: 280px; }
.bench--slot {
  --tilt: 1.4deg; margin-top: 56px; min-height: 220px;
  border: 0; background: var(--accent); color: #FFF8EF; text-decoration: none;
}
.bench--slot:hover { color: #FFF8EF; }
.bench--slot .bench-k { color: inherit; }
.bench--slot .bench-s { font-size: 12px; border-bottom: 1px solid currentColor; align-self: start; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); color: var(--paper); }
.footer .wrap { padding-top: 120px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 96px; }
.signoff { display: flex; flex-direction: column; gap: 24px; }
.signoff .big { font-family: var(--serif); font-style: italic; font-weight: 300; font-size: clamp(72px, 10vw, 160px); line-height: .9; letter-spacing: -.04em; }
.signoff .verbs { font-family: var(--serif); font-weight: 300; font-size: clamp(28px, 3vw, 44px); line-height: 1.1; color: var(--stone); }
.signoff .verbs em { color: var(--accent); }
.signoff .en { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--stone-dim); }
.hello { display: flex; flex-direction: column; gap: 16px; }
.hello .label { color: var(--stone); font-weight: 400; }
.mail {
  color: var(--paper); font-family: var(--serif); font-size: 32px; text-decoration: none;
  border-bottom: 1px solid var(--accent); align-self: start; padding-bottom: 4px;
}
.mail:hover { color: var(--paper); border-bottom-width: 2px; padding-bottom: 3px; }
.hello-note { font-family: var(--mono); font-size: 13px; line-height: 1.6; color: var(--stone); }
.foot-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; padding-top: 40px; border-top: 1px solid var(--rule-dark); font-size: 14px; }
.foot-col { display: flex; flex-direction: column; gap: 10px; }
.foot-col .k { font-family: var(--mono); font-size: 11px; color: var(--stone-dim); min-height: 1lh; }
.foot-col .studio { font-family: var(--serif); font-size: 22px; }
.foot-col .tag { color: var(--stone); }
/* Vermilion is too low-contrast for small text on ink, so links on ink underline instead. */
.footer a:not(.mail), .menu a { text-decoration: none; }
.footer a:not(.mail):hover, .menu .things a:hover, .menu .menu-mail:hover { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.colophon { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--stone-dim); }
.idea-thing { display: flex; align-items: center; gap: 8px; }
.idea-thing .o { width: 10px; height: 10px; border-radius: 50%; border: 1px dashed var(--stone-dim); }
.idea-thing .x { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }

/* ---------- Mobile menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 50;
  background: var(--ink); color: var(--paper);
  padding: 0 20px 32px; display: flex; flex-direction: column;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
}
.menu[hidden] { display: none; }
.menu-ring { position: absolute; right: -90px; top: 120px; width: 300px; height: 300px; pointer-events: none; }
.menu-head { display: flex; justify-content: space-between; align-items: center; min-height: 72px; border-bottom: 1px solid var(--rule-dark); position: relative; }
.menu-head .brand-label { color: var(--stone); }
.menu-btn .dot--solid { border: 0; background: var(--accent); }
.menu-nav { display: flex; flex-direction: column; margin-top: 48px; position: relative; }
.menu-nav a { display: flex; align-items: baseline; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--rule-dark); }
.menu-nav .n { font-family: var(--mono); font-size: 11px; color: var(--stone); min-width: 1.6em; }
.menu-nav .w { font-family: var(--serif); font-weight: 300; font-size: 48px; line-height: 1; letter-spacing: -.02em; }
.menu-nav .w--hello { font-style: italic; color: var(--accent); }
.menu-foot { margin-top: auto; padding-top: 40px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.menu-foot .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--stone-dim); }
.things { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; font-size: 15px; }
.things a { min-height: 44px; display: flex; align-items: center; }
.menu-mail { font-family: var(--mono); font-size: 12px; color: var(--stone); padding-top: 14px; border-top: 1px solid var(--rule-dark); }

/* ---------- Reduced motion: final state, colour and outline still respond ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .idea { animation: none; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .plate, .bench { transition: none; }
  .tile:hover .plate, .tile:focus-visible .plate { transform: none; }
  .bench:hover { transform: rotate(var(--tilt, 0deg)); }
}

/* ---------- Stack: tablet & phone (≤ 900px) ---------- */
@media (max-width: 900px) {
  .only-desk { display: none !important; }
  .wrap { padding-left: 20px; padding-right: 20px; }
  .split { grid-template-columns: 1fr; gap: 16px; }

  /* header */
  .nav { padding: 0; min-height: 72px; border-bottom: 1px solid var(--rule); }
  .navlinks { display: none; }
  .brand { gap: 8px; }
  .brand-mark { width: 42px; height: 42px; margin-left: -6px; }
  .brand-word { font-size: 26px; }
  .brand-label { font-size: 10px; }

  /* hero */
  .hero .wrap { min-height: 0; display: block; }
  .hero-grid { display: flex; flex-direction: column; gap: 0; padding: 0 0 36px; }
  .hero-text { gap: 0; }
  .hero .motif { display: none; }
  .hero-eyebrow { font-size: 11px; margin: 8px 0 18px; }
  .hero h1 { font-size: clamp(44px, 15.9vw, 62px); }
  .hero h1 .indent { padding-left: 36px; }
  .hero-sub { display: flex; flex-direction: column; gap: 18px; padding-top: 28px; }
  .hero-sub p { font-size: 17px; }
  .hero-sub .aside { line-height: 1.5; padding-left: 16px; border-left: 1px solid var(--rule); }
  .aside .word { font-size: 11px; letter-spacing: 0; }
  .hero-foot { margin-top: 0; padding: 16px 0 28px; font-size: 11px; }

  /* openers */
  .opener { gap: 16px; }
  .label { font-size: 11px; }
  .lede { font-size: 15px; line-height: 1.6; }

  /* work */
  .work .wrap { padding-top: 72px; padding-bottom: 80px; gap: 64px; }
  .work h2 { font-size: 46px; }
  .tiles { display: flex; flex-direction: column; gap: 64px; }
  .tile { gap: 20px; margin-top: 0 !important; }
  .tile--2, .tile--4 { margin-left: 40px; }
  .plate { outline-offset: 8px; transition: outline-color .3s, outline-offset .4s; }
  .tile:hover .plate, .tile:focus-visible .plate, .tile:active .plate { outline-style: solid; outline-color: var(--accent); outline-offset: 0; transform: none; }

  .cap, .cap--wide { display: flex; flex-direction: column; gap: 8px; }
  .cap-body, .cap-foot { display: contents; }
  .cap-no { font-size: 11px; }
  .cap-name, .cap--wide .cap-name { font-size: 32px; }
  .cap p { font-size: 15px; }
  .go { align-self: start; min-height: 44px; display: flex; align-items: center; }
  .go-u { padding-bottom: 0; border-bottom-color: var(--paper); }
  .tile:hover .go-u, .tile:focus-visible .go-u { border-bottom-color: currentColor; }

  .p-kicker { font-size: 8px; }
  .p-gteam { aspect-ratio: auto; height: 250px; padding: 20px; display: flex; flex-direction: column; gap: 10px; }
  .p-gteam .main { flex: 1; gap: 10px; }
  .p-gteam .title { font-size: 26px; }
  .p-gteam .rows { font-size: 11px; }
  .p-gteam .rows > span { padding: 8px 0; }
  .p-catalog { aspect-ratio: auto; height: 290px; padding: 20px; gap: 12px; }
  .p-catalog .title { font-size: 22px; }
  .p-catalog .drop { border-radius: 10px; gap: 8px; padding: 8px; }
  .p-catalog .drop-t { font-size: 11px; }
  .p-catalog .btn { font-size: 10px; padding: 8px 14px; }
  .p-vanish { aspect-ratio: auto; height: 250px; }
  .p-vanish .l { padding: 16px; gap: 8px; }
  .p-vanish .beta { font-size: 8px; padding: 1px 4px; }
  .p-vanish .title { font-size: 15px; line-height: 1.1; }
  .p-vanish .meta { font-size: 9px; }
  .p-vanish .r { background-size: 18px 18px; padding: 14px; }
  .p-memo { aspect-ratio: auto; height: 270px; padding: 20px; }
  .p-memo .top { gap: 8px; }
  .p-memo .p-kicker { font-size: 8px; }
  .p-memo .title { font-size: 30px; }

  /* maker */
  .maker .wrap { padding-top: 72px; padding-bottom: 80px; }
  .maker-grid { display: flex; flex-direction: column; gap: 28px; }
  .maker-side, .maker-main { display: contents; }
  .maker-fig { flex-direction: row; align-items: flex-end; gap: 20px; }
  .portrait { width: 140px; height: 175px; flex-shrink: 0; aspect-ratio: auto; gap: 2px; overflow: visible; }
  .portrait .z { font-size: 92px; letter-spacing: 0; }
  .portrait .n { font-size: 9px; }
  .portrait .dot { right: 16%; bottom: 12%; width: 22px; height: 22px; }
  .maker-fig figcaption { font-size: 11px; line-height: 1.6; }
  .maker h2 { font-size: clamp(32px, 9.7vw, 38px); }
  .story { gap: 18px; font-size: 17px; line-height: 1.65; }
  .story em { font-size: 19px; }
  .values { display: flex; flex-direction: column; gap: 0; padding-top: 0; }
  .value { padding: 18px 0; border-bottom: 1px solid var(--rule); gap: 6px; }
  .value:last-child { border-bottom: 0; }
  .value-t { font-size: 21px; }
  .value-d { line-height: 1.55; }

  /* workshop */
  .workshop .wrap { padding-top: 72px; padding-bottom: 88px; gap: 28px; }
  .workshop h2 { font-size: 46px; }
  .workshop .split { gap: 28px; }
  .benches { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
  .bench { padding: 22px; gap: 10px; min-height: 0; margin-top: 0; }
  .bench-k { font-size: 10px; }
  .bench-t { font-size: 24px; }
  .bench-s { margin-top: 0; font-size: 10px; }
  .bench-dots { flex: none; height: 56px; min-height: 0; }
  .bench--2 { margin-left: 28px; }
  .bench--slot { --tilt: 1.2deg; margin-left: 20px; gap: 12px; }
  .bench--slot .bench-s { font-size: 12px; }

  /* footer */
  .footer .wrap { padding-top: 80px; padding-bottom: 40px; gap: 48px; }
  .footer .split { gap: 48px; }
  .signoff { gap: 14px; }
  .signoff .big { font-size: clamp(56px, 20.5vw, 80px); }
  .signoff .verbs { font-size: 30px; }
  .signoff .en { font-size: 11px; }
  .hello { gap: 12px; }
  .hello .label { font-size: 11px; }
  .mail { font-size: clamp(22px, 7.2vw, 28px); }
  .hello-note { font-size: 12px; }
  .foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding-top: 28px; font-size: 15px; }
  .foot-col { display: contents; }
  .foot-col--studio, .foot-col--else, .foot-col .k { display: none; }
  .foot-links .things-k { grid-column: 1 / -1; font-family: var(--mono); font-size: 10px; color: var(--stone-dim); padding-bottom: 6px; }
  .foot-links a { min-height: 44px; display: flex; align-items: center; }
  .colophon { flex-direction: column-reverse; gap: 10px; font-size: 10px; }
  .idea-thing .o, .idea-thing .x { width: 9px; height: 9px; }
}

@media (min-width: 901px) {
  .only-mob, .menu { display: none !important; }
}