/* Home page. Motion lives in home.js; this file sets the start and end states. */

.home { background: var(--cream); }
.home .eyebrow { font-size: 14px; }
.h1 { font-size: clamp(54px, 10vw, 176px); line-height: .8; }
.line { display: block; }
.sec-head { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.sec-head .eyebrow { margin-bottom: 22px; }
.slide-heading { font-size: clamp(52px, 9vw, 150px); line-height: .84; overflow: hidden; padding-bottom: .06em; }
.slide-heading .sl { display: block; will-change: transform, opacity; }
.slide-heading .sl-l { padding-left: .9em; }

/* ---------- hero ---------- */
.hero { position: relative; height: 300svh; background: var(--cream); }
.hero-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; color: var(--cream); text-align: center; }
.hero-bg { position: absolute; inset: 0; background: var(--ink); will-change: opacity; }
.hero-scale { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.hero-top { position: absolute; inset: 0 16px 24svh; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hero-desc { margin: 26px 0 22px; font-size: 17px; max-width: 46ch; color: rgba(253,249,240,.82); }
.hero-icons { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 52%); width: calc(5 * var(--t) + 4 * var(--g)); height: var(--t); --t: min(18.4vw, 300px); --g: 1.1vw; }
.hero-icons .set { position: absolute; inset: 0; display: flex; gap: var(--g); }
.hero-icons .icon { width: var(--t); height: var(--t); flex: none; will-change: transform; }
.hero-icons .icon svg, .intro-from svg, .slot svg { width: 100%; height: 100%; overflow: visible; }
.hero-icons .set-b .icon { transform: scale(0); }

/* ---------- statement: tiles fly into the lines ---------- */
.intro { position: relative; height: 260svh; margin-top: -150svh; z-index: 2; pointer-events: none; }
.intro-sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink); padding: 0 16px; opacity: 0; }
.intro-sticky .eyebrow { margin-bottom: 30px; }
.intro-from { position: absolute; left: 50%; top: 50%; display: flex; gap: calc(var(--g) * .28); transform: translate(-50%, -50%); visibility: hidden; --t: calc(min(18.4vw, 300px) * .28); --g: 1.1vw; }
.intro-from .icon { width: var(--t); height: var(--t); }
.intro-lines { font-size: clamp(36px, 7.4vw, 128px); line-height: .92; }
.intro-lines .line { white-space: nowrap; }
.intro-lines .left, .intro-lines .right { display: inline-block; will-change: transform; }
.slot { display: inline-block; width: .82em; height: .82em; margin: 0 .14em; vertical-align: -.08em; will-change: transform; }
@media (max-width: 640px) { .intro-lines .line { white-space: normal; } }

/* ---------- about read: words resolve out of pills ---------- */
.about-read { position: relative; z-index: 3; background: var(--ink); color: var(--cream); padding: 22vh 16px; }
.about-read > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.about-read .eyebrow { color: var(--lime); margin-bottom: 30px; display: flex; }
.read { font-size: clamp(30px, 4.4vw, 64px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; }
.w { position: relative; display: inline-block; }
.w > span { display: inline-block; opacity: 0; }
.w .ph { position: absolute; left: 0; right: .06em; top: 54%; height: .62em; transform: translateY(-50%); border-radius: 999px; background: rgba(253,249,240,.12); }

/* ---------- work stack ---------- */
.work { position: relative; z-index: 3; background: var(--ink); color: var(--cream); padding: 6vh 16px 12vh; }
.work-head { max-width: 1280px; margin: 0 auto 8vh; }
.work-head .eyebrow { color: var(--lime); margin-bottom: 22px; }
.work-intro { max-width: 42ch; margin-top: 26px; color: rgba(253,249,240,.72); font-size: 18px; }
.stack { max-width: 1280px; margin: 0 auto; }
.card-title { font-size: clamp(44px, 6.4vw, 104px); margin-top: 16px; }
.card { top: calc(84px + var(--i) * 14px); }

/* ---------- zoom transition ---------- */
.zoom { position: relative; z-index: 3; height: 220svh; background: var(--ink); }
.zoom-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; place-items: center; }
.zoom-shape { width: 120px; height: 120px; will-change: transform; }
.zoom-shape svg { width: 100%; height: 100%; overflow: visible; }
.zoom-label { position: absolute; color: var(--ink); text-align: center; font-size: clamp(48px, 8vw, 140px); line-height: .86; opacity: 0; }

