/* GLN, draft 01: "A day in a still room" */

/* Self-hosted web fonts: the latin subsets Google Fonts serves, unmodified (SIL OFL, see CREDITS.md). */
@font-face { font-family: "Shippori Mincho B1"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/shippori-mincho-b1-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Shippori Mincho B1"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/shippori-mincho-b1-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Zen Kaku Gothic New"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/zen-kaku-gothic-new-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Zen Kaku Gothic New"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/zen-kaku-gothic-new-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Local fallbacks sized to the web fonts' width (measured in Chrome on Windows): Georgia at 106.2%
   matches Shippori's cap height and line length, Yu Gothic / Arial stand in for Zen Kaku. The swap
   from fallback to web font then barely moves a line. */
@font-face { font-family: "GLN Mincho Fallback"; src: local("Georgia"); size-adjust: 106.2%; ascent-override: 109%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "GLN Serif Fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 116.1%; ascent-override: 100%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "GLN Gothic Fallback"; src: local("Yu Gothic Regular"), local("YuGothic-Regular"), local("Yu Gothic"); size-adjust: 93.2%; ascent-override: 124.5%; descent-override: 31%; line-gap-override: 0%; }
@font-face { font-family: "GLN Sans Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 97.6%; ascent-override: 119%; descent-override: 29.7%; line-gap-override: 0%; }

:root {
  --paper: #ECEBE6;
  --ink: #23241F;
  --tatami: #B9B28E;
  --umber: #7A5A3A;
  --shadow: #3B3A34;
  --ink-soft: #5A5A52;          /* 5.9:1 on paper */
  --line: rgba(35, 36, 31, .34);

  --serif: "Shippori Mincho B1", "GLN Mincho Fallback", "GLN Serif Fallback", serif;
  --sans: "Zen Kaku Gothic New", "GLN Gothic Fallback", "GLN Sans Fallback", sans-serif;

  --g: clamp(20px, 5.5vw, 104px);          /* left gutter; photos bleed off the right */
  --cols: var(--g) minmax(0, 4fr) minmax(0, 1fr) minmax(0, 8fr);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.75 var(--sans);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
p, h1, h2, h3, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .22em; }
a:hover { color: var(--umber); }

:focus-visible { outline: 2px solid var(--umber); outline-offset: 3px; }

.skip {
  position: absolute; left: var(--g); top: 12px; z-index: 50;
  padding: 10px 16px; background: var(--ink); color: var(--paper);
  transform: translateY(-160%);
}
.skip:focus { transform: none; }

.sr-only, .motion .moment__time, .motion .moment__temps {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- shared type ---------- */

.section-title {
  font: 400 clamp(34px, 3.5vw, 54px)/1.14 var(--serif);
  letter-spacing: -.005em;
  margin-bottom: 20px;
  text-wrap: balance;
}

.small { font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.caption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); }

.tag {
  display: inline-block;
  padding: 5px 10px 6px;
  background: rgba(236, 235, 230, .92);
  color: var(--ink);
  font-size: 13px; line-height: 1.2;
}

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px;
  background: var(--ink); color: var(--paper);
  font: 500 16px/1 var(--sans); letter-spacing: .02em;
  text-decoration: none; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color .45s var(--ease-out);
}
.button:hover { background: var(--umber); color: var(--paper); }

/* ---------- header ---------- */

.site-head {
  position: absolute; top: 0; left: 0; z-index: 10;
  width: calc(var(--g) + (100% - var(--g)) * 4.6 / 13);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 22px 0 0 var(--g);
}
.wordmark {
  display: inline-flex; align-items: center; min-height: 44px;
  font: 500 21px/1 var(--serif); letter-spacing: .18em; text-decoration: none;
}
.site-nav { display: flex; gap: 4px 22px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 15px; text-decoration: none; white-space: nowrap;
}
.site-nav a:hover { text-decoration: underline; }

/* ---------- hero ---------- */

.hero {
  position: relative;
  display: grid;
  grid-template-columns: var(--g) minmax(0, 4.6fr) minmax(0, .9fr) minmax(0, 7.5fr);
  min-height: max(640px, 100svh);
}
.hero__media { grid-column: 4; grid-row: 1; position: relative; }
.hero__mask { position: absolute; inset: 0; overflow: hidden; background: #B3A796; }
.hero__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 36% 50%;
  transform-origin: 30% 60%;
}
.hero__tag { position: absolute; left: 0; bottom: 0; }

.hero__stamp {
  grid-column: 3; grid-row: 1;
  justify-self: end; align-self: start;
  margin: clamp(120px, 17svh, 170px) 20px 0 0;
  writing-mode: vertical-rl;
  font: 400 15px/1 var(--serif); letter-spacing: .12em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.hero__text {
  grid-column: 2 / 4; grid-row: 1;
  align-self: end;
  padding: 0 clamp(16px, 1.8vw, 36px) clamp(56px, 11svh, 120px) 0;
}
.hero__title {
  font: 400 clamp(32px, 4.3vw, 90px)/1.08 var(--serif);
  letter-spacing: -.012em;
}
.hero__title .line { display: block; white-space: nowrap; }
.hero__title .line__in { display: inline-block; }
.hero__lede { margin-top: clamp(22px, 3svh, 34px); max-width: 25em; font-size: 17px; }
.hero__cta { margin-top: clamp(26px, 4svh, 40px); }

/* ---------- the day: stacked layout (no JS, reduced motion, short screens) ---------- */

.day { padding: clamp(96px, 11vw, 180px) 0 clamp(64px, 8vw, 120px); }
@property --stage-fg { syntax: '<color>'; inherits: true; initial-value: #23241F; }
@property --stage-soft { syntax: '<color>'; inherits: true; initial-value: #5A5A52; }
@property --stage-out { syntax: '<color>'; inherits: true; initial-value: #7A5A3A; }
.day__track {
  --stage-bg: var(--paper);
  --stage-fg: var(--ink);
  --stage-soft: var(--ink-soft);
  --stage-out: var(--umber);
  transition: --stage-fg .3s ease-out, --stage-soft .3s ease-out, --stage-out .3s ease-out;
}
.day__track.is-night { --stage-fg: var(--paper); --stage-soft: #BDBAB0; --stage-out: var(--tatami); }
.day__stage { display: grid; grid-template-columns: var(--cols); row-gap: clamp(40px, 6vw, 88px); }
.day__head { grid-column: 2 / 4; }
.day__title { font: 400 clamp(34px, 3.5vw, 54px)/1.14 var(--serif); }
.day__intro { margin-top: 16px; max-width: 26em; }
.clock, .readings { display: none; }
.day__note { grid-column: 4; justify-self: start; align-self: end; padding-left: 0; background: none; color: var(--ink-soft); font-size: 14px; }

.moments { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(64px, 8vw, 128px); }
.moment { display: grid; grid-template-columns: var(--cols); align-items: end; }
.moment__photo { grid-column: 4; grid-row: 1; aspect-ratio: 3 / 2; overflow: hidden; }
.moment__photo picture, .moment__photo img { width: 100%; height: 100%; }
.moment__photo img { object-fit: cover; }
.moment__room {
  grid-column: 3; grid-row: 1; justify-self: end; align-self: start;
  margin-right: 16px;
  writing-mode: vertical-rl;
  font: 400 15px/1 var(--serif); letter-spacing: .14em;
  color: var(--ink-soft);
}
.moment__text { grid-column: 2; grid-row: 1; padding-right: clamp(16px, 2vw, 32px); }
.moment__time {
  font: 400 clamp(60px, 7vw, 116px)/1 var(--serif);
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 22px;
}
.moment__line { font: 400 clamp(19px, 1.55vw, 24px)/1.6 var(--serif); max-width: 19em; }
.moment__temps { margin-top: 14px; font-size: 15px; color: var(--ink-soft); }


/* chart */
.chart { grid-column: 2 / 5; margin-right: var(--g); position: relative; height: 220px; color: var(--stage-fg); }
.chart__plot { position: absolute; left: 0; right: 0; top: 18px; bottom: 44px; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__out, .chart__in { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.chart__out { stroke: var(--stage-out); stroke-width: 1.6; }
.chart__in { stroke: var(--stage-fg); stroke-width: 1.6; }
.chart__cursor, .chart__dot { display: none; }
.chart__label {
  position: absolute;
  font-size: 13px; line-height: 1.2; white-space: nowrap;
  color: var(--stage-soft);
}
.chart__label--peak { left: 50.5%; top: 16.25%; transform: translate(-50%, calc(-100% - 10px)); color: var(--stage-out); font: 400 16px/1 var(--serif); transition: opacity .6s var(--ease-out); }
.chart__label--out { right: 0; top: 55.65%; transform: translate(0, calc(-100% - 16px)); }
.chart__label--in { left: 0; top: 78.125%; transform: translate(0, 10px); }
.chart__axis {
  position: absolute; left: 0; right: 0; bottom: 0; height: 32px;
  border-top: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  font-variant-numeric: tabular-nums;
}
.tick {
  position: absolute; top: 0; left: calc(var(--x) * 100%);
  transform: translateX(-50%);
  padding-top: 12px;
  font-size: 13px; line-height: 1; white-space: nowrap;
  color: var(--stage-soft);
}
.tick::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 1px; height: 5px; background: currentColor; opacity: .6;
}
.tick--label::before { height: 8px; opacity: .9; }

/* ---------- the day: pinned stage (JS + motion allowed + tall enough screen) ---------- */

@media (min-height: 540px) {
  .motion .day { padding: 0; }
  .motion .day__track {
    position: relative;
    height: calc(100svh + (var(--n) - 1) * 88svh);
    background: var(--stage-bg);
  }
  .motion .day__stage {
    --media-left: calc(var(--g) + (100% - var(--g)) * 5 / 13);
    --chart-h: clamp(160px, 25svh, 250px);
    --text-w: calc(var(--media-left) - var(--g) - clamp(54px, 5.4vw, 100px));
    --clock-size: clamp(76px, 9.4vw, 170px);
    --clock-top: clamp(170px, 26svh, 290px);
    position: sticky; top: 0;
    display: block;
    height: 100svh;
    overflow: hidden;
    background: var(--stage-bg);
    color: var(--stage-fg);
  }
  .motion .day__head { position: absolute; left: var(--g); top: clamp(44px, 8svh, 96px); width: var(--text-w); }
  .motion .day__title { font-size: clamp(22px, 1.9vw, 32px); }
  .motion .day__intro { margin-top: 10px; max-width: 30em; font-size: 15px; line-height: 1.65; color: var(--stage-soft); }

  .motion .clock {
    display: flex; align-items: baseline;
    position: absolute; left: var(--g); top: var(--clock-top);
    margin-left: -.04em;
    font: 400 var(--clock-size)/1 var(--serif);
    letter-spacing: 0;
  }
  .clock__d { display: inline-block; width: .6em; text-align: center; }
  .clock__c { display: inline-block; width: .32em; text-align: center; transform: translateY(-.06em); }

  .motion .readings {
    display: flex; gap: clamp(28px, 3vw, 56px);
    position: absolute; left: var(--g); bottom: calc(var(--chart-h) + clamp(18px, 3.5svh, 40px));
  }
  .readings__item { display: flex; flex-direction: column; gap: 4px; }
  .readings__label { font-size: 14px; line-height: 1.3; color: var(--stage-soft); }
  .readings__label::before {
    content: ""; display: inline-block; width: 16px; height: 0; margin-right: 8px; vertical-align: .3em;
    border-top: 2px solid var(--stage-out);
  }
  .readings__item--in .readings__label::before { border-top-color: var(--stage-fg); }
  .readings__value { font: 400 clamp(26px, 2.3vw, 38px)/1 var(--serif); font-variant-numeric: tabular-nums; }
  .readings__value [data-out] { display: inline-block; min-width: 1.05em; }

  .motion .day__note { position: absolute; left: var(--media-left); bottom: var(--chart-h); z-index: 3; padding: 5px 10px 6px; background: rgba(236, 235, 230, .92); color: var(--ink); font-size: 13px; }

  .motion .moments { position: absolute; inset: 0; display: block; }
  .motion .moment { position: absolute; inset: 0; display: block; }
  .motion .moment__photo {
    position: absolute; left: var(--media-left); right: 0; top: 0; bottom: var(--chart-h);
    aspect-ratio: auto;
    opacity: 0;
    background: var(--shadow);
  }
  .motion .moment__photo img { transform: scale(1.03); transform-origin: 55% 50%; will-change: transform; }
  .motion .moment__room {
    position: absolute; left: calc(var(--media-left) - 32px); top: clamp(28px, 5svh, 56px);
    margin: 0; opacity: 0; color: var(--stage-soft);
  }
  .motion .moment__text {
    position: absolute; left: var(--g); width: var(--text-w);
    top: calc(var(--clock-top) + var(--clock-size) + clamp(18px, 3svh, 36px));
    padding: 0;
    opacity: 0;
    will-change: transform, opacity;
  }
  .motion .moment:first-child .moment__photo,
  .motion .moment:first-child .moment__text,
  .motion .moment:first-child .moment__room { opacity: 1; }
  .motion .moment__line { font-size: clamp(19px, 1.6vw, 26px); }

  .motion .chart {
    position: absolute; left: var(--g); right: var(--g); bottom: 0;
    height: var(--chart-h); margin: 0;
  }
  .motion .chart__plot { top: clamp(22px, 4svh, 40px); bottom: 48px; }
  .motion .chart__axis { bottom: 16px; }
  .motion .chart__cursor {
    display: block; position: absolute; top: -8px; bottom: 0;
    left: calc(var(--cx, 0) * 100%); width: 1px;
    background: currentColor; opacity: .22;
  }
  .motion .chart__dot {
    display: block; position: absolute;
    width: 9px; height: 9px; border-radius: 50%;
    left: calc(var(--cx, 0) * 100%);
    transform: translate(-50%, -50%);
  }
  .motion .chart__dot--out { top: calc(var(--cy, .669) * 100%); background: var(--stage-out); }
  .motion .chart__dot--in { top: 78.125%; background: var(--stage-fg); }
  .motion .chart__label--peak { opacity: 0; }
  .motion .chart__label--in, .motion .chart__label--out { display: none; }
  .motion .chart__label--peak.is-on { opacity: 1; }
}

/* ---------- what you won't notice ---------- */

.absent {
  display: grid; grid-template-columns: var(--cols);
  row-gap: clamp(56px, 7vw, 120px);
  padding: clamp(110px, 12vw, 210px) 0 clamp(80px, 9vw, 150px);
}
.absent__head { grid-column: 2; grid-row: 1; align-self: end; padding-right: clamp(16px, 2vw, 32px); }
.absent__intro { max-width: 22em; }
.absent__photo { grid-column: 4; grid-row: 1; }
.absent__photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: 60% 60%; }
.absent__list {
  grid-column: 2 / 5; margin: 0 var(--g) 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 4.5vw, 88px);
}
.absence p { max-width: 24em; }
.draw { width: 92px; height: 92px; margin-bottom: 26px; }
.draw path { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.absence__title { font: 500 clamp(20px, 1.6vw, 24px)/1.3 var(--serif); margin-bottom: 10px; }

/* ---------- the panel ---------- */

.panel {
  --finish: #D9D6CB;
  --fin: rgba(35, 36, 31, .5);
  display: grid; grid-template-columns: var(--cols);
  padding: clamp(80px, 9vw, 160px) 0;
}
.panel:has(#finish-tatami:checked) { --finish: var(--tatami); --fin: rgba(35, 36, 31, .55); }
.panel:has(#finish-umber:checked) { --finish: var(--umber); --fin: rgba(236, 235, 230, .55); }

.panel__text { grid-column: 2; padding-right: clamp(16px, 2vw, 32px); }
.panel__lede { max-width: 26em; }

.specs { margin-top: 36px; display: grid; gap: 14px; }
.specs__row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); align-items: baseline; gap: 12px; }
.specs dt { font-size: 14px; color: var(--ink-soft); }
.specs dd { font: 400 clamp(19px, 1.5vw, 22px)/1.35 var(--serif); font-variant-numeric: tabular-nums; }
.specs + .small { margin-top: 14px; }

.finish { margin: 34px 0 0; padding: 0; border: 0; min-width: 0; }
.finish__legend { padding: 0; margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); }
.finish__options { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.finish__input, .days__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.finish__label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 16px; }
.finish__chip { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(35, 36, 31, .4); transition: box-shadow .35s var(--ease-out); }
.finish__chip--chalk { background: #D9D6CB; }
.finish__chip--tatami { background: var(--tatami); }
.finish__chip--umber { background: var(--umber); }
.finish__input:checked + .finish__label .finish__chip { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--ink); }
.finish__input:focus-visible + .finish__label { outline: 2px solid var(--umber); outline-offset: 4px; }

.panel__notes { margin-top: 56px; display: grid; gap: 36px; }
.note__title { font: 500 clamp(20px, 1.6vw, 24px)/1.3 var(--serif); margin-bottom: 8px; }
.note p { max-width: 26em; }

.panel__figure { grid-column: 4; margin-right: var(--g); display: flex; flex-direction: column; align-items: center; align-self: start; }
.panel-drawing { width: 100%; max-width: 480px; height: auto; max-height: 84svh; overflow: visible; }
.panel__figure .caption { max-width: 34em; text-align: left; align-self: center; }

.pd-line, .pd-dim, .pd-fins { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pd-line { stroke: var(--ink); stroke-width: 1.2; }
.pd-line--strong { stroke-width: 1.6; }
.pd-dim { stroke: var(--ink-soft); stroke-width: 1; }
.pd-fins { stroke: var(--fin); stroke-width: 1; transition: stroke .5s var(--ease-out); }
.pd-face { fill: var(--finish); transition: fill .5s var(--ease-out); }
.pd-pipe { fill: none; stroke: var(--umber); stroke-width: 1.5; stroke-dasharray: 6 5; }
.pd-fitting { fill: var(--umber); }
.pd-hatch path { stroke: var(--ink-soft); stroke-width: .8; opacity: .55; }
.pd-num { font: 400 17px var(--sans); fill: var(--ink); font-variant-numeric: tabular-nums; }
.pd-note { font: 400 13px var(--sans); fill: var(--ink-soft); }
.pd-view { font: 400 16px var(--serif); fill: var(--ink-soft); }

/* ---------- visit ---------- */

.visit {
  display: grid; grid-template-columns: var(--cols);
  padding: clamp(80px, 9vw, 160px) 0 clamp(100px, 12vw, 200px);
}
.visit__text { grid-column: 2; padding-right: clamp(16px, 2vw, 32px); }
.visit__lede { max-width: 26em; }
.visit__photo { grid-column: 4; align-self: start; }
.visit__photo img { width: 100%; aspect-ratio: 4 / 5; max-height: min(94svh, 1100px); object-fit: cover; object-position: 44% 60%; }

.place { margin-top: 34px; display: grid; gap: 12px; }
.place__row { display: grid; grid-template-columns: 5.6em minmax(0, 1fr); gap: 12px; align-items: baseline; }
.place dt { font-size: 14px; color: var(--ink-soft); }
.place dd { font-size: 17px; }

.booking { margin-top: 48px; display: grid; gap: 28px; max-width: 30rem; }
.field { margin: 0; padding: 0; border: 0; min-width: 0; }
.field__label { display: block; padding: 0; margin-bottom: 4px; font-size: 14px; color: var(--ink-soft); }
.field__input {
  width: 100%; min-height: 48px; padding: 8px 0;
  font: 400 18px/1.4 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-soft); border-radius: 0;
  transition: border-color .3s var(--ease-out);
}
.field__input:hover { border-bottom-color: var(--ink); }
.field__input:focus-visible { outline: 2px solid var(--umber); outline-offset: 4px; }
.field__input[aria-invalid="true"] { border-bottom: 2px solid var(--umber); }
.field__error { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--umber); }

.days__options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.days__label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; min-height: 48px; padding: 0 10px;
  border: 1px solid var(--line);
  font: 400 17px/1 var(--serif);
  cursor: pointer;
  transition: background-color .35s var(--ease-out), color .35s var(--ease-out), border-color .35s var(--ease-out);
}
.days__label:hover { border-color: var(--ink); }
.days__input:checked + .days__label { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.days__input:focus-visible + .days__label { outline: 2px solid var(--umber); outline-offset: 3px; }

.booking__submit { justify-self: start; margin-top: 6px; }
.booking__hint { margin-top: -10px; }

.booked { margin-top: 48px; max-width: 30rem; }
.booked:focus { outline: none; }
.booked__title { font: 400 clamp(26px, 2.4vw, 34px)/1.2 var(--serif); margin-bottom: 12px; }
.linkish {
  margin-top: 14px; padding: 0; min-height: 44px;
  background: none; border: 0; color: inherit; cursor: pointer;
  font: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.linkish:hover { color: var(--umber); }

/* ---------- footer ---------- */

.site-foot { background: var(--tatami); color: var(--ink); padding: clamp(64px, 8vw, 128px) var(--g) 36px; }
.site-foot__mark { font: 400 clamp(92px, 17vw, 300px)/.8 var(--serif); letter-spacing: .06em; margin: 0 0 clamp(40px, 5vw, 72px) -.05em; }
.site-foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px clamp(24px, 4vw, 72px); max-width: 76rem; font-size: 15px; line-height: 1.65; }
.site-foot__small { margin-top: 48px; font-size: 13px; }
.site-foot a:hover { color: var(--ink); text-decoration-thickness: 2px; }
.site-foot :focus-visible { outline-color: var(--ink); }

/* ---------- motion: hidden-before-reveal, only with JS + motion allowed ---------- */

@keyframes gln-show { to { opacity: 1; transform: none; } }
@keyframes gln-draw { to { stroke-dashoffset: 0; } }

/* Hero intro: pure CSS, so it starts at first paint and waits for neither the fonts nor the CDN.
   The photo slides open like a screen; the heading lines follow while it is still moving. */
@keyframes gln-mask { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes gln-settle { from { transform: scale(1.1); } to { transform: none; } }
@keyframes gln-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes gln-fade { from { opacity: 0; } to { opacity: 1; } }
.motion .hero__mask { animation: gln-mask 1.2s cubic-bezier(.6, .02, .12, 1) .06s both; }
.motion .hero__img { animation: gln-settle 1.4s cubic-bezier(.16, 1, .3, 1) .06s both; }
/* The heading lines wait for Shippori (an inline script adds .fonts-go when it has loaded, or after
   350 ms at most), so they always rise in their own face; the mask does not wait. */
.motion .hero__title .line__in { opacity: 0; }
.motion.fonts-go .hero__title .line__in { animation: gln-rise .7s cubic-bezier(.22, 1, .36, 1) .04s both; }
.motion.fonts-go .hero__title .line:nth-child(2) .line__in { animation-delay: .13s; }
.motion.fonts-go .hero__title .line:nth-child(3) .line__in { animation-delay: .22s; }
.motion .hero__lede { animation: gln-rise .7s cubic-bezier(.22, 1, .36, 1) .5s both; }
.motion .hero__cta { animation: gln-rise .7s cubic-bezier(.22, 1, .36, 1) .6s both; }
.motion .site-head { animation: gln-fade .7s ease-out .35s both; }
.motion .hero__stamp, .motion .hero__tag { animation: gln-fade .6s ease-out .85s both; }

/* If the script never runs, these fallbacks reveal everything below the hero after 3.6 s. */
.motion [data-reveal] { opacity: 0; transform: translateY(14px); animation: gln-show .01s linear 3.6s forwards; }
.motion .draw path,
.motion .panel-drawing [pathLength] { stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: gln-draw .01s linear 3.6s forwards; }
.motion .panel-drawing :is(.pd-face, .pd-pipe, .pd-fitting, .pd-hatch, text) { opacity: 0; animation: gln-show .01s linear 3.6s forwards; }

/* main.js adds .ready once it owns the reveals */
.motion.ready [data-reveal],
.motion.ready .draw path,
.motion.ready .panel-drawing [pathLength],
.motion.ready .panel-drawing :is(.pd-face, .pd-pipe, .pd-fitting, .pd-hatch, text) { animation: none; }

/* ---------- phones ---------- */

@media (max-width: 767.98px) {
  :root { --cols: var(--g) minmax(0, 1fr) var(--g); }
  body { font-size: 16px; line-height: 1.7; }

  .site-head { width: 100%; padding: 12px var(--g) 0; }
  .wordmark { font-size: 19px; }
  .site-nav { gap: 16px; }
  .site-nav a { font-size: 15px; }

  .hero { min-height: 0; padding-top: 68px; grid-template-columns: var(--cols); grid-template-rows: auto auto; }
  .hero__media { grid-column: 1 / -1; grid-row: 1; height: 47svh; min-height: 280px; }
  .hero__stamp { display: none; }
  .hero__text { grid-column: 2; grid-row: 2; padding: 26px 0 64px; }
  .hero__title { font-size: clamp(32px, 10vw, 50px); }
  .hero__title .line { white-space: normal; }
  .hero__lede { font-size: 16px; margin-top: 18px; }
  .hero__cta { margin-top: 22px; }

  .day__head, .day__note, .moments, .chart { grid-column: 2; }
  .moments { grid-column: 1 / -1; }
  .moment { grid-template-columns: var(--cols); row-gap: 20px; }
  .moment__photo { grid-column: 1 / -1; grid-row: 1; }
  .moment__room { grid-column: 2; grid-row: 2; justify-self: end; align-self: start; margin: 0; }
  .moment__text { grid-column: 2; grid-row: 2; padding-right: 36px; }
  .moment__time { font-size: 56px; margin-bottom: 14px; }
  .moment__line { font-size: 19px; }
  .chart { margin-right: 0; height: 180px; }

  .absent__head, .absent__list { grid-column: 2; }
  .absent__head { grid-row: 1; padding: 0; }
  .absent__photo { grid-column: 1 / -1; grid-row: 2; }
  .absent__photo .caption { padding: 0 var(--g); }
  .absent__list { grid-row: 3; margin: 0; grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .draw { width: 80px; height: 80px; margin-bottom: 18px; }

  .panel__text, .panel__figure { grid-column: 2; }
  .panel__text { padding: 0; }
  .panel__figure { grid-row: 2; margin: 64px 0 0; }
  .panel-drawing { max-height: none; }

  .visit__text { grid-column: 2; grid-row: 2; padding: 0; }
  .visit__photo { grid-column: 1 / -1; grid-row: 1; margin-bottom: 48px; }
  .visit__photo img { aspect-ratio: 4 / 3; }
  .visit__photo .caption { padding: 0 var(--g); }

  .site-foot__cols { grid-template-columns: minmax(0, 1fr); font-size: 16px; }
}

@media (max-width: 767.98px) and (min-height: 540px) {
  .motion .day__stage {
    --photo-h: 40svh;
    --chart-h: 164px;
    --clock-size: 60px;
    --clock-top: calc(var(--photo-h) + 50px);
    --text-w: auto;
  }
  .motion .moment__photo { left: 0; right: 0; top: 0; bottom: auto; height: var(--photo-h); }
  .motion .day__head { top: calc(var(--photo-h) + 18px); right: var(--g); width: auto; }
  .motion .day__title { font-size: 17px; }
  .motion .day__intro { display: none; }
  .motion .moment__room { left: auto; right: var(--g); top: calc(var(--photo-h) + 20px); }
  .motion .moment__text { right: calc(var(--g) + 30px); width: auto; top: calc(var(--clock-top) + var(--clock-size) + 14px); }
  .motion .moment__line { font-size: 17px; line-height: 1.6; }
  .motion .readings { bottom: calc(var(--chart-h) + 8px); gap: 28px; }
  .readings__item { flex-direction: row; align-items: baseline; gap: 8px; }
  .readings__value { font-size: 24px; }
  .motion .day__note { left: 0; bottom: auto; top: calc(var(--photo-h) - 30px); }
  .motion .chart { left: var(--g); right: var(--g); }
  .motion .chart__plot { top: 14px; bottom: 40px; }
  .motion .chart__axis { bottom: 10px; }
}

@media (min-width: 768px) and (max-width: 1080px) {
  .site-nav { gap: 14px; }
  .site-nav a { font-size: 14px; }
  .absent__list { grid-template-columns: minmax(0, 1fr); max-width: 40rem; }
  .absent__head { grid-column: 2 / 4; }
  .panel__text { grid-column: 2 / 5; max-width: 40rem; padding-right: var(--g); }
  .panel__figure { grid-column: 2 / 5; grid-row: 2; margin: 72px var(--g) 0 0; }
  .visit__photo { grid-column: 3 / -1; grid-row: 1; margin-bottom: 56px; }
  .visit__photo img { aspect-ratio: 3 / 2; }
  .visit__text { grid-column: 2 / 5; grid-row: 2; max-width: 40rem; padding-right: var(--g); }
  .site-foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- large screens: 1441 to 2560 px ----------
   Every value below is its 1440 value times a unit that is exactly 1px at 1440:
   --u  layout, display type, spacing    1px at 1440, 1.5px at 2560
   --ut body text, labels, captions      1px at 1440, 1.25px at 2560 (17px body becomes 21px)
   --u2 the absence drawings             1px at 1440, 2px at 2560                          */
@media (min-width: 1441px) {
  :root {
    --u: min(1.5px, calc(1px + (100vw - 1440px) / 2240));
    --ut: min(1.25px, calc(1px + (100vw - 1440px) / 4480));
    --u2: min(2px, calc(1px + (100vw - 1440px) / 1120));
    --g: calc(79.2 * var(--u));
  }
  body { font-size: calc(17 * var(--ut)); }

  .section-title { font-size: calc(50.4 * var(--u)); margin-bottom: calc(20 * var(--u)); }
  .small { font-size: calc(14 * var(--ut)); }
  .caption { font-size: calc(14 * var(--ut)); margin-top: calc(14 * var(--u)); }
  .tag { font-size: calc(13 * var(--ut)); padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)); }
  .button { min-height: calc(50 * var(--u)); padding: 0 calc(28 * var(--u)); font-size: calc(16 * var(--ut)); }

  .site-head { padding-top: calc(22 * var(--u)); gap: calc(16 * var(--u)); }
  .wordmark { font-size: calc(21 * var(--u)); min-height: calc(44 * var(--u)); }
  .site-nav { gap: calc(4 * var(--u)) calc(22 * var(--u)); }
  .site-nav a { font-size: calc(15 * var(--ut)); min-height: calc(44 * var(--u)); }

  .hero__stamp { font-size: calc(15 * var(--ut)); margin: clamp(120px, 17svh, calc(170 * var(--u))) calc(20 * var(--u)) 0 0; }
  .hero__text { padding: 0 calc(25.9 * var(--u)) clamp(56px, 11svh, calc(120 * var(--u))) 0; }
  .hero__title { font-size: min(4.3vw, calc(70 * var(--u))); }
  .hero__lede { font-size: calc(17 * var(--ut)); margin-top: clamp(22px, 3svh, calc(34 * var(--u))); }
  .hero__cta { margin-top: clamp(26px, 4svh, calc(40 * var(--u))); }

  /* the day, stacked */
  .day { padding: calc(158.4 * var(--u)) 0 calc(115.2 * var(--u)); }
  .day__stage { row-gap: calc(86.4 * var(--u)); }
  .day__title { font-size: calc(50.4 * var(--u)); }
  .day__intro { margin-top: calc(16 * var(--u)); }
  .day__note { font-size: calc(14 * var(--ut)); }
  .moments { gap: calc(115.2 * var(--u)); }
  .moment__room { font-size: calc(15 * var(--ut)); margin-right: calc(16 * var(--u)); }
  .moment__text { padding-right: calc(28.8 * var(--u)); }
  .moment__time { font-size: calc(100.8 * var(--u)); margin-bottom: calc(22 * var(--u)); }
  .moment__line { font-size: calc(22.3 * var(--u)); }
  .moment__temps { font-size: calc(15 * var(--ut)); margin-top: calc(14 * var(--u)); }
  .chart { height: calc(220 * var(--u)); }
  .chart__plot { top: calc(18 * var(--u)); bottom: calc(44 * var(--u)); }
  .chart__label { font-size: calc(13 * var(--ut)); }
  .chart__label--peak { font-size: calc(16 * var(--u)); }
  .chart__axis { height: calc(32 * var(--u)); }
  .tick { font-size: calc(13 * var(--ut)); padding-top: calc(12 * var(--u)); }
  .tick::before { height: calc(5 * var(--u)); }
  .tick--label::before { height: calc(8 * var(--u)); }
  .chart__out, .chart__in { stroke-width: calc(1.6 * var(--u)); }

  /* the day, pinned */
  @media (min-height: 540px) {
    .motion .day__stage {
      --chart-h: clamp(160px, 25svh, calc(250 * var(--u)));
      --text-w: calc(var(--media-left) - var(--g) - 77.8 * var(--u));
      --clock-size: min(9.4vw, calc(135.4 * var(--u)));
      --clock-top: clamp(170px, 26svh, calc(290 * var(--u)));
    }
    .motion .day__head { top: clamp(44px, 8svh, calc(96 * var(--u))); }
    .motion .day__title { font-size: calc(27.4 * var(--u)); }
    .motion .day__intro { font-size: calc(15 * var(--ut)); margin-top: calc(10 * var(--u)); }
    .motion .readings { gap: calc(43.2 * var(--u)); bottom: calc(var(--chart-h) + clamp(18px, 3.5svh, calc(40 * var(--u)))); }
    .readings__item { gap: calc(4 * var(--u)); }
    .readings__label { font-size: calc(14 * var(--ut)); }
    .readings__label::before { width: calc(16 * var(--u)); margin-right: calc(8 * var(--u)); }
    .readings__value { font-size: calc(33.1 * var(--u)); }
    .motion .day__note { font-size: calc(13 * var(--ut)); padding: calc(5 * var(--u)) calc(10 * var(--u)) calc(6 * var(--u)); }
    .motion .moment__room { left: calc(var(--media-left) - 32 * var(--u)); top: clamp(28px, 5svh, calc(56 * var(--u))); }
    .motion .moment__text { top: calc(var(--clock-top) + var(--clock-size) + clamp(18px, 3svh, calc(36 * var(--u)))); }
    .motion .moment__line { font-size: calc(23 * var(--u)); }
    .motion .chart__plot { top: clamp(22px, 4svh, calc(40 * var(--u))); bottom: calc(48 * var(--u)); }
    .motion .chart__axis { bottom: calc(16 * var(--u)); }
    .motion .chart__cursor { top: calc(-8 * var(--u)); }
    .motion .chart__dot { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
  }

  /* what you won't notice */
  .absent { row-gap: calc(100.8 * var(--u)); padding: calc(172.8 * var(--u)) 0 calc(129.6 * var(--u)); }
  .absent__head { padding-right: calc(28.8 * var(--u)); }
  .absent__list { gap: calc(48 * var(--u)) calc(64.8 * var(--u)); }
  .draw { width: calc(92 * var(--u2)); height: calc(92 * var(--u2)); margin-bottom: calc(26 * var(--u)); }
  .absence__title { font-size: calc(23 * var(--u)); margin-bottom: calc(10 * var(--u)); }

  /* the panel */
  .panel { padding: calc(129.6 * var(--u)) 0; }
  .panel__text { padding-right: calc(28.8 * var(--u)); }
  .specs { margin-top: calc(36 * var(--u)); gap: calc(14 * var(--u)); }
  .specs__row { gap: calc(12 * var(--u)); }
  .specs dt { font-size: calc(14 * var(--ut)); }
  .specs dd { font-size: calc(21.6 * var(--u)); }
  .specs + .small { margin-top: calc(14 * var(--u)); }
  .finish { margin-top: calc(34 * var(--u)); }
  .finish__legend { font-size: calc(14 * var(--ut)); margin-bottom: calc(8 * var(--u)); }
  .finish__options { gap: calc(4 * var(--u)) calc(22 * var(--u)); }
  .finish__label { gap: calc(10 * var(--u)); min-height: calc(44 * var(--u)); font-size: calc(16 * var(--ut)); }
  .finish__chip { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
  .panel__notes { margin-top: calc(56 * var(--u)); gap: calc(36 * var(--u)); }
  .note__title { font-size: calc(23 * var(--u)); margin-bottom: calc(8 * var(--u)); }
  .panel-drawing { max-width: calc(480 * var(--u)); }

  /* visit */
  .visit { padding: calc(129.6 * var(--u)) 0 calc(172.8 * var(--u)); }
  .visit__text { padding-right: calc(28.8 * var(--u)); }
  .visit__photo img { max-height: min(94svh, calc(1100 * var(--u))); }
  .place { margin-top: calc(34 * var(--u)); gap: calc(12 * var(--u)); }
  .place__row { gap: calc(12 * var(--u)); }
  .place dt { font-size: calc(14 * var(--ut)); }
  .place dd { font-size: calc(17 * var(--ut)); }
  .booking { margin-top: calc(48 * var(--u)); gap: calc(28 * var(--u)); max-width: calc(480 * var(--u)); }
  .field__label { font-size: calc(14 * var(--ut)); margin-bottom: calc(4 * var(--u)); }
  .field__input { min-height: calc(48 * var(--u)); padding: calc(8 * var(--u)) 0; font-size: calc(18 * var(--ut)); }
  .field__error { font-size: calc(14 * var(--ut)); }
  .days__options { gap: calc(8 * var(--u)); margin-top: calc(6 * var(--u)); }
  .days__label { min-width: calc(52 * var(--u)); min-height: calc(48 * var(--u)); padding: 0 calc(10 * var(--u)); font-size: calc(17 * var(--ut)); }
  .booking__hint { margin-top: calc(-10 * var(--u)); }
  .booked { margin-top: calc(48 * var(--u)); max-width: calc(480 * var(--u)); }
  .booked__title { font-size: calc(34 * var(--u)); }
  .linkish { min-height: calc(44 * var(--u)); }

  /* footer */
  .site-foot { padding: calc(115.2 * var(--u)) var(--g) calc(36 * var(--u)); }
  .site-foot__mark { font-size: calc(244.8 * var(--u)); margin-bottom: calc(72 * var(--u)); }
  .site-foot__cols { gap: calc(20 * var(--u)) calc(57.6 * var(--u)); max-width: calc(1216 * var(--u)); font-size: calc(15 * var(--ut)); }
  .site-foot__small { margin-top: calc(48 * var(--u)); font-size: calc(13 * var(--ut)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ---------- Chinese (2026-09-29) ----------
   Noto Serif SC / Noto Sans SC, subset to this page's Chinese strings (fonts/subset-cjk.py). They sit after the Latin
   faces, whose unicode-range stops at Latin, so English letters keep Shippori and Zen Kaku; the CJK faces are only
   in the font stacks while the page is in Chinese, so English visitors never download them. */
@font-face { font-family: "GLN Noto Serif SC"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/noto-serif-sc-gln.woff2") format("woff2"); }
@font-face { font-family: "GLN Noto Sans SC"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("fonts/noto-sans-sc-gln.woff2") format("woff2"); }
:root:lang(zh) {
  --serif: "Shippori Mincho B1", "GLN Noto Serif SC", "Songti SC", "SimSun", "GLN Serif Fallback", serif;
  --sans: "Zen Kaku Gothic New", "GLN Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Source Han Sans SC", "GLN Sans Fallback", sans-serif;
}

.lang { display: flex; gap: 2px; margin-left: auto; }
.lang__btn {
  min-width: 44px; min-height: 44px; padding: 0 8px; border: 0; background: none; color: inherit; cursor: pointer;
  font: 400 14px/1 var(--sans); letter-spacing: .02em; opacity: .62;
  text-decoration: none; text-underline-offset: .35em;
}
.lang__btn[lang="zh-CN"] { font-family: "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif; }
.lang__btn:hover { opacity: 1; }
.lang__btn[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-decoration-thickness: 1px; }
.lang__btn:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.site-head .site-nav { margin-left: auto; }
.site-head .lang { margin-left: 0; }
@media (max-width: 767.98px) { .site-nav { gap: 12px; } .lang__btn { padding: 0 4px; min-width: 40px; } }
@media (min-width: 1441px) { .lang__btn { font-size: calc(14 * var(--ut)); min-height: calc(44 * var(--u)); min-width: calc(44 * var(--u)); } }

:lang(zh) body { line-height: 1.85; }
:lang(zh) .hero__title, :lang(zh) .section-title, :lang(zh) .day__title { letter-spacing: 0; line-height: 1.3; }
:lang(zh) .hero__title { font-size: clamp(30px, 3.5vw, 72px); }
:lang(zh) p, :lang(zh) li, :lang(zh) dd, :lang(zh) figcaption { letter-spacing: 0; text-wrap: pretty; }
:lang(zh) h1, :lang(zh) h2, :lang(zh) h3 { text-wrap: balance; }
:lang(zh) .hero__stamp, :lang(zh) .moment__room, :lang(zh) .tag { letter-spacing: .04em; }
:lang(zh) em, :lang(zh) i { font-style: normal; }
@media (max-width: 767.98px) { :lang(zh) .days__options { gap: 6px; } :lang(zh) .days__label { min-width: 44px; padding: 0 6px; font-size: 15px; } }