/* ============================================================
   Prathamesh Patil - portfolio · v3 「整」
   A craftsman's studio: sumi ink on washi paper, one vermilion seal.
   Type: Newsreader (display + body) · Fragment Mono (spec labels)
        · Mincho stack for Japanese glyphs
   Themes: washi (light) / sumi (dark) - toggle + system default
   ============================================================ */

/* ---- Fonts ------------------------------------------------ */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/newsreader-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/newsreader-var-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/fragment-mono.woff2') format('woff2');
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/fragment-mono-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/caveat.woff2') format('woff2');
}

/* ---- Theme tokens as animatable custom properties -----------
   Declaring the palette with @property lets the browser interpolate
   each color itself when data-theme flips, so every consumer (text,
   borders, fills) eases together in one calm wash instead of
   snapping - closer to ink settling through water than a light switch. */
@property --paper       { syntax: '<color>'; inherits: true; initial-value: #F7F3E8; }
@property --wash        { syntax: '<color>'; inherits: true; initial-value: #EFE9D8; }
@property --ink         { syntax: '<color>'; inherits: true; initial-value: #201C15; }
@property --ink-2       { syntax: '<color>'; inherits: true; initial-value: #6C6350; }
@property --line        { syntax: '<color>'; inherits: true; initial-value: #E3DBC4; }
@property --line-2      { syntax: '<color>'; inherits: true; initial-value: #CDC2A2; }
@property --shu         { syntax: '<color>'; inherits: true; initial-value: #B93A2B; }
@property --shu-2       { syntax: '<color>'; inherits: true; initial-value: #93291D; }
@property --kin         { syntax: '<color>'; inherits: true; initial-value: #96762A; }
@property --matcha      { syntax: '<color>'; inherits: true; initial-value: #4E7C59; }
@property --grid        { syntax: '<color>'; inherits: true; initial-value: rgba(32, 28, 21, 0.055); }
@property --seal-paper  { syntax: '<color>'; inherits: true; initial-value: #F7F3E8; }

/* ---- Tokens ------------------------------------------------ */
/* Dimming the lights: every color eases at the same slow, even pace
   with no acceleration or overshoot, so the whole page settles into
   the new theme together rather than any one part leading the eye. */
:root {
  transition: --paper 1.1s ease-in-out, --wash 1.1s ease-in-out,
    --ink 1.1s ease-in-out, --ink-2 1.1s ease-in-out,
    --line 1.1s ease-in-out, --line-2 1.1s ease-in-out,
    --shu 1.1s ease-in-out, --shu-2 1.1s ease-in-out,
    --kin 1.1s ease-in-out, --matcha 1.1s ease-in-out,
    --grid 1.1s ease-in-out, --seal-paper 1.1s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
}
:root {
  --paper:  #F7F3E8;   /* washi */
  --wash:   #EFE9D8;
  --ink:    #201C15;   /* sumi */
  --ink-2:  #6C6350;
  --line:   #E3DBC4;
  --line-2: #CDC2A2;
  --shu:    #B93A2B;   /* vermilion - the seal red */
  --shu-2:  #93291D;
  --kin:    #96762A;   /* muted gold */
  --matcha: #4E7C59;
  --grid:   rgba(32, 28, 21, 0.055);
  --shadow: 0 18px 50px rgba(60, 48, 30, 0.14);
  --img-filter: none;
  --seal-paper: #F7F3E8;
  --torii: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Crect x='1' y='4' width='22' height='2.4' rx='1.2'/%3E%3Crect x='11.2' y='4' width='1.6' height='4.4'/%3E%3Crect x='3' y='8' width='18' height='1.6' rx='0.8'/%3E%3Crect x='5.4' y='9.4' width='2.6' height='12.6' rx='0.4'/%3E%3Crect x='16' y='9.4' width='2.6' height='12.6' rx='0.4'/%3E%3C/svg%3E");

  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --mono:  'Fragment Mono', 'SFMono-Regular', Consolas, monospace;
  --jp:    'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', 'Noto Serif JP', 'MS PMincho', serif;
  --hand:  'Caveat', 'Segoe Script', cursive;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --site-w: 1200px;

  --fs-hero:  clamp(2.9rem, 7.2vw, 5.9rem);
  --fs-h2:    clamp(1.9rem, 4vw, 2.9rem);
  --fs-h3:    clamp(1.35rem, 2.4vw, 1.7rem);
  --fs-body:  1.125rem;
  --fs-label: 0.72rem;

  --ease-brush: cubic-bezier(0.19, 0.7, 0.22, 1);
  --ease-stamp: cubic-bezier(0.34, 1.45, 0.5, 1);
}
[data-theme="dark"] {
  --paper:  #14120E;
  --wash:   #1C1913;
  --ink:    #EDE6D4;
  --ink-2:  #A79C83;
  --line:   #2C2820;
  --line-2: #453F30;
  --shu:    #E06A50;
  --shu-2:  #EF8B74;
  --kin:    #CFA34A;
  --matcha: #83BD93;
  --grid:   rgba(237, 230, 212, 0.06);
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  --img-filter: brightness(0.94);
  --seal-paper: #F7F3E8;
}

/* ---- Reset / base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* washi grain - a whisper of paper fibre over everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
img { max-width: 100%; height: auto; display: block; filter: var(--img-filter); }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }
[id] { scroll-margin-top: 5rem; }
[lang="ja"] { font-family: var(--jp); }

::selection { background: var(--shu); color: #F7F3E8; }

:focus-visible {
  outline: 2px solid var(--shu);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  z-index: 100;
}
.skip-link:focus { left: 0.75rem; top: 0.75rem; }

/* Reading-progress ink line (element created by main.js) */
.progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  background: var(--shu);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 80;
  pointer-events: none;
}

/* ---- Layout ------------------------------------------------- */
.wrap {
  max-width: var(--site-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(4.5rem, 10vw, 8.5rem);
  border-top: 1px solid var(--line);
}

/* Spec label - recurring eyebrow. On the landing page the em holds a
   kanji numeral; on detail pages it holds "File 01"-style text. */
.spec {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.75rem, 4vw, 3rem);
}
.spec::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--shu);
  transform: rotate(45deg);
  flex: none;
}
.spec em { font-style: normal; color: var(--shu); }
.spec .kanji {
  font-family: var(--jp);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1;
  color: var(--shu);
  letter-spacing: 0;
  transform: translateY(-1px);
}

/* Section header - eyebrow + big display title + ghost kanji */
.section-head { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); position: relative; }
.section-head .spec { margin-bottom: 1.1rem; }
.section-title {
  font-size: clamp(2.3rem, 5.2vw, 3.8rem);
  font-weight: 440;
  letter-spacing: -0.022em;
  line-height: 1.05;
  max-width: 18ch;
}
.section-title em { font-style: italic; color: var(--shu); }
.section-head .work__intro {
  margin-bottom: 0;
  margin-top: 1.5rem;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
}
/* vertical kanji gloss floating at the section's right edge */
.sec-jp {
  position: absolute;
  right: 0;
  top: 0;
  writing-mode: vertical-rl;
  font-family: var(--jp);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: 0.35em;
  color: var(--ink);
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  line-height: 1;
  white-space: nowrap;
}
@media (max-width: 880px) { .sec-jp { display: none; } }

/* ---- Seal (hanko) ------------------------------------------- */
.seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  background: var(--shu);
  color: var(--seal-paper);
  font-family: var(--jp);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 4px;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--seal-paper) 35%, transparent);
  flex: none;
  user-select: none;
}

/* ---- Nav ----------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.85rem;
}
.nav__mark {
  font-family: var(--mono);
  font-size: 0.85rem;
  text-decoration: none;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
.nav__mark::before {
  content: "整";
  font-family: var(--jp);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  color: var(--seal-paper);
  background: var(--shu);
  width: 1.6rem; height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  transform: rotate(-3deg);
  transition: transform 0.25s var(--ease-stamp);
}
.nav__mark:hover::before { transform: rotate(3deg) scale(1.06); }
.nav__links {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.2vw, 1.6rem);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav__links > a { text-decoration: none; color: var(--ink-2); position: relative; }
.nav__links > a:not(.nav__resume)::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 1.5px;
  background: var(--shu);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s var(--ease-brush);
}
.nav__links > a:not(.nav__resume):hover { color: var(--ink); }
.nav__links > a:not(.nav__resume):hover::after { transform: scaleX(1); transform-origin: left; }
.nav__resume {
  color: var(--paper) !important;
  background: var(--ink);
  padding: 0.5rem 0.85rem;
  transition: background 0.15s ease;
}
.nav__resume:hover { background: var(--shu); color: #F7F3E8 !important; }

/* Theme toggle */
.theme-toggle {
  appearance: none;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  width: 34px; height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.3s ease;
  padding: 0;
}
.theme-toggle:hover { color: var(--ink); border-color: var(--ink-2); transform: rotate(15deg); }
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle .moon { display: none; }
[data-theme="dark"] .theme-toggle .sun { display: none; }
[data-theme="dark"] .theme-toggle .moon { display: block; }

/* ---- Hero ----------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(5.5rem, 13vw, 10.5rem) clamp(4.5rem, 10vw, 8rem);
  overflow: hidden;
}
/* shippō pattern washing in from the top-right corner */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23201C15' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.07;
  -webkit-mask-image: radial-gradient(85% 90% at 82% 6%, #000 12%, transparent 62%);
          mask-image: radial-gradient(85% 90% at 82% 6%, #000 12%, transparent 62%);
  pointer-events: none;
}
[data-theme="dark"] .hero::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23EDE6D4' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.05;
}
.hero > .wrap { position: relative; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: stretch;
}
.hero__eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.1rem;
}
.hero__eyebrow .dot { color: var(--line-2); }
.hero h1 {
  font-size: var(--fs-hero);
  font-weight: 430;
  max-width: 13ch;
  letter-spacing: -0.024em;
  line-height: 1.06;
}
/* word-mask rise: each .hw clips its child while it rises into view.
   overflow:hidden is only ever applied inside the no-preference motion
   query below, and is released again once the rise finishes, so a
   descender (e.g. the "y" in "clarity") can never end up permanently
   clipped. */
.hw { display: inline-block; vertical-align: bottom; padding-bottom: 0.45em; margin-bottom: -0.45em; }
.hw > span { display: inline-block; }
.hero h1 .u {
  font-style: italic;
  font-weight: 460;
  position: relative;
  white-space: nowrap;
}
.hero h1 .u svg {
  position: absolute;
  left: -1%;
  bottom: -0.1em;
  width: 102%;
  height: 0.26em;
  overflow: visible;
}
.hero h1 .u svg path {
  fill: none;
  stroke: var(--shu);
  stroke-width: 7.5;
  stroke-linecap: round;
  opacity: 0.9;
}
.hero__dek {
  max-width: 46ch;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--ink-2);
  margin-top: 2.25rem;
}
.hero__dek b { font-weight: 500; color: var(--ink); }
.hero__meta {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hero__meta span::before { content: "· "; color: var(--shu); }
.hero__meta span:first-child::before { content: ""; }
.hero__scroll {
  margin-top: clamp(3rem, 7vw, 5rem);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.hero__scroll .arr { display: inline-block; transition: transform 0.2s ease; }
.hero__scroll:hover .arr { transform: translateY(3px); }
.hero__scroll:hover { color: var(--ink); }

/* Vertical tategaki column - the hero's counter-voice */
.hero__side {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid var(--line);
  will-change: transform;
}
.hero__vtext {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: var(--jp);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 600;
  letter-spacing: 0.32em;
  line-height: 1;
  color: var(--ink);
  margin: 0;
  user-select: none;
}
.hero__vsub {
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0.4rem 0 0;
}
@media (max-width: 880px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__side { display: none; }
}

/* Hero load choreography */
@media (prefers-reduced-motion: no-preference) {
  .fade-up { animation: fadeUp 0.8s var(--ease-brush) both; }
  .fade-up.d1 { animation-delay: 0.08s; }
  .fade-up.d2 { animation-delay: 0.2s; }
  .fade-up.d3 { animation-delay: 0.55s; }
  .fade-up.d4 { animation-delay: 0.7s; }
  .fade-up.d5 { animation-delay: 0.85s; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
  }
  .hw { overflow: hidden; animation: hwUnclip 1ms linear 1.5s forwards; }
  .hw > span { transform: translateY(115%); animation: riseUp 0.9s var(--ease-brush) forwards; }
  .hw:nth-child(1) > span { animation-delay: 0.16s; }
  .hw:nth-child(2) > span { animation-delay: 0.26s; }
  .hw:nth-child(3) > span { animation-delay: 0.36s; }
  .hw:nth-child(4) > span { animation-delay: 0.46s; }
  @keyframes riseUp { to { transform: translateY(0); } }
  @keyframes hwUnclip { to { overflow: visible; } }
  .hero h1 .u svg path {
    stroke-dasharray: 230;
    stroke-dashoffset: 230;
    animation: draw 0.9s ease 1.15s forwards;
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  .hero__side { animation: fadeIn 1.2s ease 0.5s both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- Work cards ------------------------------------------------ */
.work__intro {
  max-width: var(--measure);
  color: var(--ink-2);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  line-height: 1.5;
}
.work__intro b, .work__intro em { color: var(--ink); }

/* Selected Work sits on its own "gallery wall" tone, full-bleed */
#work { position: relative; z-index: 0; }
#work::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--wash);
  z-index: -1;
}

.case {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  padding: clamp(1.9rem, 4vw, 3.1rem) clamp(1.75rem, 3.6vw, 3rem);
  margin-block: clamp(2rem, 5vw, 3.75rem);
  background: var(--paper);
  border: clamp(7px, 0.9vw, 12px) solid var(--ink);
  box-shadow:
    inset 0 0 0 3px var(--line-2),
    0 2px 3px rgba(20, 16, 8, 0.08),
    0 34px 60px -20px rgba(20, 16, 8, 0.38);
  text-decoration: none;
  position: relative;
  transition: transform 0.45s var(--ease-brush), box-shadow 0.45s var(--ease-brush);
}
.case:first-of-type { margin-top: clamp(0.5rem, 2vw, 1.25rem); }
.case:last-of-type { margin-bottom: clamp(0.5rem, 2vw, 1.25rem); }
/* a hairline wire, as if each frame is hung from something above it */
.case::after {
  content: "";
  position: absolute;
  top: -13px;
  left: 50%;
  width: 42px;
  height: 13px;
  transform: translateX(-50%);
  border: 1.5px solid var(--line-2);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0.6;
  pointer-events: none;
}
.case:hover, .case:focus-within {
  transform: translateY(-7px);
  box-shadow:
    inset 0 0 0 3px var(--line-2),
    0 2px 3px rgba(20, 16, 8, 0.08),
    0 46px 76px -20px rgba(20, 16, 8, 0.44);
}
.case__no {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--ink-2);
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  margin-bottom: 1.1rem;
  text-transform: uppercase;
}
.case__no b { font-weight: 400; color: var(--shu); }
.case h3 {
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  font-weight: 480;
  max-width: 22ch;
  transition: color 0.15s ease;
  letter-spacing: -0.015em;
}
.case:hover h3, .case:focus-visible h3 { color: var(--shu); }
.case__dek {
  color: var(--ink-2);
  margin-top: 0.9rem;
  max-width: 52ch;
  font-size: 1.02rem;
}
.case__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1.3rem;
}
.case__chips span {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 0.28rem 0.6rem;
  white-space: nowrap;
}
.case__chips span.hot { color: var(--shu); border-color: var(--shu); }
.case__title-link { display: block; text-decoration: none; color: inherit; }

.case__rule { border: 0; border-top: 1px solid var(--line); margin: 1.4rem 0 1.2rem; }

.case__stats {
  display: flex;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  flex-wrap: wrap;
}
.case__stats b {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 460;
  color: var(--shu);
  line-height: 1;
  margin-bottom: 0.35rem;
  font-variant-numeric: tabular-nums;
}
.case__stats span {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  max-width: 16ch;
  display: inline-block;
  line-height: 1.35;
}

.case__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 1.5rem;
}
.case__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.case__cta .arr { transition: transform 0.2s ease; }
.case:hover .case__cta { color: var(--shu); }
.case:hover .case__cta .arr { transform: translateX(5px); }

.case__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--wash);
}
.case__media img, .case__media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.case__media img { transition: transform 0.6s var(--ease-brush); }
.case:hover .case__media img { transform: scale(1.03); }
/* seal-stamp corner appears on hover */
.case__media::before {
  content: "見";
  position: absolute;
  right: 0.8rem; bottom: 0.8rem;
  z-index: 3;
  width: 2.1rem; height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--jp);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--seal-paper);
  background: var(--shu);
  border-radius: 3px;
  transform: rotate(-4deg) scale(0.4);
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.35s var(--ease-stamp);
  pointer-events: none;
}
.case:hover .case__media::before,
.case:focus-within .case__media::before { opacity: 1; transform: rotate(-4deg) scale(1); }

