/* KazuTech Systems — kazutechsystems.com
   Layout concept: a sheet of washi paper that the brand's great wave washes over.
   The hero is paper; scrolling floods it with sea, and the rest of the page moves
   between deep water and paper. One committed look taken from the logo, so there is
   no dark variant: every colour below is set explicitly. */

/* Self-hosted fonts (all SIL Open Font License 1.1). No requests to Google. */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/figtree-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: "Figtree"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("assets/fonts/figtree-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: "JetBrains Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("assets/fonts/jetbrains-mono-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("assets/fonts/jetbrains-mono-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: "Outfit"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("assets/fonts/outfit-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: "Outfit"; font-style: normal; font-weight: 500 800; font-display: swap; src: url("assets/fonts/outfit-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: "Shippori Mincho B1"; font-style: normal; font-weight: 700; font-display: swap; src: url("assets/fonts/shippori-mincho-kanji.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Colour (sampled from the logo and banner) */
  --washi: #f5e6c8;        /* paper */
  --washi-deep: #ecd8b2;   /* paper in shadow */
  --indigo: #174775;       /* the K tile */
  --sea: #19466c;          /* the wave film's last frame: the page turns this colour */
  --abyss: #0c2a4c;        /* deepest water */
  --ink: #0b2340;          /* wordmark navy, body text */
  --foam: #a8becb;         /* the three bubbles */
  --seal: #b83425;         /* 数 hanko */
  --gold: #c39a5f;         /* "SYSTEMS" */
  --ink-soft: #3b5472;     /* secondary text on paper */
  --paper-soft: #c9d6e2;   /* secondary text on water */
  --wood: #7a4a26;         /* scroll rollers */

  /* Paper surfaces: what dark mode changes. Water sections and the artwork keep their colours. */
  --paper: var(--washi);       /* page background on paper sections */
  --paper-2: var(--washi-deep);
  --text: var(--ink);          /* text on paper */
  --text-soft: var(--ink-soft);
  --accent: var(--indigo);     /* links, labels and outlines on paper */
  --role: #9c2a1c;             /* small red labels on paper; passes 4.5:1 */
  --grain-blend: multiply;
  --grain-opacity: .3;

  /* Type */
  --display: "Outfit", "Avenir Next", "Century Gothic", "Segoe UI", sans-serif;
  --body: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Code", Consolas, monospace;
  --kanji: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;

  /* Scale (roughly a perfect fourth) */
  --step--1: clamp(.84rem, .82rem + .1vw, .9rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.12rem);
  --step-1: clamp(1.25rem, 1.1rem + .6vw, 1.55rem);
  --step-2: clamp(1.65rem, 1.3rem + 1.5vw, 2.45rem);
  --step-3: clamp(2.2rem, 1.5rem + 3.1vw, 4.2rem);
  --step-4: clamp(2.9rem, 1.6rem + 5.6vw, 7rem);

  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
}

/* A real dark theme, so browsers don't force their own (which turned the cream brown).
   The site always starts light. Dark applies only when the visitor picks it with the menu
   switch, which sets data-theme="dark" on <html> (theme.js remembers the choice). The browser's
   own dark setting is deliberately ignored: some browsers report dark when the user has not asked for it. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #0a1019;          /* deep ink-navy, close to black */
    --paper-2: #131c2a;
    --text: #efe6d2;           /* washi-cream text */
    --text-soft: #a9b6c6;
    --accent: #8db8e0;         /* the indigo, lifted so it reads on dark */
    --role: #f2907b;
    --sea: #12395a;            /* deeper water to sit beside the dark paper */
    --abyss: #071425;
    --grain-blend: soft-light;
    --grain-opacity: .18;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font: 400 var(--step-0)/1.6 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; margin: 0; text-wrap: balance; letter-spacing: -.02em; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--seal); outline-offset: 3px; border-radius: 6px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--washi); padding: .6em 1em; border-radius: 8px; }
.skip:focus { top: 12px; }
.wrap { width: min(1180px, 100%); margin-inline: auto; padding-left: var(--gutter); padding-right: var(--gutter-r); }

