/* Fukuoka itinerary preview — The dark room
   Palette proportions from the deal; colours taken from Hakata winter night
   (brown-black pavement, paper ticket, yatai lantern), not forest lime. */

:root {
  --bg: #140e0c;
  --surface: #241a16;
  --ink: #e6e4e1;
  --muted: #c4b8ac;
  --accent: #e8a35a;
  --accent-ink: #140e0c;
  --field-1: #000000;
  --field-1-ink: #e6e4e1;
  --field-2: #d2cdc6;
  --field-2-ink: #140e0c;
  --strip-a: #2e2420;
  --strip-a-ink: #e6e4e1;
  --strip-b: #d2cdc6;
  --strip-b-ink: #140e0c;
  --strip-c: #1a1412;
  --strip-c-ink: #e6e4e1;
  --strip-d: #c4bfb6;
  --strip-d-ink: #140e0c;

  --font-display: "Work Sans", "Noto Sans TC", sans-serif;
  --font-text: "Work Sans", "Noto Sans TC", sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(4.5rem, 10vw, 11rem);

  --margin: clamp(1.25rem, 2.4vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --section: clamp(7.5rem, 12vw, 13rem);
  --radius: 0px;
}

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
}

h1, h2, h3, .display {
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
}

/* ---------- hero: card over a dim room ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.7) contrast(1.05);
  transform: scale(1.08);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-media img.is-live {
    animation: photo-drift 28s var(--ease-soft) alternate infinite;
  }
}
@keyframes photo-drift {
  from { transform: scale(1.08); }
  to { transform: scale(1.16) translate(-1.2%, 0.8%); }
}

.hero-stage {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: var(--margin);
}

.ticket {
  background: var(--field-2);
  color: var(--field-2-ink);
  width: min(55vw, 46rem);
  min-height: 62svh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transform-origin: left bottom;
}
.ticket h1 {
  font-size: var(--step-head);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--field-2-ink);
  max-width: 8ch;
  text-wrap: balance;
  white-space: nowrap;
}
.ticket-lead {
  margin-top: 1.25rem;
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  max-width: 30ch;
}

.ticket-facts {
  margin-top: 2rem;
  font-size: var(--step-lead);
  font-weight: 300;
  line-height: 1.15;
  max-width: 22ch;
}
.ticket-facts p + p { margin-top: 0.35em; }

.ticket-support {
  margin-top: 1.5rem;
  font-size: var(--step-body);
  font-weight: 400;
  line-height: 1.55;
  max-width: 30ch;
}

.ticket-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}
.ticket-credit {
  font-size: var(--step-small);
  max-width: 18ch;
  line-height: 1.4;
  color: var(--field-2-ink);
}
.ticket-link {
  font-size: var(--step-small);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.85rem 1.4rem;
  text-decoration: none;
  font-weight: 500;
  font-size: var(--step-body);
  border-radius: var(--radius);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }

.ticket.is-stub {
  /* JS adds; reduced motion skips */
}

@media (max-width: 47.99em) {
  .ticket {
    width: 100%;
    min-height: 70svh;
    padding: 1.5rem;
  }
  .ticket h1 {
    font-size: var(--step-head);
    line-height: 1;
    max-width: none;
    white-space: nowrap;
  }
  .ticket-facts {
    font-size: var(--step-lead);
    max-width: none;
  }
  .ticket-foot { flex-direction: column; align-items: stretch; }
  .ticket-foot .btn { width: 100%; }
}

/* ---------- intro: sentence then three photographs, one screen ---------- */
.intro {
  position: relative;
  padding: var(--section) var(--margin);
}
.intro-line {
  font-size: var(--step-lead);
  line-height: 1.3;
  font-weight: 300;
  max-width: 28ch;
  margin-bottom: 2.5rem;
}
.intro-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr 1fr;
  gap: var(--gutter);
  align-items: end;
}
.intro-row figure { margin: 0; }
.intro-row img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: brightness(0.72) contrast(1.08);
}
.intro-row figure:nth-child(2) img { aspect-ratio: 4 / 3; }
.intro-row figure:nth-child(3) img { aspect-ratio: 1; }

