/* Kanji Doodle: an ukiyo-e print on hosho paper. Indigo leads; vermilion appears only where a print would have it
   (the seal and the hand-drawn maru). The one bold element is the hero's hanging scroll. */

@font-face { font-family: "Bricolage"; src: url("/fonts/bricolage.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson"; src: url("/fonts/atkinson-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Klee"; src: url("/fonts/klee.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --paper: #F1E6CC;
  --paper-light: #F8F0DE;
  --ink: #2A2520;
  --muted: #5E5348;
  --indigo: #1F3A5F;
  --prussian: #2F5F8A;
  --vermilion: #C23F27;
  --sage: #6E8B5E;
  --gold: #B8913F;
  --line: rgba(42, 37, 32, 0.18);
  --measure: 34rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--paper);
  background-image: url("/paper.jpg");
  background-size: 360px 360px;
  font: 400 1.125rem/1.6 "Atkinson", system-ui, sans-serif;
  overflow-x: hidden;
}
/* bokashi: the woodblock sky band, wiped by hand from the top edge */
body::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 220px; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(31, 58, 95, 0.92) 0, rgba(47, 95, 138, 0.62) 46px, rgba(47, 95, 138, 0.28) 110px, rgba(47, 95, 138, 0) 220px);
}
/* an old print darkens toward its edges */
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(255, 250, 238, 0) 55%, rgba(150, 118, 70, 0.16) 100%);
}

a { color: var(--indigo); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--prussian); }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -999px; top: 0; background: var(--indigo); color: var(--paper-light); padding: 0.6rem 1rem; z-index: 10; }
.skip:focus { left: 1rem; top: 1rem; }

h1, h2, h3 { font-family: "Bricolage", "Atkinson", sans-serif; color: var(--indigo); margin: 0; }
[lang="ja"] { font-family: "Klee", "Hiragino Mincho ProN", serif; }

