/* ====================================================================
   RESONIC STUDIO — editorial homepage
   System: Hodinkee × Aesop × Brutus, washi paper × sumi × akane
   ==================================================================== */

:root {
  /* Color — washi cream + sumi black + restrained akane + kinpaku */
  --bone:        #efe7d6;     /* washi mulberry paper */
  --bone-2:      #e8dec8;     /* slightly deeper paper */
  --bone-soft:   #f4eee0;
  --bone-warm:   #ece1cb;     /* layered second paper */
  --sumi:        #14110d;     /* sumi ink */
  --sumi-soft:   #3a342a;
  --pencil:      rgba(20,17,13,0.55);
  /* PART 3d — bumped from 0.42 (~3.9:1 on bone, fails AA) to 0.55
     (~5.9:1, passes AA for small text). Minor site-wide darkening
     on metadata captions; intentional contrast lift. */
  --pencil-soft: rgba(20,17,13,0.55);
  --rule:        rgba(20,17,13,0.14);
  --rule-soft:   rgba(20,17,13,0.07);
  --rule-hair:   rgba(20,17,13,0.10);
  --akane:       #b32419;     /* shu/akane crimson */
  --akane-deep:  #7a1410;
  --akane-quiet: rgba(179,36,25,0.10);
  --akane-glow:  rgba(179,36,25,0.18);
  --kin:         #a07628;     /* kinpaku gold */
  --kin-soft:    #c69a47;
  --ink-dark:    #1a1612;     /* colophon background */

  /* Type */
  --display: "Shippori Mincho B1", "Noto Serif JP", "Source Serif 4", Georgia, serif;
  --serif:   "Source Serif 4", "Tiempos Text", "Iowan Old Style", Georgia, serif;
  --jp:      "Shippori Mincho B1", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --jp-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Scale — strict editorial hierarchy */
  --fs-mono:    11px;
  --fs-mono-sm: 10px;
  --fs-mono-xs: 9px;
  --fs-body:    17px;
  --fs-lede:    21px;
  --fs-h3:      28px;
  --fs-h2:      48px;
  --fs-h1:      clamp(56px, 8.4vw, 132px);
  --fs-eyebrow: 11px;

  --max:    1280px;
  --max-tight: 1100px;
  --gutter: clamp(20px, 5vw, 140px);
  --content-max: 1680px;

  /* Spacing scale (4-multiples) — page-scoped duplicates exist on
     /specify and /commission via their own .page-* blocks; this
     :root copy is the source for pages that don't override them
     (e.g. /gallery). */
  --s-4:   4px;
  --s-8:   8px;
  --s-12:  12px;
  --s-16:  16px;
  --s-20:  20px;
  --s-24:  24px;
  --s-32:  32px;
  --s-48:  48px;
  --s-64:  64px;
  --s-96:  96px;
  --s-128: 128px;
  --s-160: 160px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--bone);
  color: var(--sumi);
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body { font-feature-settings: "kern" 1, "liga" 1, "onum" 1; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; }

::selection { background: var(--akane); color: var(--bone); }

/* Custom focus — never the default blue ring */
:focus-visible {
  outline: 1.5px solid var(--akane);
  outline-offset: 3px;
}
.btn-primary:focus-visible,
.letter__send:focus-visible,
.nav__cta:focus-visible {
  outline-offset: 4px;
}

/* Subtle paper grain — tiled SVG noise */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08, 0 0 0 0 0.07, 0 0 0 0 0.05, 0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  opacity: 0.55;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* ============ Reveal utilities ============ */
.reveal {
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .05s; }
.reveal[data-delay="2"] { transition-delay: .10s; }
.reveal[data-delay="3"] { transition-delay: .15s; }
.reveal[data-delay="4"] { transition-delay: .20s; }
.reveal[data-delay="5"] { transition-delay: .25s; }

.split-line { display: block; overflow: hidden; }
.split-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.split-line.is-in > span { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .split-line > span { transition: none !important; transform: none !important; opacity: 1 !important; }
  .hero__mascot,
  .hero__strip-cue-line { animation: none !important; }
}

/* Screen-reader-only — visually hidden but read by crawlers and AT.
   Used after decorative H1s to supplement them with keyword-rich
   semantic text without affecting visible layout. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============ Eyebrow (shared) ============ */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--akane);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--akane);
}
.eyebrow .roman { color: var(--sumi); opacity: .55; font-style: normal; }
.eyebrow .jp { font-family: var(--jp); letter-spacing: 0.08em; color: var(--sumi); opacity: .65; font-weight: 500; }

/* ============ Nav ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 20px var(--gutter);
  background: rgba(239,231,214,0);
  backdrop-filter: blur(0px);
  transition: background .4s ease, backdrop-filter .4s ease, border-color .4s ease, padding .4s ease;
  border-bottom: 0.5px solid transparent;
}
.nav.is-scrolled {
  background: rgba(239,231,214,0.88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom-color: var(--rule-soft);
  padding: 14px var(--gutter);
}
/* hairline scroll-progress beam */
.nav::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.5px;
  height: 1px;
  background: linear-gradient(90deg, var(--akane), #d04339);
  transform-origin: 0 50%;
  transform: scaleX(var(--page-progress, 0));
  opacity: 0;
  transition: opacity .35s ease;
}
.nav.is-scrolled::after { opacity: 0.9; }
.nav__brand {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--sumi);
  transition: opacity .25s ease;
}
.nav__brand:hover { opacity: 0.78; }
.nav__brand img {
  width: 30px; height: 30px;
  object-fit: contain;
  transform: rotate(0deg);
  transition: transform .5s var(--ease-out);
}
.nav__brand:hover img { transform: rotate(-6deg); }
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__link {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sumi);
  opacity: .68;
  position: relative;
  padding: 4px 0;
  transition: opacity .25s ease, color .25s ease;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--akane);
  transition: right .35s var(--ease-out);
}
.nav__link:hover { opacity: 1; color: var(--akane); }
.nav__link:hover::after { right: 0; }
.nav__cta {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--akane);
  padding: 10px 18px;
  position: relative;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  box-shadow: 0 6px 16px -8px rgba(179,36,25,0.5);
}
.nav__cta:hover {
  background: var(--akane-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(179,36,25,0.55);
}

/* Mobile-only burger button — drawer toggle for the nav links. Hidden
   on desktop; flex on mobile. The 3 child spans become an animated X
   when .nav.is-open is set on the parent. */
.nav__burger {
  display: none;
  background: none;
  border: 0;
  width: 36px; height: 36px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 8px;
  cursor: pointer;
}
.nav__burger span {
  display: block;
  width: 100%; height: 1.5px;
  background: var(--sumi);
  transition: transform .25s ease, opacity .25s ease;
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav { padding: 14px 18px; }
  .nav.is-scrolled { padding: 11px 18px; }
  .nav__brand { font-size: 17px; gap: 9px; }
  .nav__brand img { width: 26px; height: 26px; }
  .nav__burger { display: flex; }
  .nav__links {
    position: fixed;
    top: 64px; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--bone);
    border-top: 0.5px solid var(--rule);
    padding: 24px 20px;
    transform: translateY(-110%);
    transition: transform .3s ease;
    z-index: 50;
  }
  .nav.is-open .nav__links { transform: translateY(0); }
  .nav__link, .nav__cta {
    padding: 14px 0;
    border-bottom: 0.5px solid var(--rule-soft);
    text-align: left;
    font-size: 13px;
    letter-spacing: 0.18em;
  }
  .nav__cta { background: transparent; color: var(--sumi); border-radius: 0; }
  .nav__cta:hover { background: transparent; color: var(--akane); }
  .nav__link--hide-mobile { display: block !important; }
}

