/* Shared page shell — living Everest background + left sidebar.
   Pulled in by every page (homepage, posts, Layer 3 extras) so they all match.
   Core colour vars (--navy etc.) come from each page's own :root block;
   the supplementary vars below + the dark-mode palette live here so the
   whole site flips with the OS theme from one place. */

:root{ color-scheme:light;
  --bar:rgba(247,244,238,.92); --ink2:#37404f; --ink3:#2c3645; --soft:#7c7464;
  --panel:#faf6ec; --note-bg:#f4e9cd; --note-line:#e6d59e; --note-ink:#5b4a17; --note-b:#4a3c12;
  --chip-bg:#eef1f6; --chip-line:#e1e6ee; --ct-bg:#eee8dc; --meter-bg:#e7e0d2;
  --card-line:rgba(255,255,255,.6); --glass:rgba(255,255,255,.6);}

@media (prefers-color-scheme: dark){
  /* :root:root outranks each page's own :root block (pages load their light
     values after this file), so one palette here re-themes every page */
  :root:root{ color-scheme:dark;
    --navy:#a9c3e8; --navy2:#c5d7f0; --gold:#d9ad3c; --gold2:#e9c55e;
    --green:#8fbf68; --green2:#7aaa54; --ink:#dde5f1; --gray:#9aa7bb;
    --line:#2b3950; --bg:#0d1422; --card:rgba(16,25,41,.93);
    --bar:rgba(13,20,34,.92); --ink2:#b9c6d8; --ink3:#c8d3e2; --soft:#76839a;
    --panel:#1a2438; --note-bg:#2a2412; --note-line:#4d4120; --note-ink:#d9c87f; --note-b:#ecd990;
    --chip-bg:#1e2c46; --chip-line:#32425f; --ct-bg:#2a3650; --meter-bg:#25324d;
    --card-line:rgba(255,255,255,.08); --glass:rgba(13,22,38,.7);}
  html body::before{background:linear-gradient(180deg,#0a101c 0%,#0d1422 60%);}
}

/* living mountain background */
.bg{position:fixed; inset:0; z-index:-2; background:var(--bg,#eaf0f7);}
.bg svg{width:100%; height:100%; display:block;}
.scrim{position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, rgba(247,244,238,.62) 0%, rgba(247,244,238,0) 26%),
    linear-gradient(180deg, rgba(247,244,238,.34) 0%, rgba(247,244,238,0) 20%);}

/* sky life: clouds drift, the summit plume streams — all gently */
.bg .cloud.c1{animation:drift 70s ease-in-out infinite alternate;}
.bg .cloud.c2{animation:drift 95s ease-in-out infinite alternate-reverse;}
.bg .cloud.c3{animation:drift 80s ease-in-out infinite alternate;}
.bg .cloud.valley{animation:drift 110s ease-in-out infinite alternate-reverse;}
@keyframes drift{from{transform:translateX(-28px);} to{transform:translateX(28px);}}
.bg .plume{transform-box:fill-box; transform-origin:right center;
  animation:plume 9s ease-in-out infinite alternate;}
@keyframes plume{from{transform:scaleX(.92); opacity:.45;} to{transform:scaleX(1.08); opacity:.7;}}

/* labels painted inside the SVG */
.bg .peaklabel{font-family:Georgia,"Iowan Old Style",serif; font-size:13px; fill:#33507a; opacity:.9;}
.bg .basecamplabel{font-family:Georgia,"Iowan Old Style",serif; font-size:12px; fill:#54688a; opacity:.95;}

/* two-column shell: sticky sidebar + content */
.shell{max-width:1280px; margin:0 auto; padding:40px 30px 70px;
  display:grid; grid-template-columns:320px minmax(0,1fr); gap:40px; align-items:start;}
.shell > main{min-width:0;}

/* Frosted reading panels — titles and prose sit in white cards (like the
   homepage hero/sections) so they stay legible over the living mountain. */
.shell > main > .head,
.shell > main > .post{background:var(--card);
  border:1px solid var(--card-line); border-radius:16px; padding:26px 28px;
  box-shadow:0 20px 50px -34px rgba(20,30,50,.7);}
.shell > main > .post{margin-top:26px;}

.leftcol{position:sticky; top:88px; display:flex; flex-direction:column; gap:18px;}
.sidecard{background:var(--card); border:1px solid var(--card-line);
  border-radius:16px; padding:22px 24px; box-shadow:0 20px 50px -34px rgba(20,30,50,.7);}

/* Read & listen links */
.links a{display:flex; align-items:center; gap:10px; padding:7px 6px; border-radius:9px; text-decoration:none;
  font-size:13.5px; font-weight:600; color:var(--ink2); transition:background .15s,color .15s;}
.links a:hover{background:rgba(31,58,95,.07); color:var(--navy);}
.links a.active{background:rgba(31,58,95,.10); color:var(--navy);}
.links a .ic{width:16px; text-align:center; opacity:.85;}
.links a .ct{margin-left:auto; font-size:11px; font-weight:700; color:var(--gray); background:var(--ct-bg);
  border-radius:20px; padding:1px 7px;}
.links .lab{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gray); font-weight:800;
  margin-bottom:6px;}

/* keyboard focus — match the hover treatment, visibly */
.links a:focus-visible, .topbar a:focus-visible, a:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:6px;}

/* climb tracker */
.track .lab{font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--gray); font-weight:800;}
.track .big{display:flex; align-items:baseline; gap:8px; margin-top:4px;}
.track .big .pc{font-size:46px; font-weight:800; color:var(--navy); line-height:1; letter-spacing:-1px;
  font-variant-numeric:tabular-nums;}
.track .big .of{font-size:12.5px; color:var(--gray); font-weight:600;}
.bar{height:9px; border-radius:6px; background:var(--meter-bg); overflow:hidden; margin:14px 0 8px;}
.bar i{display:block; height:100%; width:0; border-radius:6px;
  background:linear-gradient(90deg,var(--green2),var(--gold2)); transition:width .9s ease;}
.track .stats{display:flex; justify-content:space-between; gap:10px; font-size:11.5px; color:var(--gray);
  font-variant-numeric:tabular-nums;}
.track .stats b{color:var(--navy); font-weight:800;}
.track .month{font-size:11.5px; color:var(--gray); margin-top:3px;}
.pips{display:flex; gap:5px; margin:16px 0 4px;}
.pips .p{flex:1; height:6px; border-radius:4px; background:var(--meter-bg);}
.pips .p.done{background:var(--green2);}
.pips .p.cur{background:var(--gold); box-shadow:0 0 0 2px rgba(184,134,11,.25);}
.track .now{margin-top:16px; padding-top:14px; border-top:1px solid var(--line);}
.track .now .ph{font-size:14.5px; font-weight:800; color:var(--navy); line-height:1.25;}
.track .now .unit{font-size:13px; color:var(--ink2); margin-top:4px;}
.track .now .unit b{color:var(--gold);}
.track .now .focus{font-size:11.5px; color:var(--gray); margin-top:6px; line-height:1.4;}
.track .summit{margin-top:14px; font-size:11.5px; color:var(--gray); display:flex; gap:7px; align-items:flex-start;}
.track .summit b{color:var(--navy);}

/* mountain route styling */
.seg-rest{stroke:rgba(255,255,255,.6); stroke-width:3.5; stroke-dasharray:2 9; stroke-linecap:round; fill:none;}
.seg-done{stroke:url(#gTrail); stroke-width:5; stroke-linecap:round; fill:none; filter:url(#glow);}
.camp .ring{fill:#eef2f7; stroke:#fff; stroke-width:2.5;}
.camp.done .ring{fill:url(#gGreen);}
/* the summit node only turns gold once the route is actually finished —
   until then it's a hollow goal marker so it can't be mistaken for the climber */
.camp.summit .ring{stroke:#e0b53d;}
.camp.summit.done .ring{fill:url(#gGold); stroke:#fff;}
.camp.cur .ring{stroke:#e0b53d;}
#climber .core{fill:url(#gGold); stroke:#fff; stroke-width:2.5; filter:url(#glow);
  transform-box:fill-box; transform-origin:center; animation:pulse 2.2s ease-in-out infinite;}
#climber .halo{fill:none; stroke:#e0b53d; stroke-width:2; transform-box:fill-box;
  transform-origin:center; animation:ripple 2.6s ease-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1);} 50%{transform:scale(1.16);}}
@keyframes ripple{0%{transform:scale(1); opacity:.8;} 75%{transform:scale(2.3); opacity:0;}
  100%{transform:scale(2.3); opacity:0;}}

/* calm everything for users who ask for less motion */
@media (prefers-reduced-motion: reduce){
  .bg .cloud, .bg .cloud.c1, .bg .cloud.c2, .bg .cloud.c3, .bg .cloud.valley,
  .bg .plume, #climber .core, #climber .halo{animation:none;}
  #climber .halo{opacity:0;}
  .bar i{transition:none;}
}

@media(max-width:980px){
  .shell{grid-template-columns:1fr; gap:26px;}
  /* content first on small screens; the tracker + links follow it */
  .leftcol{position:static; flex-direction:row; flex-wrap:wrap; order:2;}
  .leftcol .sidecard{flex:1; min-width:240px;}
  .scrim{background:linear-gradient(0deg, rgba(247,244,238,.85) 0%, rgba(247,244,238,.5) 40%, rgba(247,244,238,.2) 100%);}
}

/* night mode — component bits the palette vars can't reach */
@media (prefers-color-scheme: dark){
  .scrim{background:
    linear-gradient(0deg, rgba(10,16,28,.66) 0%, rgba(10,16,28,0) 26%),
    linear-gradient(180deg, rgba(10,16,28,.4) 0%, rgba(10,16,28,0) 20%);}
  .links a:hover{background:rgba(169,195,232,.10);}
  .links a.active{background:rgba(169,195,232,.14);}
  .bg .peaklabel{fill:#9fb6d8;}
  .bg .basecamplabel{fill:#8aa0c0;}
  .seg-rest{stroke:rgba(255,255,255,.45);}
  .camp .ring{fill:#39496a; stroke:#9bb0cf;}
  .pips .p.cur{box-shadow:0 0 0 2px rgba(217,173,60,.35);}
}
@media (prefers-color-scheme: dark) and (max-width:980px){
  .scrim{background:linear-gradient(0deg, rgba(10,16,28,.88) 0%, rgba(10,16,28,.55) 40%, rgba(10,16,28,.25) 100%);}
}