/* ---------- branding & community grids ---------- */
.brand { position: relative; z-index: 3; background: var(--cream); color: var(--ink); padding: 4vh 0 14vh; }
.brand .sec-head.small { margin-top: 16vh; }
.sec-intro { max-width: 46ch; margin-top: 26px; font-size: 18px; color: #444; }
.grid { max-width: 1280px; margin: 7vh auto 0; padding: 0 16px; display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.g-card { display: flex; flex-direction: column; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 28px; overflow: hidden; color: var(--ink); will-change: transform; transition: border-radius .4s var(--n-out); }
.g-card:hover { border-radius: 14px; }
.g-img { aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1.5px solid var(--ink); background: var(--ink); }
.g-card:not(.big) .g-img { aspect-ratio: 4 / 3; }
.g-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--n-out); }
.g-card:hover .g-img img { transform: scale(1.05); }
.g-txt { position: relative; padding: 20px 64px 24px 24px; }
.g-txt small { font-size: 13px; font-weight: 700; }
.g-txt b { display: block; font-family: var(--display); font-weight: 900; letter-spacing: -.04em; line-height: .9; font-size: clamp(34px, 3.6vw, 56px); margin: 8px 0 10px; }
.g-card:not(.big) .g-txt b { font-size: clamp(28px, 2.6vw, 40px); }
.g-txt em { position: absolute; right: 22px; top: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-style: normal; transition: transform .4s var(--n-out), background .3s; }
.g-card:hover .g-txt em { transform: rotate(-45deg); background: var(--ink); color: var(--bg); }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* ---------- stats ---------- */
.stats { position: relative; z-index: 3; background: var(--lime); color: var(--ink); padding: 16vh 16px; overflow: hidden; }
.stats-icons { max-width: 1200px; margin: 0 auto 6vh; display: flex; gap: 14px; }
.s-ico { width: 72px; height: 72px; }
.s-ico svg { width: 100%; height: 100%; }
.stats .stats-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stats .stat { border-top: 1.5px solid var(--ink); padding-top: 18px; }
.stats .stat b { display: block; font-family: var(--display); font-weight: 900; letter-spacing: -.05em; font-size: clamp(76px, 10vw, 170px); line-height: .9; }
@media (max-width: 720px) { .stats .stats-grid { grid-template-columns: 1fr; } }

