/* NOMAD HOKKAIDO — base styles.
   Loaded before tailwind.css, matching the order the page was designed in. */
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }

  :root { color-scheme: light; }
  html { scroll-behavior: smooth; }
  body { background: #F6FAFB; color: #071310; font-family: 'Hanken Grotesk', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }

  /* Archivo carries a width axis. Headlines run expanded — it reads like
     expedition signage rather than a default grotesque. */
  .display { font-family: Archivo, 'Arial Narrow', system-ui, sans-serif; font-variation-settings: 'wdth' 112, 'wght' 800; font-weight: 800; text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.9; text-wrap: balance; }
  .eyebrow { font-family: Archivo, system-ui, sans-serif; font-variation-settings: 'wdth' 96, 'wght' 600; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.6875rem; }
  /* Used once, for the Hokkaido Life covers. */
  .editorial { font-family: Newsreader, Georgia, serif; font-weight: 400; font-style: italic; letter-spacing: -0.01em; line-height: 0.95; text-wrap: balance; }

  /* ---------- Image placeholders ----------
     A real <img> sits on top. Until the file exists in /public/images the
     img fails to load, removes itself, and a branded gradient shows instead. */
  .ph { position: relative; overflow: hidden; background: linear-gradient(160deg, #15402E, #2C6E48 55%, #7FBF95); isolation: isolate; }
  .ph[data-tone="snow"]  { background: linear-gradient(160deg, #2B5C7A, #7FA8C4 45%, #DDE9F1); }
  .ph[data-tone="green"] { background: linear-gradient(160deg, #0A2B20, #2C6E48 55%, #7FBF95); }
  .ph[data-tone="night"] { background: linear-gradient(160deg, #071310, #15402E 60%, #1D4E6C); }
  .ph[data-tone="city"]  { background: linear-gradient(160deg, #122A38, #1D4E6C 55%, #5E8AA5); }
  .ph[data-tone="warm"]  { background: linear-gradient(160deg, #33261A, #7A5330 55%, #D8B98C); }
  .ph::after {
    content: ''; position: absolute; inset: -10%; z-index: 1; opacity: .45;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M-20 120 C 30 50, 80 170, 180 80'/%3E%3Cpath d='M-20 100 C 30 30, 80 150, 180 60'/%3E%3Cpath d='M-20 140 C 30 70, 80 190, 180 100'/%3E%3Cpath d='M-20 80 C 30 10, 80 130, 180 40'/%3E%3C/g%3E%3C/svg%3E");
  }
  /* Focal point per asset. --pos-m is the phone crop, --pos-d the desktop one.
     The selector is descendant, not child, because the production photographs
     are wrapped in <picture> to offer WebP first. */
  .ph img, .ph video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 3; object-position: var(--pos-m, center); }
  @media (min-width: 768px) { .ph img, .ph video { object-position: var(--pos-d, var(--pos-m, center)); } }
  .ph-label {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: .5rem .75rem;
    font-family: Archivo, sans-serif; font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255,255,255,.72); text-align: right;
  }

  /* ---------- Scroll reveal ----------
     Gated behind .js so the page is fully legible at rest and without
     JavaScript. Nothing important is ever parked at opacity 0. */
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: .09s; }
  .reveal[data-delay="2"] { transition-delay: .18s; }
  .reveal[data-delay="3"] { transition-delay: .27s; }

  /* ---------- Horizontal snap rails ---------- */
  .rail { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-inline: 1.25rem; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { scroll-snap-align: start; flex: 0 0 auto; }

  .link-underline { background-image: linear-gradient(currentColor, currentColor); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .marquee-track { animation: none !important; }
  }

  /* ---------- Hero ----------
     The photography is a wide landscape (roughly 16:9). A phone viewport is
     the opposite shape, so on a phone the picture is held as a letterbox
     band that dissolves into the brand ground, and the statement sits on
     that ground. The mountain, lake, and shoreline stay
     visible and stays sharp. From 768px the viewport is wide enough for the
     photograph to go full bleed, which is where the sense of scale lives. */
  .hero { background: #071310; }
  .hero-media { left: 0; right: 0; top: 0; height: 46%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 68%, transparent 100%);
  }
  /* Keeps the logo plate and menu legible against a bright sky. */
  .hero-scrim { background: linear-gradient(180deg, rgba(7,19,16,.50) 0%, rgba(7,19,16,.10) 34%, rgba(7,19,16,0) 60%); }
  @media (min-width: 768px) {
    .hero-media { bottom: 0; height: auto; -webkit-mask-image: none; mask-image: none; }
    .hero-scrim { background: linear-gradient(180deg, rgba(7,19,16,.62) 0%, rgba(7,19,16,.18) 38%, rgba(7,19,16,.86) 100%); }
  }

  /* The only load-time motion: the hero image settles. Text never moves. */
  .hero-media { animation: settle 2.4s cubic-bezier(.16,1,.3,1) both; }
  @keyframes settle { from { transform: scale(1.08); } to { transform: scale(1); } }
  @media (prefers-reduced-motion: reduce) { .hero-media { animation: none; } }

  /* The film sits directly on the still, same box, same crop. It is held at
     zero opacity until it is genuinely playing, so a slow or failed fetch
     shows the photograph rather than a black rectangle. The selector is
     qualified to outrank the shared `.ph video` geometry above. */
  .ph video.hero-video { z-index: 4; opacity: 0; transition: opacity 1.1s cubic-bezier(.22,1,.36,1); }
  .ph video.hero-video.is-playing { opacity: 1; }
  @media (prefers-reduced-motion: reduce) { .ph video.hero-video { display: none; } }

  /* ---------- Snow × Green ----------
     Two halves of the island, full bleed. The height is tuned to the shape
     of the photography: tall enough to carry the headline, short enough that
     a wide landscape is not cropped down to a keyhole on a phone. */
  .season-panel { min-height: 46svh; }
  @media (min-width: 768px)  { .season-panel { min-height: 56vh; } }
  @media (min-width: 1024px) { .season-panel { min-height: 62vh; } }

  /* ---------- Work & Stay band ----------
     Full bleed, no overlay, no copy: the room speaks for itself. */
  .work-band { position: relative; margin: 1.75rem 0 0; aspect-ratio: 5 / 2; overflow: hidden; }
  @media (min-width: 1024px) { .work-band { margin-top: 2.5rem; aspect-ratio: 16 / 5; } }

  /* ---------- Final call to action ----------
     The closing photograph is a very wide horizon. It is held as a band at
     the top of the dark ground rather than stretched behind the type, so the
     sunset is never over-darkened and the headline always has clean space. */
  .cta { background: #071310; }
  .cta-media { left: 0; right: 0; top: 0; height: 38%;
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
  }
  @media (min-width: 768px)  { .cta-media { height: 50%; } }
  @media (min-width: 1024px) { .cta-media { height: 56%; } }

  .marquee { overflow: hidden; }
  .marquee-track { display: flex; gap: 3rem; width: max-content; animation: marquee 32s linear infinite; }
  @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  :focus-visible { outline: 2px solid #8FCBA4; outline-offset: 3px; border-radius: 2px; }

  /* ---------- Screen-reader only ---------- */
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* ---------- Live cards in the hero ----------
     Deliberately quiet: they sit on the photograph and must not compete
     with the brand statement beside them. */
  .live-card {
    border: 1px solid rgba(246, 250, 251, .18);
    border-radius: .9rem;
    background: rgba(7, 19, 16, .42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: .9rem 1.05rem 1rem;
  }

  /* ---------- Route board ----------
     Access is utility information. On a phone each route is a two-by-two
     block; from 768px it becomes a real table with a header row. */
  .route-board { width: 100%; border-collapse: collapse; }
  .route-board thead { display: none; }
  .route-board tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: .2rem 1rem;
    padding: .8rem 0;
    border-top: 1px solid rgba(10, 43, 32, .1);
  }
  .route-board tbody tr:first-child { border-top: 0; }
  .route-board td { display: block; }
  .route-board td[data-label="From"]   { grid-column: 1; grid-row: 1; }
  .route-board td[data-label="To"]     { grid-column: 1; grid-row: 2; }
  .route-board td[data-label="Time"]   { grid-column: 2; grid-row: 1; text-align: right; }
  .route-board td[data-label="Status"] { grid-column: 2; grid-row: 2; text-align: right; }

  .route-board .code {
    font-family: Archivo, system-ui, sans-serif;
    font-variation-settings: 'wdth' 96, 'wght' 800;
    font-size: .8rem; letter-spacing: .08em; color: #0A2B20;
  }
  .route-board .city { margin-left: .5rem; font-size: .95rem; color: #0A2B20; }
  .route-board td[data-label="To"] .code,
  .route-board td[data-label="To"] .city { color: #6F7C7A; font-size: .75rem; }
  .route-board td[data-label="To"]::before { content: '→'; margin-right: .35rem; color: #3E8E5A; }
  .route-board .time {
    font-family: Archivo, system-ui, sans-serif;
    font-variation-settings: 'wdth' 100, 'wght' 700;
    font-size: .95rem; color: #0A2B20; white-space: nowrap;
  }
  .route-board .status { font-size: .72rem; color: #6F7C7A; }
  .route-board .tag {
    display: inline-block; margin-right: .4rem; padding: .1rem .45rem; border-radius: 999px;
    font-family: Archivo, system-ui, sans-serif; font-size: .5625rem; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase; vertical-align: 1px;
  }
  .route-board .tag--new { background: #3E8E5A; color: #F6FAFB; }

  @media (min-width: 768px) {
    .route-board thead { display: table-header-group; }
    .route-board tbody tr { display: table-row; padding: 0; border-top: 0; }
    .route-board th,
    .route-board td { display: table-cell; padding: .95rem 1.25rem .95rem 0; text-align: left; }
    .route-board th {
      font-family: Archivo, system-ui, sans-serif;
      font-variation-settings: 'wdth' 96, 'wght' 600;
      font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
      color: #6F7C7A; padding-bottom: .6rem;
      border-bottom: 1px solid rgba(10, 43, 32, .12);
    }
    .route-board td { border-top: 1px solid rgba(10, 43, 32, .1); }
    .route-board td[data-label="Time"],
    .route-board td[data-label="Status"] { text-align: left; }
    .route-board td[data-label="To"]::before { content: none; }
    .route-board td[data-label="To"] .code { color: #0A2B20; font-size: .8rem; }
    .route-board td[data-label="To"] .city { color: #0A2B20; font-size: .95rem; }
  }