/* Landing page (index.html). The app pages use style.css.
   The page is the night scene of the woodblock print: every color below is taken from it.
   Lamplight is where words are (title, caption window, step numbers); the doorway's vermilion
   is kept for the one way in, the listen button. */
:root {
  --night: #182a31;           /* the sky, top left of the print, a little deeper */
  --line: #2c434b;
  --paper: #efe6d6;           /* lit paper: body text */
  --mist: #9fb0ad;            /* the sky's light teal: secondary text */
  --lamp: #f0a763;            /* the round window's glow */
  --lamp-pale: #f9d6a2;
  --door: #f06647;            /* the open doorway */
  --door-hover: #f47d60;
  --wood: #34322d;            /* walls and eaves */
  --ink: #2a2420;             /* text on lamplight */
  --ink-soft: color-mix(in srgb, var(--ink) 80%, var(--lamp));

  /* Side padding; the hero lines its text up with the 1040px reading column below. */
  --pad: 20px;
  --gutter-left: max(var(--pad), env(safe-area-inset-left), calc((100% - 1040px) / 2 + var(--pad)));
  --gutter-right: max(var(--pad), env(safe-area-inset-right), calc((100% - 1040px) / 2 + var(--pad)));
  --first-screen: max(100svh, 560px);

  --serif-latin: "Iowan Old Style", "Palatino Linotype", Palatino, "Hiragino Mincho ProN", Georgia, serif;
  --serif-ko: "AppleMyungjo", "Nanum Myeongjo", "Noto Serif KR", "Noto Serif CJK KR", Batang, serif;
  --serif-ja: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", "Noto Serif CJK JP", serif;
  --sans-ko: Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --sans-ja: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP", system-ui, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: var(--sans-ko);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--lamp); color: var(--ink); }
/* Only elements that declare a language switch fonts; their children inherit, so the serif rules below win. */
[lang|="ja"] { font-family: var(--sans-ja); }
[lang|="ko"] { font-family: var(--sans-ko); }
/* Korean wraps between words; Japanese wraps between phrases where the browser can (auto-phrase), else anywhere. */
[lang|="ko"] { word-break: keep-all; overflow-wrap: break-word; }
[lang|="ja"] { word-break: normal; line-break: strict; }
@supports (word-break: auto-phrase) { [lang|="ja"] { word-break: auto-phrase; } }
p { text-wrap: pretty; }
h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
a { color: inherit; }
a:focus-visible { outline: 2px solid var(--lamp); outline-offset: 3px; border-radius: 4px; }

/* ---------- first screen: the print ---------- */
/* main is the sheet the print sits on: its negative layers stay above this night, below the text. */
main { isolation: isolate; background: var(--night); }
.hero {
  position: relative;
  padding-left: var(--gutter-left);
  padding-right: var(--gutter-right);
}
/* On a phone the print fills the first screen behind the name and the button. The night only
   gathers where words sit (top and bottom); the lit windows and the doorway keep their full color. */
.print {
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--first-screen);
  z-index: -1;
  background:
    linear-gradient(to bottom,
      var(--night) 0%,
      color-mix(in srgb, var(--night) 78%, transparent) 22%,
      transparent 42%,
      transparent 74%,
      color-mix(in srgb, var(--night) 86%, transparent) 91%,
      var(--night) 100%),
    url("assets/home-bg.jpg") 62% 100% / cover no-repeat var(--night);
}

.intro {
  min-height: var(--first-screen);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: max(20px, env(safe-area-inset-top));
  padding-bottom: 28px;
}
/* The mark is one color of brush ink; on the night it is written in paper instead of green. */
.logo {
  display: block;
  width: 76px;
  height: auto;
  margin-bottom: 18px;
  filter: brightness(0) invert(93%) sepia(14%);
  opacity: 0.92;
}
h1 {
  font-family: var(--serif-latin);
  font-weight: 600;
  font-size: clamp(3rem, 12.5vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.015em;
  color: var(--lamp);
}
.meaning {
  margin-top: 12px;
  font-family: var(--serif-ko);
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--paper);
}
.meaning span { font-family: var(--serif-ja); margin-left: 0.5em; color: var(--mist); }

.listen {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  align-self: stretch;
  max-width: 26rem;
  margin-top: auto;
  padding: 16px 28px;
  border-radius: 14px;
  background: var(--door);
  color: var(--night);
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}
.listen small { font-size: 0.85rem; font-weight: 600; }
.listen:hover { background: var(--door-hover); }
.listen:focus-visible { outline-offset: 4px; }

/* ---------- what it is, and a caption as it looks ---------- */
.about { display: grid; gap: 10px; padding-top: 36px; }
.lead { max-width: 34em; font-size: 1.05rem; }
.lead:lang(ja) { color: var(--mist); font-size: 0.95rem; }

/* The sample caption is a lit paper window: in the print, the light (and here, the words) comes from
   the windows. The glow spills a little into the night around it. */
.live {
  position: relative;
  isolation: isolate;
  margin-top: 22px;
  padding: 22px 22px 20px;
  border-radius: 4px;
  color: var(--ink);
  background: linear-gradient(172deg, var(--lamp-pale) 0%, var(--lamp) 100%);
  box-shadow: 0 0 64px 4px color-mix(in srgb, var(--lamp) 30%, transparent);
}
.spoken {
  font-family: var(--serif-ko);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.caption {
  margin-top: 12px;
  font-family: var(--serif-ja);
  font-weight: 600;
  font-size: clamp(1.45rem, 5.6vw, 2.05rem);
  line-height: 1.55;
  letter-spacing: 0.02em;
}
/* Each verse's source sits right after it, small. A space (not a margin) separates them, so a wrapped
   source starts flush at the line start. */
.live cite {
  font-family: var(--sans-ko);
  font-style: normal;
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--ink-soft);
}
.caption cite { font-family: var(--sans-ja); }