/* Paper grain over everything */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Reading progress, drawn like a brush stroke */
.progress { position: fixed; inset: 0 0 auto; height: 3px; z-index: 70; pointer-events: none; }
.progress span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--abyss), var(--indigo) 70%, var(--seal)); }

/* ---------- Navigation ---------- */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); }
.nav {
  position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .75rem var(--gutter-r) .75rem var(--gutter);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.nav { background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav.scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 12%, transparent); }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand img { border-radius: 9px; }
.wordmark { font: 800 1.15rem/1 var(--display); letter-spacing: -.02em; display: flex; flex-direction: column; }
.wordmark small { font: 600 .56rem/1 var(--display); letter-spacing: .42em; color: var(--accent); margin-top: .25rem; text-transform: uppercase; }
.nav nav { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.7rem); }
.nav nav a { text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; }
.nav nav a:not(.pill)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--seal); transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav nav a:not(.pill):hover::after { transform: scaleX(1); transform-origin: left; } }
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: transparent; border: 1.5px solid color-mix(in srgb, var(--text) 25%, transparent);
  transition: background-color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { background: color-mix(in srgb, var(--text) 8%, transparent); border-color: var(--accent); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
.is-dark .theme-toggle .sun { display: none; }
.is-dark .theme-toggle .moon { display: block; }
.pill { background: var(--indigo); color: var(--washi); padding: .55em 1.1em; border-radius: 999px; transition: background-color .2s ease; }
.pill:hover { background: var(--abyss); }
@media (max-width: 860px) { .nav nav a:not(.pill) { display: none; } }
/* pages that open on deep water: light nav text until the bar fills in */
.nav.on-dark:not(.scrolled) .wordmark, .nav.on-dark:not(.scrolled) nav a:not(.pill) { color: var(--washi); }
.nav.on-dark:not(.scrolled) .wordmark small { color: var(--foam); }
.nav.on-dark:not(.scrolled) .pill { background: var(--washi); color: var(--abyss); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  font: 700 1rem/1 var(--display); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  min-height: 48px; padding: .95em 1.5em; border-radius: 999px; border: 2px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--indigo); color: var(--washi); border-color: var(--indigo); }
.btn.primary:hover { background: var(--abyss); border-color: var(--abyss); }
.btn.ghost { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn.ghost:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn.light { background: var(--washi); color: var(--abyss); border-color: var(--washi); }
.btn.light:hover { background: var(--gold); border-color: var(--gold); }
.btn.outline-light { color: var(--washi); border-color: color-mix(in srgb, var(--washi) 55%, transparent); background: transparent; }
.btn.outline-light:hover { background: color-mix(in srgb, var(--washi) 12%, transparent); }
.btn.outline-dark { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn.outline-dark:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.btn.soon, .btn[aria-disabled="true"] { opacity: .6; cursor: default; }
.btn[disabled] { opacity: .65; cursor: progress; }

/* ---------- Shared section bits ---------- */
section { position: relative; }
.kicker { display: flex; align-items: center; gap: .7rem; font: 600 1rem/1 var(--display); color: var(--accent); margin-bottom: 1.2rem; }
.seal {
  flex: none; font: 700 1rem/1 var(--kanji); font-style: normal; color: var(--washi);
  background: var(--seal); width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: 5px;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--washi) 25%, transparent);
}
.seal.big { width: 3rem; height: 3rem; font-size: 1.5rem; }
h2 { font-size: var(--step-3); max-width: 18ch; }
.lede { font-size: var(--step-1); line-height: 1.45; color: var(--text-soft); max-width: 36ch; }

/* Wave-edged bands. .band-top: water rising over paper. .band-top-paper: paper over water. */
.band-top::before, .band-top-paper::before {
  content: ""; position: absolute; left: 0; right: 0; top: -59px; height: 60px; pointer-events: none;
  -webkit-mask: var(--edge) center/100% 100% no-repeat; mask: var(--edge) center/100% 100% no-repeat;
  --edge: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34c60-20 120-30 190-14s120 36 200 20 110-44 200-36 130 40 210 34 120-40 200-34 130 26 200 18v38z'/%3E%3C/svg%3E");
}
.band-top::before { background: inherit; }
.band-top-paper::before { background: var(--paper); }