/* ============ Vertical brand ============ */
.vbrand {
  position: fixed;
  top: 50%; left: 18px;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--pencil);
  opacity: .6;
  z-index: 40;
  pointer-events: none;
}
@media (max-width: 1100px) { .vbrand { display: none; } }

/* ============ Floating cat (mascot) — postage-stamp feel ============ */
.neko {
  position: fixed;
  right: 22px; bottom: 22px;
  width: 72px; height: 72px;
  z-index: 60;
  filter: drop-shadow(0 8px 18px rgba(20,17,13,0.22));
  transition: transform .4s cubic-bezier(.2,.9,.2,1.2);
}
.neko::before {
  content: "";
  position: absolute;
  inset: -6px;
  border: 1px dashed rgba(179,36,25,0.45);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity .4s ease, transform .4s var(--ease-out);
}
.neko:hover::before { opacity: 1; transform: scale(1); }
.neko img { width: 100%; }
.neko:hover { transform: translateY(-5px) rotate(-5deg); }
/* Always-visible chat bubble, sits to the LEFT of the cat with a
   right-pointing tail. No hover-reveal — this is a persistent CTA.
   WhatsApp brand green so it reads instantly as the chat affordance
   against the cream page bg. The parent .neko provides the hover
   lift; the tip itself only animates color + shadow. */
.neko__tip {
  position: absolute;
  right: calc(100% + 12px);
  bottom: 50%;
  transform: translateY(50%);
  background: #25D366;
  color: #FFFFFF;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 12px;
  border: none;
  border-radius: 14px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background-color .25s ease, box-shadow .25s ease;
}
.neko__tip::after {
  content: "";
  position: absolute;
  right: -5px; top: 50%;
  width: 8px; height: 8px;
  background: #25D366;
  transform: translateY(-50%) rotate(45deg);
  transition: background-color .25s ease;
}
.neko:hover .neko__tip {
  background: #1DA851;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.35);
}
.neko:hover .neko__tip::after {
  background: #1DA851;
}
/* Auto-collapse the tip when scrolled past hero. Cat stays
   visible as a quiet floating CTA; tip reappears on cat hover. */
body.is-scrolled .neko__tip {
  opacity: 0;
  transform: translateY(50%) translateX(20px);
  pointer-events: none;
}
body.is-scrolled .neko:hover .neko__tip {
  opacity: 1;
  transform: translateY(50%) translateX(0);
}
@media (max-width: 720px) {
  .neko { width: 56px; height: 56px; right: 14px; bottom: 14px; }
  .neko__tip { font-size: 9px; padding: 6px 10px; }
}

/* ============ Section base ============ */
.section { position: relative; z-index: 2; padding: clamp(96px, 13vh, 160px) var(--gutter); }

/* Paper-fold rule between sections — used as a rhythm marker */
.fold-rule {
  position: relative;
  z-index: 2;
  height: 1px;
  background: var(--rule-soft);
  max-width: var(--max);
  margin: 0 auto;
}
.fold-rule::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--akane);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 4px var(--bone);
}

/* ============ HERO ============ */
.hero {
  position: relative;
  min-height: 100svh;
  padding: 0;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, var(--bone-soft) 0%, var(--bone) 60%);
}
.hero__inner {
  position: relative;
  z-index: 4;
  max-width: var(--content-max);
  margin: 0 auto;
  width: 100%;
  padding: clamp(120px, 18vh, 170px) var(--gutter) clamp(110px, 16vh, 150px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
/* Text column wraps the eyebrow + title + JP subtitle + lede + CTAs.
   Lives in the left ~50% of the grid so the title actually sits at
   the centre of the visible content area instead of left-of-centre. */
.hero__text { display: flex; flex-direction: column; }
/* Editorial corner plate — top-right of hero, like a magazine issue mark */
.hero__plate {
  position: absolute;
  top: clamp(94px, 12vh, 130px);
  right: var(--gutter);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pencil);
  text-align: right;
  pointer-events: none;
}
/* Subtle paper backdrop on each metadata line — invisible on the
   cream page bg (same color), but creates a clean cream block
   wherever the line crosses the vermillion sun. Pairs with the
   sun's translateX shift to guarantee legibility across viewports.
   The horizontal padding tightens the box around the text so the
   backdrop reads as part of the line's typography, not as a card. */
.hero__plate > * {
  background: var(--bone);
  padding: 1px 6px;
  border-radius: 1px;
}
.hero__plate-issue {
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  color: var(--sumi);
  letter-spacing: -0.01em;
  text-transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__plate-issue::after {
  content: "";
  width: 32px; height: 1px;
  background: var(--akane);
}
.hero__plate-jp {
  font-family: var(--jp);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--akane);
  text-transform: none;
}

/* Big restrained kanji watermark — sits behind the image column as
   atmosphere. Anchored to the bottom-right so it bleeds off-edge. */
.hero__kanji {
  position: absolute;
  right: -2vw;
  bottom: -4vh;
  font-family: var(--jp);
  font-weight: 700;
  font-size: clamp(280px, 36vw, 520px);
  line-height: 0.85;
  color: var(--akane);
  opacity: 0.04;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
/* Small vermillion sun — sits in the upper-right above the keyboard
   image. Gentle drop-shadow keeps it from feeling pasted-on.
   Negative right value slides the sun past the viewport edge so its
   left edge sits to the right of the .hero__plate metadata column
   (N° / Singapore · Est / 工房). Mobile rule below sets its own
   right value. */
.hero__sun {
  position: absolute;
  top: 8vh;
  right: -9vw;
  width: clamp(120px, 14vw, 220px);
  height: clamp(120px, 14vw, 220px);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #d04339 0%, var(--akane) 60%, var(--akane-deep) 100%);
  filter: drop-shadow(0 10px 30px rgba(179,36,25,0.25));
  z-index: 2;
  pointer-events: none;
}
.hero__sun::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(179,36,25,0.15), transparent 65%);
}

