/* rikAI feature pages. Loaded after style.css, which owns the shell — nav,
   footer, .section rhythm, .frow, .btn, the colour tokens. Everything here is
   the parts a feature page adds: the tategaki scan signature, the small
   demonstration panels inside .frow-viz, and the feature grid.

   A shared class may only be restyled through a `.feat-page` scope (see the
   vertical-rhythm block below) or a compound selector like `.shots.shots-3`.
   A bare `.hero { … }` here would be invisible in review and would look like
   a style.css change to whoever read it next — and it would still be wrong
   the day a feature page is generated by build.py. */

/* ── borrowed from tech.css ───────────────────────────────────────────
   .section-sub and .local-inner are page-shell rules, but they live in
   tech.css rather than style.css, and a feature page has no reason to pull
   in the whole technology stylesheet for three declarations. Copied rather
   than promoted into style.css on purpose: moving them there means bumping
   STYLE_V, which re-versions the stylesheet URL on all 126 generated pages
   for a change none of them need. If a third page ever wants these, promote
   them properly and delete both copies. */

.section-sub {
  margin-top: 16px;
  color: var(--paper-dim);
  font-size: 15.5px;
  max-width: 62ch;
}

.section-sub.center { margin-left: auto; margin-right: auto; }

/* An in-prose link inside a section lede. Colour alone is not a cue here —
   --ai-light against --paper-dim is a 1.06:1 luminance ratio — so the
   underline is what marks it as a link (same reasoning as .hero-sub a in
   style.css). */
.section-sub a {
  color: var(--ai-light);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--ai-light) 55%, transparent);
}
.section-sub a:hover { color: var(--gold); text-decoration-color: var(--gold); }

.local-inner { text-align: center; }
.local-inner h2 { font-size: clamp(28px, 3.6vw, 38px); margin-top: 12px; }
.local-inner .btn-big { margin-top: 32px; display: inline-block; }

/* ── vertical rhythm ──────────────────────────────────────────────────
   style.css tunes .hero and .section for the home page, where the hero is a
   short centred block and each section carries a lot. Two of those choices
   misfire on a feature page:

   1. `.hero { min-height: 88vh; justify-content: center }` vertically centres
      the hero. Fine for three lines of text; on a hero that also holds the
      760px scan figure, the leftover slack lands as a void UNDER the figure.
   2. `.hero` bottom padding (72) then `.section` top padding (110) stack into
      182px of nothing between the figure and the first heading.

   Scoped to .feat-page rather than editing the shared rules, so the home,
   technology, grammar and vocabulary pages keep the rhythm they were tuned
   for. Specificity 0,2,0 beats the 0,1,0 originals without !important. */

.feat-page .hero {
  min-height: 0;
  justify-content: flex-start;
  padding: 72px 24px 0;
}

.feat-page .section { padding: 76px 24px; }
.feat-page .section-head { margin-bottom: 48px; }

/* The band that closes the page keeps a little more air — it is the one
   place the eye is meant to rest before the call to action. */
.feat-page .local-sec { padding: 92px 24px 104px; }

/* ── hero ─────────────────────────────────────────────────────────── */

.ocr-hero .hero-sub { max-width: 620px; }

/* ── signature: the tategaki scan ─────────────────────────────────── */

.scanfig {
  margin: 40px auto 0;
  max-width: 760px;
  width: 100%;
}

.scanfig svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.scanfig figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--paper-dim);
}

