/* ==========================================================================
   Switzerland + Greece — "A journey in altitude"
   Swiss International Style, grounded in the subject: alpine rail + topography.
   Display: Space Grotesk · Body: IBM Plex Sans · Data: IBM Plex Mono.
   Signature: the trip's elevation profile (hero) + a per-day altitude spine
   whose accent pivots from Swiss signal-red (Alps) to Aegean blue (Greece).
   ========================================================================== */

:root {
  --granite:  #12161b;   /* ink / dark panels */
  --granite-2:#1b222b;
  --glacier:  #eceff1;   /* cool page background (not cream) */
  --snow:     #ffffff;   /* cards */
  --slate:    #5a6672;   /* muted text */
  --rule:     #d6dde0;   /* hairlines */
  --signal:   #e4002b;   /* Swiss signal red — Alps accent */
  --signal-d: #b60021;
  --aegean:   #0b79a8;   /* Aegean blue — Greece accent */
  --aegean-d: #085f85;

  --display: "Space Grotesk", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --shadow: 0 1px 2px rgba(18,22,27,.06), 0 10px 30px rgba(18,22,27,.07);
  --radius: 4px;   /* Swiss precision: minimal rounding */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--body);
  color: var(--granite); background: var(--glacier);
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
a { color: var(--signal-d); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--display); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* Monospace data utility — times, distances, meters, °C, dates read as data. */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.eyebrow {
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .16em;
  font-size: .68rem; color: var(--slate);
}

