/* Wild Pack Adventures - Azilda / Greater Sudbury, Ontario (built 2026-11-05).
   Look taken from Zach's own mockup + logo: night-navy forest, cream type, one ember-orange accent.
   PHONE FIRST: the unprefixed rules are the phone; desktop is in @media (min-width: 900px).

   COLOUR RULE (measured, do not "brighten back to brand"):
   - --night #071224 is sampled from the logo file's background, so the logo sits on the page with no box.
   - Text is --cream on navy (13:1+). --muted is the lowest text colour allowed on --night-2 (>= 4.5:1).
   - Ember (#e8641c) is DECORATIVE on navy. Readable orange text uses --ember-text (>= 4.5:1 on --night-2).
     The button is a gradient ending in --ember-deep under white 20px+ bold text (large text, >= 3:1 at its
     darkest stop, measured). */
:root {
  --night: #071224; --night-2: #0c1c33; --night-3: #12294a; --ridge: #16304f;
  --cream: #f1e6cf; --cream-2: #e3d5b6; --muted: #aeb9c8; --line: rgba(241, 230, 207, .16);
  --ember: #e8641c; --ember-deep: #c2470b; --ember-text: #ff9a5c; --sun: #f0a32a; --pine: #7d9a3c; --lake: #3a8fac;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --text: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --script: 'Kaushan Script', 'Brush Script MT', cursive;
  --gutter: 20px; --bar-h: 64px;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--night); color: var(--cream); font: 400 1.04rem/1.6 var(--text); padding-bottom: var(--bar-h); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: .01em; line-height: 1.05; margin: 0 0 .5em; text-transform: uppercase; }
h2 { font-size: clamp(2rem, 7vw, 3rem); text-align: center; }
p { margin: 0 0 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--cream); color: var(--night); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.ic { width: 22px; height: 22px; flex: none; }
.ic.sm { width: 18px; height: 18px; }
.ic.big { width: 46px; height: 46px; }

/* ---------------- header: brand row + a horizontally scrolling tab strip (no fixed drawer: it would overflow) */
.site-header { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 8px var(--gutter) 0; }
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(7, 18, 36, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 48px; }
.brand img { width: 62px; transition: width .3s ease; }
.brand span { font: 800 1.15rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.brand small { display: block; font: 700 .7rem/1.4 var(--display); letter-spacing: .32em; color: var(--ember-text); }
.scrolled .brand img { width: 48px; }
.tools { grid-row: 1; grid-column: 2; display: flex; align-items: center; gap: 4px; justify-self: end; }
.social, .mode { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--cream); transition: background .2s, transform .2s; }
.social svg { width: 24px; height: 24px; }
.nav { grid-column: 1 / -1; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; position: relative; isolation: isolate; }
.nav::-webkit-scrollbar { display: none; }
.nav a { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font: 700 1.02rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; text-decoration: none; color: var(--cream-2); transition: color .2s; }
.nav a[aria-current="page"] { color: var(--cream); background: rgba(241, 230, 207, .1); box-shadow: inset 0 -3px 0 var(--ember); }