/* ---------- Hero: the wave wash ---------- */
.hero { background: var(--paper); }
.hero-stage { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; }
.hero-film { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--paper); }
.hero-film img, .hero-film canvas { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block; }
.hero .hero-film canvas { position: absolute; inset: 0; }
.hero .hero-film .film-poster { position: absolute; inset: 0; }
.hero .hero-film.drawn .film-poster { visibility: hidden; }
/* the sea wash that finishes the wave; same colour as the section below */
.hero .film-sea { position: absolute; inset: 0; background: var(--sea); opacity: 0; pointer-events: none; }
/* The film opens like a window: a soft edge that main.js moves with the scroll.
   Wide screens open from the right of the headline; phones from below it. */
.hero .hero-film { --m: 0%; }
@media (min-width: 761px) {
  .hero .hero-film canvas, .hero .hero-film .film-poster { position: absolute; left: auto; right: 0; top: 0; width: 56%; object-position: 100% 50%; will-change: width; }
}

.hero .hero-film canvas, .hero .hero-film .film-poster {
  -webkit-mask-image: linear-gradient(to right, transparent var(--m), #000 calc(var(--m) + 14%));
  mask-image: linear-gradient(to right, transparent var(--m), #000 calc(var(--m) + 14%));
}
@media (max-width: 760px) {
  .hero .hero-film { --m: 50%; }
  .hero .hero-film canvas, .hero .hero-film .film-poster {
    object-position: 80% 50%;
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--m), #000 calc(var(--m) + 12%));
    mask-image: linear-gradient(to bottom, transparent var(--m), #000 calc(var(--m) + 12%));
  }
}
.static .hero .hero-film canvas { display: none; }
.static .hero .hero-film .film-poster { -webkit-mask-image: none; mask-image: none; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .hero .hero-film .film-poster { object-position: 100% 50%; } }
.hero-copy {
  position: relative; z-index: 1; height: 100%;
  width: min(1180px, 100%); margin-inline: auto;
  padding: clamp(5.5rem, 14vh, 9rem) var(--gutter-r) 2rem var(--gutter);
  display: flex; flex-direction: column; gap: 1.4rem; justify-content: flex-start;
  will-change: transform, opacity;
}
.lockup { display: flex; align-items: center; gap: clamp(.9rem, 2vw, 1.5rem); }
.lockup-icon { width: clamp(72px, 9vw, 124px); border-radius: 22%; box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--abyss) 80%, transparent); }
.lockup-text { display: flex; flex-direction: column; }
.kazu { font: 800 var(--step-4)/.9 var(--display); letter-spacing: -.035em; color: var(--text); }
.systems { font: 600 clamp(.9rem, .55rem + 1.3vw, 1.8rem)/1 var(--display); letter-spacing: .62em; color: var(--accent); text-transform: uppercase; margin-top: .55rem; }
.tagline { font: 700 var(--step-2)/1.12 var(--display); letter-spacing: -.02em; color: var(--accent); max-width: 19ch; }
.hero-sub { max-width: 36ch; color: var(--text-soft); font-size: var(--step-1); line-height: 1.45; }
.hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }

.scroll-cue {
  position: absolute; z-index: 3; left: 50%; bottom: max(1.4rem, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%); display: inline-flex; align-items: center; gap: .45rem;
  font: 600 .95rem/1 var(--display); color: var(--accent); cursor: pointer;
  background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px; padding: .7em 1.1em; min-height: 44px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background-color .2s ease, border-color .2s ease;
}
.scroll-cue:hover { background: var(--paper); border-color: var(--accent); }
.scroll-cue svg { animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
.static .scroll-cue { display: none; }
@media (prefers-reduced-motion: reduce) { .scroll-cue { display: none; } }

/* page-load: one orchestrated rise */
.js .hero-copy > * { animation: rise 1.1s var(--ease-out) both; }
.js .hero-copy > :nth-child(2) { animation-delay: .1s; }
.js .hero-copy > :nth-child(3) { animation-delay: .18s; }
.js .hero-copy > :nth-child(4) { animation-delay: .26s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

@media (max-width: 760px) {
  .hero-copy { padding-top: 6rem; gap: 1.1rem; }
}

/* ---------- Manifesto ---------- */
.manifesto { background: var(--sea); color: var(--washi); padding-block: clamp(5rem, 14vh, 10rem) clamp(7rem, 16vh, 11rem); }
.manifesto-text { font: 600 clamp(1.7rem, 1rem + 3vw, 3.6rem)/1.18 var(--display); letter-spacing: -.02em; max-width: 26ch; }
.mw { display: inline; }

/* ---------- What we build ---------- */
.build { background: var(--paper); padding-block: clamp(4rem, 9vw, 8rem); }
.build-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.build-head { position: sticky; top: 7rem; display: grid; gap: 1.2rem; }
.disciplines { list-style: none; margin: 0; padding: 0; display: grid; }
.discipline { display: grid; row-gap: .5rem; padding-block: 1.8rem; border-top: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); }
.discipline:last-child { border-bottom: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); }
.discipline h3 { font-size: var(--step-2); }
.discipline p { color: var(--text-soft); max-width: 46ch; }
@media (max-width: 860px) {
  .build-grid { grid-template-columns: 1fr; }
  .build-head { position: static; }
}