/* shoji wipe: a paper panel slides off the image as it scrolls in */
@media (prefers-reduced-motion: no-preference) {
  .reveal .rw { position: relative; }
  .reveal .rw::after {
    content: "";
    position: absolute;
    inset: -1px;
    background: var(--paper);
    z-index: 2;
    transform: none;
    transition: transform 1s var(--ease-brush) 0.15s;
  }
  .reveal.in .rw::after { transform: translateX(101.5%); }
  .reveal .rw img { transform: scale(1.07); }
  .reveal.in .rw img { transform: scale(1); }
  .reveal.in:hover .rw img { transform: scale(1.03); }
}

/* Blueprint SVG covers (inline) */
.cover { display: block; background: var(--wash); }
.cover .ln   { stroke: var(--shu); fill: none; stroke-width: 1.5; }
.cover .ln--soft { stroke: var(--line-2); fill: none; stroke-width: 1; }
.cover .bx   { fill: var(--paper); stroke: var(--shu); stroke-width: 1.5; }
.cover .bx--soft { fill: var(--paper); stroke: var(--line-2); stroke-width: 1; }
.cover .dotf { fill: var(--kin); }
.cover .tk {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--ink-2);
}
.cover .tk--hot { fill: var(--shu); }

/* ---- Projects grid: same gallery wall as Selected Work, portrait frames -- */
#projects { position: relative; z-index: 0; }
#projects::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--wash);
  z-index: -1;
}
.projects {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3.5vw, 2.75rem);
  padding-block: clamp(0.5rem, 2vw, 1.25rem);
}
.project {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--paper);
  border: clamp(6px, 0.8vw, 11px) solid var(--ink);
  box-shadow:
    inset 0 0 0 3px var(--line-2),
    0 2px 3px rgba(20, 16, 8, 0.08),
    0 30px 54px -20px rgba(20, 16, 8, 0.36);
  transition: transform 0.45s var(--ease-brush), box-shadow 0.45s var(--ease-brush);
}
/* a hairline wire, as if each frame is hung from something above it */
.project::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  width: 38px;
  height: 12px;
  transform: translateX(-50%);
  border: 1.5px solid var(--line-2);
  border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0.6;
  pointer-events: none;
  z-index: 1;
}
.project:hover, .project:focus-visible {
  transform: translateY(-6px);
  box-shadow:
    inset 0 0 0 3px var(--line-2),
    0 2px 3px rgba(20, 16, 8, 0.08),
    0 40px 68px -20px rgba(20, 16, 8, 0.42);
}
.project__media {
  background: var(--wash);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.5rem, 1.2vw, 0.85rem);
}
.project__media img,
.project__media svg {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  transition: transform 0.6s var(--ease-brush);
}
.project:hover .project__media img { transform: scale(1.03); }
.project__body {
  padding: clamp(1.3rem, 2.8vw, 1.85rem) clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.5rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}