/* Right-side feature image — promoted from the old faint background
   product into a proper grid column. The keyboard photo is the visual
   counterweight to the title block on the left. */
.hero__feature {
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 540px;
  margin-left: auto;
  width: 100%;
}
.hero__feature picture,
.hero__feature img {
  display: block;
  width: 100%;
  height: 100%;
  /* contain (not cover) so the transparent product PNG fits fully
     in the 4:5 portrait slot without cropping the keyboard's
     edges. Card chrome stripped (no shadow, no fill) so the
     keyboard reads as floating on the cream page bg — matches the
     featured-hero treatment for editorial consistency. */
  object-fit: contain;
  object-position: center;
  background: transparent;
  border: none;
  box-shadow: none;
}
.hero__feature-tag {
  /* Caption sits flush below the image as a mono-caps editorial
     label rather than overlaid on the photo. Mirrors the .featured__media-tag
     pattern from the previous chrome strip. */
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  bottom: auto;
  margin-top: var(--s-12);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}
.hero__eyebrow-roman {
  font-family: var(--mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--sumi);
  display: inline-flex; align-items: center; gap: 14px;
  font-weight: 500;
}
.hero__eyebrow-roman::before {
  content: ""; width: 32px; height: 1px; background: var(--sumi);
}
.hero__eyebrow-jp {
  font-family: var(--jp);
  font-size: 14px;
  letter-spacing: 0.14em;
  color: var(--akane);
  font-weight: 500;
}
.hero__eyebrow-meta {
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
}
@media (max-width: 720px) {
  .hero__eyebrow-meta { display: none; }
}

.hero__title {
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--fs-h1);
  line-height: 1.0;
  letter-spacing: -0.012em;
  margin: 0 0 28px;
  text-transform: none;
  max-width: 11ch;
}
.hero__title .accent { color: var(--akane); }
.hero__title .upright { font-style: normal; }

.hero__title-jp {
  font-family: var(--jp);
  font-weight: 500;
  font-size: clamp(18px, 2vw, 25px);
  letter-spacing: 0.14em;
  color: var(--sumi-soft);
  margin: 0 0 36px;
  max-width: 40ch;
}

.hero__lede {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--sumi-soft);
  margin: 0 0 48px;
  max-width: 44ch;
}

.hero__cta-row {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-bottom: 0;
}

/* Primary button — bold rectangle, no rounded corners, signage feel */
.btn-primary {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--akane);
  padding: 22px 36px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  position: relative;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease, letter-spacing .3s ease;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.18) inset,
    0 8px 22px -8px rgba(179,36,25,0.45);
  overflow: hidden;
}
.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.18), transparent);
  transform: translateX(-100%);
  transition: transform .8s var(--ease-out);
}
.btn-primary:hover::before { transform: translateX(100%); }
.btn-primary::after {
  content: "→";
  font-size: 14px;
  transform: translateX(0);
  transition: transform .3s ease;
  position: relative;
  z-index: 1;
}
.btn-primary > span { position: relative; z-index: 1; }
.btn-primary:hover {
  background: var(--akane-deep);
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.18) inset,
    0 14px 30px -8px rgba(179,36,25,0.5);
}
.btn-primary:hover::after { transform: translateX(5px); }
.btn-primary:active { transform: translateY(0); }

.btn-quiet {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  border-bottom: 1px solid var(--rule);
  padding: 6px 0;
  transition: color .25s ease, border-color .25s ease, padding .25s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.btn-quiet:hover { color: var(--akane); border-color: var(--akane); }

/* Hanko stamp beside primary CTA — smaller, more deliberate */
.hanko {
  display: inline-grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #d04339 0%, var(--akane) 55%, var(--akane-deep) 100%);
  color: var(--bone);
  font-family: var(--jp);
  font-size: 20px;
  font-weight: 700;
  transform: rotate(-7deg);
  box-shadow: 0 6px 14px -4px rgba(179,36,25,0.55);
  position: relative;
  flex-shrink: 0;
}
.hanko::before {
  content: "";
  position: absolute; inset: 4px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50%;
}
@media (max-width: 480px) { .hanko { display: none; } }

/* Bottom strip — pinned to the hero footprint, but its content sits
   inside the same content-max boundary as the columns above. */
.hero__strip {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 4;
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px var(--gutter);
  border-top: 0.5px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--pencil);
  background: linear-gradient(to top, var(--bone) 30%, rgba(239,231,214,0.6) 80%, rgba(239,231,214,0));
}
.hero__strip-right { text-align: right; }
.hero__strip-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero__strip-cue-line {
  width: 1px; height: 28px; background: var(--pencil);
  animation: cueline 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cueline {
  0%, 100% { transform: scaleY(0.3); opacity: .4; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Hero mascot — sits in the hero, big and welcoming */
.hero__mascot {
  position: absolute;
  right: clamp(32px, 6vw, 100px);
  bottom: 116px;
  z-index: 5;
  width: clamp(120px, 14vw, 180px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  filter: drop-shadow(0 16px 30px rgba(20,17,13,0.2));
  transition: transform .45s cubic-bezier(.2,.9,.2,1.2);
  animation: mascotBob 5.2s ease-in-out infinite;
}
.hero__mascot img { width: 100%; }
.hero__mascot:hover {
  animation-play-state: paused;
  transform: translateY(-7px) rotate(-5deg);
}
.hero__mascot-label {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sumi);
  padding: 7px 13px;
  background: rgba(244,238,224,0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 0.5px solid var(--rule-soft);
  position: relative;
}
.hero__mascot-label::before {
  content: "";
  position: absolute;
  left: 50%; top: -1px;
  width: 14px; height: 1px;
  background: var(--akane);
  transform: translateX(-50%);
}
.hero__mascot-jp {
  font-family: var(--jp);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--akane);
  text-transform: none;
}
@keyframes mascotBob {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-7px) rotate(-2deg); }
}
@media (max-width: 880px) {
  .hero__mascot { display: none; }
  /* Stack the hero columns and drop the keyboard image. The lifestyle
     visual stays on the page in the FeaturedBuild + OnTheDesk
     sections, so we lose nothing by hiding it here on narrow screens. */
  .hero__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 110px var(--gutter) 110px;
  }
  .hero__feature { display: none; }
}
@media (max-width: 720px) {
  .hero__inner { padding: 110px 20px 110px; }
  .hero__strip { grid-template-columns: 1fr; text-align: center; gap: 8px; padding: 16px 20px 18px; }
  .hero__strip-right { text-align: center; }
  .hero__strip-cue { display: none; }
  /* Soften the editorial backdrop so the title has room to breathe. */
  .hero__sun { top: 7vh; right: -8vw; width: 24vw; opacity: 0.55; }
  .hero__kanji { font-size: 60vw; opacity: 0.04; }
  /* Plate overlaps the nav + eyebrow on small screens — drop it. */
  .hero__plate { display: none; }
  /* Reflow the per-word .split-line spans inline so the title wraps
     naturally at ~2 lines instead of stacking 5 words tall. */
  .hero__title { max-width: 14ch; }
  .hero__title .split-line { display: inline; }
  .hero__title .split-line > span { display: inline; }
}

