/* Kerala Route · inner pages. Same vocabulary as themes/route/home.html (which keeps its own inline copy):
   golden-hour glow, the drawn road, boarding-pass tickets, postcards, passport stamps, departures board.
   Literals: amber #e39b3c, amber-soft #f6d9a8, sunset #d9692f, teal-deep #0f2e2c, ivory #fffaf0. */

.r-glow { background: radial-gradient(60% 70% at 85% 10%, rgba(227,155,60,.28), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(19,78,74,.10), transparent 70%); }

/* ---------- page header: a short route that draws from home to this page ---------- */
.r-trail { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.r-trail a, .r-trail span.r-here { display: inline-flex; align-items: center; gap: 8px; }
.r-trail .r-dot { width: 9px; height: 9px; border-radius: 50%; background: #b9ab8c; flex: none; }
.r-trail .r-here .r-dot { background: #e39b3c; box-shadow: 0 0 0 5px rgba(227,155,60,.22); }
.r-trail .r-dash { width: 26px; height: 0; border-top: 2px dashed #d6ccb5; }
.r-strip { display: block; width: 100%; height: 46px; overflow: visible; }
.r-strip .r-strip-road { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); animation: r-draw 1.8s .3s cubic-bezier(.16,1,.3,1) forwards; }
.r-strip .r-strip-mid { opacity: 0; animation: r-fade .6s 1.6s forwards; }
.r-strip .r-strip-pin { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: r-pop .5s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes r-draw { to { stroke-dashoffset: 0; } }
@keyframes r-fade { to { opacity: 1; } }
@keyframes r-pop { to { transform: scale(1); } }

/* ---------- the road (built by road.js from .road-gap[data-stop]) ---------- */
#journey { position: relative; }
.road-svg { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.road-pins, .road-car { position: absolute; left: 0; top: 0; pointer-events: none; }
.road-pins { z-index: 4; width: 100%; height: 100%; }
.road-pin { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--page-bg); border: 3px solid #b9ab8c; transition: background .5s, border-color .5s, transform .6s var(--spring), box-shadow .6s; }
.road-pin.on { background: #e39b3c; border-color: #fffaf0; transform: scale(1.3); box-shadow: 0 0 0 8px rgba(227,155,60,.22), 0 6px 14px -4px rgba(0,0,0,.35); }
.road-pin > span { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translate(-50%, 8px); white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: #134e4a; color: #fffaf0; font: 700 10px/1 var(--font-body); letter-spacing: .18em; text-transform: uppercase; opacity: 0; transition: opacity .5s, transform .6s var(--spring); }
.road-pin.on > span { opacity: 1; transform: translate(-50%, 0); }
.road-pin.end > span { background: #e39b3c; color: #1b1c17; }
.road-car { z-index: 6; width: 38px; height: 22px; margin: -11px 0 0 -19px; opacity: 0; transition: opacity .4s; will-change: transform; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.road-car.on { opacity: 1; }
.motion #journey:not(.road-live) .road-svg > g, .motion #journey:not(.road-live) .road-pins { opacity: 0; }
.road-gap { height: 110px; }
.road-gap.sm { height: 84px; }
@media (min-width: 768px) { .road-gap { height: 140px; } .road-gap.sm { height: 110px; } }
@media (min-width: 1024px) { .road-gap { height: 160px; } }
@media (max-width: 767px) { .road-pin > span { display: none; } .road-pin { width: 14px; height: 14px; margin: -7px 0 0 -7px; } }
.lane { position: relative; z-index: 10; padding-left: 52px; padding-right: 16px; }
@media (min-width: 768px) { .lane { padding-left: 72px; padding-right: 72px; } }
@media (min-width: 1024px) { .lane { padding-left: 112px; padding-right: 112px; } }

/* ---------- boarding-pass tickets ---------- */
.tk { transform-style: flat; will-change: transform, opacity; }
.tk-perf { position: relative; margin: 0 24px; border-top: 2px dashed #d6ccb5; }
.tk-perf::before, .tk-perf::after { content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--r-notch, var(--page-bg)); }
.tk-perf::before { left: -37px; } .tk-perf::after { right: -37px; }
/* a vertical perforation (booking pass on wide screens) */
.tk-vperf { position: relative; border-left: 2px dashed #d6ccb5; }
.tk-vperf::before, .tk-vperf::after { content: ""; position: absolute; left: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--r-notch, var(--page-bg)); }
.tk-vperf::before { top: -13px; } .tk-vperf::after { bottom: -13px; }
.r-photo-empty { background: repeating-linear-gradient(135deg, transparent 0 14px, rgba(227,155,60,.08) 14px 28px); }

/* ---------- postcards and polaroids ---------- */
.pc { background: #fffaf0; padding: 10px 10px 34px; border-radius: 6px; box-shadow: 0 24px 40px -18px rgba(40,30,10,.5); position: relative; }
.pc img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 3px; }
.pc .pc-cap { position: absolute; left: 14px; right: 50px; bottom: 9px; font: italic 400 15px/1 var(--font-display); color: #4a4a3e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc .pc-stamp { position: absolute; right: 12px; bottom: 6px; width: 26px; height: 30px; border: 2px dashed #e39b3c; border-radius: 3px; display: grid; place-items: center; color: #d9692f; }
.pc .pc-stamp .material-symbols-outlined { font-size: 15px; }
.pc-back { background-color: #fffaf0; background-image: repeating-linear-gradient(135deg, transparent 0 14px, rgba(227,155,60,.06) 14px 28px); border-radius: 1.25rem; box-shadow: 0 30px 50px -28px rgba(40,30,10,.45); color: #1b1c17; }
.pol { position: absolute; width: 56%; background: #fffaf0; padding: 10px 10px 44px; border-radius: 4px; box-shadow: 0 30px 50px -24px rgba(40,30,10,.55); margin: 0; }
.pol img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; display: block; }
.pol figcaption { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font: italic 400 15px/1 var(--font-display); color: #4a4a3e; }
.pol:nth-child(1) { left: 0; top: 12%; rotate: -9deg; }
.pol:nth-child(2) { left: 22%; top: 0; rotate: 2deg; z-index: 2; }
.pol:nth-child(3) { left: 44%; top: 16%; rotate: 9deg; z-index: 1; }

/* ---------- passport stamps ---------- */
.stamp { width: 168px; height: 168px; border-radius: 50%; border: 4px double currentColor; display: grid; place-items: center; text-align: center; position: relative; mix-blend-mode: multiply; }
.stamp::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1.5px dashed currentColor; opacity: .7; }
.stamp b { display: block; font: 800 13px/1.15 var(--font-body); letter-spacing: .16em; text-transform: uppercase; margin-top: 6px; }
.stamp .material-symbols-outlined { font-size: 34px; }
.stamp.sm { width: 112px; height: 112px; border-width: 3px; }
.stamp.sm b { font-size: 10px; letter-spacing: .14em; }
.stamp.sm .material-symbols-outlined { font-size: 24px; }
.stamp.big-num strong { display: block; font: 700 40px/1 var(--font-display); }

/* ---------- luggage tags ---------- */
.tag { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px 14px 18px; border-radius: 0 0 20px 20px; clip-path: polygon(24% 0, 76% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); transform-origin: 50% 6%; text-align: center; }
.tag .hole { position: absolute; top: 12px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--page-bg); box-shadow: inset 0 0 0 2px rgba(0,0,0,.12); }
.tag:hover { animation: r-swing .9s ease; }
.tag .material-symbols-outlined { font-size: 26px; }
.tag-row .tag { flex: none; min-width: 112px; }
@keyframes r-swing { 20% { rotate: 8deg; } 45% { rotate: -6deg; } 70% { rotate: 3deg; } 100% { rotate: 0deg; } }

/* ---------- departures board ---------- */
.board { background: #10201f; color: #f6d9a8; border-radius: 28px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 30px 60px -30px rgba(0,0,0,.6); }
.board-row { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.07); }
a.board-row:hover .cell, a.board-row:focus-visible .cell { background: #24403d; }
.cells { display: flex; gap: 3px; overflow: hidden; }
.cell { width: 1.15em; height: 1.55em; flex: none; display: grid; place-items: center; background: #1b302e; border-radius: 4px; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; color: #fffaf0; position: relative; overflow: hidden; transition: background .3s; }
.cell::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.45); }
@media (min-width: 480px) { .cell { font-size: 13px; } }
@media (min-width: 640px) { .cell { font-size: 16px; } }
.board select, .board input[type=text] { background: #1b302e !important; color: #fffaf0 !important; border: 1px solid rgba(255,255,255,.12) !important; }

/* ---------- forms and chips ---------- */
.r-field { width: 100%; background: #fffaf0; border: 1px solid #d6ccb5; border-radius: 1rem; padding: .8rem 1rem; font-size: .9rem; color: #1b1c17; }
.r-field:focus { outline: none; border-color: #e39b3c; box-shadow: 0 0 0 3px rgba(227,155,60,.25); }
.r-chip { display: block; padding: .5rem .9rem; border-radius: 999px; font-size: .75rem; font-weight: 700; background: #fffaf0; color: #4a4a3e; border: 1px solid #e3d4b5; text-align: center; transition: background .25s, color .25s, border-color .25s; }
.peer:checked + .r-chip { background: #134e4a; color: #fffaf0; border-color: #134e4a; }
.peer:focus-visible + .r-chip { outline: 2px solid #e39b3c; outline-offset: 2px; }
.r-form { color: #1b1c17; }

/* ---------- legal ---------- */
.r-legal h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; line-height: 1.2; color: #134e4a; margin-bottom: 1rem; scroll-margin-top: 7rem; }
.r-legal section { position: relative; padding-left: 28px; border-left: 2px dashed #d6ccb5; padding-bottom: 2.5rem; }
.r-legal section::before { content: ""; position: absolute; left: -9px; top: .45rem; width: 16px; height: 16px; border-radius: 50%; background: var(--page-bg); border: 3px solid #e39b3c; }
.r-legal section:last-child { border-left-color: transparent; padding-bottom: 0; }
.r-legal ul { list-style: disc; padding-left: 1.4rem; }
.r-legal li + li { margin-top: .5rem; }
.r-legal a { color: #d9692f; font-weight: 600; }
.r-toc a.on { color: #d9692f; }
.r-toc a.on .r-dot { background: #e39b3c; box-shadow: 0 0 0 4px rgba(227,155,60,.22); }

/* ---------- motion hooks ---------- */
.motion .pc-in { opacity: 0; }
.route-line path { stroke-dasharray: 3 7; animation: r-march 1.2s linear infinite; }
@keyframes r-march { to { stroke-dashoffset: -20; } }

@media (prefers-reduced-motion: reduce) {
  .motion .pc-in { opacity: 1 !important; }
  .motion #journey .road-svg > g, .motion #journey .road-pins { opacity: 1 !important; }
  .r-strip .r-strip-road { animation: none; stroke-dashoffset: 0; }
  .r-strip .r-strip-mid { animation: none; opacity: 1; }
  .r-strip .r-strip-pin { animation: none; transform: none; }
  .route-line path, .tag:hover { animation: none !important; }
}