/* Hallmark · macrostructure: Marquee Hero → Long Document · tone: soft / quiet editorial · anchor hue: afternoon amber 62
 * genre: editorial · theme: custom (vibe: "午後三時, 壁に落ちる窓の光, 静かな余白")
 *   paper oklch(96.6% 0.009 80) · accent oklch(60% 0.13 62) · Hina Mincho + Zen Kaku Gothic New
 *   axes: light / classical-serif (thin) / warm
 * nav: N3 side-rail (縦書き, right edge) · footer: statement (3 groups) · enrichment: Tier A CSS (window light, per-work light)
 */

/* ── tokens ─────────────────────────────────────────── */
:root {
  color-scheme: light;

  --color-wall: oklch(92.8% 0.016 75);
  --color-paper: oklch(96.6% 0.009 80);
  --color-sun: oklch(98.9% 0.028 92);
  --color-sun-warm: oklch(95.6% 0.055 82);
  --color-shade: oklch(85.5% 0.02 65);
  --color-skin: oklch(85% 0.075 36);
  --color-water: oklch(89% 0.022 225 / 0.55);
  --color-ripple: oklch(97% 0.012 225 / 0.55);
  --color-ink: oklch(27% 0.016 60);
  --color-ink-2: oklch(47% 0.016 60);
  --color-line: oklch(85% 0.014 70);
  --color-amber: oklch(60% 0.13 62);
  --color-focus: oklch(55% 0.14 60);

  --font-display: "Hina Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.4rem;
  --text-xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  --text-2xl: clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --text-wall: clamp(3rem, 1.6rem + 5.5vw, 6.4rem);

  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3.5rem;
  --space-3xl: 5.5rem;

  --rail: 4.5rem;
  --measure: 44rem;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 160ms;
}

/* ── base ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 2;
  letter-spacing: 0.03em;
  line-break: strict;
}
h1, h2, h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  min-width: 0;
}
p, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
.nm { white-space: nowrap; }
a { color: inherit; text-decoration-color: var(--color-amber); text-decoration-thickness: 1px; text-underline-offset: 0.35em; }
a:hover { color: var(--color-ink); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.skip {
  position: absolute;
  inset-inline-start: var(--space-md);
  inset-block-start: var(--space-md);
  z-index: 30;
  padding: var(--space-xs) var(--space-md);
  background: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.wrap { max-width: var(--measure); margin-inline: auto; padding-inline: var(--space-lg); }

/* ── rail (narrow: top bar) ─────────────────────────── */
.rail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-lg);
  padding: var(--space-md) var(--space-lg);
}
.is-home .rail { background: var(--color-wall); }
.rail__logo { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.18em; line-height: 1.3; }
.rail__logo a { text-decoration: none; }
.rail__nav ul { display: flex; flex-wrap: wrap; gap: 0 var(--space-md); font-size: var(--text-sm); }
.rail__nav a { display: inline-block; padding-block: var(--space-2xs); text-decoration: none; white-space: nowrap; color: var(--color-ink-2); }
.rail__nav a:hover { color: var(--color-ink); }
.rail__nav a[aria-current="page"] { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-amber); text-underline-offset: 0.4em; }

/* ── wall (hero) ────────────────────────────────────── */
.wall {
  position: relative;
  display: flex;
  min-block-size: 34rem;
  overflow: hidden;
  background: var(--color-wall);
}
.wall__sun {
  position: absolute;
  inset-block-start: -2%;
  inset-inline-end: -30%;
  inline-size: 125%;
  aspect-ratio: 4 / 3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1.15fr 1fr;
  gap: 5% 4%;
  transform: skewX(-22deg) rotate(-7deg);
  transform-origin: top right;
  filter: blur(14px);
  animation: drift 48s var(--ease-in-out) infinite alternate;
}
.wall__sun i { background: linear-gradient(160deg, var(--color-sun) 40%, var(--color-sun-warm)); }
@keyframes drift { to { translate: -3% 2%; } }

.wall__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-xl);
  inline-size: 100%;
  max-width: 72rem;
  padding-block: var(--space-xl) var(--space-xl);
}
.wall__title {
  align-self: flex-start;
  writing-mode: vertical-rl;
  font-size: var(--text-wall);
  letter-spacing: 0.28em;
  line-height: 1.2;
  margin-inline-end: 4%;
}
.wall__note { max-inline-size: 22rem; font-size: var(--text-sm); line-height: 1.9; word-break: auto-phrase; }
.wall__edition { font-family: var(--font-display); font-size: var(--text-md); margin-block-end: var(--space-2xs); }