/* ---------- experience ---------- */
.exp { position: relative; z-index: 3; background: var(--cream); color: var(--ink); padding: 16vh 0; }
.exp-list { max-width: 1280px; margin: 7vh auto 0; padding: 0 16px; }
.exp-row { display: grid; grid-template-columns: 72px 1fr 1.3fr; gap: 24px; align-items: center; padding: 26px 0; border-top: 1.5px solid var(--ink); }
.exp-row:last-child { border-bottom: 1.5px solid var(--ink); }
.exp-ico { width: 60px; height: 60px; transition: transform .5s var(--n-out); }
.exp-ico svg { width: 100%; height: 100%; }
.exp-row:hover .exp-ico { transform: rotate(-14deg) scale(1.12); }
.exp-row h3 { font-family: var(--display); font-weight: 900; letter-spacing: -.04em; line-height: .92; font-size: clamp(28px, 3.4vw, 50px); }
.exp-row p { color: #444; margin-top: 4px; }
@media (max-width: 720px) { .exp-row { grid-template-columns: 52px 1fr; } .exp-row > div:last-child { grid-column: 1 / -1; } .exp-ico { width: 48px; height: 48px; } }

/* ---------- letter ---------- */
.letter { position: relative; z-index: 3; background: var(--ink); color: var(--cream); padding: 18vh 0 22vh; overflow: hidden; }
.letter .eyebrow { color: var(--lime); }
.envelope { position: relative; width: min(760px, calc(100% - 32px)); margin: 10vh auto 0; padding-top: 40px; perspective: 1400px; }
.env-back { position: absolute; left: 0; right: 0; bottom: 0; height: 300px; background: var(--orange); border: 1.5px solid var(--ink); border-radius: 18px; }
.paper { position: relative; z-index: 1; margin: 0 26px; background: var(--cream); color: var(--ink); border: 1.5px solid var(--ink); border-radius: 12px; padding: clamp(28px, 5vw, 60px); font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; will-change: transform; box-shadow: 0 30px 60px rgba(0,0,0,.25);
  background-image: repeating-linear-gradient(transparent 0 calc(1.55em - 1px), rgba(20,20,20,.08) calc(1.55em - 1px) 1.55em); background-position: 0 calc(clamp(28px, 5vw, 60px) - .3em); }
.paper p + p { margin-top: 1em; }
.paper p:first-of-type { font-family: var(--display); font-weight: 900; letter-spacing: -.03em; font-size: 1.5em; }
.paper .sign { font-family: var(--display); font-weight: 900; font-size: 1.6em; letter-spacing: -.03em; margin-top: 1.2em; }
.stamp { position: absolute; top: 22px; right: 22px; width: 76px; height: 86px; padding: 8px; background: var(--cream); transform: rotate(8deg); border: 1.5px dashed var(--ink); border-radius: 6px; }
.stamp svg { width: 100%; height: 100%; }
.env-front { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 240px; background: var(--orange); border: 1.5px solid var(--ink); border-radius: 0 0 18px 18px; clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px; color: var(--ink); font-weight: 700; font-size: 14px; will-change: transform, opacity; }
.env-flap { position: absolute; z-index: 3; left: 0; right: 0; bottom: 240px; height: 180px; background: #e85d2c; border: 1.5px solid var(--ink); clip-path: polygon(0 100%, 50% 0, 100% 100%); transform-origin: 50% 100%; will-change: transform; display: none; }

/* ---------- about & stickers ---------- */
.about { position: relative; z-index: 3; background: var(--cream); color: var(--ink); padding: 16vh 0 10vh; }
.stickers { position: relative; max-width: 1180px; margin: 8vh auto 0; padding: 0 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; }
.sticker { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px 12px 12px; background: var(--bg); border: 1.5px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 17px; transform: rotate(var(--r)); cursor: grab; user-select: none; touch-action: none; box-shadow: 0 6px 0 var(--ink); transition: box-shadow .2s; }
.sticker:active { cursor: grabbing; box-shadow: 0 12px 0 var(--ink); }
.sticker svg { width: 40px; height: 40px; flex: none; }
.drag-hint { text-align: center; margin-top: 22px; font-size: 14px; color: #666; }
.faq { max-width: 1000px; margin: 12vh auto 0; padding: 0 16px; }
.faq-item { border-top: 1.5px solid var(--ink); }
.faq-item:last-child { border-bottom: 1.5px solid var(--ink); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 0; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: clamp(22px, 2.4vw, 32px); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .pm { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--body); transition: transform .4s var(--n-out), background .3s; }
.faq-item[open] .pm { transform: rotate(45deg); background: var(--lime); }
.faq-item p { padding: 0 64px 28px 0; max-width: 70ch; color: #333; }

/* ---------- arrow sweep + footer ---------- */
.arrow-sweep { position: relative; z-index: 3; height: 60svh; background: var(--cream); overflow: hidden; display: flex; align-items: center; }
.sweep { width: 160vw; height: 36svh; flex: none; transform: translateX(100vw); will-change: transform; }
.home footer { position: relative; z-index: 3; background: var(--ink); }

/* Without motion, show the end states. */
@media (prefers-reduced-motion: reduce) {
  .hero { height: 100svh; } .intro { margin-top: 0; height: auto; } .intro-sticky { position: relative; opacity: 1; height: auto; padding: 16vh 16px; }
  .w > span { opacity: 1; } .w .ph { display: none; } .zoom { display: none; } .sweep { transform: none; width: 100%; }
}

/* Hero content starts below the nav so the headline never runs under it */
.hero-top { top: 96px; }

/* ---------- selected work: pinned showcase (each project gets a full screen of scroll) ---------- */
.sw { position: relative; height: calc(var(--n) * 100svh); }
.sw-pin { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: 190px minmax(0, 1.35fr) minmax(0, .95fr); grid-template-rows: minmax(0, 1fr) auto; gap: 20px 44px; align-items: center; max-width: 1440px; margin: 0 auto; padding: 92px 0 28px; }
.sw-index { grid-row: 1 / 3; align-self: center; list-style: none; display: grid; gap: 4px; }
.sw-index a { display: flex; gap: 10px; align-items: baseline; padding: 6px 0; font-size: 15px; color: rgba(253,249,240,.38); transition: color .4s, transform .5s var(--n-out); }
.sw-index a span { font: 600 11px var(--body); letter-spacing: .04em; width: 20px; }
.sw-index a:hover { color: rgba(253,249,240,.8); }
.sw-index a.on { color: var(--cream); transform: translateX(10px); }
.sw-index a.on span { color: var(--lime); }
.sw-stage { position: relative; height: min(68svh, 620px); border-radius: 28px; overflow: hidden; background: var(--ink-2); }
.sw-slide { position: absolute; inset: 0; background: var(--bg); opacity: 0; transform: scale(1.06); transition: opacity .7s var(--n-out), transform 1.4s var(--n-out); pointer-events: none; }
.sw-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.sw-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--n-out); }
.sw-slide:hover img { transform: scale(1.03); }
.sw-bar { position: absolute; z-index: 2; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--cream); }
.sw-info { position: relative; height: min(68svh, 620px); }
.sw-txt { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; opacity: 0; transform: translateY(26px); transition: opacity .5s var(--n-out), transform .8s var(--n-out); pointer-events: none; }
.sw-txt.on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .12s; }
.sw-txt h3 { font-size: clamp(46px, 5.4vw, 92px); line-height: .88; }
.sw-txt p { max-width: 34ch; color: rgba(253,249,240,.72); font-size: 17px; }
.sw-txt .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sw-txt .tags span { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(253,249,240,.25); font-size: 13px; }
.sw-link { align-self: flex-start; display: inline-flex; gap: 8px; align-items: center; padding: 11px 18px; border-radius: 999px; background: var(--lime); color: var(--ink); font-weight: 600; font-size: 15px; transition: border-radius .3s var(--n-out); }
.sw-link:hover { border-radius: 10px; }
.sw-count { grid-column: 2 / 4; justify-self: end; font-size: 14px; color: rgba(253,249,240,.5); }
.sw-count b { color: var(--cream); font-family: var(--display); font-weight: 900; }
.sw-list { display: none; }
@media (max-width: 900px) {
  .sw { display: none; }
  .sw-list { display: grid; gap: 56px; }
  .sw-card { display: grid; gap: 14px; }
  .sw-card-img { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--bg); }
  .sw-card-img img { width: 100%; height: 100%; object-fit: cover; }
  .sw-card h3 { font-size: clamp(40px, 11vw, 64px); line-height: .9; }
  .sw-card p { color: rgba(253,249,240,.72); }
}