/* ---------- How we work (pinned) ---------- */
.craft { background: var(--abyss); color: var(--washi); height: 280vh; }
.craft-pin { position: sticky; top: 0; height: 100vh; display: grid; align-items: center; overflow: hidden; padding-top: 4rem; }
.craft .kicker { color: var(--foam); }
.craft-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.craft h2 { color: var(--washi); }
.craft-steps { list-style: none; counter-reset: s; margin: 2rem 0 0; padding: 0; display: grid; gap: .9rem; }
.craft-steps li { counter-increment: s; position: relative; padding-left: 2.6rem; color: color-mix(in srgb, var(--paper-soft) 55%, transparent); transition: color .35s ease, transform .45s var(--ease-out); max-width: 44ch; }
.craft-steps li::before { content: counter(s); position: absolute; left: 0; top: .1em; font: 700 1.1rem/1.3 var(--display); font-variant-numeric: tabular-nums; }
.craft-steps li strong { font-family: var(--display); }
.craft-steps li.on { color: var(--washi); transform: translateX(6px); }
.craft-steps li.on::before { color: var(--gold); }
.editor { margin: 0; min-width: 0; background: #071c35; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65), 0 0 0 1px color-mix(in srgb, var(--foam) 18%, transparent); }
.editor-bar { display: flex; align-items: center; gap: .45rem; padding: .8rem 1rem; background: color-mix(in srgb, var(--foam) 9%, transparent); }
.editor-bar i { width: 11px; height: 11px; border-radius: 50%; background: var(--foam); opacity: .5; }
.editor-bar i:first-child { background: var(--seal); opacity: 1; }
.editor-bar span { margin-left: .6rem; font: 500 .8rem/1 var(--mono); color: var(--paper-soft); }
.editor pre { margin: 0; padding: 1.3rem 1.4rem 1.6rem; font: 400 clamp(.7rem, .6rem + .35vw, .92rem)/1.7 var(--mono); color: var(--washi); min-height: 21em; overflow-x: auto; white-space: pre; }
.caret { display: inline-block; width: .55em; height: 1.15em; vertical-align: text-bottom; background: var(--seal); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.tok-k { color: #7fb0dc; } .tok-s { color: var(--gold); } .tok-c { color: #7d93ab; font-style: italic; } .tok-n { color: #e98a74; } .tok-f { color: var(--washi); font-weight: 600; }
@media (max-width: 880px) {
  .craft { height: auto; }
  .craft-pin { position: static; height: auto; padding-block: 5rem; }
  .craft-grid { grid-template-columns: 1fr; }
}

/* ---------- Apps carousel ---------- */
.apps { background: var(--indigo); color: var(--washi); padding-block: clamp(4.5rem, 9vw, 7.5rem) 3rem; overflow: hidden; }
.apps .kicker { color: var(--foam); }
.apps h2 { color: var(--washi); }
.apps-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.carousel-nav { display: flex; gap: .6rem; }
.round { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--washi); background: transparent; border: 2px solid color-mix(in srgb, var(--washi) 45%, transparent); transition: background-color .2s ease, transform .16s var(--ease-out); }
.round:hover { background: color-mix(in srgb, var(--washi) 12%, transparent); }
.round:active { transform: scale(.94); }
.carousel {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(1040px, 86vw); gap: clamp(1rem, 2vw, 1.6rem);
  margin-top: clamp(2rem, 4vw, 3rem); padding-block: .5rem 1.5rem;
  padding-left: max(var(--gutter), calc((100vw - 1180px) / 2 + 16px)); padding-right: 12vw;
  scroll-padding-left: max(var(--gutter), calc((100vw - 1180px) / 2 + 16px));
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  cursor: grab;
}
.carousel::-webkit-scrollbar { display: none; }
.carousel.dragging { cursor: grabbing; scroll-snap-type: none; }
.carousel.dragging * { user-select: none; }
.slide { scroll-snap-align: start; position: relative; overflow: hidden; border-radius: 26px; min-height: 420px; padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; }
.app-slide { background: var(--abyss); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(1.2rem, 3vw, 2.5rem); }
.slide-media img { width: 100%; border-radius: 14px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); }
.slide-body { display: grid; gap: .9rem; justify-items: start; min-width: 0; }
.slide-icon { border-radius: 14px; }
.slide h3 { font-size: var(--step-2); max-width: 18ch; }
.slide p { color: var(--paper-soft); max-width: 42ch; }
.slide .slide-meta { font: 600 .95rem/1 var(--display); color: var(--foam); }
.next-slide { background: radial-gradient(120% 90% at 85% 10%, #2a6aa3 0%, var(--sea) 55%, var(--abyss) 100%); }
.follow-slide { background: var(--paper); color: var(--text); }
.follow-slide p { color: var(--text-soft); }
.follow-slide .slide-meta { color: var(--seal); }
.big-seal { position: absolute; right: 8%; top: 12%; font: 700 clamp(5rem, 12vw, 9rem)/1 var(--kanji); color: var(--washi); background: var(--seal); padding: .12em .16em; border-radius: 12px; transform: rotate(-4deg); }
.bubbles { position: absolute; right: 14%; top: 0; bottom: 0; width: 90px; pointer-events: none; }
.bubbles i { position: absolute; bottom: -24px; left: 50%; border-radius: 50%; background: var(--foam); opacity: .8; animation: bubble 7s cubic-bezier(.45, 0, .55, 1) infinite; }
.bubbles i:nth-child(1) { width: 16px; height: 16px; margin-left: -24px; }
.bubbles i:nth-child(2) { width: 26px; height: 26px; animation-delay: 2.2s; }
.bubbles i:nth-child(3) { width: 38px; height: 38px; margin-left: 20px; animation-delay: 4.4s; }
@keyframes bubble { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: .85; } 100% { transform: translateY(-380px) translateX(16px) scale(1); opacity: 0; } }
.carousel-count { font: 600 .95rem/1 var(--display); color: var(--foam); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .app-slide { grid-template-columns: 1fr; }
  .slide { min-height: 0; }
  .big-seal { font-size: 4rem; }
}

/* ---------- Handscroll (makimono) ---------- */
.makimono { background: var(--paper); }
.makimono { padding: clamp(3rem, 7vw, 5.5rem) var(--gutter-r) clamp(3.5rem, 8vw, 6rem) var(--gutter); }
.scroll-rig { position: relative; margin-inline: auto; width: min(1180px, 100%); --spin: 0px; will-change: transform; }
.paper {
  position: relative; margin-inline: clamp(12px, 1.6vw, 20px);
  background: var(--abyss);
  /* silk mounting: a fine woven indigo */
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.12) 0 2px, transparent 2px 6px);
  padding: clamp(10px, 1.6vw, 22px) clamp(14px, 2.4vw, 34px);
  box-shadow: 0 30px 60px -30px rgba(12, 42, 76, .55);
  clip-path: inset(-3% 50% -3% 50%);
}
.mount { position: relative; }
.mount::before { content: ""; position: absolute; inset: -4px; border: 1px solid color-mix(in srgb, var(--gold) 70%, transparent); pointer-events: none; }
.mount img { width: 100%; }
/* paper curling into each roller */
.mount::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(11,35,64,.35), transparent 4%, transparent 96%, rgba(11,35,64,.35));
}
.roller {
  position: absolute; top: -5%; bottom: -5%; width: clamp(18px, 2.2vw, 30px); z-index: 2;
  border-radius: 6px;
  background:
    repeating-linear-gradient(180deg, rgba(0,0,0,.08) 0 3px, transparent 3px 11px) 0 var(--spin) / 100% 22px,
    linear-gradient(90deg, #2b170a 0%, #6d4020 22%, #b07a48 46%, #c99462 52%, #8a5631 72%, #2b170a 100%);
  box-shadow: 4px 0 14px rgba(0,0,0,.25), -4px 0 14px rgba(0,0,0,.25);
  will-change: transform;
}
.roller.left { left: 0; }
.roller.right { right: 0; }
/* lacquered end caps with a gold ring */
.roller::before, .roller::after {
  content: ""; position: absolute; left: -22%; right: -22%; height: clamp(16px, 2vw, 24px); border-radius: 5px;
  background: linear-gradient(90deg, #050b14, #2a3442 45%, #0b1622 70%, #050b14);
  box-shadow: inset 0 -3px 0 var(--gold), inset 0 3px 0 var(--gold);
}
.roller::before { top: -10px; }
.roller::after { bottom: -10px; }
.curl { position: absolute; top: 5%; bottom: 5%; width: 26px; pointer-events: none; }
.roller.left .curl { left: 100%; background: linear-gradient(90deg, rgba(0,0,0,.28), transparent); }
.roller.right .curl { right: 100%; background: linear-gradient(-90deg, rgba(0,0,0,.28), transparent); }
.static .paper { clip-path: none; }

/* ---------- Team ---------- */
.team { background: var(--paper); padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem); }
.team-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); margin-top: clamp(2rem, 4vw, 3rem); }
.member { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; background: var(--paper-2); border-radius: 26px; padding: clamp(1.2rem, 3vw, 2.2rem); text-decoration: none; }
.portrait { width: clamp(96px, 12vw, 150px); aspect-ratio: 1; border-radius: 24%; position: relative; overflow: hidden; background: radial-gradient(120% 90% at 30% 20%, #2c6aa3, var(--indigo) 55%, var(--abyss)); display: grid; place-items: center; }
.portrait span { font: 800 clamp(2.2rem, 4vw, 3.4rem)/1 var(--display); color: var(--washi); letter-spacing: -.03em; }
.portrait::after { content: "数"; position: absolute; right: 9%; bottom: 9%; font: 700 .8rem/1 var(--kanji); color: var(--washi); background: var(--seal); padding: .3em; border-radius: 4px; }
.portrait.empty { background: transparent; border: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); }
.portrait.empty span { color: var(--accent); }
.portrait.empty::after { display: none; }
.member-body { display: grid; gap: .45rem; min-width: 0; }
.member h3 { font-size: var(--step-1); }
.role { font: 600 .95rem/1 var(--display); color: var(--role); }
.member-body > p:last-child { color: var(--text-soft); }
.open-seat { background: transparent; border: 2px dashed color-mix(in srgb, var(--accent) 35%, transparent); transition: background-color .2s ease, border-color .2s ease; }
.open-seat:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); border-color: var(--accent); }
@media (max-width: 820px) { .team-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .member { grid-template-columns: 1fr; } }