/* ---------------- forest scene (drawn SVG layers; parallax in site.js, transform only) */
.forest { position: absolute; inset: 0; overflow: hidden; z-index: -1; }
.forest .sky { position: absolute; inset: 0; background:
  radial-gradient(120% 60% at 50% 100%, rgba(58, 143, 172, .22), transparent 60%),
  linear-gradient(180deg, var(--night) 0%, var(--night) 38%, #10284a 72%, #0d2140 100%); }
.forest .layer { position: absolute; left: -4%; right: -4%; bottom: 0; height: 62%; background: no-repeat center bottom / cover; will-change: transform; }
.forest .l-back { height: 70%; opacity: .9; }
.forest .l-mid { height: 58%; }
.forest .l-front { height: 52%; }
.forest.short .layer { height: 120%; }
.forest.short .l-back { opacity: .7; }

/* ---------------- home hero */
.hero { position: relative; isolation: isolate; overflow: hidden; padding: 18px var(--gutter) 44px; text-align: center; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-inner { max-width: 1040px; margin: 0 auto; }
/* Logo JPEG background = --night. The soft edge mask hides the square against the lighter horizon. */
.hero-logo { width: min(78vw, 360px); margin: 0 auto; -webkit-mask: radial-gradient(closest-side, #000 82%, transparent 100%); mask: radial-gradient(closest-side, #000 82%, transparent 100%); }
.tagline { font: 400 clamp(1.9rem, 8.6vw, 3.4rem)/1.15 var(--script); margin: 6px 0 0; color: var(--cream); position: relative; display: inline-block; padding-bottom: 14px; }
.tagline::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, var(--ember) 18%, var(--ember) 82%, transparent); transform-origin: left; }
.place { margin: 14px 0 26px; font: 700 .95rem/1.3 var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0 auto 30px; max-width: 900px; }
.tile { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 10px; text-decoration: none; font: 700 1.08rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--cream); border-radius: 14px; transition: transform .25s ease, background .25s ease; }
.tile:nth-child(odd) { border-right: 1px solid var(--line); }
.tile:nth-child(-n+2) { border-bottom: 1px solid var(--line); border-radius: 0; }
.tile .ic { color: var(--cream); transition: color .25s, transform .3s cubic-bezier(.3, .7, .2, 1); }
.hero-cta { display: flex; justify-content: center; }

/* ---------------- RAISED BUTTONS (house rule: highlight on top, darker lip, contact shadow, glow in the button's own
   colour --rc, light-to-shade overlay; pressed sinks 1px with an inner shadow). */
.btn { --rc: var(--ember); display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 30px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 1.3rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; -webkit-tap-highlight-color: transparent;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.btn-ember { color: #fff; background-color: var(--ember-deep); background-image: linear-gradient(180deg, #f2832f 0%, var(--ember) 45%, var(--ember-deep) 100%) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .42), inset 0 -3px 0 rgb(0 0 0 / .22), 0 1px 2px rgb(0 0 0 / .55), 0 12px 28px -8px color-mix(in srgb, var(--rc) 65%, transparent) !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / .35); }
.btn-ember .ic { width: 26px; height: 26px; }
.btn-ember .arr { width: 22px; height: 22px; transition: transform .25s cubic-bezier(.3, .7, .2, 1); }
.btn:active { transform: translateY(1px) !important; box-shadow: inset 0 2px 5px rgb(0 0 0 / .4) !important; }
.btn[disabled] { filter: grayscale(.4) brightness(.85); cursor: wait; }

/* ---------------- bands */
.band { padding: 56px var(--gutter); }
.band > * { max-width: 1040px; margin-left: auto; margin-right: auto; }
.band.tint { background: var(--night-2); }
.lede { text-align: center; color: var(--muted); max-width: 32em; margin-bottom: 26px; }
.center { text-align: center; margin-top: 30px; }
.link { color: var(--ember-text); font-weight: 600; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 30% 1.5px no-repeat; padding-bottom: 2px; transition: background-size .3s cubic-bezier(.3, .7, .2, 1); }

.trust-band { padding: 0 var(--gutter); background: var(--night); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.trust { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: 1fr 1fr; }
.trust li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 22px 8px; font: 700 1.02rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.trust li:nth-child(odd) { border-right: 1px solid var(--line); }
.trust li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.trust .ic { width: 38px; height: 38px; color: var(--cream); margin-bottom: 6px; }
.trust span { color: var(--muted); }
.band .trust { margin-top: 30px; border: 1px solid var(--line); border-radius: 18px; }

.week { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 10px; max-width: 760px; }
.day { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--night-2); border: 1px solid var(--line); transition: transform .25s, border-color .25s, background .25s; }
.day b { grid-row: 1 / 3; font: 800 1.7rem/1 var(--display); text-transform: uppercase; color: var(--ember-text); }
.day .where { font: 700 1.25rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.day .what { color: var(--muted); font-size: .95rem; }
.day.today { border-color: var(--ember); background: var(--night-3); }
.day.today .what::after { content: " \00b7  Today"; color: var(--ember-text); font-weight: 600; }
.day[hidden] { display: none; }

.prices { list-style: none; padding: 0; margin: 0 auto; max-width: 620px; }
.prices li { display: flex; align-items: baseline; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--line); }
.prices li::before { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(241, 230, 207, .25); transform: translateY(-5px); }
.pname { order: 0; font: 700 1.25rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.pname small { display: block; font: 500 .9rem/1.3 var(--text); text-transform: none; letter-spacing: 0; color: var(--muted); }
.pval { order: 2; font: 800 1.7rem/1 var(--display); color: var(--ember-text); }

.steps { list-style: none; padding: 0; margin: 0 auto; display: grid; gap: 14px; }
.steps li { display: flex; flex-direction: column; gap: 6px; padding: 24px; border-radius: 18px; background: var(--night-2); border: 1px solid var(--line); transition: transform .25s, box-shadow .25s, border-color .25s; }
.steps .ic { color: var(--sun); margin-bottom: 6px; }
.steps b { font: 800 1.35rem/1.1 var(--display); text-transform: uppercase; }
.steps span { color: var(--muted); }

/* ---------------- inner pages */
.hero-sub { position: relative; isolation: isolate; overflow: hidden; padding: 58px var(--gutter) 92px; text-align: center; }
.hero-sub h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); margin-bottom: .2em; }
.hero-sub p { color: var(--cream-2); max-width: 30em; margin: 0 auto; }
.svc { padding: 26px 22px; margin: 0 auto 18px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--line); scroll-margin-top: 130px; transition: border-color .3s; }
.svc-head { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.svc-head .ic { color: var(--sun); }
.svc h2 { text-align: left; font-size: clamp(1.7rem, 6vw, 2.3rem); margin: 0; }
.svc > p { color: var(--cream-2); max-width: 40em; }
.svc .week { margin-top: 14px; }
.svc .day { background: var(--night-3); }
.facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.facts li { padding: 9px 14px; border-radius: 999px; background: var(--night-3); border: 1px solid var(--line); color: var(--cream-2); }
.facts b { color: var(--ember-text); font-weight: 700; }
.about { text-align: center; max-width: 720px; }
.about .big { font: 700 clamp(1.5rem, 5.4vw, 2.1rem)/1.25 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--cream); }
.about p { color: var(--cream-2); }

.book-phone { text-align: center; }
.book-phone p { margin-top: 18px; }
.book-embed { display: none; }
.book-embed iframe { width: 100%; height: 1100px; border: 0; border-radius: 18px; background: #fff; }

.contact-cards { display: grid; gap: 12px; margin-bottom: 34px; }
.ccard { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--night-2); border: 1px solid var(--line); text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s; }
.ccard .ic { grid-row: 1 / 3; color: var(--sun); width: 36px; height: 36px; }
.ccard b { font: 800 1.2rem/1.1 var(--display); text-transform: uppercase; }
.ccard span { color: var(--cream-2); overflow-wrap: anywhere; }
.cf { padding: 26px 22px; border-radius: 20px; background: var(--night-2); border: 1px solid var(--line); }
.cf h2 { font-size: 1.9rem; text-align: left; }
.cf-grid { display: grid; gap: 14px; margin-bottom: 20px; }
.cf label { display: grid; gap: 6px; font-weight: 600; }
.cf em { font-style: normal; font-weight: 400; color: var(--muted); }
.cf input, .cf textarea { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(241, 230, 207, .28); background: var(--night); color: var(--cream); font: inherit; }
.cf input::placeholder, .cf textarea::placeholder { color: #8f9bab; }
.cf .trap { position: absolute; left: -9999px; }
.cf-status { min-height: 1.4em; margin: 14px 0 0; }
.cf-status.ok { color: #9fd38a; }
.cf-status.err { color: var(--ember-text); }

/* ---------------- footer + phone bar */
.site-footer { background: var(--night); border-top: 1px solid var(--line); padding: 40px var(--gutter) 30px; }
.foot-inner { max-width: 1040px; margin: 0 auto; display: grid; gap: 18px; justify-items: center; text-align: center; }
.foot-logo { width: 150px; }
.foot-tag { font: 400 1.6rem/1.2 var(--script); color: var(--cream); margin-bottom: .4em; }
.site-footer p { color: var(--muted); margin: 0 0 .5em; }
.site-footer a { color: var(--cream-2); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .3s cubic-bezier(.3, .7, .2, 1); }
.foot-small { font-size: .9rem; }
.powered { display: inline-block; margin-top: 10px; font-size: .85rem; color: var(--muted) !important; }
.mobile-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: var(--bar-h); display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(5, 13, 27, .96); border-top: 1px solid var(--line); }
.mobile-bar a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; text-decoration: none; font: 800 1.1rem/1 var(--display); text-transform: uppercase; letter-spacing: .06em; border: 1px solid rgba(241, 230, 207, .35); }
.mobile-bar a.solid { border: 0; color: #fff; background-image: linear-gradient(180deg, #f2832f, var(--ember) 45%, var(--ember-deep)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .4), inset 0 -2px 0 rgb(0 0 0 / .22), 0 6px 16px -6px rgb(232 100 28 / .7); }
.mobile-bar a:active { transform: translateY(1px); }

/* ---------------- motion: reveal is gated on html.js-anim (set by site.js), so no JS = everything visible */
.js-anim .reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1); }
.js-anim .reveal.in { opacity: 1; transform: none; }
.js-anim .hero-logo { animation: logo-in .9s cubic-bezier(.2, .7, .2, 1) both; }
.js-anim .tagline { animation: fade-up .7s .25s ease both; }
.js-anim .tagline::after { animation: draw .7s .75s cubic-bezier(.3, .7, .2, 1) both; }
.js-anim .place { animation: fade-up .6s .45s ease both; }
.js-anim .tile { animation: fade-up .5s ease both; }
.js-anim .tile:nth-child(1) { animation-delay: .6s; } .js-anim .tile:nth-child(2) { animation-delay: .68s; }
.js-anim .tile:nth-child(3) { animation-delay: .76s; } .js-anim .tile:nth-child(4) { animation-delay: .84s; }
.js-anim .hero-cta { animation: fade-up .55s .95s ease both; }
@keyframes logo-in { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------- hover (mouse only, so taps never stick) */
@media (hover: hover) and (pointer: fine) {
  .btn-ember:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: inset 0 1px 0 rgb(255 255 255 / .45), inset 0 -3px 0 rgb(0 0 0 / .22), 0 2px 3px rgb(0 0 0 / .55), 0 18px 34px -8px color-mix(in srgb, var(--rc) 75%, transparent) !important; }
  .btn-ember:hover .arr { transform: translateX(4px); }
  .tile:hover { transform: translateY(-4px); background: rgba(241, 230, 207, .05); }
  .tile:hover .ic { color: var(--sun); transform: translateY(-3px) scale(1.06); }
  .social:hover { background: rgba(241, 230, 207, .12); transform: translateY(-2px); }
  .nav a:hover { color: var(--cream); }
  .link:hover, .link:focus-visible { background-size: 100% 1.5px; }
  .site-footer a:hover { background-size: 100% 1.5px; }
  .day:hover { transform: translateY(-3px); border-color: rgba(241, 230, 207, .35); }
  .steps li:hover, .ccard:hover { transform: translateY(-4px); border-color: rgba(240, 163, 42, .5); box-shadow: 0 18px 34px -18px rgb(0 0 0 / .8); }
  .svc:hover { border-color: rgba(240, 163, 42, .4); }
}
/* gliding nav pill: rests on the current page, slides to the hovered link (Chromium 125+ / Safari 26+) */
@supports (anchor-name: --a) {
  .nav a[aria-current="page"] { background: transparent; box-shadow: none; }
  .nav a[aria-current="page"], .nav a:is(:hover, :focus-visible) { anchor-name: --wp-pill; }
  .nav:has(a:is(:hover, :focus-visible)) a[aria-current="page"]:not(:hover, :focus-visible) { anchor-name: none; }
  .nav::before { content: ""; position: absolute; z-index: -1; border-radius: 999px; background: rgba(241, 230, 207, .1); box-shadow: inset 0 -3px 0 var(--ember);
    position-anchor: --wp-pill; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); transition: inset .35s cubic-bezier(.3, .7, .2, 1); pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal, .js-anim .hero-logo, .js-anim .tagline, .js-anim .tagline::after, .js-anim .place, .js-anim .tile, .js-anim .hero-cta { animation: none; transition: none; opacity: 1; transform: none; }
  .nav::before { transition: none; }
  .forest .layer { transform: none !important; }
}

/* ---------------- tablet + desktop */
@media (min-width: 640px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .contact-cards { grid-template-columns: repeat(3, 1fr); }
  .ccard { grid-template-columns: 1fr; grid-template-rows: auto; justify-items: center; text-align: center; gap: 6px; padding: 24px 16px; }
  .ccard .ic { grid-row: auto; }
  .cf-grid { grid-template-columns: 1fr 1fr; }
  .cf .wide { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  body { padding-bottom: 0; }
  .mobile-bar { display: none; }
  .site-header { grid-template-columns: 1fr auto 1fr; padding: 8px 28px; }
  .brand { justify-self: start; }
  .nav { grid-column: auto; justify-content: center; margin: 0; padding: 0; overflow: visible; }
  .tools { grid-column: 3; }
  .brand img { width: 74px; }
  .scrolled .brand img { width: 54px; }
  .hero { padding: 26px 28px 60px; }
  .hero-logo { width: 380px; }
  .tiles { grid-template-columns: repeat(4, 1fr); }
  .tile { border-radius: 14px !important; border-bottom: 0 !important; border-right: 0 !important; position: relative; }
  .tile + .tile::before { content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 1px; background: var(--line); }
  .trust { grid-template-columns: repeat(4, 1fr); }
  .trust li { border: 0 !important; position: relative; padding: 28px 8px; }
  .trust li + li::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--line); }
  .band { padding: 84px 28px; }
  .week { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); max-width: 1040px; }
  .day { grid-template-columns: 1fr; grid-template-rows: auto; text-align: center; gap: 6px; padding: 22px 12px; }
  .day b { grid-row: auto; font-size: 2rem; }
  .hero-sub { padding: 84px 28px 140px; }
  .svc { padding: 34px 36px; }
  .book-phone .btn { display: none; }
  .book-embed { display: block; margin-top: 10px; }
  .foot-inner { grid-template-columns: 170px 1fr; justify-items: start; text-align: left; align-items: center; gap: 34px; }
}

