@charset "UTF-8";
/* Bloggens tillägg till guidens formsystem (guide.css är en kopia av guidens style.css). */
html{scroll-behavior:smooth}
main{max-width:860px;margin:0 auto;padding:var(--gutter) var(--gutter) 0}
@media (min-width:1040px){main{max-width:860px;margin:0 auto;padding:28px 24px 0}}
.appbar .index-button{text-decoration:none;color:var(--ink);padding:0 16px}
:target{scroll-margin-top:calc(var(--appbar) + 12px)}

/* Om resan och kategorierna */
.about{margin:16px 0;padding:20px;border:1px solid var(--rule);border-radius:var(--r-lg);background:var(--surface)}
.about h2{font-weight:800;font-stretch:var(--condensed);text-transform:uppercase;font-size:1.375rem;letter-spacing:.01em;margin-bottom:8px}
.about p{color:var(--ink-2);max-width:62ch}
.about p+p{margin-top:10px}
.legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:16px;padding-top:14px;border-top:1px solid var(--hair)}
.legend-item{display:inline-flex;align-items:center;gap:8px;font-size:.875rem;font-weight:600}

/* Linjekartan över dagarna */
.day-map .line-stop{text-decoration:none;color:var(--ink)}
.day-map .line-stop.pending .line-name strong{color:var(--muted);font-weight:600}
.day-map .line-stop.pending .badge{color:var(--muted)}
.day-map .badge.station{width:38px;height:38px}
.day-map .badge.station small{font-size:.5rem;text-transform:uppercase;letter-spacing:.04em}