/* ---------- reading sections ---------- */
.guide, .ops, .colophon {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding-left: max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));
}
.guide { padding-top: 72px; padding-bottom: 56px; }
h2 {
  font-family: var(--serif-ko);
  font-size: 1.45rem;
  line-height: 1.35;
  font-weight: 700;
}
h2:lang(ja) { font-family: var(--serif-ja); }
h2 span {
  display: block;
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--mist);
}
h2 span:lang(ja) { font-family: var(--serif-ja); }
h2 span:lang(ko) { font-family: var(--serif-ko); }

.steps {
  list-style: none;
  padding: 0;
  margin-top: 28px;
  display: grid;
  gap: 28px;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  column-gap: 14px;
  row-gap: 4px;
}
.steps li::before {
  content: counter(step);
  grid-row: 1 / span 2;
  font-family: var(--serif-latin);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--lamp);
}
.steps p { max-width: 36em; }
.steps p:first-child { font-size: 1.05rem; }
.steps p + p { color: var(--mist); font-size: 0.92rem; }

/* ---------- for operators ---------- */
.ops { padding-top: 40px; padding-bottom: 40px; }
.ops h2 { font-size: 1.1rem; }
.ops h2 span { font-size: 0.85rem; }
.ops > p { margin-top: 10px; color: var(--mist); font-size: 0.92rem; }
.ops ul { list-style: none; padding: 0; margin-top: 14px; display: grid; gap: 10px; }
.ops li { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; }
.ops a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--lamp);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.ops a:hover { text-decoration-thickness: 2px; }
.ops li span { color: var(--mist); font-size: 0.88rem; }

/* ---------- credit ---------- */
.colophon {
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--mist);
}
.colophon::before { content: ""; display: block; height: 1px; margin-bottom: 20px; background: var(--line); }
.colophon .maker { color: var(--paper); margin-left: 0.3em; }
.credits { display: flex; flex-wrap: wrap; column-gap: 2em; }

/* ---------- wider screens: the print soaks into the night ----------
   No frame and no column. The mask (made from the print, see home-bg-mask.webp) lets dark wood melt
   into the night first and the lit parts reach further, along an uneven edge. It is a mask rather
   than a dark overlay, so whatever remains keeps its full color. Behind it a blurred copy with its
   darks crushed adds only light, carrying the windows' and the doorway's colors out into the page. */
@media (min-width: 880px) {
  :root {
    --pad: 40px;
    --print-h: calc(max(100svh, 680px) + 60px);     /* runs a little past the first screen */
    --print-w: calc(var(--print-h) * 906 / 1412);   /* the print's own proportions: nothing is cropped */
  }
  .hero {
    min-height: max(100svh, 680px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 48px;
    padding-bottom: 48px;
    padding-right: calc(var(--print-w) * 0.8 + 32px);  /* the text may sit over the dissolved left edge */
  }
  .hero::before {
    content: "";
    position: absolute;
    z-index: -2;
    top: 0;
    right: 0;
    width: var(--print-w);
    height: var(--print-h);
    background: url("assets/home-bg.jpg") center / cover no-repeat;
    filter: brightness(0.85) contrast(1.9) saturate(1.5) blur(70px);
    mix-blend-mode: screen;
    opacity: 0.8;
    pointer-events: none;
  }
  .print {
    inset: 0 0 auto auto;
    width: var(--print-w);
    height: var(--print-h);
    background: url("assets/home-bg.jpg") center / cover no-repeat;
    -webkit-mask: url("assets/home-bg-mask.webp") center / 100% 100% no-repeat;
    mask: url("assets/home-bg-mask.webp") center / 100% 100% no-repeat;
  }
  .intro, .about { max-width: 34rem; }
  .intro { min-height: 0; padding: 0; }
  .logo { width: 96px; margin-bottom: 28px; }
  h1 { font-size: clamp(3.5rem, 6.2vw, 5.25rem); }  /* sized to the text column, so the name stays on one line */
  .listen { align-self: flex-start; margin-top: 30px; }
  .about { padding-top: 32px; }
  .live { padding: 28px 30px 24px; }
  .guide { padding-top: 88px; }
  .steps { max-width: 44rem; }
}

/* ---------- the one moment: the window lights, then the caption arrives phrase by phrase ----------
   The page's script adds .unlit, then .lit when the window scrolls into view. */
.live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--wood);
  opacity: 0;
}
.live.unlit { box-shadow: none; }
.live.unlit::before { opacity: 1; }
.live.unlit .spoken,
.live.unlit .caption > span,
.live.unlit .caption cite { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .live.lit { animation: glow 1.4s ease-out 0.1s both; }
  .live.lit::before { animation: dim 0.9s ease-in 0.1s both; }
  .live.lit .spoken { animation: arrive 0.5s ease-out 0.9s both; }
  .live.lit .caption > span { animation: arrive 0.5s ease-out both; }
  .live.lit .caption > span:nth-child(1) { animation-delay: 1.4s; }
  .live.lit .caption > span:nth-child(2) { animation-delay: 2s; }
  .live.lit .caption > span:nth-child(3) { animation-delay: 2.6s; }
  .live.lit .caption > span:nth-child(4) { animation-delay: 3.3s; }
  .live.lit .caption cite { animation: arrive 0.5s ease-out 3.8s both; }
}
@keyframes dim { from { opacity: 1; } to { opacity: 0; } }
@keyframes glow { from { box-shadow: 0 0 0 0 transparent; } }
@keyframes arrive { from { opacity: 0; } to { opacity: 1; } }