.project__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.project__tag {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--shu);
}
.project__status {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 0.22rem 0.6rem;
  white-space: nowrap;
}
.project h3 { font-size: 1.4rem; font-weight: 500; transition: color 0.15s ease; }
.project:hover h3 { color: var(--shu); }
.project p { color: var(--ink-2); font-size: 1rem; }
.project__cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.project__cta .arr { transition: transform 0.2s ease; }
.project:hover .project__cta .arr { transform: translateX(5px); }
.project:hover .project__cta { color: var(--shu); }

/* ---- Toolkit strip (compact) --------------------------------------- */
.section--tight { padding-block: clamp(2.25rem, 5vw, 3.25rem); }
.section-head--tight { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.section-title--sm { font-size: clamp(1.4rem, 2.6vw, 1.85rem); max-width: none; }

/* ---- Toolbox: the dōgubako ---------------------------------
   A carpenter's tool chest. Closed on arrival; the lid swings
   up on scroll to reveal a washi label pasted inside and the
   tools resting in fitted wells. Click toggles it thereafter.
   Wood + label colors are constants (a real object doesn't
   change with the theme), only its shadow does.               */
.toolbox {
  --wd-frame: #6B5236;   /* outer frame / lid front */
  --wd-frame-2: #7C6140; /* lid interior, lighter like raw kiri */
  --wd-floor: #55422B;   /* tray bed */
  --wd-block: #7E6341;   /* raised tool blocks, lighter than the bed */
  --wd-edge:  #8A6E49;   /* highlight on top edges */
  --wd-ink:   #EFE5C9;   /* text on wood */
  --wd-grain: repeating-linear-gradient(
      4deg,
      rgba(32, 22, 8, 0.08) 0px, rgba(32, 22, 8, 0) 3px,
      rgba(32, 22, 8, 0) 12px, rgba(32, 22, 8, 0.055) 14px,
      rgba(32, 22, 8, 0) 16px, rgba(32, 22, 8, 0) 29px);
  max-width: 880px;
  margin-inline: auto;
}
.toolbox__scene {
  position: relative;
  perspective: 1500px;
  /* headroom for the opened lid standing above the tray */
  margin-top: clamp(140px, 30vw, 350px);
}
.toolbox__tray {
  list-style: none;
  margin: 0;
  position: relative;
  background: var(--wd-floor);
  background-image: var(--wd-grain);
  border: clamp(11px, 1.8vw, 17px) solid var(--wd-frame);
  border-radius: 4px;
  box-shadow:
    inset 0 2px 10px rgba(15, 10, 3, 0.55),
    var(--shadow);
  padding: clamp(0.6rem, 1.6vw, 1rem);
  display: grid;
  gap: clamp(0.5rem, 1.2vw, 0.8rem);
  grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "a b c d d"
    "a e e f f";
}
.toolbox__well--a { grid-area: a; }
.toolbox__well--b { grid-area: b; }
.toolbox__well--c { grid-area: c; }
.toolbox__well--d { grid-area: d; }
.toolbox__well--e { grid-area: e; }
.toolbox__well--f { grid-area: f; }
/* each tool sits on its own raised wooden block in the tray bed */
.toolbox__well {
  min-height: clamp(96px, 13vw, 122px);
  background: var(--wd-block);
  background-image: var(--wd-grain);
  border-radius: 6px;
  box-shadow:
    inset 0 1px 0 var(--wd-edge),
    inset 0 -3px 0 rgba(10, 6, 1, 0.32),
    0 7px 12px rgba(10, 6, 1, 0.42);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.75rem;
}
/* cream inlay plate so every logo reads against the wood */
.toolbox__icon {
  width: 54px;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F3EDDC;
  border-radius: 8px;
  box-shadow:
    inset 0 2px 4px rgba(60, 42, 16, 0.28),
    0 1px 0 rgba(255, 244, 216, 0.12);
  transition: transform 0.2s var(--ease-brush);
}
.toolbox__well:hover .toolbox__icon { transform: translateY(-3px); }
.toolbox__icon img { width: 34px; height: 34px; object-fit: contain; display: block; }
.toolbox__name {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--wd-ink);
  opacity: 0.85;
}