.ph-frame {
  fill: color-mix(in srgb, var(--ink-soft) 82%, #000);
  stroke: var(--ink-line);
  stroke-width: 1;
}

.ph-corner {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  opacity: 0.85;
}

/* scenery — the picture the sentence is describing, kept faint enough to
   read as background rather than as another thing to look at */
.ph-scene path { fill: color-mix(in srgb, var(--ai) 26%, transparent); }
.ph-scene .ph-snow { fill: color-mix(in srgb, var(--paper) 18%, transparent); }
.ph-scene .ph-torii path {
  fill: none;
  stroke: color-mix(in srgb, var(--shu) 55%, transparent);
  stroke-width: 5;
  stroke-linecap: round;
}

.ph-order circle {
  fill: none;
  stroke: var(--ai-light);
  stroke-width: 1.2;
  opacity: 0.75;
}

.ph-order text {
  fill: var(--ai-light);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  opacity: 0.9;
}

.ph-arrow {
  stroke: var(--ai-light);
  stroke-width: 1.2;
  opacity: 0.5;
  stroke-dasharray: 3 4;
}

.ph-boxes rect {
  fill: none;
  stroke: var(--ai-light);
  stroke-width: 1;
  opacity: 0.3;
}

.ph-hit {
  fill: color-mix(in srgb, var(--blue-bright) 16%, transparent);
  stroke: var(--blue-bright);
  stroke-width: 1.6;
}

.ph-char text {
  fill: var(--paper);
  font-family: var(--display);
  font-size: 30px;
  font-weight: 600;
  text-anchor: middle;
}

.ph-lit text { fill: var(--blue-bright); }

.ph-leader {
  stroke: var(--gold);
  stroke-width: 1.2;
  opacity: 0.55;
  stroke-dasharray: 4 4;
}

.ph-chip rect {
  fill: color-mix(in srgb, var(--ink-soft) 96%, #000);
  stroke: var(--ink-line);
  stroke-width: 1;
}

.ph-ruby {
  fill: var(--gold);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
}

.ph-word {
  fill: var(--paper);
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
}

.ph-gloss {
  fill: var(--paper-dim);
  font-family: var(--body);
  font-size: 13.5px;
}

.ph-pitch path {
  fill: none;
  stroke: var(--ai-light);
  stroke-width: 1.8;
}

.ph-pitch circle { fill: var(--ai-light); }

.ph-pitchlab {
  fill: var(--ai-light);
  font-family: var(--body);
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

/* The sweep reads as "this is being scanned right now". Right to left,
   because that is the direction the columns are read in. */
.ph-sweep {
  fill: var(--gold);
  opacity: 0.5;
  animation: ph-sweep 4.2s ease-in-out infinite;
}

@keyframes ph-sweep {
  0%, 8%   { transform: translateX(200px); opacity: 0; }
  16%      { opacity: 0.55; }
  84%      { opacity: 0.55; }
  92%, 100%{ transform: translateX(-20px); opacity: 0; }
}

/* ── screenshot strip, three up ───────────────────────────────────────
   style.css sets .shots to two columns for the home page's pair. A compound
   selector rather than a plain .shots override, so the home page keeps its
   own layout — this only fires where both classes are present. */

.shots.shots-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.shots.shots-3 .shot { max-width: 300px; }

/* These are cropped phone screenshots that start at the app's own top row,
   so the 42px radius the home page uses would eat into the UI. */
.shots.shots-3 .shot img { border-radius: 22px; }

@media (max-width: 900px) {
  .shots.shots-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
}

@media (max-width: 620px) {
  .shots.shots-3 { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}

/* ── direction cards ──────────────────────────────────────────────── */

/* .frow-viz is a flex row, so a child sized by content shrink-wraps instead
   of filling it — width:100% is what makes these panels the width of the
   column they sit in rather than the width of their own text. */
.dircards {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: stretch;
  width: 100%;
}

.dircard {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dircard-lab {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-light);
}

.dircard-ja {
  margin: 0;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.5;
  color: var(--paper);
}

/* real tategaki, set by the browser rather than faked with line breaks */
.dircard-ja.vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  height: 250px;
  margin-inline: auto;
}

/* ── feature grid ─────────────────────────────────────────────────── */

.feat-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.feat {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 24px 22px;
}

/* The gold rule is the only ornament these cards get — one line, top left,
   the same seam the word panels use. */
.feat::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--gold);
  margin-bottom: 16px;
  opacity: 0.85;
}

.feat h3 {
  font-size: 19px;
  line-height: 1.35;
  margin-bottom: 9px;
  color: var(--paper);
}

.feat p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--paper-dim);
}

.feat em {
  font-style: normal;
  color: var(--paper);
}