/* ---------------- toggle: day / night (owner 2026-11-06) */
.mode { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--cream); cursor: pointer; transition: background .2s, transform .2s; }
.mode svg { width: 22px; height: 22px; }
.mode .i-moon { display: none; }
[data-theme="day"] .mode .i-sun { display: none; }
[data-theme="day"] .mode .i-moon { display: block; }
@media (hover: hover) and (pointer: fine) { .mode:hover { background: rgba(241, 230, 207, .12); transform: translateY(-2px); } }

/* ---------------- training programs + week-by-week plan (owner 2026-11-06). Cards drawn by build.py prog_html and,
   live, by site.js renderProgram. The plan is a native <details>, so it opens with JavaScript off too. Labels use
   --ember-text, never --sun: --sun on white is 4.0:1 in day mode. */
.prog-intro { text-align: center; margin-bottom: 26px; }
.prog-intro p { color: var(--cream-2); max-width: 36em; margin: 0 auto; }
.prog .prog-desc { color: var(--cream-2); max-width: 40em; }
.skills { margin-top: 18px; }
.sk-label, .wk-row b { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ember-text); }
.chips { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 13px; border-radius: 999px; border: 1px solid var(--line); color: var(--cream); font-size: .95rem; }
.weeks { margin-top: 20px; }
.weeks summary { list-style: none; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  border: 1.5px solid var(--ember-text); color: var(--ember-text); font-weight: 700; cursor: pointer; user-select: none; transition: background .2s, transform .2s; }
.weeks summary::-webkit-details-marker { display: none; }
.weeks summary:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.weeks .chev { width: 20px; height: 20px; transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.weeks[open] .chev { transform: rotate(180deg); }
.weeks .when-open, .weeks[open] .when-closed { display: none; }
.weeks[open] .when-open { display: inline; }
@media (hover: hover) and (pointer: fine) { .weeks summary:hover { background: rgba(255, 154, 92, .1); transform: translateY(-2px); } }
.wk-list { list-style: none; padding: 0; margin: 16px 0 0; }
.weeks[open] .wk-list { animation: wk-in .35s ease both; }
@keyframes wk-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.wk { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.wk-n { font-family: var(--display); font-weight: 800; font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ember-text); }
.wk h3 { font-size: 1.35rem; margin: 0 0 8px; }
.wk-row + .wk-row { margin-top: 10px; }
.wk-row p { margin: 2px 0 0; color: var(--cream-2); max-width: 44em; }
@media (min-width: 640px) {
  .wk { grid-template-columns: 96px 1fr; gap: 18px; }
  .wk-n { padding-top: 3px; }
}
@media (prefers-reduced-motion: reduce) { .weeks[open] .wk-list { animation: none; } .weeks .chev { transition: none; } }

/* ---------------- DAY MODE: the same site in daylight. Measured contrast: --cream (text) #0e1b30 on #ffffff 17:1,
   --muted #52627a on #f5f0e6 5.4:1, --ember-text #b3420c on #ffffff 5.6:1. The logo file carries its own navy, so in
   daylight it is shown as a rounded navy badge; the footer stays navy for the same reason. */
[data-theme="day"] {
  --night: #f5f0e6; --night-2: #ffffff; --night-3: #eef1ec; --ridge: #cfe0e6;
  --cream: #0e1b30; --cream-2: #2c3b52; --muted: #52627a; --line: rgba(14, 27, 48, .14);
  --ember-text: #b3420c; --sun: #b06a00;
  color-scheme: light;
}
[data-theme="day"] .site-header::before { background: rgba(245, 240, 230, .9); }
[data-theme="day"] .nav a[aria-current="page"], [data-theme="day"] .nav::before { background: rgba(14, 27, 48, .07); }
[data-theme="day"] .forest .sky { background:
  radial-gradient(70% 45% at 50% 18%, rgba(255, 214, 140, .35), transparent 70%),
  linear-gradient(180deg, #f5f0e6 0%, #e8f0ef 38%, #cfe2e6 72%, #bfd8dc 100%); }
[data-theme="day"] .forest .l-back { background-image: url(img/ridge-back-day.svg) !important; opacity: 1; }
[data-theme="day"] .forest .l-mid { background-image: url(img/pines-mid-day.svg) !important; }
[data-theme="day"] .forest .l-front { background-image: url(img/pines-front-day.svg) !important; }
[data-theme="day"] .hero::after { opacity: .06; }
[data-theme="day"] .hero-logo { -webkit-mask: none; mask: none; border-radius: 18%; box-shadow: 0 24px 50px -24px rgba(14, 27, 48, .55); }
[data-theme="day"] .brand img { border-radius: 10px; }
/* text over the front pines in daylight: the pines are dark green, so the hero copy sitting on them gets a light card */
[data-theme="day"] .tiles { background: rgba(255, 255, 255, .82); border-radius: 18px; box-shadow: 0 12px 30px -18px rgba(14, 27, 48, .35); }
[data-theme="day"] .hero-sub-inner { background: rgba(255, 255, 255, .82); border-radius: 18px; padding: 18px 22px; max-width: 760px; margin: 0 auto; }
[data-theme="day"] .site-footer { background: #071224; --cream: #f1e6cf; --cream-2: #e3d5b6; --muted: #aeb9c8; --line: rgba(241, 230, 207, .16); --ember-text: #ff9a5c; color: #f1e6cf; }
[data-theme="day"] .mobile-bar { background: rgba(255, 255, 255, .97); }
[data-theme="day"] .mobile-bar a { color: var(--cream); border-color: rgba(14, 27, 48, .3); }
[data-theme="day"] .mobile-bar a.solid { color: #fff; }
[data-theme="day"] .cf input, [data-theme="day"] .cf textarea { background: #fbf9f4; border-color: rgba(14, 27, 48, .25); }
[data-theme="day"] .cf input::placeholder, [data-theme="day"] .cf textarea::placeholder { color: #6b7789; }
[data-theme="day"] .cf-status.ok { color: #2f7d32; }
[data-theme="day"] .day.today { background: #fff4ea; }
@media (hover: hover) and (pointer: fine) {
  [data-theme="day"] .mode:hover, [data-theme="day"] .social:hover { background: rgba(14, 27, 48, .08); }
  [data-theme="day"] .tile:hover { background: rgba(14, 27, 48, .04); }
}
/* the switch itself fades the page colours rather than snapping */
html.mode-anim, html.mode-anim body, html.mode-anim .band, html.mode-anim .site-header::before, html.mode-anim .forest .sky { transition: background-color .35s ease, color .35s ease; }