/* ============ HOW IT WORKS strip ============ */
.how {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 11vh, 130px) var(--gutter);
  background: var(--bone);
  border-bottom: 0.5px solid var(--rule-soft);
}
.how__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.how__lede {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(23px, 2.7vw, 36px);
  line-height: 1.4;
  letter-spacing: -0.014em;
  color: var(--sumi);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 26ch;
}
.how__lede em { color: var(--akane); font-weight: 700; font-style: normal; }
.how__lede-soft {
  color: var(--sumi-soft);
  opacity: .78;
  font-size: 0.6em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 auto;
}
.how__rules {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sumi);
}
.how__rules li {
  display: inline-flex; align-items: center; gap: 12px;
}
.how__x {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  border: 1px solid var(--akane);
  border-radius: 50%;
  color: var(--akane);
  font-family: var(--display);
  font-style: normal;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* ============ PREMISE ============ */
.premise {
  padding: clamp(110px, 15vh, 180px) var(--gutter);
  position: relative;
}
.premise__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(40px, 8vw, 120px);
  align-items: start;
  max-width: var(--max);
  margin: 0 auto;
}
.premise__head .eyebrow { margin-bottom: 36px; }
.premise__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 70px);
  line-height: 1.02;
  margin: 0 0 24px;
  letter-spacing: -0.022em;
  max-width: 12ch;
}
.premise__title .quiet { color: var(--sumi-soft); opacity: .68; }
.premise__title-jp {
  font-family: var(--jp);
  font-size: 18px;
  color: var(--akane);
  letter-spacing: 0.14em;
  margin: 0;
}
.premise__copy {
  font-family: var(--serif);
  font-size: var(--fs-body);
  line-height: 1.72;
  color: var(--sumi-soft);
  max-width: 44ch;
}
.premise__copy p { margin: 0 0 1em; }
.premise__copy p:last-child { margin-bottom: 0; }

.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 56px;
  border-top: 0.5px solid var(--rule);
  padding-top: 36px;
  margin-top: 44px;
}
.stat {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
  padding-left: 16px;
  border-left: 1px solid var(--akane);
  position: relative;
}
.stat__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(48px, 5.4vw, 76px);
  line-height: 0.88;
  color: var(--sumi);
  letter-spacing: -0.025em;
  font-variant-numeric: lining-nums;
}
.stat__body {
  display: flex; flex-direction: column; gap: 6px;
  padding-top: 10px;
}
.stat__label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sumi);
  font-weight: 500;
}
.stat__sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--pencil);
  text-transform: uppercase;
}
@media (max-width: 880px) {
  .premise__grid { grid-template-columns: 1fr; gap: 48px; }
  .stats { gap: 28px 32px; }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: 1fr; gap: 24px; }
}

/* ============ CINEMATIC FEATURE ============ */
.feature {
  position: relative;
  padding: clamp(80px, 11vh, 130px) var(--gutter);
  background: var(--bone-warm);
  border-top: 0.5px solid var(--rule-soft);
  border-bottom: 0.5px solid var(--rule-soft);
}
.feature__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(36px, 5vw, 88px);
  max-width: var(--max);
  margin: 0 auto;
  align-items: center;
}
.feature__media {
  position: relative;
  aspect-ratio: 4/5;
  /* Chrome stripped (no overflow:hidden, bg, shadow, gradient
     overlay) so the transparent Sakuna PNG floats on cream paper —
     matches the editorial treatment of the hero + featured slots. */
  overflow: visible;
  background: transparent;
  box-shadow: none;
}
.feature__media img {
  width: 100%; height: 100%;
  /* contain (not cover) so the transparent product PNG renders
     fully visible with cream letterboxing rather than cropping. */
  object-fit: contain;
  object-position: center;
  transition: transform 1.4s var(--ease-out);
}
.feature:hover .feature__media img {
  transform: scale(1.04);
}
.feature__media-tag {
  /* Mono-caps editorial caption set below the image — mirrors
     .featured__media-tag + .hero__feature-tag. */
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  bottom: auto;
  margin-top: var(--s-12);
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  background: transparent;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.feature__copy { padding: 24px 0; }
.feature__copy .eyebrow { margin-bottom: 26px; }
.feature__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.04;
  margin: 0 0 16px;
  letter-spacing: -0.022em;
  max-width: 14ch;
}
.feature__sub-jp {
  font-family: var(--jp);
  font-size: 16px;
  color: var(--akane);
  margin: 0 0 22px;
  letter-spacing: 0.12em;
}
.feature__body {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.72;
  color: var(--sumi-soft);
  margin: 0 0 32px;
  max-width: 42ch;
}
.feature__list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column;
  border-top: 0.5px solid var(--rule);
}
.feature__list li {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sumi);
  padding: 14px 0;
  border-bottom: 0.5px solid var(--rule-soft);
  transition: padding-left .35s var(--ease-out), color .35s ease;
}
.feature__list li:hover {
  padding-left: 8px;
  color: var(--akane);
}
.feature__list li span:first-child {
  color: var(--akane);
  font-weight: 500;
}
.feature__list li:hover span:first-child { color: var(--sumi); }