/* Lid: covers the tray exactly; hinge is the tray's top edge */
.toolbox__lid {
  position: absolute;
  inset: 0;
  z-index: 2;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  /* negative = the lid swings up and AWAY behind the hinge, like a
     real chest; default open for no-JS and reduced motion visitors */
  transform: rotateX(-152deg);
  transition: transform 1.3s var(--ease-brush);
  cursor: pointer;
  border-radius: 4px;
}
.toolbox__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 4px;
  border: clamp(11px, 1.8vw, 17px) solid var(--wd-frame);
  background: var(--wd-frame-2);
  background-image: var(--wd-grain);
}
.toolbox__face--out {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  background: var(--wd-frame);
  background-image: var(--wd-grain);
  box-shadow: inset 0 1px 0 var(--wd-edge), var(--shadow);
}
.toolbox__brand {
  font-family: var(--jp);
  font-size: clamp(2.2rem, 5vw, 3.1rem);
  line-height: 1;
  color: var(--wd-ink);
  opacity: 0.9;
}
.toolbox__lid-note {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  color: var(--wd-ink);
  opacity: 0.55;
}
.toolbox__clasp {
  position: absolute;
  bottom: -7px;
  left: 50%;
  width: 46px;
  height: 15px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #9A9284, #6F685C 55%, #57514a);
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(10, 6, 1, 0.5);
}
/* interior face: pre-flipped so it reads upright when the lid stands open */
.toolbox__face--in {
  transform: rotateX(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 3px 9px rgba(15, 10, 3, 0.45);
}
.toolbox__label {
  background: var(--seal-paper);
  color: #201C15;
  padding: clamp(0.8rem, 2vw, 1.3rem) clamp(1.1rem, 3vw, 1.9rem);
  display: flex;
  flex-direction: row-reverse; /* vertical-rl columns read right to left */
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.2rem);
  box-shadow: 0 3px 9px rgba(15, 10, 3, 0.35);
  transform: rotate(-0.6deg);
  max-height: 86%;
}
.toolbox__label-main,
.toolbox__label-sub {
  writing-mode: vertical-rl;
  font-family: var(--jp);
}
.toolbox__label-main { font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: 0.3em; }
.toolbox__label-sub  { font-size: clamp(0.7rem, 1.4vw, 0.85rem); letter-spacing: 0.24em; color: #6C6350; }
.toolbox__label-seal {
  align-self: flex-end;
  font-family: var(--jp);
  font-size: 0.95rem;
  line-height: 1;
  color: #F7F3E8;
  background: #B93A2B;
  padding: 0.3em 0.28em;
  border-radius: 2px;
}
.toolbox__caption {
  margin: 1.1rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--ink-2);
}