/* ── per-work light ─────────────────────────────────── */
.light { position: relative; display: block; overflow: hidden; isolation: isolate; background-color: var(--color-wall); }
.light::before { content: ""; position: absolute; inset: -16px; filter: blur(var(--light-blur, 6px)); }
.work-row__chip.light { --light-blur: 2px; }
/* 日の当たる方: 背中から差す低い西日 */
.light--hinoataruhou::before {
  background:
    linear-gradient(104deg, transparent 54%, var(--color-shade) 62%, transparent 80%),
    linear-gradient(104deg, var(--color-sun-warm) 0%, var(--color-sun) 14% 38%, transparent 54%),
    var(--color-wall);
}
/* 指のすき間から見えた赤色: 手の影に、指のすき間から赤みを帯びた光 */
.light--yubinosukima::before {
  background:
    linear-gradient(97deg,
      transparent 0 18%,
      var(--color-shade) 25% 31%,
      var(--color-skin) 32.6%, var(--color-sun) 33.6% 34.6%, var(--color-skin) 35.6%,
      var(--color-shade) 37.2% 43%,
      var(--color-skin) 44.4%, var(--color-sun) 45.3% 46.1%, var(--color-skin) 47%,
      var(--color-shade) 48.4% 55.5%,
      var(--color-skin) 56.7%, var(--color-sun) 57.5% 58.2%, var(--color-skin) 59%,
      var(--color-shade) 60.3% 66.5%,
      var(--color-skin) 67.5%, var(--color-sun) 68.2% 68.7%, var(--color-skin) 69.5%,
      var(--color-shade) 70.6% 74%,
      transparent 82% 100%),
    var(--color-sun-warm);
}
/* 屈折する午後３時: 水面で折れ曲がる光 */
.light--kussetsu { --light-blur: 3px; }
.light--kussetsu::before {
  background:
    linear-gradient(116deg, transparent 37%, var(--color-sun) 45% 55%, transparent 63%) top / 100% 56% no-repeat,
    linear-gradient(150deg, transparent 43%, var(--color-sun) 50% 58%, transparent 65%) bottom / 100% 44% no-repeat,
    repeating-linear-gradient(180deg, transparent 0 16px, var(--color-ripple) 16px 18px) bottom / 100% 44% no-repeat,
    linear-gradient(var(--color-water), var(--color-water)) bottom / 100% 44% no-repeat,
    var(--color-wall);
}

/* ── sections ───────────────────────────────────────── */
.sec { padding-block: var(--space-2xl); }
.sec + .sec { border-block-start: 1px solid var(--color-line); }
.sec__h { font-size: var(--text-xl); margin-block-end: var(--space-lg); }

.nil { margin-block-end: var(--space-lg); color: var(--color-ink-2); }
.nil span { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-ink); margin-inline-start: var(--space-xs); }

.works { border-block-start: 1px solid var(--color-line); }
.work-row {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  grid-template-areas: "chip award" "chip title" "chip by";
  column-gap: var(--space-lg);
  align-items: start;
  padding-block: var(--space-lg);
  border-block-end: 1px solid var(--color-line);
  text-decoration: none;
}
.work-row__chip { grid-area: chip; inline-size: 4.5rem; aspect-ratio: 1; }
.work-row__award { grid-area: award; font-size: var(--text-xs); color: var(--color-ink-2); line-height: 1.6; }
.work-row__title { grid-area: title; font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.5; word-break: auto-phrase; }
.work-row__by { grid-area: by; font-size: var(--text-sm); color: var(--color-ink-2); word-break: auto-phrase; }
.work-row:hover .work-row__title { text-decoration: underline; text-decoration-color: var(--color-amber); text-underline-offset: 0.3em; }

.minor { margin-block-start: var(--space-lg); font-size: var(--text-sm); }
.minor__row { display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: var(--space-md); padding-block: var(--space-xs); }
.minor dt { color: var(--color-ink-2); }

.prose p { text-indent: 1em; text-align: justify; }
.prose p + p { margin-block-start: var(--space-md); }
.prose .prose__lead { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.9; text-indent: 0; }
.prose--flat p { text-indent: 0; }
.prose--flat p + p { margin-block-start: 0; }
.prose__more { margin-block-start: var(--space-lg); text-indent: 0 !important; }
.prose__more a { white-space: nowrap; }

.news li { display: grid; gap: 0 var(--space-lg); padding-block: var(--space-sm); border-block-end: 1px solid var(--color-line); line-height: 1.85; word-break: auto-phrase; }
.news li:first-child { padding-block-start: 0; }
.news time { font-size: var(--text-sm); color: var(--color-ink-2); font-variant-numeric: tabular-nums; }

.outline { display: grid; gap: var(--space-xs); }
.outline li { padding-inline-start: 1.2em; text-indent: -1.2em; }
.outline li::before { content: "―"; display: inline-block; inline-size: 1.2em; text-indent: 0; color: var(--color-amber); }

.phead { padding-block: var(--space-2xl) var(--space-lg); }
.phead__note { font-size: var(--text-sm); color: var(--color-ink-2); }
.phead__title { font-size: var(--text-2xl); letter-spacing: 0.08em; }

