/* Steens Mountain Running Camp
   Earth tones, camp green and sunset orange, Steens contour lines. */

@font-face {
  font-family: 'Nexa Rust';
  src: url(/fonts/nexa-rust-sans-black.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #ede8e0;
  --paper-2: #e3dcd0;
  --card: #f7f4ef;
  --line: #cfc6b8;
  --ink: #2b1f1a;
  --text: #3a2c25;
  --muted: #6e5f55;
  --brown: #4e342e;
  --night: #2b1f1a;
  --night-2: #3a2a23;
  --green: #009b55;
  --green-dark: #00703e;
  --orange: #d9662b;
  --orange-dark: #a94a17;
  --gold: #f2b53a;

  --font-title: 'Nexa Rust', 'Barlow Semi Condensed', Impact, sans-serif;
  --font-head: 'Barlow Semi Condensed', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Noto Serif', Georgia, serif;

  --max: 1180px;
  --prose: 720px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 3px;
  --header-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Brown canvas so iOS 26 Safari (which ignores theme-color) tints the status bar and overscroll brown, like the header and footer.
   The paper color lives on <main>. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 64px); background: var(--night); }
/* no double-tap zoom on phones (taps land right away, and quick taps on buttons don't zoom); pinch zoom still works */
html { touch-action: manipulation; }
main { display: block; background: var(--paper); }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font: 400 1.0625rem/1.7 var(--font-body);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
/* AVIF copies come wrapped in <picture> (build.py); the wrapper takes no part in layout */
picture { display: contents; }
a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--orange-dark); }
h1, h2, h3, h4 { color: var(--ink); line-height: 1.15; margin: 1.6em 0 .5em; text-wrap: balance; }
h1, h2 { font-family: var(--font-title); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: .01em; }
h1 { font-size: clamp(2.4rem, 7vw, 4.6rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }
hr { border: 0; height: 14px; margin: 2.5em 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14'%3E%3Cpath d='M0 7c6 0 6-5 12-5s6 10 12 10 6-5 16-5' fill='none' stroke='%23b8ab99' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x center; }
::selection { background: var(--gold); color: var(--ink); }

.skip { position: absolute; left: -9999px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--card); padding: 8px 12px; }

.kicker {
  font: 700 .78rem/1.2 var(--font-head);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--orange-dark);
  margin: 0 0 .6em;
}
.kicker a { color: inherit; text-decoration: none; }

/* ---------- topo lines: the contour PNG used as a mask so it can be any color */
.topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--topo, #8d6e63);
  -webkit-mask: url(/images/contours.png) center / cover no-repeat;
  mask: url(/images/contours.png) center / cover no-repeat;
  opacity: var(--topo-opacity, .35);
}

