/* Shared print-inspired graphics and interface details. All assets stay local. */
:root { --mono: Consolas, "SFMono-Regular", "Liberation Mono", monospace; }
.project-graphic { --art-ink: #153f48; --art-accent: #a6d8c3; color: #d3e7e0; display: block; width: 100%; height: auto; }
.graphic-speech { --art-ink: #473c68; --art-accent: #e1c9ed; }
.graphic-study { --art-ink: #32465c; --art-accent: #c5d8ea; }
.graphic-football { --art-ink: #264e43; --art-accent: #d2e4a0; }
.graphic-colab { --art-ink: #85452f; --art-accent: #f1d0a3; }
.graphic-workshops { --art-ink: #244e72; --art-accent: #bfdeef; }
.graphic-kitchen { --art-ink: #7c422d; --art-accent: #f2d493; }
.site-header { box-shadow: 0 4px 24px #25372d04; }
.site-header nav a { transition: color .15s; }
.header-contact { border-radius: 3px; }
.tags li { background: #fffdf6; border-color: #d4d7ca; padding: 5px 10px; }
.button { border-radius: 3px; }
.button-dark { background: #203b34; border-color: #203b34; }
.button-dark:hover { background: #31574a; border-color: #31574a; color: var(--paper); }
.station-art .project-graphic { transform: rotate(-3deg); box-shadow: 14px 18px 0 #d7dbcf; border: 6px solid #fffdf5; }
.station-art > p { margin-top: 38px; padding-left: 5px; font-size: 11px; }
.station-art > p span { margin-top: 6px; }
.case-heading { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(35px, 5vw, 85px); align-items: center; padding-block: 50px; }
.case-heading h1 { font-size: clamp(46px, 6.5vw, 92px); overflow-wrap: break-word; }
.case-deck { font-size: 19px; line-height: 1.65; }
.case-art { min-width: 0; transform: rotate(2deg); padding: 12px 12px 0; border: 1px solid #d6d8cb; border-radius: 7px; background: #fffdf6; box-shadow: 0 16px 40px #263b370b; }
.art-caption { display: flex; justify-content: space-between; gap: 15px; padding: 15px 3px 17px; font: 9px/1.6 var(--mono); letter-spacing: .04em; color: #546058; }
.art-caption > span { text-align: right; }
.case-aside .station-metric { background: #e8ecdf; border-left: 3px solid #345b4b; padding: 24px; border-radius: 0 4px 4px 0; }
.case-aside nav { padding-left: 26px; border-left: 1px solid var(--line); font-size: 12px; line-height: 1.6; }
.case-aside nav a:hover { color: #31574a; }
.case-body > section > .eyebrow { color: #49644e; font-size: 11px; }
.case-flow li { border-radius: 4px; border: 1px solid #d2d9cb; background: #eeefe6; }
.case-comparison > div { border-radius: 4px; }
.station-highlights li { border-color: #d5d9cd; }
.network-section { background-image: radial-gradient(#57654b14 .7px, transparent .7px); background-size: 18px 18px; }
.network-section .network-map { background: #f9f7f0; border: 1px solid #d6d8cc; border-radius: 6px; padding: 16px; }
.network-map .map-center-label { font: 11px var(--mono); letter-spacing: 2px; fill: #52654d; }
.network-map .map-center-title { font: 36px Georgia, serif; letter-spacing: 3px; fill: #264b3d; }
.network-map .map-center-note { font: 10px var(--mono); fill: #626c5c; }
.station-index a { transition: background .15s; padding-inline: 12px; border-radius: 3px; }
.station-index a:hover { background: #e7ebdf; }
.station-index a[aria-current="location"] { box-shadow: inset 3px 0 #426b52; background: #e7ebdf; }
#map-dialog { border-radius: 8px; box-shadow: 0 28px 90px #0a1b2938; }
.archive-heading { position: relative; padding-right: 150px; }
.archive-heading::after { content: "↗"; position: absolute; right: 10px; top: 90px; width: 100px; height: 100px; display: grid; place-items: center; border: 1px solid #becaba; border-radius: 50%; color: #3a614c; font: 58px/1 Arial, sans-serif; }
.archive-filters { background: #e9ecdf; padding: 24px; margin-top: 25px; border: 1px solid #d6d9cb; border-radius: 5px; }
.archive-filters input, .archive-filters select { background: #fffdf7; border-color: #a8b4a3; border-radius: 3px; }
.topic-label { background: #e7ecdf; border-color: #d5ddcc; color: #3b5943; }
.contribution-list article { transition: background .15s; padding-inline: 16px; }
.contribution-list article:hover { background: #ebeee2; }
.site-footer { font-size: 12px; }
.food-art { display: block; width: 100%; height: auto; }
.kitchen-hero-art { width: 300px; flex-shrink: 0; padding: 12px 20px 22px; border-radius: 50% 50% 5px 5px; background: #ece3cc; border: 1px solid #ded4bc; transform: rotate(4deg); }
.kitchen-hero-art > span { display: block; text-align: center; font: 9px/1.6 var(--mono); color: #69543c; letter-spacing: .08em; }
.recipe-thumbnail { display: block; width: 130px; height: 108px; flex-shrink: 0; border-radius: 5px; background: #ece6d6; }
.recipe-list > li > a { gap: 27px; padding-inline: 8px; }
.recipe-list > li > a:hover { background: #eeecdf; }
.recipe-list-copy { min-width: 0; }
.recipe-title { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.recipe-title-art { flex: 0 0 180px; }
.recipe-search input { background: #fffdf7; border-radius: 3px; }
.recipe-sheet .recipe-table { border-color: #aab49f; }
.recipe-sheet .recipe-table .header-row { background: #dce5d1; }
.recipe-sheet .recipe-table .ingredient-cell { background: #f0eee1; }

/* Cab chrome borrows its colours and spacing from the physical display. */
.cab-interface { --cab-accent: #c3d8af; }
.cab-interface[data-station="speech"] { --cab-accent: #e1c9ed; }
.cab-interface[data-station="study"] { --cab-accent: #c5d8ea; }
.cab-interface[data-station="football"] { --cab-accent: #d2e4a0; }
.cab-interface[data-station="colab"] { --cab-accent: #f1d0a3; }
.cab-interface[data-station="workshops"] { --cab-accent: #bfdeef; }
.cab-interface[data-station="kitchen"] { --cab-accent: #f2d493; }
.cab-interface .cab-brand { background: #f8f6ee; border-color: #ffffff8c; border-radius: 7px; box-shadow: 0 5px 22px #0b1c2220; }
.cab-brand .cab-brand-mark { color: #f8f6ee; background: #23483e; border-color: #23483e; }
.cab-brand small { color: #4e6257; }
.cab-interface .cab-route { padding: 11px 17px; border-color: #dce6e144; font-size: 10px; background: #142932ed; box-shadow: 0 4px 20px #0b1c221a; }
.cab-route .cab-route-dot { background: var(--cab-accent); box-shadow: 0 0 0 4px #ffffff10; }
.cab-interface .cab-stop-card { border-radius: 6px; border-color: #dce6e140; background: linear-gradient(125deg, #1c3b35f5, #142e2bf5); box-shadow: 0 12px 32px #0b202738; border-top: 3px solid var(--cab-accent); backdrop-filter: none; }
.cab-stop-card .cab-stop-eyebrow { color: var(--cab-accent); font-size: 10px; line-height: 1.7; letter-spacing: .04em; }
.cab-stop-card #cab-stop-summary { color: #e1e7dd; font-size: 13px; line-height: 1.65; }
.cab-stop-card #cab-details { font-size: 12px; margin-top: 17px; border-top-color: #dce6e130; }
.cab-stop-card #cab-details > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--cab-accent); background: #ffffff0c; font-size: 17px; }
.cab-interface .cab-driving { padding: 10px; border: 1px solid #dce6e140; border-radius: 8px; background: #142e2bf2; box-shadow: 0 8px 30px #0b202730; }
.cab-driving .cab-driving-help { font-size: 10px; color: #dce6db; text-shadow: none; margin: 0 2px 10px; }
.cab-driving .cab-driving-buttons { gap: 6px; }
.cab-driving .cab-driving-buttons button { background: #f2f1e8; color: #203c34; border: 1px solid #fffaf38c; box-shadow: inset 0 -3px #192c2214; font-size: 12px; border-radius: 4px; }
.cab-driving .cab-driving-buttons button:hover, .cab-driving .cab-driving-buttons button.engaged { background: var(--cab-accent); border-color: var(--cab-accent); }
.cab-driving .cab-driving-buttons #cab-brake { background: #284b40; border-color: #a2bd9c66; color: #f4f2e6; }
.cab-driving .cab-driving-footer { margin-top: 8px; border: 0; background: transparent; padding: 0 3px; }
.cab-driving .cab-driving-footer button { font: 11px/1.5 var(--mono); }
.cab-driving #cab-hud-speed { font-size: 25px; }
.cab-driving #cab-gear { font-size: 9px; color: var(--cab-accent); }
.rail-ready.immersive:not(.motion-paused) .journey-controls { background: #142e2bf2; border-radius: 7px; box-shadow: 0 5px 22px #0b1c2220; }
@media (min-width: 901px) and (min-height: 551px) {
  .cab-interface .cab-stop-card { width: 315px; padding: 20px 22px 12px; top: 112px; }
  .cab-stop-card h1 { font-size: 34px; margin-block: 14px 12px; }
}
@media (max-width: 1050px) {
  .case-heading { gap: 35px; }
  .case-deck { font-size: 17px; }
  .art-caption { font-size: 8px; }
}
@media (max-width: 760px) {
  .hero { padding-bottom: 45px; }
  .hero .home-illustration { position: relative; width: 100%; height: auto; top: auto; right: auto; opacity: 1; margin-top: 35px; z-index: 0; }
  .hero .home-illustration svg { width: 100%; height: auto; max-width: 100%; transform: none; }
  .hero .hero-bottom { position: relative; bottom: auto; margin-top: 25px; }
  .station-art { height: auto; }
  .case-heading { grid-template-columns: 1fr; gap: 28px; padding-block: 34px; }
  .case-heading h1 { font-size: 49px; }
  .case-heading .tags { margin-bottom: 0; }
  .case-art { transform: none; padding: 8px 8px 0; }
  .case-art .project-graphic { max-height: 235px; object-fit: cover; }
  .art-caption { padding: 11px 3px 12px; }
  .station-art .project-graphic { transform: rotate(-2deg); border-width: 4px; box-shadow: 7px 10px 0 #d7dbcf; }
  .station-art > p { margin-top: 25px; }
  .case-aside .station-metric { padding: 19px 22px; }
  .archive-heading { padding-right: 0; }
  .archive-heading::after { display: none; }
  .archive-filters { padding: 18px; }
  .contribution-list article { padding-inline: 0; }
  .network-section .network-map { padding: 5px; }
  .kitchen-hero-art { width: 200px; padding: 8px 12px 15px; }
  .kitchen-hero-art > span { font-size: 7px; }
  .recipe-thumbnail { width: 90px; height: 75px; }
  .recipe-list > li > a { gap: 16px; padding-inline: 0; }
  .recipe-list .recipe-number { display: none; }
  .recipe-list .recipe-arrow { font-size: 26px; }
  .recipe-title-art { flex-basis: 125px; }
}
@media (max-width: 600px) {
  .kitchen-heading { align-items: flex-start; gap: 10px; }
  .kitchen-heading h1 { font-size: 59px; }
  .kitchen-hero-art { width: 110px; padding: 8px 2px; margin-top: 24px; border-radius: 50%; }
  .kitchen-hero-art > span { display: none; }
  .kitchen-heading p:last-child { max-width: 235px; }
  .recipe-list h2 { font-size: 25px; line-height: 1.12; }
  .recipe-thumbnail { width: 74px; height: 68px; display: grid; align-content: center; }
  .recipe-list .recipe-arrow { font-size: 23px; }
  .recipe-title-art { flex-basis: 85px; }
  .recipe-page .recipe-title h1 { font-size: 38px; }
  .cab-brand small { font-size: 8px; }
  .cab-stop-card .cab-stop-eyebrow { font-size: 9px; }
  .cab-stop-card #cab-details { margin-top: 4px; font-size: 0; }
  .cab-stop-card #cab-details > span { width: auto; height: auto; background: none; }
  .cab-interface .cab-driving { padding: 8px; }
  .cab-driving .cab-driving-help { font-size: 9px; margin-bottom: 7px; }
  .cab-driving .cab-driving-footer { margin-top: 5px; }
  .cab-driving .cab-driving-footer button { font-size: 10px; }
  .cab-driving #cab-gear { font-size: 8px; }
}
@media (max-height: 550px) and (orientation: landscape) {
  .cab-interface .cab-driving { padding: 7px; }
  .cab-stop-card .cab-stop-eyebrow { font-size: 9px; }
  .cab-stop-card #cab-details { margin-top: 8px; }
}
@media (max-width: 360px) {
  .kitchen-heading { gap: 6px; }
  .kitchen-heading h1 { font-size: 52px; }
  .kitchen-hero-art { width: 84px; }
  .cab-interface .cab-brand > span:last-child { max-width: 100px; }
  .cab-interface .cab-brand small { white-space: nowrap; font-size: 6.5px; }
  .recipe-title { gap: 8px; }
  .recipe-title-art { flex-basis: 64px; }
  .recipe-page .recipe-title h1 { font-size: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header nav a, .station-index a, .contribution-list article { transition: none; }
}
@media print {
  .case-art, .archive-heading::after, .recipe-title-art { display: none; }
  .case-heading { display: block; }
  .case-aside .station-metric { background: none; padding: 10px; }
}