/* ---- Password gate ------------------------------------------------------ */
.gate {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 20px;
  background: var(--granite);
  background-image: radial-gradient(1200px 600px at 70% -10%, #24303c 0%, transparent 60%);
}
.gate__card {
  background: var(--snow); border-radius: var(--radius); padding: 34px 28px;
  width: 100%; max-width: 360px; text-align: left; box-shadow: var(--shadow);
  border-top: 3px solid var(--signal);
}
.gate__title { margin: 0 0 4px; font-size: 1.4rem; color: var(--granite); }
.gate__sub { margin: 0 0 22px; color: var(--slate); font-family: var(--mono); font-size: .82rem; }
.gate__input {
  width: 100%; padding: 12px 14px; font-size: 1rem; font-family: var(--mono);
  border: 1px solid var(--rule); border-radius: var(--radius); margin-bottom: 12px; background: #fafbfb;
}
.gate__input:focus { outline: 2px solid var(--signal); border-color: transparent; }
.gate__btn {
  width: 100%; padding: 12px; font: 600 .8rem/1 var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: #fff; background: var(--signal); border: 0; border-radius: var(--radius); cursor: pointer;
}
.gate__btn:hover { background: var(--signal-d); }
.gate__error { color: var(--signal-d); font-size: .85rem; margin: 12px 0 0; font-family: var(--mono); }
.gate__note { color: var(--slate); font-size: .74rem; margin: 20px 0 0; }

/* ---- Top bar ------------------------------------------------------------ */
.topbar {
  position: sticky; top: 0; z-index: 500; display: flex; align-items: center; gap: 14px;
  background: var(--granite); color: #fff; padding: 11px 18px;
  padding-top: calc(11px + env(safe-area-inset-top)); border-bottom: 2px solid var(--signal);
}
.topbar__brand { font-family: var(--display); font-weight: 700; font-size: 1.02rem; white-space: nowrap; letter-spacing: -.01em; }
.topbar__dates { font-family: var(--mono); opacity: .6; font-weight: 400; font-size: .72rem; margin-left: 8px; }
.topbar__nav { display: flex; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.topbar__nav a {
  color: #c4ced6; padding: 6px 10px; border-radius: var(--radius);
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
}
.topbar__nav a:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.topbar__nav a.active { color: #fff; box-shadow: inset 0 -2px 0 var(--signal); border-radius: 0; }
.topbar__menu { display: none; margin-left: auto; background: none; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; }
@media (max-width: 760px) {
  .topbar__menu { display: block; }
  .topbar__nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    background: var(--granite); padding: 8px; gap: 2px; border-bottom: 2px solid var(--signal); }
  .topbar__nav.open { display: flex; }
  .topbar__nav a { padding: 12px; }
}

/* ---- Layout ------------------------------------------------------------- */
#main { max-width: 1000px; margin: 0 auto; padding: 24px 18px 72px; }
.view > h2 { font-size: 1.7rem; margin: 0 0 4px; }
.view .lead { color: var(--slate); margin: 0 0 22px; max-width: 62ch; }
.card {
  background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 14px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.grid { display: grid; gap: 14px; }
@media (min-width: 640px) { .grid.cols-2 { grid-template-columns: 1fr 1fr; } }
.grid .card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(18,22,27,.09), 0 16px 36px rgba(18,22,27,.12); }
h3 { font-size: 1.12rem; }

/* ---- HERO: the elevation profile is the thesis ------------------------- */
.hero {
  position: relative; overflow: hidden; border-radius: 6px; margin-bottom: 26px;
  background: var(--granite); color: #fff; box-shadow: var(--shadow); isolation: isolate;
}
.hero__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%;
  object-fit: cover; object-position: center 35%; }
.hero__grad { position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(18,22,27,.55) 0%, rgba(18,22,27,.35) 30%, rgba(18,22,27,.92) 100%); }
.hero__top { padding: 34px 26px 8px; }
.hero__eyebrow { color: #cdd6dd; }
.hero__title { margin: 12px 0 0; font-size: clamp(2.3rem, 7vw, 4rem); letter-spacing: -.035em; text-shadow: 0 2px 20px rgba(0,0,0,.4); }
.hero__title span { color: var(--signal); }
.hero__thesis { margin: 10px 0 0; max-width: 42ch; font-size: 1.02rem; color: #e7ecef; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.hero__profile { display: block; width: 100%; height: auto; margin-top: 6px; }
.hero__profile .area { fill: url(#altFill); }
.hero__profile .line { fill: none; stroke: var(--signal); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 4000; stroke-dashoffset: 4000; animation: draw 1.9s ease .25s forwards; }
.hero__profile .line.sea { stroke: var(--aegean); }
.hero__profile .node { fill: #fff; }
.hero__profile text { font-family: var(--mono); fill: #cdd6dd; font-size: 13px; }
.hero__profile .peak { fill: #fff; font-weight: 500; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---- Stats / pills / warnings ------------------------------------------ */
.stats { display: flex; flex-wrap: wrap; gap: 26px; }
.stat b { display: block; font-family: var(--display); font-size: 1.9rem; letter-spacing: -.03em; color: var(--granite); }
.stat span { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--slate); }

.pill {
  display: inline-block; font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .08em;
  padding: 3px 8px; border: 1px solid var(--rule); border-radius: 2px; color: var(--slate); margin: 0 6px 6px 0; background: #fff;
}
.pill.buffer { border-color: var(--signal); color: var(--signal-d); }
.pill.transfer { border-color: #b9c6cf; color: #3f6f88; }
.pill.hike { border-color: #9ac0a6; color: #2c6b45; }

.warn { background: #fff; border: 1px solid var(--rule); border-left: 3px solid var(--signal); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; }
.warn h3 { margin: 0 0 10px; font-size: .82rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--signal-d); }
.warn ul { margin: 0; padding-left: 18px; }
.warn li { margin-bottom: 7px; font-size: .93rem; }

/* ---- ITINERARY: altitude spine ----------------------------------------- */
.route { list-style: none; margin: 0; padding: 0; }
.route__day { position: relative; display: grid; grid-template-columns: 86px 1fr; column-gap: 16px; padding-bottom: 20px; --spine: var(--signal); }
.route__day--sea { --spine: var(--aegean); }
/* Spine runs along the RIGHT edge of the rail (next to the card); the altitude
   text sits to its LEFT so the two never overlap. */
.route__day::before { content: ""; position: absolute; left: 78px; top: 6px; bottom: -2px; width: 2px; background: var(--spine); opacity: .85; }
.route__day:last-child::before { display: none; }
.route__rail { position: relative; text-align: right; padding-right: 20px; }
.route__node { position: absolute; left: 78px; top: 8px; width: 15px; height: 15px; border-radius: 50%;
  transform: translateX(-50%); background: var(--snow); border: 3px solid var(--spine); z-index: 1; }
.route__day--buffer .route__node { border-style: dashed; }
.route__alt { display: block; margin-top: 34px; font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 1.02rem; font-weight: 500; color: var(--granite); letter-spacing: -.02em; white-space: nowrap; }
.route__alt small { display: block; font-size: .6rem; letter-spacing: .12em; color: var(--slate); margin-top: -2px; }
.route__day--sea .route__alt { color: var(--aegean-d); }

.daycard { background: var(--snow); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease; }
.daycard:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(18,22,27,.09), 0 16px 36px rgba(18,22,27,.12); }
.route__day--sea .daycard { border-top: 2px solid var(--aegean); }

/* Blur-fill photo: the WHOLE image (contain) over a blurred copy of itself.
   Two <img> elements (not a CSS-var background) so relative paths resolve
   against the document — works on GitHub Pages subpaths. */
.day__photo { position: relative; margin: 0; width: 100%; height: 240px; overflow: hidden; background: var(--granite); }
.day__photo-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: blur(24px) brightness(.72) saturate(1.15); transform: scale(1.25); z-index: 0; }
.day__photo-fg { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.daycard:hover .day__photo-fg { transform: scale(1.03); }
@media (min-width: 640px) { .day__photo { height: 320px; } }

.daycard__body { padding: 16px 18px; }
.daycard__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.daycard__date { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--slate); }
.daycard__tags { margin-left: auto; }
.daycard h3 { margin: 2px 0 6px; }
.daycard p { margin: 0 0 10px; color: var(--slate); font-size: .95rem; }
.daycard ul { margin: 0; padding-left: 18px; font-size: .93rem; }
.daycard li { margin-bottom: 4px; }
.daycard__link { display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.route__day--sea .daycard__link, .route__day--sea a { color: var(--aegean-d); }
@media (max-width: 520px) {
  .route__day { grid-template-columns: 66px 1fr; column-gap: 10px; }
  .route__day::before, .route__node { left: 60px; }
  .route__rail { padding-right: 14px; }
  .route__alt { font-size: .82rem; }
}

/* ---- Buttons ------------------------------------------------------------ */
.btn { display: inline-block; padding: 9px 13px; border-radius: var(--radius); font-family: var(--mono); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  background: var(--granite); color: #fff !important; text-decoration: none !important; margin: 4px 6px 0 0; border: 1px solid var(--granite); }
.btn:hover { background: #000; }
.btn.ghost { background: #fff; color: var(--granite) !important; border-color: var(--rule); }
.btn.ghost:hover { border-color: var(--granite); background: #fff; }
.btn.gmaps { background: var(--signal); border-color: var(--signal); }
.btn.gmaps:hover { background: var(--signal-d); }

/* ---- Trail detail ------------------------------------------------------- */
.trail-facts { display: flex; flex-wrap: wrap; gap: 22px; margin: 16px 0; padding-bottom: 4px; }
.trail-facts .stat b { font-size: 1.4rem; font-family: var(--mono); }
.back-link { display: inline-block; margin-bottom: 12px; font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

/* ---- DAY DETAIL PAGE ---------------------------------------------------- */
.daydetail__hero { position: relative; margin: 0 0 16px; width: 100%; height: 300px; overflow: hidden; background: var(--granite); border-radius: 6px; box-shadow: var(--shadow); }
@media (min-width: 640px) { .daydetail__hero { height: 420px; } }
.daydetail__meta { font-family: var(--mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--slate); }
.daydetail > h2 { font-size: 1.9rem; margin: 6px 0 8px; }
.daydetail--sea > h2 { }
.daydetail__tags { margin-bottom: 14px; }
.daydetail__h { font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--slate); margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }

/* Step-by-step plan */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.step { display: grid; grid-template-columns: 40px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.step:last-child { border-bottom: 0; }
.step__n { font-family: var(--mono); font-size: .82rem; font-weight: 500; color: var(--signal); padding-top: 2px; }
.daydetail--sea .step__n { color: var(--aegean-d); }
.step__body b { font-family: var(--display); font-weight: 500; font-size: 1.02rem; }
.step__body p { margin: 4px 0 0; color: var(--slate); font-size: .95rem; }

/* Hike panel */
.hike { margin-top: 26px; background: var(--snow); border: 1px solid var(--rule); border-top: 3px solid var(--signal); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); }
.hike__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.hike__head h3 { margin: 0; }
.hike__map { height: 340px; margin: 8px 0 14px; border: 1px solid var(--rule); border-radius: var(--radius); background: #dfe6e8; }
.hike__notes { color: var(--slate); font-size: .95rem; margin: 6px 0 12px; }
.hike__links { display: flex; flex-wrap: wrap; align-items: center; }

/* Elevation chart */
.ev { display: block; width: 100%; height: auto; margin: 6px 0 14px; overflow: visible; }
.ev-line { fill: none; stroke: var(--signal); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.ev-dot { fill: #fff; stroke: var(--signal); stroke-width: 2; }
.ev-lbl { font-family: var(--mono); fill: var(--slate); font-size: 12px; }

/* Prev / next day nav */
.daynav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--rule); }
.daynav__a { font-family: var(--mono); font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slate); max-width: 46%; }
.daynav__a--next { text-align: right; margin-left: auto; }
.daynav__a:hover { color: var(--signal-d); }

/* ---- Photo gallery ------------------------------------------------------ */
.gallery { margin-top: 22px; }
.gallery__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 620px) { .gallery__grid { grid-template-columns: repeat(4, 1fr); } }
.gallery__item { padding: 0; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; cursor: pointer; background: var(--granite); aspect-ratio: 4 / 3; }
.gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease, opacity .2s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.gallery__note { font-family: var(--mono); font-size: .72rem; color: var(--slate); margin: 10px 0 0; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center;
  background: rgba(10, 13, 17, .94); padding: 40px 16px; }
.lightbox__fig { margin: 0; max-width: 1100px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.lightbox__fig img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.lightbox__fig figcaption { margin-top: 12px; font-family: var(--mono); font-size: .78rem; color: #cdd6dd; text-align: center; }
.lightbox__fig figcaption a { color: #fff; }
.lightbox__close { position: absolute; top: 14px; right: 16px; width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 1.1rem; cursor: pointer; }
.lightbox__close:hover { background: rgba(255,255,255,.22); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 64px; border: 0; border-radius: var(--radius);
  background: rgba(255,255,255,.10); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; }
.lightbox__nav:hover { background: rgba(255,255,255,.2); }
.lightbox__prev { left: 12px; }
.lightbox__next { right: 12px; }
@media (max-width: 560px) { .lightbox__nav { width: 40px; height: 52px; font-size: 1.5rem; } }

/* ---- Map ---------------------------------------------------------------- */
#map-canvas { height: 68vh; min-height: 380px; border-radius: var(--radius); border: 1px solid var(--rule); }
.legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.legend span { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: .72rem; color: var(--slate); }
.legend i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.map-btns { margin-bottom: 12px; }
.leaflet-popup-content { font-family: var(--body); font-size: .9rem; }
.leaflet-popup-content b { font-family: var(--display); color: var(--granite); }
.map-marker { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); display: grid; place-items: center; }
.map-marker span { transform: rotate(45deg); font-size: 12px; }

/* ---- Checklist ---------------------------------------------------------- */
.check-item { display: flex; gap: 10px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--rule); }
.check-item:last-child { border-bottom: 0; }
.check-item input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--signal); }
.check-item .ci-body b { display: block; font-family: var(--display); font-weight: 500; }
.check-item .ci-body span { font-size: .85rem; color: var(--slate); }
.check-item .ci-day { margin-left: auto; font-family: var(--mono); font-size: .72rem; color: var(--slate); white-space: nowrap; }

/* ---- Tables ------------------------------------------------------------- */
table.mini { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.mini th, table.mini td { text-align: left; padding: 9px 6px; border-bottom: 1px solid var(--rule); vertical-align: top; }
table.mini th { font-family: var(--mono); color: var(--slate); font-weight: 500; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; }

/* ---- Footer ------------------------------------------------------------- */
.footer { text-align: center; color: var(--slate); font-family: var(--mono); font-size: .72rem;
  padding: 26px 16px calc(26px + env(safe-area-inset-bottom)); }
.offline-badge { display: inline-block; margin-right: 8px; color: var(--signal-d); font-weight: 600; }

/* ---- Motion ------------------------------------------------------------- */
.view { animation: fadeUp .34s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; transition: none !important; }
  .hero__profile .line { stroke-dashoffset: 0; }
}