/* Closed state - only once JS arms the box, so no-JS users see it open */
.toolbox.armed:not(.open) .toolbox__lid { transform: rotateX(0deg); }
.toolbox.armed:not(.open) .toolbox__well {
  opacity: 0;
  transform: translateY(7px);
}
.toolbox__well {
  transition: opacity 0.5s ease, transform 0.5s var(--ease-brush);
}
/* tools settle in one by one once the lid is up */
.toolbox.open .toolbox__well--a { transition-delay: 0.55s; }
.toolbox.open .toolbox__well--b { transition-delay: 0.65s; }
.toolbox.open .toolbox__well--c { transition-delay: 0.75s; }
.toolbox.open .toolbox__well--d { transition-delay: 0.85s; }
.toolbox.open .toolbox__well--e { transition-delay: 0.95s; }
.toolbox.open .toolbox__well--f { transition-delay: 1.05s; }

[data-theme="dark"] .toolbox {
  --wd-frame: #4D3B24;
  --wd-frame-2: #5C4830;
  --wd-floor: #392C1B;
  --wd-block: #5E4A2F;
  --wd-edge:  #6B5539;
  --wd-ink:   #E4D8B9;
}

@media (max-width: 640px) {
  .toolbox__tray {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "a b"
      "a c"
      "d e"
      "f f";
  }
  .toolbox__well { min-height: 86px; }
  /* taller tray on mobile: stand the lid more upright so its
     foreshortened height still fits the reserved headroom */
  .toolbox__lid { transform: rotateX(-118deg); }
  .toolbox__label-main { letter-spacing: 0.18em; }
}
@media (prefers-reduced-motion: reduce) {
  .toolbox__lid, .toolbox__well { transition: none !important; }
}

/* "At a glance" recruiter panel (detail pages) */
.glance {
  border: 1px solid var(--line);
  background: var(--wash);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.glance__label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
}
.glance__label::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--kin);
  transform: rotate(45deg);
  flex: none;
}
.glance dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem 2.5rem;
  margin: 1.6rem 0 0;
}
.glance dt {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.35rem;
}
.glance dd { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.glance dd b { font-weight: 500; }

/* ---- Philosophy -------------------------------------------------- */
.beliefs { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); }
.belief {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: start;
}
.belief__no {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  color: var(--shu);
  display: block;
  margin-bottom: 0.75rem;
}
.belief h3 { font-size: var(--fs-h3); font-weight: 500; max-width: 16ch; }
.belief h3 em { font-style: italic; color: var(--shu); }
.belief > div p { color: var(--ink-2); max-width: 58ch; }

.fives {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  counter-reset: fs;
}
.fives li {
  display: grid;
  grid-template-columns: 3.2rem 11rem 1fr;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.98rem;
  counter-increment: fs;
  transition: padding-left 0.25s var(--ease-brush);
  position: relative;
}
.fives li:hover { padding-left: 0.6rem; }
.fives li::before {
  content: counter(fs) "S";
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--kin);
  padding-top: 0.25rem;
}
.fives .kj {
  font-family: var(--jp);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--shu);
  display: block;
  line-height: 1.3;
}
.fives .jp {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-top: 0.2rem;
}
.fives .jp .kj { margin-bottom: 0.15rem; }
.fives li span:last-child { color: var(--ink-2); }

/* ---- Career -------------------------------------------------------- */
.view-switch {
  display: inline-flex;
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.view-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  padding: 0.65rem 1.2rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.view-switch button + button { border-left: 1px solid var(--line-2); }
.view-switch button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.view-switch button:not([aria-pressed="true"]):hover { color: var(--ink); }

/* Timeline view */
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 6px;
  width: 1px;
  background: var(--line-2);
}
.timeline li {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0;
  padding-bottom: clamp(2rem, 4.5vw, 3rem);
  position: relative;
}
.timeline li:last-child { padding-bottom: 0; }
.timeline .t-node { position: relative; }
.timeline .t-node::after {
  content: "";
  position: absolute;
  left: -8px;
  top: -6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--paper);
  z-index: 0;
}
.timeline .t-node::before {
  content: "";
  position: absolute;
  left: -3px;
  top: -1px;
  width: 20px;
  height: 20px;
  background-color: var(--ink-2);
  -webkit-mask-image: var(--torii);
  mask-image: var(--torii);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  z-index: 1;
}
.timeline li.t-now .t-node::before { background-color: var(--shu); }
.timeline h3 { font-size: 1.25rem; font-weight: 500; }
.timeline .t-org {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--shu);
  margin: 0.3rem 0 0.6rem;
}
.timeline p { color: var(--ink-2); max-width: 56ch; font-size: 1rem; margin: 0; }
.timeline .t-growth {
  display: inline-block;
  margin-top: 0.75rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  padding: 0.28rem 0.65rem;
}
.timeline .t-growth b { font-weight: 400; color: var(--kin); }

/* Story view */
.career-story p {
  max-width: var(--measure);
  color: var(--ink-2);
  font-size: 1.1rem;
  line-height: 1.7;
}
.career-story p b { color: var(--ink); font-weight: 500; }
.career-story p em { color: var(--ink); }
[hidden] { display: none !important; }

@media (max-width: 640px) {
  .timeline li { grid-template-columns: 1.8rem minmax(0, 1fr); }
}

