{"tool":"get_design","slug":"northbound","title":"Northbound — Rail Journeys, Slowed Down","url":"/northbound","kind":"Live website","code":"<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\" />\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, viewport-fit=cover\" />\n<meta name=\"color-scheme\" content=\"light dark\" />\n<link rel=\"icon\" href=\"data:,\" />\n<title>Northbound — Rail Journeys, Slowed Down</title>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n<link href=\"https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=Archivo:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\" />\n<style>\n  :root{\n    --bg:#F6F1E7; --bg-2:#EFE7D7; --surface:#FFFDF8; --ink:#16211B; --ink-2:#43514A;\n    --line:#D9CFBB; --pine:#274435; --pine-2:#1B2F24; --signal:#C2491D; --signal-ink:#A83C15;\n    --gold:#B98A2F; --on-pine:#F3ECDB; --on-pine-2:#C9D2C4;\n    --radius:14px; --max:1180px;\n  }\n  @media (prefers-color-scheme: dark){\n    :root{\n      --bg:#0D130F; --bg-2:#111A14; --surface:#16211A; --ink:#EFE8D5; --ink-2:#A9B4A4;\n      --line:#2A3A2F; --pine:#1E3328; --pine-2:#14231B; --signal:#E0683C; --signal-ink:#EE8256;\n      --gold:#D3A24A; --on-pine:#F3ECDB; --on-pine-2:#C9D2C4;\n    }\n  }\n  html{ scroll-behavior:smooth; }\n  body{ margin:0; background:var(--bg); color:var(--ink); font-family:\"Archivo\",system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }\n  h1,h2,h3,p,ul,ol,figure,blockquote{ margin:0; }\n  ul,ol{ padding:0; list-style:none; }\n  img{ display:block; max-width:100%; }\n  a{ color:inherit; }\n  button{ font:inherit; cursor:pointer; }\n  .wrap{ max-width:var(--max); margin:0 auto; padding:0 24px; }\n  .serif{ font-family:\"Newsreader\",Georgia,serif; }\n  .mono{ font-family:\"IBM Plex Mono\",ui-monospace,monospace; }\n\n  /* ---------- header ---------- */\n  header.site{ position:sticky; top:0; z-index:40; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }\n  .nav{ display:flex; align-items:center; gap:28px; height:64px; }\n  .wordmark{ display:flex; align-items:center; gap:10px; text-decoration:none; font-weight:800; letter-spacing:.14em; font-size:15px; }\n  .wordmark .dia{ width:11px; height:11px; background:var(--signal); transform:rotate(45deg); flex:none; }\n  .nav nav{ display:flex; gap:22px; margin-left:12px; }\n  .nav nav a{ text-decoration:none; font-size:14px; font-weight:500; color:var(--ink-2); }\n  .nav nav a:hover{ color:var(--ink); }\n  .nav .spacer{ flex:1; }\n  .btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--ink); background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-weight:600; font-size:14px; text-decoration:none; transition:transform .15s ease, background .15s ease; }\n  .btn:hover{ transform:translateY(-1px); }\n  .btn.signal{ background:var(--signal); border-color:var(--signal); color:#FFF6E8; }\n  .btn.ghost{ background:transparent; color:var(--ink); }\n  .btn.small{ padding:8px 14px; font-size:13px; }\n  @media (max-width:760px){ .nav nav{ display:none; } }\n\n  /* ---------- hero ---------- */\n  .hero{ position:relative; }\n  .hero figure{ height:min(78vh,640px); min-height:440px; overflow:hidden; }\n  .hero figure img{ width:100%; height:100%; object-fit:cover; }\n  .hero .veil{ position:absolute; inset:0; background:linear-gradient(to top, rgba(10,16,12,.74) 0%, rgba(10,16,12,.34) 52%, rgba(10,16,12,.14) 100%); }\n  .hero-copy h1, .hero-copy p.lede{ text-shadow:0 1px 14px rgba(8,12,9,.5); }\n  .hero-copy{ position:absolute; left:0; right:0; bottom:0; color:#F6F1E7; padding-bottom:34px; }\n  .hero-copy .route-tag{ display:inline-block; font-family:\"IBM Plex Mono\",monospace; font-size:12px; letter-spacing:.12em; text-transform:uppercase; border:1px solid rgba(246,241,231,.55); padding:6px 12px; border-radius:999px; margin-bottom:18px; }\n  .hero h1{ font-family:\"Newsreader\",Georgia,serif; font-weight:500; font-size:clamp(40px,6.4vw,76px); line-height:1.02; letter-spacing:-.01em; max-width:13ch; }\n  .hero h1 em{ font-style:italic; color:#F0B429; }\n  .hero p.lede{ margin-top:16px; max-width:52ch; font-size:17px; color:#E7DFCB; }\n  /* planner */\n  .planner{ margin-top:26px; background:var(--surface); color:var(--ink); border-radius:var(--radius); padding:14px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:10px; box-shadow:0 18px 40px rgba(8,12,9,.35); max-width:880px; }\n  .planner label{ display:block; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); margin:2px 0 4px 4px; }\n  .planner select{ width:100%; font:inherit; font-size:15px; font-weight:500; color:var(--ink); background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:10px; appearance:none; }\n  .planner .go{ align-self:end; }\n  .planner .note{ grid-column:1/-1; font-size:13px; color:var(--signal-ink); font-weight:600; min-height:0; }\n  .planner .note:empty{ display:none; }\n  @media (max-width:760px){ .planner{ grid-template-columns:1fr 1fr; } .planner .go{ grid-column:1/-1; justify-content:center; } .planner select{ font-size:13.5px; padding:10px 8px; } }\n\n  /* ---------- stat strip ---------- */\n  .stats{ border-bottom:1px solid var(--line); }\n  .stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); }\n  .stat{ padding:26px 18px 24px; border-left:1px solid var(--line); }\n  .stat:first-child{ border-left:none; padding-left:0; }\n  .stat b{ display:block; font-family:\"Newsreader\",serif; font-weight:600; font-size:34px; line-height:1; }\n  .stat span{ font-size:13px; color:var(--ink-2); }\n  @media (max-width:760px){ .stats .wrap{ grid-template-columns:1fr 1fr; } .stat{ padding-left:14px; } .stat:nth-child(odd){ border-left:none; padding-left:0; } }\n\n  /* ---------- sections ---------- */\n  section.block{ padding:84px 0; }\n  section.block.tight{ padding:56px 0; }\n  .sec-head{ display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }\n  .sec-head h2{ font-family:\"Newsreader\",serif; font-weight:500; font-size:clamp(30px,4vw,44px); line-height:1.08; letter-spacing:-.01em; max-width:20ch; }\n  .sec-head p{ color:var(--ink-2); max-width:46ch; margin-top:10px; }\n\n  /* ---------- journey cards ---------- */\n  .chips{ display:flex; gap:8px; flex-wrap:wrap; }\n  .chip{ border:1px solid var(--line); background:var(--surface); color:var(--ink-2); border-radius:999px; padding:8px 16px; font-size:13.5px; font-weight:600; }\n  .chip[aria-pressed=\"true\"]{ background:var(--pine); border-color:var(--pine); color:var(--on-pine); }\n  .featured{ display:grid; grid-template-columns:1.25fr 1fr; border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); margin-bottom:22px; }\n  .featured figure{ min-height:320px; }\n  .featured figure img{ width:100%; height:100%; object-fit:cover; }\n  .featured .body{ padding:34px; display:flex; flex-direction:column; gap:12px; }\n  .tagrow{ display:flex; gap:8px; flex-wrap:wrap; }\n  .tag{ font-family:\"IBM Plex Mono\",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--line); padding:4px 10px; border-radius:999px; color:var(--ink-2); }\n  .tag.hot{ background:var(--signal); border-color:var(--signal); color:#FFF3E4; }\n  .featured h3, .jcard h3{ font-family:\"Newsreader\",serif; font-weight:600; font-size:27px; line-height:1.12; }\n  .featured p, .jcard p{ color:var(--ink-2); font-size:15px; }\n  .meta{ display:flex; gap:18px; flex-wrap:wrap; font-family:\"IBM Plex Mono\",monospace; font-size:12.5px; color:var(--ink-2); margin-top:auto; padding-top:8px; }\n  .meta b{ color:var(--ink); font-weight:500; }\n  .price{ font-size:15px; } .price b{ font-size:19px; }\n  .grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }\n  .jcard{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease; }\n  .jcard:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(10,16,12,.14); }\n  .jcard figure{ aspect-ratio:16/10; overflow:hidden; }\n  .jcard figure img{ width:100%; height:100%; object-fit:cover; transition:transform .4s ease; }\n  .jcard:hover figure img{ transform:scale(1.04); }\n  .jcard .body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }\n  .jcard .foot{ display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding:14px 22px; }\n  .link-arrow{ font-weight:700; font-size:14px; color:var(--signal-ink); text-decoration:none; }\n  .is-hidden{ display:none !important; }\n  .flash{ outline:3px solid var(--signal); outline-offset:3px; }\n  @media (max-width:900px){ .featured{ grid-template-columns:1fr; } .grid3{ grid-template-columns:1fr; } }\n\n  /* ---------- routes table ---------- */\n  .routes{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--surface); }\n  .rrow{ display:grid; grid-template-columns:1.4fr .8fr .8fr .7fr auto; gap:16px; align-items:center; padding:20px 24px; border-top:1px solid var(--line); }\n  .rrow:first-child{ border-top:none; }\n  .rrow.head{ background:var(--bg-2); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); padding-top:14px; padding-bottom:14px; }\n  .rrow .name{ font-family:\"Newsreader\",serif; font-size:19px; font-weight:600; }\n  .rrow .name small{ display:block; font-family:\"Archivo\",sans-serif; font-size:13px; font-weight:400; color:var(--ink-2); }\n  .rrow .t{ font-family:\"IBM Plex Mono\",monospace; font-size:14.5px; }\n  @media (max-width:760px){\n    .rrow{ grid-template-columns:1fr auto; }\n    .rrow.head{ display:none; }\n    .rrow .t{ text-align:right; }\n    .rrow .dur{ display:none; }\n  }\n\n  /* ---------- on board ---------- */\n  .onboard{ background:var(--pine-2); color:var(--on-pine); }\n  .onboard .cols{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }\n  .onboard figure{ border-radius:18px; overflow:hidden; }\n  .onboard figure img{ width:100%; height:100%; object-fit:cover; }\n  .onboard h2{ font-family:\"Newsreader\",serif; font-weight:500; font-size:clamp(30px,4vw,42px); line-height:1.1; }\n  .onboard p.intro{ color:var(--on-pine-2); margin-top:14px; max-width:48ch; }\n  .feat{ margin-top:26px; display:grid; gap:0; }\n  .feat li{ display:flex; gap:16px; padding:16px 0; border-top:1px solid rgba(243,236,219,.18); }\n  .feat .n{ font-family:\"IBM Plex Mono\",monospace; color:#F0B429; font-size:13px; padding-top:3px; }\n  .feat b{ display:block; font-size:16px; }\n  .feat span{ color:var(--on-pine-2); font-size:14.5px; }\n  @media (max-width:900px){ .onboard .cols{ grid-template-columns:1fr; } }\n\n  /* ---------- cabins ---------- */\n  .tier{ border:1px solid var(--line); background:var(--surface); border-radius:18px; padding:28px; display:flex; flex-direction:column; gap:14px; }\n  .tier.mid{ background:var(--pine); color:var(--on-pine); border-color:var(--pine); }\n  .tier h3{ font-family:\"Newsreader\",serif; font-size:24px; font-weight:600; }\n  .tier .amt{ font-size:15px; color:var(--ink-2); } .tier.mid .amt{ color:var(--on-pine-2); }\n  .tier .amt b{ font-size:34px; color:var(--ink); font-family:\"Newsreader\",serif; } .tier.mid .amt b{ color:var(--on-pine); }\n  .tier ul{ display:grid; gap:9px; font-size:14.5px; color:var(--ink-2); }\n  .tier.mid ul{ color:var(--on-pine-2); }\n  .tier li::before{ content:\"— \"; color:var(--signal); }\n  .tier .btn{ margin-top:auto; justify-content:center; }\n  .tier.mid .btn{ background:var(--signal); border-color:var(--signal); color:#FFF6E8; }\n\n  /* ---------- journal ---------- */\n  .jrow{ display:grid; grid-template-columns:110px 1fr auto; gap:22px; align-items:baseline; padding:24px 0; border-top:1px solid var(--line); text-decoration:none; }\n  .jrow:last-child{ border-bottom:1px solid var(--line); }\n  .jrow .d{ font-family:\"IBM Plex Mono\",monospace; font-size:12.5px; color:var(--ink-2); }\n  .jrow h3{ font-family:\"Newsreader\",serif; font-size:23px; font-weight:600; line-height:1.2; }\n  .jrow p{ color:var(--ink-2); font-size:14.5px; margin-top:4px; max-width:56ch; }\n  .jrow .mins{ font-family:\"IBM Plex Mono\",monospace; font-size:12.5px; color:var(--ink-2); white-space:nowrap; }\n  @media (max-width:760px){ .jrow{ grid-template-columns:1fr; gap:6px; } }\n\n  /* ---------- faq ---------- */\n  .faq{ max-width:760px; }\n  .qa{ border:1px solid var(--line); border-radius:14px; background:var(--surface); margin-bottom:12px; overflow:hidden; }\n  .qa button{ width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; background:none; border:none; padding:20px 22px; font-weight:600; font-size:16px; color:var(--ink); text-align:left; }\n  .qa .pm{ font-family:\"Newsreader\",serif; font-size:24px; line-height:1; color:var(--signal-ink); flex:none; }\n  .qa .ans{ display:none; padding:0 22px 20px; color:var(--ink-2); font-size:15px; }\n  .qa.open .ans{ display:block; }\n\n  /* ---------- cta + footer ---------- */\n  .cta{ background:var(--signal); color:#FFF3E4; }\n  .cta .wrap{ display:flex; align-items:center; justify-content:space-between; gap:28px; flex-wrap:wrap; padding-top:52px; padding-bottom:52px; }\n  .cta h2{ font-family:\"Newsreader\",serif; font-weight:500; font-size:clamp(28px,4vw,40px); line-height:1.1; max-width:22ch; }\n  .cta .btn{ background:#16211B; border-color:#16211B; color:#F6F1E7; }\n  footer.site{ border-top:1px solid var(--line); padding:44px 0 54px; }\n  footer.site .cols{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }\n  footer.site nav{ display:flex; gap:20px; flex-wrap:wrap; }\n  footer.site nav a{ font-size:14px; color:var(--ink-2); text-decoration:none; }\n  footer.site .fine{ margin-top:26px; font-size:13px; color:var(--ink-2); }\n\n  /* ---------- BITON submission spec ---------- */\n  .biton{ background:#101010; color:#FFF1DF; padding:72px 0 84px; }\n  .biton .kicker{ display:inline-flex; align-items:center; gap:10px; font-family:\"IBM Plex Mono\",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#FF8A70; border:1px solid #3A3A3A; padding:7px 14px; border-radius:999px; }\n  .biton .kicker .dia{ width:9px; height:9px; background:#FF5938; transform:rotate(45deg); }\n  .biton h2{ font-family:\"Newsreader\",serif; font-weight:500; font-size:clamp(30px,4vw,44px); margin-top:22px; line-height:1.08; }\n  .biton p.sub{ color:#CFC4AE; max-width:58ch; margin-top:12px; }\n  .spec{ margin-top:36px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }\n  .panel{ border:1px solid #333; border-radius:16px; padding:26px; background:#161616; }\n  .panel h3{ font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:#FF8A70; font-weight:700; margin-bottom:18px; }\n  .kv{ display:grid; grid-template-columns:118px 1fr; gap:8px 16px; font-size:14.5px; }\n  .kv dt{ color:#9A917E; } .kv dd{ margin:0; font-weight:500; }\n  .kv dd.mono{ font-size:13px; color:#FFD9CE; word-break:break-all; }\n  .swatches{ display:grid; gap:10px; }\n  .sw{ display:flex; align-items:center; gap:12px; font-size:14px; }\n  .sw .chipc{ width:38px; height:38px; border-radius:10px; border:1px solid #3A3A3A; flex:none; }\n  .sw .hex{ margin-left:auto; font-family:\"IBM Plex Mono\",monospace; font-size:12.5px; color:#CFC4AE; }\n  .sw button, .copybtn{ background:#FFF1DF; color:#101010; border:none; border-radius:8px; padding:6px 12px; font-size:12.5px; font-weight:700; }\n  .sw button:hover, .copybtn:hover{ background:#FF5938; color:#101010; }\n  .promptbox{ background:#0A0A0A; border:1px solid #333; border-radius:12px; padding:16px; font-family:\"IBM Plex Mono\",monospace; font-size:13px; line-height:1.6; color:#E9DFC9; overflow-wrap:anywhere; }\n  .biton .actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:22px; }\n  .biton .actions .btn{ background:#FF5938; border-color:#FF5938; color:#101010; }\n  .biton .actions .btn.ghostb{ background:transparent; border-color:#4A4A4A; color:#FFF1DF; }\n  .sections-list{ display:flex; flex-wrap:wrap; gap:8px; }\n  .sections-list span{ border:1px solid #3A3A3A; border-radius:999px; padding:5px 12px; font-size:13px; color:#E9DFC9; }\n  @media (max-width:900px){ .spec{ grid-template-columns:1fr; } .kv{ grid-template-columns:96px 1fr; } }\n\n  .toast{ position:fixed; left:50%; bottom:26px; transform:translate(-50%,80px); background:#16211B; color:#F6F1E7; padding:12px 20px; border-radius:999px; font-size:14px; font-weight:600; box-shadow:0 14px 34px rgba(0,0,0,.35); transition:transform .3s ease; z-index:80; max-width:92vw; text-align:center; }\n  .toast.show{ transform:translate(-50%,0); }\n  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } .jcard, .jcard figure img, .btn{ transition:none; } }\n</style>\n</head>\n<body>\n\n<header class=\"site\">\n  <div class=\"wrap nav\">\n    <a class=\"wordmark\" href=\"#top\"><span class=\"dia\"></span>NORTHBOUND</a>\n    <nav aria-label=\"Primary\">\n      <a href=\"#journeys\">Journeys</a>\n      <a href=\"#routes\">Routes</a>\n      <a href=\"#onboard\">On board</a>\n      <a href=\"#cabins\">Cabins</a>\n      <a href=\"#journal\">Journal</a>\n      <a href=\"#faq\">FAQ</a>\n    </nav>\n    <div class=\"spacer\"></div>\n    <a class=\"btn signal small\" href=\"#journeys\">Plan a journey</a>\n  </div>\n</header>\n\n<main id=\"top\">\n\n  <!-- HERO -->\n  <section class=\"hero\">\n    <figure><img src=\"assets/hero.jpg\" alt=\"A red panoramic train curving through a green Alpine valley beneath snow-covered peaks\" /></figure>\n    <div class=\"veil\"></div>\n    <div class=\"hero-copy\">\n      <div class=\"wrap\">\n        <span class=\"route-tag\">Scenic rail · Alps · Coast · Forest</span>\n        <h1>Travel at the speed of the <em>landscape.</em></h1>\n        <p class=\"lede\">Northbound runs panoramic trains on the routes flights fly over — glacier crossings, coastal lines and forest night trains, booked in one place with every stop on the map.</p>\n        <form class=\"planner\" id=\"planner\">\n          <div>\n            <label for=\"p-route\">Journey</label>\n            <select id=\"p-route\">\n              <option value=\"glacier\">The Glacier Crossing</option>\n              <option value=\"bernina\">Bernina Line</option>\n              <option value=\"coastal\">Coastal Pacific</option>\n              <option value=\"forest\">The Forest Night Train</option>\n            </select>\n          </div>\n          <div>\n            <label for=\"p-month\">Month</label>\n            <select id=\"p-month\">\n              <option>November 2026</option><option>December 2026</option>\n              <option>January 2027</option><option>February 2027</option><option>March 2027</option>\n            </select>\n          </div>\n          <div>\n            <label for=\"p-cabin\">Cabin</label>\n            <select id=\"p-cabin\">\n              <option>Vista Seat</option><option>Roomette</option><option>Panorama Suite</option>\n            </select>\n          </div>\n          <button class=\"btn signal go\" type=\"submit\">Find my train</button>\n          <p class=\"note\" id=\"planner-note\" role=\"status\"></p>\n        </form>\n      </div>\n    </div>\n  </section>\n\n  <!-- STATS -->\n  <div class=\"stats\">\n    <div class=\"wrap\">\n      <div class=\"stat\"><b>12</b><span>scenic routes in the timetable</span></div>\n      <div class=\"stat\"><b>196</b><span>bridges across the Albula–Bernina lines</span></div>\n      <div class=\"stat\"><b>55</b><span>tunnels carved through the Alps</span></div>\n      <div class=\"stat\"><b>0</b><span>airport queues, middle seats, or baggage carousels</span></div>\n    </div>\n  </div>\n\n  <!-- JOURNEYS -->\n  <section class=\"block\" id=\"journeys\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <div>\n          <h2>Journeys worth the long way round</h2>\n          <p>Four signature routes, each built around the view. Filter by the landscape you want to wake up in.</p>\n        </div>\n        <div class=\"chips\" role=\"group\" aria-label=\"Filter journeys by landscape\">\n          <button class=\"chip\" data-filter=\"all\" aria-pressed=\"true\">All</button>\n          <button class=\"chip\" data-filter=\"alpine\" aria-pressed=\"false\">Alpine</button>\n          <button class=\"chip\" data-filter=\"coast\" aria-pressed=\"false\">Coast</button>\n          <button class=\"chip\" data-filter=\"forest\" aria-pressed=\"false\">Forest</button>\n          <button class=\"chip\" data-filter=\"night\" aria-pressed=\"false\">Night trains</button>\n        </div>\n      </div>\n\n      <article class=\"featured\" data-region=\"alpine\" data-id=\"glacier\">\n        <figure><img src=\"assets/hero.jpg\" alt=\"Panoramic train rounding a bend below glaciated Alpine peaks\" /></figure>\n        <div class=\"body\">\n          <div class=\"tagrow\"><span class=\"tag hot\">Featured</span><span class=\"tag\">Alpine</span><span class=\"tag\">Full day</span></div>\n          <h3>The Glacier Crossing</h3>\n          <p>The flagship run: eight hours between two valley towns, over the highest rail pass in the range and past three glaciers close enough to hear them crack. Lunch is served in the dining car as the line climbs.</p>\n          <div class=\"meta\"><span>Duration <b>8 h 04</b></span><span>Distance <b>291 km</b></span><span>Highest point <b>2,253 m</b></span></div>\n          <div style=\"display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;\">\n            <span class=\"price\">from <b>$189</b></span>\n            <a class=\"link-arrow\" href=\"#routes\">See departures →</a>\n          </div>\n        </div>\n      </article>\n\n      <div class=\"grid3\">\n        <article class=\"jcard\" data-region=\"alpine\" data-id=\"bernina\">\n          <figure><img src=\"assets/alpine.jpg\" alt=\"A long red train crossing a high Alpine valley in autumn light\" /></figure>\n          <div class=\"body\">\n            <div class=\"tagrow\"><span class=\"tag\">Alpine</span><span class=\"tag\">Half day</span></div>\n            <h3>Bernina Line</h3>\n            <p>Palm trees to glaciers in four hours. The line loops over the Brusio spiral viaduct and climbs its 7% gradient without a single rack rail.</p>\n            <div class=\"meta\"><span><b>4 h 12</b></span><span><b>144 km</b></span></div>\n          </div>\n          <div class=\"foot\"><span class=\"price\">from <b>$96</b></span><a class=\"link-arrow\" href=\"#routes\">Departures →</a></div>\n        </article>\n\n        <article class=\"jcard\" data-region=\"coast\" data-id=\"coastal\">\n          <figure><img src=\"assets/coastal.jpg\" alt=\"A coastal train running along cliffs above a turquoise sea\" /></figure>\n          <div class=\"body\">\n            <div class=\"tagrow\"><span class=\"tag\">Coast</span><span class=\"tag\">Full day</span></div>\n            <h3>Coastal Pacific</h3>\n            <p>Six hours with the ocean on one side and the ranges on the other — seal colonies, river mouths, and a shoreline road that gives up and turns inland.</p>\n            <div class=\"meta\"><span><b>5 h 48</b></span><span><b>348 km</b></span></div>\n          </div>\n          <div class=\"foot\"><span class=\"price\">from <b>$124</b></span><a class=\"link-arrow\" href=\"#routes\">Departures →</a></div>\n        </article>\n\n        <article class=\"jcard\" data-region=\"forest night\" data-id=\"forest\">\n          <figure><img src=\"assets/forest.webp\" alt=\"A train passing through dense green forest\" /></figure>\n          <div class=\"body\">\n            <div class=\"tagrow\"><span class=\"tag\">Forest</span><span class=\"tag\">Night train</span></div>\n            <h3>The Forest Night Train</h3>\n            <p>Board at dusk, dine as the pines close in, and sleep through the deep forest. You wake at the lake town terminus with breakfast already on.</p>\n            <div class=\"meta\"><span><b>11 h 30</b></span><span><b>Overnight</b></span></div>\n          </div>\n          <div class=\"foot\"><span class=\"price\">from <b>$142</b></span><a class=\"link-arrow\" href=\"#routes\">Departures →</a></div>\n        </article>\n      </div>\n      <p id=\"filter-empty\" class=\"is-hidden\" style=\"margin-top:18px;color:var(--ink-2);\">No journeys in that landscape yet — try another filter.</p>\n    </div>\n  </section>\n\n  <!-- ROUTES -->\n  <section class=\"block tight\" id=\"routes\" style=\"background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <div>\n          <h2>Daily departures</h2>\n          <p>One timetable, no codeshares or connections to decode. Every train below runs daily.</p>\n        </div>\n      </div>\n      <div class=\"routes\">\n        <div class=\"rrow head\"><span>Journey</span><span>Departs</span><span>Arrives</span><span>Duration</span><span></span></div>\n        <div class=\"rrow\"><span class=\"name\">The Glacier Crossing<small>via the Oberalp Pass</small></span><span class=\"t\">08:52</span><span class=\"t\">16:56</span><span class=\"t dur\">8 h 04</span><a class=\"link-arrow\" href=\"#cabins\">Cabins →</a></div>\n        <div class=\"rrow\"><span class=\"name\">Bernina Line<small>via the Brusio spiral viaduct</small></span><span class=\"t\">09:17</span><span class=\"t\">13:29</span><span class=\"t dur\">4 h 12</span><a class=\"link-arrow\" href=\"#cabins\">Cabins →</a></div>\n        <div class=\"rrow\"><span class=\"name\">Coastal Pacific<small>via the Kaikōura coast</small></span><span class=\"t\">07:04</span><span class=\"t\">12:52</span><span class=\"t dur\">5 h 48</span><a class=\"link-arrow\" href=\"#cabins\">Cabins →</a></div>\n        <div class=\"rrow\"><span class=\"name\">The Forest Night Train<small>sleeper service, dinner included</small></span><span class=\"t\">21:40</span><span class=\"t\">09:10</span><span class=\"t dur\">11 h 30</span><a class=\"link-arrow\" href=\"#cabins\">Cabins →</a></div>\n      </div>\n    </div>\n  </section>\n\n  <!-- ON BOARD -->\n  <section class=\"onboard block\" id=\"onboard\">\n    <div class=\"wrap cols\">\n      <figure><img src=\"assets/interior.jpg\" alt=\"Inside a panoramic observation car with armchairs facing wide windows\" /></figure>\n      <div>\n        <h2>Built around the window, not the aisle.</h2>\n        <p class=\"intro\">Every Northbound train is specified for looking out of: raised seating, glass that wraps into the roofline, and a timetable that slows down where the view earns it.</p>\n        <ul class=\"feat\">\n          <li><span class=\"n\">01</span><div><b>Observation car</b><span>Swivel armchairs and a wraparound glass dome on every departure, open to all cabins.</span></div></li>\n          <li><span class=\"n\">02</span><div><b>Dining car</b><span>Regional menus matched to the line — glacier-water trout in the Alps, coastal catch on the Pacific run.</span></div></li>\n          <li><span class=\"n\">03</span><div><b>Quiet car</b><span>No calls, no announcements, lights dimmed after 22:00 on night services.</span></div></li>\n          <li><span class=\"n\">04</span><div><b>Route commentary</b><span>A printed field guide per seat and live position on the carriage screens — no app download needed.</span></div></li>\n        </ul>\n      </div>\n    </div>\n  </section>\n\n  <!-- CABINS -->\n  <section class=\"block\" id=\"cabins\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <div>\n          <h2>Three ways to ride</h2>\n          <p>Same train, same view. Pick how much of it you want to sleep through.</p>\n        </div>\n      </div>\n      <div class=\"grid3\">\n        <article class=\"tier\">\n          <h3>Vista Seat</h3>\n          <p class=\"amt\"><b>$96</b> from, per person</p>\n          <ul><li>Panoramic window seat, extra legroom</li><li>Observation and dining car access</li><li>Printed route field guide</li><li>One checked bag included</li></ul>\n          <a class=\"btn ghost\" href=\"#faq\">Questions first</a>\n        </article>\n        <article class=\"tier mid\">\n          <h3>Roomette</h3>\n          <p class=\"amt\"><b>$210</b> from, per person</p>\n          <ul><li>Private cabin converting to a bed</li><li>Dinner and breakfast included</li><li>Priority observation car seating</li><li>Two checked bags included</li></ul>\n          <a class=\"btn\" href=\"#journeys\">Choose a journey</a>\n        </article>\n        <article class=\"tier\">\n          <h3>Panorama Suite</h3>\n          <p class=\"amt\"><b>$390</b> from, per person</p>\n          <ul><li>Corner suite with wrap-around glass</li><li>All meals and drinks included</li><li>En-suite shower and lounge access</li><li>Flexible date changes, free</li></ul>\n          <a class=\"btn ghost\" href=\"#faq\">Questions first</a>\n        </article>\n      </div>\n    </div>\n  </section>\n\n  <!-- JOURNAL -->\n  <section class=\"block tight\" id=\"journal\" style=\"border-top:1px solid var(--line);\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\">\n        <div>\n          <h2>From the journal</h2>\n          <p>Field notes from the lines — engineering, history, and what to watch for at kilometre 214.</p>\n        </div>\n      </div>\n      <a class=\"jrow\" href=\"#journal\"><span class=\"d\">OCT 2026</span><span><h3>How do you build a railway over a glacier?</h3><p>The Oberalp section sits on ground that moves a metre a year. The engineers' answer involves bridges designed to be re-levelled, not rebuilt.</p></span><span class=\"mins\">8 min read</span></a>\n      <a class=\"jrow\" href=\"#journal\"><span class=\"d\">SEP 2026</span><span><h3>The viaduct that curves into a tunnel</h3><p>On the Albula Line, the most photographed bridge in the Alps ends mid-air — inside a cliff. A short history of the Landwasser Viaduct.</p></span><span class=\"mins\">6 min read</span></a>\n      <a class=\"jrow\" href=\"#journal\"><span class=\"d\">AUG 2026</span><span><h3>A field guide to watching the coast go by</h3><p>Seal colonies at kilometre 96, the river mouth at 141, and the exact bend where the ranges first appear. Tear-out notes for the Coastal Pacific.</p></span><span class=\"mins\">5 min read</span></a>\n    </div>\n  </section>\n\n  <!-- FAQ -->\n  <section class=\"block tight\" id=\"faq\">\n    <div class=\"wrap\">\n      <div class=\"sec-head\"><div><h2>Before you book</h2></div></div>\n      <div class=\"faq\">\n        <div class=\"qa\"><button aria-expanded=\"false\">Do I need to reserve a seat in the observation car?<span class=\"pm\">+</span></button><div class=\"ans\">No. The observation car is open to every cabin on a first-come basis, and Roomette and Suite passengers can reserve a two-hour window at no charge when they book.</div></div>\n        <div class=\"qa\"><button aria-expanded=\"false\">What happens if snow closes the pass?<span class=\"pm\">+</span></button><div class=\"ans\">Alpine services carry a weather guarantee: if the line closes, you choose between the next day's departure with a hotel night included, or a full refund. No rebooking fees either way.</div></div>\n        <div class=\"qa\"><button aria-expanded=\"false\">Can I break the journey and stop overnight?<span class=\"pm\">+</span></button><div class=\"ans\">Yes — every ticket allows one stopover of up to 48 hours at any intermediate station on the route, at no extra fare. Add it when you book or at the station ticket office.</div></div>\n        <div class=\"qa\"><button aria-expanded=\"false\">Is there Wi-Fi on board?<span class=\"pm\">+</span></button><div class=\"ans\">There is Wi-Fi in stations and the dining car, but the high sections of the Alpine lines have no signal at all — which most passengers end up counting as a feature. Download the field guide before you board.</div></div>\n      </div>\n    </div>\n  </section>\n\n  <!-- CTA -->\n  <section class=\"cta\">\n    <div class=\"wrap\">\n      <h2>The window seat is the destination.</h2>\n      <a class=\"btn\" href=\"#journeys\">Browse journeys</a>\n    </div>\n  </section>\n\n</main>\n\n<footer class=\"site\">\n  <div class=\"wrap\">\n    <div class=\"cols\">\n      <a class=\"wordmark\" href=\"#top\"><span class=\"dia\"></span>NORTHBOUND</a>\n      <nav aria-label=\"Footer\">\n        <a href=\"#journeys\">Journeys</a><a href=\"#routes\">Routes</a><a href=\"#onboard\">On board</a>\n        <a href=\"#cabins\">Cabins</a><a href=\"#journal\">Journal</a><a href=\"#faq\">FAQ</a><a href=\"#biton-entry\">BITON entry</a>\n      </nav>\n    </div>\n    <p class=\"fine\">Northbound Rail Co. — a design exemplar. Photography: Bernina &amp; Albula lines (Andreas Stutz via Eurotrek / MySwitzerland), Coastal Pacific (ToursByLocals), observation car (IRT Society).</p>\n  </div>\n</footer>\n\n<!-- ============ BITON SUBMISSION SPEC ============ -->\n<section class=\"biton\" id=\"biton-entry\">\n  <div class=\"wrap\">\n    <span class=\"kicker\"><span class=\"dia\"></span>BITON entry · ready to submit</span>\n    <h2>Add this design to BITON</h2>\n    <p class=\"sub\">Everything a BITON design page needs is documented below — identity, palette, type, structure, and the prompt an AI agent can build from. Copy any piece, or take the whole entry as JSON.</p>\n\n    <div class=\"spec\">\n      <div class=\"panel\">\n        <h3>Entry details</h3>\n        <dl class=\"kv\">\n          <dt>Title</dt><dd>Northbound — Rail Journeys</dd>\n          <dt>URL</dt><dd class=\"mono\">biton.dev/designs/northbound-rail-journeys</dd>\n          <dt>Category</dt><dd>Websites · Travel</dd>\n          <dt>Platform</dt><dd>Web (responsive, desktop → mobile)</dd>\n          <dt>Style</dt><dd>Editorial · Minimal</dd>\n          <dt>Type</dt><dd>Landing page with booking planner</dd>\n          <dt>Sections</dt><dd>9 — listed beside</dd>\n        </dl>\n        <h3 style=\"margin-top:26px;\">Sections in this design</h3>\n        <div class=\"sections-list\">\n          <span>Hero + planner</span><span>Stat strip</span><span>Journey cards</span><span>Timetable</span><span>On board</span><span>Cabin pricing</span><span>Journal index</span><span>FAQ accordion</span><span>CTA band</span>\n        </div>\n      </div>\n\n      <div class=\"panel\">\n        <h3>Colour palette — tap to copy</h3>\n        <div class=\"swatches\">\n          <div class=\"sw\"><span class=\"chipc\" style=\"background:#F6F1E7\"></span>Paper Cream<span class=\"hex\">#F6F1E7</span><button data-copy=\"#F6F1E7\">Copy</button></div>\n          <div class=\"sw\"><span class=\"chipc\" style=\"background:#16211B\"></span>Forest Ink<span class=\"hex\">#16211B</span><button data-copy=\"#16211B\">Copy</button></div>\n          <div class=\"sw\"><span class=\"chipc\" style=\"background:#274435\"></span>Pine<span class=\"hex\">#274435</span><button data-copy=\"#274435\">Copy</button></div>\n          <div class=\"sw\"><span class=\"chipc\" style=\"background:#C2491D\"></span>Signal Red<span class=\"hex\">#C2491D</span><button data-copy=\"#C2491D\">Copy</button></div>\n          <div class=\"sw\"><span class=\"chipc\" style=\"background:#B98A2F\"></span>Brass<span class=\"hex\">#B98A2F</span><button data-copy=\"#B98A2F\">Copy</button></div>\n        </div>\n        <h3 style=\"margin-top:26px;\">Typography &amp; spacing</h3>\n        <dl class=\"kv\">\n          <dt>Display</dt><dd>Newsreader (serif, 500–600)</dd>\n          <dt>UI / body</dt><dd>Archivo (400–800)</dd>\n          <dt>Data</dt><dd>IBM Plex Mono — times, prices, specs</dd>\n          <dt>Grid</dt><dd>1,180 px max, 24 px gutters</dd>\n          <dt>Spacing</dt><dd>8 px base scale · 84 px section rhythm</dd>\n          <dt>Corners</dt><dd>14–18 px cards · pill buttons &amp; chips</dd>\n        </dl>\n      </div>\n    </div>\n\n    <div class=\"panel\" style=\"margin-top:22px;\">\n      <h3>Get it for an AI agent</h3>\n      <p class=\"promptbox\" id=\"agent-prompt\">daemon create a website using https://biton.dev/designs/northbound-rail-journeys — an editorial rail-journey landing page called Northbound. Paper cream background (#F6F1E7), forest ink text (#16211B), pine panels (#274435), signal red accent (#C2491D). Newsreader serif headlines, Archivo body, IBM Plex Mono for times and prices. Sections in order: sticky nav, full-bleed hero photo with a journey planner bar (journey / month / cabin selects), stat strip, filterable journey cards, daily departures timetable, dark on-board feature section, three cabin pricing tiers, journal index rows, FAQ accordion, signal-red CTA band. Responsive to mobile, supports dark mode.</p>\n      <div class=\"actions\">\n        <button class=\"btn\" id=\"copy-prompt\">Copy agent prompt</button>\n        <button class=\"btn ghostb\" id=\"copy-json\">Copy entry as JSON</button>\n        <button class=\"btn ghostb\" id=\"download-page\">Download this page (.html)</button>\n      </div>\n    </div>\n  </div>\n</section>\n\n<div class=\"toast\" id=\"toast\" role=\"status\" aria-live=\"polite\"></div>\n\n<script>\n(function(){\n  var toast = document.getElementById('toast'), toastTimer = null;\n  function showToast(msg){\n    toast.textContent = msg;\n    toast.classList.add('show');\n    clearTimeout(toastTimer);\n    toastTimer = setTimeout(function(){ toast.classList.remove('show'); }, 2600);\n  }\n  function copyText(text, msg){\n    function done(){ showToast(msg); }\n    if (navigator.clipboard && navigator.clipboard.writeText){\n      navigator.clipboard.writeText(text).then(done).catch(function(){ fallback(); });\n    } else { fallback(); }\n    function fallback(){\n      var ta = document.createElement('textarea');\n      ta.value = text; ta.style.position = 'fixed'; ta.style.opacity = '0';\n      document.body.appendChild(ta); ta.select();\n      try { document.execCommand('copy'); } catch(e){}\n      document.body.removeChild(ta); done();\n    }\n  }\n\n  /* Journey filter chips */\n  var chips = Array.prototype.slice.call(document.querySelectorAll('.chip'));\n  var cards = Array.prototype.slice.call(document.querySelectorAll('[data-region]'));\n  var featured = document.querySelector('.featured');\n  var emptyMsg = document.getElementById('filter-empty');\n  function applyFilter(f){\n    chips.forEach(function(c){ c.setAttribute('aria-pressed', c.getAttribute('data-filter') === f ? 'true' : 'false'); });\n    var visible = 0;\n    cards.forEach(function(card){\n      var regions = (card.getAttribute('data-region') || '').split(' ');\n      var show = (f === 'all' || regions.indexOf(f) !== -1);\n      card.classList.toggle('is-hidden', !show);\n      if (show) visible++;\n    });\n    emptyMsg.classList.toggle('is-hidden', visible !== 0);\n  }\n  chips.forEach(function(c){ c.addEventListener('click', function(){ applyFilter(c.getAttribute('data-filter')); }); });\n\n  /* Planner */\n  var names = { glacier:'The Glacier Crossing', bernina:'Bernina Line', coastal:'Coastal Pacific', forest:'The Forest Night Train' };\n  document.getElementById('planner').addEventListener('submit', function(e){\n    e.preventDefault();\n    var id = document.getElementById('p-route').value;\n    var month = document.getElementById('p-month').value;\n    var cabin = document.getElementById('p-cabin').value;\n    applyFilter('all');\n    var target = document.querySelector('[data-id=\"' + id + '\"]');\n    document.getElementById('planner-note').textContent = names[id] + ' · ' + month + ' · ' + cabin + ' — highlighted below.';\n    if (target){\n      target.scrollIntoView({ behavior:'smooth', block:'center' });\n      target.classList.add('flash');\n      setTimeout(function(){ target.classList.remove('flash'); }, 2400);\n    }\n  });\n\n  /* FAQ */\n  Array.prototype.forEach.call(document.querySelectorAll('.qa'), function(qa){\n    var btn = qa.querySelector('button');\n    btn.addEventListener('click', function(){\n      var open = qa.classList.toggle('open');\n      btn.setAttribute('aria-expanded', open ? 'true' : 'false');\n      qa.querySelector('.pm').textContent = open ? '–' : '+';\n    });\n  });\n\n  /* BITON spec: copy helpers */\n  Array.prototype.forEach.call(document.querySelectorAll('[data-copy]'), function(b){\n    b.addEventListener('click', function(){ copyText(b.getAttribute('data-copy'), 'Copied ' + b.getAttribute('data-copy')); });\n  });\n  document.getElementById('copy-prompt').addEventListener('click', function(){\n    copyText(document.getElementById('agent-prompt').textContent.trim(), 'Agent prompt copied');\n  });\n  document.getElementById('copy-json').addEventListener('click', function(){\n    var entry = {\n      title: 'Northbound — Rail Journeys',\n      url: 'https://biton.dev/designs/northbound-rail-journeys',\n      category: 'Websites',\n      subcategory: 'Travel',\n      platform: ['Web'],\n      style: ['Editorial', 'Minimal'],\n      type: 'Landing page with booking planner',\n      palette: { paper:'#F6F1E7', ink:'#16211B', pine:'#274435', signal:'#C2491D', brass:'#B98A2F' },\n      typography: { display:'Newsreader', body:'Archivo', data:'IBM Plex Mono' },\n      layout: { maxWidth:'1180px', gutter:'24px', spacingScale:'8px', sectionRhythm:'84px', cardRadius:'14-18px' },\n      sections: ['Hero + journey planner','Stat strip','Journey cards with landscape filters','Daily departures timetable','On board feature section','Cabin pricing tiers','Journal index','FAQ accordion','CTA band'],\n      responsive: 'Desktop grid collapses to single column under 900px; planner and timetable reflow under 760px; dark mode supported.'\n    };\n    copyText(JSON.stringify(entry, null, 2), 'BITON entry JSON copied');\n  });\n  document.getElementById('download-page').addEventListener('click', function(){\n    var html = '<!doctype html>\\n' + document.documentElement.outerHTML;\n    var blob = new Blob([html], { type:'text/html' });\n    var a = document.createElement('a');\n    a.href = URL.createObjectURL(blob);\n    a.download = 'northbound-rail-journeys.html';\n    document.body.appendChild(a); a.click(); document.body.removeChild(a);\n    setTimeout(function(){ URL.revokeObjectURL(a.href); }, 2000);\n    showToast('Page downloaded — keep it beside its assets/ folder for the photos');\n  });\n})();\n</script>\n</body>\n</html>\n","code_bytes":41489}