/* ---------- letter: sealed until you open it ---------- */
.envelope { cursor: default; }
.envelope.is-closed { height: 340px; cursor: pointer; }
.envelope.is-closed .paper { max-height: 280px; overflow: hidden; transform: translateY(70px); box-shadow: none; }
.envelope.is-closed .stamp { transform: scale(0); }
.env-flap { display: block; top: 40px; bottom: auto; height: 170px; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; z-index: 4; border-radius: 18px 18px 0 0; }
.envelope.is-open .env-flap, .envelope.is-open .env-front, .envelope.is-open .env-back { display: none; }
.envelope.is-closed:hover .env-flap { transform: rotateX(18deg); transition: transform .4s var(--n-out); }
.env-open { display: flex; margin: 36px auto 0; }
.kitchen { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 30px; }
.kitchen svg { width: 42px; height: 42px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.paper { overflow: hidden; }

/* ---------- FAQ plus drawn with two bars, so it is exactly centred ---------- */
.faq-item .pm { position: relative; font-size: 0; }
.faq-item .pm::before, .faq-item .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; border-radius: 2px; background: currentColor; transform: translate(-50%, -50%); }
.faq-item .pm::after { transform: translate(-50%, -50%) rotate(90deg); }

/* No motion: selected work falls back to the plain list */
.no-motion .sw { display: none; }
.no-motion .sw-list { display: grid; gap: 56px; }
.sw-card { display: grid; gap: 14px; }
.sw-card-img { aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: var(--bg); }
.sw-card-img img { width: 100%; height: 100%; object-fit: cover; }
.sw-card h3 { font-size: clamp(40px, 6vw, 72px); line-height: .9; }
.sw-card p { color: rgba(253,249,240,.72); max-width: 40ch; }
/* Sealed envelope: the letter stays out of sight until it is opened */
.envelope.is-closed { overflow: hidden; }
.envelope.is-closed .paper { opacity: 0; }

/* Hero fits any window: the headline scales with height too, and the content keeps clear of the nav above
   and of the rising tiles below (they peek up by about half a tile). */
.h1 { font-size: clamp(48px, min(10vw, 15svh), 176px); }
.hero-top { top: 88px; bottom: calc(min(18.4vw, 300px) * .5 + 28px); }
.hero-desc { margin: clamp(14px, 2.6svh, 26px) 0 clamp(12px, 2.2svh, 22px); }

/* ---------- One content width for every section ----------
   Every section has the same 16px gutter, and everything inside lines up to one 1280px column,
   so headings, grids and lists start at the same left edge all the way down the page. */
.about-read, .work, .brand, .stats, .exp, .letter, .about { padding-left: 16px; padding-right: 16px; }
.about-read > *, .work-head, .sw-pin, .sw-list, .sec-head, .grid, .stats-grid, .exp-list, .stickers, .faq {
  width: 100%; max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0;
}
.stickers { justify-content: flex-start; }
.stats .stats-grid { max-width: 1280px; }

/* ---------- letter, take two: the top of the letter peeks out of an open envelope ----------
   Closed: the envelope is 440px tall, the flap is folded up behind the paper, and the pocket covers all but
   the top of the letter (drawings, "Dear me," and the stamp). Open: the envelope drops away. */
.envelope.is-closed, .envelope.is-closing { height: 440px; overflow: hidden; cursor: default; }
.envelope.is-closed .paper, .envelope.is-closing .paper { opacity: 1; max-height: 400px; transform: none; box-shadow: 0 -10px 30px rgba(0,0,0,.18); cursor: pointer; transition: transform .5s var(--n-out); }
.envelope.is-closed .paper:hover { transform: translateY(-14px); }
.envelope.is-closed .stamp, .envelope.is-closing .stamp { transform: rotate(8deg); }
.envelope.is-closed .env-flap, .envelope.is-closing .env-flap { top: 140px; z-index: 0; transform: rotateX(180deg); }
.envelope.is-closed:hover .env-flap { transform: rotateX(180deg); }
.envelope.is-closing .env-front, .envelope.is-closing .env-back, .envelope.is-closing .env-flap { display: block; }
.env-open { display: flex; }

/* The narrower 1120px column the About text used, now shared by every section */
.about-read > *, .work-head, .sw-pin, .sw-list, .sec-head, .grid, .stats-grid, .exp-list, .stickers, .faq, .stats .stats-grid { max-width: 1120px; }
.sw-pin { grid-template-columns: 170px minmax(0, 1.3fr) minmax(0, .95fr); gap: 20px 36px; }

/* Branding cards: no outline */
.g-card { border: 0; }
/* The zoom transition is the Branding heading now, so the section opens straight on its intro */
.brand .sec-head { padding-top: 6vh; }
.letter-lead { max-width: 46ch; margin-top: 26px; color: rgba(253,249,240,.72); font-size: 18px; }

/* Footer fits on one screen */
.home footer { min-height: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 88px 16px 24px; }
.home footer h2 { font-size: clamp(56px, min(13vw, 18svh), 220px); }
.home footer .mini-tiles { margin-bottom: clamp(16px, 4svh, 40px); }
.home footer .btn { margin-top: clamp(18px, 4svh, 40px); }
.home footer .foot { margin-top: auto; width: 100%; max-width: 1120px; padding-top: 24px; }

/* ---------- letter, take three: a cleaner envelope ----------
   A darker back panel, a straight-edged pocket with a lime seal, no notched flap. "Open the letter" sits on the
   envelope and appears when you hover it (always shown on touch screens). */