/* ---- About -------------------------------------------------------- */
.about {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.about__text p { color: var(--ink-2); max-width: var(--measure); }
.about__text p b { color: var(--ink); font-weight: 500; }
.about__stack { display: grid; gap: 2.4rem; }

/* Peek card - hover/tap-to-flip Polaroid stack */
.peek {
  position: relative;
  margin: 0;
  cursor: pointer;
  transform: rotate(-1.4deg);
  transition: transform 0.3s ease;
}
.peek:nth-of-type(2) { transform: rotate(1.1deg); }
.peek:hover, .peek.playing, .peek:focus-visible { transform: rotate(0deg); }
.peek::before,
.peek::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line-2);
  background: var(--paper);
  z-index: -1;
  transition: transform 0.3s ease;
}
.peek::before { transform: rotate(3.2deg) translate(6px, 5px); }
.peek::after  { transform: rotate(-2.6deg) translate(-5px, 7px); }
.peek:hover::before, .peek.playing::before { transform: rotate(4.4deg) translate(9px, 7px); }
.peek:hover::after,  .peek.playing::after  { transform: rotate(-3.8deg) translate(-8px, 9px); }
.peek__frame {
  display: block;
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow);
  padding: 0.9rem 0.9rem 3.4rem;
}
.peek__frame.tilt-l { transform: rotate(-3.4deg); }
.peek__frame.tilt-r { transform: rotate(3.4deg); }
.peek__frame img {
  display: none;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  filter: var(--img-filter);
}
.peek__frame img.on { display: block; }
.peek__note {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  display: block;
  font-family: var(--hand);
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--shu);
  text-align: center;
  transform: rotate(-0.8deg);
}
.peek__badge {
  position: absolute;
  top: 1.7rem;
  left: 1.7rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #F7F3E8;
  background: rgba(32, 28, 21, 0.74);
  padding: 0.4rem 0.7rem;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.peek__badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--matcha);
}
@media (prefers-reduced-motion: no-preference) {
  .peek__badge::before { animation: pulse 1.6s ease-in-out infinite; }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.55; }
  }
}
.peek.playing .peek__badge { opacity: 0; }
.peek__count {
  position: absolute;
  top: 1.7rem;
  right: 1.7rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: #F7F3E8;
  background: rgba(32, 28, 21, 0.74);
  padding: 0.35rem 0.6rem;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.peek.playing .peek__count { opacity: 1; }
.peek figcaption {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 1.1rem;
}
.peek figcaption em { font-style: normal; color: var(--matcha); }
@media (prefers-reduced-motion: reduce) {
  .peek::before, .peek::after, .peek { transition: none; }
}
@media (max-width: 640px) {
  .peek { transform: rotate(0deg); }
  .peek:nth-of-type(2) { transform: rotate(0deg); }
}

/* ---- Testimonials -------------------------------------------------------- */
.testimonials {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 2.5rem);
}
.testimonial {
  margin: 0;
  padding: 0;
  position: relative;
}
.testimonial p {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 1.4rem;
  padding-left: 1.6rem;
}
/* Japanese corner brackets in place of Latin quotes */
.testimonial p::before {
  content: "「";
  font-family: var(--jp);
  color: var(--shu);
  font-size: 1.5rem;
  line-height: 1;
  position: absolute;
  left: 0; top: 0.1rem;
}
.testimonial p::after {
  content: " 」";
  font-family: var(--jp);
  color: var(--shu);
  font-size: 1.2rem;
  line-height: 1;
}
.testimonial cite {
  font-style: normal;
  display: grid;
  gap: 0.2rem;
  padding-left: 1.6rem;
}
.testimonial .t-name { font-weight: 500; font-size: 0.98rem; }
.testimonial .t-role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--shu);
}
.testimonial .t-rel {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

@media (max-width: 880px) {
  .testimonials { grid-template-columns: 1fr; }
}

/* ---- Contact -------------------------------------------------------- */
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.contact h2 {
  font-size: var(--fs-h2);
  font-weight: 440;
  max-width: 22ch;
  letter-spacing: -0.018em;
}
.contact h2 em { font-style: italic; color: var(--shu); }
.contact__row {
  margin-top: 3rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.btn {
  font-family: var(--mono);
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--ink);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--fill { background: var(--ink); color: var(--paper); }
.btn--fill:hover { background: var(--shu); border-color: var(--shu); color: #F7F3E8; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.contact__meta {
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--ink-2);
  display: grid;
  gap: 0.4rem;
}
.contact__meta a { color: var(--ink); text-decoration-color: var(--line-2); }
.contact__meta a:hover { color: var(--shu); }

/* The tea pour - brush-drawn, then poured, as it scrolls in */
.contact__tea {
  display: grid;
  justify-items: center;
  gap: 1.2rem;
}
.contact__tea svg {
  width: clamp(11rem, 17vw, 15rem);
  height: auto;
  color: var(--ink);
  overflow: visible;
}
.tea-draw,
.tea-stream,
.tea-steam path {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tea-kettle {
  transform-box: view-box;
  transform-origin: 160px 130px;
  transform: rotate(-8deg);
}
.tea-sun { fill: var(--shu); }
.tea-wash { fill: currentColor; opacity: 0.07; }
.tea-sleeve { opacity: 0.14; }
.tea-dot { fill: currentColor; }
.tea-table { stroke: var(--ink-2); }
.tea-stream { opacity: 0.75; }
.tea-fill { fill: currentColor; opacity: 0.8; }
.tea-steam path { stroke: var(--ink-2); opacity: 0.55; }
.contact__tea figcaption {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.7;
}
/* replay control - understated, appears once the first pour has run */
.tea-pour {
  appearance: none;
  display: none;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.2s ease, transform 0.15s ease;
}
.contact__tea.seen .tea-pour { display: inline-flex; }
.tea-pour:hover { color: var(--ink); border-color: var(--ink); }
.tea-pour:active { transform: scale(0.96); }
.tea-pour:disabled { opacity: 0.45; cursor: default; transform: none; }
.tea-pour__icon {
  display: inline-block;
  transition: transform 0.5s var(--ease-brush);
}
.tea-pour:not(:disabled):active .tea-pour__icon { transform: rotate(-140deg); }
.tea-controls { display: flex; align-items: center; gap: 0.5rem; }
/* sound toggle - understated, sits beside the replay button */
.tea-sound {
  appearance: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.05rem;
  height: 2.05rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.contact__tea.seen .tea-sound { display: inline-flex; }
.tea-sound:hover { color: var(--ink); border-color: var(--ink); }
.tea-sound:active { transform: scale(0.94); }
.tea-sound svg { width: 1.05rem; height: 1.05rem; }
.tea-sound__off { display: none; }
.tea-sound[aria-pressed="false"] .tea-sound__on { display: none; }
.tea-sound[aria-pressed="false"] .tea-sound__off { display: block; }
@media (prefers-reduced-motion: reduce) {
  .tea-pour { display: none !important; }
  .tea-sound { display: none !important; }
}
@media (prefers-reduced-motion: no-preference) {
  /* 1 - outlines brush themselves in */
  .contact__tea .tea-draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1s var(--ease-brush) 0.2s;
  }
  .contact__tea.in .tea-draw { stroke-dashoffset: 0; }
  /* washes, lid dot and sun settle in behind the lines */
  .contact__tea .tea-wash,
  .contact__tea .tea-dot {
    opacity: 0;
    transition: opacity 0.6s ease 0.9s;
  }
  .contact__tea.in .tea-wash { opacity: 0.07; }
  .contact__tea.in .tea-sleeve { opacity: 0.14; }
  .contact__tea.in .tea-dot { opacity: 1; }
  .contact__tea .tea-sun {
    opacity: 0;
    transform: scale(0.85);
    transform-box: fill-box;
    transform-origin: center;
    transition: opacity 0.7s ease 0.5s, transform 0.7s var(--ease-brush) 0.5s;
  }
  .contact__tea.in .tea-sun { opacity: 1; transform: scale(1); }
  /* 2 - kettle tilts forward to pour, the tea pours */
  .contact__tea .tea-kettle {
    transform: rotate(-42deg);
    transition: transform 0.9s var(--ease-brush) 2.8s;
  }
  .contact__tea.in .tea-kettle { transform: rotate(-8deg); }
  .contact__tea .tea-stream {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: 50% 0%;
    transition: transform 0.7s ease-in 1.25s, opacity 0.5s ease 2.9s;
  }
  .contact__tea.in .tea-stream { transform: scaleY(1); opacity: 0; }
  /* 3 - the cup fills */
  .contact__tea .tea-fill {
    opacity: 0;
    transition: opacity 0.8s ease 1.85s;
  }
  .contact__tea.in .tea-fill { opacity: 0.8; }
  /* 4 - the kettle pulls back once poured, steam rises, quietly, forever */
  .contact__tea .tea-steam path { opacity: 0; }
  .contact__tea.in .tea-steam path {
    transform-box: fill-box;
    animation: tea-steam 4.5s ease-in-out 2.3s infinite;
  }
  .contact__tea.in .tea-steam path:last-child { animation-delay: 3.8s; }
  /* instantly snapped back to the start state on the way out, so the
     whole sequence replays from pouring to completion on re-entry */
  .contact__tea.tea-reset,
  .contact__tea.tea-reset * {
    transition: none !important;
    animation: none !important;
  }
  /* "Pour some more" - once already drawn in, a click just re-runs the
     tilt/pour/return, not the brush draw-in of the whole illustration */
  .contact__tea.pouring .tea-kettle {
    animation: tea-repour-kettle 2.2s var(--ease-brush);
  }
  .contact__tea.pouring .tea-stream {
    animation: tea-repour-stream 2.2s ease;
  }
  .contact__tea.pouring .tea-fill {
    animation: tea-repour-fill 2.2s ease;
  }
}
@keyframes tea-steam {
  0%   { transform: translateY(6px); opacity: 0; }
  35%  { opacity: 0.55; }
  100% { transform: translateY(-11px); opacity: 0; }
}
@keyframes tea-repour-kettle {
  0%   { transform: rotate(-8deg); }
  25%  { transform: rotate(-42deg); }
  65%  { transform: rotate(-42deg); }
  100% { transform: rotate(-8deg); }
}
@keyframes tea-repour-stream {
  0%, 15%  { transform: scaleY(0); opacity: 0; }
  30%      { transform: scaleY(1); opacity: 0.75; }
  60%      { transform: scaleY(1); opacity: 0.75; }
  75%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes tea-repour-fill {
  0%, 20%  { opacity: 0.8; }
  40%      { opacity: 1; }
  100%     { opacity: 0.8; }
}
@media (max-width: 720px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__tea { justify-items: start; }
  .contact__tea figcaption { text-align: left; }
}

/* ---- Footer ----------------------------------------------------------- */
.footer-band { border-top: 1px solid var(--line); }
/* shippō interlocking-circles band */
.footer-band::before {
  content: "";
  display: block;
  height: 74px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23201C15' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.07;
  -webkit-mask-image: linear-gradient(#000, transparent);
          mask-image: linear-gradient(#000, transparent);
}
[data-theme="dark"] .footer-band::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23EDE6D4' stroke-width='1'%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.05;
}
.footer {
  padding-block: 1.5rem 2.5rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 2rem;
  justify-content: space-between;
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--shu); }
.footer .seal { width: 1.5rem; height: 1.5rem; font-size: 0.85rem; border-radius: 3px; }
.footer__mark { display: inline-flex; align-items: center; gap: 0.7rem; }

/* Floating back button - detail pages only */
.back-float {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--paper);
  border: 1px solid var(--line-2);
  padding: 0.75rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform 0.25s var(--ease-brush), color 0.2s ease, border-color 0.2s ease;
}
.back-float:hover, .back-float:focus-visible {
  color: var(--shu);
  border-color: var(--shu);
  transform: translateX(-3px);
}
.back-float .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}
.back-float:hover .arr, .back-float:focus-visible .arr { transform: translateX(-4px); }
@media (max-width: 640px) {
  .back-float span:not(.arr) { display: none; }
  .back-float { padding: 0.7rem; border-radius: 50%; }
}

/* ---- Case study & project detail pages --------------------------------- */
.cs-hero { padding-block: clamp(4rem, 9vw, 7rem) clamp(3rem, 6vw, 5rem); }
.cs-hero h1 {
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  font-weight: 440;
  max-width: 18ch;
  letter-spacing: -0.02em;
}
.cs-hero__dek {
  max-width: 52ch;
  font-size: clamp(1.1rem, 1.9vw, 1.3rem);
  color: var(--ink-2);
  margin-top: 1.8rem;
  line-height: 1.55;
}
.cs-specs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.cs-specs > div { background: var(--paper); padding: 1.1rem 1.2rem 1.2rem; }
.cs-specs dt {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 0.35rem;
}
.cs-specs dd { margin: 0; font-size: 0.98rem; }

.cs-body { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cs-section { margin-bottom: clamp(3.5rem, 8vw, 6rem); }
.cs-section:last-child { margin-bottom: 0; }
.cs-section h2 {
  font-size: var(--fs-h2);
  font-weight: 460;
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin-bottom: 1.5rem;
}
.cs-section > p, .cs-section ul.prose { max-width: var(--measure); color: var(--ink-2); }
.cs-section > p b { color: var(--ink); font-weight: 500; }
ul.prose { padding-left: 1.1rem; margin: 0 0 1.1em; }
ul.prose li { margin-bottom: 0.55em; }
ul.prose li::marker { color: var(--shu); }

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  margin: 2.25rem 0;
}
.stats > div { background: var(--paper); padding: 1.4rem 1.3rem 1.5rem; }
.stats .n {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 460;
  letter-spacing: -0.02em;
  color: var(--shu);
  line-height: 1;
  display: block;
  margin-bottom: 0.55rem;
  font-variant-numeric: tabular-nums;
}
.stats .l {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.5;
  display: block;
}

figure.shot { margin: 2.5rem 0 0; }
figure.shot img { width: 100%; border: 1px solid var(--line); }
figure.shot figcaption {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.8rem;
}
.shots-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}
.shots-2 figure.shot { margin-top: 2.5rem; }

