/* About · desktop 1280 / mobile 390.
   Desktop blocks sit in the centred 1120 column; x values are Figma x - 80, y values are
   relative to their section top (hero 0, letter 720, taste 1479). Mobile is a single flow
   (Figma "Content" auto layout: 16px gutters, 48px between blocks). */

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.a-hero { position: relative; height: 720px; }
.a-hero__bg { position: absolute; inset: 0 0 auto 0; height: 720px; overflow: hidden; pointer-events: none; }
.a-hero__pattern {
  position: absolute; left: 50%; top: -1px;
  width: max(1280px, 100vw); height: auto; aspect-ratio: 1280 / 720.21; max-width: none;
  transform: translateX(-50%);
}
.a-hero__glow {
  position: absolute; left: calc(50% - 677px); top: -289px;
  width: 1277px; height: 1277px;
  border-radius: 50%; background: #fff; filter: blur(50px);
}
.a-hero__inner {
  position: relative;
  width: min(1120px, calc(100% - 160px)); height: 720px; margin-inline: auto;
}
.a-hero__inner > * { position: absolute; }

.a-photo {
  right: 2px; top: 127px; width: 358px; height: 358px;
  border-radius: 22.02px; overflow: hidden; background: #c6ff5e;
}
.a-photo img { width: 100%; height: 100%; object-fit: cover; }

