:root{
    --navy-deep: #0A1140;
    --navy:      #1B2557;
    --navy-mid:  #2E3A73;
    --gold:      #C9A15A;
    --gold-deep: #8E704C;
    --gold-pale: #E7D4A6;
    --cream:     #F4EFE2;
    --ink:       #1C1710;
    --line:      rgba(244,239,226,0.15);
    --line-dark: rgba(28,23,16,0.14);

    --display: 'Playfair Display', serif;
    --body: 'Jost', sans-serif;
    --mono: 'Space Mono', monospace;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background: var(--cream);
    color: var(--ink);
    font-family: var(--body);
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{ display:block; max-width:100%; }
  a{ color:inherit; }
  .wrap{ max-width:1120px; margin:0 auto; padding:0 28px; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  a:focus-visible, button:focus-visible{
    outline: 3px solid var(--gold);
    outline-offset: 3px;
  }

  /* ---------- rail track divider ---------- */
  .track{
    height:14px;
    background:
      repeating-linear-gradient(90deg,
        var(--navy-deep) 0 4px, transparent 4px 34px);
    position:relative;
    opacity:0.8;
  }
  .track::before, .track::after{
    content:"";
    position:absolute; left:0; right:0; height:2px;
    background:var(--navy-deep);
  }
  .track::before{ top:2px; }
  .track::after{ bottom:2px; }

  /* ---------- nav ---------- */
  header{
    background:var(--navy-deep);
    color:var(--cream);
    position:sticky; top:0; z-index:50;
    border-bottom:3px solid var(--gold);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    max-width:1120px; margin:0 auto;
  }
  .brandmark{
    display:flex; align-items:baseline; gap:10px;
    font-family:var(--display);
    font-weight:700;
    letter-spacing:0.02em;
    font-size:21px;
    text-decoration:none;
    color:var(--cream);
  }
  .brandmark small{
    font-family:var(--mono);
    font-size:10px;
    color:var(--gold);
    letter-spacing:0.16em;
    font-weight:normal;
  }
  nav ul{
    list-style:none;
    display:flex; gap:28px;
    font-family:var(--body);
    font-weight:500;
    font-size:13px;
    letter-spacing:0.03em;
    text-transform:uppercase;
  }
  nav ul a{ text-decoration:none; opacity:0.85; padding:6px 2px; border-bottom:2px solid transparent; transition:opacity .2s, border-color .2s; }
  nav ul a:hover{ opacity:1; border-color:var(--gold); }
  .nav-cta{
    font-family:var(--body);
    font-weight:600;
    font-size:13px;
    letter-spacing:.03em;
    text-transform:uppercase;
    background:var(--gold);
    color:var(--navy-deep);
    padding:9px 18px;
    text-decoration:none;
    white-space:nowrap;
    border-radius:1px;
  }

  @media (max-width:760px){
    nav ul{ display:none; }
    .nav-cta{ padding:8px 14px; font-size:12px; }
  }

  /* ---------- hero ---------- */
  .hero{
    background:
      radial-gradient(ellipse at 50% -10%, rgba(201,161,90,0.16), transparent 55%),
      var(--navy-deep);
    color:var(--cream);
    padding:76px 0 64px;
    position:relative;
    overflow:hidden;
    text-align:center;
  }
  .hero-video{
    position:absolute; inset:0; z-index:0;
    width:100%; height:100%;
    object-fit:cover;
  }
  .hero-video-overlay{
    position:absolute; inset:0; z-index:1;
    background:
      radial-gradient(ellipse at 50% -10%, rgba(201,161,90,0.20), transparent 55%),
      rgba(10,17,64,0.72);
  }
  .hero .wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; }
  .eyebrow{
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.25em;
    text-transform:uppercase;
    color:var(--gold-pale);
    display:flex; align-items:center; gap:12px;
    margin-bottom:30px;
  }
  .eyebrow::before, .eyebrow::after{
    content:""; width:34px; height:1px; background:var(--gold-pale);
  }

  /* ---------- crest (draws itself on load) ---------- */
  .crest-wrap{ width:180px; height:180px; margin:0 auto; position:relative; }
  .crest{ width:100%; height:100%; overflow:visible; }
  .crest-ring{
    fill:none;
    stroke:var(--gold);
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:515;
    stroke-dashoffset:515;
  }
  .hero.play .crest-ring{ animation: ring-draw 1.15s cubic-bezier(.65,.05,.36,1) 0.15s both; }
  @keyframes ring-draw{ to{ stroke-dashoffset:0; } }

  .leaf{
    fill:var(--gold);
    opacity:0;
    transform-box: view-box;
  }
  .hero.play .leaf{
    animation: leaf-pop 0.55s cubic-bezier(.34,1.56,.64,1) both;
    animation-delay: calc(0.85s + (var(--dl) * 1.35));
  }
  @keyframes leaf-pop{
    0%{ opacity:0; transform:scale(0.15); }
    100%{ opacity:1; transform:scale(1); }
  }

  .crest-ribbon path{
    fill:var(--gold);
    opacity:0;
    transform-box: fill-box;
    transform-origin: 50% 0%;
  }
  .hero.play .crest-ribbon path{ animation: ribbon-in 0.5s ease-out 1.95s both; }
  @keyframes ribbon-in{
    0%{ opacity:0; transform:scaleY(0.2); }
    100%{ opacity:1; transform:scaleY(1); }
  }

  .crest-monogram{
    font-family:var(--display);
    font-weight:800;
    fill:var(--gold);
    opacity:0;
    transform-box: fill-box;
    transform-origin:center;
  }
  .hero.play .crest-monogram{ animation: mono-in 0.7s cubic-bezier(.22,1,.36,1) 2.15s both; }
  @keyframes mono-in{
    0%{ opacity:0; transform:scale(0.7) translateY(6px); }
    100%{ opacity:1; transform:scale(1) translateY(0); }
  }

  /* ---------- the train that crosses through the crest ---------- */
  .train-cross{
    position:absolute; top:52%; left:-90px; margin-top:-19px;
    width:74px; height:40px; z-index:6; pointer-events:none;
    opacity:0;
  }
  .hero.play .train-cross{ animation: train-through 8s linear 3.05s infinite; }
  @keyframes train-through{
    0%{ opacity:0; left:-90px; }
    2%{ opacity:1; }
    38%{ opacity:1; left:270px; }
    40%{ opacity:0; left:270px; }
    100%{ opacity:0; left:-90px; }
  }
  .tc-body{
    position:absolute; left:0; bottom:0; width:74px; height:27px;
    background:var(--gold); border:2.5px solid var(--navy-deep); border-radius:2px 8px 0 0;
  }
  .tc-cab{
    position:absolute; left:3px; bottom:23px; width:25px; height:18px;
    background:var(--cream); border:2.5px solid var(--navy-deep); border-radius:2px 2px 0 0;
  }
  .tc-chimney{
    position:absolute; left:50px; bottom:35px; width:8px; height:13px;
    background:var(--navy-deep); border-radius:1px 1px 0 0;
  }
  .tc-wheel{
    position:absolute; bottom:-8px; width:16px; height:16px; border-radius:50%;
    background:var(--navy-deep); border:2.5px solid var(--gold-pale);
  }
  .hero.play .tc-wheel{ animation: tc-spin 0.45s linear infinite; }
  .tcw1{ left:9px; } .tcw2{ left:44px; }
  @keyframes tc-spin{ to{ transform:rotate(360deg); } }
  .tc-smoke{
    position:absolute; left:52px; bottom:44px; width:10px; height:10px;
    background:rgba(244,239,226,0.8); border-radius:50%;
    opacity:0;
  }
  .hero.play .tc-smoke{ animation: tc-puff 1.1s ease-out infinite; }
  .hero.play .tc-smoke.d2{ animation-delay:0.55s; }
  @keyframes tc-puff{
    0%{ opacity:0; transform:translate(0,0) scale(0.5); }
    20%{ opacity:0.75; }
    100%{ opacity:0; transform:translate(12px,-26px) scale(1.5); }
  }

  h1.wordmark{
    font-family:var(--display);
    font-weight:800;
    letter-spacing:0.02em;
    line-height:1;
    font-size:clamp(30px, 6.6vw, 68px);
    margin-top:26px;
    opacity:0;
  }
  .hero.play h1.wordmark{ animation: fade-up 0.7s ease-out 2.75s both; }
  .wordmark-sub{
    font-family:var(--body);
    font-weight:500;
    font-size:clamp(11px, 2vw, 15px);
    letter-spacing:0.42em;
    text-transform:uppercase;
    color:var(--gold);
    margin-top:12px;
    opacity:0;
  }
  .hero.play .wordmark-sub{ animation: fade-up 0.7s ease-out 3.0s both; }
  @keyframes fade-up{
    0%{ opacity:0; transform:translateY(14px); }
    100%{ opacity:1; transform:translateY(0); }
  }

  .hero-tagline{
    font-family:var(--display);
    font-style:italic;
    font-weight:700;
    font-size:20px;
    color:var(--gold-pale);
    margin-top:22px;
    opacity:0;
  }
  .hero.play .hero-tagline{ animation: fade-up 0.7s ease-out 3.2s both; }

  .hero-tag{
    font-family:var(--body);
    font-weight:300;
    font-size:16.5px;
    max-width:480px;
    color:rgba(244,239,226,0.78);
    margin:16px 0 32px;
    opacity:0;
  }
  .hero.play .hero-tag{ animation: fade-up 0.7s ease-out 3.4s both; }

  .cta-row{
    display:flex; gap:14px; flex-wrap:wrap; justify-content:center; align-items:center;
    opacity:0;
  }
  .hero.play .cta-row{ animation: fade-up 0.7s ease-out 3.55s both; }
  .btn{
    font-family:var(--body);
    font-weight:600;
    font-size:13px;
    letter-spacing:.05em;
    text-transform:uppercase;
    padding:14px 24px;
    text-decoration:none;
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid transparent;
    transition:transform .15s ease, background .2s ease, color .2s ease;
    border-radius:1px;
    cursor:pointer;
  }
  .btn:hover{ transform:translateY(-2px); }
  .btn-solid{ background:var(--gold); color:var(--navy-deep); }
  .btn-solid:hover{ background:var(--gold-pale); }
  .btn-ghost{ border-color:rgba(244,239,226,0.4); color:var(--cream); background:transparent; }
  .btn-ghost:hover{ border-color:var(--gold); color:var(--gold-pale); }
  .btn-sound{ border-color:var(--gold); color:var(--gold-pale); background:transparent; }
  .btn-sound:hover{ background:rgba(201,161,90,0.12); }

  /* ---------- split-flap departure board ---------- */
  .board-section{ background:var(--navy-mid); padding:0; }
  .board{
    max-width:1120px; margin:0 auto;
    display:grid; grid-template-columns: repeat(3, 1fr);
    border-left:1px solid var(--line);
  }
  .board-cell{
    border-right:1px solid var(--line);
    padding:22px 20px 24px;
  }
  .board-label{
    font-family:var(--mono);
    font-size:10px;
    letter-spacing:.2em;
    text-transform:uppercase;
    color:var(--gold-pale);
    margin-bottom:12px;
  }
  .flap-row{ display:flex; gap:4px; flex-wrap:wrap; }
  .flap{
    background:var(--navy-deep);
    color:var(--cream);
    font-family:var(--mono);
    font-weight:700;
    font-size:19px;
    padding:8px 9px;
    border-radius:2px;
    box-shadow: inset 0 -10px 0 -8px rgba(0,0,0,0.5);
    position:relative;
    animation: flapin 900ms ease-out both;
  }
  .flap::after{
    content:""; position:absolute; left:0; right:0; top:50%; height:1px;
    background:rgba(0,0,0,0.45);
  }
  .board-cell:nth-child(1) .flap{ animation-delay: calc(var(--i,0) * 60ms); }
  .board-cell:nth-child(2) .flap{ animation-delay: calc(var(--i,0) * 60ms + 120ms); }
  .board-cell:nth-child(3) .flap{ animation-delay: calc(var(--i,0) * 60ms + 240ms); }
  @keyframes flapin{
    0%{ transform:rotateX(90deg); opacity:0; }
    60%{ transform:rotateX(-12deg); opacity:1; }
    100%{ transform:rotateX(0deg); opacity:1; }
  }
  .board-sub{
    font-family:var(--body); font-style:italic;
    color:rgba(244,239,226,0.75); font-size:13px; margin-top:12px;
  }
  @media (max-width:820px){
    .board{ grid-template-columns:1fr; }
  }

  /* ---------- section shell ---------- */
  section{ padding:80px 0; }
  .kicker{
    font-family:var(--mono); font-size:12px; letter-spacing:.2em;
    text-transform:uppercase; color:var(--gold-deep);
    display:flex; align-items:center; gap:12px; margin-bottom:16px;
  }
  .kicker::before{ content:""; width:26px; height:2px; background:var(--gold-deep); }
  h2{
    font-family:var(--display); font-weight:800;
    font-size:clamp(30px,4.4vw,48px); line-height:1.04; letter-spacing:0.005em;
    color:var(--ink);
  }

  /* ---------- story ---------- */
  .story{ background:var(--cream); }
  .story-grid{
    display:grid; grid-template-columns: 1.1fr 0.9fr; gap:64px; align-items:start;
  }
  .story p{ font-size:16.5px; color:rgba(28,23,16,0.82); margin-top:18px; max-width:54ch; }
  .story-figure{
    border:2px solid var(--navy-deep);
    background:
      repeating-linear-gradient(135deg, rgba(201,161,90,0.10) 0 10px, transparent 10px 20px),
      #fff;
    aspect-ratio:4/5;
    display:flex; align-items:flex-end; padding:18px;
  }
  .story-figure span{
    font-family:var(--mono); font-size:11px; letter-spacing:.1em;
    text-transform:uppercase; background:var(--navy-deep); color:var(--cream); padding:6px 10px;
  }
  @media (max-width:820px){ .story-grid{ grid-template-columns:1fr; gap:36px; } }

  /* ---------- menu ---------- */
  .menu-section{ background:var(--navy-deep); color:var(--cream); }
  .menu-section .kicker{ color:var(--gold-pale); }
  .menu-section .kicker::before{ background:var(--gold); }
  .menu-section h2{ color:var(--cream); }
  .menu-section > .wrap > p.menu-lede{
    font-family:var(--display); font-style:italic; font-weight:600; color:rgba(244,239,226,0.72);
    max-width:56ch; margin-top:14px; font-size:16px;
  }

  .menu-tabs{
    display:flex; flex-wrap:wrap; gap:8px; margin:38px 0 8px;
  }
  .menu-tab{
    font-family:var(--body); font-weight:500; font-size:12.5px;
    letter-spacing:.03em; text-transform:uppercase;
    background:transparent; color:rgba(244,239,226,0.68);
    border:1px solid var(--line); padding:9px 15px; border-radius:999px;
    cursor:pointer; transition: all .18s ease;
  }
  .menu-tab:hover{ border-color:var(--gold); color:var(--cream); }
  .menu-tab.active{ background:var(--gold); border-color:var(--gold); color:var(--navy-deep); font-weight:600; }

  .menu-panel{ display:none; margin-top:30px; }
  .menu-panel.active{ display:block; animation: fade-up 0.35s ease-out both; }
  .menu-panel-note{
    font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
    color:var(--gold-pale); text-transform:uppercase; margin-bottom:18px;
  }
  .menu-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:0 40px;
  }
  .menu-item{
    padding:14px 0; border-bottom:1px solid var(--line);
    display:flex; justify-content:space-between; gap:14px;
  }
  .menu-item-name{ font-family:var(--display); font-weight:700; font-size:15.5px; }
  .menu-item-desc{ font-family:var(--body); font-weight:300; font-size:13px; color:rgba(244,239,226,0.62); margin-top:4px; line-height:1.4; }
  .menu-item-price{
    font-family:var(--mono); font-size:13px; color:var(--gold-pale); white-space:nowrap; text-align:right;
    flex:none; padding-top:2px;
  }
  .menu-item-price small{ display:block; font-size:10px; opacity:0.7; }
  @media (max-width:760px){ .menu-grid{ grid-template-columns:1fr; } }

  /* ---------- gallery ---------- */
  .gallery{ background:var(--cream); }
  .gallery-grid{
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px;
  }
  .gallery-grid > div{
    aspect-ratio:1/1; border:1px solid var(--navy-deep);
    display:flex; align-items:flex-end; padding:12px;
    background:
      repeating-linear-gradient(45deg, rgba(27,37,87,0.08) 0 8px, transparent 8px 16px),
      #fff;
  }
  .gallery-grid > div:nth-child(2){ grid-row:span 2; aspect-ratio:auto; }
  .gallery-grid > div span{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
    text-transform:uppercase; background:var(--navy-deep); color:var(--cream); padding:5px 8px;
  }
  @media (max-width:760px){
    .gallery-grid{ grid-template-columns:repeat(2,1fr); }
    .gallery-grid > div:nth-child(2){ grid-row:auto; }
  }

  /* ---------- reviews slideshow ---------- */
  .reviews-section{ background:var(--navy-mid); color:var(--cream); }
  .reviews-section .kicker{ color:var(--gold-pale); }
  .reviews-section .kicker::before{ background:var(--gold-pale); }
  .reviews-section h2{ color:var(--cream); }
  .reviews-slideshow{ position:relative; margin-top:48px; min-height:170px; }
  .review-slide{
    position:absolute; inset:0; opacity:0; transition:opacity .5s ease;
    pointer-events:none;
  }
  .review-slide.active{ opacity:1; pointer-events:auto; }
  .review-slide p{
    font-family:var(--display); font-style:italic; font-weight:600;
    font-size:clamp(19px,2.6vw,26px); line-height:1.45; max-width:680px;
  }
  .review-meta{
    margin-top:18px; font-family:var(--mono); font-size:12px;
    letter-spacing:.06em; text-transform:uppercase; color:var(--gold-pale);
  }
  .review-dots{ display:flex; gap:9px; margin-top:32px; }
  .review-dot{
    width:8px; height:8px; border-radius:50%; background:rgba(244,239,226,0.28);
    border:none; cursor:pointer; padding:0;
  }
  .review-dot.active{ background:var(--gold); }

  /* ---------- location ---------- */
  .location{ background:var(--cream); }
  .loc-grid{ margin-top:44px; }
  .loc-single{ max-width:560px; }
  .info-list{ margin-top:0; }
  .info-row{ display:flex; gap:18px; padding:16px 0; border-top:1px solid var(--line-dark); }
  .info-row:last-child{ border-bottom:1px solid var(--line-dark); }
  .info-row dt{
    font-family:var(--mono); font-size:11px; text-transform:uppercase; letter-spacing:.1em;
    color:var(--gold-deep); width:110px; flex:none;
  }
  .info-row dd{ font-size:16px; }

  /* ---------- footer ---------- */
  footer{ background:var(--navy-deep); color:rgba(244,239,226,0.65); padding:44px 0 30px; }
  .foot-grid{
    display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px;
    font-family:var(--body); font-size:13px;
  }
  .foot-brand{
    font-family:var(--display); font-weight:700;
    color:var(--cream); font-size:20px; letter-spacing:.01em;
  }
  footer .ticket{
    margin-top:22px; padding-top:18px; border-top:1px dashed rgba(244,239,226,0.25);
    font-family:var(--mono);
    font-size:11px;
  }