@media (max-width: 880px) {
  .feature__grid { grid-template-columns: 1fr; }
  .feature__media { aspect-ratio: 4/5; max-width: 520px; margin: 0 auto; }
}

/* ============ WORKS — ledger of named, delivered keyboards ============ */
.works {
  padding: clamp(90px, 12vh, 140px) var(--gutter) clamp(110px, 15vh, 170px);
  position: relative;
}
.works__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  max-width: var(--max);
  margin: 0 auto 68px;
  border-bottom: 0.5px solid var(--rule);
  padding-bottom: 28px;
}
.works__head > div { display: flex; flex-direction: column; gap: 18px; }
.works__head-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: 0;
}
.works__head-sub {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  color: var(--sumi-soft);
  max-width: 38ch;
  line-height: 1.55;
  margin: 0;
}
.works__head-meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
  text-align: right;
  line-height: 1.7;
}

.works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(36px, 4vw, 56px) clamp(20px, 2.4vw, 32px);
  max-width: var(--max);
  margin: 0 auto;
}
.work {
  display: block;
  position: relative;
  cursor: pointer;
}
.work__media {
  position: relative;
  /* 16:9 landscape — a bit taller than the previous 5:2 attempt to
     accommodate the scale-up below. The PNGs ship with transparent
     padding around each keyboard so object-fit:contain alone leaves
     keyboards tiny in the centre. The scale-up on the <img> pushes
     that padding off-screen; overflow:hidden clips the bleed. */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bone-2);
}
.work__media img {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  /* Visually enlarges the keyboard so the transparent PNG padding
     bleeds past the card edge (clipped by overflow:hidden). 1.5×
     was the sweet spot from manual inspection — no keyboard clips
     at this scale; mofusand/rayquaza benefit most. */
  transform: scale(1.5);
  transform-origin: center;
  display: block;
  filter: saturate(0.85) brightness(0.96);
  transition: transform 1s var(--ease-out), filter .6s ease;
}
.work:hover .work__media img {
  /* Bump the hover-scale relative to the new base 1.5× so the
     subtle lift on hover is preserved. */
  transform: scale(1.55);
  filter: saturate(1.05) brightness(1);
}

/* Numbered slug (top-left) */
.work__num {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(20,17,13,0.7);
  padding: 6px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-weight: 500;
}

/* Delivered stamp (top-right) */
.work__delivered {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bone);
  background: rgba(20,17,13,0.7);
  padding: 6px 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-left: 1.5px solid var(--akane);
  font-weight: 500;
}

/* Hover overlay */
.work__hover-cta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: linear-gradient(to bottom, rgba(20,17,13,0.35), rgba(20,17,13,0.78));
  opacity: 0;
  transition: opacity .45s ease;
  text-align: center;
  padding: 28px;
  z-index: 3;
}
.work__hover-cta > span {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 2vw, 24px);
  color: var(--bone);
  letter-spacing: -0.012em;
  max-width: 14ch;
  line-height: 1.25;
}
.work__hover-cta a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--akane);
  padding: 13px 22px;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  pointer-events: auto;
  box-shadow: 0 6px 16px -6px rgba(179,36,25,0.5);
}
.work__hover-cta a:hover {
  background: var(--akane-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(179,36,25,0.55);
}
.work:hover .work__hover-cta { opacity: 1; }

/* Caption block below image */
.work__caption {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  /* Tightened from 18px → 12px to keep proportional rhythm against
     the shorter 5:2 media slot. */
  margin-top: var(--s-12);
  gap: 14px;
}
.work__caption > div { min-width: 0; }
.work__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.012em;
  margin: 0 0 6px;
  line-height: 1.05;
}
.work__owner {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pencil);
}
.work__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pencil);
  white-space: nowrap;
  text-align: right;
}

.works__view-all {
  display: flex; justify-content: flex-end;
  max-width: var(--max);
  margin: 64px auto 0;
}

@media (max-width: 1000px) {
  .works__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 18px; }
}
@media (max-width: 540px) {
  .works__grid { grid-template-columns: 1fr; gap: 36px; }
  .works__head { grid-template-columns: 1fr; align-items: start; }
  .works__head-meta { text-align: left; }
}

/* ============ LETTER (commission form) — stationery feel ============ */
.letter {
  padding: clamp(90px, 13vh, 150px) var(--gutter);
  background: var(--bone);
  position: relative;
}
.letter__inner {
  max-width: 880px;
  margin: 0 auto;
  position: relative;
  background: var(--bone-soft);
  padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 60px);
  box-shadow:
    0 1px 0 rgba(20,17,13,0.04),
    0 30px 60px -30px rgba(20,17,13,0.3),
    0 1px 0 rgba(255,255,255,0.5) inset;
}
/* Stationery corner marks */
.letter__inner::before,
.letter__inner::after {
  content: "";
  position: absolute;
  width: 14px; height: 14px;
  border-color: var(--akane);
  border-style: solid;
}
.letter__inner::before {
  top: 14px; left: 14px;
  border-width: 1px 0 0 1px;
}
.letter__inner::after {
  bottom: 14px; right: 14px;
  border-width: 0 1px 1px 0;
}
.letter__head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  margin-bottom: 48px;
  padding-bottom: 20px;
  border-bottom: 0.5px solid var(--rule);
}
.letter__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 0.98;
  margin: 0 0 12px;
  letter-spacing: -0.025em;
  max-width: 14ch;
}
.letter__title-jp {
  font-family: var(--jp);
  font-size: 16px;
  color: var(--akane);
  letter-spacing: 0.14em;
  margin: 0;
}
.letter__meta {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  text-align: right;
  line-height: 1.7;
}