/* ---------- Recruiting band ---------- */
.recruit { background: var(--abyss); color: var(--washi); padding-block: clamp(4rem, 9vw, 7rem); }
.recruit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.recruit-title { font-size: var(--step-4); line-height: .92; max-width: 8ch; color: var(--washi); }
.recruit-copy { display: grid; gap: 1.1rem; justify-items: start; }
.recruit-copy p { color: var(--paper-soft); font-size: var(--step-1); line-height: 1.45; max-width: 36ch; }
@media (max-width: 820px) { .recruit-grid { grid-template-columns: 1fr; } }

/* ---------- Contact + forms ---------- */
.contact { background: var(--indigo); color: var(--washi); padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.contact-intro { display: grid; gap: 1.2rem; justify-items: start; }
.contact-logo { width: clamp(110px, 12vw, 160px); border-radius: 22%; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.contact h2 { color: var(--washi); }
.contact-intro > p { color: var(--paper-soft); font-size: var(--step-1); line-height: 1.45; max-width: 34ch; }
.contact-alt { display: grid; gap: 1rem; justify-items: start; margin-top: .5rem; }
.contact-alt p { color: var(--paper-soft); }
.email-text { color: var(--washi); font-weight: 600; user-select: all; overflow-wrap: anywhere; }
.copy { font: 600 .85rem/1 var(--display); color: var(--washi); background: transparent; border: 1.5px solid color-mix(in srgb, var(--washi) 45%, transparent); border-radius: 999px; padding: .45em .8em; margin-left: .3rem; cursor: pointer; }
.copy:hover { background: color-mix(in srgb, var(--washi) 12%, transparent); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.fit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fit-list li { position: relative; padding-left: 1.3rem; color: var(--washi); }
.fit-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5rem; height: .5rem; border-radius: 2px; background: var(--seal); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.field[hidden] { display: none; }
.kform { display: grid; gap: 1.1rem; background: var(--abyss); border-radius: 24px; padding: clamp(1.3rem, 3vw, 2.2rem); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .6); }
.field { display: grid; gap: .45rem; }
.field label, .field legend { font: 600 .95rem/1.2 var(--display); color: var(--washi); }
.field .hint { font-size: var(--step--1); color: var(--paper-soft); }
.kform input, .kform select, .kform textarea {
  width: 100%; font: 400 1rem/1.4 var(--body); color: var(--washi);
  background: color-mix(in srgb, var(--washi) 7%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--foam) 35%, transparent); border-radius: 12px;
  padding: .8em .9em; transition: border-color .2s ease, background-color .2s ease;
}
.kform select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--foam) 50%), linear-gradient(135deg, var(--foam) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; }
.kform select option { color: var(--ink); background: var(--washi); }
.kform textarea { resize: vertical; min-height: 9rem; }
.kform ::placeholder { color: color-mix(in srgb, var(--paper-soft) 70%, transparent); }
.kform input:focus, .kform select:focus, .kform textarea:focus { outline: none; border-color: var(--gold); background: color-mix(in srgb, var(--washi) 11%, transparent); }
.kform [aria-invalid="true"] { border-color: #f08a76; }
.checks { border: 0; margin: 0; padding: 0; display: grid; gap: .55rem; }
.checks legend { margin-bottom: .55rem; padding: 0; }
.check-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.check-row label { position: relative; font: 600 .9rem/1 var(--display); color: var(--washi); }
.check-row input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; cursor: pointer; margin: 0; }
.check-row span { display: inline-flex; align-items: center; min-height: 40px; padding: .55em 1em; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--foam) 40%, transparent); transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
.check-row input:checked + span { background: var(--washi); color: var(--abyss); border-color: var(--washi); }
.check-row input:focus-visible + span { outline: 3px solid var(--seal); outline-offset: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send { justify-self: start; }
.form-status { min-height: 1.4em; font-size: var(--step--1); color: var(--paper-soft); }
.form-status[data-kind="error"] { color: #ffb4a6; }
.sent-note { display: grid; gap: .8rem; justify-items: start; padding-block: 1rem; outline: none; }
.sent-note h3 { font-size: var(--step-2); color: var(--washi); }
.sent-note p { color: var(--paper-soft); max-width: 40ch; }

/* ---------- Footer ---------- */
.foot { background: var(--abyss); color: var(--paper-soft); padding-block: 1.6rem calc(1.6rem + env(safe-area-inset-bottom, 0px)); font-size: var(--step--1); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; }
.foot-links { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.foot a { text-decoration: none; }
.foot a[href]:hover { color: var(--washi); }
.foot a.soon { opacity: .7; }

/* ---------- Join page ---------- */
.page-hero { position: relative; background: var(--paper); color: var(--text); overflow: hidden; min-height: clamp(560px, 86vh, 820px); display: grid; align-items: center; padding-block: clamp(7rem, 16vh, 10rem) clamp(5rem, 12vh, 8rem); }
.hero-film img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block; transform-origin: 80% 60%; }
.page-hero .hero-film { background: transparent; }
.page-hero .hero-film img {
  position: absolute; right: 0; top: 0; width: 54%; height: 100%; object-position: 100% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16%); mask-image: linear-gradient(to right, transparent 0, #000 16%);
}
@media (max-width: 760px) {
  .page-hero .hero-film img {
    top: auto; bottom: 0; width: 100%; height: 34%; object-position: 85% 60%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  }
  .page-hero { padding-bottom: 38vh; }
}
.page-hero .wrap { position: relative; z-index: 1; display: grid; gap: 1.4rem; }
.page-hero h1 { font-size: var(--step-4); line-height: .95; max-width: 11ch; }
.page-hero p { font-size: var(--step-1); line-height: 1.45; color: var(--text-soft); max-width: 36ch; }
.page-hero .hero-cta { margin-top: .4rem; }
.crew { background: var(--paper); padding-block: clamp(3rem, 7vw, 5.5rem); }
.traits { background: var(--sea); color: var(--washi); padding-block: clamp(4rem, 9vw, 7rem); }
.traits .kicker { color: var(--foam); }
.traits h2 { color: var(--washi); max-width: 22ch; }
.traits .trait-list li { border-top-color: color-mix(in srgb, var(--washi) 22%, transparent); }
.traits .trait-list p { color: var(--paper-soft); }
.trait-list { list-style: none; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(2rem, 5vw, 5rem); }
.trait-list li { display: grid; gap: .5rem; padding-block: 1.6rem; border-top: 1.5px solid color-mix(in srgb, var(--text) 22%, transparent); }
.trait-list h3 { font-size: var(--step-1); }
.trait-list p { color: var(--text-soft); max-width: 44ch; }
@media (max-width: 760px) { .trait-list { grid-template-columns: 1fr; } }
.areas { background: var(--abyss); color: var(--washi); padding-block: clamp(4rem, 9vw, 7rem); }
.areas h2 { color: var(--washi); }
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.4rem); margin-top: clamp(2rem, 4vw, 3rem); }
.area { display: grid; gap: .7rem; align-content: start; padding: 1.4rem; border-radius: 20px; background: color-mix(in srgb, var(--foam) 8%, transparent); }
.area .area h3 { font-size: var(--step-1); }
.area p { color: var(--paper-soft); }
@media (max-width: 980px) { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .area-grid { grid-template-columns: 1fr; } }
.early { background: var(--paper); padding-block: clamp(4rem, 9vw, 7rem); }
.early-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.early p { font-size: var(--step-1); line-height: 1.5; color: var(--text-soft); max-width: 40ch; }
.early p + p { margin-top: 1rem; }
@media (max-width: 820px) { .early-grid { grid-template-columns: 1fr; } }
.apply { background: var(--indigo); color: var(--washi); padding-block: clamp(4.5rem, 9vw, 7.5rem); }