/* ── features hub ─────────────────────────────────────────────────── */

.fhub-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.fhub {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.fhub a {
  display: block;
  padding: 26px 24px;
  text-decoration: none;
  color: inherit;
}

.fhub:hover { border-color: var(--gold); transform: translateY(-2px); }

.fhub-ja {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin: 0 0 8px;
}

.fhub h2 {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 10px;
  color: var(--paper);
}

.fhub p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--paper-dim);
}

/* ── narrow ───────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
  .fhub-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .feat-grid { grid-template-columns: 1fr; }
  .dircards { grid-template-columns: 1fr; }
  .dircard-ja.vert { height: 190px; }
}

/* The sweep is decoration with a pulse; anyone who asked for less motion
   should get a still frame, not a slower one. */
@media (prefers-reduced-motion: reduce) {
  .ph-sweep { animation: none; opacity: 0; }
  .fhub { transition: none; }
  .fhub:hover { transform: none; }
}

/* ── reading practice ─────────────────────────────────────────────────
   The hero figure is real <ruby>, not a drawing: the claim on that page is
   that the reading lands on the word rather than the character, and a
   hand-placed SVG could put it anywhere. Browsers do ruby natively, style.css
   already colours `rt`, so this is placement only. */

.readfig {
  margin: 46px auto 0;
  max-width: 720px;
  text-align: left;
}

.readfig-ja {
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 2.5;          /* room for the ruby line above each word */
  color: var(--paper);
}

/* The word the card is about. Underlined rather than filled, so the sentence
   still reads as a sentence. */
.rw {
  color: var(--blue-bright);
  border-bottom: 2px solid color-mix(in srgb, var(--blue-bright) 55%, transparent);
}
.rw rt { color: var(--blue-bright); }

.readfig-card {
  margin-top: 22px;
  max-width: 420px;
  padding: 18px 20px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
}

.rfc-read {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ai-light);
}

.rfc-word {
  margin-top: 2px;
  font-family: var(--display);
  font-size: 26px;
  color: var(--paper-bright);
}

.rfc-gloss { margin-top: 8px; font-size: 15px; color: var(--paper); }

.rfc-note {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--card-line);
  font-size: 13.5px;
  color: var(--paper-dim);
}

.rfc-lv {
  margin-left: 6px;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--ai-light) 45%, transparent);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ai-light);
}

.readfig figcaption {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--paper-dim);
}

/* the three ways text gets in */
.inways { display: grid; gap: 12px; }

.inway {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 16px 18px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: var(--radius);
}

.inway-k { font-size: 21px; color: var(--paper); }

.inway-e {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ai-light);
}

/* the furigana comparison — two cards, only the right one is the product */
.fgcmp {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  max-width: 760px;
}

.fgcard {
  padding: 22px 24px 24px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: var(--radius);
}

.fgcard-good { border-color: color-mix(in srgb, var(--blue-bright) 40%, transparent); }

.fgcard-lab {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.fgcard-good .fgcard-lab { color: var(--blue-bright); }

.fgcard-ja {
  margin-top: 18px;
  font-size: 40px;
  line-height: 2.1;
  color: var(--paper);
}

/* The wrong-way card puts one ruby over the whole word, which is what
   "smeared across both glyphs" means and what the copy claims. */
.fgcard-bad .fgcard-ja rt { color: var(--paper-dim); }

.fgcard-note { margin-top: 10px; font-size: 13.5px; color: var(--paper-dim); }

.fg-tail {
  margin-top: 26px;
  max-width: 70ch;
  font-size: 15.5px;
  color: var(--paper-dim);
}

/* FAQ — a definition list, because that is what it is */
.faq { max-width: 76ch; }

.faq dt {
  margin-top: 26px;
  padding-top: 26px;
  border-top: 1px solid var(--ink-line);
  font-family: var(--display);
  font-size: clamp(17px, 2vw, 20px);
  color: var(--paper);
}

.faq dt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.faq dd {
  margin: 10px 0 0;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--paper-dim);
}

.faq dd a { color: var(--ai-light); }

