/* ==========================================================
   Ashwin Vishwanathan — a desk, not a website
   paper page · one cutting mat · Figma layer · cut-paper type
   ========================================================== */
:root {
  --wood:
    repeating-linear-gradient(180deg, transparent 0 318px, rgba(122, 86, 48, .16) 318px 319px, rgba(255, 250, 238, .35) 319px 320px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='640'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.00178571 .025' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55  0 0 0 0 .38  0 0 0 0 .2  0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='320'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .25' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .34  0 0 0 0 .18  0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ecdfc7, #e5d4b7);
  --paper: #f6f2e9;
  --paper-2: #efe8da;
  --ink: #17161a;
  --ink-2: #4b4750;
  --line: rgba(23, 22, 26, .07);
  --mat: #1f6b4f;
  --mat-line: rgba(240, 236, 214, .15);
  --mat-line-2: rgba(240, 236, 214, .34);
  --figma: #3b9cff;
  --yellow: #ffd23f;
  --blue: #1a5ee6;
  --orange: #ff7a2f;
  --lilac: #b69cff;
  --mint: #9fe3c6;
  --pink: #ff4fa8;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter Tight", system-ui, sans-serif;
  --display: var(--sans);
  --mono: var(--sans);
  --hand: var(--serif);
  --gutter: clamp(16px, 3.4vw, 44px);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --smooth: cubic-bezier(.2, .8, .2, 1);
  --paper-shadow: -1px 1px 1px rgba(23, 22, 26, .12), -12px 18px 26px -12px rgba(23, 22, 26, .45);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* the mat's motion values: registered as non-inherited, so animating them re-styles only the mat,
   not the hundreds of ruler marks and guides on it (that was what made the slide jittery on phones) */
@property --tx { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --ty { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --rx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --rz { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --s  { syntax: '<number>'; inherits: false; initial-value: 1; }
*, *::before, *::after { box-sizing: border-box; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html { overflow-x: clip; background: #e8d9bf; }
main { overflow-x: clip; }   /* clip, not hidden: sticky stages keep working */
body {
  margin: 0; color: var(--ink); font: 400 18px/1.55 var(--display); -webkit-font-smoothing: antialiased;
  /* a light Scandinavian tabletop: pale oak boards, long soft grain, fine fibres and faint joins */
  background-color: #e8d9bf;
  background-image: var(--wood);
  background-size: 100% 320px, 2800px 640px, 2800px 320px, 100% 100%;
}
/* no italics anywhere: upright type only, and the browser may not fake a slant */
*, *::before, *::after { font-synthesis-style: none; }
i, em, cite, address { font-style: normal; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
::selection { background: var(--yellow); }

/* ---------------- nav ---------------- */
.nav { zoom: var(--k, 1); position: fixed; z-index: 50; top: 14px; left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav__logo, .nav__tabs, .nav__menu { background: rgba(255, 255, 255, .86); border: 1px solid rgba(23, 22, 26, .1); border-radius: 999px; box-shadow: 0 6px 20px -10px rgba(23, 22, 26, .25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__logo { justify-self: start;  padding: 4px 16px 6px; font: 400 24px var(--serif); letter-spacing: -.01em; }
.nav__logo span { color: var(--orange); }
.nav__tabs { display: flex; padding: 4px; gap: 2px; }
.nav__tabs a { padding: 6px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; transition: background .2s, color .2s; }
.nav__tabs a:hover { background: var(--paper-2); }
.nav__tabs a.is-active { background: var(--ink); color: #fff; }
/* menu button (phones & tablets, where the tabs are hidden) */
.nav__menu { display: none; grid-column: 3; justify-self: end; width: 46px; height: 46px; border-radius: 50%; place-content: center; gap: 5px; }
.nav__menu i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .35s var(--spring); }
.nav__menu[aria-expanded="true"] i:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__menu[aria-expanded="true"] i:last-child { transform: translateY(-3.5px) rotate(-45deg); }
/* the menu: a card of paper that drops in under the button */
.menu { position: fixed; z-index: 49; top: 70px; right: var(--gutter); width: min(300px, calc(100vw - 32px)); padding: 18px 22px 20px; background: #fffdf8; border-radius: 4px;
  box-shadow: var(--paper-shadow); rotate: -1.2deg; transform-origin: 90% 0; opacity: 0; visibility: hidden; transform: translateY(-12px) scale(.96);
  transition: opacity .25s, transform .45s var(--spring), visibility 0s .45s; }
.menu.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .45s var(--spring), visibility 0s; }
.menu::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .12; mix-blend-mode: multiply; background-image: var(--noise); }
.menu nav { display: flex; flex-direction: column; }
.menu a { display: flex; align-items: baseline; gap: 14px; padding: 9px 2px; border-bottom: 1px dashed rgba(23, 22, 26, .16); font: 400 30px/1.1 var(--serif); letter-spacing: -.01em; }
.menu a span { font: 500 11px var(--sans); color: var(--ink-2); letter-spacing: .06em; }
.menu a:hover { color: var(--blue); }
.menu .menu__resume { border-bottom: 0; margin-top: 12px; align-self: flex-start; padding: 7px 14px; border-radius: 6px; background: var(--figma); color: #fff; font: 600 14px var(--sans); }
.ping { width: 9px; height: 9px; border-radius: 50%; background: #1fbf75; box-shadow: 0 0 0 0 rgba(31, 191, 117, .6); animation: ping 2s infinite; display: inline-block; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(31, 191, 117, 0) } 100% { box-shadow: 0 0 0 0 rgba(31, 191, 117, 0) } }

/* ---------------- shared bits ---------------- */
.hand { font: 400 clamp(24px, 2.4vw, 32px)/1 var(--serif); color: var(--ink-2); display: inline-flex; align-items: flex-end; gap: 6px; }
.hand svg { width: 50px; height: 32px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hand--small { font-size: 24px; }
/* one standard section heading, everywhere */
.title { max-width: 16ch; font: 400 clamp(42px, 5.4vw, 88px)/.95 var(--serif); letter-spacing: -.022em; margin: 10px 0 0; text-wrap: balance; }
.title .w { display: inline-block; white-space: nowrap; }
.title .sc { display: inline-block; }
.h { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--figma); z-index: 2; }
.h--tl { left: -6px; top: -6px; } .h--tr { right: -6px; top: -6px; } .h--bl { left: -6px; bottom: -6px; } .h--br { right: -6px; bottom: -6px; }
.tape { position: absolute; z-index: 3; left: 50%; top: -13px; width: 96px; height: 26px; margin-left: -48px; background: rgba(255, 240, 166, .72); rotate: -3deg; transform-origin: left center;
  clip-path: polygon(0 10%, 4% 0, 8% 12%, 92% 0, 96% 12%, 100% 5%, 100% 90%, 96% 100%, 92% 88%, 8% 100%, 4% 88%, 0 95%); }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; font-weight: 600; font-size: 16px; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s; }
.btn--ink { background: var(--ink); color: #fff; } .btn--ink:hover { background: var(--blue); }
.btn--line { background: transparent; border-color: rgba(23, 22, 26, .25); } .btn--line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn span { transition: transform .35s var(--spring); } .btn:hover span { transform: translateX(3px); }

.drag { position: absolute; transform: translate(var(--x), var(--y)) rotate(var(--r)); touch-action: none; cursor: grab; user-select: none; }
.drag.is-lifted { cursor: grabbing; z-index: 40; }
.sticky { width: 200px; padding: 20px 16px 20px; color: var(--ink); font: 500 15px/1.35 var(--display); box-shadow: var(--paper-shadow); z-index: 6; }
.sticky b { font-weight: 700; }
.sticky--mint { background: var(--mint); } .sticky--yellow { background: #ffe56a; }
/* my current job, as a tall kraft business card lying on the mat */
.bizcard { width: 150px; aspect-ratio: .6; padding: 16px 15px 15px; z-index: 6; display: flex; flex-direction: column; overflow: hidden;
  background: #c4af8f url("../assets/textures/kraft.webp") center / cover; border-radius: 9px; color: #231c14;
  box-shadow: -1px 1px 0 #a58c67, -2px 2px 1px rgba(23, 22, 26, .18), -9px 13px 18px -9px rgba(23, 22, 26, .5); }
/* printed on the card: the logo sits in the paper, not on top of it */
.bizcard__logo { width: 64%; height: auto; pointer-events: none; mix-blend-mode: multiply; opacity: .92; filter: saturate(.9); }
.bizcard__name { margin-top: auto; font: 600 11px/1.45 var(--sans); letter-spacing: .24em; text-transform: uppercase; }
.bizcard__rule { display: block; width: 62%; height: 1px; margin: 10px 0 0 auto; background: rgba(35, 28, 20, .65); }
.bizcard__role small { display: block; margin-bottom: 3px; font-size: .85em; letter-spacing: .2em; opacity: .7; }
.bizcard__role { margin-top: 14px; align-self: flex-end; text-align: right; font: 500 7.5px/1.6 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(35, 28, 20, .85); }
.sticky::after, .polaroid::after, .note::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .14; mix-blend-mode: multiply; background-image: var(--noise); }
.drag.is-lifted.sticky, .drag.is-lifted.polaroid { box-shadow: 0 2px 2px rgba(0, 0, 0, .12), 0 34px 40px -16px rgba(0, 0, 0, .5); }

/* every prop was rendered at the same scale (blender/render_props.py), so one shared factor keeps them
   in true proportion to each other: width = rendered pixels (--n) × --ps */
.prop { --ps: clamp(.2px, .0212vw, .305px); width: var(--w, calc(var(--n) * var(--ps))); height: auto; z-index: 7; filter: drop-shadow(-7px 10px 5px rgba(6, 22, 14, .42)) drop-shadow(-1px 2px 1px rgba(6, 22, 14, .4)); transition: filter .25s; }
.prop.is-lifted { filter: drop-shadow(-22px 32px 16px rgba(6, 22, 14, .36)) drop-shadow(-2px 3px 2px rgba(6, 22, 14, .3)); }

.bot { position: absolute; z-index: 9; pointer-events: none; display: flex; align-items: flex-start; }
.bot svg, .you svg { width: 18px; height: 18px; fill: var(--c); stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); }
.bot span, .you span { margin: 14px 0 0 -2px; padding: 5px 10px; border-radius: 3px 10px 10px 10px; background: var(--c); color: var(--tc, var(--ink)); font: 500 12px var(--mono); white-space: nowrap; box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4); }
.bot--yellow { --c: var(--yellow); } .bot--pink { --c: var(--pink); --tc: #fff; } .bot--mint { --c: var(--mint); }

/* ---------------- hero: the mat ---------------- */
/* the hero is a tall scroll area; its stage sticks while the mat slides away and uncovers "about me" underneath */
.hero { position: relative; height: 315vh; }
/* stages cover the large viewport (phone address bar hidden) so no strip is uncovered when it slides away;
   the things on them are laid out in the small viewport (bar showing) so nothing hides behind the bar */
.hero__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; overflow: hidden; perspective: 1800px; perspective-origin: 40% 10%; }
/* the stage carries its own copy of the desk (lined up with the page's, which starts at the top too),
   so while it's stuck the table holds still under the carved text instead of sliding past */
.hero__stage { background-color: #e8d9bf; background-image: var(--wood); background-position: 0 0;
  background-size: 100% 320px, 2800px 640px, 2800px 320px, 100% var(--bh, 100vh); }
.under { position: absolute; left: 0; top: 0; width: calc(100% / var(--k, 1)); height: calc(100vh / var(--k, 1)); height: calc(100svh / var(--k, 1)); transform: scale(var(--k, 1)); transform-origin: 0 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 90px var(--gutter) 30px; }
.under .big-text { max-width: 760px; margin-top: 30px; }
/* scratched into the wood with a pointed tool: a thin, faint, hand-wobbly copy of the paragraph lies underneath… */
.under .big-text { position: relative; }
.under .big-text .scratch { position: absolute; inset: 0; z-index: 0; pointer-events: none; color: rgba(92, 60, 30, .36); text-shadow: 0 1px 0 rgba(255, 252, 242, .6);
  filter: url(#scratch); will-change: opacity; }   /* one layer, filtered once; fading it is just compositing */
.under .big-text .scratch .w { color: inherit; }
.under .big-text .w { --f: 0; }
.under .big-text .w:not(.thumb) { position: relative; display: inline-block; }
.under .big-text > .w:not(.w--shape) { z-index: 1; color: color-mix(in srgb, var(--ink) calc(var(--f) * 100%), transparent); }
.under .big-text .scratch .w:not(.w--shape) { transform: translateY(var(--dy, 0)) rotate(var(--rot, 0)); }
.under .big-text .w--shape { position: relative; display: inline-block; vertical-align: -.1em; rotate: -6deg; }
.under .big-text > .w--shape { z-index: 1; }
.under .big-text > .w--shape .thumb { display: block; rotate: 0deg; opacity: var(--f); }
.under .big-text .scratch .w--shape .thumb { display: block; rotate: 0deg; visibility: hidden; }
.under .big-text .scratch .w--shape::before { content: ""; position: absolute; inset: 0; border: 2.5px solid currentColor; border-radius: 7px; box-shadow: 0 1px 0 rgba(255, 252, 242, .6); }
/* …then inked in on scroll (no GSAP or reduced motion: just inked) */
html:not(.js) .under .big-text .w { --f: 1; }
html:not(.js) .under .big-text .scratch { display: none; }
/* while the mat fades in on load, the about text underneath would show through it */
html.booting .under { visibility: hidden; }
/* …and nothing sits on the bare wood before the mat is there (the animation takes over from these) */
html.booting .mat, html.booting .hero .frame, html.booting .hero .rv, html.booting .hero .note,
html.booting .hero .slap, html.booting .hero .prop, html.booting .hero .bot, html.booting .mat__hint { opacity: 0; }
/* light from a window at the top right: a warm glow, gentle falloff, and the window's frame as soft shadow */
.light { position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: var(--lit, 1);
  background: radial-gradient(ellipse 65% 70% at 92% -6%, rgba(255, 238, 200, .5), rgba(255, 238, 200, 0) 62%),
              linear-gradient(215deg, rgba(0, 0, 0, 0) 45%, rgba(18, 26, 22, .1) 100%); }
/* the window shadow is bigger than the screen (it sways); the wrapper clips it and does the blending */
.gobo-wrap { position: fixed; inset: 0; z-index: 29; overflow: hidden; pointer-events: none; opacity: calc(.11 * var(--lit, 1)); }   /* plain alpha, not multiply: a faint shadow looks the same and full-screen blending is costly on 4K */
.gobo { position: absolute; left: -10%; top: -30%; width: 130%; height: 160%; pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 0 36%, rgba(14, 26, 20, .8) 47% 50%, transparent 61% 100%),
    linear-gradient(0deg, transparent 0 36%, rgba(14, 26, 20, .8) 47% 50%, transparent 61% 100%);
  background-size: 44vw 44vw;
  -webkit-mask-image: radial-gradient(ellipse 55% 55% at 70% 38%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 55% 55% at 70% 38%, #000 25%, transparent 72%);
  transform: rotate(-26deg) skewX(-20deg); animation: gobo 16s ease-in-out infinite alternate; }
@keyframes gobo { to { transform: rotate(-24deg) skewX(-18deg) translate(1.5%, 1%); } }
@media (prefers-reduced-motion: reduce) { .gobo { animation: none; } }
.hero__loose { position: absolute; inset: 0; bottom: auto; height: 100vh; height: 100svh; z-index: 2; pointer-events: none; }
.hero__loose .drag { pointer-events: auto; }
/* big screens: everything lying on the mat is laid out at laptop size, then scaled up by --k */
.hero__scale { position: absolute; left: 0; top: 0; width: calc(100% / var(--k, 1)); height: calc(100% / var(--k, 1)); transform: scale(var(--k, 1)); transform-origin: 0 0; display: flex; align-items: center; justify-content: center; }
.hero__loose .hero__scale { pointer-events: none; }
.mat__pt { position: absolute; width: 2px; height: 2px; margin: -1px 0 0 -1px; pointer-events: none; }
.anchor { position: absolute; left: 0; top: 122vh; width: 1px; height: 1px; }
.about, .worked, .work, .words, .void, .contact { position: relative; z-index: 2; }
/* the mat: bigger than the screen, tilted back and turned, so a couple of corners run off the edges */
.mat {
  --o: calc(26px * var(--k, 1)); --rx: 18deg; --rz: -10deg; --tx: 0px; --ty: 0px; --s: 1; --th: 3.5px;   /* fixed thickness: animating it repainted the whole mat every frame */
  position: absolute; z-index: 1; left: 7vw; top: 20svh; width: max(120vw, 1100px); height: max(150svh, 980px);
  transform: translate(var(--tx), var(--ty)) rotateX(var(--rx)) rotateZ(var(--rz)) scale(var(--s)); transform-origin: 0% 0%;
  border-radius: 26px; overflow: hidden;
  background-color: var(--mat);
  background-image:
    linear-gradient(200deg, rgba(255, 246, 222, .16) 0%, rgba(255, 246, 222, 0) 38%, rgba(4, 20, 13, .22) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008' numOctaves='3' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .3 0 0 0 0 .2 0 0 0 .55 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    linear-gradient(90deg, var(--mat-line-2) 1.5px, transparent 1.5px), linear-gradient(0deg, var(--mat-line-2) 1.5px, transparent 1.5px),
    linear-gradient(90deg, var(--mat-line) 1px, transparent 1px), linear-gradient(0deg, var(--mat-line) 1px, transparent 1px);
  --g: calc(40px * var(--k, 1));
  background-size: 100% 100%, calc(600px * var(--k, 1)) calc(600px * var(--k, 1)), calc(var(--g) * 5) calc(var(--g) * 5), calc(var(--g) * 5) calc(var(--g) * 5), var(--g) var(--g), var(--g) var(--g);
  background-position: 0 0, 0 0, var(--o) var(--o), var(--o) var(--o), var(--o) var(--o), var(--o) var(--o);
  box-shadow:
    inset -1.5px 1.5px 0 rgba(255, 255, 255, .16),
    calc(var(--th) * -.34) calc(var(--th) * .34) 0 #1a5a41,
    calc(var(--th) * -.67) calc(var(--th) * .67) 0 #175236,
    calc(var(--th) * -1) var(--th) 0 #134a31,
    calc(var(--th) * -1 - .5px) calc(var(--th) + .5px) .5px rgba(8, 30, 20, .6),
    -34px 44px 50px -6px rgba(12, 28, 20, .42), -90px 120px 140px -30px rgba(12, 28, 20, .28);
  will-change: transform;
}
.hero__layer { position: absolute; inset: 0; bottom: auto; height: 100vh; height: 100svh; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; transform-origin: 7vw 20svh; will-change: transform; }
.mat__ruler { position: absolute; z-index: 1; pointer-events: none; font: 500 calc(10px * var(--k, 1)) var(--mono); color: rgba(255, 255, 255, .8); background-color: rgba(10, 45, 32, .16); }
.mat__ruler--x { left: var(--o); right: 0; top: 0; height: var(--o); border-bottom: 1.5px solid rgba(255, 255, 255, .3);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, .7) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(255, 255, 255, .4) 1px, transparent 1px);
  background-size: var(--g) calc(9px * var(--k, 1)), calc(var(--g) / 10) calc(5px * var(--k, 1)); background-position: 0 100%, 0 100%; background-repeat: repeat-x; }
.mat__ruler--y { top: var(--o); bottom: 0; left: 0; width: var(--o); border-right: 1.5px solid rgba(255, 255, 255, .3);
  background-image: linear-gradient(0deg, rgba(255, 255, 255, .7) 1.5px, transparent 1.5px), linear-gradient(0deg, rgba(255, 255, 255, .4) 1px, transparent 1px);
  background-size: calc(9px * var(--k, 1)) var(--g), calc(5px * var(--k, 1)) calc(var(--g) / 10); background-position: 100% 0, 100% 0; background-repeat: repeat-y; }
.mat__ruler span { position: absolute; }
.mat__ruler--x span { top: 3px; transform: translateX(-50%); }
.mat__ruler--y span { left: 4px; transform: translateY(-50%); }
.mat__guides { position: absolute; left: var(--o); top: var(--o); width: calc(100% - var(--o)); height: calc(100% - var(--o)); pointer-events: none; }
.mat__guides line, .mat__guides circle { stroke: rgba(255, 255, 255, .16); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.mat__print { position: absolute; left: 50%; bottom: calc(14px * var(--k, 1)); transform: translateX(-50%); font: 500 calc(11px * var(--k, 1)) var(--mono); letter-spacing: .12em; color: rgba(255, 255, 255, .7); white-space: nowrap; z-index: 2; }
.mat__hint { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%) rotate(-1.5deg); font: 400 22px var(--serif); color: #fff; white-space: nowrap; z-index: 2; opacity: .9; }

.hero__inner { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 170px 20px 70px; }
.hello { font: 400 clamp(28px, 3.2vw, 40px) var(--serif); color: #fff; display: inline-flex; gap: 10px; }
.wave { display: inline-block; transform-origin: 70% 80%; animation: wave 2.4s ease-in-out infinite; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0) } 10%, 30% { transform: rotate(16deg) } 20%, 40% { transform: rotate(-8deg) } }

.frame { position: relative; border: 1.5px solid var(--figma); padding: 16px 22px; margin: 26px 0 30px; }
.frame__label { position: absolute; left: -1px; top: -24px; font: 500 11px var(--mono); color: #bfe0ff; }
.frame__size { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); background: var(--figma); color: #fff; font: 600 13.5px var(--sans); padding: 5px 12px; border-radius: 5px; white-space: nowrap; }
.name {
  font-family: var(--serif); font-style: normal; font-weight: 400;
  font-size: clamp(88px, 15vw, 250px); line-height: .9; letter-spacing: -.03em; color: #fffaf0; display: flex; justify-content: center;
  text-shadow: -.012em .016em 0 rgba(8, 40, 27, .38), -.064em .088em .12em rgba(8, 40, 27, .38);   /* in em: the same shadow at every size */
}
.name .ch { display: inline-block; cursor: pointer; color: var(--c, #fffaf0); transition: color .35s ease; }
.name .ch:hover { animation: boing .7s var(--spring); }
@keyframes boing { 30% { transform: translateY(-.12em) rotate(-4deg) scale(1.06); } 60% { transform: translateY(.02em) rotate(2deg); } }
.name .dot { color: var(--orange); }
.frame { margin-bottom: 56px; }
/* the university sticker, stuck on the mat */
.uni-sticker { width: 210px; height: auto; z-index: 6; filter: drop-shadow(-1px 2px 1px rgba(8, 30, 20, .3)) drop-shadow(-6px 10px 10px rgba(8, 30, 20, .28)); }
/* a die-cut city sticker stuck on the mat */
.city-sticker { width: 176px; height: auto; z-index: 6;
  filter: drop-shadow(-1px 2px 1px rgba(8, 30, 20, .35)) drop-shadow(-8px 12px 12px rgba(8, 30, 20, .3)); }
.note {
  position: relative; max-width: 620px; padding: 30px 32px 28px 52px; color: var(--ink); text-align: left; rotate: -1.2deg;
  background-color: #fffdf6;
  background-image: linear-gradient(90deg, transparent 36px, rgba(196, 16, 44, .4) 36px, rgba(196, 16, 44, .4) 38px, transparent 38px), repeating-linear-gradient(transparent 0 33px, rgba(26, 94, 230, .16) 33px 34px);
  background-position: 0 0, 0 20px; box-shadow: -1px 1px 1px rgba(0, 0, 0, .15), -14px 20px 26px -10px rgba(0, 0, 0, .45); border-radius: 3px;
}
.note__text { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; letter-spacing: -.02em; font-weight: 500; text-wrap: balance; }
/* the hero note: one line, one claim */
.note__text { font: 400 clamp(34px, 3.3vw, 50px)/1.05 var(--serif); letter-spacing: -.015em; }
.note__cta { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.squig { position: relative; white-space: nowrap; }
.squig svg { position: absolute; left: 0; bottom: -.28em; width: 100%; height: .4em; overflow: visible; }
.squig path { stroke: var(--blue); stroke-width: 4; fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1s var(--smooth) 1.6s; }
.ready .squig path { stroke-dashoffset: 0; }
.spark { display: inline-block; width: .8em; height: .8em; vertical-align: -.05em; margin-left: .15em; animation: spin 6s linear infinite; }
.spark path { fill: var(--orange); }
@keyframes spin { to { transform: rotate(360deg) } }

/* ---------------- about ---------------- */
.about { position: relative; padding: 80px var(--gutter) 140px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.about--rest { padding: 6vh var(--gutter) 120px; }   /* starts below the stage, never over the paragraph */
/* polaroid · facts card · polaroid, overlapping like things taped to a desk */
.collage { position: relative; display: grid; grid-template-columns: auto minmax(0, 520px) auto; align-items: center; justify-content: center; }
.collage .drag { position: relative; }
.collage .polaroid:first-child { margin-right: -16px; margin-top: 60px; z-index: 5; }
.collage .polaroid:last-of-type { margin-left: -16px; margin-top: -40px; z-index: 5; }
.big-text { max-width: 900px; margin-top: 40px; font: 400 clamp(22px, 2.3vw, 34px)/1.35 var(--sans); letter-spacing: -.02em; color: var(--ink); }
.thumb { display: inline-block; width: 1.3em; height: .85em; vertical-align: -.1em; border-radius: 6px; border: 3px solid #fff; box-shadow: 0 4px 8px -2px rgba(0, 0, 0, .35); }
.thumb--me { background: linear-gradient(160deg, #f6c7a1, #c9785a); rotate: 5deg; }
.thumb--plan { background-color: #e9f1f8; background-image: linear-gradient(#8fb6da 1px, transparent 1px), linear-gradient(90deg, #8fb6da 1px, transparent 1px); background-size: 6px 6px; rotate: -6deg; }
.polaroid { width: 200px; padding: 10px 10px 0; background: #fffdf8; box-shadow: var(--paper-shadow); z-index: 4; }
.polaroid__img { height: 190px; display: grid; place-items: end start; padding: 8px; font: 500 11px var(--mono); color: rgba(0, 0, 0, .4); }
.polaroid__img--me { background: radial-gradient(circle at 50% 38%, #e8b48f 0 18%, transparent 19%), radial-gradient(ellipse at 50% 110%, #4d6d8c 0 42%, transparent 43%), linear-gradient(#cfe1ea, #a8c3cf); }
.polaroid__img--desk { background: linear-gradient(120deg, transparent 58%, rgba(255, 255, 255, .5) 59%, transparent 61%), linear-gradient(var(--mat) 0 64%, #c89c68 64%); }
.polaroid__photo { display: block; width: 100%; height: 190px; object-fit: cover; object-position: 50% 30%; filter: saturate(.92) contrast(1.02); }
.polaroid figcaption { font: 400 24px/1 var(--serif); padding: 12px 2px 14px; text-align: left; }
.facts { position: relative; z-index: 3; text-align: left; background: #fffdf8; padding: 34px 44px 30px 52px; box-shadow: var(--paper-shadow); rotate: -.8deg; }
.facts::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: multiply; background-image: var(--noise); }
.facts__title { font: 400 30px/1 var(--serif); color: var(--ink-2); margin-bottom: 14px; }
.facts > div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 12px 0; border-top: 1px dashed rgba(23, 22, 26, .2); }
.facts span { font: 500 12px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.facts > div p { margin: 0; font-size: 17px; line-height: 1.45; }

/* ---------------- work: project folders ---------------- */
.work { padding: 150px var(--gutter) 130px; margin-top: 40px; overflow-x: clip; overflow-y: visible; overflow-clip-margin: 0;   /* folders arrive from the bottom of the screen, not the paper's edge */
  /* the same desk as the page, lined up with it, so the desk can hold still while this section is pinned */
  background-color: #e8d9bf; background-image: var(--wood);
  background-size: 100% 320px, 2800px 640px, 2800px 320px, 100% var(--bh, 100%); background-position: 0 calc(var(--wy, 0px) * -1); }
/* a big sheet of white canvas paper laid on the desk, a little askew; the work sits on it */
.work__paper { position: absolute; z-index: 0; top: 0; bottom: 0; left: -14vw; right: max(8px, calc(50% - 715px)); pointer-events: none;   /* runs off the left edge */
  --hole: 9px; --hole-x: 34px; --hole-gap: 118px;
  transform-origin: 50% 0; will-change: transform;
  /* drop-shadow (not box-shadow) so the shadow also falls inside the punch holes */
  filter: drop-shadow(-1px 1px 1px rgba(23, 22, 26, .14)) drop-shadow(-12px 18px 22px rgba(40, 28, 14, .24)); }
.work__sheet { position: absolute; inset: 0; border-radius: 3px;
  background-color: #fdfcf8;
  background-image:
    linear-gradient(160deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 45%, rgba(120, 100, 70, .035)),
    repeating-linear-gradient(0deg, rgba(120, 100, 70, .018) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(120, 100, 70, .016) 0 1px, transparent 1px 3px);
  /* punch holes down the right margin: each tile is solid paper with one round hole in it */
  -webkit-mask: radial-gradient(circle var(--hole) at calc(100% - var(--hole-x)) 50%, transparent 96%, #000 100%) 0 0 / 100% var(--hole-gap) repeat-y;
          mask: radial-gradient(circle var(--hole) at calc(100% - var(--hole-x)) 50%, transparent 96%, #000 100%) 0 0 / 100% var(--hole-gap) repeat-y; }
.work__sheet::after { content: ""; position: absolute; inset: 0; opacity: .06; mix-blend-mode: multiply; background-image: var(--noise); border-radius: inherit; }
.work > :not(.work__paper) { position: relative; z-index: 1; }
html:not(.js) .work__paper { rotate: .9deg; }   /* no animation: just lie there, askew */
.work__head { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 70px; }
.work__head .hand--small { margin-top: 18px; }
.folders { position: relative; max-width: 1180px; margin: 0 auto; transform-origin: 50% 0; }
/* the folders stack: the first sits in the flow, the rest lie on top of it, each a tab lower */
.folders { padding-bottom: calc((var(--n, 6) - 1) * 28px); }
.folder:not(:first-child) { position: absolute; left: 0; right: 0; top: calc(var(--i) * 28px); }
@media (min-width: 861px) {
  /* the finished stack has to fit on one screen */
  .shot img { max-height: calc(100svh - 356px); }
}
.folder {
  --c: var(--blue); --fg: #fff;
  position: relative; min-height: 480px;
  --front: 92px;                                        /* where the front panel starts: pages peek out above it */
  background: color-mix(in srgb, var(--c) 84%, #000); color: var(--fg); padding: calc(var(--front) + 28px) 44px 44px;
  clip-path: polygon(0 0, 26% 0, 29% 44px, 100% 44px, 100% 100%, 0 100%);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center;
  filter: drop-shadow(0 -6px 16px rgba(23, 22, 26, .18));
}
.folder::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .12; mix-blend-mode: multiply; background-image: var(--noise); }
/* a real file folder: the darker back panel (with the tab), sheets tucked inside, and the shorter front panel with a lip */
.folder::before { content: ""; position: absolute; left: 0; right: 0; top: var(--front); bottom: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 3px),                       /* the lit top edge */
    linear-gradient(transparent calc(100% - 22px), rgba(0, 0, 0, .09) calc(100% - 22px) calc(100% - 21px), transparent calc(100% - 21px) calc(100% - 12px), rgba(0, 0, 0, .09) calc(100% - 12px) calc(100% - 11px), transparent calc(100% - 11px)),   /* scored fold lines */
    var(--c);
  box-shadow: 0 -5px 10px -3px rgba(0, 0, 0, .28); }
.folder > :not(.folder__page) { position: relative; z-index: 2; }
.folder > .folder__tab { position: absolute; }
.folder__page { position: absolute; z-index: 0; top: calc(var(--front) - 38px); height: 220px; pointer-events: none; border-radius: 2px;
  box-shadow: 0 -1px 0 rgba(0, 0, 0, .05), -2px 3px 6px rgba(0, 0, 0, .18); }
.folder__page--doc { left: 38%; width: 30%; rotate: -2.5deg;                 /* a case-study page: heading bar and lines of text */
  background: linear-gradient(#2b2a30, #2b2a30) 16px 14px / 38% 5px no-repeat, linear-gradient(#b9b6b0, #b9b6b0) 16px 24px / 24% 3px no-repeat,
              repeating-linear-gradient(transparent 0 8px, rgba(0, 0, 0, .12) 8px 10px) 16px 38px / calc(100% - 32px) 100% no-repeat, #fdfcf8; }
.folder__page--sketch { left: 60%; width: 28%; top: calc(var(--front) - 26px); rotate: 3deg;   /* a wireframe sheet on grid paper */
  background: linear-gradient(rgba(59, 156, 255, .35), rgba(59, 156, 255, .35)) 14px 12px / 44% 12px no-repeat,
              linear-gradient(90deg, rgba(59, 156, 255, .16) 1px, transparent 1px) 0 0 / 10px 10px, linear-gradient(rgba(59, 156, 255, .16) 1px, transparent 1px) 0 0 / 10px 10px, #f6f9fd; }
.folder__tab { position: absolute; left: 26px; top: 12px; font: 500 13px var(--mono); letter-spacing: .06em; }
.folder__meta { font: 500 13px var(--mono); letter-spacing: .04em; padding: 5px 12px; border: 1px solid currentColor; border-radius: 999px; display: inline-block; }
.folder__name { font: 400 clamp(54px, 6vw, 96px)/.92 var(--serif); letter-spacing: -.025em; margin: 22px 0 14px; }
.folder__line { font-size: 19px; line-height: 1.4; max-width: 24em; }
.folder__outs { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.out { padding: 10px 14px 12px; background: var(--oc); color: var(--ink); rotate: var(--or); box-shadow: var(--paper-shadow); }
.out b { display: block; font: 400 32px/1 var(--serif); letter-spacing: -.01em; }
.out span { font-size: 13px; }
.folder__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; font-weight: 700; border-bottom: 2px solid; padding-bottom: 2px; }
.shot { position: relative; justify-self: center; width: fit-content; max-width: 100%; background: #fff; padding: 10px; rotate: 1.6deg; box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5); transition: rotate .6s var(--spring), scale .6s var(--spring); }
.folder:hover .shot { rotate: -.5deg; scale: 1.03; }
/* the covers are square: show them whole, and let the white frame hug the image (no cropping) */
.shot img { display: block; width: auto; height: auto; max-width: 100%; aspect-ratio: 1; object-fit: contain; max-height: 520px; }
.shot__file { position: absolute; right: 12px; top: -14px; background: var(--figma); color: #fff; font: 500 11px var(--mono); padding: 4px 8px; border-radius: 5px; z-index: 3; }

/* the last, thin folder: everything else lives on Behance */
.folder--more { --c: #e9dfcc; --fg: var(--ink); --front: 70px; min-height: 0; padding: calc(var(--front) + 20px) 44px 44px; grid-template-columns: 1fr auto; align-items: center; margin-bottom: 0; }
.more__text { max-width: 12ch; font: 400 clamp(44px, 5vw, 80px)/.95 var(--serif); letter-spacing: -.025em; }
.more__cta { font-weight: 700; border-bottom: 2px solid; padding-bottom: 2px; }
.folder--more:hover .more__cta { color: var(--blue); }

/* ---------------- expertise: two index cards ---------------- */
.expertise { padding: 40px var(--gutter) 120px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 400px)); gap: 34px; justify-content: center; align-items: start; margin-top: 60px; }
@media (max-width: 1240px) and (min-width: 861px) { .cards { grid-template-columns: repeat(2, minmax(0, 460px)); } .cards .card:last-child { grid-column: 1 / -1; justify-self: center; width: min(620px, 100%); } }
/* AI tools: dark chips, a nod to the AI lab further down */
.chips--ai { margin-top: 10px; }
.chips.chips--ai li { background: var(--ink); color: #f4efe6; border-color: var(--ink); }
.chips.chips--ai li:hover { background: var(--blue); border-color: var(--blue); }
.card { position: relative; text-align: left; background: #fffdf8; padding: 34px 34px 32px; rotate: var(--r); box-shadow: var(--paper-shadow);
  background-image: linear-gradient(transparent 63px, rgba(255, 79, 168, .35) 63px 64px, transparent 64px), repeating-linear-gradient(transparent 0 31px, rgba(59, 156, 255, .16) 31px 32px); }
.card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; mix-blend-mode: multiply; background-image: var(--noise); }
.card__no { position: absolute; right: 26px; top: 20px; margin: 0; font: 400 30px/1 var(--serif); color: rgba(23, 22, 26, .35); }
.card h3 { margin: 0 0 28px; font: 400 clamp(32px, 3vw, 42px)/1 var(--serif); letter-spacing: -.015em; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 14.5px; padding: 6px 12px; border-radius: 999px; background: rgba(23, 22, 26, .05); border: 1px solid rgba(23, 22, 26, .12); transition: background .2s, color .2s, border-color .2s; }
.chips li:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------------- where I've designed: company logos as die-cut stickers on the desk ---------------- */
.worked { padding: 10px var(--gutter) 70px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.stickers { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 26px; max-width: 1100px; }
.logo-sticker { display: grid; place-items: center; height: 118px; min-width: 150px; padding: 18px 24px; border-radius: 16px; background: #fffdf8; rotate: var(--r);
  box-shadow: 0 0 0 1px rgba(23, 22, 26, .06), -1px 2px 1px rgba(23, 22, 26, .12), -8px 14px 18px -10px rgba(23, 22, 26, .4); transition: rotate .45s var(--spring), translate .45s var(--spring); }
.logo-sticker:hover { rotate: 0deg; translate: 0 -4px; }
.logo-sticker img { display: block; max-height: 72px; max-width: 180px; width: auto; height: auto; }
.logo-sticker img[src*="level"] { max-width: 200px; max-height: 50px; }

.words { padding: 120px var(--gutter) 60px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.letters { position: relative; display: grid; width: min(660px, 100%); margin-top: 60px; text-align: left; touch-action: pan-y; }
/* the pile: every letter shares one grid cell; the one underneath peeks out above, tilted */
.rec { grid-area: 1 / 1; position: relative; padding: 38px 44px 40px; background: #fbf9f3; border-radius: 2px; box-shadow: var(--paper-shadow); transform-origin: 50% 100%;
  transition: transform .7s var(--spring), filter .4s; will-change: transform; }
.rec::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: multiply; background-image: var(--noise); }
.rec.is-top { z-index: 2; transform: rotate(-.8deg); }
.rec.is-back { z-index: 1; transform: translate(22px, -34px) rotate(3deg); filter: brightness(.96); cursor: pointer; }
.rec.is-back:hover { transform: translate(26px, -44px) rotate(3.5deg); }
.rec.is-back > :not(.rec__head) { visibility: hidden; }        /* only its letterhead shows above the pile */
.rec__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.rec__head img { height: 28px; width: auto; }
.rec__head img.rec__logo--square { height: 46px; margin: -8px 0; }
.rec__org { font: 400 26px/1 var(--serif); }
.rec__head span { font: 600 10.5px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.rec__re { margin-top: 18px; font-size: 13px; color: var(--ink-2); }
.rec__body { margin: 16px 0 0; }
.rec__body p { font: 400 clamp(16px, 1.2vw, 17.5px)/1.62 var(--sans); color: #2a2830; }   /* body copy in the site's text face, like everywhere else */
.rec__body mark { background: linear-gradient(transparent 58%, rgba(255, 214, 64, .55) 58% 92%, transparent 92%); color: inherit; }
.rec__sign { display: flex; flex-direction: column; gap: 3px; margin-top: 26px; min-height: 104px; justify-content: flex-end; padding-right: 130px; }   /* the seal sits beside the signature, never over the text */
.rec__sign b { font: 400 32px/1 var(--serif); }
.rec__sign span { font: 500 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rec__seal { position: absolute; right: 30px; bottom: 26px; width: 104px; height: 104px; border-radius: 50%; display: grid; place-content: center; text-align: center; rotate: -14deg;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--seal) 60%, #fff), var(--seal) 70%); color: #fff; font: 600 11px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: inset 0 0 0 5px rgba(255, 255, 255, .25), 0 8px 16px -6px rgba(0, 0, 0, .5); }
.rec__seal small { display: block; margin-top: 3px; font-size: 7.5px; letter-spacing: .16em; opacity: .85; }
/* desktop: the letters lie side by side on the desk, both readable at once (phones keep the swappable pile) */
@media (min-width: 861px) {
  .letters { grid-template-columns: repeat(2, minmax(0, 560px)); justify-content: center; gap: 44px; width: min(1220px, 100%); cursor: auto; }
  .letters .rec { grid-area: auto; }
  .letters .rec.is-top, .letters .rec.is-back { transform: rotate(var(--tilt, -1deg)); filter: none; cursor: auto; z-index: 1; }
  .letters .rec:nth-child(2) { --tilt: 1.2deg; margin-top: 36px; }
  .letters .rec.is-back > * { visibility: visible; }
  .letters .rec:hover { transform: rotate(0deg) translateY(-4px); }
  .letters__nav { display: none !important; }
  .rec { padding: 34px 36px 36px; }
  .rec__body p { font-size: 16.5px; }
}
.letters__nav { display: flex; align-items: center; gap: 16px; margin-top: 28px; }
.letters__btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(23, 22, 26, .2); background: #fffdf8; font-size: 18px; transition: background .2s, color .2s; }
.letters__btn:hover { background: var(--ink); color: #fff; }
.letters__count { font: 500 13px var(--sans); color: var(--ink-2); min-width: 48px; text-align: center; }
.letters__count b { color: var(--ink); }

/* ---------------- AI lab: a black hole in the desk ---------------- */
.void { position: relative; }
.void__stage { position: sticky; top: 0; height: 100vh; height: 100lvh; margin-bottom: -100vh; margin-bottom: -100lvh; overflow: hidden; pointer-events: none; }
.void__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.void__frame { position: absolute; border: 1.5px solid var(--figma); will-change: opacity; }
.void__tag { position: absolute; left: -1.5px; top: -24px; font: 500 11px var(--sans); color: #fff; background: var(--figma); padding: 3px 8px; border-radius: 4px 4px 4px 0; }
.void__size { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); background: var(--figma); color: #fff; font: 500 11px var(--sans); padding: 3px 9px; border-radius: 5px; white-space: nowrap; }
.void__junk { position: absolute; left: 0; top: 0; will-change: transform; filter: drop-shadow(-4px 8px 6px rgba(40, 25, 10, .35)); }
.void__note { display: grid; place-items: end start; aspect-ratio: 1; padding: 10px; background: var(--mint); font: 500 12px var(--sans); color: var(--ink); box-shadow: var(--paper-shadow); filter: none; }
.void__dive { position: relative; height: 205vh; }
.void__intro { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 9vh; }
.void__confess { margin-top: 8px; font: 400 clamp(34px, 3.4vw, 54px)/1 var(--serif); letter-spacing: -.02em; }
.void__warn { max-width: 30em; margin-top: 12px; font-size: 16px; line-height: 1.45; font-weight: 500; color: var(--ink-2); text-wrap: balance; }
/* what goes through your head on the way down — one thought at a time */
.void__logs { position: sticky; top: 17vh; z-index: 3; display: grid; justify-items: center; margin-top: 45vh; pointer-events: none; }
.void__logs p { grid-area: 1 / 1; opacity: 0; padding: 9px 18px 11px; border-radius: 999px; background: rgba(20, 18, 22, .82); color: #f7f1e6; font: 400 clamp(22px, 2.2vw, 30px)/1.1 var(--serif); white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .5); }
.void__logs p.is-last { background: none; box-shadow: none; font-size: clamp(28px, 3vw, 42px); text-shadow: 0 0 30px rgba(255, 180, 110, .7); }
.void__content { position: relative; z-index: 2; color: #f4efe6; padding: 10vh var(--gutter) 30vh; }
.void__head { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* a feathered pool of dark behind the heading, so the type holds up against the star streaks */
.void__head::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 50%; width: min(1280px, 140%); height: 175%; transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(closest-side, rgba(6, 4, 12, .62) 0%, rgba(6, 4, 12, .52) 50%, rgba(6, 4, 12, .28) 76%, rgba(6, 4, 12, .08) 92%, rgba(6, 4, 12, 0) 100%); }
.void__head > * { position: relative; }
.void .void__content .hand { color: rgba(244, 239, 230, .7); }
.void__sub { max-width: 34em; margin-top: 26px; font-size: 18px; line-height: 1.5; color: rgba(244, 239, 230, .72); }
.void__exit { position: relative; height: 170vh; }
.void__logs--out { margin-top: 0; top: 17vh; }
.orbit { max-width: 1120px; margin: 16vh auto 0; display: flex; flex-direction: column; gap: 14vh; }
.probe { position: relative; width: min(500px, 100%); padding: 30px 30px 28px 30px; border-radius: 22px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .13); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .08); }
.probe:nth-child(2) { align-self: flex-end; }
.probe:nth-child(3) { align-self: center; }
.probe__orb { position: absolute; right: -34px; top: -44px; width: 104px; height: 104px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #fff 0 3%, var(--o1) 22%, var(--o2) 70%, #07060a 100%); box-shadow: 0 0 60px -6px var(--o1); }
.probe__orb--ring::after { content: ""; position: absolute; left: -30%; top: 38%; width: 160%; height: 24%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: transparent; rotate: -14deg; }
.probe__no { font: 400 26px/1 var(--serif); color: rgba(244, 239, 230, .4); }
.probe__status { display: inline-flex; align-items: center; gap: 8px; margin-left: 12px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: rgba(255, 255, 255, .08); vertical-align: 4px; }
.probe__status i { width: 7px; height: 7px; border-radius: 50%; background: var(--o1); box-shadow: 0 0 10px var(--o1); }
.probe h3 { margin: 20px 0 10px; font: 400 clamp(34px, 3.4vw, 48px)/1 var(--serif); letter-spacing: -.015em; }
.probe p { font-size: 16.5px; line-height: 1.5; color: rgba(244, 239, 230, .75); }
.probe__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; }
.probe__tags li { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18); color: rgba(244, 239, 230, .85); }
.probe .probe__lost { margin-top: 20px; padding-top: 14px; border-top: 1px dashed rgba(255, 255, 255, .16); font-size: 13.5px; color: rgba(244, 239, 230, .55); }
.probe__lost b { font: 400 20px var(--serif); color: #f4efe6; margin-left: 4px; }
/* no WebGL: a plain dark field so the section still reads */
.void--static .void__stage { background: radial-gradient(circle at 50% 52%, #000 0 60px, #ffb070 62px, #7a2a00 110px, transparent 170px); }
.void--static .void__content { background: #07060a; }

/* ---------------- contact ---------------- */
.contact { position: relative; padding: 80px var(--gutter) 50px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.comment { position: relative; width: min(560px, 100%); margin-top: 50px; background: #fffdf8; border: 1px solid rgba(23, 22, 26, .1); border-radius: 18px; padding: 18px; text-align: left; box-shadow: 0 24px 50px -24px rgba(23, 22, 26, .35); }
.comment__thread { display: flex; gap: 12px; padding-bottom: 16px; border-bottom: 1.5px dashed rgba(23, 22, 26, .2); font-size: 16px; }
.comment__thread p { margin-top: 3px; line-height: 1.45; }
.muted { color: var(--ink-2); font-size: 13px; }
.avatar { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pink); color: #fff; font: 500 11px var(--mono); }
.avatar--you { background: var(--figma); font-size: 9px; }
.comment__input { display: flex; align-items: center; gap: 10px; padding-top: 14px; }
.comment__field { flex: 1; min-width: 0; font-size: 15px; color: var(--ink-2); border: 1.5px solid rgba(23, 22, 26, .18); border-radius: 10px; padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .2s, color .2s; }
.comment__field:hover { border-color: var(--figma); color: var(--ink); }
.comment__copy { flex: 0 0 auto; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font: 500 13px var(--mono); transition: background .25s; }
.comment__copy:hover { background: var(--blue); }
.socials { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0; margin: 40px 0 0; }
.socials a { display: inline-block; padding: 8px 16px; border: 1px solid rgba(23, 22, 26, .2); border-radius: 999px; font-weight: 500; font-size: 15px; transition: background .25s, color .25s, border-color .25s; }
.socials a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
@keyframes swing { 20% { transform: rotate(9deg); } 45% { transform: rotate(-6deg); } 70% { transform: rotate(3deg); } 100% { transform: rotate(0); } }
/* the résumé: a sheet of A4 lying on the desk */
.resume { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 200px; aspect-ratio: 1 / 1.414; margin-top: 56px; padding: 22px 20px; text-align: left;
  background: #fffdf8; rotate: 3deg; box-shadow: var(--paper-shadow); transition: rotate .5s var(--spring), translate .5s var(--spring), box-shadow .3s; }
.resume:hover { rotate: -1deg; translate: 0 -8px; box-shadow: -1px 1px 1px rgba(23, 22, 26, .12), -18px 30px 36px -14px rgba(23, 22, 26, .45); }
.resume__fold { position: absolute; right: 0; top: 0; width: 28px; height: 28px; background: linear-gradient(225deg, #e8d9bf 50%, #ebe5d8 50%); box-shadow: -2px 2px 3px rgba(0, 0, 0, .12); }
.resume__name { font: 400 20px/1 var(--serif); }
.resume__role { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.resume__lines { display: flex; flex-direction: column; gap: 9px; width: 100%; margin-top: 18px; }
.resume__lines i { height: 5px; border-radius: 3px; background: rgba(23, 22, 26, .1); }
.resume__lines i:nth-child(3n + 1) { width: 40%; background: rgba(23, 22, 26, .22); margin-top: 6px; }
.resume__lines i:nth-child(3n) { width: 78%; }
.resume__file { margin-top: auto; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 5px; background: var(--figma); color: #fff; }
.foot--credit { margin-top: 0 !important; font-size: 11.5px; opacity: .7; } .foot--credit a { text-decoration: underline; }
.foot { margin: 0; font: 500 12.5px var(--sans); color: rgba(20, 20, 22, .62); }
.foot--credit a { color: inherit; }
/* the end of the table: a lit, rounded lip and the thick front face of the wood */
.desk-end { position: relative; z-index: 2; margin-top: 40px; }
.desk-end__lip { position: relative; z-index: 2; height: 30px;
  background:
    linear-gradient(180deg, rgba(255, 250, 238, .8) 0 2px, rgba(255, 246, 228, .25) 2px 4px, transparent 4px 9px),              /* the lit rounded edge */
    linear-gradient(180deg, transparent 9px, rgba(60, 38, 18, .22) 9px 10px, transparent 10px),                                      /* top turns into the front */
    repeating-linear-gradient(180deg, transparent 0 7px, rgba(110, 74, 38, .12) 7px 8px, transparent 8px 13px, rgba(110, 74, 38, .07) 13px 14px),   /* side grain */
    linear-gradient(180deg, #e0cda9 0 9px, #c9ae82 10px, #a88a5d 100%); }
/* the studio floor: pale grey polished tiles, a window's glare across them, the table's shadow falling onto them */
.floor { position: relative; overflow: hidden; padding: 120px var(--gutter) 0;
  background:
    radial-gradient(34% 55% at 70% 62%, rgba(255, 255, 255, .7), rgba(255, 255, 255, .18) 55%, transparent 75%),                        /* glare hotspot */
    linear-gradient(112deg, transparent 22%, rgba(255, 255, 255, .6) 34%, rgba(255, 255, 255, .16) 40%, transparent 47%,
                    transparent 52%, rgba(255, 255, 255, .32) 57%, transparent 63%),                                                    /* the window's reflection */
    linear-gradient(90deg, rgba(255, 255, 255, .85) 1px, rgba(150, 150, 152, .55) 1px 3px, transparent 3px) calc(50% - 90px) 0 / 180px 180px,   /* grout, big tiles */
    linear-gradient(rgba(255, 255, 255, .85) 1px, rgba(150, 150, 152, .55) 1px 3px, transparent 3px) 0 40px / 180px 180px,
    radial-gradient(140% 90% at 50% 20%, #e4e4e2 0%, #d6d6d4 55%, #c4c4c3 100%); }
/* the table's shadow sits above the chair, so the seat's front edge disappears into the dark under the desk */
.floor::before { content: ""; position: absolute; inset: 0 0 auto; height: 240px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(24, 22, 20, .72) 0, rgba(24, 22, 20, .45) 26px, rgba(24, 22, 20, .2) 80px, rgba(24, 22, 20, .05) 160px, transparent 240px); }
/* the desk chair, pushed in, off to the side of the footer text */
/* sized to the desk: a 65cm chair next to the 21cm résumé sheet, a little smaller because the floor is further away */
.floor__chair { position: absolute; z-index: 1; top: calc(-.42 * var(--cw)); right: calc(-.37 * var(--cw)); --cw: clamp(640px, 64vw, 1200px); width: var(--cw); height: auto; pointer-events: none; user-select: none;
  transform: rotate(-4deg); filter: drop-shadow(-12px 18px 14px rgba(20, 20, 22, .3)) drop-shadow(-2px 3px 2px rgba(20, 20, 22, .3)); }
@media (max-width: 1280px) and (min-width: 861px) { .floor__chair { right: calc(-.44 * var(--cw)); } }   /* narrower desktops: slide it further off so the armrest clears the links */
.floor::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .1; mix-blend-mode: multiply; background-image: var(--noise); }
/* the site's name, huge and quiet, set into the floor at the very bottom */
.floor__mark { position: relative; z-index: 0; margin: 60px 0 0; text-align: center; white-space: nowrap; pointer-events: none; user-select: none;
  font: 400 clamp(64px, 15.5vw, 300px)/.78 var(--serif); letter-spacing: -.035em; color: rgba(60, 60, 64, .07);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .1), 0 1.5px 0 rgba(255, 255, 255, .75); margin-bottom: -.06em; }
/* the footer, straight on the tiles */
.rug { position: relative; z-index: 3; width: min(900px, 100%); margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; color: var(--ink); }
.rug__mark { margin: 6px 0 0; font: 400 clamp(64px, 9vw, 120px)/.9 var(--serif); letter-spacing: -.03em; }
.rug__mark { text-shadow: 0 3px 0 rgba(90, 30, 10, .25); }
.rug__mark span { color: var(--yellow); }
.rug__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; font: 600 15px var(--sans); }
.rug__links a { padding: 4px 2px; border-bottom: 2px solid transparent; transition: border-color .2s; }
.rug__links a:hover { border-color: var(--ink); }
.rug__mail { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 15px var(--sans); transition: background .2s; }
.rug__mail:hover { background: #000; }
.rug .foot:first-of-type { margin-top: 6px; }
  background: radial-gradient(120% 90% at 50% 0%, #3a2d21 0%, #1d1611 45%, #100c09 100%); }


/* ---------------- toast, confetti, visitor cursor ---------------- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 90; transform: translate(-50%, 30px); opacity: 0; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font: 500 14px var(--mono); transition: transform .5s var(--spring), opacity .3s; pointer-events: none; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.confetti { position: fixed; z-index: 95; width: 10px; height: 10px; pointer-events: none; }
.you { zoom: var(--k, 1); --c: var(--figma); --tc: #fff; position: fixed; left: 0; top: 0; z-index: 100; pointer-events: none; display: flex; align-items: flex-start; opacity: 0; transition: opacity .2s; }
.has-you, .has-you a, .has-you button, .has-you .drag, .has-you .ch { cursor: none; }
.has-you .you { opacity: 1; }

/* initial states for JS-driven reveals */
html.js .rv { opacity: 0; transform: translateY(24px); }
html.js .drop, html.js .slap { opacity: 0; }

/* ---------------- small screens ---------------- */
@media (max-width: 860px) {
  .nav__tabs { display: none; }
  .nav__menu { display: grid; }
  .folder__meta { font-size: 13px; padding: 5px 12px; }
  /* a phone folder has to fit on one screen, with the tabs of the folders under it showing */
  .folder__name { font-size: 44px; margin: 14px 0 8px; }
  .folder__line { font-size: 17.5px; line-height: 1.4; }
  .folder__outs { display: none; }
  .floor { padding: 100px 20px 0; }
  .floor__chair { --cw: 440px; right: -300px; top: -250px; }
  .floor__mark { font-size: 18.5vw; margin-top: 50px; }   /* phones: the stats live in the case study; the folder keeps title, line and link */
  .out { padding: 7px 10px 8px; } .out b { font-size: 22px; } .out span { font-size: 11px; display: block; line-height: 1.25; }
  /* a proper thumb-sized button */
  .folder__link { margin-top: 16px; font-size: 16px; min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--fg); color: var(--c); }
  .folder--more .more__cta { display: inline-flex; align-items: center; min-height: 48px; }
  .shot { padding: 6px; } .shot img { max-height: 34svh; }
  .shot__file { font-size: 10px; top: -11px; }
  .hero__layer { transform-origin: 5vw 13svh; }
  .under .big-text { font-size: 20px; }
  .mat { --o: 20px; --rx: 10deg; --rz: -7deg; left: 5vw; top: 13svh; width: 190vw; height: 140svh; border-radius: 18px; }
  .hero__inner { padding: 100px 12px 190px; }
  .frame { padding: 10px 10px; }
  .name { font-size: 17vw; }
  .city-sticker { width: 92px; top: auto !important; bottom: 15.6%; right: 6% !important; left: auto !important; }
  .uni-sticker { width: 124px; left: 44% !important; top: 69% !important; }
  .frame__size { font-size: 11.5px; }
  .note { width: min(84vw, 330px); padding: 20px 16px 18px 40px; background-position: 0 0, 0 16px; }
  .note__text { font-size: 27px; }
  .note__cta { gap: 8px; margin-top: 16px; }
  .note .btn { padding: 9px 16px; font-size: 14px; gap: 8px; }
  .sticky { width: 150px; font-size: 12.5px; padding: 16px 12px; }
  .sticky--mint { top: auto !important; bottom: 4%; left: 3% !important; }
  .bizcard { top: auto !important; bottom: 9.4%; left: 11.6% !important; width: 118px; aspect-ratio: .78; padding: 11px 11px 10px; }   /* shorter card on phones */
  .bizcard__name { font-size: 8.5px; } .bizcard__role { font-size: 6px; margin-top: 10px; } .bizcard__rule { margin-top: 7px; }
  .sticky--yellow { top: auto !important; bottom: 6%; right: 3% !important; }
  .hero .prop { --ps: .17px; }
  /* phone layout: knife and brick up top on the mat, pencil and eraser below the note */
  .prop[src*="micron"]  { top: 15.7% !important; left: 4.9% !important; right: auto !important; bottom: auto !important; --r: 20deg !important; }
  .prop[src*="brick"]  { top: 16.1% !important; left: 78.8% !important; right: auto !important; bottom: auto !important; --r: 12deg !important; }
  .prop[src*="airpods"] { top: 8.5% !important; left: 47% !important; right: auto !important; bottom: auto !important; --r: -10deg !important; }
  .prop[src*="lego-yellow"] { top: 16.5% !important; left: 9% !important; right: auto !important; bottom: auto !important; --r: -14deg !important; }
  .mat__hint { display: none; }
  .polaroid { position: relative; left: auto !important; right: auto !important; top: auto !important; display: inline-block; width: 150px; margin: 30px 8px 0; }
  .polaroid__img, .polaroid__photo { height: 140px; }
  /* facts card on top, the two polaroids side by side beneath it */
  .collage { grid-template-columns: 1fr 1fr; justify-items: center; column-gap: 10px; }
  .stickers { gap: 14px; }
  .logo-sticker { height: 88px; min-width: 0; width: calc(50% - 7px); padding: 12px 16px; border-radius: 12px; }
  .logo-sticker img { max-height: 54px; max-width: 100%; }
  .logo-sticker img[src*="level"] { max-height: 36px; }
  .collage .facts { grid-column: 1 / -1; order: 1; }
  .collage .polaroid:first-child, .collage .polaroid:last-of-type { margin: 0; width: min(150px, 42vw); }
  .collage .polaroid:first-child { order: 2; margin-top: 26px; justify-self: end; }
  .collage .polaroid:last-of-type { order: 3; margin-top: 40px; justify-self: start; }
  .facts { padding: 28px 22px 22px; }
  .facts > div { grid-template-columns: 88px 1fr; }
  .folder__page { top: calc(var(--front) - 24px); height: 140px; } .folder__page--sketch { top: calc(var(--front) - 18px); }
  .folder { --front: 68px; grid-template-columns: 1fr; padding: calc(var(--front) + 14px) 18px 20px; min-height: 0; gap: 16px; clip-path: polygon(0 0, 46% 0, 52% 40px, 100% 40px, 100% 100%, 0 100%); }
  .bot, .you { display: none; }
  .cards { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
  .card { padding: 30px 22px 26px; }
  .letters { width: calc(100% - 14px); margin-right: 14px; }
  .rec { padding: 28px 22px 34px; } .rec.is-back { transform: translate(2px, -26px) rotate(1.6deg); } .rec.is-back:hover { transform: translate(2px, -30px) rotate(1.6deg); }
  .rec__seal { width: 76px; height: 76px; right: 14px; bottom: 14px; font-size: 8.5px; } .rec__seal small { font-size: 6px; }
  .rec__sign { padding-right: 80px; min-height: 76px; } .rec__head img { height: 22px; } .rec__head span { font-size: 9px; letter-spacing: .14em; }
  .folder--more { grid-template-columns: 1fr; padding: calc(var(--front) + 14px) 22px 26px; gap: 16px; }
  .work { padding: 90px 8px 70px; }   /* folders nearly full width on phones */
  .work__paper { --hole: 6px; --hole-x: 16px; --hole-gap: 84px; }
  .orbit { gap: 10vh; }
  .probe { padding: 26px 22px 24px; }
  .probe__orb { width: 72px; height: 72px; right: -8px; top: -36px; }
  .void__junk.prop { width: 52px !important; }
}
/* short phones (iPhone SE and similar): the bottom is full with the card and sticker, so the tools move up the sides */
@media (max-width: 860px) and (max-height: 740px) {
  .prop[src*="micron"]  { top: 9.6% !important; left: 23.7% !important; --r: -4deg !important; }
  .prop[src*="brick"]  { top: 10% !important; left: 79% !important; }
  .prop[src*="lego-yellow"] { top: 26.6% !important; left: 4% !important; --r: -78deg !important; }
  .prop[src*="airpods"] { top: 29% !important; left: 79% !important; --r: -10deg !important; }
  .uni-sticker { width: 96px; left: 47% !important; top: 10% !important; }
  .folder .shot img { max-height: 20svh; }   /* smaller cover so the stack fits without scaling the text down */
  .folder__name { font-size: 38px; margin: 10px 0 6px; }
  .bizcard { bottom: 4%; left: 4% !important; }   /* short phones: the note is lower, so these stay at the bottom */
  .city-sticker { bottom: 5%; }
}
/* ---------------- phones in landscape: wide but very short ---------------- */
@media (orientation: landscape) and (max-height: 500px) {
  /* hero in two columns: name on the left, note on the right */
  .hero__inner { display: grid; grid-template-columns: auto minmax(0, 300px); grid-template-areas: "hello note" "frame note";
    column-gap: 40px; align-items: center; justify-content: center; padding: 62px 24px 20px; }
  .hello { grid-area: hello; justify-self: center; align-self: end; font-size: 24px; }
  .frame { grid-area: frame; justify-self: center; align-self: start; margin: 26px 0 34px; }
  .name { font-size: min(24vh, 11.5vw); }
  .hero__inner > .note { grid-area: note; width: 100%; }
  .note__text { font-size: 24px; }
  .hero__inner > .note { padding: 18px 16px 16px 40px; }
  .note__cta { gap: 8px; margin-top: 14px; flex-wrap: nowrap; }
  .note .btn { padding: 8px 14px; font-size: 13.5px; gap: 7px; white-space: nowrap; }
  .bot, .you { display: none; }
  .mat { left: 4vw; top: 17svh; width: 130vw; height: 210svh; }
  .mat__hint { display: none; }
  /* the about text: a little smaller so it fits the short screen */
  .under { padding-top: 64px; }
  .under .big-text { font-size: 17px; margin-top: 16px; }
  /* AI lab: intro on the left, the hole on the right (void.js moves the hole) */
  .void__intro { align-items: flex-start; text-align: left; width: 52%; padding: 72px 0 0 var(--gutter); }
  .void__warn { text-wrap: pretty; }
  .under .big-text { max-width: 600px; }
  .folder { --front: 60px; grid-template-columns: 1fr 1fr; align-items: center; padding: calc(var(--front) + 8px) 20px 16px; gap: 22px; }
  .folder__name { font-size: 32px; margin: 8px 0 4px; }
  .folder__line { font-size: 13.5px; }
  .folder__outs { margin-top: 8px; } .out b { font-size: 18px; } .out span { font-size: 10px; }
  .folder__link { margin-top: 8px; font-size: 13px; }
  .shot img { max-height: calc(100svh - 170px); }
  .folder--more { grid-template-columns: 1fr auto; }
  /* what's on the mat: around the edges, clear of the name and the note */
  .prop[src*="micron"]  { top: 13% !important; left: 21% !important; --r: -3deg !important; }
  .prop[src*="brick"]  { top: 85% !important; left: 31% !important; --r: 10deg !important; }
  .prop[src*="airpods"] { top: 6% !important; left: 58% !important; --r: -8deg !important; }
  .prop[src*="lego-yellow"] { top: 86% !important; left: 69% !important; --r: -12deg !important; }
  .bizcard { top: auto !important; bottom: 3% !important; left: 1.5% !important; width: 88px; padding: 9px 8px 8px; }
  .bizcard__name { font-size: 6.5px; letter-spacing: .2em; } .bizcard__role { font-size: 5px; margin-top: 7px; } .bizcard__rule { margin-top: 5px; }
  .city-sticker { width: 80px; top: 64% !important; bottom: auto !important; left: 89.5% !important; right: auto !important; }
  .uni-sticker { width: 120px; left: 30% !important; top: 6% !important; }
}
@media (orientation: landscape) and (max-height: 400px) {
  .hero__inner { padding-top: 56px; column-gap: 32px; grid-template-columns: auto minmax(0, 270px); }
  .hello { font-size: 21px; }
  .frame { margin: 20px 0 28px; padding: 10px 16px; }
  .name { font-size: min(20vh, 10vw); }
  .note__text { font-size: 21px; }
  .city-sticker { width: 64px; top: 72% !important; left: 90.5% !important; }
  .uni-sticker { width: 100px; }
  .bizcard { width: 72px; left: 1% !important; bottom: 2% !important; padding: 7px 7px 7px; }
  .bizcard__name { font-size: 5.5px; } .bizcard__role { font-size: 4.5px; margin-top: 5px; }
}
/* touch screens: drop the costliest always-on layers (the swaying window shadow, blur behind the nav) */
@media (pointer: coarse) {
  /* the scratched text: iPhones render SVG filters slowly, and it first appears just as the mat starts to slide.
     A plain faint groove with a lit edge reads the same at phone size, at no cost */
  .under .big-text .scratch { filter: none; color: rgba(92, 60, 30, .3); text-shadow: 0 1px 0 rgba(255, 252, 242, .55), 0 -.5px 0 rgba(70, 45, 20, .25); }
  .under .big-text .scratch .w--shape::before { border-width: 1.5px; }
  .under { will-change: transform; }
  .gobo-wrap { display: none; }
  .nav__logo, .nav__tabs, .nav__menu, .probe { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .nav__logo, .nav__tabs, .nav__menu { background: rgba(255, 255, 255, .96); }
  .probe { background: rgba(28, 24, 40, .82); }
}
/* phones: no craft knife on the mat */
@media (max-width: 860px), (orientation: landscape) and (max-height: 500px) {
  .hero .prop[src*="micron"] { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .ping, .wave, .spark { animation: none; }
}

/* ================= ENTRY LOADER: drafting paper that lifts off the desk ================= */
.loader { display: none; }
html.loading { overflow: hidden; }
html.loading .loader, .loader.is-leaving { display: block; }
.loader { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
html.loading .loader { pointer-events: auto; }
.loader__sheet { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px;
  background-color: #f7f4ec;
  background-image:
    linear-gradient(rgba(59, 156, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 156, 255, .09) 1px, transparent 1px),
    linear-gradient(rgba(59, 156, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 156, 255, .045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px; background-position: center;
  box-shadow: 0 30px 60px -10px rgba(40, 28, 14, .45), 0 2px 0 rgba(255, 255, 255, .7) inset;
  transition: transform .95s cubic-bezier(.76, 0, .24, 1); will-change: transform; }
.loader__sheet::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .08; mix-blend-mode: multiply; background-image: var(--noise); }
.loader.is-leaving .loader__sheet { transform: translateY(-104%) rotate(-1.2deg); }
.loader__frame { position: absolute; left: 50%; top: calc(50% - 150px); translate: -50% 0; font: 500 11px var(--sans); color: var(--figma); letter-spacing: .02em; opacity: 0; transition: opacity .5s .2s; }
.loader.is-fonts .loader__frame { opacity: 1; }
/* the wordmark: a faint pencil outline first, then inked left to right as things load */
.loader__mark { position: relative; margin: 0; font: 400 clamp(50px, 17vw, 140px)/1 var(--serif); letter-spacing: -.03em; white-space: nowrap; opacity: 0; transition: opacity .5s; }
.loader.is-fonts .loader__mark { opacity: 1; }
.loader__mark i { font-style: normal; color: var(--orange); }
.loader__ghost { color: transparent; -webkit-text-stroke: 1px rgba(23, 22, 26, .22); }
.loader__ghost i { color: transparent; -webkit-text-stroke: 1px rgba(255, 122, 47, .55); }
.loader__ink { position: absolute; inset: 0; color: var(--ink); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
/* a drafting ruler; the pencil line measures progress from 0 to 30 cm */
.loader__ruler { position: relative; width: min(520px, 78vw); height: 34px; border-top: 1.5px solid rgba(23, 22, 26, .55);
  background-image: linear-gradient(90deg, rgba(23, 22, 26, .55) 1px, transparent 1px), linear-gradient(90deg, rgba(23, 22, 26, .3) 1px, transparent 1px);
  background-size: calc(100% / 6) 12px, calc(100% / 30) 7px; background-repeat: repeat-x; background-position: 0 0; }
.loader__ruler::after { content: ""; position: absolute; right: -1px; top: 0; width: 1px; height: 12px; background: rgba(23, 22, 26, .55); }
.loader__ruler span { position: absolute; top: 15px; translate: -50% 0; font: 500 10px var(--sans); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.loader__line { position: absolute; left: 0; top: -9px; height: 2.5px; width: var(--p, 0%); border-radius: 2px; background: #3b3a40; box-shadow: 0 0 1px rgba(59, 58, 64, .6); }
.loader__tip { position: absolute; top: -13px; left: var(--p, 0%); width: 0; height: 0; translate: -2px 0; border-left: 10px solid #3b3a40; border-top: 5px solid transparent; border-bottom: 5px solid transparent; transition: opacity .3s; }
.loader.is-done .loader__tip { opacity: 0; }
.loader__status { display: flex; justify-content: space-between; width: min(520px, 78vw); margin: -18px 0 0; font: 500 13px var(--sans); color: var(--ink-2); }
.loader__pct { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.loader.is-done .loader__mark { animation: loader-settle .5s var(--spring); }
@keyframes loader-settle { 40% { transform: scale(1.03) rotate(-1deg); } }
@media (max-width: 860px) { .loader__sheet { gap: 34px; } .loader__frame { top: calc(50% - 115px); } }
@media (prefers-reduced-motion: reduce) {
  .loader__sheet { transition: opacity .4s; } .loader.is-leaving .loader__sheet { transform: none; opacity: 0; }
  .loader.is-done .loader__mark { animation: none; }
}