/* Read mode: the intro, the stage with the season word, the verse and
   its author, and the controls at the foot. The season kanji behind is
   the room's (room.css). */

.panel-read { display: flex; }
/* the home before (and without) JS: name, tagline, the two static pages,
   centred where the poem will be. quieted at boot: it fades out of sight
   and out of reach, the heading stays for screen readers */
.intro {
  position: absolute; inset: 0; z-index: var(--z-above); pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 34px; text-align: center; padding: 0 8vw;
  transition: opacity var(--dur-hush) var(--ease-breath);
}
.intro-title { margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.intro-glyph { font-family: var(--font-glyph); font-size: 56px; line-height: 1; color: var(--accent); }
.intro-name {
  font-family: var(--font-label); font-weight: 300; font-size: var(--type-3); letter-spacing: 0.52em;
  text-transform: uppercase; color: var(--paper-dim); padding-left: 0.52em;
}
.intro-tag { font-family: var(--font-verse); font-style: italic; font-size: 1.15rem; color: var(--paper-dim); }
.intro-links {
  margin: 0; pointer-events: auto;
  font-family: var(--font-label); font-weight: 300; font-size: var(--type-1);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper-faint);
}
.intro-links a {
  display: inline-block; padding: 14px 4px 14px calc(4px + 0.3em);
  color: var(--paper-dim); text-decoration: none; transition: color var(--dur-state) var(--ease-breath);
}
.intro-links a:hover, .intro-links a:focus-visible { color: var(--accent); }
.intro.is-quiet { opacity: 0; }
.intro.is-quiet .intro-links { visibility: hidden; transition: visibility 0s linear 1.2s; }

/* a faint pool of light gathers behind the poem column so the verse reads
   as the one lit thing; as strong as the season's --poem-light, it recedes
   with the chrome */
.panel-read::before {
  content: ""; position: absolute; inset: 0; z-index: var(--z-behind); pointer-events: none;
  background: radial-gradient(46% 38% at 50% 34%, var(--poem-light), transparent 70%);
  opacity: 0; transition: opacity var(--dur-season) var(--ease-breath);
}
.panel-read.active::before { opacity: 1; }
.stage {
  height: 100%; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  /* the column rests between the top bar and the bottom controls: auto
     margins on the first and last child centre it there and, unlike
     justify-content, still let an unusually tall poem scroll, never clip */
  padding: 112px 8vw 132px;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: none;
  container-type: inline-size; /* 100cqi: the width a verse may take */
}
.stage > :first-child { margin-top: auto; }
.stage > :last-child { margin-bottom: auto; }
.stage::-webkit-scrollbar { width: 0; }
.season-word {
  position: relative;
  font-family: var(--font-label); font-size: var(--type-1); font-weight: 300;
  text-transform: uppercase; letter-spacing: 0.52em; color: var(--accent-quiet);
  text-shadow: var(--glyph-halo);
  opacity: 0; margin-bottom: 52px; padding-bottom: 18px;
  transition: opacity var(--dur-hush) var(--ease-breath);
}
.season-word.show { opacity: 1; }
/* the word's kanji in the glyph face, a touch larger and closer than the tracked capitals */
.season-word [lang="ja"] { font-family: var(--font-glyph); font-size: 1.3em; line-height: 1; letter-spacing: 0.16em; }
/* a slender breath-paced rule grows under the season word as it settles */
.season-word::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 60%, transparent), transparent);
  transition: width 1.8s var(--ease-ink) 0.3s;
}
.season-word.show::after { width: 64px; }
/* a haiku line never wraps: the verse keeps its preferred size unless the
   poem's longest line would not fit the stage, then it shrinks until it
   does, down to a floor of 14px, the smallest a verse may read (every
   classic and seed poem stays above 17px on a 320px phone). --verse-em is that line's width in em, measured once per poem by
   modules/verse-fit.js; the lines are centred, so a reveal wider than the
   column breathes out on both sides */
.poem {
  --verse-pref: clamp(2.7rem, 2.25vw, 3.4rem);
  font-size: max(14px, min(var(--verse-pref), calc(97cqi / var(--verse-em, 16))));
  display: flex; flex-direction: column; align-items: center; max-width: 100%;
}
.poem .line {
  font-size: 1em; font-weight: 400; line-height: 1.95;
  color: var(--text); white-space: nowrap;
  opacity: 0; filter: blur(6px); letter-spacing: 0.18em;
  transition: opacity var(--dur-reveal) var(--ease-ink), filter var(--dur-reveal) var(--ease-ink), letter-spacing var(--dur-reveal) var(--ease-ink);
}
.poem .line.faint { color: var(--paper-dim); }
/* only a line too long even at the floor (a long community or shared line)
   folds, balanced, its continuation set in by a hanging indent;
   verse-fit.js marks the poem */
.poem[data-fit="wrap"] .line {
  align-self: stretch; white-space: normal; text-wrap: balance;
  padding-left: 1em; text-indent: -1em;
}
.poem .line.show {
  opacity: 1; filter: blur(0); letter-spacing: 0.01em;
  text-shadow: 0 0 26px color-mix(in srgb, var(--glow) 12%, transparent);
}
/* exit breath: on navigation the standing verse dissolves out quickly
   before the next one's slow reveal; placed after .show so it wins the
   cascade while the swap is in flight */