@media (max-width: 620px) {
  .fgcmp { grid-template-columns: 1fr; }
  .readfig-ja { line-height: 2.3; }
}

/* ── the Anki note ────────────────────────────────────────────────────
   Drawn as the note it becomes, front and back, because "which field gets
   what" is the only question a reader with an existing note type has. */

.notefig { margin: 46px auto 0; max-width: 640px; text-align: left; }

.note {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  padding: 20px 22px;
  background: var(--card);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
}

.note + .note { margin-top: 12px; }

.note-side {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ai-light);
  padding-top: 6px;
}

.note-word { font-family: var(--display); font-size: 30px; color: var(--paper-bright); }
.note-sub { margin-top: 6px; font-size: 13px; color: var(--paper-dim); }
.note-read { font-size: 15px; letter-spacing: 0.08em; color: var(--ai-light); }
.note-gloss { margin-top: 6px; font-size: 15.5px; color: var(--paper); }

.note-row {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--card-line);
  font-size: 14px;
  color: var(--paper-dim);
}

.note-k {
  display: inline-block;
  min-width: 78px;
  /* min-width alone leaves "SENTENCE" — the one label wider than the column —
     butted straight against its value. */
  padding-right: 12px;
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-dim);
}

.note-ex em { color: var(--paper-dim); font-style: italic; }

.notefig figcaption { margin-top: 18px; font-size: 13.5px; color: var(--paper-dim); }

/* the five built-in presets */
.presets { display: grid; gap: 10px; max-width: 720px; }

.preset {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 15px 18px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: var(--radius);
}

.preset-n { font-size: 15px; font-weight: 700; color: var(--paper); }
.preset-d { font-size: 14px; color: var(--paper-dim); }

/* ── pitch accent ─────────────────────────────────────────────────────
   The minimal pair, with the step drawn between the right morae rather
   than approximated — on a page about pitch accent a decorative squiggle
   is the one lie a reader could catch. */

.pafig {
  margin: 46px auto 0;
  max-width: 620px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.pafig figcaption {
  grid-column: 1 / -1;
  font-size: 13.5px;
  color: var(--paper-dim);
  text-align: left;
}

.pacard {
  padding: 20px 22px 18px;
  background: var(--plate);
  border: 1px solid var(--plate-line);
  border-radius: var(--radius);
  text-align: left;
}

.pacard-w { font-family: var(--display); font-size: 30px; color: var(--paper-bright); }
.pacard-n { margin-left: 8px; font-size: 15px; color: var(--ai-light); }
.pasvg { display: block; width: 100%; height: auto; margin-top: 12px; }

.pa-line {
  fill: none;
  stroke: var(--blue-bright);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

.pa-dot { fill: var(--blue-bright); }
.pa-mora { fill: var(--paper-dim); font-size: 13px; }
.pacard-g { margin-top: 10px; font-size: 14.5px; color: var(--paper-dim); }

@media (max-width: 620px) {
  .pafig { grid-template-columns: 1fr; }
  .preset { grid-template-columns: 1fr; gap: 4px; }
  .note { grid-template-columns: 1fr; gap: 10px; }
  .note-side { padding-top: 0; }
}

/* A link inside a feature heading or body has to look like one — the base
   sheet sets `a { color: inherit }`, which is right for the card-sized links
   that wrap a whole block and wrong for one word inside a sentence. */
.feat h3 a, .feat p a { color: var(--blue-bright); }
.feat h3 a:hover, .feat p a:hover { text-decoration: underline; }

/* ── inside the rail grid ─────────────────────────────────────────────
   .gwrap already pays the page's side padding, so the sections inside the
   column must not pay it a second time — 48px of gutter on a column that
   has just given 340px away to the rail is the difference between the
   three-up screenshots fitting and not. */
.feat-page .glayout .hero,
.feat-page .glayout .section { padding-left: 0; padding-right: 0; }

/* The rail's first screen sits level with the hero's eyebrow rather than
   the breadcrumb a grammar page has there. */
.feat-page .grail { padding-top: 66px; }

@media (max-width: 960px) {
  .feat-page .grail { padding-top: 0; }
}