.cs-note {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-2);
  border-left: 2px solid var(--kin);
  padding-left: 1rem;
  max-width: 60ch;
  line-height: 1.6;
}

.cs-next { border-top: 1px solid var(--line); padding-block: clamp(3rem, 7vw, 5rem); }
.cs-next a { text-decoration: none; display: block; }
.cs-next .spec { margin-bottom: 1.25rem; }
.cs-next h2 {
  font-size: var(--fs-h2);
  font-weight: 460;
  max-width: 20ch;
  transition: color 0.15s ease;
}
.cs-next a:hover h2 { color: var(--shu); }
.cs-next .case__cta { margin-top: 1.25rem; }
.cs-next a:hover .case__cta { color: var(--shu); }
.cs-next a:hover .case__cta .arr { transform: translateX(5px); }

/* Plugin demo iframe (DS Architect) */
.demo-frame {
  border: 1px solid var(--line);
  background: var(--wash);
  width: 100%;
  height: 780px;
}
.demo-hint {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.8rem;
}

/* Flow diagram (SVG, project pages) */
.flow { margin: 2.5rem 0 0; border: 1px solid var(--line); background: var(--wash); overflow-x: auto; }
.flow svg { display: block; width: 100%; min-width: 760px; height: auto; overflow: visible; }