.env-flap { display: none !important; }
.env-back { height: 300px; background: #E2582A; border: 0; border-radius: 20px; }
.env-front { height: 250px; clip-path: none; border: 0; border-radius: 20px; background: var(--orange); box-shadow: 0 -12px 30px rgba(20,20,20,.18); padding-bottom: 22px; flex-direction: column; justify-content: flex-end; gap: 10px; }
.env-front .seal { position: absolute; left: 50%; top: -26px; width: 52px; height: 52px; transform: translateX(-50%) rotate(-8deg); }
.env-front .seal svg { width: 100%; height: 100%; }
.envelope.is-closed .paper, .envelope.is-closing .paper { box-shadow: 0 -6px 24px rgba(0,0,0,.2); }
.envelope.is-closed .env-open, .envelope.is-closing .env-open { position: absolute; z-index: 5; left: 50%; bottom: 96px; margin: 0; opacity: 0; transform: translate(-50%, 10px); transition: opacity .3s, transform .4s var(--n-out); }
.envelope.is-closed:hover .env-open, .envelope.is-closed .env-open:focus-visible { opacity: 1; transform: translate(-50%, 0); }
@media (hover: none) { .envelope.is-closed .env-open { opacity: 1; transform: translate(-50%, 0); } }
.envelope.is-open .env-open { position: static; margin: 32px auto 0; opacity: 1; transform: none; }
.envelope.is-closing .env-open { opacity: 0; }
.kitchen { gap: 10px; }
.k-tile { width: 46px; height: 46px; border-radius: 14px; background: var(--kc); color: var(--ink); display: grid; place-items: center; }
.k-tile:nth-child(2) { border-radius: 50%; }
.k-tile:nth-child(4) { border-radius: 50%; }
.k-tile svg { width: 30px; height: 30px; fill: none; stroke: none; }
.env-front { height: 200px; align-items: center; text-align: center; }
.envelope.is-closed .env-open, .envelope.is-closing .env-open { bottom: 70px; }

/* Stickers as physics pieces: a fixed play area; each sticker is placed by the physics loop */
.stickers.physics { position: relative; display: block; height: 460px; cursor: grab; touch-action: pan-y; }
.stickers.physics:active { cursor: grabbing; }
.stickers.physics .sticker { position: absolute; left: 0; top: 0; transform: translate(-9999px, 0); white-space: nowrap; will-change: transform; box-shadow: 0 6px 0 var(--ink); user-select: none; }
.stickers.physics .sticker.live { cursor: inherit; }
@media (max-width: 760px) { .stickers.physics { height: 640px; } .stickers.physics .sticker { white-space: normal; max-width: 300px; } }
@media (max-width: 760px) {
  .stickers.physics { height: 780px; }
  .stickers.physics .sticker { max-width: 250px; font-size: 14px; padding: 9px 16px 9px 9px; gap: 9px; }
  .stickers.physics .sticker svg { width: 30px; height: 30px; }
}

/* Experience reads as a climb: "Now" at the top, "Start" at the bottom */
.exp-mark { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 4px 11px; border-radius: 999px; font: 600 12px var(--body); letter-spacing: .02em; transform: translateY(-.2em); }
.is-now .exp-mark { background: var(--lime); color: var(--ink); }
.is-start .exp-mark { background: var(--ink); color: var(--cream); }

/* Zoom transition: one sentence on why I work beyond UX/UI, before the Branding heading arrives */
.zoom-label.why { font-size: clamp(30px, 4.4vw, 68px); line-height: 1.02; letter-spacing: -.03em; max-width: 19ch; padding: 0 16px; }
.brand .sec-head { padding-top: 10vh; }

/* Numbers: no rules between them */
.stats .stat { border-top: 0; padding-top: 0; }

/* FAQ: lines only between questions */
.faq-item:first-child { border-top: 0; }
.faq-item:last-child { border-bottom: 0; }

/* Footer: the bottom line sits close under the email, the whole footer still fits one screen */
.home footer { height: auto; min-height: 0; padding: 16vh 16px 28px; }
.home footer .foot { margin-top: clamp(56px, 10svh, 96px); }

/* Stickers: a lower play area so the pile stays compact */
.stickers.physics { height: 330px; }
@media (max-width: 760px) { .stickers.physics { height: 600px; } }

/* Intros under a two-line heading line up with the heading's indented second line */
.sec-head .slide-heading + .sec-intro { margin-left: calc(.9 * clamp(52px, 9vw, 150px)); }


/* ---------- The letter ----------
   Flat, in the site's own colours: an orange envelope, a lime star seal, a cream sheet. No shading, no props.
   Opening: the seal pops, the flap lifts, the sheet slides out, then the envelope drops away and the sheet
   settles as a full page. Motion lives in home.js; without it the classes simply swap. */
.lt { position: relative; }
.lt-env { position: relative; width: min(520px, calc(100% - 32px)); aspect-ratio: 560 / 350; margin: 18vh auto 0; transform: rotate(-2deg); perspective: 1600px; cursor: pointer; transition: transform .6s var(--n-out); }
.lt.is-closed .lt-env:hover { transform: rotate(0deg) translateY(-8px); }
.lt-inside { position: absolute; inset: 0; background: #E85D2C; border-radius: 18px; }
.lt-peek { position: absolute; z-index: 1; left: 7%; right: 7%; top: 6%; height: 88%; background: var(--cream); color: var(--ink); border-radius: 12px; padding: 7% 8%; }
.lt-peek b { display: block; font-weight: 900; font-size: clamp(30px, 7vw, 52px); letter-spacing: -.04em; line-height: .9; }
.lt-pocket { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; clip-path: inset(0 round 18px); }
.lt-pocket path { fill: var(--orange); }
.lt-flap { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 57.2%; transform-origin: 50% 0; clip-path: inset(0 round 18px 18px 0 0); }
.lt-flap path { fill: var(--orange); stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.lt-seal { position: absolute; z-index: 4; left: 50%; top: 54%; width: 17%; aspect-ratio: 1; translate: -50% -50%; }
.lt-seal svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* The sheet, read in full */
.lt.is-closed .lt-sheet { display: none; }
.lt.is-open .lt-env { display: none; }
.lt-sheet { position: relative; width: min(700px, calc(100% - 32px)); margin: 12vh auto 0; background: var(--cream); color: var(--ink); border-radius: 20px; padding: clamp(28px, 6vw, 72px) clamp(24px, 6.5vw, 80px) clamp(32px, 6vw, 64px); }
.lt-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; font: 600 11px/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(20,20,20,.5); }
.lt-hello { margin: clamp(36px, 6vw, 60px) 0 clamp(22px, 3vw, 32px); font-weight: 900; font-size: clamp(52px, 7.6vw, 92px); letter-spacing: -.045em; line-height: .88; }
.lt-body p { max-width: 56ch; font: 500 clamp(17px, 1.45vw, 19px)/1.66 var(--body); }
.lt-body p + p { margin-top: 1.05em; }
.lt-close { margin: 1.3em 0 0; font-weight: 900; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.035em; line-height: 1; }
.lt-sign { margin: 10px 0 0 -6px; }
.lt-sign img { display: block; width: clamp(180px, 30vw, 260px); height: auto; mix-blend-mode: multiply; }
.lt-sign figcaption { margin: 10px 0 0 6px; font: 600 11px var(--body); letter-spacing: .12em; text-transform: uppercase; color: rgba(20,20,20,.5); }
/* The button sits under the envelope; once open it rides along the bottom of the screen so closing is always in reach */
.lt-btn { display: flex; margin: 44px auto 0; width: max-content; position: relative; z-index: 5; }
.lt.is-open .lt-btn { position: sticky; bottom: 24px; margin-top: 32px; }
/* overflow: clip (not hidden) so the sticky close button can stick inside the section */
.letter { overflow: clip; }

/* Experience: lines only between roles, none above the first or below the last */
.exp-row:first-child { border-top: 0; }
.exp-row:last-child { border-bottom: 0; }

/* ---------- Slimmer second half ---------- */
/* On the side: one row of three text links under the branding grid */
.side-row { max-width: 1120px; margin: 14vh auto 0; }
.side-row ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 24px; }
.side-row a { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 12px; padding: 18px 0; border-top: 1.5px solid var(--ink); color: var(--ink); }
.side-row small { grid-column: 1 / -1; font-size: 13px; color: #555; }
.side-row b { font-family: var(--display); font-weight: 900; letter-spacing: -.03em; font-size: clamp(22px, 2.2vw, 30px); line-height: 1; }
.side-row em { font-style: normal; font-size: 22px; transition: transform .3s var(--n-out); }
.side-row a:hover em { transform: translateX(6px); }
@media (max-width: 760px) { .side-row ul { grid-template-columns: 1fr; } }
/* Experience: tighter rows */
.exp-row { padding: 18px 0; }
.exp-row h3 { font-size: clamp(24px, 2.6vw, 38px); }
.exp { padding-bottom: 12vh; }
/* One spacing rhythm for the second half: sections breathe, but no screen-tall gaps */
.brand { padding-bottom: 10vh; }
.side-row { margin-top: 10vh; }
.exp { padding-top: 8vh; padding-bottom: 10vh; }
.exp-list { margin-top: 5vh; }
.letter { padding-top: 12vh; padding-bottom: 14vh; }
.lt-env { margin-top: 10vh; }
.lt-sheet { margin-top: 8vh; }
.about { padding-top: 12vh; }
/* More work: four links under the showcase */
.more-row { margin: 10vh auto 0; padding: 0 16px; }
.more-row ul { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .more-row ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .more-row ul { grid-template-columns: 1fr; } }
/* On the dark work section the links are light */
.more-row { padding: 0; }
.more-row a { color: var(--cream); border-top-color: rgba(253,249,240,.35); }
.more-row small { color: rgba(253,249,240,.6); }
.more-row .eyebrow { color: var(--lime); }

/* ---------- Ask ---------- */
.nav .ask-pill { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: var(--cream); font: 500 14px var(--body); cursor: pointer; transition: background .2s, border-color .2s; }
.nav .ask-pill:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); }
.nav .ask-pill span { color: var(--lime); }
.nav .ask-pill kbd { font: 600 11px var(--body); padding: 2px 6px; border-radius: 6px; background: rgba(255,255,255,.12); color: rgba(251,246,238,.8); }
@media (max-width: 640px) { .nav .ask-pill kbd { display: none; } }
.askp { position: fixed; inset: 0; z-index: 200; }
.askp-veil { position: absolute; inset: 0; background: rgba(10,10,10,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.askp-pal { position: absolute; left: 50%; top: min(14vh, 120px); width: min(640px, calc(100% - 24px)); translate: -50% 14px; opacity: 0; transition: opacity .3s, translate .45s var(--n-out); background: var(--cream); color: var(--ink); border-radius: 22px; padding: 12px; display: grid; gap: 12px; }
.askp.on .askp-veil { opacity: 1; }
.askp.on .askp-pal { opacity: 1; translate: -50% 0; }
.askp-in { display: flex; align-items: center; gap: 10px; padding: 7px 7px 7px 10px; border-radius: 999px; background: #fff; }
.askp-star { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--lime); font-size: 14px; }
.askp-in input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 500 16px var(--body); color: var(--ink); }
.askp-in button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: var(--ink); color: var(--lime); font-size: 18px; cursor: pointer; }
.askp-log { display: flex; flex-direction: column; gap: 14px; max-height: min(50vh, 380px); overflow: auto; padding: 0 8px; }
.askp-log:empty { display: none; }
.askp-q { align-self: flex-end; max-width: 85%; background: var(--ink); color: var(--cream); padding: 9px 15px; border-radius: 18px 18px 4px 18px; font-size: 15px; }
.askp-a p { font-size: 16px; line-height: 1.55; }
.askp-a .typing::after { content: "▍"; animation: askp-blink 1s steps(1) infinite; margin-left: 2px; }
@keyframes askp-blink { 50% { opacity: 0; } }
.askp-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.askp-src a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 6px; border-radius: 999px; background: #fff; border: 1px solid rgba(20,20,20,.18); font-size: 13px; color: var(--ink); }
.askp-src a:hover { border-color: var(--ink); }
.askp-src i { width: 16px; height: 16px; border-radius: 5px; background: var(--c); }
.askp-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.askp-chips[hidden] { display: none; }
.askp-chips button { padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(20,20,20,.22); background: transparent; color: var(--ink); font: 500 14px var(--body); cursor: pointer; }
.askp-chips button:hover { border-color: var(--ink); }
.askp-foot { display: flex; justify-content: space-between; gap: 12px; padding: 2px 8px 4px; font-size: 12px; color: #777; }
@media (max-width: 640px) { .askp-foot span:last-child { display: none; } }
/* Where the FAQ was */
.ask-cta { max-width: 1120px; margin: 10vh auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding-top: 28px; border-top: 1.5px solid var(--ink); }
.ask-cta p { font-weight: 900; letter-spacing: -.04em; font-size: clamp(32px, 4vw, 56px); line-height: 1; }
.nav .cta, .nav .ask-pill { white-space: nowrap; }
/* Send: a quiet key hint instead of a heavy round button; it wakes up once there's a question */
.askp-in button.askp-go { width: auto; height: 30px; padding: 0 10px; border-radius: 8px; background: rgba(20,20,20,.06); color: rgba(20,20,20,.5); font: 600 12px var(--body); letter-spacing: .02em; transition: background .2s, color .2s; }
.askp-in:focus-within button.askp-go { color: rgba(20,20,20,.7); }
.askp-in input:not(:placeholder-shown) + button.askp-go { background: var(--lime); color: var(--ink); }
.askp-in { padding-right: 10px; }

/* ---------- Work on the first screen ---------- */
.hero-work { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 34px; max-width: 760px; margin-left: auto; margin-right: auto; }
.hero-work a { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; border-radius: 999px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); color: var(--cream); text-align: left; transition: background .25s, border-color .25s, transform .3s var(--n-out); }
.hero-work a:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); transform: translateY(-2px); }
.hero-work img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.hero-work b { display: block; font-size: 14px; font-weight: 600; line-height: 1.15; }
.hero-work small { display: block; font-size: 12px; color: rgba(251,246,238,.6); }
.hero-work .hw-all { padding: 0 16px; background: var(--lime); border-color: var(--lime); color: var(--ink); font-weight: 600; font-size: 14px; }
.hero-work .hw-all b { display: inline; }
@media (max-width: 640px) {
  .hero-work { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 24px; }
  .hero-work a { padding-right: 10px; }
  .hero-work img { width: 36px; height: 36px; }
  .hero-work .hw-all { grid-column: 1 / -1; justify-content: center; height: 44px; }
}
/* A shorter run-up: the sentence and the about text take less scroll before the showcase */
.intro { height: 210svh; }
.about-read { padding-top: 14vh; padding-bottom: 14vh; }