.letter__body {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(20px, 1.95vw, 26px);
  line-height: 1.6;
  color: var(--sumi);
}
.letter__body p { margin: 0 0 1.2em; }
.letter__body p:last-of-type { margin-bottom: 0.6em; }

.letter__field {
  display: inline-block;
  position: relative;
  min-width: 12ch;
  margin: 0 4px;
  border: 0;
  border-bottom: 1.5px dotted var(--sumi);
  background: transparent;
  font: inherit;
  font-family: var(--serif);
  font-style: italic;
  color: var(--akane);
  padding: 2px 8px;
  outline: none;
  text-align: left;
  transition: border-bottom-color .25s ease, border-bottom-style .25s ease, background .25s ease;
}
.letter__field::placeholder { color: var(--pencil); font-style: italic; opacity: .65; }
.letter__field:hover { border-bottom-color: var(--akane); }
.letter__field:focus {
  border-bottom-color: var(--akane);
  border-bottom-style: solid;
  background: rgba(179,36,25,0.04);
}
.letter__field--lg { min-width: 22ch; }
.letter__field--xl { min-width: 30ch; }

/* Tier picker */
.letter__tier-eyebrow {
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
  margin: 8px 0 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.letter__tier-eyebrow::before {
  content: "";
  width: 18px; height: 1px;
  background: var(--akane);
}
.letter__tier-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 36px;
}
.letter__tier {
  flex: 1 1 200px;
  font-family: var(--mono);
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 18px 18px 16px;
  border: 1px solid var(--rule);
  background: rgba(244,238,224,0.4);
  color: var(--sumi);
  cursor: pointer;
  transition: all .3s ease;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
}
.letter__tier::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--akane);
  transform: translateY(100%);
  transition: transform .35s var(--ease-out);
  z-index: 0;
}
.letter__tier > * { position: relative; z-index: 1; }
.letter__tier-name { color: var(--akane); font-weight: 500; transition: color .3s ease; }
.letter__tier-price {
  color: var(--sumi);
  font-size: 13px;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  transition: color .3s ease;
}
.letter__tier:hover { border-color: var(--akane); }
.letter__tier:hover .letter__tier-name { color: var(--akane-deep); }
.letter__tier.is-active {
  border-color: var(--akane);
  color: var(--bone);
}
.letter__tier.is-active::before { transform: translateY(0); }
.letter__tier.is-active .letter__tier-name { color: var(--bone); }
.letter__tier.is-active .letter__tier-price { color: var(--bone); }

@media (max-width: 600px) {
  /* Stack the mad-libs sentence as a vertical column on phones — the
     inline inputs break sentences awkwardly otherwise. */
  .letter__body p { display: flex; flex-direction: column; gap: 8px; line-height: 1.7; }
  .letter__field, .letter__field--lg, .letter__field--xl {
    width: 100%;
    display: block;
  }
  .letter__tier-row { flex-direction: column; gap: 10px; grid-template-columns: 1fr; }
}

/* PART 8 — Letter form mobile fallback. At ≤480px the inline mad-libs
   prose at 20-26px display serif visually fragments once each input
   is on its own line. Smaller body face + tighter line-height groups
   each input clearly with its preceding phrase. Not a full redesign
   to a labeled form, but materially more readable. */
@media (max-width: 480px) {
  .letter__body {
    font-size: 14px;
    line-height: 1.6;
  }
}

.letter__textarea {
  width: 100%;
  min-height: 140px;
  border: 0;
  background: transparent;
  background-image: linear-gradient(transparent calc(1.7em - 1px), var(--rule-hair) 1px);
  background-size: 100% 1.7em;
  line-height: 1.7em;
  font: inherit;
  font-family: var(--serif);
  font-style: italic;
  color: var(--sumi);
  padding: 0;
  margin-top: 8px;
  resize: vertical;
  outline: none;
}
.letter__textarea::placeholder { color: var(--pencil); }
.letter__textarea:focus {
  background-image: linear-gradient(transparent calc(1.7em - 1px), var(--akane-quiet) 1px);
}

.letter__sign {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-top: 56px;
  padding-top: 28px;
  border-top: 0.5px solid var(--rule);
}
.letter__signature {
  font-family: var(--display);
  font-size: clamp(22px, 2.2vw, 28px);
  color: var(--sumi);
  font-weight: 500;
}
.letter__signature span {
  display: block;
  font-style: normal;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  margin-top: 8px;
  font-family: var(--mono);
}
.letter__send {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  background: var(--akane);
  padding: 22px 36px;
  display: inline-flex; align-items: center; gap: 14px;
  transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
  box-shadow: 0 8px 22px -8px rgba(179,36,25,0.45);
  position: relative;
  overflow: hidden;
}
.letter__send::after {
  content: "→";
  font-size: 14px;
  transition: transform .3s ease;
}
.letter__send:hover {
  background: var(--akane-deep);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -8px rgba(179,36,25,0.5);
}
.letter__send:hover::after { transform: translateX(4px); }
.letter__footnote {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pencil);
  text-align: center;
  line-height: 1.8;
}

/* Inspired-by banner */
.letter__inspired {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  margin-bottom: 32px;
  background: rgba(179,36,25,0.06);
  border-left: 3px solid var(--akane);
  font-family: var(--serif);
  font-style: italic;
  color: var(--sumi);
  font-size: 16px;
  line-height: 1.55;
  animation: inspiredIn .5s var(--ease-out);
}
@keyframes inspiredIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.letter__inspired-tag {
  display: inline-block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--akane);
  margin-bottom: 8px;
  font-weight: 500;
}
.letter__inspired strong {
  display: inline;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 1.7vw, 22px);
  letter-spacing: -0.012em;
  color: var(--sumi);
  margin-right: 10px;
}
.letter__inspired-note {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  color: var(--sumi-soft);
  line-height: 1.55;
}
.letter__inspired-clear {
  font-family: var(--display);
  font-size: 26px;
  line-height: 1;
  color: var(--pencil);
  padding: 0 4px;
  flex: 0 0 auto;
  transition: color .25s ease, transform .25s ease;
}
.letter__inspired-clear:hover { color: var(--akane); transform: rotate(90deg); }

