/* NOMAD HOKKAIDO — secondary pages.
   Loaded only below the root. The homepage does not use any of this, so its
   bytes and its rendering are untouched.

   The language is the homepage's, turned down: shorter heroes, the same
   type scale, the same greens, less motion. A secondary page has to be
   useful before it is immersive. */

/* ---------- Page hero ----------
   Shorter than the homepage's 92svh. Enough to carry a title and a
   photograph, not so much that the answer is below the fold. */
.page-hero {
  min-height: 62svh;
}
@media (min-width: 768px) {
  .page-hero { min-height: 56vh; }
}
@media (min-width: 1024px) {
  .page-hero { min-height: 58vh; }
}
/* The two season pages open taller than the rest. They are an argument for
   half a year, and the photograph is doing half the arguing. */
.season-hero {
  min-height: 82svh;
}
@media (min-width: 768px) {
  .season-hero { min-height: 72vh; }
}
@media (min-width: 1024px) {
  .season-hero { min-height: 78vh; }
}

.page-hero-media {
  position: absolute;
  inset: 0;
}
.page-scrim {
  background: linear-gradient(180deg, rgba(7, 19, 16, 0.62) 0%, rgba(7, 19, 16, 0.28) 42%, rgba(7, 19, 16, 0.88) 100%);
}

/* ---------- Current page marker ----------
   A dot under the word. Not a tab: the header stays a header. */
.nav-link {
  position: relative;
}
.nav-link.is-here::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 999px;
  background: #3e8e5a;
}

/* ---------- Compact live strip ----------
   The secondary-page weather: place, reading, time. One line. */
.live-strip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 96, 'wght' 600;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* ---------- Breadcrumbs ----------
   Detail pages only. Top-level pages do not get one. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.crumbs a {
  color: rgba(246, 250, 251, 0.55);
  transition: color 0.3s var(--ease-out, ease);
}
.crumbs a:hover {
  color: #f6fafb;
}
.crumbs span[aria-current] {
  color: #8fcba4;
}

/* ---------- Specification list ----------
   Label above value. Used for at-a-glance blocks. A value that is not
   decided yet says so, in a quieter colour. */
.spec {
  display: grid;
  gap: 1.25rem 2rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) {
  .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.spec dt {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 96, 'wght' 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 250, 251, 0.45);
}
.spec dd {
  margin-top: 0.4rem;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}
.spec dd.is-tbc {
  font-variation-settings: 'wdth' 100, 'wght' 400;
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.9rem;
  color: rgba(246, 250, 251, 0.45);
}

/* ---------- Itinerary ----------
   A numbered column, not a timetable. There are no times in it because
   there are no confirmed times. */
.itin {
  border-top: 1px solid rgba(246, 250, 251, 0.15);
}
.itin-day {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 1.25rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid rgba(246, 250, 251, 0.12);
}
@media (min-width: 640px) {
  .itin-day { grid-template-columns: auto 9rem 1fr; align-items: baseline; }
}
.itin-num {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 112, 'wght' 800;
  font-size: 1.35rem;
  line-height: 1;
  color: #8fcba4;
  font-variant-numeric: tabular-nums;
}
.itin-place {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 96, 'wght' 600;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246, 250, 251, 0.5);
}

/* ---------- Accordion ----------
   Native details/summary. No JavaScript, keyboard support for free. */
.faq details {
  border-bottom: 1px solid rgba(10, 43, 32, 0.12);
}
.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  cursor: pointer;
  list-style: none;
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 104, 'wght' 700;
  font-size: 1rem;
  color: #0a2b20;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  flex: none;
  font-weight: 400;
  color: #3e8e5a;
  transition: transform 0.3s var(--ease-out, ease);
}
.faq details[open] summary::after {
  content: '−';
}
.faq p {
  margin: 0 0 1.15rem;
  max-width: 62ch;
  color: #6f7c7a;
  line-height: 1.65;
}

/* ---------- Access table ----------
   The homepage board with two more columns. Same stacked behaviour on a
   phone: label on the left, value on the right. */
.access-table {
  width: 100%;
  border-collapse: collapse;
}
.access-table thead {
  display: none;
}
.access-table tbody tr {
  display: block;
  padding: 1.1rem 0;
  border-top: 1px solid rgba(10, 43, 32, 0.1);
}
.access-table tbody tr:first-child {
  border-top: 0;
}
.access-table td {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.15rem 0;
  font-size: 0.9rem;
  color: #6f7c7a;
}
.access-table td::before {
  content: attr(data-label);
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 96, 'wght' 600;
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(111, 124, 122, 0.75);
}
.access-table td[data-label='Origin'] {
  font-family: Archivo, system-ui, sans-serif;
  font-variation-settings: 'wdth' 104, 'wght' 800;
  font-size: 1.05rem;
  color: #0a2b20;
  padding-bottom: 0.4rem;
}
@media (min-width: 900px) {
  .access-table thead { display: table-header-group; }
  .access-table tbody tr { display: table-row; padding: 0; border-top: 0; }
  .access-table th,
  .access-table td {
    display: table-cell;
    padding: 1rem 1.25rem 1rem 0;
    text-align: left;
    border-top: 1px solid rgba(10, 43, 32, 0.1);
  }
  .access-table td::before { content: none; }
  .access-table th {
    border-top: 0;
    border-bottom: 1px solid rgba(10, 43, 32, 0.12);
    font-family: Archivo, system-ui, sans-serif;
    font-variation-settings: 'wdth' 96, 'wght' 600;
    font-size: 0.6875rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #6f7c7a;
    padding-bottom: 0.6rem;
  }
  .access-table td[data-label='Origin'] { padding-bottom: 1rem; }
}

/* ---------- Sticky apply bar ----------
   Phones only, and only on the event detail page. It sits above the safe
   area and never covers more than its own height. */
.sticky-cta {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 45;
  padding: 0.75rem 1.25rem calc(0.75rem + env(safe-area-inset-bottom));
  background: rgba(7, 19, 16, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(246, 250, 251, 0.12);
  transform: translateY(110%);
  transition: transform 0.4s var(--ease-out, ease);
}
.sticky-cta.is-up {
  transform: none;
}
@media (min-width: 768px) {
  .sticky-cta { display: none; }
}

/* The floating WhatsApp button steps up out of the bar's way rather than
   sitting on top of it. */
body.has-sticky-cta #wa-float {
  bottom: 5.75rem;
}
@media (min-width: 768px) {
  body.has-sticky-cta #wa-float { bottom: 1.25rem; }
}

/* ---------- Inbound route arcs on the Access map ----------
   Drawn once when the map arrives, then still. */
.js [data-map='inbound'] path {
  opacity: 0;
}
.js [data-map='inbound'].is-drawing path {
  animation: arc-in 1.2s var(--ease-out, ease) both;
}
@keyframes arc-in {
  from { opacity: 0; stroke-dashoffset: 40; }
  to { opacity: 0.55; stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-map='inbound'] path { opacity: 0.55; }
  .js [data-map='inbound'].is-drawing path { animation: none; }
  .sticky-cta { transition: none; }
}