/* En dag */
#days{display:flex;flex-direction:column;gap:20px;margin-top:20px}
.day{background:var(--surface);border:1px solid var(--rule);border-radius:var(--r-xl);overflow:hidden;border-top:6px solid #F08C00}
.example-note{margin:0;padding:10px 20px;background:var(--mark-soft);border-bottom:1px solid var(--mark-rule);font-size:.875rem;font-weight:600}
.day-head{display:flex;gap:14px;align-items:flex-start;padding:20px 20px 0}
.day-head .badge.station.lg{width:56px;height:56px;font-size:1.25rem}
.day-head .badge.station small{font-size:.5625rem;text-transform:uppercase;letter-spacing:.06em}
.day-date{font-family:var(--mono);font-size:.75rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.day-head h2{font-weight:800;font-stretch:var(--condensed);text-transform:uppercase;font-size:1.75rem;line-height:1.05;letter-spacing:.01em;margin:2px 0 6px}
.day-summary{color:var(--ink-2)}
.day-stats{display:flex;flex-wrap:wrap;gap:8px;margin:16px 20px 0;padding:0}
.day-stats>div{padding:8px 12px;border-radius:10px;background:var(--sunk)}
.day-stats dt{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.day-stats dd{margin:0;font-weight:700}
.day-photos{margin-top:16px}
.day-photos .gallery-slide{height:280px}
@media (min-width:700px){.day-photos .gallery-slide{height:400px}}
.day-text{padding:16px 20px 0;font-size:1.0625rem;line-height:1.6}
.day-text p+p{margin-top:12px}
.byline{font-family:var(--mono);font-size:.75rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}

/* Dagens tidslinje: varje upplevelse är en station på dagens linje, märkt med guidens kategori. */
.moments{list-style:none;margin:0;padding:20px 20px 24px}
.moment{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative}
.moment+.moment{margin-top:16px}
.moment-rail{position:relative;display:flex;justify-content:center}
.moment-rail::before{content:"";position:absolute;top:0;bottom:-16px;left:50%;width:4px;margin-left:-2px;background:#F08C00;border-radius:2px}
.moment:last-child .moment-rail::before{bottom:auto;height:28px}
.moment-rail .badge{position:relative;margin-top:2px}
.moment-card{border:1px solid var(--rule);border-left:4px solid var(--line);border-radius:var(--r-md);padding:12px 14px 14px;background:var(--surface);min-width:0}
.moment-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.moment-time{font-family:var(--mono);font-weight:600;font-size:.875rem}
.moment-line{font-size:.75rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)}
.moment-card h4{margin:4px 0 6px;font-size:1.125rem;line-height:1.25;font-weight:800}
.moment-card p{color:var(--ink-2)}
.moment-card p+p{margin-top:8px}
.moment-card .gallery{margin:12px -14px 0;border-radius:0}
.moment-card .image-credit{margin:0 -14px}
.moment-card .facts{margin:12px 0 0}
.place-map{height:200px;margin-top:12px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--rule)}
.empty{padding:24px;text-align:center;color:var(--muted)}
.page-footer{padding-bottom:48px}
/* Guiden döljer linjekartan på bred skärm, där den ligger i sidomenyn. Bloggen har ingen sidomeny. */
.start-map{display:block!important;margin-top:16px}

/* Splitflap-tecken */
.flap{display:inline-block;min-width:.62em;text-align:center}
.flap.space{min-width:.35em}
.flap.flip{animation:flap .09s ease-out}
@keyframes flap{0%{transform:perspective(200px) rotateX(-80deg);opacity:.4}100%{transform:none;opacity:1}}
.board h1 .flap.tile{position:relative;min-width:.74em;margin-right:.06em;padding:0 .02em;border-radius:.06em;background:#24282E;box-shadow:inset 0 -2px 0 #0B0C0E}
.board h1 .flap.tile::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#15171A}
.board h1{will-change:transform;white-space:nowrap}
.board h1 .flap.tile{font-size:.8em;min-width:.7em;margin-right:.05em}
.board-status{display:inline-flex;min-height:1.2em}
.board-status .flap{min-width:.6em}

/* Tåget på linjekartan över dagarna */
.day-map{position:relative}
.map-train{position:absolute;left:20px;top:0;width:22px;height:34px;margin:-17px 0 0 -11px;border-radius:9px 9px 6px 6px;background:#15171A;border:3px solid #F08C00;box-shadow:0 3px 8px #15171A55;z-index:2;opacity:0}
.map-train::before{content:"";position:absolute;left:3px;right:3px;top:4px;height:9px;border-radius:3px;background:#FFD200}
.map-train::after{content:"";position:absolute;left:5px;right:5px;bottom:4px;height:3px;border-radius:2px;background:#F08C00}
.map-train.go{opacity:1;transition:top 2.4s cubic-bezier(.45,0,.2,1),opacity .3s}

/* Tåget som följer dagens linje när man skrollar */
.moments{position:relative}
.rail-train{position:absolute;left:34px;top:20px;width:20px;height:30px;margin-left:-10px;border-radius:8px 8px 5px 5px;background:#15171A;border:3px solid #F08C00;z-index:3;box-shadow:0 2px 6px #15171A55;will-change:transform}
.rail-train::before{content:"";position:absolute;left:3px;right:3px;top:3px;height:8px;border-radius:2px;background:#FFD200}

/* Upplevelser och textblock glider in */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease-out,transform .6s ease-out}
.reveal.in{opacity:1;transform:none}

/* Bilder och video med parallax */
.day .gallery-slide img,.day .gallery-slide video{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.14);will-change:transform}
.moment-card .gallery-slide{height:300px}
@media (min-width:700px){.moment-card .gallery-slide{height:440px}}
.gallery-slide.is-video::after{content:"▶ Video";position:absolute;top:10px;left:10px;padding:2px 8px;border-radius:6px;background:#15171ACC;color:#fff;font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}

/* Flyganimationen */
.anim{position:relative;margin:18px 0 0;background:#15171A;color:#fff;overflow:hidden}
.fl-stage{position:relative;aspect-ratio:1000/640;overflow:hidden}
.fl-stage svg{position:absolute;inset:0;width:100%;height:100%;will-change:transform}
.fl-sphere{fill:#1C2026}
.fl-grat{fill:none;stroke:#2A2F37;stroke-width:1}
.fl-land{fill:#353A43}
.fl-borders{fill:none;stroke:#23272E;stroke-width:1}
.fl-base{fill:none;stroke:#FFFFFF33;stroke-width:2.5;stroke-dasharray:2 7;stroke-linecap:round}
.fl-live{fill:none;stroke:#F08C00;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
.fl-place circle{fill:#fff;stroke:#15171A;stroke-width:3}
.fl-place text{fill:#fff;font-family:var(--sans);font-weight:700;font-size:22px;paint-order:stroke;stroke:#15171A;stroke-width:5px}
.fl-plane path{fill:#FFD200;stroke:#15171A;stroke-width:1.5;transform:scale(1.5)}
.fl-glow{fill:#FFD20033;animation:glow 1.6s ease-in-out infinite}
.is-live.done .fl-glow{fill:#E5171F55;animation:glow .9s ease-in-out infinite}
@keyframes glow{50%{fill:#FFD20011}}
.fl-board{position:absolute;top:12px;left:12px;padding:10px 12px;border-radius:12px;background:#0E0F12E6;border:1px solid #34373D;display:grid;gap:4px;min-width:200px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.fl-row{display:grid;grid-template-columns:76px auto 1fr;align-items:baseline;gap:8px}
.fl-row span{font-family:var(--mono);font-size:.6875rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--board-muted)}
.fl-row b{font-family:var(--mono);font-size:1.375rem;font-weight:600;color:#FFD200;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.fl-row em{font-style:normal;font-family:var(--mono);font-size:.75rem;color:var(--board-muted);text-transform:uppercase}
.fl-row.sub b{font-size:.875rem;color:#fff}
.fl-status{position:absolute;left:12px;right:12px;bottom:44px;display:flex;justify-content:center;font-family:var(--mono);font-weight:600;font-size:.875rem;letter-spacing:.06em;color:#fff;text-shadow:0 1px 3px #000}
.fl-status:empty{display:none}
.fl-status .flap{min-width:.62em;background:#0E0F12CC;padding:2px 0;margin-right:1px;border-radius:2px}
.fl-facts{position:absolute;left:12px;bottom:40px;display:grid;grid-template-columns:1fr 1fr;gap:6px;max-width:50%;opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.anim-flight.done .fl-status{opacity:0}
.anim-flight.done .fl-facts{opacity:1;transform:none}
.fl-facts div{padding:6px 10px;border-radius:8px;background:#0E0F12E6;border:1px solid #34373D}
.fl-facts dt{font-family:var(--mono);font-size:.625rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--board-muted)}
.fl-facts dd{margin:0;font-weight:700;font-size:.875rem}

.fl-replay{position:absolute;right:12px;bottom:10px;padding:4px 10px;border-radius:999px;background:#FFFFFF1F;color:#fff;font-size:.75rem;font-weight:700;opacity:0;transition:opacity .3s}
.anim-flight.done .fl-replay{opacity:1}
.anim figcaption{position:absolute;left:12px;bottom:12px;right:120px;font-size:.6875rem;color:var(--board-muted)}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.flap.flip{animation:none}}
/* På telefon ligger klockorna och fakta under kartan i stället för över den. */
@media (max-width:599px){
 .anim-flight{display:flex;flex-direction:column}
 .fl-board{position:static;order:2;margin:0 12px;grid-template-columns:1fr 1fr;min-width:0;border-radius:10px}
 .fl-row{grid-template-columns:auto auto;gap:2px 6px}
 .fl-row span{grid-column:1/-1}
 .fl-row b{font-size:1.125rem}
 .fl-place text{font-size:32px;stroke-width:7px}
 .fl-place circle{r:9}
 .fl-row.sub{grid-column:1/-1;grid-template-columns:auto 1fr}
 .fl-row.sub span{grid-column:auto}
 .fl-status{position:static;order:1;margin:8px 12px 0;min-height:22px;font-size:.75rem}
 .fl-facts{position:static;order:3;margin:8px 12px 0;max-width:none;grid-template-columns:1fr 1fr;transform:none}
 .anim figcaption{position:static;order:5;margin:8px 12px 12px;right:auto}
 .fl-replay{position:static;order:4;align-self:flex-start;margin:8px 12px 0}
}