@media (max-width: 600px) {
  .letter__inner { padding: 32px 22px 36px; }
  .letter__head { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  .letter__meta { text-align: left; }
  .letter__sign { grid-template-columns: 1fr; gap: 18px; }
  .letter__send { width: 100%; justify-content: center; }
}

/* ============ COLOPHON (closing) — back-of-magazine feel ============ */
.colophon {
  padding: clamp(110px, 15vh, 170px) var(--gutter) 84px;
  background: var(--ink-dark);
  color: var(--bone);
  position: relative;
  overflow: hidden;
}
.colophon::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, var(--akane-glow), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(160,118,40,0.08), transparent 50%);
  pointer-events: none;
}
.colophon__inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.colophon .eyebrow { color: var(--kin-soft); }
.colophon .eyebrow::before { background: var(--kin-soft); }
.colophon .eyebrow .roman { color: rgba(239,231,214,0.5); }
.colophon .eyebrow .jp { color: rgba(239,231,214,0.7); }

.colophon__big {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.2;
  margin: 36px 0 16px;
  letter-spacing: -0.018em;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.colophon__big .accent { color: var(--kin-soft); }
.colophon__jp {
  font-family: var(--jp);
  font-size: 14px;
  color: rgba(239,231,214,0.55);
  letter-spacing: 0.18em;
  margin: 0 0 56px;
}
.colophon__seal {
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 1px solid var(--akane);
  display: grid;
  place-items: center;
  margin: 0 auto 28px;
  background: rgba(179,36,25,0.06);
  position: relative;
}
.colophon__seal::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px dashed rgba(179,36,25,0.25);
}
.colophon__seal img { width: 42px; height: 42px; object-fit: contain; }
.colophon__rule {
  width: 1px; height: 56px;
  background: rgba(239,231,214,0.18);
  margin: 0 auto 36px;
  position: relative;
}
.colophon__rule::after {
  content: ""; position: absolute; left: -3px; bottom: 0;
  width: 7px; height: 7px;
  background: var(--akane); border-radius: 50%;
  box-shadow: 0 0 12px var(--akane-glow);
}
.colophon__contact {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.85);
  display: flex; flex-direction: column; gap: 12px;
  margin-bottom: 36px;
  line-height: 1.6;
}
.colophon__contact a {
  border-bottom: 0.5px solid rgba(239,231,214,0.4);
  padding-bottom: 2px;
  transition: color .25s ease, border-color .25s ease;
}
.colophon__contact a:hover { color: var(--kin-soft); border-color: var(--kin-soft); }
.colophon__registry {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.5);
  margin-bottom: 44px;
}
.colophon__end {
  font-family: var(--display);
  font-size: 14px;
  color: rgba(239,231,214,0.4);
  letter-spacing: 0.05em;
}

/* Footer (under colophon) */
.foot {
  background: var(--ink-dark);
  border-top: 0.5px solid rgba(239,231,214,0.08);
  padding: 30px var(--gutter);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(239,231,214,0.45);
  position: relative;
  z-index: 2;
}
.foot a {
  color: rgba(239,231,214,0.65);
  border-bottom: 0.5px solid transparent;
  padding-bottom: 1px;
  transition: color .25s ease, border-color .25s ease;
}
.foot a:hover { color: var(--kin-soft); border-bottom-color: var(--kin-soft); }
.foot__right { display: flex; gap: 22px; }
@media (max-width: 720px) {
  .foot { grid-template-columns: 1fr; text-align: center; }
  .foot__right { justify-content: center; }
}

/* ============================================================
   FEATURED BUILD — high-impact tile slotted between Hero and
   "How It Works". Highlights a house-favourite build with a
   product photo + short editorial caption.
   ============================================================ */
.featured {
  position: relative;
  z-index: 2;
  padding: clamp(60px, 9vh, 110px) var(--gutter);
  background: linear-gradient(180deg, var(--bone) 0%, var(--bone-soft) 100%);
}
.featured__inner {
  max-width: var(--max);
  margin: 0 auto;
}
.featured__plate {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: 32px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--pencil);
}
.featured__plate-issue {
  color: var(--akane);
  font-weight: 500;
}
.featured__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.featured__media {
  position: relative;
  aspect-ratio: 4 / 3;
  /* overflow visible so the caption (abs-positioned below the
     image) isn't clipped. The image's own object-fit:cover does
     all the cropping; the previous overflow:hidden + 2px radius
     existed only to sweep corner pixels. */
  overflow: visible;
  border-radius: 2px;
  background: transparent;
  background-image: none;
  background-color: transparent;
  border: none;
  box-shadow: none;
}
.featured__media img {
  width: 100%;
  height: 100%;
  /* contain (not cover) so the square transparent PNG letterboxes
     cleanly inside the 4:3 slot — no crop, fully visible against
     the cream paper bg. */
  object-fit: contain;
  object-position: center;
  display: block;
}
.featured__media-tag {
  /* Option A — caption sits flush below the image as an editorial
     mono-caps label rather than overlaid as a dark bar. Stays
     position:absolute (top:100%) so it doesn't disturb the
     surrounding grid track; visually it reads as part of the
     image's caption line, set on the cream page bg directly. */
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  bottom: auto;
  margin-top: var(--s-12);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi-soft);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
}
.featured__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  margin: 12px 0 18px;
}
.featured__title .accent { color: var(--akane); }
.featured__body {
  font-family: var(--serif);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--sumi-soft);
  max-width: 42ch;
  margin: 0 0 22px;
}
@media (max-width: 880px) {
  /* Bumped from 24px → 40px to make room for the caption that now
     sits BELOW the image (rather than overlaid). Without this the
     mono-caps caption visually butts into the eyebrow of the copy
     block below it on stacked mobile layouts. */
  .featured__grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 720px) {
  .featured { padding: 60px 20px; }
  .featured__plate { font-size: 10px; gap: 12px; flex-wrap: wrap; }
}

/* ============================================================
   ON THE DESK — lifestyle photo of a delivered keyboard in its
   owner's setting. Slots between Feature and Works.
   ============================================================ */
.desk {
  position: relative;
  z-index: 2;
  padding: clamp(80px, 12vh, 140px) var(--gutter);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
}
.desk__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 2px;
  box-shadow: 0 30px 70px -24px rgba(20,17,13,0.4);
}
.desk__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.desk__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.012em;
  margin: 14px 0 10px;
}
.desk__title-jp {
  font-family: var(--jp);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.14em;
  color: var(--sumi-soft);
  margin: 0 0 24px;
}
.desk__body {
  font-family: var(--serif);
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  color: var(--sumi-soft);
  max-width: 44ch;
}
@media (max-width: 880px) {
  .desk { grid-template-columns: 1fr; padding: 80px 20px; }
}

