/* LA landmarks look: zone skylines with location pins, freeway signs, the freeway message board. Cards keep their own dark ground so they read on any sky. */
:root{--card:#0d1f2d;--led:#ffb21e;--fwy:#00704a;--sofi:#ff6a45;--coliseum:#2fc4b2;--dtla:#ffc23d;--beach:#4fa8ff;--carson:#b48cff}
.logo .pin{width:30px;height:38px;flex:none}
.logo b{font:900 21px Overpass,sans-serif;letter-spacing:-.02em}
.logo b em{color:#ffc23d}
/* hero */
.la-hero{padding:26px 0 0}
.la-hero h1{font:900 clamp(46px,12.5vw,96px)/.92 Overpass,sans-serif;letter-spacing:-.045em;margin:0}
.la-hero h1 em{font-style:normal;color:#ffc23d;display:block}
.la-hero .lead{margin:16px 0 0}
.la-sky{display:block;width:100%;height:150px;margin-top:10px}
.la-cms{background:#2d3238;border-radius:6px;padding:10px;box-shadow:0 14px 34px rgba(0,0,0,.45)}
.la-cms .face{background:#030303;border-radius:3px;padding:16px 10px;text-align:center;font:400 clamp(21px,6vw,30px)/1.35 "DotGothic16",monospace;letter-spacing:.06em;color:var(--led);text-shadow:0 0 9px rgba(255,178,30,.6);text-transform:uppercase}
.la-posts{display:flex;justify-content:space-around;height:30px}.la-posts i{width:12px;background:#2d3238}
.la-ground{background:#06121c;position:relative;z-index:1;padding-bottom:10px}
.la-ground section{padding:30px 0}
.la-ground .k{color:#ffc23d}
.la-ground h2{font:900 clamp(32px,8vw,52px)/1 Overpass,sans-serif;letter-spacing:-.03em;text-transform:none;margin:6px 0 16px;color:#fff}
.la-ground h2 em{font-style:normal;color:#ffc23d}
.la-ground .lead,.la-ground .mute{color:#c7d6df}
/* zone strips */
.la-badge{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#06121c;flex:none}
.la-badge svg{width:20px;height:20px}
.la-badge.sm{width:26px;height:26px}.la-badge.sm svg{width:15px;height:15px}
.la-zones{display:grid;gap:14px}
.la-zone{background:var(--card);border-radius:12px;padding:16px 16px 8px;color:#fff;display:block;overflow:hidden}
.la-zone .hd{display:flex;align-items:center;gap:10px;font:800 19px Overpass,sans-serif;color:#fff;text-decoration:none}
.la-zone .hd .nm{flex:1}.la-zone .hd .sub{font:700 14px Overpass,sans-serif;color:#9fb3c0}
.la-zone .scape{display:block;width:100%;height:86px;margin-top:8px;opacity:.94}
.la-zone .gl{height:4px;border-radius:2px;margin-top:-2px}
.la-marks{position:relative;height:96px}
.la-marks a{position:absolute;top:0;left:0;color:#fff;text-decoration:none}
.la-pin{position:absolute;top:-26px;width:22px;height:22px;margin-left:-11px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.5)}
.la-pin::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--c)}
.la-lbl{position:absolute;top:10px;transform-origin:0 0;transform:rotate(30deg);white-space:nowrap;font:700 15px Overpass,sans-serif;padding:4px 0}
.la-marks a:hover .la-lbl{color:var(--c)}
.la-more{margin-top:18px}
/* green guide signs */
.la-ways{display:grid;gap:10px}
.la-way{background:var(--fwy);border-radius:10px;padding:5px;color:#fff;text-decoration:none;display:block}
.la-way .in{border:2.5px solid #fff;border-radius:7px;padding:14px 16px;display:flex;gap:14px;align-items:center}
.la-way .ar{font:900 40px/1 Overpass,Overpass,sans-serif;flex:none;width:36px;text-align:center}
.la-way .t{display:block;font:800 22px/1.1 Overpass,Overpass,sans-serif}.la-way .s{display:block;font:600 15px/1.4 Overpass,sans-serif;color:#d8efe4;margin-top:3px}
/* packs */
.la-rates{background:#fff;color:#06121c;border-radius:12px;overflow:hidden}
.la-rate{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px;border-top:1px solid #e3e8ec;color:#06121c;text-decoration:none}
.la-rate:first-child{border:0}
.la-rate .t{font:800 18px Overpass,sans-serif;display:block}.la-rate .s{font:500 15px/1.4 Overpass,sans-serif;color:#45525c;display:block}
.la-rate .pr{font:900 26px Overpass,sans-serif;letter-spacing:-.02em;white-space:nowrap;text-align:right}.la-rate .pr .per{display:block;font:600 13px Overpass,sans-serif;color:#66737d}
.la-rate.hot{background:#fff4d6}
a.la-rate:hover{background:#f3f7fa}a.la-rate.hot:hover{background:#ffeec0}
.la-fwy{background:var(--fwy);border-radius:12px;padding:6px;display:block;color:#fff;text-decoration:none}
.la-fwy .in{border:3px solid #fff;border-radius:8px;padding:16px 18px 18px;font-family:Overpass,Overpass,sans-serif}
.la-fwy .tab{display:inline-block;border:3px solid #fff;border-radius:6px;padding:2px 10px;font:800 15px Overpass,sans-serif;letter-spacing:.06em;margin-bottom:12px}
.la-fwy .t{display:block;font:800 clamp(34px,9vw,54px)/1 Overpass,sans-serif}.la-fwy .s{display:block;font:700 20px Overpass,sans-serif;margin-top:8px}
.la-fwy .arr{font:900 46px/1 Overpass,sans-serif;float:right}
.la-split>div+div{margin-top:34px}
.la-ground .chip{background:var(--card);border-color:#24394a;color:#fff}
@media(min-width:900px){
  .la-herogrid{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:end}
  .la-zones{grid-template-columns:1fr 1fr}.la-ways{grid-template-columns:repeat(3,1fr)}
  .la-split{display:grid;grid-template-columns:1fr 1fr;gap:24px}.la-split>div+div{margin-top:0}
}
/* daylight: the ground band stays dark, so its text stays light */
html.daylight main .la-ground :is(h2,h3,p,small,.k,.lead,.mute){text-shadow:none}
html.daylight main .la-ground h2{color:#fff}
html.daylight main .la-ground h2 em,html.daylight main .la-ground .k{color:#ffc23d}
html.daylight main .la-ground :is(.lead,.mute){color:#c7d6df}
html.daylight main .la-ground .chip:not(.on){background:var(--card);border-color:#24394a;color:#fff}
html.daylight main .la-hero h1 em{color:#1f6b17}
/* ---- the trip: Surface = the PCH drive, Underneath = the waterways */
.trip{padding-bottom:10px}
.trip .layer{display:inline-flex;background:var(--card);border:2px solid #24394a;border-radius:999px;padding:4px;position:relative}
.trip .layer button{flex:1;min-width:150px;position:relative;z-index:1;min-height:46px;padding:0 18px;border:0;background:none;color:#9fb3c0;font:800 15px Overpass,sans-serif;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;cursor:pointer}
.trip .layer .knob{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#ffc23d;transition:transform .55s cubic-bezier(.7,0,.2,1),background .55s}
.trip .layer button.on{color:#06121c}
.trip[data-layer=under] .layer .knob{transform:translateX(100%);background:#5fe1ff}
.here{position:sticky;top:66px;z-index:8;margin-top:16px;background:rgba(6,18,28,.95);backdrop-filter:blur(6px);border-block:1px solid #12384a;padding:10px 16px;
  font:700 14px "JetBrains Mono",monospace;letter-spacing:.05em;color:#dff7ff;display:flex;gap:8px;align-items:center}
.here b{color:#5fe1ff;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.here .ar{margin-left:auto;color:#ffc23d;white-space:nowrap}
#trip-surface,#trip-under{animation:tripin .7s cubic-bezier(.2,.9,.2,1)}
@keyframes tripin{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
.trip[data-layer=surface] #trip-under,.trip[data-layer=under] #trip-surface{display:none}
/* the drive: the Pacific down the left edge, the city on the right */
.drive{position:relative;max-width:760px;margin:0 auto;padding:0 16px 0 0}
.drive::before{content:"";position:absolute;left:0;top:0;bottom:0;width:58px;
  background:repeating-linear-gradient(180deg,transparent 0 18px,rgba(191,227,255,.22) 18px 20px),linear-gradient(90deg,#0b4a5e,#1f8a8a);animation:surf 3s linear infinite}
.drive::after{content:"";position:absolute;left:58px;top:0;bottom:0;width:7px;background:#c9a46a;opacity:.75}
@keyframes surf{to{background-position:0 40px,0 0}}
.leg{position:relative;display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 16px;padding:16px 0}
.leg .mk{position:relative;z-index:1}
.leg .mk span{position:sticky;top:120px;display:block;writing-mode:vertical-rl;transform:rotate(180deg);font:800 16px Overpass,sans-serif;letter-spacing:.04em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);padding:10px 0;margin:0 auto}
.leg .inl{font:700 13px "JetBrains Mono",monospace;color:#9fb3c0;letter-spacing:.05em;margin:0 0 8px 2px;text-transform:uppercase}
.leg .la-zone+.inl{margin-top:16px}
.trip .cap{font:700 14px "JetBrains Mono",monospace;letter-spacing:.05em;color:#dff7ff;margin:0 0 8px}.trip .cap b{color:#5fe1ff}
.tview{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:400/190;background:linear-gradient(180deg,#0a2e44,#0f5c6b 50%,#2f8f8a 72%,#f2a65a)}
.tview svg.scene{position:absolute;inset:0;width:100%;height:100%;transition:transform .7s cubic-bezier(.7,0,.2,1),opacity .5s}
.tview svg.scene.out-l{transform:translateX(-60%);opacity:0}.tview svg.scene.out-r{transform:translateX(60%);opacity:0}
.trip .what{font:600 16px/1.45 Overpass,sans-serif;color:#dff7ff;margin:10px 0 0;min-height:46px}
.tend{font:600 16px Overpass,sans-serif;color:#9fb3c0;margin:6px 0 0}
.tgo{display:block;width:100%;min-height:54px;margin-top:12px;border:0;border-radius:10px;background:#5fe1ff;color:#06121c;font:900 18px Overpass,sans-serif;cursor:pointer}
.tgo.gold,.tgo.tunder{background:#ffc23d}.tgo[hidden]{display:none}
/* underneath: survey-map cards */
#trip-under{padding-top:16px}
.tch{border-radius:12px;padding:16px 14px 12px;margin-bottom:16px;color:#dff7ff;border:1px solid #12384a;
  background:linear-gradient(#0a2230 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,#0a2230 1px,transparent 1px) 0 0/22px 22px,#041019}
.tch .hd{display:flex;align-items:center;gap:10px}.tch .hd .nm{flex:1;font:800 20px Overpass,sans-serif;color:#fff}.tch .hd .mi{font:700 14px "JetBrains Mono",monospace;color:#5fe1ff}
.tch .ic{width:38px;height:38px;border-radius:50%;border:2px solid #5fe1ff;display:grid;place-items:center;color:#5fe1ff;flex:none}
.tch .note{font:500 16px/1.45 Overpass,sans-serif;color:#9fc3d1;margin:10px 0 14px}
.compass{position:absolute;right:8px;top:8px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(4,16,25,.85);border:2px solid #5fe1ff;padding:0;cursor:pointer}
.compass .ndl{position:absolute;left:50%;top:50%;width:0;height:0;transition:transform .7s cubic-bezier(.7,0,.2,1)}
.compass .ndl::before{content:"";position:absolute;left:-6px;top:-18px;border:6px solid transparent;border-bottom:13px solid #ff6a45;border-top:0}
.compass .ndl::after{content:"";position:absolute;left:-6px;top:0;border:6px solid transparent;border-top:13px solid #dff7ff;border-bottom:0}
.tch .acts{margin:10px 0 4px}
.tturn{min-height:46px;padding:0 16px;border-radius:999px;border:2px solid #5fe1ff;background:none;color:#5fe1ff;font:800 15px Overpass,sans-serif;cursor:pointer}
.tch .course{position:relative;margin-top:8px}
.tch .course svg{position:absolute;left:0;top:0;width:70px;height:100%}
.tch .course .flow{animation:flow 1.4s linear infinite}
@keyframes flow{from{stroke-dashoffset:34}to{stroke-dashoffset:0}}
.tch .stop{position:relative;display:flex;align-items:center;width:100%;min-height:64px;padding:0 8px 0 80px;border:0;background:none;color:#fff;text-align:left;cursor:pointer;border-radius:8px}
.tch .stop .dot{position:absolute;left:35px;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#041019;border:3px solid #fff;box-shadow:0 0 0 3px #5fe1ff55;transition:all .3s}
.tch .stop b{display:block;font:800 17px Overpass,sans-serif}.tch .stop small{display:block;font:500 14px "JetBrains Mono",monospace;color:#7fa9b9;margin-top:2px}
.tch .stop.on{background:rgba(95,225,255,.08)}
.tch .stop.on .dot{width:24px;height:24px;margin:-12px 0 0 -12px;background:#5fe1ff;box-shadow:0 0 0 6px #5fe1ff40}
.tch .stop.on b{color:#5fe1ff}
.tch .you{display:none;font:800 11px "JetBrains Mono",monospace;letter-spacing:.1em;color:#06121c;background:#5fe1ff;border-radius:4px;padding:2px 6px;margin-left:8px;vertical-align:2px}
.tch .stop.on .you{display:inline-block}
.tnear{margin-top:16px;border-top:1px solid #12384a;padding-top:14px}
.tnear .t{font:700 14px "JetBrains Mono",monospace;letter-spacing:.1em;color:#5fe1ff;text-transform:uppercase;margin-bottom:10px}
.tspot{display:flex;gap:12px;align-items:center;padding:10px;border-radius:10px;background:#0b2230;margin-bottom:8px;color:#fff;text-decoration:none}
.tspot img,.tspot .ph{width:64px;height:64px;border-radius:8px;object-fit:cover;object-position:50% 20%;flex:none;background:#12384a}
.tspot b{display:block;font:800 17px Overpass,sans-serif}.tspot small{display:block;font:500 15px Overpass,sans-serif;color:#9fc3d1;margin-top:2px}
.tspot .tag{display:inline-block;font:800 11px "JetBrains Mono",monospace;letter-spacing:.08em;color:#06121c;background:#ffc23d;border-radius:4px;padding:2px 6px;margin-top:5px}
.tspot.open{background:none;border:2px dashed #24505f;padding:10px 12px}
.tspot.open .ph{width:44px;height:44px;border:2px dashed #2d6273;background:none;display:grid;place-items:center;font:900 26px Overpass,sans-serif;color:#5fe1ff}
.tspot.open b{color:#dff7ff;font-size:16px}.tspot .go{display:block;font:800 15px Overpass,sans-serif;color:#5fe1ff;margin-top:3px}
@media(min-width:900px){#trip-under{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.trip[data-layer=surface] #trip-under{display:none}.tch{margin:0}}
.tstick{position:sticky;top:108px;z-index:3;background:#041019;padding:8px 0 6px;box-shadow:0 10px 14px -10px rgba(0,0,0,.6)}
/* ---- billboards: open spots, a street bulletin on two steel posts, lamps on the catwalk */
.bb{display:block;text-decoration:none;color:inherit;margin:0 0 22px;--c:#ff6a45}
.bb .face{position:relative;background:#f4efe3;border:6px solid #1b2128;border-radius:2px;overflow:hidden;box-shadow:0 0 0 2px #2c343d,0 18px 30px rgba(0,0,0,.45)}
.bb .face::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),rgba(0,0,0,.07) calc(25% - 1px) 25%)}
.bb .face::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 120%,rgba(255,214,140,.35),transparent 60%);pointer-events:none}
.bb .stripe{position:absolute;left:0;top:0;bottom:0;width:12px;background:var(--c)}
.bb .copy{position:relative;z-index:1;padding:12px 14px 14px 28px;color:#0d1418}
.bb .tg{display:block;margin-bottom:6px;font:800 12px Overpass,sans-serif;letter-spacing:.12em;color:#6b6457;text-transform:uppercase}
.bb .big{font:900 clamp(30px,8.6vw,50px)/.95 Overpass,sans-serif;letter-spacing:-.02em;text-transform:uppercase}
.bb .big em{font-style:normal;color:var(--c)}
.bb .sub{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font:800 16px Overpass,sans-serif}
.bb .go{background:#0d1418;color:#fff;border-radius:4px;padding:5px 10px;white-space:nowrap}
.bb .walk{height:6px;background:#2c343d;margin:0 -2px}
.bb .lamps{display:flex;justify-content:space-around;height:10px;pointer-events:none}
.bb .lamps i{width:16px;height:9px;background:#2c343d;border-radius:8px 8px 0 0;box-shadow:0 -14px 30px 10px rgba(255,214,140,.22)}
.bb .posts{display:flex;justify-content:space-between;padding:0 18%;height:36px}
.bb .posts i{width:12px;background:linear-gradient(90deg,#2c343d,#47515c,#2c343d)}
.bb:hover .face{box-shadow:0 0 0 2px var(--c),0 18px 30px rgba(0,0,0,.45)}
.bb.sm{margin-bottom:12px}.bb.sm .big{font-size:clamp(24px,6.6vw,34px)}.bb.sm .posts{height:18px}.bb.sm .copy{padding:10px 12px 12px 24px}
.bbs{display:grid;gap:4px}
@media(min-width:900px){.bbs{grid-template-columns:repeat(3,1fr);gap:20px}}
/* ---- the countdown: a green freeway distance sign on two posts */
.la-dist{background:#00704a;border-radius:10px;padding:6px;box-shadow:0 16px 34px rgba(0,0,0,.45)}
.la-dist .in{border:3px solid #fff;border-radius:7px;padding:14px 16px 12px;color:#fff;font-family:Overpass,sans-serif}
.la-dist .tab{display:inline-block;border:3px solid #fff;border-radius:6px;padding:1px 10px;font:800 14px Overpass,sans-serif;letter-spacing:.08em;margin-bottom:10px}
.la-dist .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}.la-dist .row+.row{margin-top:6px}
.la-dist .pl{font:800 clamp(21px,6vw,30px)/1.15 Overpass,sans-serif}
.la-dist .n{font:900 clamp(30px,8.4vw,42px)/1 Overpass,sans-serif;font-variant-numeric:tabular-nums;white-space:nowrap}
.la-dist .n small{font:800 clamp(14px,3.8vw,18px) Overpass,sans-serif;margin-left:4px;letter-spacing:.04em}
.la-legs{display:flex;justify-content:space-between;height:44px;padding:0 16%}.la-legs i{width:14px;background:linear-gradient(90deg,#3a4148,#6b737c,#3a4148)}
.landed{display:inline-flex;align-items:center;min-height:48px;margin-top:12px;font:800 17px Overpass,sans-serif;color:#5fe1ff;text-decoration:none;border-bottom:2px solid currentColor}
html.daylight .landed{color:#0b4a6e}
.fromlax{margin-top:14px}
.fromlax .row{width:100%;border:0;background:none;color:#fff;padding:2px 0;cursor:pointer;text-align:left;font:inherit}
.fromlax .row:hover .pl{text-decoration:underline}
#lax,.leg,.leg .la-zone{scroll-margin-top:118px}