/* "How it works" step-flow diagram (AI Illustration Creator) */
.fc-step { transform-box: fill-box; transform-origin: center; transition: transform 0.3s var(--ease-brush); }
.fc-step:hover { transform: translateY(-4px); }
.fc-box { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.5; transition: stroke 0.25s ease; }
.fc-step:hover .fc-box { stroke: var(--shu); }
.fc-icon { stroke: var(--ink-2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; transition: stroke 0.25s ease; }
.fc-icon-fill { fill: var(--ink-2); stroke: none; transition: fill 0.25s ease; }
.fc-step:hover .fc-icon { stroke: var(--shu); }
.fc-step:hover .fc-icon-fill { fill: var(--shu); }
.fc-title { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--shu); }
.fc-copy { font-family: var(--mono); font-size: 10px; letter-spacing: 0.01em; fill: var(--ink-2); }
.fc-arrow { stroke: var(--shu); stroke-width: 1.5; fill: none; }
.fc-arrowhead { fill: var(--shu); }
.fc-loop { stroke: var(--line-2); stroke-width: 1.5; fill: none; stroke-dasharray: 6 6; }
.fc-loop-head { fill: var(--line-2); }
.fc-lock-box { fill: var(--paper); stroke: var(--shu); stroke-width: 1.5; }
.fc-lock-icon { stroke: var(--shu); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.fc-lock-label { font-family: var(--mono); font-size: 9.2px; letter-spacing: 0.07em; text-transform: uppercase; fill: var(--shu); }
.fc-lock-sub { font-family: var(--mono); font-size: 8.4px; fill: var(--ink-2); }
.fc-loop-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; fill: var(--ink-2); }
.fc-dot { fill: var(--kin); }
@media (prefers-reduced-motion: no-preference) {
  .fc-arrow {
    stroke-dasharray: 900;
    stroke-dashoffset: 900;
    transition: stroke-dashoffset 1s var(--ease-brush);
  }
  .reveal.in .fc-arrow { stroke-dashoffset: 0; transition-delay: 0.35s; }
}

/* ---- Reveal on scroll -------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s var(--ease-brush);
    transition-delay: var(--rd, 0s);
  }
  .reveal.in { opacity: 1; transform: none; }
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 880px) {
  .case { grid-template-columns: 1fr; align-items: start; border-width: 7px; padding: 1.5rem 1.35rem; }
  .case__media { order: -1; }
  .belief { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .about__figure { max-width: 420px; }
  .projects { grid-template-columns: 1fr; gap: clamp(1.75rem, 6vw, 2.5rem); }
  .project { border-width: 6px; }
  .project__media { aspect-ratio: 4 / 3; }
  .glance dl { grid-template-columns: 1fr; }
  .shots-2 { grid-template-columns: 1fr; }
  .fives li { grid-template-columns: 2.4rem 9rem 1fr; }
  .demo-frame { height: 720px; }
}
@media (max-width: 480px) {
  .nav__links { gap: 0.7rem; }
  .nav__links .hide-s { display: none; }
  .fives li { grid-template-columns: 2.2rem 1fr; }
  .fives li span:last-child { grid-column: 2; }
}

/* ---- Ensō loading screen 「円相」 --------------------------
   A single brush stroke draws an intentionally-incomplete circle
   (the ensō, a Zen mark of a focused moment) around the 整 seal.
   Once drawn, it holds briefly, then the whole mark fades to reveal
   the site. Shown once per session; never shown to no-JS or
   reduced-motion visitors (html.loading is only added by the head script). */
.loadscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.6rem, 4vh, 2.6rem);
  background: var(--paper);
  --pond: min(40vmin, 280px);
}
html.loading { overflow: hidden; }
html.loading .loadscreen { display: flex; }
/* hold the hero choreography until the washi lifts */
html.loading .fade-up,
html.loading .hw,
html.loading .hw > span,
html.loading .hero h1 .u svg path,
html.loading .hero__side { animation-play-state: paused !important; }

.loadscreen__pond { position: relative; width: var(--pond); height: var(--pond); }
.enso { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-8deg); }
.enso__stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 520;
  stroke-dashoffset: 520;
  animation: ensoDraw 2.1s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes ensoDraw {
  0%   { stroke-dashoffset: 520; opacity: 0.9; }
  55%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -520; opacity: 0.9; }
}
.loadscreen__seal {
  position: absolute;
  inset: 0;
  margin: auto;
  width: calc(var(--pond) * 0.34);
  height: calc(var(--pond) * 0.34);
  border-radius: 50%;
  background: var(--shu);
  color: var(--seal-paper);
  display: grid;
  place-items: center;
  font-family: var(--jp);
  font-size: calc(var(--pond) * 0.165);
  line-height: 1;
  transform: rotate(-4deg);
}

.loadscreen__label {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  animation: loadPulse 2.1s ease-in-out infinite alternate;
}
.loadscreen__label [lang="ja"] {
  font-family: var(--jp);
  font-size: 0.95rem;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}
@keyframes loadPulse { from { opacity: 0.5; } to { opacity: 1; } }

/* -- reveal: the seal stamps and lifts, the stroke fades, the washi fades -- */
.loadscreen--done { opacity: 0; pointer-events: none; transition: opacity 0.85s ease 0.55s; }
.loadscreen--done .enso__stroke {
  animation: none;
  stroke-dashoffset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.loadscreen--done .loadscreen__seal {
  transform: rotate(-4deg) scale(1.12);
  opacity: 0;
  transition: transform 0.55s var(--ease-stamp), opacity 0.45s ease 0.08s;
}
.loadscreen--done .loadscreen__label { opacity: 0; transition: opacity 0.4s ease; }