/* ── results ───────────────────────────────────────── */
.work { padding-block-end: var(--space-2xl); }
.work__light { block-size: clamp(9rem, 7rem + 10vw, 16rem); margin-block-end: var(--space-xl); }
.work .wrap { max-width: 68rem; }
.work__award { font-size: var(--text-sm); color: var(--color-ink-2); }
.work__title { font-size: var(--text-2xl); line-height: 1.35; margin-block: var(--space-2xs) var(--space-xs); }
.work__by { color: var(--color-ink-2); word-break: auto-phrase; }
.work__head { margin-block-end: var(--space-xl); }
.work__reviews { display: grid; gap: var(--space-xl); }
.review__judge { display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--text-lg); margin-block-end: var(--space-sm); }
.review__label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-ink-2); }
.review p { text-indent: 1em; text-align: justify; }
.review p + p { margin-block-start: var(--space-xs); }

/* ── about / guidelines ────────────────────────────── */
.judges { display: grid; gap: var(--space-xl); }
.judge__name { font-size: var(--text-lg); }
.judge__reading { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-ink-2); margin-inline-start: var(--space-2xs); }
.judge__bio { margin-block-start: var(--space-xs); font-size: var(--text-sm); text-align: justify; }
.sponsor { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0.12em; }
.items { display: grid; gap: var(--space-sm); }
.items li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: var(--space-xs); text-align: justify; line-height: 1.95; }
.items__num { font-family: var(--font-display); color: var(--color-amber); }
.tel { font-variant-numeric: tabular-nums; }

/* ── licenses ───────────────────────────────────────── */
.credits { display: grid; gap: var(--space-lg); margin-block: var(--space-lg); border-block-start: 1px solid var(--color-line); }
.credit { display: grid; gap: var(--space-2xs); padding-block-start: var(--space-lg); }
.credit__name { font-family: var(--font-display); font-size: var(--text-lg); }
.credit__body { margin: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ── footer ─────────────────────────────────────────── */
.end { margin-block-start: var(--space-2xl); padding-block: var(--space-2xl) var(--space-lg); background: var(--color-wall); font-size: var(--text-sm); }
.end .wrap { max-width: 68rem; }
.end__grid { display: grid; gap: var(--space-lg); }
.end__name { font-family: var(--font-display); font-size: var(--text-xl); letter-spacing: 0.2em; }
.end__h { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-ink-2); }
.end__tel { font-variant-numeric: tabular-nums; }
.end__sponsor { font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.12em; }
.end__copy { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-lg); margin-block-start: var(--space-xl); color: var(--color-ink-2); font-size: var(--text-xs); }
.end__copy a { white-space: nowrap; }
.end__copy a[aria-current="page"] { text-decoration-thickness: 2px; }

/* ── ≥ 40rem ────────────────────────────────────────── */
@media (min-width: 40rem) {
  .news li { grid-template-columns: 6.5em minmax(0, 1fr); }
  .wall { min-block-size: 40rem; }
  .wall__sun { inline-size: 95%; inset-inline-end: -12%; }
  .work-row { grid-template-columns: 6rem minmax(0, 1fr); }
  .work-row__chip { inline-size: 6rem; }
  .judges { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .end__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; }
}

/* ── ≥ 64rem: 縦書きの右端ナビ ─────────────────────── */
@media (min-width: 64rem) {
  body { padding-inline-end: var(--rail); }
  .rail {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 20;
    inline-size: var(--rail);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-xl);
    padding: var(--space-xl) 0;
    overflow-y: auto;
    background: var(--color-paper);
    border-inline-start: 1px solid var(--color-line);
  }
  .is-home .rail { background: var(--color-paper); }
  .rail__logo { writing-mode: vertical-rl; font-size: var(--text-lg); letter-spacing: 0.3em; }
  .rail__nav ul { flex-direction: column; flex-wrap: nowrap; align-items: center; gap: var(--space-lg); font-size: var(--text-sm); }
  .rail__nav a { writing-mode: vertical-rl; letter-spacing: 0.16em; padding-block: 0; padding-inline: var(--space-2xs); }
  .rail__nav a[aria-current="page"] { text-decoration: none; box-shadow: inset -2px 0 0 var(--color-amber); }

  .wall { min-block-size: min(88svh, 52rem); }
  .wall__sun { inline-size: min(72%, 62rem); inset-inline-end: -4%; inset-block-start: -6%; }
  .wall__inner { padding-block: var(--space-3xl) var(--space-2xl); padding-inline: var(--space-2xl); margin-inline: auto; }
  .wall__title { margin-inline-end: 12%; }

  .work__reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
}

@media (prefers-reduced-motion: reduce) {
  .wall__sun { animation: none; }
}

@media print {
  .rail, .skip { display: none; }
  body { padding: 0; background: none; }
}