/* ---------- buttons */
.button {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .7em 1.35em;
  border-radius: var(--radius);
  background: var(--green-dark);
  color: #fff;
  font: 700 .95rem/1.1 var(--font-head);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-decoration: none;
  border: 2px solid transparent;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
  transition: background .15s, transform .15s;
}
.button:hover { background: var(--green); color: #fff; transform: translateY(-1px); }
.button.orange { background: var(--orange); }
.button.orange:hover { background: var(--orange-dark); }
.button.ghost { background: transparent; border-color: currentColor; color: #fff; clip-path: none; }
.button.ghost:hover { background: rgba(255,255,255,.12); }
.buttons { display: flex; flex-wrap: wrap; gap: .75em; margin: 1.5em 0; }
.prose .buttons a, .prose div.buttons p a {
  display: inline-flex; padding: .75em 1.35em; border-radius: var(--radius); background: var(--green-dark);
  color: #fff; font: 700 .95rem/1.1 var(--font-head); text-transform: uppercase; letter-spacing: .1em; text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.prose .buttons a:hover { background: var(--green); }
.prose div.buttons p { display: flex; flex-wrap: wrap; gap: .75em; margin: 0; }
.prose div.buttons br { display: none; }

/* ---------- dates bar + header */
.dates-bar {
  background: var(--green-dark);
  text-align: center;
  font: 500 .88rem/1.3 var(--font-head);
  padding: 7px var(--gutter);
}
.layout-home .dates-bar { display: none; }  /* the home hero shows the dates */
.dates-bar a { color: #fff; text-decoration: none; }
.dates-bar b { font-weight: 800; }
.dates-year { font-weight: 800; color: var(--gold); margin-right: .3em; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--night);
  color: #fff;
  --topo: #a1887f;
  --topo-opacity: .22;
  overflow: visible;
}
.site-header .topo { overflow: hidden; }
.header-inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; margin-right: auto; }
.brand:hover { color: #fff; }
.brand img { width: 44px; height: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font: 400 1.35rem/1 var(--font-title); text-transform: uppercase; letter-spacing: .02em; }
.brand-sub { font: 700 .62rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .2em; color: var(--gold); margin-top: 5px; }

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav > ul { display: flex; align-items: center; gap: 4px; }
.site-nav a, .site-nav button {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius);
  color: #f3ece4;
  text-decoration: none;
  font: 600 .92rem/1 var(--font-head);
  text-transform: uppercase;
  letter-spacing: .09em;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav a:hover, .site-nav button:hover, .site-nav .has-menu:focus-within > button { background: rgba(255,255,255,.1); color: #fff; }
.site-nav > ul > li.active > a, .site-nav > ul > li.active > button { color: var(--gold); }
.site-nav .has-menu { position: relative; }
.site-nav .has-menu > button::after { content: ''; display: inline-block; margin-left: 6px; border: 4px solid transparent; border-top-color: currentColor; transform: translateY(2px); }
.site-nav .has-menu > ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  padding: 8px;
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(43,31,26,.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: .15s;
}
.site-nav .has-menu:hover > ul, .site-nav .has-menu:focus-within > ul, .site-nav .has-menu.open > ul { opacity: 1; visibility: visible; transform: none; }
.site-nav .has-menu > ul a { color: var(--ink); padding: 10px 12px; font-weight: 500; text-transform: none; letter-spacing: .02em; font-size: 1rem; }
.site-nav .has-menu > ul a:hover { background: var(--paper-2); color: var(--ink); }
.site-nav .has-menu > ul li.active a { color: var(--green-dark); font-weight: 700; }

.menu-toggle { display: none; }

@media (max-width: 900px) {
  :root { --header-h: 60px; }
  .brand img { width: 36px; }
  .brand-name { font-size: 1.1rem; }
  .brand-sub { font-size: .55rem; letter-spacing: .14em; }
  .menu-toggle {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.1); color: #fff; border: 0; border-radius: var(--radius);
    padding: 10px 14px; font: 600 .9rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .1em; cursor: pointer;
  }
  .menu-icon, .menu-icon::before, .menu-icon::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; transition: .2s; }
  .menu-icon::before, .menu-icon::after { content: ''; position: absolute; left: 0; }
  .menu-icon::before { top: -5px; }
  .menu-icon::after { top: 5px; }
  .nav-open .menu-icon { background: transparent; }
  .nav-open .menu-icon::before { top: 0; transform: rotate(45deg); }
  .nav-open .menu-icon::after { top: 0; transform: rotate(-45deg); }

  .site-nav {
    position: fixed;
    inset: calc(var(--header-h) + var(--bar-h, 0px)) 0 0 0;
    background: var(--night);
    overflow-y: auto;
    padding: 12px var(--gutter) 40px;
    display: none;
  }
  .nav-open .site-nav { display: block; }
  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav > ul > li { border-bottom: 1px solid rgba(255,255,255,.08); }
  .site-nav a, .site-nav button { padding: 16px 4px; font-size: 1.15rem; width: 100%; text-align: left; }
  .site-nav .has-menu > button { color: var(--gold); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; padding-bottom: 4px; pointer-events: none; }
  .site-nav .has-menu > button::after { display: none; }
  .site-nav .has-menu > ul { position: static; opacity: 1; visibility: visible; transform: none; background: none; box-shadow: none; padding: 0 0 8px; }
  .site-nav .has-menu > ul a { color: #f3ece4; padding: 12px 4px; font-size: 1.1rem; }
  .site-nav .has-menu > ul a:hover { background: none; color: #fff; }
  body.nav-open { overflow: hidden; }
}

/* ---------- page heroes */
.hero { position: relative; color: #fff; background: var(--night); overflow: hidden; }
.hero-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.hero h1 { color: #fff; margin: 0; text-shadow: 0 2px 20px rgba(0,0,0,.25); }
.hero .kicker { color: var(--gold); }
.hero-sub { max-width: 640px; font-size: 1.15rem; margin: .8em 0 0; color: #f0e9e1; text-wrap: balance; }
.hero-sub a { color: #fff; text-decoration-color: var(--gold); }
.hero-sub a:hover { color: var(--gold); }
@media (min-width: 900px) { .hero-sub { max-width: 820px; font-size: 1.25rem; } }
.hero-topo { --topo: #a1887f; --topo-opacity: .3; padding: clamp(48px, 9vw, 96px) 0 clamp(40px, 6vw, 64px); }
.hero-topo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: #a1887f; opacity: .25;
  -webkit-mask: url(/images/contours.png) 30% 40% / 1600px auto no-repeat; mask: url(/images/contours.png) 30% 40% / 1600px auto no-repeat;
}
.hero-photo { min-height: clamp(320px, 52vh, 560px); display: flex; align-items: flex-end; }
.hero-photo > img, .hero-photo > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(26,18,14,.85), rgba(26,18,14,.15) 55%, rgba(26,18,14,.05)); }
.hero-photo .hero-inner { z-index: 1; width: 100%; padding-bottom: clamp(28px, 5vw, 56px); }

/* ---------- prose */
.prose { max-width: var(--prose); margin: 0 auto; padding: clamp(32px, 6vw, 64px) var(--gutter); }
.prose.wide { max-width: calc(var(--max)); }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { overflow-wrap: break-word; }
.prose h2 { margin-top: 1.8em; }
.prose h2 + h3, .prose h2 + p { margin-top: 0; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .3em 0; }
.prose li::marker { color: var(--orange); }
.prose blockquote {
  margin: 1.8em 0; padding: .2em 0 .2em 1.2em;
  border-left: 4px solid var(--orange);
  color: var(--brown); font-style: italic; font-size: 1.1em;
}
.prose figure { margin: 2em 0; }
.prose figure img, .prose > p > img, .prose > p > picture > img { border-radius: var(--radius); }
.prose figcaption { text-wrap: balance; font: 500 .9rem/1.4 var(--font-head); color: var(--muted); margin-top: .7em; padding-left: .9em; border-left: 3px solid var(--line); }
@media (min-width: 900px) {
  .prose figure { margin-left: -60px; margin-right: -60px; }
}
.prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
/* a SoundCloud track on its own line: the compact player */
.soundcloud { margin: 1.5em 0; }
.prose .soundcloud iframe { display: block; aspect-ratio: auto; height: 166px; }
.table-wrap { overflow-x: auto; margin: 1.5em 0; }
.prose table { border-collapse: collapse; width: 100%; font-size: .95rem; }
.prose th, .prose td { border-bottom: 1px solid var(--line); padding: .6em .7em; text-align: left; vertical-align: top; }
.prose th { font-family: var(--font-head); color: var(--ink); }

/* ::: containers */
.callout {
  background: var(--card); border-radius: var(--radius); padding: 1.3em 1.5em; margin: 2em 0;
  border-left: 5px solid var(--green);
}
/* orange callout: a sunset trail sign with contour lines and a notched corner */
.callout.orange {
  position: relative; isolation: isolate; overflow: hidden;
  background: linear-gradient(120deg, #f9e2d2 0%, #f7efe6 70%);
  border-left: 0; border-radius: 0;
  box-shadow: inset 6px 0 0 var(--orange), inset 0 0 0 1px #ebc6ab;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
  padding: 1.4em 1.8em 1.4em 2em;
  color: var(--ink);
}
.callout.orange::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--orange); opacity: .16;
  -webkit-mask: url(/images/contours.png) 85% 30% / 700px auto no-repeat;
  mask: url(/images/contours.png) 85% 30% / 700px auto no-repeat;
}
.callout.orange strong { font-family: var(--font-head); font-weight: 800; font-size: 1.08em; color: var(--orange-dark); }
.callout.orange a { color: var(--orange-dark); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.callout.orange a:hover { color: var(--ink); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
/* ::: timeline: years along the same wandering trail line as the days on /week/ */
.timeline { position: relative; margin: 2.4em 0; padding-left: 34px; }
.timeline::before {
  content: ''; position: absolute; left: 0; width: 16px; top: .6em; bottom: .6em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 160'%3E%3Cpath d='M8 0C13 30 13 50 8 80S3 130 8 160' fill='none' stroke='%23c4b6a3' stroke-width='1.6'/%3E%3C/svg%3E") center top / 16px 160px repeat-y;
}
.prose .timeline h3 { position: relative; margin: 2em 0 .35em; font: 400 1.7rem/1.1 var(--font-title); color: var(--orange-dark); text-transform: uppercase; }
.prose .timeline h3:first-child { margin-top: 0; }
.timeline h3::before { content: ''; position: absolute; left: -34px; top: .18em; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px var(--paper); }
.timeline p { margin: .5em 0; }
/* {{ quote id }}: Harland's sayings, signed with his photo */
.founder-quote { margin: 2.4em 0; padding: 0 0 0 1.4em; border-left: 4px solid var(--gold); }
.founder-quote blockquote { margin: 0; padding: 0; border: 0; font: 600 clamp(1.3rem, 2.4vw, 1.6rem)/1.3 var(--font-head); color: var(--ink); font-style: normal; text-wrap: balance; }
.founder-quote blockquote p { margin: 0; }
.founder-quote blockquote p::before { content: '\201C'; } .founder-quote blockquote p::after { content: '\201D'; }
.founder-quote figcaption { display: flex; align-items: center; gap: 12px; margin-top: 14px; font: 500 .85rem/1.25 var(--font-head); color: var(--muted); }
.founder-quote figcaption a { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.founder-quote figcaption a:hover b { color: var(--green-dark); text-decoration: underline; text-underline-offset: 3px; }
.founder-quote figcaption img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--gold); }
.founder-quote figcaption b { display: block; color: var(--ink); font-weight: 800; font-size: 1rem; }
.prose .founder-quote figcaption { padding: 0; border: 0; }
@media (min-width: 900px) { .prose .founder-quote { margin-left: 0; margin-right: 0; } }
/* on the home page they get their own band, bigger and centered */
.home-quote { padding: clamp(48px, 8vw, 96px) var(--gutter); }
.home-quote .founder-quote { max-width: 900px; margin: 0 auto; padding: 0; border: 0; text-align: center; }
.home-quote blockquote { font: 400 clamp(1.7rem, 4.4vw, 3rem)/1.08 var(--font-title); text-transform: uppercase; }
.home-quote blockquote p::before, .home-quote blockquote p::after { color: var(--orange); }
.home-quote figcaption { justify-content: center; text-align: left; margin-top: 22px; }
.home-week + .home-quote { background: var(--paper-2); padding-top: 0; }
/* ::: scrapbook: old photos as tilted prints */
.scrapbook { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 26px 20px; margin: 2em 0 2.6em; }
.prose .scrapbook figure { margin: 0; background: #fffdf9; padding: 9px 9px 2px; box-shadow: 0 1px 2px rgba(43,31,26,.12), 0 14px 26px -14px rgba(43,31,26,.4); transform: rotate(-1.4deg); transition: transform .25s; }
.prose .scrapbook figure:nth-child(even) { transform: rotate(1.2deg); }
.prose .scrapbook figure:nth-child(3n) { transform: rotate(-.5deg); }
.prose .scrapbook figure:hover { transform: rotate(0) scale(1.03); }
.prose .scrapbook img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 0; filter: sepia(.12); }
.prose .scrapbook figcaption { margin: 0; padding: 10px 2px 8px; border: 0; text-align: center; font: 500 .8rem/1.3 var(--font-head); }
@media (min-width: 900px) { .prose .scrapbook { margin-left: -60px; margin-right: -60px; } }
/* single old photos inside the timeline: keep them inside the trail */
.timeline figure img { filter: sepia(.12); }
@media (min-width: 900px) { .prose .timeline figure, .prose .timeline .gallery { margin-left: 0; margin-right: 0; } }
/* 404: a handful of ways back to the trail */
.lost-links { list-style: none; padding: 0 !important; margin: 1.6em 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.lost-links li { margin: 0; }
.lost-links li::marker { content: none; }
.lost-links a { display: block; height: 100%; padding: 16px 18px; background: var(--card); border-top: 4px solid var(--green); text-decoration: none; color: var(--muted); transition: transform .15s, border-color .15s; }
.lost-links a:hover { transform: translateY(-2px); border-color: var(--orange); }
.lost-links b { display: block; font: 800 1.1rem/1.2 var(--font-head); color: var(--ink); }
.lost-links span { font-size: .9rem; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 10px; margin: 2em 0; }
.prose .gallery { margin-left: 0; margin-right: 0; }
/* exactly four photos: a 2×2 grid instead of three and an orphan */
.gallery:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .prose .gallery { margin-left: -60px; margin-right: -60px; } }
.gallery figure { margin: 0 !important; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.gallery figcaption { font-size: .8rem; }
/* ::: gallery natural: photos of different shapes shown whole, side by side at one height
   (each figure's width follows its shape, --ar from build.py) */
@media (min-width: 641px) {
  .gallery.natural { display: flex; align-items: flex-start; }
  .gallery.natural > figure { flex: var(--ar, 1) 1 0; min-width: 0; }
  .gallery.natural img { aspect-ratio: auto; height: auto; }
}
/* exactly three photos on a large screen: the first one runs the full width, the other two side by side under it */
@media (min-width: 900px) {
  .gallery:has(> :nth-child(3):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery:has(> :nth-child(3):last-child) > :first-child { grid-column: 1 / -1; }
  .gallery:has(> :nth-child(3):last-child) > :first-child img { aspect-ratio: 16 / 9; }
  .gallery.natural:has(> :nth-child(3):last-child) { flex-wrap: wrap; }
  .gallery.natural:has(> :nth-child(3):last-child) > :first-child { flex: 1 0 100%; }
  /* a tall first photo would fill the screen: it's cropped to a wide band instead */
  .gallery.natural:has(> :nth-child(3):last-child) > :first-child img { max-height: 75vh; aspect-ratio: auto; object-fit: cover; }
}
/* the staff page's group photos: shown whole (3:2), not cropped to the usual 4:3 */
.gallery.group-photos { margin-top: 0; }
@media (min-width: 641px) { .prose .gallery.group-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-left: 0; margin-right: 0; } }
.gallery.group-photos img { aspect-ratio: 3 / 2; }
.gallery.group-photos figcaption { font-size: .9rem; }
/* ::: heard — something heard around camp over the years, a big shout under a small ridgeline label */
.heard { margin: 3.5em 0 1em; }
/* the label leads with a small ridgeline, like the Arrive marker's mountain */
.heard::before {
  content: 'Heard on the mountain'; display: block; margin-bottom: .8em; padding-left: 30px;
  font: 700 .72rem/16px var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 16'%3E%3Cpath d='M1 14 8.5 3l3.5 5 2.5-3L23 14' fill='none' stroke='%23d9662b' stroke-width='1.8' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") left center / 24px 16px no-repeat;
}
.heard p:first-child { margin: 0; font: 400 clamp(1.6rem, 4.4vw, 2.5rem)/1.05 var(--font-title); text-transform: uppercase; color: var(--orange-dark); text-wrap: balance; text-indent: -.45em; }
.heard p + p { margin: .7em 0 0; font: 700 .95rem/1.2 var(--font-head); color: var(--brown); }
.heard p + p::before { content: '— '; color: var(--orange); }
/* phones: a row of photos becomes a swipeable strip running edge to edge, each photo nearly the screen wide
   and snapping into place, the first one lined up with the text. --bleed is how far the text sits from the left edge. */
@media (max-width: 640px) {
  .gallery {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-left: calc(-1 * var(--bleed, var(--gutter))) !important; margin-right: calc(-1 * var(--gutter)) !important;
    padding: 0 var(--gutter) 0 var(--bleed, var(--gutter)); scroll-padding: 0 var(--gutter) 0 var(--bleed, var(--gutter));
  }
  .gallery::-webkit-scrollbar { display: none; }
  /* every photo the same height, kept whole at its own shape (--ar from build.py), so a portrait is narrower.
     The height fits a 3:2 photo that leaves the next one peeking in from the right. */
  .gallery { --strip-h: calc((100vw - var(--bleed, var(--gutter)) - 48px) * 2 / 3); }
  .gallery > * { flex: 0 0 calc(var(--strip-h) * var(--ar, 1.5)); scroll-snap-align: start; }
  .gallery img, .day-body .gallery img { width: 100%; height: var(--strip-h); aspect-ratio: auto; object-fit: cover; }
}
.columns { display: grid; gap: 1.5em 2.5em; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 1.5em 0; }
.columns > div > :first-child { margin-top: 0; }
/* ::: columns packlist: the pack list as groups of checkboxes. Each item's name is bold on its own line, the
   details in a quieter tone under it */
.packlist { gap: 2em 2.5em; margin: 1.2em 0 2em; }
.packlist h3 { margin: 0 0 .5em; padding-bottom: .35em; border-bottom: 2px solid var(--line); font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-dark); }
.packlist ul { list-style: none; margin: 0; padding: 0; }
.packlist li { position: relative; margin: 0; padding: .45em 0 .45em 1.9em; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.packlist li + li { border-top: 1px dashed var(--line); }
.packlist li::before { content: ''; position: absolute; left: 0; top: .62em; width: .95em; height: .95em; border: 2px solid var(--green); border-radius: 3px; box-sizing: border-box; }
.packlist li > strong:first-child { display: block; color: var(--ink); }
/* checking items off (site.js): tap an item; the box fills green with a check and the item fades */
.packlist:not(.extras) li { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.packlist li:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 2px; }
.packlist li::after { content: ''; position: absolute; left: .31em; top: .78em; width: .28em; height: .5em; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.packlist li.done::before { background: var(--green); }
.packlist li.done::after { opacity: 1; }
.packlist li.done { opacity: .55; }
.packlist li.done > strong:first-child { text-decoration: line-through; text-decoration-color: var(--muted); }
@media (hover: hover) { .packlist:not(.extras) li:hover::before { background: color-mix(in srgb, var(--green) 15%, transparent); } .packlist li.done:hover::before { background: var(--green); } }
/* "The list" with its Reset button on the right */
.packlist-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin: 1.8em 0 .6em; }
.packlist-head h2 { margin: 0 !important; }
.packlist-reset { flex: none; padding: 7px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--muted); font: 700 .78rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.packlist-reset:hover:not(:disabled) { border-color: var(--brown); color: var(--ink); }
.packlist-reset:disabled { opacity: .45; cursor: default; }
/* the extras: short notes, no boxes */
.packlist.extras p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--muted); }

/* ---------- video */
.video { position: relative; }
.yt { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius); background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, opacity .2s; opacity: .9; }
.yt:hover img { transform: scale(1.03); opacity: 1; }
/* a soft shade so the button reads on any thumbnail */
.yt::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(circle at center, rgba(23,16,13,.35), transparent 60%); transition: opacity .3s; }
/* play: an orange disc with a gold ring that swells on hover. The triangle (rounded corners) is drawn so its
   center of mass, not its box, sits in the middle of the disc: that's what reads as centered to the eye. */
.yt .play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 78px; height: 78px; translate: -50% -50%;
  border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 0 6px rgba(242,181,58,.35), 0 10px 30px rgba(0,0,0,.4);
  transition: transform .25s cubic-bezier(.3,1.5,.6,1), box-shadow .25s, background .2s;
}
.yt .play::after {
  content: ''; position: absolute; inset: 0; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.2v9.6L17.3 12z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 7.2v9.6L17.3 12z' fill='%23000' stroke='%23000' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / 60% no-repeat;
}
.yt:hover .play, .yt:focus-visible .play { transform: scale(1.08); background: #e4743a; box-shadow: 0 0 0 12px rgba(242,181,58,.28), 0 14px 36px rgba(0,0,0,.45); }
.yt:hover::before { opacity: .6; }
@media (max-width: 640px) { .yt .play { width: 64px; height: 64px; } }
@media (prefers-reduced-motion: reduce) { .yt .play { transition: none; } }
.video iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--radius); }
.prose .video { margin: 2em 0; }

/* ---------- home */
.home-hero {
  position: relative;
  color: #fff;
  background: var(--night);
  overflow: hidden;
  --topo: #a1887f; --topo-opacity: .22;
  --hero-h: clamp(320px, 68vh, 760px); --fade: 300px;
}
.home-hero-media { overflow: hidden; height: var(--hero-h); }
.home-hero-photo { animation: hero-settle 24s ease-out both; display: block; width: 100%; height: 100%; object-fit: cover; }
.home-hero::before {
  content: ''; position: absolute; left: 0; right: 0; top: calc(var(--hero-h) - var(--fade)); height: var(--fade); z-index: 1; pointer-events: none;
  /* eased stops so the photo melts into the brown without a visible band */
  background: linear-gradient(to bottom, rgba(43,31,26,0) 0%, rgba(43,31,26,.08) 18%, rgba(43,31,26,.28) 38%, rgba(43,31,26,.58) 60%, rgba(43,31,26,.85) 80%, var(--night) 100%);
}
.home-hero .topo {
  /* the contour lines fade in over the bottom of the photo: the contour mask intersected with a gradient */
  top: calc(var(--hero-h) - var(--fade)); z-index: 1;
  -webkit-mask: url(/images/contours.png) center top / cover no-repeat, linear-gradient(to bottom, transparent 0, transparent 35%, #000 var(--fade));
  -webkit-mask-composite: source-in;
  mask: url(/images/contours.png) center top / cover no-repeat, linear-gradient(to bottom, transparent 0, transparent 35%, #000 var(--fade));
  mask-composite: intersect;
}
.home-hero-inner { position: relative; z-index: 2; max-width: var(--max); margin: clamp(-96px, -7vw, -40px) auto 0; padding: 0 var(--gutter) clamp(40px, 6vw, 72px); }
.home-hero .kicker { color: var(--gold); }
.home-hero h1 { color: #fff; margin: 0; text-wrap: balance; hyphens: none; font-size: clamp(1.5rem, 9vw, 6.5rem); line-height: .92; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
/* rotating hero sayings: stacked in one grid cell so the title keeps the height of the longest */
.sayings { display: grid; }
.saying { grid-area: 1 / 1; }
.saying[hidden] { display: block; visibility: hidden; }
.saying .ch { visibility: hidden; }
.saying .ch.on { visibility: visible; }
.saying.typing .ch:not(.on) { visibility: hidden; }
/* the caret rides on the last typed letter (or before the first, when nothing's typed yet) */
.saying .caret { position: relative; }
.saying .caret::after { content: ''; position: absolute; top: .06em; bottom: .02em; right: -.1em; width: .07em; background: var(--gold); animation: caret 1s steps(1) infinite; visibility: visible; }
.saying .caret-start::after { right: auto; left: -.1em; }
.saying.busy .caret::after { animation: none; }
@keyframes caret { 50% { opacity: 0; } }
.saying.fade { animation: saying-fade .5s ease both; }
@keyframes saying-fade { from { opacity: 0; } }
/* Harland's photo in a speech bubble at the title's top right: the sayings are his */
.hero-title { position: relative; width: fit-content; max-width: 100%; padding-right: clamp(52px, 7vw, 92px); }
.hero-said { position: absolute; right: 0; top: clamp(-34px, -2.6vw, -16px); display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; animation: said-pop .5s .9s cubic-bezier(.3,1.6,.5,1) both; }
.hero-said img { width: clamp(44px, 5.6vw, 76px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 3px solid #fffdf9; box-shadow: 0 6px 18px rgba(0,0,0,.35); transition: transform .2s; }
/* the bubble's tail: tucked under the circle's lower left, pointing down-left toward the words */
.hero-said .bubble { position: relative; display: block; isolation: isolate; }
.hero-said .bubble img { position: relative; z-index: 1; display: block; }
.hero-said .bubble::after { content: ''; position: absolute; z-index: 0; left: -7%; bottom: -4%; width: 42%; height: 42%; background: #fffdf9; clip-path: polygon(45% 0, 100% 55%, 0 100%); }
.hero-said span { font: 800 .62rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--gold); }
.hero-said:hover .bubble { transform: rotate(-6deg) scale(1.06); }
/* while a sound bite plays: sound rings ripple out from his photo */
.hero-said.speaking .bubble img { animation: said-ring 1.4s ease-out infinite; }
@keyframes said-ring { 0% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 0 rgba(242,181,58,.65); } 100% { box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 14px rgba(242,181,58,0); } }
@keyframes said-pop { from { opacity: 0; transform: scale(.4) translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .hero-said, .hero-said.speaking .bubble img { animation: none; } }
/* phones: no bubble, so the title keeps its full width */
@media (max-width: 600px) {
  .hero-title { width: auto; padding-right: 0; }
  .hero-said { display: none; }
}
.home-hero-sub { font-size: clamp(1.05rem, 2.2vw, 1.3rem); text-wrap: balance; margin: 1em 0 1.4em; color: #f3ece4; }
.home-dates { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 0 0 1.6em; }
.home-year { font: 400 2.6rem/1 var(--font-title); color: var(--gold); }
.home-dates ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.home-dates li { display: flex; flex-direction: column; font-family: var(--font-head); line-height: 1.2; padding-left: 14px; border-left: 2px solid rgba(255,253,249,.28); }
.home-dates li span { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: #d9cfc4; font-weight: 700; }
.home-dates li b { font-size: 1.25rem; }
.home-reg-note { margin: -.6em 0 1.6em; padding-left: 1.3em; text-indent: -1.3em; font: 500 1.05rem/1.35 var(--font-head); color: #d9cfc4; text-wrap: balance; }
.home-reg-note::before { content: ''; display: inline-block; vertical-align: .12em; width: 8px; height: 8px; margin: 0 calc(1.3em - 8px) 0 0; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(242,181,58,.7); animation: reg-pulse 2s ease-out infinite; }
.home-reg-note strong { color: var(--gold); font-weight: 700; }
@keyframes reg-pulse { 0% { box-shadow: 0 0 0 0 rgba(242,181,58,.7); } 70%, 100% { box-shadow: 0 0 0 10px rgba(242,181,58,0); } }
@media (prefers-reduced-motion: reduce) { .home-reg-note::before { animation: none; box-shadow: 0 0 0 4px rgba(242,181,58,.25); } }
.home-reg-note:empty { display: none; }
.home-year-note:empty { display: none; }
.home-year-note { font: 700 .8rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .12em; background: var(--orange); padding: 6px 10px; border-radius: var(--radius); }

.home-intro { font-size: 1.15rem; }
.home-intro h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

.section-head { max-width: var(--max); margin: 0 auto 24px; padding: 0 var(--gutter); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 24px; }
.section-head .kicker { flex-basis: 100%; }
.section-head h2 { margin: 0; flex: 1 1 auto; }
.section-head .more { font: 700 1rem/1 var(--font-head); text-decoration: none; white-space: nowrap; }

.home-week, .home-news, .home-video { padding: clamp(40px, 6vw, 72px) 0; }
.home-week { background: var(--paper-2); }

/* sponsor band: a quiet thank-you above the photos */
.home-sponsor { text-align: center; padding: clamp(36px, 5vw, 56px) var(--gutter); border-top: 1px solid var(--line); }
.home-sponsor .kicker { margin-bottom: 14px; }
.sponsor-mark { display: inline-block; color: var(--ink); text-decoration: none; transition: opacity .2s; }
.sponsor-mark:hover { opacity: .7; color: var(--ink); }
.sponsor-mark img { display: block; height: clamp(110px, 14vw, 150px); width: auto; margin: 0 auto; }
.sponsor-name { font: 800 clamp(2rem, 5vw, 3rem)/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; }
.sponsor-line { max-width: 520px; margin: 14px auto 0; color: var(--muted); font-size: .95rem; text-wrap: balance; }

/* ticker: camp in a few words, scrolling under the week strip */
.ticker { position: relative; overflow: hidden; background: var(--green-dark); color: #fff; --topo: #fff; --topo-opacity: .08; }
.ticker-track { position: relative; display: flex; width: max-content; margin-left: -3.5em; align-items: center; gap: 1.6rem; padding: 1.1rem 0; font: 400 clamp(1.1rem, 2.2vw, 1.5rem)/1 var(--font-title); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
/* a little mountain between the words */
.ticker-track i { width: .62em; height: .42em; background: var(--gold); clip-path: polygon(50% 0, 100% 100%, 0 100%); flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 60s linear infinite; }
  .ticker.paused .ticker-track { animation-play-state: paused; }
  @keyframes ticker { to { transform: translateX(calc(-50% - .7rem)); } }
}

/* Words from Harland: the founder's sound bites, played like a camp radio */
.home-harland { position: relative; overflow: hidden; background: var(--night); color: #f3ece4; padding: clamp(56px, 8vw, 104px) 0; --topo: #a1887f; --topo-opacity: .14; }
.home-harland[hidden] { display: none; }
.harland-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; gap: clamp(32px, 5vw, 72px); grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.harland-photo { display: block; transition: transform .25s; margin: 0; background: #fffdf9; padding: 12px 12px 44px; transform: rotate(-2deg); box-shadow: 0 24px 48px -20px rgba(0,0,0,.6); max-width: 440px; justify-self: center; }
.harland-photo:hover { transform: rotate(0) scale(1.02); }
.harland-intro a { color: #fff; text-decoration-color: var(--gold); }
.harland-intro a:hover { color: var(--gold); }
.harland-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.home-harland .kicker { color: var(--gold); }
.home-harland h2 { color: #fff; margin: 0; font-size: clamp(2.2rem, 5vw, 3.4rem); }
.harland-intro { color: #d9cfc4; margin: .6em 0 1.6em; max-width: 560px; text-wrap: balance; }

.harland-player { display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(243,236,228,.14); border-radius: 999px; }
.harland-play { flex: none; width: 60px; height: 60px; border-radius: 50%; border: 0; background: var(--orange); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 20px rgba(217,102,43,.35); transition: transform .15s, background .15s; }
.harland-play:hover { background: #e4743a; transform: scale(1.05); }
.harland-play svg { width: 26px; height: 26px; fill: currentColor; }
.harland-play .i-pause, .playing .harland-play .i-play { display: none; }
.playing .harland-play .i-pause { display: inline; }
.harland-now { flex: 1; min-width: 0; }
.callsign { display: inline-flex; align-items: center; gap: 7px; font: 800 .7rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .16em; color: var(--gold); }
.callsign i { width: 7px; height: 7px; border-radius: 50%; background: #8a7a6e; }
.playing .callsign i { background: #ff5a3c; animation: on-air 1.2s ease-in-out infinite; }
.playing .callsign::after { content: 'on air'; color: #ff8a6a; }
@keyframes on-air { 50% { box-shadow: 0 0 0 5px rgba(255,90,60,.25); } }
.harland-title { display: block; font: 800 1.15rem/1.25 var(--font-head); color: #fff; margin: 5px 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.harland-bar { height: 3px; background: rgba(243,236,228,.18); border-radius: 2px; overflow: hidden; }
.harland-bar span { display: block; height: 100%; width: 0; background: var(--gold); transition: width .25s linear; }
.harland-time { flex: none; font: 700 .9rem/1 var(--font-head); color: #d9cfc4; font-variant-numeric: tabular-nums; }

.harland-words { margin: 1.4em 0 1.6em; padding: 0; border: 0; font: 600 clamp(1.25rem, 2.3vw, 1.6rem)/1.4 var(--font-head); color: #f3ece4; font-style: normal; }
.harland-words::before { content: '\201C'; grid-area: 1 / 1; display: block; font: 400 3.6rem/.6 var(--font-title); color: var(--orange); margin-bottom: .1em; }
.harland-words { display: grid; }
.harland-words p { grid-area: 2 / 1; margin: 0; }
.harland-words p[hidden] { display: block; visibility: hidden; }
.harland-words span { transition: color .4s; }
.started .harland-words span { color: rgba(243,236,228,.32); }
.started .harland-words span.said { color: #f3ece4; }
.started .harland-words span.now { color: var(--gold); }

.harland-clips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.harland-clips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(243,236,228,.2); color: #e9e1d7; text-decoration: none; font: 700 .9rem/1 var(--font-head); transition: background .15s, border-color .15s; }
.harland-clips a:hover { border-color: var(--gold); color: #fff; }
.harland-clips a[aria-current] { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (max-width: 860px) {
  .harland-inner { grid-template-columns: 1fr; }
  .harland-photo { max-width: 300px; }
}
.home-video > .video { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.week-strip {
  list-style: none; margin: 0; padding: 18px var(--gutter) 34px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  max-width: var(--max); margin: 0 auto;
  scrollbar-width: none; scroll-padding-left: var(--gutter);
}
.week-strip::-webkit-scrollbar { display: none; }
@media (min-width: 1240px) { .week-strip { grid-auto-columns: 260px; max-width: none; padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); scroll-padding-left: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); } }
.week-strip li { scroll-snap-align: start; }
/* polaroids: white frame, deep bottom, a slight tilt that straightens on hover */
.week-strip a {
  display: flex; flex-direction: column; height: 100%;
  background: #fffdf9; padding: 10px 10px 4px;
  text-decoration: none; color: var(--text);
  box-shadow: 0 1px 2px rgba(43,31,26,.12), 0 14px 28px -14px rgba(43,31,26,.35);
  transform: rotate(-1.2deg); transition: transform .25s, box-shadow .25s;
}
.week-strip li:nth-child(even) a { transform: rotate(1deg); }
.week-strip li:nth-child(3n) a { transform: rotate(-.4deg); }
.week-strip a:hover, .week-strip a:focus-visible { transform: rotate(0) translateY(-4px) scale(1.02); box-shadow: 0 2px 4px rgba(43,31,26,.12), 0 22px 36px -16px rgba(43,31,26,.4); color: var(--text); }
.week-strip img, .week-strip .card-blank { width: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.9) contrast(1.03); }
.card-blank { display: block; background: var(--night) ; position: relative; }
.week-strip .day-when { font: 700 .72rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .14em; color: var(--orange-dark); padding: 16px 6px 6px; text-align: center; }
.week-strip strong { font: 400 1.25rem/1.15 var(--font-title); color: var(--ink); padding: 0 6px; text-align: center; }
.week-strip .day-sum { font-size: .88rem; line-height: 1.5; padding: 8px 6px 16px; color: var(--muted); text-align: center; }

.home-photos {
  position: relative; overflow: hidden;
  background: var(--night); color: #f3ece4; text-align: center;
  padding: clamp(72px, 11vw, 140px) var(--gutter);
}
/* collage: tiny highlight photos tiled behind the band under a dark overlay, drifting slowly */
.collage { position: absolute; inset: -40px; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(64px, 7vw, 104px), 1fr)); gap: 3px; align-content: start; transform: rotate(-3deg); }
.collage img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.home-photos::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(20,14,11,.86) 0%, rgba(20,14,11,.74) 55%, rgba(20,14,11,.62) 100%); }
.home-photos > div:last-child { z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .collage { animation: collage-drift 90s linear infinite alternate; }
  @keyframes collage-drift { to { transform: rotate(-3deg) translateY(-120px); } }
}
.home-photos > div:last-child { position: relative; max-width: 620px; margin: 0 auto; }
.home-photos h2 { color: #fff; margin: 0 0 .4em; }
.home-photos .kicker { color: var(--gold); }
.home-photos .buttons { justify-content: center; }

/* ---------- news */
.news-grid {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter);
  max-width: var(--max);
  display: grid; gap: 28px 24px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.news-card a { display: flex; flex-direction: column; text-decoration: none; color: var(--text); }
.news-card .card-img { position: relative; display: block; aspect-ratio: 3 / 2; border-radius: var(--radius); overflow: hidden; background: var(--paper-2); margin-bottom: 14px; }
.news-card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.news-card .card-blank { height: 100%; }
.news-card .card-blank::after { content: ''; position: absolute; inset: 0; background: #a1887f; opacity: .35; -webkit-mask: url(/images/contours.png) center / 900px auto; mask: url(/images/contours.png) center / 900px auto; }
.news-card a:hover img { transform: scale(1.04); }
.news-card time { font: 700 .75rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .12em; color: var(--orange-dark); }
.news-card strong { font: 800 1.2rem/1.25 var(--font-head); color: var(--ink); margin: 8px 0 6px; }
.news-card a:hover strong { color: var(--green-dark); }
.news-card .card-excerpt { font-size: .95rem; line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* no photo: a quiet paper card as tall as its row, with an orange rule on top and more of the excerpt */
.news-card.text a { height: 100%; box-sizing: border-box; padding: 20px 22px 22px; border-top: 3px solid var(--orange); border-radius: var(--radius); background: var(--paper-2); }
.news-card.text strong { font-size: 1.35rem; margin-top: 12px; }
.news-card.text .card-excerpt { -webkit-line-clamp: 8; }

.year-jump { position: sticky; top: var(--header-h); z-index: 10; background: var(--paper); border-bottom: 1px solid var(--line); }
.year-jump ul { list-style: none; margin: 0 auto; padding: 10px var(--gutter); max-width: var(--max); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.year-jump a { display: block; padding: 6px 12px; border-radius: var(--radius); font: 700 .9rem/1 var(--font-head); text-decoration: none; color: var(--muted); }
.year-jump a:hover, .year-jump a.on { background: var(--brown); color: #fff; }
.news-list { padding: 24px 0 64px; }
.news-list section { padding-top: 24px; }
.news-list .year { max-width: var(--max); margin: 24px auto 20px; padding: 0 var(--gutter); color: var(--line); font-size: clamp(2.6rem, 7vw, 4rem); }

.post-head { max-width: var(--prose); margin: 0 auto; padding: clamp(40px, 7vw, 80px) var(--gutter) 0; }
.post-head h1 { font-size: clamp(2rem, 5.5vw, 3.4rem); margin: 0; }
.post .prose { padding-top: 32px; }
.pager { max-width: var(--prose); margin: 0 auto; padding: 0 var(--gutter) 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager a { display: block; padding: 16px 18px; background: var(--card); border-radius: var(--radius); text-decoration: none; font: 700 1rem/1.3 var(--font-head); color: var(--ink); }
.pager a:hover { color: var(--green-dark); }
.pager span { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 4px; }
.pager .newer { text-align: right; }

/* ---------- the week */
.week-intro { padding-bottom: 8px; font-size: 1.1rem; }
.week-tabs { position: sticky; top: var(--header-h); z-index: 20; background: rgba(237,232,224,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.week-tabs ol { list-style: none; margin: 0 auto; padding: 8px var(--gutter); max-width: var(--max); display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
/* centered when they fit, still scrollable from the first tab when they don't */
.week-tabs li:first-child { margin-left: auto; }
.week-tabs li:last-child { margin-right: auto; }
.week-tabs a { display: block; padding: 8px 14px; border-radius: var(--radius); text-decoration: none; color: var(--muted); font: 700 .92rem/1.15 var(--font-head); white-space: nowrap; }
.week-tabs a span { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: inherit; opacity: .75; }
.week-tabs a:hover { background: var(--paper-2); color: var(--ink); }
.week-tabs a.on { background: var(--brown); color: #fff; }
.week-tabs a.on span { color: var(--gold); opacity: 1; }
/* the same bar on other pages (`section_nav`): sections follow it, the first one right under it */
.page-tabs + .prose { padding-top: 8px; }
.page-section + .page-section { margin-top: 3.2em; }
/* a section's buttons beside its heading, wrapping under it when there's no room */
.page-section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6em 1.2em; margin: 1.8em 0 .9em; }
.page-section:first-child .page-section-head { margin-top: 0; }
.page-section-head h2 { margin: 0 !important; }
.page-section-head .buttons { margin: 0; }
.page-section-head + p { margin-top: 0; }

/* Each day is the trail rail (markers + dashed line) and one reading column the width of the intro.
   On wide screens an empty rail on the right keeps that column centered on the page. */
.week {
  --rail: 64px; --rail-gap: clamp(16px, 3vw, 40px); --col: var(--prose);
  max-width: var(--max); margin: 0 auto; padding: 24px var(--gutter) 80px; position: relative;
}
.day {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, var(--col));
  column-gap: var(--rail-gap);
  padding: 48px 0 24px;
}
@media (min-width: 1000px) {
  .day { grid-template-columns: var(--rail) minmax(0, var(--col)) var(--rail); justify-content: center; }
}
.day-marker { grid-column: 1; grid-row: 1 / span 3; position: relative; }
/* the trail: one thin line down the whole week, wandering gently like a path on a topo map, from the first
   marker to the last. The 160px curve starts and ends at the center heading the same way, so it tiles seamlessly. */
.week::before {
  content: ''; position: absolute; width: 16px;
  top: calc(24px + 48px + var(--rail) / 2); bottom: 80px; left: calc(var(--gutter) + var(--rail) / 2 - 8px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 160'%3E%3Cpath d='M8 0C13 30 13 50 8 80S3 130 8 160' fill='none' stroke='%23c4b6a3' stroke-width='1.6'/%3E%3C/svg%3E") center top / 16px 160px repeat-y;
}
@media (min-width: 1000px) {
  .week::before { left: max(calc(var(--gutter) + var(--rail) / 2 - 8px), calc(50% - var(--col) / 2 - var(--rail-gap) - var(--rail) / 2 - 8px)); }
}
/* the trail ends at the last marker: cover the rest of it */
.day:last-child .day-marker::after { content: ''; position: absolute; left: 0; right: 0; top: var(--rail); bottom: -104px; background: var(--paper); }
.day-num {
  position: sticky; top: calc(var(--header-h) + 90px); z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: var(--rail); height: var(--rail); border-radius: 50%;
  background: var(--brown); color: #fff; box-shadow: 0 0 0 4px var(--paper);
  text-align: center;
}
.day-num small { font: 700 .62rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.day-num b { font: 400 1.65rem/.8 var(--font-title); }
.day-num svg { display: block; width: 30px; height: 30px; margin: -2px 0 -4px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.day-head { grid-column: 2; }
.day-head h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.2rem); }
.day-head .day-sum { font-size: 1.2rem; color: var(--brown); margin: .5em 0 0; text-wrap: pretty; }
/* the day's facts, like the lines on a trailhead sign: each led by a small orange summit marker */
.day-stats { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
.day-stats li { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 .8rem/1.2 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--brown); }
.day-stats li::before { content: ''; flex: none; width: 9px; height: 8px; background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.day-body { grid-column: 2; max-width: none; padding: 28px 0 0; margin: 0; }
/* headings inside a day sit well under the day's title */
.day-body h2 { font-size: clamp(1.3rem, 2.6vw, 1.65rem); color: var(--brown); margin-top: 2em; }
/* every photo fills the column at the same 3:2 shape, alone or in a row */
.day-photo, .day-body figure:not([class]) img, .day-body .gallery img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }
.day-photo { grid-column: 2; margin-top: 28px; }
.day-body figure, .day-body .gallery { margin-left: 0; margin-right: 0; }
.day-body .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.day-body .gallery:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .week { --rail: 44px; --bleed: calc(var(--gutter) + var(--rail) + var(--rail-gap)); }
  .day-num { box-shadow: 0 0 0 3px var(--paper); gap: 2px; }
  .day-num small { font-size: .5rem; letter-spacing: .08em; }
  .day-num b { font-size: 1.15rem; }
  .day-num svg { width: 22px; height: 22px; margin: -1px 0 -3px; }
}

/* {{ map }}: the route map runs the full window width; the whole thing opens the interactive map */
.prose figure.map {
  position: relative; z-index: 2;
  width: 100vw; max-width: none;
  margin: 2.5em 0 2.5em calc(-1 * (var(--gutter) + var(--rail) + var(--rail-gap)));
}
@media (min-width: 1000px) { .prose figure.map { margin-left: calc(50% - 50vw); } }
.map a { display: block; position: relative; color: inherit; text-decoration: none; }
.prose .map img { width: 100%; max-height: calc(100vh - var(--header-h)); object-fit: cover; border-radius: 0; }
.map-cta {
  position: absolute; bottom: clamp(16px, 3vw, 32px);
  left: max(var(--gutter), calc(50% - var(--col) / 2));
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px 14px 16px; background: var(--paper); color: var(--ink);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  box-shadow: inset 5px 0 0 var(--orange);
  filter: drop-shadow(0 10px 24px rgba(43,31,26,.35));
  transition: transform .15s, background .15s;
}
.map-cta > svg { width: 30px; height: 30px; flex: none; fill: none; stroke: var(--green-dark); stroke-width: 1.8; stroke-linejoin: round; margin-left: 4px; }
.map-cta span { font: 700 1.05rem/1.15 var(--font-head); }
.map-cta small { display: block; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dark); margin-bottom: 3px; }
.map-cta i { font-style: normal; font: 700 1.2rem/1 var(--font-head); color: var(--green-dark); transition: transform .15s; }
/* hovering the map: the button bobs up and down and its arrow nudges out, over and over */
@media (hover: hover) {
  .map a:hover .map-cta { animation: map-bob 1.1s ease-in-out infinite; }
  .map a:hover .map-cta i { animation: map-nudge 1.1s ease-in-out infinite; }
}
@keyframes map-bob { 50% { transform: translateY(-4px); } }
@keyframes map-nudge { 50% { transform: translate(3px, -3px); } }
@media (prefers-reduced-motion: reduce) { .map a:hover .map-cta, .map a:hover .map-cta i { animation: none; } }
.prose .map figcaption { position: absolute; right: 8px; bottom: 6px; margin: 0; padding: 2px 6px; border: 0; font-size: .7rem; color: var(--ink); background: rgba(237,232,224,.75); }
/* phones: the map shows whole and the button sits under it */
@media (max-width: 640px) {
  .prose .map img { max-height: none; }
  .map-cta { position: static; clip-path: none; filter: none; padding: 12px var(--gutter); background: var(--card); box-shadow: inset 0 4px 0 var(--orange); }
  .prose .map figcaption { bottom: auto; top: 6px; }
}

/* ---------- registration (camp- / session- prefixes keep these off the embedded admin.steens.camp forms) */
.camp-sessions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 1.5em 0 2em; }
.camp-session { background: var(--card); border-radius: var(--radius); padding: 22px 24px; border-top: 5px solid var(--green); }
.camp-session h3 { margin: 0; font-family: var(--font-title); font-weight: 400; text-transform: uppercase; font-size: 1.5rem; }
.camp-session-dates { font: 700 1.15rem/1.3 var(--font-head); margin: 4px 0 12px; color: var(--brown); }
.session-status { display: inline-block; font: 800 .75rem/1 var(--font-head); text-transform: uppercase; letter-spacing: .12em; padding: 6px 10px; border-radius: var(--radius); background: var(--paper-2); color: var(--brown); }
.session-status-open { background: var(--green); color: #fff; }
.session-status-full, .session-status-closed { background: var(--brown); color: #fff; }
.session-status-waitlist, .session-status-soon { background: var(--gold); color: var(--ink); }
.camp-session .button { margin-left: 10px; padding: .5em 1em; font-size: .9rem; }
.prose .camp-session a.button { color: #fff; text-decoration: none; }
.price-box { background: var(--card); border-radius: var(--radius); padding: 22px 24px; }
.price-box p { margin: .4em 0; }
.price { margin: 0 0 .2em !important; font: 400 3rem/1 var(--font-title); color: var(--ink); }

/* live forms (registration and the like) break out of the reading column to the header's content width */
.prose .embed:not(.embed-placeholder) {
  --w: min(100vw - 2 * var(--gutter), var(--max) - 2 * var(--gutter));
  width: var(--w); margin: 2em 0 2em calc(50% - var(--w) / 2);
}
.embed-placeholder { background: var(--card); border: 2px dashed var(--line); border-radius: var(--radius); padding: 24px; text-align: center; color: var(--muted); }

/* ---------- staff */
.staff-grid {
  list-style: none; padding: 0; margin: 2em 0 3.5em;
  display: grid; gap: 36px 28px; grid-template-columns: repeat(auto-fill, minmax(min(44%, 190px), 1fr));
}
/* each person is a print pinned up at camp: a slight tilt that changes from card to card, straightening when you point at it */
.staff-grid a {
  display: flex; flex-direction: column; height: 100%; padding: 10px 10px 16px; background: #fffdf9;
  text-decoration: none; color: var(--text); text-align: center;
  box-shadow: 0 1px 2px rgba(43,31,26,.12), 0 14px 28px -16px rgba(43,31,26,.4);
  transform: rotate(-1.2deg); transition: transform .2s, box-shadow .2s;
}
.staff-grid li:nth-child(even) a { transform: rotate(1deg); }
.staff-grid li:nth-child(3n) a { transform: rotate(-.4deg); }
.staff-grid li:nth-child(5n) a { transform: rotate(1.6deg); }
.staff-grid a:hover, .staff-grid a:focus-visible { transform: rotate(0) translateY(-4px); box-shadow: 0 2px 4px rgba(43,31,26,.12), 0 22px 36px -16px rgba(43,31,26,.45); color: var(--text); }
.staff-grid img, .staff-grid .avatar { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper-2); filter: saturate(.9) contrast(1.03); }
.staff-grid .avatar { display: grid; place-items: center; font: 400 2.4rem/1 var(--font-title); color: var(--muted); }
.staff-grid strong { margin-top: 14px; font: 800 1.05rem/1.2 var(--font-head); color: var(--ink); text-wrap: balance; }
/* with a nickname: the name and nickname share one spot, and pointing at the card swaps them */
.staff-grid strong:has(.nick) { display: grid; }
.staff-grid .name, .staff-grid .nick { grid-area: 1 / 1; transition: opacity .2s; }
.staff-grid .nick { opacity: 0; color: var(--orange-dark); }
.staff-grid a:hover .name, .staff-grid a:focus-visible .name { opacity: 0; }
.staff-grid a:hover .nick, .staff-grid a:focus-visible .nick { opacity: 1; }
.staff-grid .staff-role { margin-top: 4px; font: 700 .7rem/1.35 var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-dark); text-wrap: balance; }

/* staff alumni: smaller, faded prints, as if they've been pinned up a while; full color when you point at one */
.staff-grid.staff-alumni { grid-template-columns: repeat(auto-fill, minmax(min(44%, 150px), 1fr)); gap: 30px 24px; }
.staff-alumni img { filter: grayscale(.55) sepia(.25) contrast(.95); transition: filter .25s; }
.staff-alumni a:hover img, .staff-alumni a:focus-visible img { filter: none; }
.staff-alumni strong { font-size: .95rem; }

/* tent assistants: cards stacked in columns so short and long bios pack together without gaps */
.bios { columns: 3 320px; column-gap: 20px; margin: 1.5em 0 2.5em; }
.bio { break-inside: avoid; margin: 0 0 20px; padding: 20px 22px 22px; background: #fffdf9; border-radius: var(--radius); box-shadow: 0 1px 2px rgba(43,31,26,.08); font-size: .95rem; line-height: 1.55;
  display: grid; grid-template-columns: 64px 1fr; column-gap: 14px; align-items: center; }
.bio img, .bio .avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px #fffdf9, 0 0 0 3px var(--gold); }
.bio-head h3 { margin: 0; font-size: 1.15rem; line-height: 1.2; }
.bio-head span { display: block; margin-top: 3px; font: 700 .68rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bio-body { grid-column: 1 / -1; margin-top: 14px; }
.bio-body > :first-child { margin-top: 0; }
/* "Three fun facts:" reads as a small label over the list */
.bio-body > p:first-child:has(+ ul) { margin: 0 0 .4em; font: 700 .7rem/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--orange-dark); }
.bio-body ul { list-style: none; margin: 0; padding: 0; }
.bio-body li { position: relative; margin: .35em 0; padding-left: 16px; }
.bio-body li::before { content: ''; position: absolute; left: 0; top: .5em; width: 8px; height: 7px; background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* the closing line (their favorite part of camp) sits apart, a little warmer */
.bio-body > ul ~ p { margin: .9em 0 0; padding-top: .8em; border-top: 1px solid var(--line); color: var(--brown); }

.staff-page .post-head .role { font: 700 1.1rem/1.3 var(--font-head); color: var(--orange-dark); margin: .4em 0 0; }
.staff-body { max-width: var(--max); margin: 0 auto; padding: 32px var(--gutter) 64px; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, var(--prose)); gap: 40px; justify-content: center; align-items: start; }
.staff-body .prose { padding: 0; margin: 0; }
/* a full photo on a staff page, as a polaroid */
.staff-polaroid { margin: 0; background: #fffdf9; padding: 10px 10px 4px; transform: rotate(-1.5deg); box-shadow: 0 1px 2px rgba(43,31,26,.12), 0 18px 34px -16px rgba(43,31,26,.4); position: sticky; top: calc(var(--header-h) + 24px); }
.staff-polaroid img { display: block; width: 100%; height: auto; }
.staff-polaroid.square img { aspect-ratio: 1; object-fit: cover; }
/* no caption: the polaroid's thicker bottom edge */
.staff-polaroid:not(:has(figcaption)) { padding-bottom: 40px; }
.staff-polaroid figcaption { font: 500 .85rem/1.3 var(--font-head); color: var(--muted); text-align: center; padding: 12px 6px 10px; }
.staff-polaroid figcaption span { display: block; }
.staff-polaroid .nickname { display: block; font: 600 .95rem/1.2 var(--font-head); font-style: italic; color: var(--brown); }
.staff-polaroid .nickname + span { margin-top: 3px; }
/* a polaroid with only a nickname under it */
.staff-polaroid figcaption:has(.nickname:only-child) { padding: 12px 6px 14px; }
/* {{ quotes ... }}: a grid of unsigned quote cards */
.quote-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 1.4em 0 2em; }
.prose .quote-cards blockquote { margin: 0; padding: 20px 22px; background: var(--card); border: 0; border-top: 4px solid var(--gold); color: var(--ink); font: 600 1.15rem/1.35 var(--font-head); font-style: normal; }
.quote-cards blockquote p { margin: 0; }
.quote-cards blockquote p::before { content: '\201C'; } .quote-cards blockquote p::after { content: '\201D'; }
.staff-page .post-head { max-width: calc(320px + 40px + var(--prose)); }
@media (max-width: 760px) { .staff-body { grid-template-columns: 1fr; } .staff-polaroid { position: static; max-width: 320px; } }

/* ---------- videos */
.video-grid { list-style: none; padding: 0; margin: 1.5em 0; display: grid; gap: 36px 24px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.prose .video-grid .video { margin: 0; }
.prose .video-grid li { margin: 0; }
/* the grid of thumbnails reads as videos already; no play buttons, no shade */
.video-grid .yt .play, .video-grid .yt::before { display: none; }
.video-grid .yt { box-shadow: 0 1px 2px rgba(43,31,26,.12), 0 14px 28px -18px rgba(43,31,26,.5); transition: transform .2s, box-shadow .2s; }
.video-grid li:hover .yt { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(43,31,26,.12), 0 22px 36px -18px rgba(43,31,26,.55); }
.video-grid p { margin: 12px 0 0; font: 700 1rem/1.3 var(--font-head); text-wrap: balance; }
.video-grid p a { color: var(--ink); text-decoration: none; }
.video-grid li:hover p a { color: var(--green-dark); }

/* the video viewer (site.js): the player as big as the window allows, on the photo viewer's dark backdrop */
.lightbox.video-viewer figure { cursor: default; padding: 0; gap: 0; }
/* as wide as the browser, leaving just enough height above for Close (YouTube shows the title itself) */
.vv-frame { width: min(100vw, (100dvh - 128px) * 16 / 9); aspect-ratio: 16 / 9; background: #000; }
.vv-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.lightbox.video-viewer figcaption { display: none; }

/* ---------- footer */
.site-footer { position: relative; overflow: hidden; background: var(--night); color: #d9cfc4; --topo: #a1887f; --topo-opacity: .18; font-size: .95rem; }
.footer-inner { position: relative; max-width: var(--max); margin: 0 auto; padding: 56px var(--gutter) 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; }
.footer-brand img { width: 84px; }
.footer-tagline { font: 400 1.4rem/1.1 var(--font-title); text-transform: uppercase; color: #fff; margin: 16px 0 0; max-width: 260px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 24px; }
.site-footer h2 { font: 700 .78rem/1 var(--font-head); letter-spacing: .14em; color: var(--gold); margin: 0 0 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin: 0 0 8px; }
.site-footer a { color: #f3ece4; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer p { margin: 0; }
.copyright { position: relative; max-width: var(--max); margin: 0 auto; padding: 16px var(--gutter) 32px; font-size: .82rem; color: #a1948a; }
@media (max-width: 700px) { .footer-inner { grid-template-columns: 1fr; } }

@keyframes hero-settle { from { transform: scale(1.12); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .home-hero-photo { animation: none; }
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}
.video-caption { max-width: var(--max); margin: 12px auto 0; padding: 0 var(--gutter); font: 700 1rem/1.4 var(--font-head); color: var(--muted); }
@media (max-width: 600px) {
  /* size the photo so the ticker just peeks in at the bottom of the screen. lvh reaches the screen edge behind Safari's floating toolbar */
  .home-hero { --hero-h: clamp(220px, calc(100svh - 400px), 52vh); --fade: 160px; }
  @supports (height: 100lvh) { .home-hero { --hero-h: clamp(220px, calc(100lvh - 370px), 64lvh); } }
  .home-hero-inner { padding-bottom: 28px; }
  .brand-name { white-space: nowrap; font-size: 1rem; }
}

/* ---------- lightbox: photos open full size on desktop (site.js) */
img.zoomable { cursor: zoom-in; }
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(23,16,13); color: #f0e9e1; }
.lightbox::backdrop { background: rgb(23,16,13); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in .2s ease; }
@keyframes lb-in { from { opacity: 0; } }
.lightbox figure { outline: none; margin: 0; padding: 56px 88px; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; cursor: zoom-out; }
.lightbox img.wait { opacity: 0; }
.lightbox { --lb-h: calc(100dvh - 150px); }
/* with its shape known (--r), the photo fills the space it will have once the big copy loads */
.lightbox img[style*="--r"] { width: min(100%, calc(var(--lb-h) * var(--r))); aspect-ratio: var(--r); height: auto; }
.lightbox img { max-width: 100%; max-height: var(--lb-h); width: auto; height: auto; object-fit: contain; border-radius: var(--radius); box-shadow: 0 20px 60px rgba(0,0,0,.5); cursor: default; }
/* when it was taken and the camera settings (photos page), arriving after the photo */
.lightbox .lb-info { text-wrap: balance; margin: -6px 0 0; font: 500 .8rem/1.4 var(--font-head); letter-spacing: .02em; color: #9c8f84; text-align: center; white-space: pre-wrap; }
.lightbox .lb-info:empty { display: none; }
.lightbox figcaption { font: 500 .95rem/1.4 var(--font-head); color: #d9cfc4; text-align: center; max-width: 720px; text-wrap: balance; }
.lightbox button { position: fixed; display: flex; align-items: center; justify-content: center; gap: 8px; height: 44px; min-width: 44px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.06); color: #f0e9e1; cursor: pointer; transition: background .15s, border-color .15s; }
.lightbox button:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
.lightbox button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.lightbox button svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lightbox .lb-download { position: fixed; top: 16px; left: 16px; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(255,255,255,.06); color: #f0e9e1; text-decoration: none; font: 700 .78rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; transition: background .15s, border-color .15s; }
.lightbox .lb-download[hidden] { display: none; }
.lightbox .lb-download:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); color: #fff; }
.lightbox .lb-download svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: 16px; right: 16px; padding: 0 12px 0 16px !important; font: 700 .78rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; }
.lb-close svg { width: 18px !important; height: 18px !important; }
.lb-prev { left: 20px; top: 50%; translate: 0 -50%; }
.lb-next { right: 20px; top: 50%; translate: 0 -50%; }
.lightbox.single .lb-prev, .lightbox.single .lb-next { display: none; }
/* phones: the photo runs edge to edge, and the arrows move down to the bottom corners (swiping works too) */
@media (max-width: 640px) {
  .lightbox figure { padding: 64px 0 76px; }
  .lightbox { --lb-h: calc(100dvh - 190px); }
  .lightbox img { border-radius: 0; }
  .lightbox figcaption { padding: 0 var(--gutter); }
  .lb-prev, .lb-next { top: auto; bottom: 16px; translate: none; }
}
/* phones: photos open on paper, matching the light status bar once the photo wall's header has slid away */
@media (max-width: 640px) {
  .lightbox:not(.video-viewer), .lightbox:not(.video-viewer)::backdrop { background: var(--paper, #ede8e0); color: #2b1f1a; }
  .lightbox:not(.video-viewer) img { box-shadow: none; }
  .lightbox:not(.video-viewer) .lb-info { color: #8a7d72; }
  .lightbox:not(.video-viewer) figcaption { color: #4a3b33; }
  .lightbox:not(.video-viewer) button, .lightbox:not(.video-viewer) .lb-download { border-color: rgba(43,31,26,.2); background: rgba(43,31,26,.05); color: #2b1f1a; }
  .lightbox:not(.video-viewer) button:hover, .lightbox:not(.video-viewer) .lb-download:hover { border-color: rgba(43,31,26,.35); background: rgba(43,31,26,.1); color: #2b1f1a; }
}
@media (prefers-reduced-motion: reduce) { .lightbox[open] { animation: none; } }

/* ---------- "new" news (site.js): a badge on stories since the last visit, a small dot on the header's News link */
.new-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 5px 9px 4px; background: var(--gold); color: var(--ink); font: 700 .68rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(43,31,26,.25); }
.has-new { position: relative; }
.has-new::after { content: ''; position: absolute; top: 7px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.menu-toggle.has-new::after { top: 8px; right: 8px; }

/* ---------- photos page (site.js): the wall of photos and the year scrubber */
.photo-wall { margin: 2em 0 0; }
.pw-canvas { position: relative; }
.pw-album { position: absolute; left: 0; right: 0; }
/* an album's header sticks under the bar while you're in its photos; the next album's pushes it off */
.pw-head { position: sticky; top: var(--pw-stick, 0px);  z-index: 3; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 4px 16px; padding-bottom: 12px; box-sizing: border-box; border-bottom: 1px solid var(--line); }
.prose .pw-head h2 { margin: 0; font-size: 1.35rem; line-height: 1; }
.pw-head h2 a { color: var(--ink); text-decoration: none; }
.pw-head h2 a:hover { color: var(--green-dark); }
.pw-head h2 span { color: var(--orange-dark); }
.prose .pw-head p { margin: 0; display: flex; gap: 14px; font: 700 .7rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pw-head p a { color: var(--muted); text-decoration: none; }
.pw-head p a:hover { color: var(--green-dark); }
.pw-head p a.pw-all { color: var(--green-dark); }
.pw-head p .pw-sess { color: var(--orange-dark); }
.pw-head p .pw-note { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; white-space: normal; }
@media (max-width: 900px) { .pw-head p .pw-note { display: none; } }
/* the day filter: sticks under the site header, like the day tabs on /week/ */
.pw-bar { position: sticky; top: var(--header-h); z-index: 20; margin: 0 calc(-1 * var(--gutter)) 1.2em; padding: 0 var(--gutter); }
/* the frosted backdrop behind the bar and the stuck session header: one surface, sticking with them */
.pw-frost { position: sticky; top: var(--header-h); z-index: 2; height: var(--frost-h, 0px); margin: 0 calc(-1 * var(--gutter)) calc(-1 * var(--frost-h, 0px));
  /* solid at the top edge, easing into the see-through blur below */
  background: linear-gradient(to bottom, var(--paper) 0, var(--paper) 6px, rgba(237,232,224,.94) 44px); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: none; }
.pw-filter ol { list-style: none; margin: 0; padding: 8px 0 6px; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pw-filter ol::-webkit-scrollbar { display: none; }
.prose .pw-filter li { margin: 0; flex: none; }
/* the days (or sessions) sit at the right; on year pages "All years" stays at the left (the row of years or
   days under them stays left aligned). Margins rather than
   justify-content, so a row too long for the screen still scrolls from its start */
.pw-filter li:first-child:not(:has(.pw-back)), .pw-filter li:has(.pw-back) + li { margin-left: auto; }
.pw-filter button { display: block; padding: 7px 12px; border: 0; border-radius: var(--radius); background: none; color: var(--muted); font: 700 .9rem/1.15 var(--font-head); white-space: nowrap; text-align: left; cursor: pointer; }
.pw-filter button span { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pw-filter button:hover { background: var(--paper-2); color: var(--ink); }
/* year pages: back to every year, before the session buttons */
.pw-filter a.pw-back { display: block; padding: 7px 14px 7px 0; margin-right: 8px; box-shadow: 1px 0 0 var(--line); color: var(--muted); font: 700 .9rem/1.15 var(--font-head); white-space: nowrap; text-decoration: none; }
.pw-filter a.pw-back span { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pw-filter a.pw-back:hover { color: var(--ink); }
.pw-filter a.pw-sess-link { display: block; padding: 7px 12px; border-radius: var(--radius); color: var(--muted); font: 700 .9rem/1.15 var(--font-head); white-space: nowrap; text-decoration: none; }
.pw-filter a.pw-sess-link span { display: block; font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; opacity: .75; }
.pw-filter a.pw-sess-link:hover { background: var(--paper-2); color: var(--ink); }
.pw-filter a.pw-sess-link.on { background: var(--brown); color: #fff; }
.pw-filter a.pw-sess-link.on span { color: var(--gold); opacity: 1; }
/* session pages: "Other years" opens a menu of every year's sessions (this one shaded, its open session filled) */
.pw-filter button.pw-other { display: flex; align-items: center; gap: 4px; }
.pw-filter button.pw-other svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.pw-filter button.pw-other[aria-expanded="true"] { background: var(--paper-2); color: var(--ink); }
.pw-filter button.pw-other[aria-expanded="true"] svg { transform: rotate(180deg); }
.pw-menu { position: absolute; scroll-behavior: auto; z-index: 30; width: 250px; max-height: min(60vh, 440px); overflow-y: auto; padding: 6px; box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: 0 12px 32px rgba(43,31,26,.18); }
.pw-menu[hidden] { display: none; }
.pw-menu-year { display: flex; align-items: center; gap: 2px; padding: 2px 4px; border-radius: var(--radius); }
.pw-menu-year + .pw-menu-year { border-top: 1px solid var(--paper-2); }
.pw-menu-year b { flex: 1; font: 700 .95rem/1 var(--font-head); color: var(--ink); }
.pw-menu-year a { padding: 7px 9px; border-radius: var(--radius); color: var(--muted); font: 700 .85rem/1 var(--font-head); text-decoration: none; white-space: nowrap; }
.pw-menu-year a:hover { background: var(--brown); color: #fff; }
.pw-menu-year.here { background: var(--paper-2); }
.pw-menu-year span { padding: 7px 9px; border-radius: var(--radius); background: var(--brown); color: #fff; font: 700 .85rem/1 var(--font-head); white-space: nowrap; }
.pw-filter button.on { background: var(--brown); color: #fff; }
.pw-filter button.on span { color: var(--gold); opacity: 1; }
/* a day's heading inside a session: led by the orange summit marker, like the day facts on /week/ */
.pw-day { position: absolute; left: 0; right: 0; display: flex; align-items: flex-end; padding-bottom: 10px; box-sizing: border-box; }
.prose .pw-day h3 { display: flex; align-items: center; gap: 8px; margin: 0; font: 700 .8rem/1 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--brown); }
.pw-day h3::before { content: ''; width: 9px; height: 8px; background: var(--orange); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
/* the years to jump to: one line under the days, scrolling sideways */
.pw-jump { position: relative; display: flex; align-items: center; gap: 2px; margin: 0; padding: 0 0 8px; overflow-x: auto; scrollbar-width: none; white-space: nowrap; }
.pw-jump::-webkit-scrollbar { display: none; }
.pw-jump button { flex: none; padding: 5px 9px; border: 0; border-radius: var(--radius); background: none; color: var(--muted); font: 700 .85rem/1 var(--font-head); cursor: pointer; }
.pw-jump button:hover { background: var(--paper-2); color: var(--ink); }
.pw-jump button.on { background: var(--orange); color: #fff; }
.pw-jump a.pw-jump-link { flex: none; padding: 5px 9px; border-radius: var(--radius); color: var(--muted); font: 700 .85rem/1 var(--font-head); text-decoration: none; }
.pw-jump a.pw-jump-link:hover { background: var(--paper-2); color: var(--ink); }
.pw-bar-hl .pw-jump a.pw-jump-link { padding: 6px 11px; font-size: .9rem; line-height: 1.1; }
.pw-row { position: absolute; left: 0; right: 0; contain: layout paint style; }
.pw-photo { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; position: absolute; top: 0; height: 100%; padding: 0; border: 0; background: #e2d9cd; overflow: hidden; cursor: zoom-in; }
/* touches go to the tile, not the image, so holding a photo doesn't start iOS's image preview (the long press
   selects it instead, site.js) */
.pw-photo img { pointer-events: none; -webkit-touch-callout: none; -webkit-user-drag: none; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s, transform .4s; }
.pw-photo img.in { opacity: 1; }
.pw-photo:hover img { transform: scale(1.03); }
.pw-photo:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; z-index: 1; }

/* the scrubber: a thin line down the right edge, filling orange as you go, with the logo's runners
   for the handle and every year marked; drag it or click a year to jump */
.pw-scrub { position: fixed; z-index: 30; right: 0; top: calc(var(--header-h) + var(--bar-h, 0px) + 52px); bottom: 22px; width: 72px; opacity: 0; pointer-events: none; transition: opacity .25s; touch-action: none; cursor: ns-resize; }
.pw-scrub.on { opacity: 1; pointer-events: auto; }
.pw-track { position: absolute; right: 19px; top: 0; bottom: 0; width: 2px; border-radius: 1px; background: #d3c7b6; }
.pw-track i { position: absolute; left: -.5px; right: -.5px; top: 0; border-radius: 2px; background: var(--orange); }
/* the handle: the two runners from the logo (static/images/runners.svg), in orange, running down the trail line */
.pw-thumb { position: absolute; right: 6px; top: -18px; width: 28px; height: 36px; }
.pw-thumb b { position: absolute; inset: 0; background: var(--orange);
  -webkit-mask: url(/images/runners.svg) center / contain no-repeat; mask: url(/images/runners.svg) center / contain no-repeat; }
/* a paper-colored halo so the runners stand clear of the line behind them: the same shape, a little bigger
   (no blur filter: moving a blurred shape every frame is heavy on phones) */
.pw-thumb::before { content: ''; position: absolute; inset: -3px; background: var(--paper);
  -webkit-mask: url(/images/runners.svg) center / contain no-repeat; mask: url(/images/runners.svg) center / contain no-repeat; }
.pw-bubble { position: absolute; right: 78px; top: 50%; translate: 0 -50%; padding: 7px 11px 6px; border-radius: var(--radius); background: var(--brown); color: #fff; white-space: nowrap; font: 700 .8rem/1 var(--font-head); letter-spacing: .06em; opacity: 0; transition: opacity .2s; pointer-events: none; }
.pw-scrub.dragging .pw-bubble { opacity: 1; }
.pw-years { position: absolute; right: 30px; top: 0; bottom: 0; }
.pw-years button { position: absolute; right: 0; translate: 0 -50%; white-space: nowrap; padding: 2px 4px; border: 0; border-radius: var(--radius); background: none; color: var(--muted); font: 700 .7rem/1 var(--font-head); cursor: pointer; }
.pw-years button:hover, .pw-years button.on { color: var(--orange-dark); }
.pw-years button.on { font-size: .8rem; }
/* keep the photos clear of the scrubber when it sits over them */
@media (max-width: 1360px) and (min-width: 641px) { .photo-wall { padding-right: 60px; } }
/* touch screens (tablets): only the handle is grabbable, so the edge of the screen still scrolls normally */
@media (pointer: coarse) {
  .pw-scrub { pointer-events: none !important; }
  .pw-scrub .pw-thumb { pointer-events: auto; right: -2px; width: 44px; height: 56px; top: -28px; }
  .pw-scrub .pw-thumb b, .pw-scrub .pw-thumb::before { inset: 6px 6px; }
  .pw-scrub .pw-years button { pointer-events: auto; }
  /* no hover zoom or fade on touch screens: each animated photo can take its own graphics memory */
  .pw-photo img { transition: none; }
  .pw-photo:hover img { transform: none; }
}
/* beside the photos the scrubber lists every year, so the bar skips its row of years (phones keep it) */
@media (min-width: 641px) { .pw-jump { display: none; } }
/* phones: just the progress line in the margin, no handle, labels, or dragging (the bar above has the years) */
@media (max-width: 640px) {
  .pw-scrub { width: 8px; pointer-events: none !important; }
  .pw-track { right: 3px; }
  .pw-scrub .pw-thumb, .pw-years { display: none; }
}
@media (max-width: 640px) {
  /* phones: the session title on its own line, the counts and links under it */
  .pw-head { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 7px; padding-bottom: 10px; }
  .prose .pw-head h2 { font-size: 1.15rem; }
  .prose .pw-head p { font-size: .66rem; }
}

/* ---------- photo pages: a slim title band instead of the full hero, and no page scrollbar (the trail is the
   progress bar) */
.page-photos .hero-topo { padding: clamp(24px, 4vw, 40px) 0 clamp(20px, 3vw, 32px); }
.page-photos .hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-photos .hero-sub { font-size: 1rem; margin-top: .4em; }
.page-photos .hero .kicker { margin-bottom: .3em; }
.page-photos main > .prose { padding-top: clamp(20px, 3vw, 32px); }
html:has(body.page-photos) { scrollbar-width: none; }
html:has(body.page-photos)::-webkit-scrollbar, body.page-photos::-webkit-scrollbar { display: none; }

/* ---------- photo pages: select mode (site.js). The floating Download button turns it on; picked photos get an
   orange check and frame; the tray at the bottom counts them and downloads them */
/* styled like the photo viewer's buttons: a dark, nearly square button with a thin light edge */
.pw-fab { position: fixed; z-index: 35; right: 88px; bottom: var(--pw-bottom); display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(35,25,21,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #f0e9e1; font: 700 .78rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 6px 20px rgba(43,31,26,.3); cursor: pointer; transition: background .15s, border-color .15s; }
.pw-fab:hover { background: rgba(60,44,37,.95); border-color: rgba(255,255,255,.35); color: #fff; }
/* off the bottom edge. Safari on iOS 26 counts its floating address bar in the bottom safe area (about 87px), so
   most of that is left out: the buttons sit level with the address bar, beside it, rather than above it */
body { --pw-bottom: max(16px, calc(env(safe-area-inset-bottom) - 64px)); }
.pw-fab[hidden] { display: none; }
.pw-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  .pw-fab { right: 16px; width: 48px; height: 48px; padding: 0; justify-content: center; }
  .pw-fab span { display: none; }
  .pw-fab svg { width: 22px; height: 22px; }
}
.selecting .pw-photo { cursor: pointer; }
/* with a mouse, the empty circle shows on the photo under the pointer; clicking it starts select mode (site.js) */
@media (hover: hover) and (pointer: fine) {
  .pw-canvas:not(.selecting) .pw-photo:hover::after { content: ''; position: absolute; z-index: 2; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: pointer; }
}
.selecting .pw-photo::after { content: ''; position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; background: rgba(0,0,0,.25); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.selecting .pw-photo.picked::after { border-color: var(--orange); background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-8' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.selecting .pw-photo:hover img { transform: none; }
/* a picked photo keeps its size; an orange frame drawn inside it marks it */
.selecting .pw-photo.picked::before { content: ''; position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 0 4px var(--orange); pointer-events: none; }
.selecting .pw-photo::after { z-index: 2; }
.pw-tray { position: fixed; z-index: 40; left: 50%; bottom: var(--pw-bottom); translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 18px; border-radius: 999px; background: var(--brown); color: #fff; box-shadow: 0 10px 30px rgba(43,31,26,.4); white-space: nowrap; }
.pw-tray[hidden] { display: none; }
.pw-tray-count { margin: 0 8px 0 0; font: 700 .9rem/1 var(--font-head); }
.pw-tray button { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font: 700 .78rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.pw-tray button:hover { background: rgba(255,255,255,.2); }
.pw-tray button[hidden] { display: none; }
.pw-tray .pw-tray-down { background: var(--orange); }
.pw-tray .pw-tray-down:hover { background: #e4743a; }
.pw-tray .pw-tray-down:disabled { opacity: .45; cursor: default; }
/* progress while saving: a thin line along the tray's bottom */
.pw-tray { overflow: hidden; }
.pw-tray-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.15); }
.pw-tray-bar[hidden] { display: none; }
.pw-tray-bar b { display: block; width: 0; height: 100%; background: var(--gold); transition: width .2s; }
.pw-tray svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 640px) {
  /* phones: the tray spans the screen; the message gives way (ellipsis) so the buttons always fit */
  .pw-tray { left: 12px; right: 12px; translate: none; gap: 6px; padding: 6px 6px 6px 14px; }
  .pw-tray-count { flex: 1; min-width: 0; margin-right: 2px; overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
  .pw-tray button { flex: none; padding: 9px 10px; font-size: .72rem; letter-spacing: .08em; }
  .pw-tray button svg { width: 15px; height: 15px; }
}

/* phones on the photo pages: once into the photos the site header slides up out of the way and the photo bar takes
   the top of the screen (site.js). Nothing here changes the page's background or animates layout while scrolling:
   Safari on iOS re-measures its toolbars when that happens mid-scroll, which shrank the visible window */
html.pw-compact .site-header { transform: translateY(-100%); }
html.pw-compact .pw-bar, html.pw-compact .pw-frost { top: 0; }
html.pw-compact .pw-scrub { top: calc(var(--bar-h, 0px) + 52px); }

/* the top row on one line, close to the size of the row under it: the small label (Sun, 2026) sits before the
   name in the same size, just lighter; "All years" and "All days" don't need theirs */
.pw-filter ol { padding: 7px 0 5px; align-items: center; }
.pw-filter button, .pw-filter a.pw-sess-link, .pw-filter a.pw-back { padding: 6px 11px; font-size: .9rem; line-height: 1.1; }
.pw-filter button span, .pw-filter a.pw-sess-link span { display: inline; margin-right: .3em; font-size: inherit; letter-spacing: 0; text-transform: none; vertical-align: 0; opacity: .55; }
.pw-filter a.pw-back { padding-left: 0; }
.pw-filter a.pw-back span, .pw-filter button[data-day=""] span { display: none; }

/* /photos/ (the highlights): the years are the first row and the day filter the second, like the session pages
   (sessions, then days). Both rows show on every screen, since the days filter here */
.pw-bar-hl { display: flex; flex-direction: column; }
.pw-bar-hl .pw-jump { order: -1; display: flex; gap: 4px; padding: 7px 0 5px; }
.pw-bar-hl .pw-jump > :first-child { margin-left: auto; }
/* each year is plain, like the day filter; the year you're in opens into a brown block with its sessions (S1 S2).
   A year jumps to its Session 1, and then its S2 is right there */
.pw-jump .pw-jy { flex: none; display: flex; align-items: center; gap: 2px; border-radius: var(--radius); }
.pw-jump .pw-jy button.pw-js { display: none; }
.pw-jump .pw-jy:has(button.on) { padding: 2px; background: var(--brown); }
.pw-jump .pw-jy:has(button.on) button.pw-js { display: block; }
.pw-bar-hl .pw-jump .pw-jy button { padding: 6px 11px; }
.pw-bar-hl .pw-jump .pw-jy:has(button.on) button { padding: 4px 9px; }
.pw-bar-hl .pw-jump .pw-jy button[data-g].on { background: none; color: #fff; }
.pw-bar-hl .pw-jump .pw-jy button.pw-js { min-width: 28px; padding: 4px 7px; font-size: .8rem; color: var(--muted); background: none; }
.pw-bar-hl .pw-jump .pw-jy button.pw-js:hover { color: var(--ink); background: var(--line); }
.pw-bar-hl .pw-jump .pw-jy:has(button.on) button.pw-js { color: #e9dccf; }
.pw-bar-hl .pw-jump .pw-jy:has(button.on) button.pw-js:hover { color: #fff; background: rgba(255,255,255,.12); }
.pw-bar-hl .pw-jump .pw-jy button.pw-js.on { background: var(--orange); color: #fff; }
.pw-bar-hl .pw-jump .pw-jy button[data-g]:not(.on):hover { background: var(--paper-2); }
.pw-bar-hl .pw-jump .pw-jy button[data-g].on:hover { background: none; }
.pw-bar-hl .pw-jump button { padding: 6px 11px; font-size: .9rem; line-height: 1.1; }
.pw-bar-hl .pw-jump button.on { background: var(--brown); color: #fff; }
.pw-bar-hl .pw-filter ol { padding: 0 0 8px; gap: 2px; }
.prose .pw-bar-hl .pw-filter li:first-child { margin-left: 0; }
.pw-bar-hl .pw-filter button { padding: 5px 9px; font-size: .85rem; line-height: 1; }
.pw-bar-hl .pw-filter button.on { background: var(--orange); color: #fff; }
.pw-bar-hl .pw-filter button.on span { color: #fff; opacity: .75; }
/* larger screens: both rows to the right; phones: both from the left, scrolling sideways */
@media (min-width: 641px) { .prose .pw-bar-hl .pw-filter li:first-child { margin-left: auto; } }
@media (max-width: 640px) { .pw-bar-hl .pw-jump > :first-child { margin-left: 0; } }

/* phones: the photo view switch (shapes / squares), floating at the bottom left like the Download button at the
   right; out of the way while selecting (the tray takes the bottom) */
.pw-view { display: none; }
@media (max-width: 640px) {
  .pw-view { position: fixed; z-index: 35; left: 16px; bottom: var(--pw-bottom); display: grid; place-items: center; width: 48px; height: 48px; padding: 0; box-sizing: border-box; border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); background: rgba(35,25,21,.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #f0e9e1; box-shadow: 0 6px 20px rgba(43,31,26,.3); cursor: pointer; }
  .pw-view svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
  .pw-view[aria-pressed="true"] { color: var(--gold); }
  body.pw-selecting .pw-view { display: none; }
}