/* E-Commerce Road Trip 2026. Ported from handoff-roadtrip/assets/roadtrip.css.
 * Changes from the reference, all deliberate:
 *   - the @import of the handoff's own fonts is dropped; the theme already
 *     serves Public Sans and JetBrains Mono, which is what the tokens ask for.
 *   - .rt-bar and .rt-f are kept in the file but unused: the page runs inside the
 *     site's own header and footer, so it carries the real navigation and the
 *     legal links rather than a second, thinner set.
 * Everything else is the reference, byte for byte. Prefix .rt-
 */
/* Scoped to .rt-scope rather than :root and body. The reference is a standalone
 * document and may own the page; here the block sits inside the site, and a
 * global body rule at 10.5px would reset the header, the footer and every
 * other block on the page. The tokens and the type are identical, they just
 * start at the block instead of the document. */
.rt-scope{--ink:#1D1D1D;--ink-2:#4A4A4A;--mute:#7A7E83;--line:#E3E6E8;--paper:#F8F8F8;--blue:#007BFF;--blue-h:#0069D9;--live:#E5484D;--font:"roc-grotesk","Public Sans",system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,monospace;background:#fff;color:var(--ink);font:400 10.5px/1.5 var(--font);-webkit-font-smoothing:antialiased}
.rt-scope *{box-sizing:border-box}
.rt-scope a{color:var(--blue);text-decoration:none}.rt-scope a:hover{color:var(--blue-h)}
.rt-scope button{font:inherit}
.rt-w{max-width:1320px;margin:0 auto;padding:0 clamp(16px,3vw,40px) clamp(20px,2.4vw,32px)}
/* topp */
.rt-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,3vw,40px);border-bottom:1px solid var(--line)}
.rt-bar img{height:26px;width:auto;display:block}
.rt-lang{display:inline-flex;gap:2px;padding:3px;border-radius:5px;background:var(--paper)}
.rt-lang button{appearance:none;border:0;margin:0;padding:5px 10px;border-radius:3px;background:none;font:600 10px var(--mono);letter-spacing:.06em;color:var(--mute);cursor:pointer}
.rt-lang button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}
.rt-intro{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(48px,7vw,96px) 20px clamp(48px,6vw,80px)}
.rt-intro::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(29,29,29,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,29,.05) 1px,transparent 1px);background-size:88px 88px;-webkit-mask-image:radial-gradient(ellipse 60% 80% at 50% 40%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 60% 80% at 50% 40%,#000 30%,transparent 80%)}
.rt-pill{display:inline-flex;align-items:center;height:30px;padding:0 14px;border-radius:999px;background:var(--blue);color:#fff;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase}
.rt-date{margin:16px 0 0;font:500 10.5px var(--mono);letter-spacing:.06em;color:var(--mute)}
.rt-intro h1{margin:10px 0 0;font-size:clamp(36.5px,5.6vw,84px);font-weight:600;letter-spacing:-.055em;line-height:.92}
.rt-intro h1 .g{background:linear-gradient(90deg,#007BFF,#6A3BFF 60%,#A993FF);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.rt-status{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-size:10.5px;font-weight:500;color:var(--ink-2)}
.rt-status i{position:relative;width:8px;height:8px;border-radius:50%;background:var(--mute)}
.rt-status.live i{background:var(--live)}
.rt-status.live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:rt-ping 1.8s ease-out infinite}
.rt-status.done i{background:#29D583}
.rt-tags{display:flex;justify-content:center;flex-wrap:wrap;margin-top:clamp(28px,3.4vw,44px);padding:0 10px}
.rt-tag{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:14px;padding:10px 22px 10px 10px;margin:6px -6px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line),0 18px 40px rgba(16,24,40,.12);transform:rotate(var(--r));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.rt-tag:hover{color:var(--ink);transform:rotate(0) translateY(-4px)}
.rt-tag>b{font-size:clamp(12px,1.05vw,14.5px);font-weight:600;letter-spacing:-.02em}
.rt-tag .av{position:relative;width:44px;height:44px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#007BFF,#6A3BFF);display:grid;place-items:center;flex:none}
.rt-tag .av b{position:absolute;color:#fff;font-weight:600;font-size:11px;pointer-events:none}
.rt-tag .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* tidslinje */
.rt-tl{border-radius:8px;box-shadow:0 0 0 1px var(--line);padding:28px 0 32px;background:#fff}
.rt-tl h2{margin:0 28px;font-size:14px;font-weight:600;letter-spacing:-.02em}
.rt-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);overflow-x:auto;margin-top:24px;padding:0 12px 16px;scrollbar-width:thin;scroll-snap-type:x proximity}
.rt-step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 10px;scroll-snap-align:start;min-width:0}
.rt-step time{font:400 10px var(--font);color:var(--ink-2);white-space:nowrap}
.rt-step time b{font-weight:600;color:var(--ink)}
.rt-step .ln{position:relative;width:100%;height:40px;display:grid;place-items:center;margin:12px 0 14px}
.rt-step .ln::before{content:"";position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;background:#E3E6E8}
.rt-step:first-child .ln::before{left:50%}.rt-step:last-child .ln::before{right:50%}
.rt-step.past .ln::before{background:var(--blue)}
.rt-step.cur .ln::before{background:linear-gradient(90deg,var(--blue) 50%,#E3E6E8 50%)}
.rt-step .ic{position:relative;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--mute);box-shadow:0 0 0 2px #E3E6E8}
.rt-step .ic svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rt-step.past .ic,.rt-step.cur .ic{background:var(--blue);color:#fff;box-shadow:none}
.rt-step.cur .ic{width:44px;height:44px;box-shadow:0 0 0 6px rgba(0,123,255,.18)}
.rt-step.cur .ic svg{width:20px;height:20px}
.rt-step.stop .ic b{font:700 10px var(--mono)}
.rt-step h3{margin:0;font-size:11.5px;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.rt-step p{margin:6px 0 0;font-size:10px;line-height:1.45;color:var(--ink-2);text-wrap:pretty}
.rt-step.hid h3{color:var(--mute)}
.rt-step .lock{display:inline-block;margin-top:6px;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(0,123,255,.1);color:var(--blue)}
.rt-step .day{position:absolute;left:10px;top:-2px;font:500 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
/* karta */
.rt-mapbox{position:relative;height:clamp(420px,62vh,640px);border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.rt-map{position:absolute;inset:0;background:#F6F7F8}
/* Washing an OSM render down to something near Positron: strip the colour,
   lift the whites until the roads nearly disappear, and drop the contrast so
   the labels read as grey hints rather than data. The route is then the only
   saturated thing on the map, which is the point. */
.rt-map.tiles .leaflet-tile-pane{filter:grayscale(1) brightness(1.34) contrast(.48) opacity(.78)}
.rt-map:not(.tiles){background-image:linear-gradient(rgba(29,29,29,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(29,29,29,.055) 1px,transparent 1px);background-size:88px 88px}
.rt-map .leaflet-control-attribution{font:10px var(--font);background:rgba(255,255,255,.8)}
.rt-map .leaflet-control-zoom{border:0!important;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(16,24,40,.08)!important;border-radius:6px!important;overflow:hidden}
.rt-map .leaflet-control-zoom a{color:var(--ink)!important;width:36px!important;height:36px!important;line-height:36px!important}
.rt-city{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font:500 10px var(--mono);letter-spacing:.06em;color:#8A8F96;transform:translate(0,-2px)}
.rt-city i{width:5px;height:5px;border-radius:50%;background:#B9BEC3;flex:none}
.rt-mk{background:none;border:0}
/* The mark ships with width/height 64 on the <svg> and a viewBox that does not
   start at 0, so height:auto let it render at its intrinsic size and spill out
   of the 38px box. Both axes are constrained and the box clips. */
.rt-base{width:38px;height:38px;border-radius:6px;background:#fff;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 1.5px var(--ink),0 8px 20px rgba(16,24,40,.22)}
.rt-base img{width:24px;height:24px;max-width:24px;max-height:24px;object-fit:contain;display:block}
.rt-stop{position:relative;width:34px;height:34px}
.rt-stop .lg{width:34px;height:34px;border-radius:5px;display:grid;place-items:center;overflow:hidden;background:#fff;color:var(--mute);font:600 10.5px var(--font);box-shadow:0 0 0 1.5px #C9CDD1,0 8px 20px rgba(16,24,40,.16)}
.rt-stop .lg img{width:100%;height:100%;object-fit:cover}
.rt-stop b{position:absolute;right:-7px;top:-7px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;display:grid;place-items:center;background:#fff;color:var(--mute);font:700 10px var(--mono);box-shadow:0 0 0 1.5px #C9CDD1}
.rt-stop.rev .lg{background:#141416;color:#fff;font-size:12px;box-shadow:0 0 0 2px #fff,0 8px 20px rgba(16,24,40,.28)}
.rt-stop.rev b{background:var(--blue);color:#fff;box-shadow:0 0 0 2px #fff}
.rt-pin{width:38px;height:38px;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#9B8CFF,#3F6CFF);box-shadow:0 0 0 3px #fff,0 8px 20px rgba(16,24,40,.25);transition:transform .2s;display:grid;place-items:center;color:#fff}
.rt-pin img{width:100%;height:100%;object-fit:cover;display:block}
.rt-pin svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rt-pin.on{transform:scale(1.25)}
.rt-car{position:relative;width:22px;height:22px}
.rt-car i{position:absolute;inset:0;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px #fff,0 8px 20px rgba(229,72,77,.45)}
.rt-car::before{content:"";position:absolute;inset:-14px;border-radius:50%;background:rgba(229,72,77,.25);animation:rt-ping 2s ease-out infinite}
.rt-car b{position:absolute;left:30px;top:50%;transform:translateY(-50%);white-space:nowrap;padding:5px 10px;border-radius:999px;background:var(--ink);color:#fff;font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.leaflet-tooltip.rt-tt{background:var(--ink);color:#fff;border:0;border-radius:4px;box-shadow:none;font:500 10px var(--font);padding:6px 10px}
.leaflet-tooltip.rt-tt::before{display:none}
/* bilder */
.rt-full{max-width:none;padding-left:clamp(8px,1vw,16px);padding-right:clamp(8px,1vw,16px)}
.rt-full .rt-gh{max-width:1320px;margin:0 auto 16px;padding:0 clamp(8px,2vw,24px)}
.rt-grid{columns:5 220px;column-gap:8px}
.rt-post{break-inside:avoid;margin:0 0 8px;border-radius:6px;overflow:hidden;background:#E9EBEE;cursor:pointer;position:relative;display:block}
.rt-post .m{position:relative;background:#E9EBEE;--slot-bg:#E9EBEE}
.rt-post:nth-child(5n+1) .m{aspect-ratio:4/5}.rt-post:nth-child(5n+2) .m{aspect-ratio:1}.rt-post:nth-child(5n+3) .m{aspect-ratio:2/3}.rt-post:nth-child(5n+4) .m{aspect-ratio:4/3}.rt-post:nth-child(5n) .m{aspect-ratio:3/4}
.rt-post .m img,.rt-post .m video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.rt-post:hover .m img{transform:scale(1.04)}
.rt-post .m image-slot{position:absolute;inset:0;width:100%;height:100%}
.rt-post .vid{position:absolute;left:12px;top:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;background:rgba(29,29,29,.7);color:#fff;font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase;pointer-events:none;z-index:2}
.rt-post .vid svg{width:10px;height:10px;fill:currentColor}
.rt-post .b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 14px 14px;background:linear-gradient(180deg,transparent,rgba(8,8,12,.78));color:#fff;pointer-events:none}
.rt-post .meta{font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.rt-post p{margin:4px 0 0;font-size:10px;line-height:1.4;font-weight:500;color:#fff;text-wrap:pretty}
.rt-post.on{box-shadow:0 0 0 3px var(--blue)}
.rt-empty{padding:40px 24px;text-align:center;border-radius:8px;background:var(--paper)}
.rt-empty b{display:block;font-size:12.5px;font-weight:600}
.rt-empty p{margin:6px 0 0;color:var(--ink-2);font-size:10px}
/* kontakt */
.rt-cta>div{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 24px;border-radius:8px;background:var(--paper)}
.rt-cta h2{margin:0;font-size:12px;font-weight:600;letter-spacing:-.02em}
.rt-cta p{margin:0;font-size:10px;color:var(--ink-2)}
.rt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border-radius:5px;border:0;font:600 10px var(--font);cursor:pointer;white-space:nowrap;transition:background .18s;align-self:flex-start}
.rt-btn.p{background:var(--blue);color:#fff}.rt-btn.p:hover{background:var(--blue-h);color:#fff}
.rt-btn.s{background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line)}.rt-btn.s:hover{background:#F0F0F0;color:var(--ink)}
.rt-share{display:flex;gap:8px}
.rt-ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--ink);border:0;cursor:pointer;box-shadow:0 0 0 1px var(--line);transition:background .18s}
.rt-ic:hover{background:#F0F0F0;color:var(--ink)}
.rt-ic svg{width:16px;height:16px}
.rt-ic.ok{background:rgba(41,213,131,.15);color:#15965A}
.rt-f{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;max-width:1320px;margin:clamp(32px,4vw,56px) auto 0;padding:22px clamp(16px,3vw,40px) 88px;border-top:1px solid var(--line);font-size:10px;color:var(--mute)}
.rt-f nav{display:flex;gap:18px}.rt-f a{color:var(--ink-2)}
/* förhandsvisning (endast design) */
.rt-prev{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:1000;display:flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 12px 30px rgba(16,24,40,.3)}
.rt-prev>span{font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#B0B6BA;margin-right:6px}
.rt-prev button{appearance:none;border:0;margin:0;padding:7px 12px;border-radius:999px;background:none;color:#DAE0E4;font:600 10px var(--font);cursor:pointer}
.rt-prev button[aria-pressed=true]{background:#fff;color:var(--ink)}
@keyframes rt-ping{to{transform:scale(2.4);opacity:0}}
@media(max-width:900px){.rt-tag{margin:6px 4px}.rt-mapbox{height:440px}}
@media(prefers-reduced-motion:reduce){.rt-status.live i::after,.rt-car::before{animation:none}}
/* medlemssida */
.rt-back{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:500;color:var(--ink-2)}.rt-back:hover{color:var(--ink)}
.rt-mem{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center;padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,6vw,72px)}
.rt-mem .ph{position:relative;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:linear-gradient(135deg,#007BFF,#6A3BFF);--slot-bg:transparent;transform:rotate(-2deg);box-shadow:0 30px 80px rgba(16,24,40,.18)}
.rt-mem .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.rt-mem .ph image-slot{position:absolute;inset:0;width:100%;height:100%}
.rt-mem .ph>b{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(67px,9.8vw,140px);font-weight:600;color:rgba(255,255,255,.9);letter-spacing:-.05em;pointer-events:none}
.rt-mem h1{margin:14px 0 0;font-size:clamp(33.5px,4.9vw,73px);font-weight:600;letter-spacing:-.055em;line-height:.92}
.rt-mem .role{margin:16px 0 0;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.rt-mem .bio{margin:24px 0 0;font-size:clamp(12px,.98vw,14.5px);line-height:1.55;color:var(--ink-2);max-width:40ch;text-wrap:pretty}
.rt-soon{display:inline-flex;align-items:center;margin-top:24px;padding:5px 10px;border-radius:999px;background:rgba(0,123,255,.1);color:var(--blue);font:600 10px var(--mono);letter-spacing:.1em;text-transform:uppercase}
.rt-mem .others{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;padding-top:24px;border-top:1px solid var(--line)}
.rt-mem .others span{width:100%;font:500 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.rt-mem .others a{padding:8px 14px;border-radius:999px;box-shadow:0 0 0 1px var(--line);font-size:10px;font-weight:500;color:var(--ink)}
.rt-mem .others a:hover{box-shadow:0 0 0 1px var(--blue);color:var(--blue)}
@media(max-width:800px){.rt-mem{grid-template-columns:1fr}.rt-mem .ph{max-width:420px}}
.rt-mt{margin-top:32px}
#rt-member{padding-top:28px}