/* ---------- Privacy page ---------- */
.doc { background: var(--paper); padding-block: clamp(8rem, 16vh, 10rem) clamp(4rem, 8vw, 6rem); }
.doc .wrap { max-width: 760px; display: grid; gap: 1.1rem; }
.doc h1 { font-size: var(--step-3); }
.doc h2 { font-size: var(--step-1); max-width: none; margin-top: 1.2rem; }
.doc p, .doc li { color: var(--text-soft); }
.doc ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }

/* ---------- Reduced motion: every animation off, scenes shown finished ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > * { animation: none; }
  .wave { animation: none; }
  .caret { animation: none; }
  .bubbles i { animation: none; opacity: .6; }
  .craft { height: auto; }
  .craft-pin { position: static; height: auto; padding-block: 5rem; }
  .paper { clip-path: none; }
  .btn, .round, .pill, .craft-steps li { transition: none; }
}

/* ---------- Legal pages and form notes ---------- */
.doc .updated { font-size: var(--step--1); color: var(--text-soft); margin-top: -.4rem; }
.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.doc strong { color: var(--text); }
.doc code { font: 500 .9em/1 var(--mono); background: color-mix(in srgb, var(--text) 8%, transparent); padding: .15em .4em; border-radius: 5px; }
.form-note { font-size: var(--step--1); color: var(--paper-soft); max-width: 52ch; }
.form-note a { color: var(--washi); text-decoration: underline; text-underline-offset: .18em; }