/* =====================================================================
   MOBILE UX OVERHAUL — global rules (Parts 3, 6, 7, 9).
   ===================================================================== */

/* ----- PART 9 — Focus-visible canonical rule already lives at line 97
   above. Any page-scoped variants in commission.css / specify.css are
   narrower, but the global at root is the authority. */

/* ----- PART 3a — Site-wide .foot legibility on phones ----- */
@media (max-width: 720px) {
  .foot {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
  .foot a {
    /* always-visible underline since hover doesn't exist on touch */
    border-bottom-color: rgba(239,231,214,0.4);
  }
}

/* ----- PART 3b — WhatsApp neko + tip readability on phones ----- */
@media (max-width: 720px) {
  .neko { width: 64px; height: 64px; }
  .neko__tip { font-size: 10px; }
}

/* ----- PART 3c — Small metadata text floor at ≤520px ----- */
@media (max-width: 520px) {
  .work__owner,
  .work__delivered,
  .sp-foot__base,
  .sp-curve__caption,
  .sp-svc__hint {
    font-size: 11px;
    letter-spacing: 0.12em;
  }
}

/* ----- PART 7 — sr-only-focusable skip-to-content link ----- */
.sr-only-focusable {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.sr-only-focusable:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: var(--akane);
  color: var(--paper, var(--bone));
  z-index: 1000;
  clip: auto;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-decoration: none;
}

/* ----- PART 6 — Sub-page hamburger drawer (used on /commission, /specify,
   /gallery, /wooting-guide, /terms). Desktop = invisible/no-op. Mobile =
   3-bar toggle in the top-right corner of the page, sliding drawer with
   all sibling-page links. Activates at ≤720px to match the home nav
   breakpoint. ----- */
.sub-nav-burger {
  display: none;
  background: none;
  border: 0;
  width: 44px;
  height: 44px;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  cursor: pointer;
  position: relative;
  z-index: 70;
  -webkit-tap-highlight-color: transparent;
}
.sub-nav-burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background: var(--sumi);
  transition: transform .25s ease, opacity .25s ease;
}
.sub-nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sub-nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.sub-nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.sub-nav-drawer {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  flex-direction: column;
  gap: 0;
  background: var(--bone);
  border-top: 0.5px solid var(--rule);
  padding: 24px 20px;
  transform: translateY(-110%);
  transition: transform .3s ease;
  z-index: 60;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
}
.sub-nav-drawer[data-open="true"] {
  transform: translateY(0);
}
.sub-nav-drawer a {
  display: block;
  padding: 14px 0;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sumi);
  border-bottom: 0.5px solid var(--rule-soft);
  text-align: left;
  text-decoration: none;
  transition: color .2s ease;
}
.sub-nav-drawer a:last-child { border-bottom: 0; }
.sub-nav-drawer a:hover { color: var(--akane); }
.sub-nav-drawer a[aria-current="page"] {
  color: var(--akane);
  border-left: 2px solid var(--akane);
  padding-left: 12px;
}

@media (max-width: 1023px) {
  .sub-nav-burger { display: flex; }
  .sub-nav-drawer { display: flex; }
}

/* Prevent body scroll while the drawer is open (touch UX) */
body.sub-nav-open { overflow: hidden; }

/* Desktop (>=1024px): render the sub-nav drawer as an inline horizontal bar in
   the sticky header, so every page shows a visible navbar. The hamburger +
   slide-out drawer take over below 1024px (8 links need the room). */
@media (min-width: 1024px) {
  .sub-nav-drawer {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    transform: none;
    background: none;
    border-top: 0;
    padding: 0;
    gap: clamp(12px, 1.5vw, 26px);
    max-height: none;
    overflow: visible;
    z-index: auto;
  }
  .sub-nav-drawer a {
    padding: 2px 0;
    border-bottom: 0;
    font-size: 11px;
    letter-spacing: 0.18em;
    white-space: nowrap;
  }
  .sub-nav-drawer a:last-child { border-bottom: 0; }
  .sub-nav-drawer a[aria-current="page"] {
    border-left: 0;
    padding-left: 0;
    color: var(--akane);
  }
  /* The full nav makes the standalone "back to studio" link redundant. */
  .sp-top__back { display: none; }
}

/* Global sticky page-header bar (also defined per-page on the content pages;
   here so the tool/utility pages can use the same navbar). */
.sp-top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px var(--gutter);
  background: rgba(239, 231, 214, 0.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 0.5px solid var(--rule-soft);
}
.sp-top__brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display);
  font-style: italic; font-weight: 700; font-size: 19px;
  letter-spacing: -0.01em; color: var(--sumi);
}
.sp-top__brand a {
  display: flex; align-items: center; gap: 12px;
  color: inherit; text-decoration: none;
  transition: opacity .25s ease;
}
.sp-top__brand a:hover { opacity: 0.7; }
.sp-top__cat { width: 30px; height: 30px; object-fit: contain; display: block; }
@media (max-width: 600px) {
  .sp-top { padding: 12px var(--gutter); }
  .sp-top__brand { font-size: 16px; }
  .sp-top__cat { width: 26px; height: 26px; }
}

/* Tool/utility pages now carry the shared .sp-top nav (which has the brand),
   so suppress each page's own duplicate masthead brand. !important because the
   per-page stylesheets load after this one and define these classes. */
.ss-brand { display: none !important; }                        /* screen-studio + screen-studio-demo */
.tr-brand__mark, .tr-brand__name { display: none !important; }  /* track keeps "Order Tracking" subtitle */

/* The homepage navbar, injected onto other pages by site-nav.js. On subpages it
   sits as a solid sticky bar (the homepage version is a transparent overlay over
   its hero). When present, hide each page's own header + the old sub-nav. */
.nav--page {
  position: sticky;
  background: rgba(239, 231, 214, 0.9);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 0.5px solid var(--rule-soft);
}
body.has-site-nav .sp-top,
body.has-site-nav .terms-top,
body.has-site-nav .gd-top,
body.has-site-nav .sub-nav-burger,
body.has-site-nav .sub-nav-drawer { display: none !important; }