@media (max-width: 47.99em) {
  .intro { padding-block: calc(var(--section) * 0.7); }
  .intro-line { font-size: var(--step-lead); max-width: none; }
  .intro-row {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .intro-row figure:nth-child(3) {
    grid-column: 1 / -1;
  }
  .intro-row figure:nth-child(3) img { aspect-ratio: 16 / 9; }
}

/* ---------- days: sticky photograph, active list ---------- */
.days {
  position: relative;
  padding-block: var(--section);
  padding-inline: var(--margin);
}
.days-layout {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
}
.days-photo {
  grid-column: 1 / 6;
  position: sticky;
  top: 12vh;
}
.days-photo-frame {
  position: relative;
  width: 34vw;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface);
}
.days-photo-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 300ms var(--ease-out);
  filter: brightness(0.72) contrast(1.08);
}
.days:has(#d1:checked) .days-photo-frame img[data-day="1"],
.days:has(#d2:checked) .days-photo-frame img[data-day="2"],
.days:has(#d3:checked) .days-photo-frame img[data-day="3"],
.days:has(#d4:checked) .days-photo-frame img[data-day="4"],
.days:has(#d5:checked) .days-photo-frame img[data-day="5"],
.days:has(#d6:checked) .days-photo-frame img[data-day="6"] {
  opacity: 1;
}

.days-list {
  grid-column: 7 / 13;
}
.days-list h2 {
  font-size: var(--step-head);
  margin-bottom: 3rem;
  font-weight: 300;
}

.days input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.day-switch {
  display: flex;
  flex-direction: column;
}
.day-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  cursor: pointer;
  padding-block: 0.85rem;
  flex-wrap: wrap;
}
.day-panels { margin-top: 1.5rem; }
.day-row .name {
  font-size: var(--step-lead);
  font-weight: 400;
  color: var(--muted);
  line-height: 1.2;
}
.day-row .place {
  font-size: var(--step-small);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.day-panel {
  display: none;
  margin-top: 0.85rem;
  max-width: 38ch;
  font-size: var(--step-body);
  line-height: 1.55;
  color: var(--ink);
}
.day-panel h3 {
  font-size: var(--step-body);
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
  margin-bottom: 0.35rem;
}
.day-panel p + h3,
.day-panel ul + h3 { margin-top: 1rem; }
.day-panel ul { padding: 0; list-style: none; }
.day-panel li { margin-top: 0.35rem; }

.days:has(#d1:checked) label[for="d1"] .name,
.days:has(#d2:checked) label[for="d2"] .name,
.days:has(#d3:checked) label[for="d3"] .name,
.days:has(#d4:checked) label[for="d4"] .name,
.days:has(#d5:checked) label[for="d5"] .name,
.days:has(#d6:checked) label[for="d6"] .name {
  color: var(--ink);
  font-weight: 500;
}
.days:has(#d1:checked) .panel-1,
.days:has(#d2:checked) .panel-2,
.days:has(#d3:checked) .panel-3,
.days:has(#d4:checked) .panel-4,
.days:has(#d5:checked) .panel-5,
.days:has(#d6:checked) .panel-6 { display: block; }

@media (max-width: 47.99em) {
  .days { padding-top: 0; }
  .days-layout {
    display: flex;
    flex-direction: column;
  }
  .days-list h2 {
    order: -1;
    position: sticky;
    top: 0;
    z-index: 4;
    margin: 0;
    padding: 0.85rem 0 0.7rem;
    background: var(--bg);
  }
  .days-photo {
    position: sticky;
    top: 3.6rem;
    z-index: 3;
    background: var(--bg);
  }
  .days-photo-frame {
    width: 100%;
    aspect-ratio: 4 / 3;
    height: 32svh;
  }
  .day-row { padding-block: 0.85rem; }
}

/* noscript: all days open */
.no-js .day-panel { display: block; }
.no-js .days-photo-frame img { position: relative; opacity: 1; height: auto; aspect-ratio: 4/5; }
.no-js .days-photo-frame { height: auto; aspect-ratio: auto; display: grid; gap: 0.5rem; }

/* ---------- gallery: photo tiles with label strips ---------- */
.gallery {
  padding-inline: var(--margin);
  padding-block: var(--section);
}
.gallery h2 {
  font-size: var(--step-head);
  margin-bottom: 1rem;
  font-weight: 300;
}
.gallery-note {
  font-size: var(--step-body);
  line-height: 1.55;
  max-width: 46ch;
  margin-bottom: 2.5rem;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.75rem 12px;
}
.tile { display: flex; flex-direction: column; }
.tile img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: brightness(0.75) contrast(1.06);
}
.tile figcaption {
  min-height: 5.5rem;
  padding: 12px;
  font-size: var(--step-small);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.35rem;
}
.tile .row1, .tile .row2, .tile .row3 {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.tile:nth-child(4n+1) figcaption { background: var(--strip-a); color: var(--strip-a-ink); }
.tile:nth-child(4n+2) figcaption { background: var(--strip-b); color: var(--strip-b-ink); }
.tile:nth-child(4n+3) figcaption { background: var(--strip-c); color: var(--strip-c-ink); }
.tile:nth-child(4n+4) figcaption { background: var(--strip-d); color: var(--strip-d-ink); }

@media (max-width: 47.99em) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 8px; }
  .tile .row3 { display: none; }
  .gallery h2 { font-size: var(--step-head); }
}

/* ---------- faq ---------- */
.notes {
  padding-inline: var(--margin);
  padding-bottom: 5rem;
}
.notes-row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-bottom: 3.5rem;
}
.notes-row:last-child { margin-bottom: 0; }
.notes h2,
.notes-q {
  grid-column: 1 / 7;
  font-size: var(--step-head);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  max-width: 16ch;
}
.notes h2 {
  font-weight: 300;
  color: var(--muted);
}
.notes-a {
  grid-column: 8 / 13;
  font-size: var(--step-body);
  line-height: 1.55;
  max-width: 40ch;
}
.notes-a a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 47.99em) {
  .notes-row { display: block; margin-bottom: 3.5rem; }
  .notes h2, .notes-q { font-size: var(--step-head); max-width: none; }
  .notes-a { margin-top: 0.75rem; font-size: var(--step-body); }
}

/* ---------- footer ---------- */
.site-footer {
  position: relative;
  min-height: 0;
  color: var(--ink);
  overflow: hidden;
}
.site-footer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
  filter: brightness(0.55) contrast(1.05);
}
.footer-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding: 2.5rem var(--margin) 2rem;
  min-height: 0;
}
.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  font-size: var(--step-body);
}
.footer-top a {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.footer-links, .footer-meta { max-width: 22rem; }
.footer-links { display: flex; flex-direction: column; gap: 0.4rem; }
.footer-name {
  font-size: var(--step-display);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.85;
  margin: 0;
}
.footer-legal {
  margin-top: 0.75rem;
  font-size: var(--step-small);
  line-height: 1.45;
  max-width: 70ch;
}

@media (max-width: 47.99em) {
  .footer-inner { min-height: 0; gap: 2.5rem; padding-block: 2rem; }
  .footer-top { flex-direction: column; }
  .footer-name { font-size: var(--step-display); }
}

/* ---------- motion entrances ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .enter {
    opacity: 0;
    transform: translateY(24px);
  }
  .js .enter.is-in {
    opacity: 1;
    transform: none;
    transition: opacity 800ms var(--ease-out), transform 800ms var(--ease-out);
  }
  .js .enter.d1 { transition-delay: 0ms; }
  .js .enter.d2 { transition-delay: 80ms; }
  .js .enter.d3 { transition-delay: 160ms; }
}

/* skip link */
.skip {
  position: absolute;
  left: var(--margin);
  top: 0;
  transform: translateY(-120%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.6rem 1rem;
  z-index: 20;
}
.skip:focus { transform: none; }

html, body { overflow-x: clip; }
.notes-a, .footer-legal, .gallery-note, a {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.notes-a, .notes-q, .day-panel { min-width: 0; }
.days-photo-frame { max-width: 100%; }