.poem.leaving .line {
  opacity: 0; filter: blur(5px); letter-spacing: 0.06em;
  transition: opacity var(--dur-exit) var(--ease-ink), filter var(--dur-exit) var(--ease-ink),
              letter-spacing var(--dur-exit) var(--ease-ink);
}
.meta { margin-top: 56px; opacity: 0; transition: opacity var(--dur-hush) var(--ease-breath) 0.2s; }
.meta.show { opacity: 1; }
.meta .author { font-style: italic; font-size: 18px; color: var(--paper-dim); letter-spacing: 0.03em; }
/* a faint dot rests above the author, a quiet seal under the verse */
.meta::before {
  content: "·"; display: block; color: var(--accent); opacity: 0.4;
  font-size: 20px; line-height: 1; margin-bottom: 18px;
  transition: opacity var(--dur-hush) var(--ease-breath);
}
/* rōmaji and source live in the readings panel; kept in markup, hidden here */
.meta .romaji, .meta .source { display: none; }
/* the way to the poems visitors left: hung under the author, out of the
   flow, so the column and the verse stay where they were; the stage's
   bottom padding holds it. It fades with the author and is out of reach
   until then; the paragraph hushes with the chrome. Read only, not while a
   poem opened from the gallery shows its way back, and not on screens too
   short to keep it clear of the controls */
.meta { position: relative; }
.read-pointer {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin: 22px 0 0; white-space: nowrap;
}
.read-pointer a {
  display: inline-block; padding: 8px 4px 8px calc(4px + 0.3em); text-decoration: none;
  font-family: var(--font-label); font-weight: 300; font-size: var(--type-1);
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--paper-dim);
  visibility: hidden; transition: color var(--dur-state) var(--ease-breath), visibility 0s linear var(--dur-hush);
}
.meta.show .read-pointer a { visibility: visible; transition: color var(--dur-state) var(--ease-breath), visibility 0s; }
.read-pointer a:hover, .read-pointer a:focus-visible { color: var(--accent); }
body:not([data-mode="read"]) .read-pointer,
.back-gallery:not([hidden]) ~ main .read-pointer { display: none; }
/* without container units the verse keeps its preferred size and folds */
@supports not (width: 1cqi) {
  .poem { font-size: var(--verse-pref); }
  .poem:not(.jp) .line {
    align-self: stretch; white-space: normal; text-wrap: balance;
    padding-left: 1em; text-indent: -1em;
  }
}
/* where verse-fit.js measures a line: the verse's face at rest, 100px */
.verse-measure {
  position: fixed; top: 0; left: 0; visibility: hidden; pointer-events: none;
  font-family: var(--font-verse); font-size: 100px; font-weight: 400; letter-spacing: 0.01em;
  white-space: nowrap;
}

/* ---- the poem set as vertical Japanese ---- */
.poem.jp {
  display: flex; flex-direction: row-reverse; align-items: flex-start;
  justify-content: center; gap: clamp(20px, 4vw, 52px);
  max-width: none; margin: 4px auto 0;
}
.poem.jp .line {
  font-family: var(--font-glyph);
  writing-mode: vertical-rl; text-orientation: upright;
  line-height: 1.18;
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  letter-spacing: 0.16em; color: var(--text);
  text-shadow: 0 0 22px color-mix(in srgb, var(--glow) 22%, transparent);
}
.poem.jp .line.show { letter-spacing: 0.1em; }

/* bottom controls: prev · dots · next, then the quiet readings. Centred by
   auto margins on a full-width box (not left:50%, which caps a fixed box's
   shrink-to-fit width at half the viewport and made "›" wrap alone) */
.read-controls {
  position: fixed; bottom: 22px; left: 0; right: 0; z-index: var(--z-chrome-over);
  width: max-content; max-width: 100%; margin-inline: auto; padding-inline: 12px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 10px;
}
/* where one row would crowd the corners the readings take a row of their
   own (see the queries below); the break sits after next, so
   prev · dots · next never part */
.read-controls::after { content: ""; order: 1; flex-basis: 100%; display: none; }
.read-controls .arrows + .ghost { margin-left: 16px; }
.dots { display: flex; gap: 14px; padding-inline: 4px; }
/* dots are real buttons; the ::after pad grows each target to 44px tall
   and 20px wide without changing the 6px visual (gap keeps neighbours from
   overlapping, so a tap between two dots is never mis-assigned) */
.dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--paper-dim);
  border: none; padding: 0; position: relative;
  opacity: 0.35; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-breath), opacity var(--dur-hover) var(--ease-breath),
              transform var(--dur-hover) var(--ease-breath), box-shadow var(--dur-hover) var(--ease-breath);
}
.dot::after { content: ""; position: absolute; inset: -19px -7px; }
.dot.active { background: var(--accent); opacity: 1; transform: scale(1.5); box-shadow: 0 0 10px var(--accent); }
.dot:focus-visible { opacity: 1; }
.arrows button {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: none; border: none; cursor: pointer; color: var(--paper-dim);
  font-size: 24px; line-height: 1; padding: 0 0 3px;
  transition: color 0.4s, transform 0.4s var(--ease-breath);
}
.arrows button:hover { color: var(--accent); transform: scale(1.2); }
.arrows button:focus-visible { color: var(--accent); }
/* the readings are plain words, not pills: quieter than the verse above */
.read-controls .ghost {
  order: 2; border-color: transparent; min-height: 40px; padding: 0 12px;
  font-size: var(--type-1); letter-spacing: 0.24em;
}
.read-controls .ghost:hover { border-color: transparent; }
.read-controls .ghost.solid { border-color: transparent; }
.read-controls .ghost:focus-visible { color: var(--accent); }
.lang-btn .swap { font-size: var(--type-1); padding: 0 2px; }
.lang-btn .swap, .lang-btn { font-variant-numeric: tabular-nums; }

/* up to very wide screens the verse keeps its 1440 size; beyond, it grows */
@media (max-width: 1919px) {
  .poem { --verse-pref: clamp(1.7rem, 3.6vw, 2.7rem); }
}

/* below wide desktops one row would reach the corner chrome: the readings
   take a second row under prev · dots · next */
@media (max-width: 1179px) {
  .read-controls::after { display: block; }
  .read-controls .arrows + .ghost { margin-left: 0; }
}

/* short laptops: the pointer under the author would reach the read
   controls, so the poem stands alone; the rhythm closes up so the season
   word, the verse and the author rest between the menu and the controls
   without the stage scrolling, and below 600px the verse eases with the
   height. Before the phone queries, which keep their own rhythm */
@media (max-height: 760px) {
  .read-pointer { display: none; }
  .stage { padding-top: 96px; padding-bottom: 108px; }
  .season-word { margin-bottom: 28px; }
  .poem { --verse-pref: clamp(1.7rem, min(3.6vw, 7.2vh), 2.7rem); }
  .poem .line { line-height: 1.7; }
  .meta { margin-top: 28px; }
}

/* phones: the verse a size down, its reveal breath narrower */
@media (max-width: 640px) {
  .stage { padding: 112px 6vw 112px; }
  .poem { --verse-pref: clamp(1.3rem, 6.2vw, 1.6rem); }
  .poem .line { line-height: 1.7; letter-spacing: 0.03em; }
  .meta { margin-top: 36px; }
  .read-pointer { margin-top: 14px; }
  .season-word { margin-bottom: 36px; }

  .read-controls { bottom: max(12px, env(safe-area-inset-bottom)); gap: 0 4px; }
  /* every word in the row, share and readings alike, meets the 44px of the arrows and dots */
  .read-controls .ghost { min-height: 44px; padding: 0 8px; letter-spacing: 0.18em; }
}

@media (max-width: 380px) {
  .read-controls { padding-inline: 4px; }
  /* the column starts under the back pill, not behind it */
  .stage { padding-top: 148px; }
  .read-controls .ghost { padding: 0 5px; letter-spacing: 0.12em; }
}

/* the narrowest phones, and landscape phones where the controls keep one
   row: share keeps its icon and aria-label only */
@media (max-width: 340px), (max-height: 480px) and (max-width: 900px) {
  .read-controls .ghost.has-ico span { display: none; }
  .read-controls .ghost.has-ico { min-width: 44px; justify-content: center; }
}

/* short viewports: tighter vertical rhythm, the verse sized by height too,
   so word + three lines + author fit between the menu and the controls */
@media (max-height: 560px) {
  .stage { padding-top: 76px; padding-bottom: 112px; }
  .season-word { margin-bottom: 20px; padding-bottom: 12px; }
  .poem { --verse-pref: clamp(1.2rem, min(3.6vw, 6.6vh), 2.7rem); }
  .poem .line { line-height: 1.45; }
  .meta { margin-top: 18px; }
  .meta::before { margin-bottom: 8px; }
}

/* landscape phones: the poem keeps the middle, the controls one row at the
   foot down to 568px wide, so a second row never covers the author */
@media (max-height: 480px) and (max-width: 900px) {
  .stage { padding: 58px 12vw 54px; }
  .read-controls { bottom: max(4px, env(safe-area-inset-bottom)); gap: 0 4px; padding-inline: 4px; }
  .read-controls::after { display: none; }
  .read-controls .ghost { min-height: 44px; padding: 0 5px; letter-spacing: 0.1em; }
  .read-controls .arrows + .ghost { margin-left: 8px; }
  .dots { gap: 10px; }
  .dot::after { inset: -19px -5px; }
}

/* the reveal and the exit breath fall back to plain quick fades */
@media (prefers-reduced-motion: reduce) {
  .intro { transition: opacity 0.4s; }
  .poem .line { transition: opacity 0.6s; filter: none; }
  .season-word::after { transition: none; }
  .poem.leaving .line { filter: none; letter-spacing: inherit; transition: opacity 0.3s; }
}