/* Generated by bin/build-css.php from config/assets.php. Do not edit. */
/* css/tokens.css */
@layer tokens, base, layout, components, sections, motion, utilities;

@layer tokens {
  @property --k { syntax: "<number>"; inherits: false; initial-value: 0; }
  @property --pct { syntax: "<integer>"; inherits: false; initial-value: 0; }

  :root {
    --paper: #f4f4f2;
    --paper-2: #e9e9e6;
    --ink: #121214;
    --ink-2: #4a4a50;
    --steel: #62626a;
    --line: #1212141f;
    --accent: #e91638;
    --accent-text: #c8102e;
    --accent-deep: #a50d26;
    --on-accent: #ffffff;
    --xray-bg: #0b0c10;
    --xray-fg: #eeeeea;
    --xray-line: #eeeeea6b;
    --xray-accent-text: #ff4d63;
    color-scheme: light;

    --font-display: "Bricolage Grotesque", "Bricolage Fallback", system-ui, sans-serif;
    --font-sans: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", "Plex Mono Fallback", ui-monospace, monospace;
    --font-hand: "Caveat", "Caveat Fallback", "Segoe Print", cursive;
    --font-wide: var(--font-display);

    --shell: clamp(1.25rem, 5vw, 5rem);
    --frame: 1440px;
    --nav-h: 4.5rem;
    --lens-r: 150px;
    --radius-media: 12px;
    --radius-field: 8px;

    --ease-lens: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-iris: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-hand: cubic-bezier(0.45, 0, 0.25, 1);
    --ease-std: cubic-bezier(0.4, 0, 0.2, 1);

    --shadow-pill: 0 12px 32px -20px rgba(0, 0, 0, 0.35);
    --shadow-panel: 0 16px 40px -20px rgba(0, 0, 0, 0.35);
    --shadow-hint: 0 10px 30px -12px rgba(0, 0, 0, 0.25);

    --z-skip: 200;
    --z-intro: 120;
    --z-fireworks: 115;
    --z-lens: 105;
    --z-loupe-held: 102;
    --z-header-pill: 101;
    --z-header: 100;
    --z-menu: 99;
    --z-iris: 95;
    --z-hud: 90;
    --z-hint: 85;
    --z-annot: 79;
    --z-loupe-hit: 72;
    --z-loupe-gl: 71;
    --z-loupe-paper: 70;
    --z-loupe-view: 69;
  }

  
  html[lang="el"] {
    --font-display: "Commissioner", "Commissioner Fallback", system-ui, sans-serif;
    --font-sans: "Manrope", "Manrope Fallback", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
    --font-hand: "Playpen Sans", "Playpen Sans Fallback", cursive;
  }

  
  html:not(.late-fonts) {
    --font-hand: "Segoe Print", cursive;
  }

  
  html.late-fonts:not([lang="el"]) {
    --font-wide: "Bricolage Wide", var(--font-display);
  }

  @media (max-width: 767px) {
    :root { --nav-h: 4rem; --lens-r: 110px; }
  }

  
  :root[data-theme="dark"] {
    --paper: #0f0f11;
    --paper-2: #18181b;
    --ink: #f1f1ee;
    --ink-2: #b6b6b1;
    --steel: #87878f;
    --line: #f1f1ee24;
    --accent-text: #ff4d63;
    --accent-deep: #ff7b8b;
    --xray-bg: #f1f1ee;
    --xray-fg: #121214;
    --xray-line: #1212146b;
    --xray-accent-text: #c8102e;
    color-scheme: dark;
  }

  
  html.xray {
    --paper: var(--xray-bg);
    --paper-2: color-mix(in srgb, var(--xray-bg) 88%, var(--xray-fg));
    --ink: var(--xray-fg);
    --ink-2: color-mix(in srgb, var(--xray-fg) 78%, var(--xray-bg));
    --steel: color-mix(in srgb, var(--xray-fg) 60%, var(--xray-bg));
    --line: var(--xray-line);
    --accent-text: var(--xray-accent-text);
  }
}
/* css/fonts.css */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/bricolage-400-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/bricolage-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Wide";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bricolage-wide-400-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("../fonts/space-grotesk-400-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("../fonts/space-grotesk-400-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/caveat-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/commissioner-400-700-greek.woff2") format("woff2");
  size-adjust: 94.89%;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/commissioner-400-700-latin-ext.woff2") format("woff2");
  size-adjust: 94.89%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Commissioner";
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url("../fonts/commissioner-400-700-latin.woff2") format("woff2");
  size-adjust: 94.89%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("../fonts/manrope-400-600-greek.woff2") format("woff2");
  size-adjust: 106.12%;
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("../fonts/manrope-400-600-latin-ext.woff2") format("woff2");
  size-adjust: 106.12%;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 600;
  font-display: optional;
  src: url("../fonts/manrope-400-600-latin.woff2") format("woff2");
  size-adjust: 106.12%;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-500-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-400-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Playpen Sans";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/playpen-sans-500-600-greek.woff2") format("woff2");
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: "Playpen Sans";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/playpen-sans-500-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Playpen Sans";
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url("../fonts/playpen-sans-500-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


@font-face { font-family: "Bricolage Fallback"; src: local("Arial"); size-adjust: 105.43%; ascent-override: 88.21%; descent-override: 25.61%; line-gap-override: 0%; }
@font-face { font-family: "Space Grotesk Fallback"; src: local("Arial"); size-adjust: 109.69%; ascent-override: 89.71%; descent-override: 26.62%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono Fallback"; src: local("Arial"); size-adjust: 134.59%; ascent-override: 76.16%; descent-override: 20.43%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Fallback"; src: local("Arial"); size-adjust: 76.94%; ascent-override: 124.77%; descent-override: 38.99%; line-gap-override: 0%; }
@font-face { font-family: "Commissioner Fallback"; src: local("Arial"); size-adjust: 96.06%; ascent-override: 100.47%; descent-override: 20.35%; line-gap-override: 0%; }
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 105.71%; ascent-override: 107.02%; descent-override: 30.12%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30.00%; line-gap-override: 0%; }
@font-face { font-family: "Playpen Sans Fallback"; src: local("Arial"); size-adjust: 110.64%; ascent-override: 105.75%; descent-override: 30.73%; line-gap-override: 0%; }
/* vendor/lenis.css */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}
/* css/base.css */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: auto;
    
    scroll-padding-top: max(calc(var(--nav-h) + 1rem), var(--consent-clear, 0px));
    scroll-padding-bottom: 4rem;
  }

  body {
    margin: 0;
    min-height: 100svh;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: clip;
    transition: background-color 0.35s var(--ease-lens), color 0.35s var(--ease-lens);
  }

  img, svg, video, canvas, picture { display: block; max-width: 100%; }
  img { height: auto; }
  h1, h2, h3, h4 { margin: 0; font-weight: 500; text-wrap: balance; }
  p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  p, li, dd { text-wrap: pretty; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
  button, input, select, textarea { font: inherit; color: inherit; }
  button { cursor: pointer; }

  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--accent); color: var(--on-accent); }

  
  .display-1, .display-2, .display-3, .display-4 { font-family: var(--font-display); font-weight: 500; }
  
  .display-1 { font-size: clamp(min(2.75rem, 13.75vw), 7.2vw, 6.75rem); line-height: 0.96; letter-spacing: -0.035em; font-variation-settings: "opsz" 96, "wdth" 100; }
  .display-2 { font-size: clamp(2.125rem, 4.6vw, 4rem); line-height: 1.02; letter-spacing: -0.03em; font-variation-settings: "opsz" 96, "wdth" 100; }
  .display-3 { font-size: clamp(1.5rem, 2.4vw, 2.125rem); line-height: 1.12; letter-spacing: -0.02em; font-variation-settings: "opsz" 48, "wdth" 100; }
  .display-4 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.2; letter-spacing: -0.015em; font-variation-settings: "opsz" 24, "wdth" 100; }
  .lead { font-size: clamp(1.125rem, 1.05rem + 0.5vw, 1.375rem); line-height: 1.5; color: var(--ink-2); }
  .label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--steel); }
  .measure { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; color: var(--steel); }

  .prose { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.65; max-inline-size: 68ch; }
  .prose > * + * { margin-block-start: 1.25em; }
  .prose h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; margin-block-start: 2.2em; }
  .prose h3 { font-family: var(--font-display); font-size: 1.3em; margin-block-start: 1.8em; }
  .prose a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
  .prose ul, .prose ol { padding-inline-start: 1.25em; }
  .prose li + li { margin-block-start: 0.4em; }
  .prose blockquote { border-inline-start: 2px solid var(--accent); padding-inline-start: 1em; font-family: var(--font-display); font-size: 1.15em; color: var(--ink-2); }
  .prose code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-2); border-radius: 4px; padding: 0.1em 0.3em; }
  .prose hr { border: 0; border-top: 1px solid var(--line); margin-block: 2.5em; }

  .rule { border-top: 1px solid var(--line); }

  
  .link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding-block: 4px; transition: color 0.3s var(--ease-lens); }
  .link::before, .link::after {
    content: "";
    position: absolute;
    inline-size: 7px;
    block-size: 7px;
    border: 0 solid var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-lens), translate 0.45s var(--ease-lens);
  }
  .link::before { inset-block-start: -3px; inset-inline-start: -7px; border-block-start-width: 1px; border-inline-start-width: 1px; translate: -5px -5px; }
  .link::after { inset-block-end: -3px; inset-inline-end: -7px; border-block-end-width: 1px; border-inline-end-width: 1px; translate: 5px 5px; }
  .link:focus-visible::before, .link:focus-visible::after { opacity: 1; translate: 0 0; }
  @media (hover: hover) {
    .link:hover::before, .link:hover::after { opacity: 1; translate: 0 0; }
  }
  .link .icon { inline-size: 14px; block-size: 14px; }

  .skip-link {
    position: fixed;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    z-index: var(--z-skip);
    padding: 0.75rem 1rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.875rem;
    transform: translateY(-200%);
  }
  .skip-link:focus-visible { transform: none; }

  .sr-only {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .icon { inline-size: 1.5rem; block-size: 1.5rem; flex: none; }
  [hidden] { display: none !important; }
  .media { display: block; }
  .media--missing { display: block; inline-size: 100%; block-size: 100%; min-block-size: 4rem; background: var(--paper-2); }
}
/* css/layout.css */
@layer layout {
  .shell { padding-inline: var(--shell); }
  .frame { max-inline-size: var(--frame); margin-inline: auto; }

  main { display: block; min-block-size: 60svh; }
  main:focus { outline: none; }

  
  .page-hero { display: grid; gap: 1.5rem; justify-items: start; padding-block: calc(var(--nav-h) + 3rem) 3rem; }
  .page-hero .lead { max-inline-size: 32ch; }
  @media (min-width: 48rem) {
    .page-hero { padding-block: calc(var(--nav-h) + 6rem) 5rem; }
  }
  .section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-block-end: 48px; }
  .section-head--tight { margin-block-end: 40px; }
  @media (min-width: 48rem) {
    .section-head { margin-block-end: 64px; }
    .section-head--tight { margin-block-end: 40px; }
  }
}
/* css/components/button.css */
@layer components {
  .magnetic { display: inline-block; will-change: transform; }

  .btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: 0.875rem;
    block-size: 3.25rem;
    padding: 0 0.5rem 0 1.5rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    overflow: hidden;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: transform 0.16s var(--ease-lens), background-color 0.25s var(--ease-lens), color 0.25s var(--ease-lens), border-color 0.25s var(--ease-lens);
  }
  .btn:active { transform: scale(0.97); }
  .btn-label { position: relative; }
  .btn-glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    background: radial-gradient(110px circle at var(--mx, 50%) var(--my, 50%), var(--glow), transparent 60%);
    transition: opacity 0.35s var(--ease-lens);
  }
  .btn-dot {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    transition: transform 0.35s var(--ease-lens);
  }
  .btn-icon { inline-size: 16px; block-size: 16px; transition: transform 0.35s var(--ease-lens); }

  .btn-primary { background: var(--ink); color: var(--paper); --glow: rgb(255 255 255 / 0.16); }
  .btn-primary .btn-dot { background: var(--accent); color: var(--on-accent); }
  .btn-secondary { border-color: var(--line); color: var(--ink); --glow: color-mix(in srgb, var(--ink) 7%, transparent); }
  .btn-secondary .btn-dot { background: var(--paper-2); color: var(--ink); }
  .btn-ghost { block-size: 2.75rem; padding-inline: 1rem 0.35rem; color: var(--ink); --glow: color-mix(in srgb, var(--ink) 7%, transparent); }
  .btn-ghost .btn-dot { inline-size: 2rem; block-size: 2rem; background: var(--paper-2); }
  .btn-sm { block-size: 2.5rem; padding: 0 1.1rem; gap: 0.5rem; }

  
  .on-dark .btn-secondary { border-color: color-mix(in srgb, var(--paper) 30%, transparent); color: var(--paper); --glow: rgb(255 255 255 / 0.12); }
  .on-dark .btn-secondary .btn-dot { background: var(--accent); color: var(--on-accent); }

  @media (hover: hover) and (pointer: fine) {
    .btn:hover .btn-glow { opacity: 1; }
    .btn:hover .btn-dot { transform: translate(2px, -2px); }
    .btn:hover .btn-icon { transform: rotate(45deg); }
  }
}
/* css/components/field.css */
@layer components {
  .field { display: grid; gap: 0.5rem; }
  .field__label { color: var(--ink); font-size: 0.875rem; font-weight: 500; transition: color 0.25s var(--ease-lens), transform 0.35s var(--ease-lens); }
  .field:focus-within .field__label { color: var(--accent-deep); transform: translateX(0.35rem); }
  .field__input {
    inline-size: 100%;
    min-block-size: 3.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-field);
    background: var(--paper);
    color: var(--ink);
  }
  .field__input::placeholder { color: var(--steel); }
  .field__input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
  .field__input[aria-invalid="true"] { border-color: var(--accent-deep); }
  textarea.field__input { resize: vertical; }
  .field__hint { color: var(--steel); font-size: 0.8125rem; }
  .field__error { color: var(--accent-deep); font-size: 0.8125rem; }
  .link-inline { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }

  
  fieldset.field { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
  fieldset.field > legend { padding: 0; margin-block-end: 0.5rem; }
  .chips__list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .chip { position: relative; display: inline-flex; cursor: pointer; }
  .chip__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
  .chip__face {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-block-size: 2.75rem;
    padding-inline: 1.1rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.9rem;
    transition: background-color 0.3s var(--ease-lens), color 0.3s var(--ease-lens), border-color 0.3s var(--ease-lens), padding 0.35s var(--ease-lens), transform 0.16s var(--ease-lens);
  }
  .chip__face::before { content: ""; flex-shrink: 0; inline-size: 0; block-size: 0.45rem; margin-inline-end: -0.45rem; border-radius: 50%; background: var(--accent); scale: 0; transition: scale 0.35s var(--ease-lens), inline-size 0.35s var(--ease-lens), margin 0.35s var(--ease-lens); }
  .chip::before, .chip::after { content: ""; position: absolute; inline-size: 7px; block-size: 7px; border: 0 solid var(--accent); opacity: 0; pointer-events: none; transition: opacity 0.3s var(--ease-lens), translate 0.3s var(--ease-lens); }
  .chip::before { inset-block-start: -3px; inset-inline-start: -3px; border-block-start-width: 1px; border-inline-start-width: 1px; translate: -5px -5px; }
  .chip::after { inset-block-end: -3px; inset-inline-end: -3px; border-block-end-width: 1px; border-inline-end-width: 1px; translate: 5px 5px; }
  @media (hover: hover) and (pointer: fine) {
    .chip:hover .chip__face { border-color: var(--ink); }
    .chip:hover::before, .chip:hover::after { opacity: 1; translate: 0 0; }
  }
  .chip:active .chip__face { transform: scale(0.97); }
  .chip__input:checked + .chip__face { padding-inline-start: 0.85rem; border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .chip__input:checked + .chip__face::before { inline-size: 0.45rem; margin-inline-end: 0; scale: 1; }
  .chip__input:focus-visible + .chip__face { outline: 2px solid var(--accent); outline-offset: 3px; }
  .chips:has([aria-invalid="true"]) .chip__face { border-color: var(--accent-deep); }

  
  .hp { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
  
  .form-status { padding: 0.75rem 1rem; border: 1px solid transparent; border-radius: var(--radius-field); font-size: 0.875rem; }
  .form-status:empty { padding: 0; border: 0; }
  .form-status[data-state="ok"] { background: var(--ink); color: var(--paper); }
  .form-status[data-state="error"] { border-color: color-mix(in srgb, var(--accent-deep) 40%, transparent); background: var(--paper-2); color: var(--ink); }
  button.btn { cursor: pointer; }
  button.btn:disabled { opacity: 0.5; pointer-events: none; }
  
  button.btn:disabled .btn-icon { opacity: 0; }
  button.btn:disabled .btn-dot::after {
    content: "";
    position: absolute;
    inline-size: 12px;
    block-size: 12px;
    border: 1.5px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.8s linear infinite;
  }
  @keyframes btn-spin { to { rotate: 1turn; } }
}
/* css/components/switch.css */
@layer components {
  .switch {
    position: relative;
    flex: none;
    inline-size: 2.75rem;
    block-size: 1.5rem;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--ink) 25%, transparent);
    border-radius: 999px;
    background: var(--paper-2);
    transition: background-color 0.3s var(--ease-lens);
  }
  .switch__thumb {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.1875rem;
    inline-size: 1.0625rem;
    block-size: 1.0625rem;
    border-radius: 50%;
    background: var(--ink);
    transform: translateY(-50%);
    transition: transform 0.3s var(--ease-lens), background-color 0.3s;
  }
  .switch[aria-checked="true"] { background: var(--accent); border-color: var(--accent); }
  .switch[aria-checked="true"] .switch__thumb { background: var(--on-accent); transform: translate(1.1875rem, -50%); }
}
/* css/components/sound.css */
@layer components {
  .sound { position: relative; }

  .sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 13px; }
  .sound-bars i { inline-size: 2px; block-size: 3px; border-radius: 1px; background: currentColor; transform-origin: bottom; transition: block-size 0.4s var(--ease-lens); }
  .sound-bars.is-on i { animation: sound-bar 1.05s var(--ease-lens) infinite alternate; }
  .sound-bars.is-on i:nth-child(1) { block-size: 7px; animation-delay: -0.4s; }
  .sound-bars.is-on i:nth-child(2) { block-size: 12px; animation-delay: -0.1s; }
  .sound-bars.is-on i:nth-child(3) { block-size: 5px; animation-delay: -0.75s; }
  .sound-bars.is-on i:nth-child(4) { block-size: 10px; animation-delay: -0.55s; }
  @keyframes sound-bar { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }

  .sound__panel {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline-start: 0;
    z-index: var(--z-header-pill);
    inline-size: min(20rem, calc(100vw - 2 * var(--shell)));
    display: grid;
    gap: 0.9rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-media);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-panel);
    color: var(--ink);
    font-size: 0.8125rem;
  }
  .sound__row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.4rem 0.75rem; }
  .sound__label { font-weight: 500; }
  .sound__range { grid-column: 1 / -1; inline-size: 100%; accent-color: var(--accent); }
  .sound__mute { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: transparent; }
  .sound__mute .icon { inline-size: 1rem; block-size: 1rem; }
  .sound__mute .icon--off, .sound__mute[aria-pressed="true"] .icon--on { display: none; }
  .sound__mute[aria-pressed="true"] .icon--off { display: block; }
  .sound__note { color: var(--ink-2); }

  
  .consent {
    position: fixed;
    inset-inline-start: var(--shell);
    inset-block-start: calc(var(--nav-h) + 0.5rem);
    z-index: var(--z-hint);
    inline-size: min(22rem, calc(100vw - 2 * var(--shell)));
    display: grid;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-media);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-panel);
    font-size: 0.875rem;
  }
  .consent__title { font-weight: 600; }
  .consent__text { color: var(--ink-2); }
  .consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 0.25rem; }
}
/* css/components/menu.css */
@layer components {
  .menu {
    position: fixed;
    inset: 0;
    z-index: var(--z-menu);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--ink);
    color: var(--paper);
    outline: none;
  }
  .menu__inner { display: flex; flex-direction: column; justify-content: space-between; min-block-size: 100dvh; padding-block: calc(var(--nav-h) + 1.5rem) 32px; }
  .menu__close {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline-start: 50%;
    padding: 0.6rem 1rem;
    border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 0.875rem;
    transform: translate(-50%, -200%);
  }
  .menu__close:focus-visible { transform: translate(-50%, 0); }

  .menu__grid { display: grid; gap: 40px; }
  .menu__list { display: grid; gap: 4px; }
  .menu__item { overflow: hidden; }
  .menu__link {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-block: 4px;
    transform: translateY(110%);
    transition: transform 0.7s var(--ease-lens) calc(120ms + 60ms * var(--i));
  }
  .menu:not(.is-open) .menu__link { transition-delay: 0s; }
  .menu.is-open .menu__link { transform: none; }
  .menu__dot { flex: none; align-self: flex-end; inline-size: 10px; block-size: 10px; margin-block-end: 0.18em; border-radius: 50%; background: var(--accent); transform: scale(0); transition: transform 0.5s var(--ease-lens); }
  .menu__label { color: color-mix(in srgb, var(--paper) 70%, transparent); transition: color 0.3s var(--ease-lens); }
  .menu__link.is-hot .menu__dot, .menu__link[aria-current="page"] .menu__dot { transform: scale(1); }
  .menu__link.is-hot .menu__label, .menu__link[aria-current="page"] .menu__label { color: var(--paper); }
  .menu__caption { display: none; color: color-mix(in srgb, var(--paper) 70%, transparent); }

  .menu__preview {
    position: relative;
    display: none;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
    border-radius: var(--radius-media);
    background: color-mix(in srgb, var(--paper) 5%, transparent);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s var(--ease-lens) 0.26s, transform 0.7s var(--ease-lens) 0.26s;
  }
  .menu.is-open .menu__preview { opacity: 1; transform: none; }
  .menu__shot { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 0.7s var(--ease-lens), transform 0.7s var(--ease-lens); }
  .menu__shot.is-active { opacity: 1; transform: none; }
  .menu__shot picture, .menu__shot img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .menu__shot-caption {
    position: absolute;
    inset-inline-start: 12px;
    inset-block-end: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 70%, transparent);
    color: var(--paper);
    font-family: var(--font-mono);
    font-size: 11px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }

  .menu__foot {
    display: grid;
    gap: 32px;
    margin-block-start: 48px;
    padding-block-start: 24px;
    border-top: 1px solid color-mix(in srgb, var(--paper) 15%, transparent);
    opacity: 0;
    transition: opacity 0.7s var(--ease-lens) 0.42s;
  }
  .menu.is-open .menu__foot { opacity: 1; }
  .menu__cta { display: inline-flex; align-items: center; gap: 12px; min-block-size: 44px; font-size: 18px; font-weight: 500; }
  .menu__cta-dot { display: grid; place-items: center; inline-size: 36px; block-size: 36px; border-radius: 50%; background: var(--accent); color: var(--on-accent); transition: transform 0.5s var(--ease-lens); }
  .menu__cta-dot .icon { inline-size: 16px; block-size: 16px; }
  .menu__cta:hover .menu__cta-dot, .menu__cta:focus-visible .menu__cta-dot { transform: rotate(45deg); }
  .menu__meta { display: grid; gap: 6px; font-size: 0.875rem; color: color-mix(in srgb, var(--paper) 70%, transparent); }
  .menu__meta .link { justify-self: start; color: var(--paper); }
  .menu__settings { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
  .menu__legal { display: flex; flex-wrap: wrap; gap: 16px; font-size: 0.75rem; color: color-mix(in srgb, var(--paper) 75%, transparent); }

  .seg { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border: 1px solid color-mix(in srgb, var(--paper) 20%, transparent); border-radius: 999px; }
  .seg label { cursor: pointer; }
  .seg a, .seg label span { display: inline-flex; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 500; color: color-mix(in srgb, var(--paper) 70%, transparent); transition: color 0.3s, background-color 0.3s; }
  .seg a:hover, .seg label:hover span { color: var(--paper); }
  .seg a[aria-current="true"], .seg input:checked + span { background: var(--paper); color: var(--ink); }
  .seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

  @media (min-width: 48rem) {
    .menu__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
    .menu__nav { grid-column: span 7; }
    .menu__preview { display: block; grid-column: span 5; }
    .menu__list { gap: 8px; }
    .menu__link { gap: 24px; }
    .menu__caption { display: inline; }
    .menu__foot { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: center; }
    .menu__settings { justify-content: flex-end; }
  }
}
/* css/components/footer.css */
@layer components {
  .footer { margin-block-start: 4rem; padding-block: 3rem 6rem; overflow-x: clip; }
  .footer__grid { display: grid; gap: 40px; }
  .footer__logo { display: inline-block; block-size: clamp(3.5rem, 9vw, 8.5rem); }
  .footer__about { margin-block-start: 16px; max-inline-size: 20rem; font-size: 0.875rem; color: var(--ink-2); }
  .footer__origin { position: relative; margin-block-start: 12px; }
  .footer__col .label { margin-block-end: 16px; }
  .footer__col ul { display: grid; gap: 8px; font-size: 0.875rem; }
  .footer__col .link { padding-block: 6px; }
  .footer__address { color: var(--ink-2); }
  .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-block-start: 48px; padding-block-start: 24px; font-size: 0.75rem; color: var(--steel); }
  .footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
  .footer__legal .link { padding-block: 8px; }

  @media (min-width: 48rem) {
    .footer { margin-block-start: 7rem; padding-block-start: 4rem; }
    .footer__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .footer__brand { grid-column: 1 / span 5; }
    .footer__col--chapters { grid-column: 7 / span 3; }
    .footer__col--contact { grid-column: 10 / span 3; }
  }
}
/* css/components/nav.css */
@layer components {
  .logo { block-size: 100%; inline-size: auto; fill: currentColor; }
  .logo__wave { fill: var(--accent); }

  .nav { position: fixed; inset-inline: 0; inset-block-start: 0; z-index: var(--z-header); pointer-events: none; transition: transform 0.6s var(--ease-lens); }
  .nav.is-hidden { transform: translateY(-115%); }
  .nav.is-hidden:focus-within { transform: none; }
  .nav.is-menu { color: var(--paper); }
  .nav__bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; block-size: var(--nav-h); }

  .nav-pill {
    position: relative;
    z-index: var(--z-header-pill);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border: 1px solid transparent;
    border-radius: 999px;
    pointer-events: auto;
    transition: background-color 0.4s var(--ease-lens), border-color 0.4s var(--ease-lens), box-shadow 0.4s var(--ease-lens), backdrop-filter 0.4s var(--ease-lens);
  }
  .nav.is-scrolled:not(.is-menu) .nav-pill {
    background: color-mix(in srgb, var(--paper) 78%, transparent);
    border-color: var(--line);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    box-shadow: var(--shadow-pill);
  }
  .nav.is-menu .nav-pill { border-color: rgb(255 255 255 / 0.14); }

  .nav-logo { display: flex; align-items: center; block-size: 44px; padding-inline: 12px; }
  .nav-logo .logo { block-size: 26px; }

  .nav-item {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    block-size: 44px;
    padding: 0 0.8rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transition: color 0.3s, background-color 0.3s;
  }
  .nav-item--icon { inline-size: 44px; padding: 0; }
  .nav-item .icon { inline-size: 17px; block-size: 17px; }
  .nav-item__on { display: none; }
  .nav-item.is-on { background: var(--accent); color: var(--on-accent); }
  .nav-item.is-on .nav-item__on { display: block; }
  .nav-item.is-on .nav-item__off { display: none; }
  .nav-item::before, .nav-item::after {
    content: "";
    position: absolute;
    inline-size: 7px;
    block-size: 7px;
    border: 0 solid var(--accent);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s var(--ease-lens), translate 0.45s var(--ease-lens);
  }
  .nav-item::before { inset-block-start: 0.45rem; inset-inline-start: 0.2rem; border-block-start-width: 1px; border-inline-start-width: 1px; translate: -5px -5px; }
  .nav-item::after { inset-block-end: 0.45rem; inset-inline-end: 0.2rem; border-block-end-width: 1px; border-inline-end-width: 1px; translate: 5px 5px; }
  .nav-item.is-on::before, .nav-item.is-on::after { border-color: var(--on-accent); }
  .nav-item:focus-visible::before, .nav-item:focus-visible::after { opacity: 1; translate: 0 0; }
  @media (hover: hover) {
    .nav-item:hover::before, .nav-item:hover::after { opacity: 1; translate: 0 0; }
  }
  @media (max-width: 39.99rem) {
    .nav-item__text { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    [data-xray-toggle] { inline-size: 44px; padding: 0; }
  }
  @media (max-width: 47.99rem) {
    .nav-cta { display: none; }
  }

  .menu-icon { position: relative; display: grid; place-items: center; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--ink); color: var(--paper); transition: background-color 0.3s; }
  .menu-icon i { position: absolute; inline-size: 12px; block-size: 1.5px; background: currentColor; transition: transform 0.5s var(--ease-lens); }
  .menu-icon i:first-child { transform: translateY(-2.5px); }
  .menu-icon i:last-child { transform: translateY(2.5px); }
  [aria-expanded="true"] > .menu-icon { background: color-mix(in srgb, var(--paper) 15%, transparent); }
  [aria-expanded="true"] > .menu-icon i:first-child { transform: rotate(45deg); }
  [aria-expanded="true"] > .menu-icon i:last-child { transform: rotate(-45deg); }

  .nav-readout {
    position: absolute;
    inset-inline-start: 50%;
    display: none;
    align-items: center;
    gap: 12px;
    opacity: 0;
    transform: translate(-50%, -6px);
    pointer-events: none;
    transition: opacity 0.5s var(--ease-lens), transform 0.5s var(--ease-lens);
  }
  @media (min-width: 64rem) {
    .nav-readout { display: flex; }
  }
  .nav.is-scrolled:not(.is-menu) .nav-readout { opacity: 1; transform: translate(-50%, 0); }
  .nav-progress { position: relative; inline-size: 72px; block-size: 1px; overflow: hidden; background: var(--line); }
  .nav-progress > span { position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; }
  .nav-chapter { color: var(--ink); }
}
/* css/components/intro.css */
@layer components {
  
  [data-intro] { display: none; }
  html.intro .intro {
    position: fixed;
    inset: 0;
    z-index: var(--z-intro);
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--paper);
    animation: intro-failsafe 0.4s linear 1.4s forwards;
  }
  .intro__claim, .intro__pct, .intro__geo { position: absolute; color: color-mix(in srgb, var(--paper) 60%, transparent); }
  .intro__claim { inset-block-start: 1.5rem; inset-inline-start: var(--shell); }
  .intro__pct { inset-block-end: 1.5rem; inset-inline-start: var(--shell); counter-reset: pct var(--pct); animation: intro-count 0.6s cubic-bezier(0.33, 1, 0.68, 1) forwards; }
  .intro__pct::before { content: counter(pct) " %"; }
  .intro__geo { inset-block-end: 1.5rem; inset-inline-end: var(--shell); }
  .intro__mark { block-size: clamp(3rem, 9vw, 6rem); }
  .intro__mark .logo__wave { transform-box: fill-box; transform-origin: center; animation: intro-dot 0.3s var(--ease-lens) both; }
  .intro__mark .logo__word { animation: intro-word 0.36s var(--ease-lens) 0.15s both; }
  @keyframes intro-count { to { --pct: 100; } }
  @keyframes intro-dot { from { opacity: 0; transform: scale(0.4); } }
  @keyframes intro-word { from { opacity: 0; transform: translateX(12px); } }
  @keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } }

  
  .iris {
    position: fixed;
    inset: 0;
    z-index: var(--z-iris);
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--paper);
    pointer-events: none;
    visibility: hidden;
    clip-path: circle(0 at 50% 50%);
  }
  .iris__inner { display: grid; justify-items: center; gap: 12px; }
  .iris .logo { block-size: 30px; }
  .iris__caption { color: color-mix(in srgb, var(--paper) 60%, transparent); }
}
/* css/components/kinetic.css */
@layer components {
  .kinetic-word { display: inline-block; white-space: nowrap; }
  .kinetic-char {
    display: inline-block;
    transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px));
    font-variation-settings: "opsz" 96, "wdth" 100, "wght" calc(500 + var(--k) * 190);
    transition: transform 0.35s var(--ease-lens), font-variation-settings 0.35s var(--ease-lens);
  }
  .kinetic-char::before { content: attr(data-ch); }
}
/* css/components/reveal.css */
@layer components {
  
  @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
    .js [data-reveal] {
      transition: opacity 1s var(--ease-lens), transform 1.1s var(--ease-lens), filter 0.9s var(--ease-lens);
      transition-delay: calc(var(--i, 0) * 70ms);
    }
    .js [data-reveal]:not(.is-in) { opacity: 0; filter: blur(6px); transform: translateY(1.75rem); }
    .js [data-reveal="fade"]:not(.is-in) { transform: none; }
    .js [data-reveal="focus"] { transform-origin: left; transition-property: opacity, filter, transform; transition-duration: 0.9s, 1.1s, 1.1s; }
    .js [data-reveal="focus"]:not(.is-in) { filter: blur(14px); transform: translateY(0.22em) scaleX(0.9); }
    .js [data-reveal="clip"], .js [data-reveal="clip"]:not(.is-in) { opacity: 1; filter: none; transform: none; }
    
    .js [data-reveal="clip"].is-in > * { animation: clip-unveil 1.1s var(--ease-lens) backwards; }
    .js [data-reveal="clip"]:not(.is-in) > * { clip-path: inset(0 0 100%); }
    .js:not(.reveals-ready) [data-reveal]:not(.is-in) { animation: reveal-failsafe 0s 3s forwards; }
    .js:not(.reveals-ready) [data-reveal="clip"]:not(.is-in) > * { animation: reveal-failsafe 0s 3s forwards; }
  }
  @keyframes reveal-failsafe { to { opacity: 1; filter: none; transform: none; clip-path: inset(0); } }
  @keyframes clip-unveil { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }

  
  .scrub-word { color: var(--steel); transition: color 0.45s var(--ease-lens); }
  .scrub-word.is-on, .no-js .scrub-word, .js:not(.reveals-ready) .scrub-word { color: var(--ink); }

  
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
      .reveals-ready [data-reveal].is-in:not([data-leave="off"]):not([data-reveal="clip"]) {
        animation: reveal-leave linear both;
        animation-timeline: view();
        animation-range: exit 20% exit 100%;
      }
      .reveals-ready [data-reveal="clip"].is-in:not([data-leave="off"]) > * {
        animation: clip-unveil 1.1s var(--ease-lens) backwards, clip-leave linear both;
        animation-timeline: auto, view();
        animation-range: normal, exit 10% exit 100%;
      }
    }
  }
  @keyframes reveal-leave { to { opacity: 0; filter: blur(5px); translate: 0 -1.25rem; } }
  @keyframes clip-leave { to { opacity: 0.15; scale: 0.96; } }
}
/* css/components/ink.css */
@layer components {
  
  .secret-ink { visibility: hidden; pointer-events: none; user-select: none; -webkit-user-select: none; }
  .secret-ink.is-lit, .secret-ink.is-found, html.ink-debug .secret-ink { visibility: visible; }
  .secret-ink.is-lit {
    -webkit-mask-image: radial-gradient(circle var(--sr) at var(--sx) var(--sy), #000 97%, transparent 100%);
    mask-image: radial-gradient(circle var(--sr) at var(--sx) var(--sy), #000 97%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
  .secret-proof { position: absolute; inset: -6rem; }
  .secret-proof__box { position: absolute; inset: 6rem; }
  .secret-note {
    position: absolute;
    font-family: var(--font-hand);
    font-size: 21px;
    font-weight: 600;
    line-height: 0.9;
    color: var(--accent-text);
    white-space: nowrap;
    rotate: var(--tilt, -2deg);
  }
  html[lang="el"] .secret-note { font-size: 18px; line-height: 1; }
  .secret-line { display: block; }
  .secret-mark { position: absolute; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

  .secret-letter { position: absolute; inset-block-start: 0; inset-inline-end: 0; z-index: 2; display: inline-flex; align-items: center; gap: 0.6rem; }
  .secret-stamp {
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border: 2px solid var(--accent);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 3px var(--accent);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    rotate: -11deg;
  }
  .secret-letter-note { font-family: var(--font-hand); font-size: 19px; font-weight: 600; color: var(--accent-text); white-space: nowrap; }
  .secret-letter.is-found .secret-letter-note { display: none; }
  
  .secret-letter.is-above .secret-letter-note { position: absolute; inset-block-end: calc(100% + 0.4rem); inset-inline-end: 0; inline-size: max-content; text-align: end; }
  .secret-letter.is-stamped .secret-stamp { animation: ink-stamp 0.55s var(--ease-lens); }
  @keyframes ink-stamp {
    from { opacity: 0; rotate: -24deg; scale: 1.8; }
    60% { opacity: 1; rotate: -9deg; scale: 0.94; }
    to { rotate: -11deg; scale: 1; }
  }

  @media (max-width: 47.99rem) {
    .secret-proof.is-desktop { display: none; }
  }
  @media print {
    .secret-ink { display: none; }
  }
}
/* css/components/scale.css */
@layer components {
  
  .ruler {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    display: none;
    inline-size: 32px;
    overflow-x: visible;
    overflow-y: clip;
    color: var(--steel);
    user-select: none;
    background-image:
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 64px),
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 32px),
      repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 8px);
    background-size: 14px 100%, 9px 100%, 5px 100%;
    background-repeat: no-repeat;
  }
  .ruler span { position: absolute; inset-inline-start: 18px; translate: 0 -50%; font-family: var(--font-mono); font-size: 9px; line-height: 1; font-variant-numeric: tabular-nums; }
  @media (min-width: 48rem) {
    .ruler { display: block; }
  }
  
  html.has-scale { scrollbar-width: none; }
  html.has-scale::-webkit-scrollbar { width: 0; height: 0; }
  .scale {
    position: fixed;
    inset-block: calc(var(--nav-h) + 8px) 16px;
    inset-inline-end: 6px;
    z-index: var(--z-hud);
    inline-size: 22px;
    cursor: grab;
    touch-action: none;
    background-image:
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(to bottom, var(--line) 0 1px, transparent 1px 64px);
    background-size: 5px 100%, 12px 100%;
    background-position: right top, right top;
    background-repeat: no-repeat;
    transition: opacity 0.4s var(--ease-lens);
  }
  .scale.is-dragging { cursor: grabbing; }
  .scale__thumb { position: absolute; inset-block-start: 0; inset-inline-end: 4px; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); }
  .scale__label {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 20px;
    padding: 5px 8px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font-size: 11px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease-lens);
  }
  .scale.is-scrolling .scale__label, .scale:hover .scale__label { opacity: 1; }
  html.menu-open .scale { opacity: 0; pointer-events: none; }
}
/* css/components/lens.css */
@layer components {
  
  .lens-layer { display: contents; }
  .lens-layer canvas { position: fixed; z-index: var(--z-lens); inset-block-start: 0; inset-inline-start: 0; pointer-events: none; will-change: transform; }
  .lens-invert { mix-blend-mode: difference; }
  .annot-layer { position: fixed; inset: 0; z-index: var(--z-annot); pointer-events: none; opacity: 0; transition: opacity 0.2s; }
  .annot-layer.is-on { opacity: 1; }
  html.lens-held, html.lens-held * { cursor: none !important; user-select: none !important; -webkit-user-select: none !important; }
  html.xray img, html.xray video { filter: grayscale(1) contrast(1.15) opacity(0.55); }
  html.menu-open .lens-layer canvas, html.menu-open .annot-layer { opacity: 0; }
  @media print { .lens-layer, .annot-layer, .scale { display: none; } }
  .lens-hint {
    position: fixed;
    z-index: var(--z-hint);
    inset-inline-start: calc(var(--shell) - 1rem);
    inset-block-end: 1.1rem;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: var(--shadow-hint);
    color: var(--ink);
    font-size: 14px;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.7s var(--ease-lens), transform 0.7s var(--ease-lens);
  }
  .lens-hint.is-on { opacity: 1; transform: none; }
  .lens-hint__icon { position: relative; flex: none; inline-size: 24px; block-size: 24px; }
  .lens-hint__icon::before, .lens-hint__icon::after { content: ""; position: absolute; border-radius: 50%; }
  .lens-hint__icon::before { inset: 8px; background: var(--accent); }
  .lens-hint__icon::after { inset: 0; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); animation: hint-ping 1s var(--ease-lens) infinite; }
  @keyframes hint-ping { to { transform: scale(2); opacity: 0; } }
  .lens-hint__how { color: var(--steel); }
  @media (max-width: 47.99rem) {
    .lens-hint { inset-block: calc(var(--nav-h) + 0.25rem) auto; inset-inline-start: 50%; translate: -50% 0; transform: translateY(-12px); }
  }
}
/* css/components/hud.css */
@layer components {
  .hud {
    position: fixed;
    z-index: var(--z-hud);
    inset-block-end: 1.1rem;
    inset-inline-end: var(--shell);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--steel);
    transition: opacity 0.4s var(--ease-lens);
  }
  html.menu-open .hud { opacity: 0; pointer-events: none; }
  .hud__toast {
    max-inline-size: 18rem;
    padding: 0.6rem 0.9rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.4s var(--ease-lens), transform 0.4s var(--ease-lens);
  }
  .hud__toast:empty { display: none; }
  .hud.has-toast .hud__toast { opacity: 1; transform: none; }
  .hud__panel {
    inline-size: min(22rem, calc(100vw - 2 * var(--shell)));
    padding: 0.9rem 1rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-media);
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-panel);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: 0;
    color: var(--ink);
    animation: hud-rise 0.35s var(--ease-lens);
  }
  @keyframes hud-rise { from { opacity: 0; transform: translateY(6px); } }
  .hud__lead { font-weight: 500; }
  .hud__list { display: grid; gap: 0.4rem; margin-block-start: 0.7rem; }
  .hud__list li { display: flex; align-items: baseline; gap: 0.6rem; color: var(--ink-2); }
  .hud__list li::before { content: ""; flex: none; inline-size: 8px; block-size: 8px; border: 1.5px solid var(--steel); border-radius: 50%; translate: 0 1px; }
  .hud__list li.is-found { color: var(--ink); }
  .hud__list li.is-found::before { border-color: var(--accent); background: var(--accent); }
  .hud__letters { display: flex; gap: 4px; }
  .hud__letters span { display: grid; place-items: center; inline-size: 1.45rem; block-size: 1.45rem; border: 1px dashed var(--line); border-radius: 50%; color: transparent; font-family: var(--font-display); font-size: 13px; font-weight: 700; }
  .hud__letters span.is-found { border: 1.5px solid var(--accent); color: var(--accent-text); }
  .hud__row { display: flex; align-items: center; gap: 1rem; }
  .hud__readout { display: none; gap: 1rem; font-variant-numeric: tabular-nums; }
  .hud__readout b { font-weight: 500; color: var(--ink); }
  .hud__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    block-size: 2rem;
    padding: 0 0.8rem 0 0.65rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--paper) 86%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ink);
    font: inherit;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.3s;
  }
  .hud__pill:hover { border-color: var(--ink); }
  .hud__ring { inline-size: 8px; block-size: 8px; border: 1.5px solid var(--accent); border-radius: 50%; }
  .hud.is-complete .hud__ring { background: var(--accent); }
  .hud__word { color: var(--steel); }
  @media (min-width: 64rem) {
    html.xray .hud__readout:not([hidden]) { display: inline-flex; }
  }
  @media (hover: none), (pointer: coarse) {
    .hud { inset-block: calc(var(--nav-h) + 0.25rem) auto; inset-inline: 50% auto; translate: -50% 0; align-items: center; pointer-events: none; }
    .hud__panel, .hud__letters, .hud__row { display: none; }
  }

  .menu__found:not([hidden]) { display: flex; align-items: center; gap: 8px; font-size: 11px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
  .menu__found::before { content: ""; inline-size: 8px; block-size: 8px; border: 1.5px solid var(--accent); border-radius: 50%; }
  .menu__found span { color: color-mix(in srgb, var(--paper) 62%, transparent); }
}
/* css/components/loupe.css */
@layer components {
  
  .loupe { position: fixed; inset: 0; z-index: var(--z-loupe-view); pointer-events: none; transition: opacity 0.4s var(--ease-lens); }
  
  html.loupe-held .loupe { z-index: var(--z-loupe-held); }
  html.menu-open .loupe { opacity: 0; }
  html.menu-open .loupe-hit { pointer-events: none; }

  
  .loupe-view { position: fixed; inset: 0; z-index: var(--z-loupe-view); overflow: hidden; contain: strict; background: var(--paper); opacity: 0; pointer-events: none; }
  .loupe-page, .loupe-fixed { position: absolute; inset-block-start: 0; inset-inline-start: 0; transform-origin: 0 0; pointer-events: none; }
  .loupe-page *, .loupe-fixed * { animation: none !important; transition: none !important; }
  .loupe-page .secret-ink, .loupe-fixed .secret-ink { visibility: visible !important; -webkit-mask: none !important; mask: none !important; }
  .loupe-glass { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: var(--z-loupe-view); inline-size: 300px; block-size: 300px; margin: -150px 0 0 -150px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 0 22px rgba(18, 18, 20, 0.1); opacity: 0; pointer-events: none; }

  .loupe-paper { position: fixed; inset: 0; z-index: var(--z-loupe-paper); pointer-events: none; }
  .loupe-gl { position: fixed; inset: 0; z-index: var(--z-loupe-gl); pointer-events: none; }
  .loupe-gl canvas { display: block; inline-size: 100%; block-size: 100%; }
  .loupe-sprite { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: var(--z-loupe-gl); max-inline-size: none; block-size: auto; pointer-events: none; }
  html.loupe-live .loupe-sprite { display: none; }
  html.xray .loupe-sprite { filter: invert(1) grayscale(1); }

  .loupe-hit { position: fixed; inset-block-start: 0; inset-inline-start: 0; z-index: var(--z-loupe-hit); border-radius: 50%; cursor: grab; touch-action: none; pointer-events: auto; }
  .loupe-hit__handle { position: absolute; inset-block-start: 50%; inset-inline-start: 50%; transform-origin: 0 50%; border-radius: 999px; pointer-events: auto; }
  html.loupe-held, html.loupe-held * { cursor: grabbing !important; }
  .loupe-tag { position: absolute; inset-inline-start: 50%; inset-block-end: calc(100% + 8px); padding: 5px 9px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; opacity: 0; translate: -50% 4px; pointer-events: none; transition: opacity 0.25s, translate 0.25s; }
  .loupe-hit.is-docked .loupe-tag { inset-block: calc(100% + 8px) auto; }
  .loupe-hit:hover .loupe-tag { opacity: 1; translate: -50% 0; }
  html.loupe-held .loupe-tag { opacity: 0; }

  
  .loupe-poster {
    position: absolute;
    inset-inline-start: calc(var(--lx) - var(--lr) * 1.55);
    inset-block-start: calc(var(--ly) - var(--lr) * 1.45);
    inline-size: calc(var(--lr) * 3.8);
    max-inline-size: none;
    block-size: auto;
    animation: poster-float 6s ease-in-out infinite;
    transition: opacity 0.45s;
  }
  html.has-loupe .loupe-poster { opacity: 0; }
  @keyframes poster-float { 50% { translate: 0 -0.35%; } }
  @media print { .loupe { display: none; } }
}
/* css/sections/hero.css */
@layer sections {
  .hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-block-size: 100dvh;
    padding-block: calc(var(--nav-h) + 2rem) 48px;
    overflow: clip;
  }
  .hero__loupe {
    position: absolute;
    z-index: 0;
    inset-block-start: calc(var(--nav-h) + 0.5rem);
    inset-inline-start: 50%;
    inline-size: 76vw;
    aspect-ratio: 1;
    translate: -50% 0;
    pointer-events: none;
    container-type: inline-size;
    --lx: 42%;
    --lr: 22cqi;
    --ly: calc(var(--lr) * 1.16);
    font-family: var(--font-display);
    font-size: clamp(13px, calc(var(--lr) * 0.162), 26px);
  }
  .hero__loupe .secret-note {
    font-family: var(--font-display);
    font-size: 1em;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 0.95;
    text-align: center;
    translate: -50% calc(-100% - 0.45em);
  }
  .hero-scroll { position: absolute; inset-inline-start: 50%; inset-block-start: 50%; inline-size: 0; block-size: 0; }
  .hero-scroll .secret-note { font-size: 22px; line-height: 0.95; text-align: center; }
  .hero-scroll .secret-line + .secret-line { margin-block-start: 0.4em; font-size: 0.64em; opacity: 0.8; }

  .hero__body { position: relative; z-index: 1; inline-size: 100%; }
  .hero__grid { display: grid; gap: 32px; }
  .hero__title-wrap { position: relative; font-size: clamp(2.75rem, 7.2vw, 6.75rem); }
  .hero__lead { position: relative; }
  .hero__intro { max-inline-size: 30ch; }
  .hero__actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 32px; }

  
  .js .hero__title .kinetic-word { transform-origin: left; animation: hero-focus 1.1s var(--ease-lens) both; animation-delay: calc(var(--w, 0) * 90ms + 0.12s); }
  .js.intro .hero__title .kinetic-word { animation-delay: calc(var(--w, 0) * 90ms + 1.5s); }
  .js .hero__lead { animation: hero-rise 0.9s var(--ease-lens) 0.64s both; }
  .js.intro .hero__lead { animation-delay: 2.02s; }
  @keyframes hero-focus { from { filter: blur(14px); transform: translateY(0.24em) scaleX(0.88); } }
  @keyframes hero-rise { from { filter: blur(6px); transform: translateY(1rem); } }

  @media (min-width: 48rem) {
    .hero { padding-block-end: 64px; }
    .hero__loupe { inset-inline: auto 3%; inline-size: min(44vw, 600px); translate: none; }
    .hero-scroll { inset-block-start: 44%; }
    .hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 40px; }
    .hero__title-wrap { grid-column: span 8; }
    .hero__lead { grid-column: span 4; padding-block-end: 8px; }
  }
}
/* css/sections/build.css */
@layer sections {
  .build { position: relative; }
  .build__static { padding-block: 96px; }
  .build__title { margin-block-end: 48px; }
  .build__list { display: grid; gap: 32px; }
  .build__item { padding-block-start: 20px; }
  .build__item h3 { margin-block-start: 8px; }
  .build__item p { margin-block-start: 8px; max-inline-size: 40ch; color: var(--ink-2); }
  .build__static-cta { margin-block-start: 48px; }
  .build__stage { display: none; }

  
  .build.is-staged { block-size: 480vh; }
  .build.is-staged .build__static { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; }
  .build.is-staged .build__stage { position: sticky; inset-block-start: 0; display: block; block-size: 100svh; overflow: hidden; background: var(--paper); isolation: isolate; }
  .build__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1.2px);
    background-size: 16px 16px;
    opacity: var(--dots, 0);
  }
  .build__board { position: absolute; inset: 0; }

  .build__tag { position: absolute; z-index: 6; inset-block-start: calc(var(--nav-h) + 0.9rem); inset-inline-start: var(--shell); display: none; max-inline-size: calc(var(--board-x, 100vw) - var(--shell) - 1rem); }
  .build__tag span { display: block; }
  .build__tag-title { color: var(--ink); }
  .build__count { position: absolute; z-index: 6; inset-block-start: calc(var(--nav-h) + 0.75rem); inset-inline-end: var(--shell); display: none; text-align: end; }
  .build__count > .measure { display: block; }
  .build__count-value { display: block; font-family: var(--font-display); font-size: clamp(2.25rem, 4.6vw, 5rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 10%, transparent); }
  .build__count-unit { font-size: 0.4em; }

  .build__captions { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 8; padding-block-start: 5rem; background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 82%, transparent) 55%, transparent 100%); }
  .build__captions-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block-end: 28px; }
  .build__caption-box { position: relative; flex: 1; max-inline-size: 34rem; min-block-size: 8.5rem; }
  .build__caption { position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; opacity: 0; transform: translateY(12px); filter: blur(2px); transition: opacity 0.7s var(--ease-lens), transform 0.7s var(--ease-lens), filter 0.7s var(--ease-lens); }
  .build__caption.is-active { opacity: 1; transform: none; filter: none; }
  .build__step { display: flex; align-items: center; gap: 8px; }
  .build__step-n { color: var(--accent-text); }
  .build__step-line { inline-size: 24px; block-size: 1px; background: color-mix(in srgb, var(--ink) 40%, transparent); }
  .build__caption .display-3 { margin-block-start: 6px; }
  .build__caption-text { margin-block-start: 8px; max-inline-size: 42ch; color: var(--ink-2); }
  .build__skip { flex: none; gap: 8px; min-block-size: 44px; margin-block-end: 4px; padding: 0; border: 0; background: none; color: var(--ink); transition: opacity 0.5s var(--ease-lens); }
  .build__skip .icon { inline-size: 12px; block-size: 12px; }
  .build__skip.is-gone { opacity: 0; pointer-events: none; }

  .build__cta { position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 7; transform-origin: 0 0; }
  .build__cta .btn { transition: box-shadow 0.6s var(--ease-lens); }
  .build__cta.is-live .btn { box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent) 70%, transparent); }

  
  .build__click { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
  .build__click-arrow { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .build__click-line, .build__click-head { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.2s ease-in; }
  .build__click-text { position: absolute; font-family: var(--font-hand); font-size: clamp(24px, 2.4vw, 34px); font-weight: 600; line-height: 1; color: var(--accent); white-space: nowrap; rotate: -5deg; clip-path: inset(0 100% 0 0); transition: clip-path 0.2s ease-in; }
  .build__click.is-on .build__click-line { stroke-dashoffset: 0; transition: stroke-dashoffset 0.55s cubic-bezier(0.55, 0, 0.3, 1) 0.1s; }
  .build__click.is-on .build__click-head { stroke-dashoffset: 0; transition: stroke-dashoffset 0.22s ease-out 0.62s; }
  .build__click.is-on .build__click-text { clip-path: inset(0); transition: clip-path 0.9s var(--ease-hand) 0.7s; animation: build-nudge 2.6s ease-in-out 2.2s infinite; }
  @keyframes build-nudge { 0%, 82%, 100% { translate: 0 0; } 88% { translate: var(--nudge-x, -5px) var(--nudge-y, 0); } }

  
  .b-svg { position: absolute; inset: 0; overflow: visible; shape-rendering: geometricPrecision; }
  .b-svg line, .b-svg rect, .b-svg path, .b-svg circle { vector-effect: non-scaling-stroke; }
  .b-guide { stroke: color-mix(in srgb, var(--ink) 38%, transparent); stroke-width: 1; }
  .b-guide--accent, .b-dim, .b-compass, .b-leader, .b-curve, .b-type { stroke: var(--accent); stroke-width: 1; fill: none; }
  .b-type--x { opacity: 0.5; }
  .b-axis { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 5; opacity: 0.7; }
  .b-cross { stroke: var(--ink); stroke-width: 1; }
  .b-wire { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; fill: none; }
  .b-bar { fill: color-mix(in srgb, var(--ink) 12%, transparent); }
  .b-col { fill: color-mix(in srgb, var(--accent) 7%, transparent); }
  .b-frame { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; fill: none; }
  .b-crop { stroke: color-mix(in srgb, var(--ink) 30%, transparent); stroke-width: 1; }
  .b-handle { fill: var(--paper); stroke: var(--accent); stroke-width: 1; }
  .b-svg text { font-family: var(--font-mono); font-size: 10px; fill: var(--steel); }
  .b-svg .b-label--accent { fill: var(--accent-text); }

  .b-under, .b-over { position: absolute; inset: 0; }
  .b-over > * { position: absolute; }
  .b-board { position: absolute; border-radius: 12px; box-shadow: 0 0 0 1px var(--line), 0 calc(var(--lift, 0) * 40px) calc(var(--lift, 0) * 80px) calc(var(--lift, 0) * -24px) rgba(18, 18, 20, calc(var(--lift, 0) * 0.28)); }
  .b-board-fill { position: absolute; inset: 0; border-radius: inherit; background: var(--paper); opacity: 0; }
  .b-bardot { inline-size: 6px; block-size: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 22%, transparent); }
  .b-logo { color: var(--ink); }
  .b-logo .logo { block-size: 100%; inline-size: auto; }
  .b-nav { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); line-height: 1; white-space: nowrap; }
  .b-head { font-family: var(--font-wide); font-weight: 500; line-height: 0.98; letter-spacing: -0.035em; color: var(--ink); white-space: nowrap; }
  .b-head span { display: inline-block; font-variation-settings: "opsz" 96, "wdth" var(--wdth, 100); }
  .b-lead { font-family: var(--font-sans); line-height: 1.45; color: var(--ink-2); white-space: nowrap; }
  .b-lead div { display: block; }
  .b-second { display: flex; align-items: center; justify-content: space-between; padding-inline: 10px 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); white-space: nowrap; }
  .b-second i { inline-size: 70%; block-size: 70%; aspect-ratio: 1; border-radius: 50%; background: var(--paper-2); }
  .b-img { overflow: hidden; border-radius: 8px; background: linear-gradient(135deg, var(--paper-2), var(--ink)); }
  .b-img img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .b-url { display: flex; align-items: center; justify-content: center; gap: 6px; inline-size: 120px; block-size: 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); font-family: var(--font-mono); font-size: 10px; color: var(--ink); }
  .b-url::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
  .b-chip { display: grid; place-items: center; block-size: 18px; border-radius: 999px; background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; }
  .b-code { overflow: hidden; border-radius: 12px; background: #121214; color: #f4f4f2; font-family: var(--font-mono); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); }
  .b-code__head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(244 244 242 / 0.5); }
  .b-code__head::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }
  .b-code__line { display: flex; gap: 14px; padding-inline: 14px; white-space: pre; }
  .b-code__n { inline-size: 1.2em; text-align: end; color: rgb(244 244 242 / 0.3); }
  .b-code .tag { color: #ff6b7d; }
  .b-code .attr { color: rgb(238 238 234 / 0.62); }
  .b-code .str { color: #f4f4f2; }
  .b-code .punct { color: rgb(238 238 234 / 0.38); }
  .b-swatch { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; line-height: 1.2; }
  .b-swatch--left { flex-direction: row-reverse; text-align: end; }
  .b-swatch--below { flex-direction: column; text-align: center; }
  .b-swatch i { flex: none; border-radius: 50%; border: 1px solid var(--line); }
  .b-swatch b { display: block; font-weight: 400; color: var(--ink); }
  .b-swatch small { display: block; font-size: 10px; color: var(--steel); }
  .b-dot { inline-size: 8px; block-size: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--accent); }
  .b-ring { inline-size: 8px; block-size: 8px; margin: -4px 0 0 -4px; border: 1px solid var(--accent); border-radius: 50%; }
  .b-final { font-family: var(--font-mono); font-size: 10px; color: var(--accent-text); white-space: nowrap; }

  @media (min-width: 48rem) {
    .build__static { padding-block: 96px; }
    .build__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .build__count { display: block; }
    .build__caption-box { min-block-size: 7.5rem; }
    .build__captions-inner { padding-block-end: 36px; }
  }
  @media (min-width: 80rem) {
    .build__tag { display: block; }
  }
}
/* css/sections/stance.css */
@layer sections {
  .stance { position: relative; padding-block: 96px; overflow-x: clip; }
  .stance__statement-wrap { position: relative; inline-size: fit-content; max-inline-size: 100%; }
  .stance__statement { max-inline-size: 24ch; }
  .stance__principles { display: grid; gap: 40px 48px; margin-block-start: 64px; }
  .stance__principle { position: relative; padding-block-start: 20px; }
  .stance__principle p { margin-block-start: 12px; color: var(--ink-2); }
  @media (min-width: 48rem) {
    .stance { padding-block: 160px; }
    .stance__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 96px; }
  }
  @media (min-width: 64rem) {
    .stance__principles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  }
}
/* css/sections/cta.css */
@layer sections {
  .cta-band { padding-block: 96px 40px; overflow-x: clip; }
  .cta-band__panel { position: relative; overflow: hidden; padding: 64px 24px; border-radius: var(--radius-media); background: var(--ink); color: var(--paper); }
  
  .cta-band__disc { position: absolute; inset-inline-end: -10%; inset-block-start: calc(8rem - 70vw); inline-size: 70vw; aspect-ratio: 1; border-radius: 50%; background: var(--accent); pointer-events: none; }
  .cta-band__body { position: relative; max-inline-size: 28ch; }
  .cta-band .lead { margin-block-start: 20px; color: color-mix(in srgb, var(--paper) 75%, transparent); }
  .cta-band__actions { margin-block-start: 40px; }
  .cta-band__button { position: relative; display: inline-block; }
  .cta-band .secret-mark, .cta-band .secret-note { --accent: #ff6b7d; }
  @media (min-width: 48rem) {
    .cta-band { padding-block: 160px 64px; }
    .cta-band__panel { padding: 112px 64px; }
    .cta-band__disc { inset-inline-end: -6%; inset-block-start: -45%; inline-size: 46vw; }
  }
}
/* css/components/frames.css */
@layer components {
  
  .measure-frame { position: relative; }
  .mf-h, .mf-v { position: absolute; z-index: 4; background: var(--accent); opacity: 0; pointer-events: none; transition: opacity 0.2s; }
  .mf-h { inset-inline: 0; inset-block-start: 0; block-size: 1px; }
  .mf-v { inset-block: 0; inset-inline-start: 0; inline-size: 1px; }
  .mf-xy {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 5;
    padding: 3px 6px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: var(--paper);
    color: var(--ink);
    font-size: 11px;
    white-space: pre;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
  }
  .is-measuring > .mf-h, .is-measuring > .mf-v, .is-measuring > .mf-xy { opacity: 1; }

  
  [data-hover-lens] { position: relative; }
  .is-lensing { cursor: none; }
  .hover-lens-glass {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 3;
    overflow: hidden;
    border-radius: 50%;
    opacity: 0;
    scale: 0.6;
    pointer-events: none;
    box-shadow: 0 0 0 1px var(--accent), 0 0 0 5px color-mix(in srgb, var(--paper) 85%, transparent), 0 0 0 6px var(--line), 0 24px 50px -18px rgba(0, 0, 0, 0.45);
    transition: opacity 0.25s var(--ease-lens), scale 0.35s var(--ease-lens);
  }
  .hover-lens-glass::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 6px; block-size: 6px; margin: -3px; border-radius: 50%; background: var(--accent); }
  .is-lensing > .hover-lens-glass { opacity: 1; scale: 1; }
  .hover-lens-glass img { position: absolute; inset-block-start: 0; inset-inline-start: 0; max-inline-size: none; transform-origin: 0 0; }
}
/* css/components/inner.css */
@layer components {
  
  .inner-section { margin-block-start: 6rem; overflow-x: clip; }
  @media (min-width: 48rem) { .inner-section { margin-block-start: 10rem; } }

  .inner-hero { display: grid; gap: 2rem; padding-block: calc(var(--nav-h) + 3rem) 3rem; overflow-x: clip; }
  .inner-hero__title-wrap { position: relative; }
  .inner-hero h1 { overflow-wrap: break-word; }
  .inner-hero .lead { max-inline-size: 32ch; }
  @media (min-width: 48rem) {
    .inner-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; padding-block: calc(var(--nav-h) + 6rem) 5rem; }
    .inner-hero__title-wrap { grid-column: 1 / span 8; }
    .inner-hero__lead { grid-column: 9 / span 4; padding-block-end: 0.5rem; }
  }

  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; }
  .breadcrumb__link { min-block-size: 44px; }
  .breadcrumb__current { color: var(--ink); }

  .media-box { position: relative; display: block; overflow: clip; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  .media-box > picture, .media-box > .media--missing { position: absolute; inset: 0; }
  .media-box img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  @supports (animation-timeline: view()) {
    .js .parallax-img img { scale: 1.18; animation: parallax-img linear both; animation-timeline: view(); }
  }
  @keyframes parallax-img { from { translate: 0 -7%; } to { translate: 0 7%; } }
  @media (prefers-reduced-motion: reduce) {
    .js .parallax-img img { animation: none; scale: 1; translate: none; }
  }
  .caption-dot { display: flex; align-items: center; gap: 0.5rem; }
  .caption-dot::before { content: ""; flex-shrink: 0; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--accent); }

  .faq { border-block-start: 1px solid var(--line); interpolate-size: allow-keywords; }
  .faq__item { border-block-end: 1px solid var(--line); }
  .faq__item::details-content { block-size: 0; overflow: clip; transition: block-size 0.5s var(--ease-lens), content-visibility 0.5s allow-discrete; }
  .faq__item[open]::details-content { block-size: auto; }
  .faq-q { display: flex; align-items: flex-start; gap: 1rem; padding-block: 1.4rem; list-style: none; cursor: pointer; transition: color 0.3s var(--ease-lens); }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q:hover { color: var(--accent-deep); }
  .faq-q:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
  .faq-q__n { inline-size: 2rem; flex-shrink: 0; padding-block-start: 0.375rem; }
  .faq-q__text { flex: 1; min-inline-size: 0; }
  .faq-plus { position: relative; flex-shrink: 0; inline-size: 1.5rem; block-size: 1.5rem; transition: transform 0.45s var(--ease-lens), color 0.45s var(--ease-lens); }
  .faq-plus::before, .faq-plus::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 14px; block-size: 1.5px; background: currentColor; translate: -50% -50%; }
  .faq-plus::after { rotate: 90deg; }
  .faq__item[open] .faq-plus { transform: rotate(45deg); color: var(--accent); }
  .faq-a { padding: 0 2.5rem 1.75rem 3rem; }
  .faq-a p { max-inline-size: 58ch; color: var(--ink-2); }

  .next-link { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; padding-block-start: 2rem; }
  .next-link__text { display: grid; gap: 0.5rem; min-inline-size: 0; }
  .next-link__title { overflow-wrap: break-word; transition: color 0.3s var(--ease-lens); }
  .next-link:hover .next-link__title { color: var(--accent-deep); }
  .next-link__circle { display: grid; flex-shrink: 0; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform 0.5s var(--ease-lens); }
  .next-link__circle .icon { inline-size: 18px; block-size: 18px; }
  .next-link:hover .next-link__circle { transform: rotate(45deg); }

  .work-cards { display: grid; gap: 3rem 1.5rem; margin-block-start: 2.5rem; }
  @media (min-width: 48rem) { .work-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .work-card { display: block; }
  .work-card__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  .work-card__media > picture, .work-card__media > .media--missing { position: absolute; inset: 0; }
  .work-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale 0.7s var(--ease-lens); }
  .work-card__media--shot img { object-position: left top; }
  .work-card:hover .work-card__media img { scale: 1.03; }
  .work-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-block-start: 1rem; }
  .work-card__title { transition: color 0.3s var(--ease-lens); }
  .work-card:hover .work-card__title { color: var(--accent-deep); }
  .work-card__type { flex-shrink: 0; }
  .work-card__line { display: block; margin-block-start: 0.25rem; font-size: 0.875rem; color: var(--ink-2); }

  .plan-card { display: flex; flex-direction: column; block-size: 100%; padding: 1.75rem; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  .plan-card--featured { border-color: var(--ink); background: var(--ink); color: var(--paper); }
  .plan-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
  .plan-card__for { margin-block-start: 0.5rem; color: var(--ink-2); }
  .plan-card--featured .plan-card__for, .plan-card--featured .plan-card__flag { color: color-mix(in srgb, var(--paper) 70%, transparent); }
  .tick-list { display: grid; gap: 0.5rem; margin-block: 1.75rem 2rem; font-size: 0.875rem; }
  .tick-list li { position: relative; padding-inline-start: 1.5rem; }
  .tick-list li::before { content: ""; position: absolute; inset-block-start: 0.72em; inset-inline-start: 0; inline-size: 0.75rem; block-size: 1px; background: var(--accent); }
  .plan-card__foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-start: auto; padding-block-start: 1.5rem; border-block-start: 1px solid var(--line); }
  .plan-card--featured .plan-card__foot { border-color: color-mix(in srgb, var(--paper) 20%, transparent); }
  @media (min-width: 48rem) { .plan-card { padding: 2.25rem; } }
}
/* css/components/sketch.css */
@layer components {
  
  .sketch { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
  
  @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
    .js svg[data-sketch]:not(.is-armed) { visibility: hidden; animation: sketch-failsafe 0s 2.5s forwards; }
  }
  @keyframes sketch-failsafe { to { visibility: visible; } }
  .sketch :where(path, line, rect, circle, polyline, ellipse) { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .sketch .sk-thin { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: 1; }
  .sketch .sk-guide { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; opacity: 0.2; }
  .sketch .sk-accent { stroke: var(--accent); }
  .sketch .sk-thick { stroke-width: 2.4; }
  .sketch .sk-type { stroke-width: 5; }
  .sketch .sk-col { stroke-width: 9; stroke-linecap: butt; }
  .sketch .sk-bar { stroke: var(--accent); stroke-width: 10; }
  .sketch .sk-dot { fill: var(--ink); stroke: none; }
  .sketch .sk-fill, .sketch .sk-flag { fill: var(--accent); stroke: none; }
  .sketch text { font-family: var(--font-mono); font-size: 11px; fill: var(--steel); stroke: none; }
  .sketch .sk-text--on { fill: var(--paper); }
  .sketch .sk-check { stroke: #fff; stroke-width: 1.8; }
}
/* css/sections/services.css */
@layer sections {
  .services { padding-block: 96px; overflow-x: clip; }
  .services__title { max-inline-size: 18ch; }
  .services__fan-wrap { position: relative; margin-block-start: 48px; }

  .fan { display: flex; flex-direction: column; gap: 8px; }
  .fan__panel {
    position: relative;
    overflow: hidden;
    min-block-size: 4.25rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-media);
    background: var(--paper-2);
    transition: flex 0.7s var(--ease-lens), min-height 0.7s var(--ease-lens);
  }
  .fan__panel.is-active { min-block-size: 22rem; }
  .fan__media { position: absolute; inset: 0; opacity: 0.4; filter: grayscale(1); transition: opacity 0.7s var(--ease-lens), filter 0.7s var(--ease-lens); }
  .fan__media picture, .fan__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .fan__media::after { content: ""; position: absolute; inset: 0; opacity: 0; background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 70%, transparent) 42%, transparent 78%); transition: opacity 0.7s var(--ease-lens); }
  .fan__panel.is-active .fan__media { opacity: 1; filter: none; }
  .fan__panel.is-active .fan__media::after { opacity: 1; }

  .fan__label { display: none; }
  .fan__toggle { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; block-size: 4.25rem; padding-inline: 20px; border: 0; background: transparent; color: var(--ink); text-align: start; }
  .fan__plus { display: grid; place-items: center; flex: none; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--paper); transition: transform 0.5s var(--ease-lens); }
  .fan__plus .icon { inline-size: 12px; block-size: 12px; }
  .fan__toggle[aria-expanded="true"] .fan__plus { transform: rotate(45deg); }

  .fan__body { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: flex-end; block-size: 100%; min-block-size: inherit; padding: 80px 20px 20px; }
  .fan__title { display: none; }
  .fan__copy { opacity: 0; transform: translateY(16px); transition: opacity 0.15s, transform 0.15s; }
  .fan__panel.is-active .fan__copy { opacity: 1; transform: none; transition: opacity 0.7s var(--ease-lens) 0.3s, transform 0.7s var(--ease-lens) 0.3s; }
  .fan__copy p { margin-block-start: 8px; color: var(--ink-2); }
  .fan__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-block-start: 16px; font-size: 14px; }
  .fan__price { position: relative; color: var(--ink); }
  .no-js .fan__copy { opacity: 1; transform: none; }

  @media (min-width: 48rem) {
    .services { padding-block: 160px; }
    .services__fan-wrap { margin-block-start: 64px; }
    .fan { flex-direction: row; block-size: 34rem; }
    .fan__panel { flex: 1 1 0; min-block-size: 0; min-inline-size: 0; }
    .fan__panel.is-active { flex: 3.4 1 0; min-block-size: 0; }
    .fan__toggle { display: none; }
    .fan__label {
      position: absolute;
      inset-block: 28px;
      inset-inline-start: 24px;
      z-index: 6;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: opacity 0.5s var(--ease-lens) 0.3s, transform 0.5s var(--ease-lens) 0.3s;
    }
    .fan__label .measure { color: var(--ink-2); }
    .fan__label-title { writing-mode: vertical-rl; rotate: 180deg; white-space: nowrap; }
    .fan__panel.is-active .fan__label { opacity: 0; transform: translateY(16px); transition-duration: 0.2s; transition-delay: 0s; }
    .fan__body { padding: 28px; }
    .fan__panel:not(.is-active) .fan__body { pointer-events: none; }
    .fan__title { display: block; opacity: 0; transform: translateY(12px); transition: opacity 0.2s, transform 0.2s; }
    .fan__panel.is-active .fan__title { opacity: 1; transform: none; transition: opacity 0.5s var(--ease-lens) 0.3s, transform 0.5s var(--ease-lens) 0.3s; }
    .fan__copy { max-inline-size: 36ch; }
    .no-js .fan__panel:hover, .no-js .fan__panel:focus-within { flex-grow: 3.4; }
  }
}
/* css/sections/work.css */
@layer sections {
  .work { padding-block: 96px; overflow-x: clip; }
  .work__title { max-inline-size: 16ch; }
  .work__stack { display: grid; gap: 24px; }
  
  .work__card { position: sticky; inset-block-start: calc(max(var(--nav-h), var(--consent-clear, 0px)) + 1.25rem * var(--n)); transform-origin: top; }
  .work__link { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  .work__text { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 24px; }
  .work__text h3 { margin-block-start: 16px; }
  .work__text .lead { margin-block-start: 12px; max-inline-size: 30ch; }
  .work__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
  .work__tags { display: flex; flex-wrap: wrap; gap: 8px; }
  .work__tags li { padding: 4px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; }
  .work__cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; }
  .work__arrow { display: grid; place-items: center; inline-size: 32px; block-size: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); transition: transform 0.5s var(--ease-lens); }
  .work__arrow .icon { inline-size: 14px; block-size: 14px; }
  .work__link:hover .work__arrow, .work__link:focus-visible .work__arrow { transform: rotate(45deg); }
  .work__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
  .work__media picture, .work__media img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
  .work__media--shot img { object-position: left top; }
  @media (min-width: 48rem) {
    .work { padding-block: 160px; }
    .work__link { grid-template-columns: repeat(12, minmax(0, 1fr)); min-block-size: 32rem; }
    .work__text { grid-column: span 5; padding: 40px; }
    .work__media { grid-column: span 7; aspect-ratio: auto; }
  }
}
/* css/sections/journal.css */
@layer sections {
  .journal { padding-block: 96px; overflow-x: clip; }
  .journal__grid { display: grid; gap: 48px 24px; }
  .journal__link { display: block; }
  .frame-assemble { position: relative; }
  .journal__media { overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  .journal__media picture, .journal__media img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .journal__meta { margin-block-start: 16px; }
  .journal__title { margin-block-start: 8px; transition: color 0.3s; }
  .journal__link:hover .journal__title, .journal__link:focus-visible .journal__title { color: var(--accent-deep); }
  .journal__excerpt { position: relative; margin-block-start: 8px; color: var(--ink-2); }

  
  .cx-guide { position: absolute; z-index: 2; background: var(--accent); opacity: 0; pointer-events: none; }
  .cx-guide--top { inset-inline: -1.25rem; inset-block-start: 0; block-size: 1px; transform-origin: left; }
  .cx-guide--bottom { inset-inline: -1.25rem; inset-block-end: 0; block-size: 1px; transform-origin: right; }
  .cx-guide--left { inset-block: -1.25rem; inset-inline-start: 0; inline-size: 1px; transform-origin: bottom; }
  .cx-guide--right { inset-block: -1.25rem; inset-inline-end: 0; inline-size: 1px; transform-origin: top; }
  .cx-label { position: absolute; inset-block-end: calc(100% + 0.55rem); inset-inline-start: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--accent-text); white-space: pre; opacity: 0; }
  .is-built .cx-guide--top, .is-built .cx-guide--bottom { animation: cx-h 1.7s var(--ease-lens) var(--d, 0ms) both; }
  .is-built .cx-guide--left, .is-built .cx-guide--right { animation: cx-v 1.7s var(--ease-lens) calc(var(--d, 0ms) + 90ms) both; }
  .is-built .cx-label { animation: cx-label 1.9s var(--ease-lens) calc(var(--d, 0ms) + 120ms) both; }
  @keyframes cx-h { 0% { transform: scaleX(0); opacity: 0.9; } 38% { transform: scaleX(1); opacity: 0.9; } 100% { transform: scaleX(1); opacity: 0; } }
  @keyframes cx-v { 0% { transform: scaleY(0); opacity: 0.9; } 38% { transform: scaleY(1); opacity: 0.9; } 100% { transform: scaleY(1); opacity: 0; } }
  @keyframes cx-label { 0% { opacity: 0; transform: translateY(4px); } 20%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

  
  @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
    .js [data-assemble] .cx-body { clip-path: inset(0 0 100%); transition: clip-path 1s var(--ease-lens) calc(var(--d, 0ms) + 0.38s); }
    .js [data-assemble] .cx-body img { transform: scale(1.08); transition: transform 1.6s var(--ease-lens) calc(var(--d, 0ms) + 0.38s); }
    .js [data-assemble] [data-cx="type"] { clip-path: inset(0 100% 0 0); transition: clip-path 0.8s var(--ease-hand) calc(var(--d, 0ms) + 0.52s); }
    .js [data-assemble] [data-cx="rise"] { opacity: 0; filter: blur(4px); translate: 0 0.9rem; transition: opacity 0.85s var(--ease-lens), filter 0.85s var(--ease-lens), translate 0.85s var(--ease-lens); transition-delay: calc(var(--d, 0ms) + 660ms + var(--o, 0ms)); }
    .js [data-assemble].is-built .cx-body { clip-path: inset(0); }
    .js [data-assemble].is-built .cx-body img { transform: none; }
    .js [data-assemble].is-built [data-cx="type"] { clip-path: inset(0); }
    .js [data-assemble].is-built [data-cx="rise"] { opacity: 1; filter: none; translate: 0 0; }
    .js:not(.reveals-ready) [data-assemble]:not(.is-built) :is(.cx-body, [data-cx]) { animation: reveal-failsafe 0s 3s forwards; }
  }

  @media (min-width: 48rem) {
    .journal { padding-block: 128px; }
    .journal__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
}
/* css/sections/service.css */
@layer sections {
  
  .service-hero { padding-block: calc(var(--nav-h) + 2.5rem) 3.5rem; overflow-x: clip; }
  .service-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; margin-block-start: 1.5rem; }
  .service-hero__title-wrap { position: relative; }
  .service-hero__title { max-inline-size: 14ch; overflow-wrap: break-word; }
  .service-hero__tagline { max-inline-size: 30ch; margin-block-start: 1.5rem; }
  .service-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; column-gap: 2rem; max-inline-size: 34rem; margin-block-start: 2.5rem; }
  .service-facts dt { border-block-start: 1px solid var(--line); padding-block-start: 0.85rem; }
  .service-facts dd { margin: 0.375rem 0 0; }
  .service-facts dt:nth-of-type(odd), .service-facts dd:nth-of-type(odd) { grid-column: 1; }
  .service-facts dt:nth-of-type(even), .service-facts dd:nth-of-type(even) { grid-column: 2; }
  .service-facts dt:nth-of-type(n + 3) { margin-block-start: 1.25rem; }
  .service-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-block-start: 2.5rem; }
  .service-sheet {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 5 / 4;
    padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 4vw, 3rem);
    border: 1px solid var(--line);
    border-radius: var(--radius-media);
    background-color: var(--paper-2);
    background-image:
      linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
    background-size: 24px 24px;
  }
  .service-sheet::before, .service-sheet::after { content: ""; position: absolute; inline-size: 18px; block-size: 18px; border: 0 solid var(--accent); }
  .service-sheet::before { inset-block-start: 12px; inset-inline-start: 12px; border-block-start-width: 1.5px; border-inline-start-width: 1.5px; }
  .service-sheet::after { inset-block-end: 12px; inset-inline-end: 12px; border-block-end-width: 1.5px; border-inline-end-width: 1.5px; }
  .service-sheet__label { position: absolute; inset-block-start: 14px; inset-inline-start: 40px; }
  .service-sheet__scale { position: absolute; inset-block-end: 14px; inset-inline-end: 40px; }
  .service-sheet .sketch { max-inline-size: 440px; }
  @media (min-width: 48rem) {
    .service-hero { padding-block: calc(var(--nav-h) + 4.5rem) 6rem; }
    .service-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
    .service-hero__main { grid-column: 1 / span 7; }
    .service-sheet { grid-column: 8 / span 5; }
  }

  .service-about { display: grid; gap: 3.5rem; margin-block-start: 0; }
  .service-about__intro { margin-block-start: 2rem; color: var(--ink); }
  .service-about__body { display: grid; gap: 1.25rem; margin-block-start: 1.5rem; color: var(--ink-2); }
  .service-about__body p { max-inline-size: 60ch; line-height: 1.65; }
  .service-about__media { display: grid; align-content: start; gap: 2rem; }
  .service-about__frame { aspect-ratio: 4 / 5; }
  .service-about__inset { position: relative; display: grid; gap: 0.75rem; margin: 0; }
  .service-about__inset-frame { aspect-ratio: 4 / 3; box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.35); }
  @media (min-width: 40rem) {
    .service-about__inset { inline-size: 70%; margin-inline-start: auto; }
  }
  @media (min-width: 48rem) {
    .service-about { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .service-about__text { grid-column: 1 / span 6; }
    .service-about__media { grid-column: 7 / span 6; }
    .service-about__frame { aspect-ratio: 5 / 6; }
    .service-about__inset { margin-block-start: -7rem; }
  }
  @media (min-width: 64rem) {
    .service-about__text { grid-column: 1 / span 5; }
  }

  .service-details { display: grid; gap: 4rem; }
  .service-list, .service-steps { margin-block-start: 2rem; }
  .service-list li { display: grid; grid-template-columns: 3rem 1fr; align-items: baseline; gap: 0.5rem; padding-block: 0.95rem; border-block-start: 1px solid var(--line); }
  .service-list li:last-child { border-block-end: 1px solid var(--line); }
  .service-steps { position: relative; display: grid; gap: 2.25rem; padding-inline-start: 2.5rem; }
  .service-steps::before { content: ""; position: absolute; inset-block: 0.35rem; inset-inline-start: 0.35rem; inline-size: 1px; background: color-mix(in srgb, var(--ink) 25%, transparent); transform-origin: top; transition: transform 1.4s var(--ease-lens); }
  .service-steps li { position: relative; }
  .service-steps li::before {
    content: "";
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-start: calc(-2.5rem + 0.35rem - 5px);
    inline-size: 11px;
    block-size: 11px;
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    background: var(--accent);
    transition: background-color 0.4s var(--ease-lens) calc(0.25s + var(--i, 0) * 0.28s), scale 0.4s var(--ease-lens) calc(0.25s + var(--i, 0) * 0.28s);
  }
  .service-steps__text { margin-block-start: 0.25rem; max-inline-size: 44ch; color: var(--ink-2); }
  @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
    .js .service-steps[data-reveal]:not(.is-in)::before { transform: scaleY(0); }
    .js .service-steps[data-reveal]:not(.is-in) li::before { scale: 0; background: var(--paper); }
  }
  @media (min-width: 48rem) {
    .service-details { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .service-details__col { grid-column: 1 / span 6; }
    .service-details__col--steps { grid-column: 7 / span 6; }
  }
  @media (min-width: 64rem) {
    .service-details__col:first-child { grid-column: 1 / span 5; }
  }

  .service-faq { display: grid; gap: 2.5rem; scroll-margin-block-start: calc(var(--nav-h) + 1rem); }
  .service-faq__head .lead { max-inline-size: 28ch; margin-block-start: 1rem; }
  @media (min-width: 48rem) {
    .service-faq { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .service-faq__head { position: sticky; inset-block-start: calc(var(--nav-h) + 1.5rem); align-self: start; grid-column: 1 / span 4; }
    .service-faq__list { grid-column: 5 / span 8; }
  }

  .service-next { margin-block-start: 6rem; }
  @media (min-width: 48rem) { .service-next { margin-block-start: 8rem; } }

  .service-plans__title { max-inline-size: 18ch; }
  .service-plans__lead { max-inline-size: 46ch; margin-block-start: 1rem; }
  .service-plans__cards { display: grid; gap: 1rem; margin-block-start: 3rem; }
  @media (min-width: 48rem) { .service-plans__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (min-width: 64rem) { .service-plans__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
/* css/sections/services-index.css */
@layer sections {
  
  .services-hero { overflow-x: clip; }
  .services-list__item { position: relative; scroll-margin-block-start: var(--nav-h); }
  
  .service-row__link::after { content: ""; position: absolute; inset: 0; }
  .service-row__link:focus-visible { outline: none; }
  .services-list__item:has(.service-row__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
  .services-list__note { padding-block-start: 1.5rem; }
  .service-row { display: grid; gap: 2rem; padding-block: 3rem; }
  .service-row__sketch { display: block; max-inline-size: 240px; }
  .service-row__main { display: block; min-inline-size: 0; }
  .service-row__title { margin-block-start: 0.5rem; overflow-wrap: break-word; transition: color 0.3s var(--ease-lens); }
  .service-row__tagline { display: block; max-inline-size: 30ch; margin-block-start: 0.75rem; }
  .service-row__summary { display: block; max-inline-size: 52ch; margin-block-start: 1rem; font-size: 0.875rem; line-height: 1.625; color: var(--ink-2); }
  .service-row__facts { display: grid; align-content: start; }
  .service-row__facts dd { margin: 0.25rem 0 0; }
  .service-row__go { display: flex; align-items: center; gap: 0.75rem; }
  .service-row__closer { font-size: 0.875rem; font-weight: 500; }
  .service-row__circle {
    display: grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border: 1px solid var(--line);
    border-radius: 50%;
    transition: transform 0.5s var(--ease-lens), background-color 0.5s var(--ease-lens), border-color 0.5s var(--ease-lens), color 0.5s var(--ease-lens);
  }
  .service-row__circle .icon { inline-size: 18px; block-size: 18px; }
  .services-list__item:hover .service-row__title, .services-list__item:has(.service-row__link:focus-visible) .service-row__title { color: var(--accent-deep); }
  .services-list__item:hover .service-row__circle { transform: rotate(45deg); border-color: var(--ink); background: var(--ink); color: var(--paper); }
  @media (min-width: 48rem) {
    .service-row { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 2.5rem; padding-block: 4rem; }
    .service-row__sketch { grid-column: 1 / span 3; }
    .service-row__main { grid-column: 4 / span 5; }
    .service-row__facts { grid-column: 9 / span 3; }
    .service-row__go { grid-column: 12 / span 1; justify-content: flex-end; }
    .service-row__closer { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }
}
/* css/components/device.css */
@layer components {
  
  .frame-browser { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  .frame-browser__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    block-size: 2.25rem;
    padding-inline: 0.9rem;
    border-block-end: 1px solid var(--line);
    background: var(--paper);
  }
  .frame-browser__dots { display: flex; flex-shrink: 0; gap: 6px; }
  .frame-browser__dots i { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--line); }
  .frame-browser__dots--ghost { visibility: hidden; }
  .frame-browser__url {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-inline-size: 0;
    overflow: hidden;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .frame-browser__url::before { content: ""; flex-shrink: 0; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--accent); }
  .frame-browser__screen { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
  .frame-phone { inline-size: min(100%, 19rem); margin-inline: auto; padding: 0.55rem; border: 1px solid var(--line); border-radius: 2.4rem; background: var(--paper); }
  .frame-phone__screen { position: relative; overflow: hidden; aspect-ratio: 390 / 844; border: 1px solid var(--line); border-radius: 1.9rem; background: var(--paper-2); }
  :is(.frame-browser__screen, .frame-phone__screen) > :is(picture, video, .media--missing) { position: absolute; inset: 0; }
  :is(.frame-browser__screen, .frame-phone__screen) :is(img, video) { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; }
}
/* css/sections/case.css */
@layer sections {
  
  .case-hero { padding-block: calc(var(--nav-h) + 3rem) 2.5rem; overflow-x: clip; }
  .case-hero__title-wrap { position: relative; margin-block-start: 1rem; }
  .case-hero__title { max-inline-size: 14ch; overflow-wrap: break-word; }
  .case-hero__grid { display: grid; gap: 2rem; margin-block-start: 2rem; }
  .case-hero__lead { max-inline-size: 40ch; }
  @media (min-width: 48rem) {
    .case-hero { padding-block-start: calc(var(--nav-h) + 5rem); }
    .case-hero__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
    .case-hero__lead { grid-column: 1 / span 7; }
    .case-hero__visit { grid-column: 8 / span 5; justify-self: end; }
  }

  .case-cover, .case-gallery { overflow-x: clip; }
  
  @keyframes cover-unveil { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
  
  @keyframes cover-replay { from { clip-path: inset(0 0 100%); } to { clip-path: inset(0); } }
  @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
    .js .case-cover > * { animation: cover-unveil 1.1s var(--ease-lens) backwards; }
    .js .case-cover.is-replay > * { animation-name: cover-replay; }
  }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
      .reveals-ready .case-cover.is-in:not([data-leave="off"]) > * {
        animation: cover-unveil 1.1s var(--ease-lens) backwards, clip-leave linear both;
        animation-timeline: auto, view();
        animation-range: normal, exit 10% exit 100%;
      }
      .reveals-ready .case-cover.is-in.is-replay:not([data-leave="off"]) > * { animation-name: cover-replay, clip-leave; }
    }
  }
  .case-body { display: grid; gap: 3rem; margin-block-start: 3.5rem; }
  .case-facts__list { display: grid; }
  .case-facts__list dt { margin-block-start: 1.25rem; padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); }
  .case-facts__list dt:first-child { margin-block-start: 0; }
  .case-facts__list dd { margin-block-start: 0.25rem; overflow-wrap: break-word; }
  .case-pill { display: inline-block; margin: 0 0.4rem 0.4rem 0; padding: 0.125rem 0.625rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; }
  .case-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-block-end: 3rem; }
  .case-figure { padding-block-start: 1rem; }
  .case-figure__value { display: block; font-size: clamp(1.875rem, 4.6vw, 4rem); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .case-figure__caption { display: block; margin-block-start: 0.25rem; font-size: 0.875rem; color: var(--ink-2); }
  .case-story h2:first-child { margin-block-start: 0; }
  .case-quote__by { margin-block-start: 0.75rem; font-size: 0.75rem; }

  .case-gallery { display: grid; gap: 1.5rem; margin-block-start: 4rem; }
  .case-shot figcaption { margin-block-start: 0.75rem; }
  .case-shot--phone figcaption { text-align: center; }
  .case-next { margin-block-start: 6rem; }

  @media (min-width: 48rem) {
    .case-body { grid-template-columns: repeat(12, minmax(0, 1fr)); margin-block-start: 6rem; }
    .case-facts { grid-column: 1 / span 4; }
    .case-facts__list { position: sticky; inset-block-start: calc(var(--nav-h) + 1rem); }
    .case-main { grid-column: 5 / span 8; min-inline-size: 0; }
    .case-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .case-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-start: 6rem; }
    .case-shot--browser { grid-column: 1 / -1; }
    .case-next { margin-block-start: 10rem; }
  }
}
/* css/sections/cases-index.css */
@layer sections {
  
  .cases-hero { overflow-x: clip; }
  .cases-list { overflow-x: clip; padding-block-end: 1.5rem; }
  .cases-list__rows { display: grid; gap: 6rem; }
  .case-row { display: grid; align-items: center; gap: 2.5rem; scroll-margin-block-start: var(--nav-h); }
  .case-row__counter { margin-block-end: 1rem; }
  .case-reel { position: relative; display: block; }
  .case-reel__video { opacity: 0; transition: opacity 0.5s var(--ease-lens); }
  .case-reel.is-playing .case-reel__video { opacity: 1; }
  .case-reel__outline { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1px; opacity: 0; pointer-events: none; }
  .case-reel__bar { position: absolute; inset-inline: 0; inset-block-start: 2.25rem; block-size: 1px; background: var(--ink); opacity: 0; pointer-events: none; }
  .case-reel__scan { position: absolute; inset-inline: 0; inset-block-start: 2.25rem; block-size: 2px; background: var(--accent); box-shadow: 0 0 14px var(--accent); opacity: 0; pointer-events: none; }
  .case-reel__metric {
    position: absolute;
    inset-block-end: -1.4rem;
    inset-inline-end: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-inline-size: calc(100% - 2.5rem);
    padding: 0.55rem 1rem 0.6rem;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    box-shadow: 0 14px 30px -16px rgb(0 0 0 / 0.45);
  }
  .case-reel__value { font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--accent); }
  .case-reel__label { max-inline-size: 16ch; font-size: 11px; line-height: 1.3; color: color-mix(in srgb, var(--paper) 75%, transparent); }
  .case-row__text { position: relative; }
  .case-row__numeral {
    position: absolute;
    inset-block-start: -0.35em;
    inset-inline-end: 0;
    font-family: var(--font-display);
    font-size: clamp(5rem, 12vw, 11rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--ink);
    opacity: 0.06;
    pointer-events: none;
  }
  .case-row__numeral::before { content: attr(data-n); }
  .case-row__meta, .case-row__title, .case-row__line, .case-row__tags, .case-row__go { position: relative; }
  .case-row__title { margin-block-start: 0.75rem; overflow-wrap: break-word; }
  .case-row__line { margin-block-start: 1rem; max-inline-size: 34ch; }
  .case-row__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block-start: 1.5rem; }
  .case-row__tags li { padding: 0.25rem 0.75rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.75rem; }
  .case-row__go { margin-block-start: 2rem; }
  @media (min-width: 48rem) {
    .cases-list__rows { gap: 10rem; }
    .case-row { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3rem; }
    .case-row__media { grid-column: span 7; }
    .case-row__text { grid-column: span 5; }
    .case-row--flip .case-row__media { order: 2; }
    .case-row--flip .case-row__text { order: 1; }
  }
  @media (prefers-reduced-motion: reduce), (min-height: 3000px) {
    .case-reel__outline, .case-reel__bar, .case-reel__scan { display: none; }
  }
}
/* css/sections/post.css */
@layer sections {
  
  .post-col { max-inline-size: 62rem; margin-inline: auto; }
  .post-hero { padding-block: calc(var(--nav-h) + 3rem) 2.5rem; overflow-x: clip; }
  .post-meta { display: flex; flex-wrap: wrap; gap: 0.25rem 1.2em; }
  .post-hero__title-wrap { position: relative; margin-block-start: 1rem; }
  .post-hero__title { overflow-wrap: break-word; }
  .post-hero__lead { max-inline-size: 48ch; margin-block-start: 1.5rem; }
  .post-cover { overflow-x: clip; }
  .post-cover__frame { max-inline-size: 62rem; margin-inline: auto; aspect-ratio: 3 / 2; }
  .post-body { margin-block-start: 3rem; }
  .post-prose { margin-inline: auto; overflow-wrap: break-word; }
  .post-next { margin-block-start: 6rem; }
  .post-next__back { margin-block-start: 2rem; font-size: 0.875rem; }
  @media (min-width: 48rem) {
    .post-hero { padding-block-start: calc(var(--nav-h) + 5rem); }
    .post-body { margin-block-start: 5rem; }
    .post-next { margin-block-start: 10rem; }
  }
}
/* css/sections/blog-index.css */
@layer sections {
  
  .blog-hero { overflow-x: clip; }

  .blog-feature { overflow-x: clip; }
  .blog-feature__grid { display: grid; gap: 2rem; }
  .blog-feature__link { display: block; }
  .blog-feature__frame { aspect-ratio: 4 / 3; }
  .blog-feature__title { margin-block-start: 0.75rem; overflow-wrap: break-word; }
  .blog-feature__excerpt { margin-block-start: 1rem; }
  .blog-feature__read { margin-block-start: 1.5rem; font-weight: 500; }
  
  .js .blog-feature [data-cx] { transition-delay: var(--o, 0ms); }

  
  .crop { position: relative; }
  .crop__mark { position: absolute; inline-size: 14px; block-size: 14px; border: 0 solid color-mix(in srgb, var(--ink) 45%, transparent); pointer-events: none; }
  .crop__mark--tl { inset-block-start: -12px; inset-inline-start: -12px; border-block-start-width: 1px; border-inline-start-width: 1px; }
  .crop__mark--tr { inset-block-start: -12px; inset-inline-end: -12px; border-block-start-width: 1px; border-inline-end-width: 1px; }
  .crop__mark--bl { inset-block-end: -12px; inset-inline-start: -12px; border-block-end-width: 1px; border-inline-start-width: 1px; }
  .crop__mark--br { inset-block-end: -12px; inset-inline-end: -12px; border-block-end-width: 1px; border-inline-end-width: 1px; }
  .crop__label { position: absolute; inset-block-start: -30px; inset-inline-start: 6px; white-space: pre; }

  .blog-list { margin-block-start: 6rem; overflow-x: clip; }
  .blog-index { position: relative; }
  .blog-index__guide { display: none; }
  .blog-index__rows { border-block-start: 1px solid var(--line); }
  .jrow { position: relative; display: grid; gap: 0.5rem; padding-block: 2rem; }
  .jrow__n { order: -2; }
  .jrow__meta { order: -1; display: flex; flex-wrap: wrap; gap: 0 1.2em; }
  .jrow__title { overflow-wrap: break-word; }
  
  .jrow__label, .jrow__slide { display: inline-block; }
  .jrow__slide { transition: translate 0.5s var(--ease-lens); }
  .jrow__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 4px; }
  .jrow__link:focus-visible { outline: none; }
  .jrow__link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
  .jrow__excerpt { max-inline-size: 56ch; margin-block-start: 0.5rem; color: var(--ink-2); }
  .jrow__arrow { display: none; }
  .jrow__rule { position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px; background: var(--line); transform-origin: left; }

  
  .blog-preview {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    z-index: 3;
    display: none;
    inline-size: 240px;
    block-size: 240px;
    overflow: hidden;
    border-radius: 50%;
    opacity: 0;
    scale: 0.4;
    pointer-events: none;
    box-shadow: 0 0 0 1px var(--accent), 0 24px 50px -18px rgb(0 0 0 / 0.45);
    transition: opacity 0.3s var(--ease-lens), scale 0.45s var(--ease-lens);
  }
  .blog-preview::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%; inline-size: 6px; block-size: 6px; margin: -3px; border-radius: 50%; background: var(--accent); }
  .is-previewable > .blog-preview { display: block; }
  .blog-preview.is-on { opacity: 1; scale: 1; }
  .blog-preview__cover { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s var(--ease-lens); }
  .blog-preview__cover.is-on { opacity: 1; }
  .blog-preview__cover picture, .blog-preview__cover img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }

  
  .blog-newsletter { margin-block-start: 6rem; }
  .blog-newsletter__box { display: grid; gap: 2rem; padding-block-start: 2rem; }
  .blog-newsletter__lead { max-inline-size: 40ch; margin-block-start: 0.75rem; color: var(--ink-2); }
  .blog-newsletter__form { display: grid; gap: 1rem; }
  .blog-newsletter__row { display: flex; flex-wrap: wrap; gap: 0.75rem; }
  .blog-newsletter__row .field__input { flex: 1 1 14rem; inline-size: auto; min-inline-size: 0; }
  .blog-newsletter .field__hint { max-inline-size: 56ch; }

  @media (hover: hover) and (pointer: fine) {
    .jrow:hover .jrow__slide { translate: 12px 0; }
  }
  @media (min-width: 48rem) {
    .blog-feature__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 3rem; }
    .blog-feature__media { grid-column: span 7; }
    .blog-feature__text { grid-column: span 5; }
    .blog-feature__frame { aspect-ratio: 3 / 2; }

    .blog-list { margin-block-start: 8rem; }
    .blog-newsletter { margin-block-start: 8rem; }
    .blog-newsletter__box { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: 1.5rem; }
    .blog-newsletter__text { grid-column: 1 / span 5; }
    .blog-newsletter__form { grid-column: 7 / span 6; }
    .blog-index__guide {
      position: absolute;
      inset-block: 0;
      inset-inline-start: calc(var(--k) * ((100% - 16.5rem) / 12 + 1.5rem));
      display: block;
      inline-size: 1px;
      background: var(--accent);
      opacity: 0.5;
      transform: scaleY(0);
      transform-origin: top;
      pointer-events: none;
    }
    .jrow { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: baseline; gap: 1.5rem; padding-block: 2.5rem; }
    .jrow__n { grid-column: span 1; }
    .jrow__meta { grid-column: span 2; }
    .jrow__text { grid-column: span 8; }
    .jrow__arrow {
      display: grid;
      grid-column: span 1;
      justify-self: end;
      place-items: center;
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border: 1px solid var(--line);
      border-radius: 50%;
      transition: background-color 0.5s var(--ease-lens), border-color 0.5s var(--ease-lens), color 0.5s var(--ease-lens);
    }
    .jrow__arrow .icon { inline-size: 16px; block-size: 16px; transition: rotate 0.5s var(--ease-lens); }
    .jrow:hover .jrow__arrow { border-color: var(--ink); background: var(--ink); color: var(--paper); }
    .jrow:hover .jrow__arrow .icon { rotate: 45deg; }
  }
}
/* css/sections/about.css */
@layer sections {
  
  .about-hero { overflow-x: clip; }

  
  .about-intro { overflow-x: clip; }
  .about-intro__grid { display: grid; gap: 2.5rem; }
  .about-intro__frame { aspect-ratio: 3 / 4; }
  .about-intro__sign { position: relative; display: inline-block; margin-block-start: 2rem; }
  .about-intro__sign .secret-letter { inset-block-start: -0.6rem; inset-inline-start: calc(100% + 0.75rem); inset-inline-end: auto; }
  @media (min-width: 48rem) {
    .about-intro__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
    .about-intro__media { grid-column: span 5; }
    .about-intro__text { grid-column: span 7; padding-block-start: 1rem; }
  }

  
  .about-links { display: grid; gap: 3rem; }
  .about-links__group { padding-block-start: 1.25rem; }
  .about-links__list { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-block-start: 1rem; font-size: 1.125rem; }
  @media (min-width: 48rem) {
    .about-links__list { font-size: 1.25rem; }
  }

  
  .about-stories__title { max-inline-size: 16ch; overflow-wrap: break-word; }
  .about-stories__list { display: grid; gap: 3rem; margin-block-start: 3rem; }
  .about-story { padding-block-start: 1.5rem; }
  .about-story__sketch { max-inline-size: 260px; margin-block-end: 1.5rem; }
  .about-story__text { margin-block-start: 1rem; color: var(--ink-2); }
  .about-story__link { margin-block-start: 1rem; font-weight: 500; }

  
  .about-values__title { max-inline-size: 14ch; overflow-wrap: break-word; }
  .about-values__list { display: grid; gap: 3.5rem 3rem; margin-block-start: 3rem; }
  .about-value { display: grid; gap: 1rem; }
  .about-value__n { padding-block-start: 0.5rem; }
  .about-value__sketch { max-inline-size: 200px; margin-block-end: 1rem; }
  .about-value__text { margin-block-start: 0.5rem; color: var(--ink-2); }
  @media (min-width: 48rem) {
    .about-stories__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
    .about-values__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .about-value { grid-template-columns: 3rem minmax(0, 1fr); }
  }

  
  .stages { position: relative; margin-block-start: 6rem; }
  .stages__lead { max-inline-size: 32ch; margin-block-start: 1rem; }
  .stages__stage { position: relative; margin-block-start: 3rem; padding-inline: var(--shell); }
  .stages__art { position: relative; max-inline-size: 64rem; margin-inline: auto; aspect-ratio: 1200 / 760; }
  .stages__tag, .stages__count, .stages__captions, .stages__link { display: none; }
  .stages__list { display: grid; gap: 2rem; margin-block-start: 3rem; }
  .stages__item { padding-block-start: 1.25rem; }
  .stages__item h3 { margin-block-start: 0.5rem; }
  .stages__item p { max-inline-size: 42ch; margin-block-start: 0.5rem; color: var(--ink-2); }

  
  .stages.is-staged { block-size: 500vh; }
  .stages.is-staged :is(.stages__head, .stages__list) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; padding: 0; margin: 0; }
  .stages.is-staged .stages__stage { position: sticky; inset-block-start: 0; margin: 0; padding: 0; block-size: 100svh; overflow: hidden; background: var(--paper); isolation: isolate; }
  .stages.is-staged .stages__stage::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1.2px);
    background-size: 16px 16px;
    opacity: var(--dots, 0);
  }
  .stages.is-staged .stages__art { position: absolute; inset-block-start: 40%; inset-inline-start: 50%; inline-size: 185vw; max-inline-size: none; translate: -50% -50%; }
  .stages.is-staged .stages__link { position: absolute; display: block; min-inline-size: 44px; min-block-size: 44px; translate: -50% -50%; border-radius: 999px; }
  .stages__link[inert] { pointer-events: none; }
  .stages__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .stages.is-staged .stages__tag { position: absolute; z-index: 6; inset-block-start: calc(var(--nav-h) + 0.9rem); inset-inline-start: var(--shell); }
  .stages__tag span { display: block; }
  .stages__tag-title { color: var(--ink); }
  .stages.is-staged .stages__count { position: absolute; display: block; z-index: 6; inset-block-start: calc(var(--nav-h) + 0.75rem); inset-inline-end: var(--shell); text-align: end; }
  .stages__count > .measure { display: block; }
  .stages__count-value { display: block; margin-block-start: 0.35rem; font-family: var(--font-display); font-size: clamp(2.25rem, 4.6vw, 5rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 10%, transparent); }
  .stages__count-total { font-size: 0.4em; }
  .stages__tag, .stages__count { transition: opacity 0.6s var(--ease-lens); }
  .stages.is-live :is(.stages__tag, .stages__count) { opacity: 0; }
  .stages.is-staged .stages__captions { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 8; display: block; padding-block-start: 5rem; background: linear-gradient(to top, var(--paper) 0%, color-mix(in srgb, var(--paper) 82%, transparent) 55%, transparent 100%); pointer-events: none; }
  .stages__captions-inner { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-block-end: 28px; }
  .stages__caption-box { position: relative; flex: 1; max-inline-size: 34rem; min-block-size: 8.5rem; }
  .stages__caption { position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; opacity: 0; transform: translateY(12px); filter: blur(2px); transition: opacity 0.7s var(--ease-lens), transform 0.7s var(--ease-lens), filter 0.7s var(--ease-lens); }
  .stages__caption.is-active { opacity: 1; transform: none; filter: none; }
  .stages__step { display: flex; align-items: center; gap: 8px; }
  .stages__step-n { color: var(--accent-text); }
  .stages__step-line { inline-size: 24px; block-size: 1px; background: color-mix(in srgb, var(--ink) 40%, transparent); }
  .stages__caption .display-3 { margin-block-start: 6px; }
  .stages__caption-text { margin-block-start: 8px; max-inline-size: 42ch; color: var(--ink-2); }
  .stages__skip { flex: none; gap: 8px; min-block-size: 44px; margin-block-end: 4px; padding: 0; border: 0; background: none; color: var(--ink); pointer-events: auto; transition: opacity 0.5s var(--ease-lens); }
  .stages__skip .icon { inline-size: 12px; block-size: 12px; }
  .stages.is-live .stages__skip { opacity: 0; pointer-events: none; }

  
  .stages__svg { --z: 1; display: block; inline-size: 100%; block-size: auto; overflow: visible; }
  .stages__svg :where(path, line, rect, circle, ellipse) { fill: none; stroke: var(--ink); stroke-width: calc(1.4px / var(--z)); stroke-linecap: round; stroke-linejoin: round; }
  .stages__svg .sc-thin { stroke: color-mix(in srgb, var(--ink) 55%, transparent); stroke-width: calc(1px / var(--z)); }
  .stages__svg .sc-window { stroke-width: calc(1px / var(--z)); fill: var(--paper); }
  .stages__svg .sc-guide { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: calc(1px / var(--z)); opacity: 0.2; }
  .stages__svg .sc-guide--dash, .stages__svg .sc-dash { stroke-dasharray: 3 5; }
  .stages__svg .sc-accent { stroke: var(--accent); }
  .stages__svg .sc-thick { stroke-width: calc(2.4px / var(--z)); }
  .stages__svg .sc-paper { fill: var(--paper); }
  .stages__svg .sc-media { fill: var(--paper-2); stroke: none; }
  .stages__svg .sc-bar { fill: color-mix(in srgb, var(--ink) 14%, transparent); stroke: none; }
  .stages__svg .sc-dot { fill: var(--ink); stroke: none; }
  .stages__svg .sc-fill { fill: var(--accent); stroke: none; }
  .stages__svg .sc-ink-fill { fill: var(--ink); stroke: none; }
  .stages__svg .sc-on-accent { stroke: #fff; stroke-width: calc(1.2px / var(--z)); }
  .stages__svg [data-gone] { opacity: 0; }
  .stages__svg text { font-family: var(--font-mono); font-size: 12px; fill: var(--steel); stroke: none; }
  .stages__svg .sc-label--ink { fill: var(--ink); }
  .stages__svg .sc-sign { font-size: 15px; letter-spacing: 0.24em; fill: var(--ink); }
  .stages__svg .sc-url { font-size: 7px; fill: var(--ink-2); }
  .stages__svg .sc-brand { font-family: var(--font-display); font-size: 11px; font-weight: 600; fill: var(--ink); }
  .stages__svg .sc-head { font-family: var(--font-display); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; fill: var(--ink); }
  .stages__svg .sc-button { font-family: var(--font-sans); font-size: 8.5px; font-weight: 500; fill: var(--paper); }
  
  .stages.is-playing .sc-typing { animation: sc-typing 1s ease-in-out infinite; }
  .stages.is-playing .sc-led { animation: sc-led 0.97s steps(1) infinite; }
  .stages.is-playing .sc-packet { animation: sc-packet 1.8s linear infinite; }
  .stages.is-playing [data-n="1"] { animation-delay: 0.32s; }
  .stages.is-playing [data-n="2"] { animation-delay: 0.64s; }
  .stages.is-playing .sc-packet[data-n="1"] { animation-delay: -0.6s; }
  .stages.is-playing .sc-packet[data-n="2"] { animation-delay: -1.2s; }
  .stages.is-live .sc-packet { animation: none; opacity: 0; }
  @keyframes sc-typing { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
  @keyframes sc-led { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
  @keyframes sc-packet { from { translate: 0 0; } to { translate: -272px 0; } }
  @media (prefers-reduced-motion: reduce) {
    .stages .sc-typing, .stages .sc-led, .stages .sc-packet { animation: none; }
  }
  @media (min-width: 48rem) {
    .stages { margin-block-start: 10rem; }
    .stages__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stages.is-staged .stages__art { inset-block-start: 47%; inline-size: min(100%, calc((100svh - 3rem) * 1.579)); }
    .stages__caption-box { min-block-size: 7.5rem; }
    .stages__captions-inner { padding-block-end: 36px; }
  }
  @media (min-width: 80rem) {
    .stages.is-staged .stages__tag { display: block; }
  }
  @media (max-width: 47.99rem) {
    .stages.is-staged .stages__count { display: none; }
  }
  
  @media (max-width: 25.99rem) {
    .stages__skip { position: relative; justify-content: center; inline-size: 44px; }
    .stages__skip .icon { inline-size: 16px; block-size: 16px; }
    .stages__skip-label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  }

  
  .about-layers { margin-block-start: 6rem; }
  .about-layers__grid { display: grid; gap: 2.5rem; }
  .about-layers__lead { max-inline-size: 32ch; margin-block-start: 1rem; }
  .about-layers__list { display: grid; gap: 0.5rem; margin-block-start: 2rem; }
  .about-layers__row { color: var(--ink); transition: color 0.5s var(--ease-lens); }
  .about-layers__n { color: var(--accent-deep); }
  .about-layers__tools { display: block; margin-block-start: 0.15rem; color: var(--steel); }
  .about-layers__stage { display: grid; place-items: center; }
  .about-layers__svg { display: block; inline-size: 100%; block-size: auto; max-block-size: 78svh; overflow: visible; }
  .about-layers__svg :where(path, line, rect) { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
  .about-layers__svg .lay-top { fill: var(--paper); }
  .about-layers__svg .lay-left { fill: color-mix(in srgb, var(--ink) 11%, var(--paper)); }
  .about-layers__svg .lay-right { fill: color-mix(in srgb, var(--ink) 5%, var(--paper)); }
  .about-layers__svg .sc-guide { stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1; }
  .about-layers__svg .sc-accent { stroke: var(--accent); stroke-width: 1.2; }
  .about-layers__svg text { font-family: var(--font-mono); font-size: 11px; fill: var(--steel); }
  .about-layers__svg .sc-label--accent { fill: var(--accent-text); }
  .about-layers__svg .lay-name { font-family: var(--font-display); font-size: 22px; font-weight: 600; fill: var(--ink); }
  .about-layers__svg .lay-group { font-family: var(--font-display); font-size: 17px; font-weight: 600; fill: var(--ink); }
  .about-layers__svg .lay-tool { font-family: var(--font-sans); font-size: 13px; fill: var(--ink-2); }
  .about-layers__svg .lay-side { display: none; }
  .about-layers.is-armed .about-layers__row { color: var(--steel); }
  .about-layers.is-armed .about-layers__row.is-built { color: var(--ink); }
  @media (min-width: 48rem) {
    .about-layers { margin-block-start: 10rem; }
    .about-layers__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
    .about-layers__text { grid-column: span 4; }
    .about-layers__stage { grid-column: span 8; }
    
    .about-layers__tools { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .about-layers__svg .lay-side { display: inline; }
    .about-layers.is-staged { block-size: calc((120 + 55 * var(--layers, 4)) * 1vh); }
    .about-layers.is-staged .about-layers__pin { position: sticky; inset-block-start: 0; display: grid; align-items: center; block-size: 100svh; }
  }

  
  .about-road__title { overflow-wrap: break-word; }
  .road { position: relative; margin-block-start: 3rem; }
  .road::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 19.5px; inline-size: 1px; background: var(--line); }
  .road.is-railed::before { display: none; }
  .road__rail { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 40px; block-size: 100%; overflow: visible; pointer-events: none; }
  .road__ghost, .road__line { fill: none; stroke-width: 1.5; }
  .road__ghost { stroke: var(--line); }
  .road__line { stroke: var(--accent); }
  .road__item { position: relative; display: grid; gap: 0.5rem; padding-block: 1.75rem; padding-inline-start: 3.5rem; }
  .road__node { position: absolute; inset-block-start: calc(1.75rem + 0.55rem); inset-inline-start: 12.5px; inline-size: 15px; block-size: 15px; border: 1.5px solid var(--accent); border-radius: 50%; background: var(--accent); scale: 1.15; transition: background-color 0.5s var(--ease-lens), border-color 0.5s var(--ease-lens), scale 0.5s var(--ease-lens); }
  .road__year { font-variant-numeric: tabular-nums; color: var(--ink); transition: color 0.5s var(--ease-lens); }
  .road__org { color: var(--ink-2); }
  .road__text { max-inline-size: 60ch; margin-block-start: 0.5rem; color: var(--ink-2); }
  .road__body, .road__type { transition: opacity 0.6s var(--ease-lens), translate 0.6s var(--ease-lens); }
  .road__body { transition-delay: 80ms; }
  .road__type { display: inline-flex; align-items: center; gap: 0.6rem; transition-delay: 160ms; }
  .road__icon { flex-shrink: 0; inline-size: 28px; block-size: 28px; fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .road__icon path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-lens); }
  .road.is-armed .road__item:not(.is-on) .road__node { border-color: var(--line); background: var(--paper); scale: 1; }
  .road.is-armed .road__item:not(.is-on) .road__year { color: var(--steel); }
  
  .road.is-armed .road__item:not(.is-on) :is(.road__body, .road__type) { translate: 0 0.5rem; }
  .road.is-armed .road__item:not(.is-on) .road__body { opacity: 0.82; }
  .road.is-armed .road__item:not(.is-on) .road__icon path { stroke-dashoffset: 1; }
  .road__now { position: relative; display: grid; gap: 0.75rem; padding-block: 2.5rem 1rem; padding-inline-start: 3.5rem; }
  .road__now-rail { position: absolute; inset-block-start: 0; inset-inline-start: 19.5px; block-size: 2.5rem; border-inline-start: 1px dashed var(--accent); }
  .road__now-dot { position: absolute; inset-block-start: calc(2.5rem + 0.15rem); inset-inline-start: 13.5px; inline-size: 13px; block-size: 13px; border-radius: 50%; background: var(--accent); }
  .road__now-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); animation: road-pulse 1.6s var(--ease-lens) infinite; }
  @keyframes road-pulse { from { scale: 1; opacity: 0.9; } to { scale: 2.6; opacity: 0; } }
  .road__today { color: var(--accent-text); }
  .road__next { justify-self: start; overflow-wrap: break-word; transition: color 0.3s var(--ease-lens); }
  .road__next:hover { color: var(--accent-deep); }
  .road__next:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
  @media (prefers-reduced-motion: reduce) {
    .road__now-dot::after { animation: none; }
  }
  @media (min-width: 48rem) {
    .road__item { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem; padding-block: 2.25rem; }
    .road__node { inset-block-start: calc(2.25rem + 0.55rem); }
    .road__year { grid-column: span 2; }
    .road__body { grid-column: span 7; }
    .road__type { grid-column: span 3; justify-content: flex-end; align-self: start; }
  }
}
/* css/sections/contact.css */
@layer sections {
  
  .contact { display: grid; gap: 3rem; overflow-x: clip; }
  @media (min-width: 48rem) {
    .contact { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4rem; }
    .contact-write { grid-column: 1 / span 7; }
    .contact-office { grid-column: 8 / span 5; }
  }

  
  .contact-brief { display: grid; gap: 1.25rem; margin-block-end: 3rem; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  @media (min-width: 40rem) { .contact-brief { grid-template-columns: auto 1fr; align-items: center; } }
  @media (min-width: 48rem) { .contact-brief { padding: 2rem; } }
  .contact-brief__sketch { inline-size: 64px; block-size: 80px; fill: none; stroke: var(--ink); stroke-width: 1.25; stroke-linecap: round; overflow: visible; }
  .contact-brief__sketch .cb-thin { stroke-width: 1; }
  .contact-brief__sketch :is(.cb-line, .cb-thin) { stroke-dasharray: 1; animation: cb-draw 1.1s var(--ease-lens) backwards; }
  .contact-brief__sketch .cb-thin { animation-delay: 0.7s; }
  .contact-brief__sketch .cb-dot { fill: var(--accent); stroke: none; transform-box: fill-box; transform-origin: center; animation: cb-pop 0.45s var(--ease-lens) 1.2s backwards; }
  @media (hover: hover) and (pointer: fine) {
    .contact-brief:hover .contact-brief__sketch :is(.cb-line, .cb-thin) { animation: cb-draw 1.1s var(--ease-lens) backwards, cb-draw-again 1.1s var(--ease-lens) backwards; }
    .contact-brief:hover .contact-brief__sketch .cb-thin { animation-delay: 0.7s, 0.35s; }
    .contact-brief:hover .contact-brief__sketch .cb-dot { animation: cb-pop 0.45s var(--ease-lens) 1.2s backwards, cb-pop-again 0.45s var(--ease-lens) 0.8s backwards; }
  }
  @keyframes cb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes cb-draw-again { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes cb-pop { from { scale: 0; } }
  @keyframes cb-pop-again { from { scale: 0; } }
  .contact-brief__text { max-inline-size: 44ch; margin-block-start: 0.5rem; color: var(--ink-2); }
  .contact-brief__cta { margin-block-start: 1.25rem; }

  
  .contact-form { position: relative; display: grid; gap: 1.5rem; }
  .contact-form__row { display: grid; gap: 1.5rem; }
  @media (min-width: 40rem) { .contact-form__row { grid-template-columns: 1fr 1fr; } }
  .contact-form__end .form-status:not(:empty) { margin-block-end: 1rem; }
  .contact-form__privacy { max-inline-size: 56ch; }
  .contact-form__send { margin-block-start: 1rem; }
  .contact-done { padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  .contact-done:focus { outline: none; }
  .contact-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .contact-done__text { margin-block-start: 0.75rem; color: var(--ink-2); }

  
  .contact-office__photo { aspect-ratio: 16 / 10; }
  
  .contact-office__photo img { transform-origin: 70% 55%; }
  .contact-office__list { display: grid; gap: 1.25rem; margin-block-start: 2rem; }
  .contact-office__row { position: relative; padding-block-start: 0.75rem; }
  .contact-office__row dd { margin-block-start: 0.25rem; }
  .contact-office__big { padding-block: 0; font-size: 1.125rem; }
  .contact-office__phone { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
  .contact-office__country { color: var(--ink-2); }
}
/* css/sections/start.css */
@layer sections {
  
  .brief { display: grid; gap: 3rem; overflow-x: clip; }
  .brief__aside { display: none; }
  .brief.is-sent .brief__aside { display: block; }
  @media (min-width: 48rem) {
    .brief { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; align-items: start; }
    .brief__form, .brief__done { grid-column: 1 / span 7; grid-row: 1; }
    .brief__aside { display: block; grid-column: 8 / span 5; grid-row: 1; position: sticky; inset-block-start: calc(var(--nav-h) + 1.5rem); }
    .draft--inline { display: none; }
  }

  .brief__steps { display: grid; gap: 3.5rem; }
  .brief-step { display: grid; gap: 2rem; padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--line); transition: border-color 0.4s var(--ease-lens); }
  .brief-step:first-child { gap: 1.5rem; }
  .brief-step:focus-within { border-color: var(--accent); }
  .brief-step__title { display: flex; align-items: baseline; gap: 0.75rem; }
  .brief-step__n { color: var(--accent-text); }
  .brief-step__body { display: grid; gap: 2rem; }
  .brief-step__body--you { gap: 1.5rem; }
  .brief-step__row { display: grid; gap: 1.5rem; }
  @media (min-width: 40rem) { .brief-step__row { grid-template-columns: 1fr 1fr; } }
  .brief__end .form-status:not(:empty) { margin-block-end: 1rem; }
  .brief__privacy { max-inline-size: 56ch; }
  .brief__send { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; margin-block-start: 1rem; }
  .brief__reply { font-size: 0.875rem; color: var(--steel); }
  .brief__done { padding: 2rem; border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper-2); }
  @media (min-width: 48rem) { .brief__done { padding: 3rem; } }
  .brief__done:focus { outline: none; }
  .brief__done:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .brief__done-text { max-inline-size: 40ch; margin-block-start: 1rem; }

  
  .draft { position: relative; }
  .draft__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-end: 0.75rem; }
  .draft__title, .draft__score { display: grid; }
  .draft__sub { color: var(--ink); }
  .draft__score { justify-items: end; gap: 0.3rem; }
  
  .draft__pct { font-family: var(--font-display); font-size: 2.4rem; font-weight: 600; line-height: 0.9; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--ink) 50%, var(--paper)); }
  .draft__unit { font-size: 0.4em; color: var(--steel); }
  .draft__frame { border: 1px solid var(--line); border-radius: var(--radius-media); background: var(--paper); overflow: clip; }
  .draft__bar { position: relative; display: flex; align-items: center; justify-content: center; block-size: 2.25rem; padding-inline: 3.25rem; border-block-end: 1px solid var(--line); }
  .draft__dots { position: absolute; inset-inline-start: 0.85rem; display: flex; gap: 0.3rem; }
  .draft__dots span { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--line); }
  
  .draft__url { min-inline-size: 0; max-inline-size: 100%; padding: 0.15rem 0.6rem; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 0.6875rem; white-space: nowrap; text-overflow: ellipsis; }
  .draft__url::before { content: ""; display: inline-block; inline-size: 5px; block-size: 5px; margin-inline-end: 0.35rem; border-radius: 50%; background: var(--accent); vertical-align: 0.1em; }
  .draft__svg { display: block; inline-size: 100%; block-size: auto; max-block-size: calc(100svh - 22rem); fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .draft--inline .draft__svg { max-block-size: none; }
  .draft__svg .bd-line { stroke: var(--ink); stroke-width: 1.25; }
  .draft__svg .bd-thin { stroke: var(--steel); stroke-width: 1; }
  .draft__svg .bd-accent { stroke: var(--accent); stroke-width: 1.5; }
  .draft__svg .bd-bars :is(.bd-thin, .bd-accent) { stroke-width: 12; stroke-linecap: butt; }
  .draft__svg .bd-dot { fill: var(--accent); transform-box: fill-box; transform-origin: center; }
  .draft__svg text { stroke: none; fill: var(--ink); font-family: var(--font-display); font-weight: 600; }
  .draft__svg .bd-logo { font-size: 17px; }
  .draft__svg .bd-stop { fill: var(--accent); }
  .draft__svg .bd-headline { font-size: 24px; letter-spacing: -0.02em; }
  .draft__svg .bd-mark { font-size: 48px; fill: var(--accent); }
  .draft__block { transition: transform 0.5s var(--ease-lens); }
  .draft__block:not(.is-on) { display: none; }
  
  .draft__block :is(.bd-line, .bd-thin, .bd-accent) { stroke-dasharray: 1; animation: bd-draw 0.7s var(--ease-lens) backwards; }
  .draft__block :is(.bd-dot, text) { animation: bd-pop 0.45s var(--ease-lens) 0.35s backwards; }
  @keyframes bd-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes bd-pop { from { opacity: 0; scale: 0.6; } }
  .draft__facts { display: grid; gap: 1rem; margin-block-start: 1.25rem; }
  .draft__fact-head { display: flex; justify-content: space-between; margin-block-end: 0.5rem; }
  .draft__chosen { color: var(--ink); }
  .draft__scale { position: relative; block-size: 1rem; margin: 0; border-block-end: 1px solid var(--line); }
  .draft__tick { position: absolute; inset-block-end: 0; inset-inline-start: calc(var(--n) * (100% - 1px)); inline-size: 1px; block-size: 0.55rem; background: var(--line); transition: block-size 0.4s var(--ease-lens), background-color 0.4s var(--ease-lens); }
  .draft__tick.is-on { block-size: 0.9rem; background: var(--ink); }
  .draft__runner { position: absolute; inset-block-end: -4.5px; inset-inline-start: calc(var(--at, 0) * (100% - 8px)); inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); opacity: 0; transition: inset-inline-start 0.6s var(--ease-lens), opacity 0.3s var(--ease-lens); }
  .draft__scale.is-set .draft__runner { opacity: 1; }
  .draft__fact--row { display: flex; justify-content: space-between; }
  .draft__fact--row dd { margin: 0; color: var(--ink); }
  .draft__stamp { position: absolute; inset-block-start: 38%; inset-inline-end: 8%; display: none; padding: 0.15rem 0.75rem; border: 2px solid var(--accent); border-radius: 6px; background: var(--paper); color: var(--accent-text); font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; rotate: -11deg; pointer-events: none; }
  .brief.is-sent .draft__stamp { display: block; animation: ink-stamp 0.55s var(--ease-lens) 0.3s backwards; }

  
  .brief-step { position: relative; }
  .brief-step::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -1px; inline-size: 1px; background: var(--ink); transform-origin: top; scale: 1 0; opacity: 0; pointer-events: none; }
  @media (prefers-reduced-motion: no-preference) and (max-height: 2999.98px) {
    .js .brief [data-assemble]:not(.is-built) :is(.brief-step__title, .field__label, .field__hint, .brief__privacy, .brief__send, .draft__head, .draft__facts) { opacity: 0; transform: translateY(0.8rem); }
    .js .brief [data-assemble]:not(.is-built) :is(.field__input, .draft__frame) { clip-path: inset(0 100% 100% 0 round var(--radius-field)); }
    .js .brief [data-assemble]:not(.is-built) .chip__face { clip-path: inset(0 100% 0 0 round 999px); }
    .js .brief .brief-step[data-assemble]:not(.is-built) { border-inline-start-color: transparent; }
    .js:not(.reveals-ready) .brief [data-assemble]:not(.is-built) :is(.brief-step__title, .field__label, .field__hint, .brief__privacy, .brief__send, .draft__head, .draft__facts, .field__input, .draft__frame, .chip__face) { animation: reveal-failsafe 0s 3s forwards; }
    .brief .is-built :is(.brief-step__title, .field__label, .field__hint, .brief__privacy, .brief__send) { animation: brief-rise 0.7s var(--ease-lens) calc(var(--i, 0) * 30ms) backwards; }
    .brief .is-built :is(.draft__head, .draft__facts) { animation: brief-rise 0.7s var(--ease-lens) 0.5s backwards; }
    .brief .is-built .field__input { animation: brief-box 0.9s var(--ease-lens) calc(var(--i, 0) * 30ms) backwards; }
    .brief .is-built .draft__frame { animation: brief-box 0.9s var(--ease-lens) 0.7s backwards; }
    .brief .is-built .chip__face { animation: brief-wipe 0.7s var(--ease-lens) calc(var(--i, 0) * 30ms) backwards; }
    .brief .brief-step.is-built { animation: brief-border 1.1s var(--ease-lens) backwards; }
    .brief .brief-step.is-built::before { animation: brief-rule 1.1s var(--ease-lens); }
  }
  @keyframes brief-rise { from { opacity: 0; transform: translateY(0.8rem); } }
  @keyframes brief-box {
    from { clip-path: inset(0 100% 100% 0 round var(--radius-field)); border-color: var(--ink); }
    65% { clip-path: inset(0 round var(--radius-field)); border-color: var(--ink); }
    to { clip-path: inset(0 round var(--radius-field)); }
  }
  @keyframes brief-wipe {
    from { clip-path: inset(0 100% 0 0 round 999px); border-color: var(--ink); }
    65% { clip-path: inset(0 round 999px); border-color: var(--ink); }
    to { clip-path: inset(0 round 999px); }
  }
  @keyframes brief-border { from, 70% { border-inline-start-color: transparent; } }
  @keyframes brief-rule { 0% { scale: 1 0; opacity: 1; } 60% { scale: 1 1; opacity: 1; } 100% { scale: 1 1; opacity: 0; } }
}
/* css/sections/legal.css */
@layer sections {
  
  .legal-body { padding-block-start: calc(2.2 * clamp(1.5rem, 2.2vw, 2rem)); }
  .legal-prose { overflow-wrap: break-word; }
  .legal-list__row { display: grid; gap: 0.25rem 2rem; padding-block: 0.9rem; border-block-start: 1px solid var(--line); }
  .legal-list__row:last-child { border-block-end: 1px solid var(--line); }
  .legal-list dd { margin: 0; }
  .legal-updated { margin-block-start: 3rem; }
  @media (min-width: 48rem) {
    .legal-list__row { grid-template-columns: minmax(10rem, 14rem) 1fr; }
  }
}
/* css/sections/notfound.css */
@layer sections {
  
  .notfound { display: flex; flex-direction: column; justify-content: center; min-block-size: 70vh; padding-block: 6rem; overflow-x: clip; }
  .notfound__title-wrap { position: relative; margin-block-start: 1rem; }
  .notfound__title { max-inline-size: 12ch; overflow-wrap: break-word; }
  .notfound__lead { max-inline-size: 40ch; margin-block-start: 1.5rem; }
  .notfound__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-block-start: 2.5rem; }
}
/* css/motion.css */
@layer motion {
  @media (prefers-reduced-motion: reduce), (min-height: 3000px) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      transition-delay: 0ms !important;
    }
  }
}
/* css/utilities.css */
@layer utilities {
  .flow > * + * { margin-block-start: var(--flow, 1em); }
  .ink-2 { color: var(--ink-2); }
  .steel { color: var(--steel); }
  .accent-text { color: var(--accent-text); }
  .nowrap { white-space: nowrap; }
  .full-bleed { inline-size: 100%; }
}