.a-socials { left: 12px; top: 127px; display: flex; flex-direction: column; align-items: flex-start; gap: 19px; }
.a-socials a { font-size: 12px; line-height: 15px; color: #6b6b6b; transition: color 160ms; }
.a-socials a:hover { color: #000; }

.a-intro { left: 12px; top: 250px; width: 469px; color: #000; }
.a-intro__title { font-size: 32px; line-height: 33.28px; color: #000; white-space: nowrap; }
.a-intro__lede { margin-top: 12.72px; font-size: 12px; line-height: 15px; }
.a-intro__p, .a-intro__list li { font-size: 12px; line-height: 19px; letter-spacing: -0.13px; }
.a-intro__offline { margin-top: 10.5px; }
.a-intro__list { margin-top: 2px; }
.a-intro__list li { position: relative; padding-left: 17.5px; }
.a-intro__list li::before {
  content: ''; position: absolute; left: 7.5px; top: 8px;
  width: 2px; height: 2px; border-radius: 50%; background: currentColor;
}
.a-intro__reach { width: 365px; margin-top: 8px; line-height: 18.29px; }

.a-tags { left: 12px; top: 492px; display: flex; flex-wrap: wrap; gap: 12px; }
.a-tags li {
  height: 23px; min-width: var(--w, 0); padding: 4px 6px; text-align: center;
  border-radius: 999px; background: var(--surface);
  font-size: 12px; line-height: 15px; color: #000; white-space: nowrap;
}

/* testimonials */
.a-quotes { left: -9px; top: 560px; width: 656px; height: 143px; }
.a-quote { position: absolute; top: 9px; width: 263px; margin: 0; }
.a-quote:nth-child(1) { left: 20px; }
.a-quote:nth-child(2) { left: 312px; }
.a-quote__avatar { width: 48px; height: 48px; border-radius: 12px; background: #d9d9d9; }
.a-quote__text { margin: 22px 0 0; font-size: 11px; line-height: 13.4px; color: #000; }
.a-quote__text b { font-weight: 500; }
.a-quotes__fade { position: absolute; top: 0; height: 143px; pointer-events: none; }
.a-quotes__fade--l { left: 0; width: 184px; background: linear-gradient(72.43deg, #fff 22.94px, rgba(255, 255, 255, 0) 157.87px); }
.a-quotes__fade--r { left: 312px; width: 273px; background: linear-gradient(-64.83deg, #fff 32.31px, rgba(255, 255, 255, 0) 222.37px); }

/* tool list: a slow vertical ticker, the middle row is "on" */
.a-tools { right: 14px; top: 533px; width: 340px; height: 186px; overflow: hidden; --row: 54px; --gap: 12px; }
.a-tools__list { display: flex; flex-direction: column; gap: var(--gap); will-change: transform; }
.a-tools__list.is-moving { transition: transform 360ms var(--ease); }
.a-tools { touch-action: pan-x pinch-zoom; }
.a-tools:focus { outline: none; }
.a-tools:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.tool {
  position: relative; flex: none;
  height: var(--row); border-radius: 14px; background: var(--surface-3);
  opacity: 0.45; transition: opacity 360ms var(--ease);
}
.tool.is-active { opacity: 1; }
.a-tools__list.no-anim .tool { transition: none; }
.a-tools__list.is-gliding .tool { transition: none; } /* opacity is driven per frame by about.js */
.tool img { position: absolute; left: 5px; top: 4px; width: 45px; height: 45px; border-radius: 9px; }
.tool b, .tool span { position: absolute; left: 60px; white-space: nowrap; font-size: 12px; line-height: 19px; letter-spacing: -0.13px; }
.tool b { top: 6px; font-weight: 500; color: #000; }
.tool span { top: 25px; color: #555; }
.a-tools__fade { position: absolute; left: 0; width: 100%; pointer-events: none; }
.a-tools__fade--t { top: -14px; height: 80px; background: linear-gradient(176.69deg, #fff 10.44px, rgba(255, 255, 255, 0) 71.88px); }
.a-tools__fade--b { top: 120px; height: 77px; background: linear-gradient(3.19deg, #fff 10.05px, rgba(255, 255, 255, 0) 69.19px); }

/* ------------------------------------------------------------------
   Letter + envelope
   ------------------------------------------------------------------ */
.a-letter { position: relative; height: 759px; }
.envelope { position: absolute; left: calc(50% - 244px); top: 0; width: 487px; height: 704.4px; }
.envelope > *, .envelope__scale > *, .envelope__front > * { position: absolute; max-width: none; }
/* the paper, inside and pocket scale together (envelope-field.js), as does the button; both wrappers fill the box and
   scale around its centre, so the button keeps its place on the envelope */
.envelope__scale, .envelope__cta { inset: 0; transform-origin: 50% 50%; }
.envelope__cta { pointer-events: none; z-index: 3; }
.envelope__cta > * { pointer-events: auto; }
/* live pixel envelope (envelope-field.js): unscaled canvases behind and in front of the paper; once the first frame is
   drawn the static band and pocket art step aside (they stay as the fallback) */
.env-canvas { image-rendering: pixelated; pointer-events: none; }
.env-canvas--front { z-index: 2; }
.envelope.is-live .envelope__back, .envelope.is-live .envelope__art { visibility: hidden; }
/* the zoom into the letter (about.js): everything but the envelope blurs back */
.site-header, .m-header, .a-hero, .a-taste, .site-footer { transition: filter 550ms cubic-bezier(.65, 0, .35, 1), opacity 550ms cubic-bezier(.65, 0, .35, 1); }
html.is-env-zoom .site-header, html.is-env-zoom .m-header, html.is-env-zoom .a-hero, html.is-env-zoom .a-taste, html.is-env-zoom .site-footer { filter: blur(8px); opacity: 0.6; }
.envelope__front > picture { display: contents; }   /* desk/mobile-only art wrappers: the img is the positioned item */
.envelope__front > picture > img { position: absolute; max-width: none; }
.envelope__back { left: 0.19px; top: 185px; width: 486.85px; height: 195.23px; }
.envelope__inner { left: 12.83px; top: 204.89px; width: 462.7px; height: 325.7px; }
.envelope__letter { left: 29px; top: 161px; transition: transform 500ms var(--ease); }
.envelope__front { left: 0; top: 368.44px; width: 486.9px; height: 335.92px; }
.envelope__pocket { left: 0; top: 0; width: 487px; height: 330px; }
.envelope__art { left: 0; top: 0; width: 486.9px; height: 333.93px; }
/* "Read letter" is the shared Button, centred where the Figma pill sits (188 + 110/2) */
.envelope__open { position: absolute; left: 243px; top: 514px; translate: -50% 0; }   /* front top 368.44 + 145.56 */
.envelope:has(.envelope__open:hover) .envelope__letter { transform: translateY(-10px); }
/* "Read letter" (this button only): an ink pill without the arrow. Hover / focus / press: the letters roll up one by
   one and land back in place (a white copy rides below each); the pill stays black and the text white throughout.
   Reduced motion: no roll. */
.read-btn { padding: 5px 24px; }
.read-btn .abtn__label { padding: 0; }
.read-btn__word { display: flex; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.read-btn__word i { display: block; font-style: normal; text-shadow: 0 1.25em currentColor; transition: transform 380ms var(--ease-b) calc(var(--i) * 22ms); }
.read-btn:hover, .read-btn:active, .read-btn:focus-visible { background-color: var(--bg); }
.read-btn:hover .abtn__label, .read-btn:active .abtn__label { transform: none; }
@media (hover: hover) { .read-btn:hover .read-btn__word i { transform: translateY(-1.25em); } }
.read-btn:focus-visible .read-btn__word i, .read-btn:active .read-btn__word i { transform: translateY(-1.25em); }
@media (prefers-reduced-motion: reduce) {
  .read-btn__word i { transition: none; transform: none !important; }
}
.envelope.is-live:has(.envelope__open:hover) .envelope__letter { transform: none; }   /* live: envelope-field.js lifts it */
.envelope.is-empty .envelope__letter { visibility: hidden; }

.letter {
  position: relative;
  width: 429px; height: 541px;
  background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft);
  overflow: hidden; color: #000;
}
.letter__mark { position: absolute; left: 357.86px; top: 13.9px; width: 54px; height: 54px; }
.letter__hi { position: absolute; left: 36px; top: 51px; font-size: 20px; line-height: 20.8px; font-weight: 500; white-space: nowrap; }
.letter__body { position: absolute; left: 36px; top: 93px; width: 358px; font-size: 14px; line-height: 17px; }
.letter__body p + p { margin-top: 17px; }
/* in the envelope the copy fades out (Figma text fill #3A3A3A → transparent over the 323px box) */
.envelope__letter .letter__body {
  color: transparent;
  background: linear-gradient(#3a3a3a, rgba(0, 0, 0, 0) 323px) 0 0 / 100% 323px no-repeat;
  -webkit-background-clip: text; background-clip: text;
}
.letter--open { box-shadow: inset 0 0 0 1px var(--line-soft), 0 20px 50px rgba(0, 0, 0, 0.22); }
.letter--open .letter__body { color: rgba(18, 18, 18, 0.85); }

/* ------------------------------------------------------------------
   My Taste
   ------------------------------------------------------------------ */
.a-taste { position: relative; width: min(1120px, calc(100% - 160px)); height: 100px; margin-inline: auto; }   /* ends at the More button (the footer margin is the gap) */
.a-taste__title { position: absolute; left: -9px; top: 12px; display: flex; align-items: flex-start; }
.a-taste__title img { width: 56.85px; height: 35.76px; margin-top: 6px; }
.a-taste__title > span { margin-left: 8.15px; font-size: 48px; line-height: 46.08px; font-weight: 500; font-style: italic; letter-spacing: -0.01em; color: #000; white-space: nowrap; }
.a-taste__text { position: absolute; right: -9px; top: 0; width: 349px; font-size: 16px; line-height: 24px; color: #212833; }
.a-taste__btn { position: absolute; left: calc(100% - 347px); top: 58px; }
/* The hold (≥1024px with motion, like Home 06): the letter + My Taste stick together, the envelope centred and
   the My Taste CTA 136px from the bottom (Home's CTA band); when both can't fit, the CTA wins, as on Home.
   The run after the stage = the CTA entrance (30vh) + the dead zone (45vh, shorter than Home's 81vh) + the release
   (--hold-r = the footer gap, moved here from the footer's margin by about.js, so the footer ends up where it was). */
@media (min-width: 1024px) {
  .js.motion .a-hold__stage { position: sticky; top: min(calc(50 * var(--vh) - 352.2px), calc(100 * var(--vh) - 136px - 759px)); }
  .js.motion .a-hold__run { height: calc(75 * var(--vh) + var(--hold-r, 174px)); }   /* E 30 + D 45 (about.js) */
  .js.motion .footer--about.is-after-hold { margin-top: 0; }
}


/* ------------------------------------------------------------------
   Letter dialog
   ------------------------------------------------------------------ */
.letter-dialog {
  position: fixed; inset: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent; overflow: auto; overscroll-behavior: contain;
  color: inherit;
}
.letter-dialog::backdrop { background: transparent; }
.letter-dialog__scrim { position: fixed; inset: 0; background: rgba(18, 18, 18, 0.55); }
.letter-dialog__wrap {
  position: relative;
  width: 429px; margin: max(24px, calc(calc(50 * var(--dvh)) - 270px)) auto 24px;
  left: 0.5px; /* Figma centres the 429px letter at x 426 */
}
.letter-dialog__close {
  position: absolute; left: 445px; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #111;
  transition: transform 160ms var(--ease);
}
.letter-dialog__close svg { width: 44px; height: 44px; }
.letter-dialog__close:hover { transform: rotate(90deg); }
.letter-dialog__close:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
.letter-dialog .letter:focus { outline: none; }
html.is-locked { overflow: hidden; }

/* open / close motion (JS animates the letter out of the envelope; this is the no-FLIP fallback) */
.letter-dialog[open] .letter-dialog__scrim { animation: ld-fade 280ms var(--ease) both; }
.letter-dialog[open] .letter-dialog__close { animation: ld-pop 360ms 160ms var(--ease) both; }
.letter-dialog.is-closing .letter-dialog__scrim { animation: ld-fade 240ms var(--ease) reverse both; }
.letter-dialog.is-closing .letter-dialog__close { animation: ld-fade 160ms var(--ease) reverse both; }
@keyframes ld-fade { from { opacity: 0; } }
@keyframes ld-pop { from { opacity: 0; transform: scale(0.6) rotate(-45deg); } }
@media (prefers-reduced-motion: reduce) {
  .envelope:has(.envelope__open:hover) .envelope__letter { transform: none; }
  /* no zoom, no blur: the letter just fades in */
  .letter-dialog[open] .letter-dialog__scrim, .letter-dialog[open] .letter-dialog__wrap, .letter-dialog[open] .letter-dialog__close { animation: ld-fade 200ms linear both; }
}

/* ------------------------------------------------------------------
   Tablet: keep the desktop composition inside narrower columns
   ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1139px) {
  .a-photo { width: 300px; height: 300px; }
  .a-intro { width: min(469px, calc(100% - 340px)); }
  .a-intro__title { white-space: normal; }
  .a-tools { top: 600px; }
  .a-quotes { width: 600px; transform-origin: 0 0; transform: scale(0.8); }
  .a-hero, .a-hero__inner { height: 820px; }
}

/* ------------------------------------------------------------------
   Mobile (390)
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .a-hero { height: auto; }
  .a-hero__bg { height: 620px; }
  .a-hero__pattern { left: 0; top: 0; width: 100%; height: 620px; aspect-ratio: auto; transform: none; object-fit: cover; }
  .a-hero__inner {
    width: auto; height: auto; margin: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
    padding: 116px 16px 0;
  }
  .a-hero__inner > * { position: relative; left: auto; right: auto; top: auto; }

  .a-photo { order: 1; width: 100%; height: auto; aspect-ratio: 1; }
  .a-intro { order: 2; width: 100%; display: flex; flex-direction: column; gap: 12px; }
  .a-intro__title { font-size: 32px; line-height: 36px; white-space: normal; }
  .a-intro__lede, .a-intro__p, .a-intro__list li { margin: 0; font-size: 14px; line-height: 21px; letter-spacing: 0; }
  .a-intro__lede, .a-intro__p, .a-intro__list { position: relative; top: 1px; }
  .a-intro__list { margin: 0; display: flex; flex-direction: column; gap: 12px; }
  .a-intro__list li { padding-left: 21px; }
  .a-intro__list li::before { left: 7px; top: 7.5px; width: 3px; height: 3px; }
  .a-intro__reach { width: auto; }

  .a-socials { order: 3; flex-direction: row; gap: 24px; }
  .a-socials a { font-size: 14px; line-height: 21px; position: relative; top: 1px; }
  .a-tags { order: 4; }
  .a-resume { order: 5; }

  .a-quotes { order: 6; margin-top: 28px; width: 100%; height: auto; display: flex; flex-direction: column; gap: 16px; }
  .a-quote { position: static; width: auto; display: flex; gap: 14px; padding: 16px; border-radius: 16px; background: var(--surface-3); }
  .a-quote__avatar { flex: none; }
  .a-quote__text { flex: 1; margin: 0; font-size: 13px; line-height: 16px; }

  .a-tools { order: 7; margin-top: 28px; width: 100%; height: 195.85px; --row: 56.86px; --gap: 12.635px; }
  .tool { border-radius: 14.74px; }
  .tool img { left: 5.26px; top: 4.21px; width: 47.38px; height: 47.38px; border-radius: 9.48px; }
  .tool b, .tool span { left: 63.18px; }
  .tool b { top: 7.37px; font-size: 12.635px; line-height: 20px; letter-spacing: -0.14px; }
  .tool span { top: 27.38px; font-size: 13px; line-height: 19px; letter-spacing: 0; }
  .a-tools__fade--t { top: -14.74px; height: 84.24px; background: linear-gradient(176.69deg, #fff 11px, rgba(255, 255, 255, 0) 75.69px); }
  .a-tools__fade--b { top: 126.35px; height: 81.08px; background: linear-gradient(3.19deg, #fff 10.59px, rgba(255, 255, 255, 0) 72.86px); }

  .a-letter { height: auto; margin-top: 96px; padding: 0 16px; }   /* room between the tools list and the letter */
  /* the letter (453 tall) is clipped to the envelope's 399 by itself, so the envelope can zoom past its box; the
     section clips sideways so the zoom never widens the page */
  .a-letter { overflow-x: clip; }
  .envelope { position: relative; left: auto; width: 100%; max-width: 358px; height: 399.17px; }
  .envelope__letter { clip-path: inset(0 0 53.83px 0); }
  .envelope__back { left: 0.14px; top: 17.64px; width: 357.89px; height: 143.52px; }
  .envelope__inner { left: 9.43px; top: 32.26px; width: 340.14px; height: 239.43px; }
  .envelope__letter { left: 21.32px; top: 0; }
  .envelope__front { top: 152.49px; width: 357.93px; height: 246.94px; }
  .envelope__art { width: 357.93px; height: 245.48px; }
  .envelope__open { left: 178.63px; top: 259.49px; scale: 0.735; transform-origin: 50% 0; } /* front top 152.49 + 107; the envelope is drawn at 0.735 here */

  .letter { width: 315.36px; height: 453px; box-shadow: inset 0 0 0 0.735px var(--line-soft); }
  .letter__mark { left: 262.88px; top: 11.26px; width: 40px; height: 45px; }
  .letter__hi { left: 26.46px; top: 36.76px; font-size: 14.7px; line-height: 15.29px; }
  .letter__body { left: 26.46px; top: 67.63px; width: 263.17px; font-size: 12px; line-height: 15px; }
  .letter__body p + p { margin-top: 15px; }
  .envelope__letter .letter__body { background-size: 100% 345px; background-image: linear-gradient(#3a3a3a, rgba(0, 0, 0, 0) 345px); }
  .letter--open { box-shadow: inset 0 0 0 0.735px var(--line-soft), 0 20px 50px rgba(0, 0, 0, 0.22); }

  .a-taste { width: auto; height: auto; margin: 48px 0 0; padding: 0 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .a-taste__title { position: relative; left: 0; top: 0; height: 46px; }
  .a-taste__title img { width: 56.84px; height: 35.76px; margin-top: 7.12px; }
  .a-taste__title > span { margin-left: 57px; font-family: var(--serif); font-size: 32px; line-height: 36px; font-style: italic; }
  .a-taste__text { position: relative; right: auto; top: 1px; width: auto; font-size: 14px; line-height: 21px; }
  .a-taste__btn { position: relative; left: auto; right: auto; top: 0; }


  .letter-dialog__wrap { width: 315.36px; margin-top: max(64px, calc(calc(50 * var(--dvh)) - 206px)); }
  .letter-dialog__wrap { left: 0; }
  .letter-dialog__close { left: auto; right: 0; top: -53px; width: 40px; height: 40px; }
  .letter--open .letter__mark { top: 12.26px; }
}

/* About's mobile frame places the shared header 3px lower than the other pages */
@media (max-width: 767px) { body[data-page="about"] .m-header { top: 20px; } }