/* ---------- Recognition ---------- */
.recog { position: relative; z-index: 3; background: var(--cream); color: var(--ink); padding: 4vh 16px 12vh; }
.rc-grid { list-style: none; max-width: 1120px; margin: 5vh auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rc { position: relative; min-height: 190px; padding: 22px 22px 26px; border-radius: 22px; background: var(--bg); color: var(--ink); display: flex; flex-direction: column; gap: 10px; transition: transform .4s var(--n-out); }
.rc:hover { transform: rotate(-1.5deg) translateY(-4px); }
.rc small { align-self: flex-start; padding: 4px 11px; border-radius: 999px; background: var(--ink); color: var(--cream); font: 600 12px var(--body); letter-spacing: .02em; }
.rc b { margin-top: auto; max-width: 16ch; font-family: var(--display); font-weight: 900; letter-spacing: -.035em; line-height: .95; font-size: clamp(24px, 2.4vw, 34px); }
.rc-year { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 62px; height: 62px; font: 700 12px var(--body); color: var(--ink); background: var(--cream); clip-path: polygon(50% 0, 61% 14%, 79% 9%, 82% 27%, 98% 35%, 89% 50%, 98% 65%, 82% 73%, 79% 91%, 61% 86%, 50% 100%, 39% 86%, 21% 91%, 18% 73%, 2% 65%, 11% 50%, 2% 35%, 18% 27%, 21% 9%, 39% 14%); rotate: 8deg; }
@media (max-width: 900px) { .rc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .rc-grid { grid-template-columns: 1fr; } .rc { min-height: 150px; } }
.foot-cv { display: inline-block; margin-top: 18px; font-size: 15px; color: rgba(251,246,238,.75); text-decoration: underline; text-underline-offset: 4px; }
.foot-cv:hover { color: var(--cream); }
@media (max-width: 640px) { .nav a.link { padding: 8px 9px; } }
@media (min-width: 961px) { .more-row small { min-height: 2.8em; } .more-row a { align-items: start; } }

/* ---------- Scroll story, after the reference ----------
   The sentence builds line by line while the leftover tiles drift down out of its way, holds, then ribbons sweep
   across and leave on the dark about section, whose words light up while it stays pinned. Timing lives in home.js. */
.intro { height: 350svh; }
.intro-lines { font-size: clamp(32px, 5.6vw, 96px); }
.bands { position: absolute; inset: 0; z-index: 3; visibility: hidden; display: grid; grid-template-rows: repeat(4, 1fr); overflow: hidden; pointer-events: none; }
.bands i { display: block; width: calc(100% + 14vh); background: var(--c); clip-path: polygon(0 0, calc(100% - 12vh) 0, 100% 50%, calc(100% - 12vh) 100%, 0 100%); will-change: transform; }
.about-read { padding-top: 0; padding-bottom: 0; height: 230svh; }
.read-pin { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .bands { display: none; }
  .about-read { height: auto; } .read-pin { position: relative; height: auto; padding: 16vh 0; }
}
/* The about section slides in under the ribbons: it overlaps the end of the sentence scene, stays see-through
   while the ribbons run, and turns on (dark, text visible) the moment they have left. */
.about-read { margin-top: -100svh; background: transparent; pointer-events: none; transition: background-color .2s; }
.about-read .read-pin { opacity: 0; transition: opacity .45s var(--n-out); }
.about-read.on { background: var(--ink); pointer-events: auto; }
.about-read.on .read-pin { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .about-read { margin-top: 0; background: var(--ink); } .about-read .read-pin { opacity: 1; } }

/* ---------- Short browser windows ----------
   Most people browse in a window, not full screen, so the hero tiles also cap at a share of the window's height.
   The same size drives the cluster the sentence starts from (home.js tileSize) and the headline's free space. */
.hero-icons { --t: min(18.4vw, 300px, 28svh); }
.intro-from { --t: calc(min(18.4vw, 300px, 28svh) * .28); }
.hero-top { bottom: calc(min(18.4vw, 300px, 28svh) * .5 + 28px); }

/* Hand-over ribbons, take two: arrows, arcs, then rounded bars (positions are set in home.js) */
.intro { height: 400svh; }
.bands { display: block; }
.bands i { position: absolute; display: block; background: var(--c); will-change: transform; }
.bands .ch { left: 0; width: calc(100% + 16vh); height: 33.4%; clip-path: polygon(0 0, calc(100% - 16vh) 0, 100% 50%, calc(100% - 16vh) 100%, 0 100%); }
.bands .ch:nth-child(1) { top: 0; } .bands .ch:nth-child(2) { top: 33.3%; } .bands .ch:nth-child(3) { top: 66.6%; }
.bands .ring { width: 180vh; height: 180vh; left: calc(10vw - 90vh); top: 10vh; border-radius: 50%; background: none; border: 30vh solid transparent; border-top-color: var(--c); border-right-color: var(--c); }
.bands .ring.r2 { width: 110vh; height: 110vh; left: calc(10vw - 55vh); top: 45vh; border-width: 22vh; }
.bands .pl { left: -4vw; width: 108vw; height: 33.4%; border-radius: 17vh; }
.bands .pl:nth-of-type(6) { top: 0; } .bands .pl:nth-of-type(7) { top: 33.3%; } .bands .pl:nth-of-type(8) { top: 66.6%; }

/* ---------- Tighter scroll ----------
   Same scenes, less scrolling: the hero gathers in 1.1 screens (home.js), the sentence and its ribbons in about two,
   the about paragraph and the "why" zoom in well under a screen each, and each showcase project in 85% of one. */
.hero { height: 240svh; }
.intro { height: 310svh; margin-top: -130svh; }
.about-read { height: 170svh; }
.zoom { height: 160svh; }
.sw { height: calc(var(--n) * 85svh); }
@media (prefers-reduced-motion: reduce) { .hero { height: 100svh; } .intro { margin-top: 0; height: auto; } .about-read { height: auto; } }