/* header: sits on the blue band, so its type is paper-coloured */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  max-width: 76rem; margin: 0 auto; padding: 1.1rem var(--gutter);
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--paper-light); }
.brand img { display: block; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.15)); }
.brand span { font: 700 1.15rem/1 "Bricolage", sans-serif; letter-spacing: -0.01em; }
.header-cta { color: var(--paper-light); font-weight: 700; font-size: 0.98rem; text-decoration: none; padding: 0.4rem 0.2rem; border-bottom: 1.5px solid rgba(248, 240, 222, 0.55); }
.header-cta:hover { color: #fff; border-bottom-color: #fff; }

/* hero */
.hero {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  max-width: 76rem; margin: 0 auto; padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(3rem, 7vw, 6rem);
}
.hero-copy { max-width: var(--measure); }
h1 {
  font-weight: 800; font-size: clamp(2.7rem, 4.2vw + 1.2rem, 5.4rem); line-height: 0.98; letter-spacing: -0.03em;
  text-wrap: balance;
}
.lede { font-size: clamp(1.15rem, 0.6vw + 1rem, 1.35rem); color: var(--ink); margin: 1.4rem 0 2rem; max-width: 30rem; }
.soon { color: var(--muted); font-size: 0.95rem; margin: 0.2rem 0 0; }

/* the hanging scroll (kakejiku): cord, rods, a brocade mount, and the story in the paper window */
.scroll { position: relative; margin: 0 auto; width: min(100%, 27rem); padding-right: 3.2rem; }
.scroll-cord {
  height: 2.6rem; margin: 0 auto; width: 46%;
  background:
    linear-gradient(to top right, transparent calc(50% - 1px), rgba(42, 37, 32, 0.55) 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), rgba(42, 37, 32, 0.55) 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.scroll-rod {
  height: 0.9rem; border-radius: 0.45rem; margin: 0 -0.7rem;
  background: linear-gradient(to bottom, #6A4A2E, #3B2818 60%, #2A1C10);
  box-shadow: 0 2px 3px rgba(42, 37, 32, 0.3);
}
.scroll-rod.bottom { height: 1.15rem; border-radius: 0.6rem; margin: 0 -1rem; }
.scroll-mount {
  padding: 2.2rem 1.4rem 4.2rem;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 2px, transparent 2px 7px),
    linear-gradient(to bottom, #2C4A70, var(--indigo) 30%, #1A3150);
  box-shadow: 0 18px 30px -18px rgba(31, 30, 40, 0.55);
  position: relative;
}
/* the thin gold border (ichimonji) framing the picture, as on a real mount */
.scroll-mount::before {
  content: ""; position: absolute; inset: 1.7rem 0.95rem 3.75rem;
  border-top: 0.42rem solid var(--gold); border-bottom: 0.42rem solid var(--gold);
  opacity: 0.85; pointer-events: none;
}
.scroll-window { position: relative; background: var(--paper-light); padding: 0.55rem; }
.scroll-window video { display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--paper-light); }
.tategaki {
  position: absolute; right: 0; top: 4.4rem;
  writing-mode: vertical-rl; white-space: nowrap;
  font-size: 1.5rem; line-height: 1; color: var(--ink); letter-spacing: 0.12em;
}
.tategaki span + span::before { content: "・"; color: var(--vermilion); }

/* the waitlist form */
.waitlist { max-width: 30rem; }
.field-label { display: block; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.4rem; color: var(--ink); }
.field-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.field-row input {
  flex: 1 1 14rem; min-width: 0; font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: 0.85rem 1rem; border: 1.5px solid rgba(42, 37, 32, 0.45); border-radius: 6px; background: rgba(252, 247, 236, 0.92);
}
.field-row input::placeholder { color: #8C8074; }
.field-row input:focus-visible { outline-offset: 1px; border-color: var(--indigo); }
.field-row input[aria-invalid="true"] { border-color: var(--vermilion); }
.field-row button, .learner button {
  font: 700 1.05rem/1 "Atkinson", sans-serif; color: var(--paper-light); background: var(--indigo);
  border: 0; border-radius: 6px; padding: 0.95rem 1.3rem; cursor: pointer; flex: 0 0 auto;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.25);
}
.field-row button:hover { background: #172C48; }
.field-row button[disabled] { opacity: 0.7; cursor: progress; }
.consent { font-size: 0.88rem; color: var(--muted); margin: 0.65rem 0 0; }
.status { min-height: 1.4em; margin: 0.4rem 0 0; font-size: 0.95rem; font-weight: 700; color: var(--vermilion); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* after joining: the teacher's red maru draws itself */
.joined { display: flex; gap: 1rem; align-items: flex-start; max-width: 30rem; margin-bottom: 1.4rem; }
.maru { flex: 0 0 4.4rem; width: 4.4rem; height: 4.4rem; margin-top: -0.3rem; }
.maru path, .maru-mini path { fill: none; stroke: var(--vermilion); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.maru path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: draw 0.9s cubic-bezier(0.6, 0.05, 0.3, 1) 0.1s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .maru path { animation: none; stroke-dashoffset: 0; } }
.joined-title { font: 800 1.6rem/1.15 "Bricolage", sans-serif; color: var(--indigo); margin: 0; }
.joined-title:focus { outline: none; }
.joined-note { margin: 0.3rem 0 1rem; color: var(--muted); font-size: 1rem; }
.learner { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.learner legend { font-weight: 700; font-size: 0.98rem; padding: 0; margin-bottom: 0.45rem; float: left; width: 100%; }
.learner legend span { font-weight: 400; color: var(--muted); }
.learner button { background: transparent; color: var(--indigo); border: 1.5px solid var(--indigo); box-shadow: none; padding: 0.6rem 1rem; border-radius: 999px; font-size: 0.98rem; }
.learner button:hover, .learner button[aria-pressed="true"] { background: var(--indigo); color: var(--paper-light); }

/* sections below the hero share a measure and a quiet rhythm */
.steps, .strip, .closing { max-width: 76rem; margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--gutter); }
h2 { font-weight: 800; font-size: clamp(1.9rem, 2.2vw + 1.1rem, 3rem); line-height: 1.05; letter-spacing: -0.02em; max-width: 22ch; text-wrap: balance; }

.step-list { list-style: none; margin: 2.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.step-media {
  aspect-ratio: 1; background: var(--paper-light); padding: 0.45rem; position: relative;
  box-shadow: 0 0 0 1px var(--line), 0 14px 24px -20px rgba(42, 37, 32, 0.6);
}
.step-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.verb { font-size: 2.1rem; line-height: 1; margin: 1.2rem 0 0.15rem; color: var(--ink); }
.step h3 { font-size: 1.35rem; letter-spacing: -0.01em; }
.step p:last-child { margin: 0.35rem 0 0; color: var(--ink); max-width: 24rem; }

/* review cards for 覚える: a small stack of characters, the top one marked correct */
.review { display: grid; place-items: center; overflow: hidden; background: #EFE3C6; }
.card {
  position: absolute; width: 46%; aspect-ratio: 3 / 4; display: grid; place-items: center;
  background: var(--paper-light); font-size: clamp(2.6rem, 5vw, 4rem); color: var(--ink);
  box-shadow: 0 0 0 1px var(--line), 0 10px 18px -12px rgba(42, 37, 32, 0.55);
}
.card.c3 { transform: translate(-24%, 4%) rotate(-9deg); color: #6F655A; }
.card.c2 { transform: translate(22%, 2%) rotate(7deg); color: #6F655A; }
.card.c1 { transform: translate(0, -2%) rotate(-1.5deg); }
.maru-mini { position: absolute; width: 74%; height: 74%; opacity: 0.9; }
.maru-mini path { stroke-width: 5; }

/* character strip */
.strip-note { color: var(--muted); margin: 0.6rem 0 0; }
.tiles { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, 1.6rem); }
.tile {
  display: block; width: 100%; padding: 0.4rem 0.4rem 0; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
  background: var(--paper-light); box-shadow: 0 0 0 1px var(--line), 0 14px 24px -20px rgba(42, 37, 32, 0.6);
}
.tile video { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.tile-label { display: block; padding: 0.6rem 0.4rem 0.7rem; font-weight: 700; color: var(--indigo); }
.tile:hover { box-shadow: 0 0 0 1.5px var(--indigo), 0 14px 24px -18px rgba(42, 37, 32, 0.7); }

/* closing */
.closing { padding-bottom: clamp(4rem, 9vw, 7rem); }
.closing > p { max-width: 32rem; margin: 0.9rem 0 1.8rem; }

.site-footer { max-width: 76rem; margin: 0 auto; padding: 2rem var(--gutter) 3rem; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.92rem; }
.site-footer p { margin: 0.3rem 0; }
.site-footer .credits { font-size: 0.85rem; }

/* narrower screens */
@media (max-width: 900px) {
  /* on a phone the hook comes first: headline, the scroll, then the form */
  .hero { grid-template-columns: 1fr; padding-top: 1.75rem; gap: 1.6rem; }
  .hero-copy { display: contents; }
  .hero h1 { order: 1; }
  .lede { order: 2; margin: 0; }
  .scroll { order: 3; width: min(100%, 20rem); }
  .join { order: 4; }
  .soon { order: 5; margin-top: -0.8rem; }
  .step-list { grid-template-columns: 1fr; max-width: 34rem; gap: 2rem; }
  .step { display: grid; grid-template-columns: 7.5rem 1fr; column-gap: 1.1rem; align-items: start; }
  .step-media { grid-row: 1 / span 3; }
  .verb { margin-top: 0; font-size: 1.7rem; }
  .tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.8rem; margin-right: calc(-1 * var(--gutter)); padding-right: var(--gutter); }
  .tiles li { flex: 0 0 64%; scroll-snap-align: start; }
}
@media (max-width: 420px) {
  .tategaki { font-size: 1.25rem; }
  .scroll { padding-right: 2.6rem; }
  .field-row button { width: 100%; }
}

/* the privacy page and the 404 share the paper but keep to a reading measure */
.prose { max-width: 40rem; margin: 0 auto; padding: 2.5rem var(--gutter) 4rem; }
.prose h1 { font-size: clamp(2.2rem, 3vw + 1.2rem, 3.4rem); margin-bottom: 1rem; }
.prose h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.prose p, .prose li { max-width: 38rem; }
.prose .meta { color: var(--muted); }