/* Waypoint Resources — "trail map" design.
   Navy from the logo, bone paper, blaze orange like a trail marker. Topographic lines, giant type, numbered waypoints. */
@import url(/fonts/fonts.css);
:root {
  --navy: #00243e;
  --deep: #001a2e;
  --bone: #f3ecdf;
  --paper: #faf6ee;
  --blaze: #e0582b;
  --ink: #0d1b26;
  --muted: #4d5a64;
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Archivo", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Space Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(20px, 5vw, 64px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bone); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--blaze); color: #fff; }
h1, h2, h3 { font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 144; line-height: .95; letter-spacing: -.03em; margin: 0; }
em { font-style: italic; }
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.blaze { color: var(--blaze); }

/* Compass (inline SVG) */
.compass { color: var(--bone); }
.compass .north { fill: var(--blaze); }

/* Header */
.site-header { position: absolute; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px var(--pad); color: var(--bone); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand svg { width: 38px; height: 38px; }
.brand span { font-family: var(--sans); font-weight: 800; font-stretch: 125%; letter-spacing: .22em; font-size: .95rem; }
.nav { display: flex; gap: clamp(14px, 2.5vw, 34px); flex-wrap: wrap; justify-content: flex-end; }
.nav a { text-decoration: none; font-weight: 600; font-size: .95rem; display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a b { font-family: var(--mono); font-weight: 400; font-size: .7rem; color: var(--blaze); }
.nav a:hover, .nav a[aria-current="page"] { border-color: var(--blaze); }
@media (max-width: 720px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
  .nav { justify-content: flex-start; gap: 4px 18px; }
  .nav a { font-size: .88rem; }
}

/* Topographic backgrounds */
.topo { position: relative; isolation: isolate; overflow: hidden; }
.topo::before { content: ""; position: absolute; inset: -5%; z-index: -1; background: url(images/topo-light.svg) center / cover no-repeat; opacity: .22; pointer-events: none; }
.topo.on-light::before { background-image: url(images/topo-dark.svg); opacity: .1; }

/* Hero */
.hero { background: var(--navy); color: var(--bone); min-height: 100vh; min-height: 100svh; display: grid; align-content: end; padding: 160px var(--pad) 48px; }
.hero .here { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 4vh, 40px); }
.pulse { width: 12px; height: 12px; border-radius: 50%; background: var(--blaze); box-shadow: 0 0 0 0 rgba(224,88,43,.7); animation: pulse 2.2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 16px rgba(224,88,43,0); } 100% { box-shadow: 0 0 0 0 rgba(224,88,43,0); } }
.hero h1 { font-size: clamp(3.6rem, 12.5vw, 12.5rem); max-width: 9ch; position: relative; z-index: 2; }
.hero h1 em { color: var(--blaze); font-weight: 600; }
.hero .big-compass { position: absolute; right: -7vw; top: 50%; width: min(78vh, 50vw); height: auto; transform: translateY(-50%); opacity: .95; z-index: 1; }
.hero .big-compass svg { width: 100%; height: auto; transition: transform .1s linear; }
.hero-foot { display: flex; justify-content: space-between; align-items: end; gap: 30px; flex-wrap: wrap; margin-top: clamp(28px, 5vh, 56px); padding-top: 24px; border-top: 1px solid rgba(243,236,223,.25); position: relative; z-index: 2; }
.hero-foot p { max-width: 34em; margin: 0; font-size: clamp(1rem, 1.6vw, 1.2rem); opacity: .9; }
@media (max-width: 720px) {
  .hero { padding-top: 150px; }
  .hero h1 { font-size: 17vw; }
  .page-hero h1 { font-size: 15vw; }
  .name-hero h1 { font-size: 18vw; }
  .hero .big-compass { width: 120vw; right: -60vw; top: 38%; opacity: .25; }
}

/* Page hero (inner pages) */
.page-hero { min-height: 72vh; min-height: 72svh; }
.page-hero h1 { font-size: clamp(3.4rem, 9vw, 9rem); max-width: min(11ch, 64vw); }
.page-hero .big-compass { width: min(60vh, 50vw); opacity: .9; }

/* Buttons */
.go { display: inline-flex; align-items: center; gap: 14px; background: var(--blaze); color: #fff; text-decoration: none; font-family: var(--mono); font-size: .85rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 18px 26px; border: 0; cursor: pointer; transition: background .2s; }
.go::after { content: "→"; font-size: 1.2rem; transition: transform .2s; }
.go:hover { background: #c94a20; }
.go:hover::after { transform: translateX(6px); }
.go.line { background: transparent; color: currentColor; box-shadow: inset 0 0 0 2px currentColor; }
.go.line:hover { background: var(--bone); color: var(--navy); box-shadow: inset 0 0 0 2px var(--bone); }
.go.down::after { content: "↓"; }
.go.down:hover::after { transform: translateY(4px); }

/* The trail of numbered waypoints */
.trail { background: var(--bone); padding: clamp(80px, 12vw, 160px) var(--pad); position: relative; }
.trail::after { content: ""; position: absolute; left: calc(var(--pad) + 9px); top: 0; bottom: 0; border-left: 3px dashed var(--blaze); opacity: .6; }
.trail-intro { max-width: 900px; margin: 0 0 clamp(60px, 10vw, 130px) 56px; }
.trail-intro h2 { font-size: clamp(2.4rem, 6vw, 5rem); margin: 14px 0 22px; }
.trail-intro p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: var(--muted); max-width: 36em; margin: 0; }
.wp { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 5vw, 80px); align-items: center; padding-left: 56px; margin-bottom: clamp(70px, 12vw, 150px); }
.wp::before { content: ""; position: absolute; left: 0; top: 50%; width: 21px; height: 21px; margin-top: -10px; border-radius: 50%; background: var(--blaze); box-shadow: 0 0 0 6px var(--bone), 0 0 0 8px var(--blaze); z-index: 2; }
.wp .num { font-family: var(--display); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(7rem, 24vw, 22rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--navy); }
.wp:nth-of-type(even) .num { order: 2; text-align: right; }
.wp h3 { font-size: clamp(2.6rem, 6.5vw, 5.6rem); color: var(--navy); margin: 12px 0 18px; }
.wp p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 30em; margin: 0 0 28px; }
.wp .mono { color: var(--blaze); }
@media (max-width: 720px) {
  .wp { grid-template-columns: 1fr; gap: 0; }
  .wp::before { top: 3.2rem; }
  .wp:nth-of-type(even) .num { order: 0; text-align: left; }
  .wp .num { -webkit-text-stroke-width: 1.5px; }
}

/* Giant verse */
.verse-band { background: var(--blaze); color: var(--deep); padding: clamp(80px, 13vw, 180px) var(--pad); }
.verse-band blockquote { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-variation-settings: "opsz" 144; font-size: clamp(2.2rem, 6.4vw, 6.4rem); line-height: 1.02; letter-spacing: -.025em; max-width: 16ch; }
.verse-band cite { display: block; margin-top: 34px; font-style: normal; }

/* Closing call */
.closer { background: var(--navy); color: var(--bone); padding: clamp(90px, 13vw, 170px) var(--pad); text-align: left; }
.closer h2 { font-size: clamp(3rem, 9vw, 8rem); max-width: 12ch; margin-bottom: 40px; }
.closer h2 em { color: var(--blaze); font-weight: 600; }
.row { display: flex; flex-wrap: wrap; gap: 14px; }

/* Footer */
.site-footer { background: var(--deep); color: var(--bone); padding: 70px var(--pad) 30px; overflow: hidden; }
.site-footer .giant { font-family: var(--sans); font-weight: 900; font-stretch: 125%; font-size: 13.2vw; line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 1.5px rgba(243,236,223,.45); margin: 0 0 40px -0.06em; white-space: nowrap; user-select: none; }
.site-footer .bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; border-top: 1px solid rgba(243,236,223,.2); padding-top: 24px; }
.site-footer nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-footer nav a { text-decoration: none; font-weight: 600; }
.site-footer nav a:hover { color: var(--blaze); }
.site-footer .mono { opacity: .6; font-size: .7rem; line-height: 1.8; }

/* Sample-content stamp */
.stamp { display: inline-block; font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blaze); border: 2px dashed var(--blaze); padding: 8px 12px; margin-bottom: 28px; transform: rotate(-1.5deg); }

/* Devotional */
.devo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 6vw, 100px); padding: clamp(80px, 11vw, 150px) var(--pad); max-width: 1300px; }
.devo aside { position: sticky; top: 30px; align-self: start; border-top: 3px solid var(--navy); padding-top: 16px; display: grid; gap: 14px; color: var(--muted); }
.devo aside b { display: block; color: var(--navy); font-family: var(--mono); font-size: .68rem; letter-spacing: .14em; }
.devo h2 { font-size: clamp(3rem, 8vw, 7rem); color: var(--navy); margin-bottom: 40px; }
.devo .scripture { margin: 0 0 50px; padding: 6px 0 6px clamp(18px, 3vw, 34px); border-left: 6px solid var(--blaze); font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.7rem, 3.6vw, 2.8rem); line-height: 1.12; color: var(--navy); }
.devo .scripture cite { display: block; margin-top: 14px; font-style: normal; color: var(--blaze); }
.devo .body { max-width: 36em; font-size: clamp(1.08rem, 1.5vw, 1.22rem); }
.devo .body > p:first-of-type::first-letter { float: left; font-family: var(--display); font-weight: 900; font-size: 5.4em; line-height: .8; padding: 6px 12px 0 0; color: var(--blaze); }
.devo .step { margin-top: 44px; padding-top: 18px; border-top: 1px solid rgba(0,36,62,.2); }
.devo .step .mono { color: var(--blaze); display: block; margin-bottom: 8px; }
.devo .step p { margin: 0; }
@media (max-width: 820px) { .devo { grid-template-columns: 1fr; } .devo aside { position: static; grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px; } }

/* Resource index */
.index { padding: clamp(80px, 11vw, 150px) var(--pad); }
.index-head { display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 20px; margin-bottom: 40px; }
.index-head h2 { font-size: clamp(2.6rem, 6vw, 5rem); color: var(--navy); }
.item { display: grid; grid-template-columns: 90px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: clamp(24px, 3.5vw, 40px) 12px; border-top: 2px solid var(--navy); text-decoration: none; color: var(--navy); transition: background .25s, color .25s, padding .25s; }
.item:last-child { border-bottom: 2px solid var(--navy); }
.item .n { font-family: var(--mono); color: var(--blaze); }
.item h3 { font-size: clamp(1.9rem, 4.2vw, 3.6rem); }
.item p { margin: 0; color: var(--muted); }
.item .arrow { font-size: 2.2rem; transition: transform .25s; }
.item:hover { background: var(--navy); color: var(--bone); padding-left: 28px; }
.item:hover p { color: rgba(243,236,223,.75); }
.item:hover .arrow { transform: translateX(8px); color: var(--blaze); }
@media (max-width: 760px) { .item { grid-template-columns: 1fr auto; gap: 8px 16px; } .item .n { grid-column: 1 / -1; } .item p { grid-column: 1; } .item .arrow { grid-row: 2; grid-column: 2; } }

/* Request form */
.request-band { background: var(--navy); color: var(--bone); padding: clamp(80px, 11vw, 150px) var(--pad); display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(40px, 7vw, 120px); }
.request-band h2 { font-size: clamp(3rem, 7vw, 6.2rem); }
.request-band h2 em { color: var(--blaze); font-weight: 600; }
.request-band .intro p { font-size: 1.15rem; opacity: .85; max-width: 26em; margin: 26px 0 0; }
form.request { display: grid; gap: 30px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blaze); margin-bottom: 6px; }
label small { color: rgba(243,236,223,.55); letter-spacing: .06em; }
input, select, textarea { width: 100%; font: inherit; font-size: 1.25rem; color: var(--bone); background: transparent; border: 0; border-bottom: 2px solid rgba(243,236,223,.45); border-radius: 0; padding: 10px 0; transition: border-color .2s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blaze); }
textarea { min-height: 90px; resize: vertical; }
select { -webkit-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23e0582b' stroke-width='2'/%3E%3C/svg%3E") right 4px center no-repeat; padding-right: 30px; }
select option { color: var(--ink); }
::placeholder { color: rgba(243,236,223,.4); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 860px) { .request-band { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .two { grid-template-columns: 1fr; } }

/* About */
.name-hero h1 { font-size: clamp(4rem, 12vw, 12rem); max-width: none; line-height: .85; }
.about { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 7vw, 120px); padding: clamp(80px, 11vw, 150px) var(--pad); align-items: start; }
.portrait { position: relative; aspect-ratio: 4 / 5; background: var(--navy); display: grid; place-items: center; box-shadow: 22px 22px 0 var(--blaze); }
.portrait svg { width: 45%; height: auto; }
.portrait .mono { position: absolute; bottom: 16px; left: 18px; color: rgba(243,236,223,.6); }
.about h2 { font-size: clamp(2.6rem, 6vw, 5rem); color: var(--navy); margin-bottom: 30px; }
.about .body { font-size: clamp(1.08rem, 1.5vw, 1.25rem); max-width: 34em; }
.about .pull { margin: 46px 0 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.5rem, 3vw, 2.3rem); line-height: 1.15; color: var(--navy); border-top: 6px solid var(--blaze); padding-top: 22px; }
.about .pull cite { display: block; margin-top: 12px; font-style: normal; color: var(--blaze); }
@media (max-width: 820px) { .about { grid-template-columns: 1fr; } .portrait { max-width: 340px; } }

/* Scroll reveal (only when JS is running) */
.js .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .pulse { animation: none; }
}
.name-hero .big-compass { width: min(60vh, 36vw); right: -15vw; opacity: .6; }

/* ---- Round 3: lamp, ridgeline, live trail, trailhead signs ---- */

/* Lamp: a brighter copy of the map lines, revealed in a warm circle that follows your finger or mouse (Psalm 119:105). */
.hero { --x: 70%; --y: 42%; --rh: clamp(46px, 8vw, 130px); }
.hero.topo::before { inset: 0; }
.lamp { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at var(--x) var(--y), rgba(224,88,43,.22), rgba(224,88,43,0) 38%), url(images/topo-light.svg) center / cover no-repeat;
  -webkit-mask-image: radial-gradient(circle clamp(160px, 22vw, 320px) at var(--x) var(--y), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%);
          mask-image: radial-gradient(circle clamp(160px, 22vw, 320px) at var(--x) var(--y), #000 0%, rgba(0,0,0,.55) 45%, transparent 100%); }

/* Ridgeline at the bottom of each hero, with a summit flag */
.hero.ridged { padding-bottom: calc(var(--rh) + 36px); }
.ridge { position: absolute; left: 0; bottom: -1px; width: 100%; height: var(--rh); z-index: 3; fill: var(--bone); }
.ridge .back { opacity: .28; }
.flag { position: absolute; z-index: 3; width: 22px; height: 33px; bottom: calc(var(--rh) * var(--y) - 3px); margin-left: -4px; color: var(--bone); transform-origin: 4px 100%; animation: wave 3.5s ease-in-out infinite; }
@keyframes wave { 50% { transform: skewY(-4deg); } }
.hero-foot .row { gap: 10px; }

/* The trail draws itself as you scroll; stops light up as you reach them */
.trail-line { position: absolute; left: calc(var(--pad) + 9px); top: 0; bottom: 0; width: 3px; z-index: 1; }
.trail-line span { display: block; width: 100%; height: 0; background: var(--blaze); box-shadow: 0 0 12px rgba(224,88,43,.6); }
.js .wp::before { background: var(--bone); transition: background .4s, transform .4s; }
.js .wp.reached::before { background: var(--blaze); transform: scale(1.15); }
.js .wp .num { transition: color .6s, -webkit-text-stroke-color .6s; }
.js .wp.reached .num { color: rgba(224,88,43,.08); }

/* Trailhead: "Where are you on the trail?" */
.trailhead { background: var(--navy); color: var(--bone); padding: clamp(90px, 12vw, 160px) var(--pad); }
.th-head { max-width: 860px; margin-bottom: clamp(40px, 6vw, 80px); }
.th-head h2 { font-size: clamp(3rem, 8vw, 7rem); margin: 14px 0 22px; }
.th-head h2 em { color: var(--blaze); font-weight: 600; }
.th-head p { font-size: clamp(1.05rem, 1.7vw, 1.3rem); opacity: .85; max-width: 32em; margin: 0; }
.th-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 100px); align-items: center; }
.signs { position: relative; display: grid; gap: 14px; padding-left: 26px; }
.signs::before { content: ""; position: absolute; left: 0; top: -30px; bottom: -60px; width: 12px; background: #8a6a4a; border-radius: 3px; box-shadow: inset -3px 0 0 rgba(0,0,0,.2); }
.sign { position: relative; text-align: left; font: inherit; color: var(--navy); background: var(--bone); border: 0; cursor: pointer; padding: 16px 64px 16px 22px; display: grid; gap: 2px;
  clip-path: polygon(0 0, calc(100% - 34px) 0, 100% 50%, calc(100% - 34px) 100%, 0 100%); transition: transform .25s, background .25s, color .25s; }
.sign:nth-child(even) { margin-left: 18px; }
.sign .mono { font-size: .66rem; color: var(--blaze); }
.sign b { font-family: var(--display); font-weight: 800; font-variation-settings: "opsz" 144; font-size: clamp(1.4rem, 2.6vw, 2.1rem); letter-spacing: -.02em; line-height: 1.05; }
.sign small { font-size: .9rem; opacity: .7; }
.sign:hover { transform: translateX(8px); }
.sign[aria-selected="true"] { background: var(--blaze); color: #fff; transform: translateX(14px); }
.sign[aria-selected="true"] .mono { color: var(--deep); }
.sign:focus-visible { outline: 3px solid var(--bone); outline-offset: 3px; }
.th-panel { border-left: 6px solid var(--blaze); padding: 8px 0 8px clamp(20px, 3vw, 40px); }
.th-panel + .th-panel { margin-top: 40px; }
.th-panel h3 { font-size: clamp(2.4rem, 5.4vw, 4.6rem); margin: 14px 0 20px; }
.th-panel p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); opacity: .85; max-width: 28em; margin: 0 0 28px; }
.js .th-panel { display: none; }
.js .th-panel.active { display: block; animation: rise .5s cubic-bezier(.2,.7,.2,1); }
.js .th-panel + .th-panel { margin-top: 0; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@media (max-width: 820px) { .th-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .flag, .js .th-panel.active { animation: none; } }

/* Round 3 fixes */
.topo { overflow: clip; }
.signs { padding-right: 24px; }
.hero:not(.page-hero) .big-compass { width: min(64vh, 42vw); top: 42%; }
@media (max-width: 720px) { .hero:not(.page-hero) .big-compass { width: 120vw; top: 34%; } }
.lamp { background: radial-gradient(circle at var(--x) var(--y), rgba(224,88,43,.3), rgba(224,88,43,0) 40%), url(images/topo-light.svg) center / cover no-repeat; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* About: bio beside a photo that stays in view, and "the route so far" */
.about h2 em { color: var(--blaze); font-weight: 600; }
.about .body p { margin: 0 0 1.1em; }
.about .pull { font-style: normal; font-weight: 700; }
@media (min-width: 821px) { .portrait { position: sticky; top: 40px; } }
.route { background: var(--deep); color: var(--bone); padding: clamp(90px, 12vw, 160px) var(--pad); }
.route .th-head h2 { font-size: clamp(2.8rem, 7vw, 6rem); }
.route-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; position: relative; }
.route-list li { position: relative; padding-top: 34px; border-top: 3px dashed rgba(224,88,43,.7); }
.route-list li::before { content: ""; position: absolute; top: -12px; left: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--deep); box-shadow: 0 0 0 3px var(--blaze); }
.route-list li:last-child::before { background: var(--blaze); box-shadow: 0 0 0 3px var(--blaze), 0 0 0 10px rgba(224,88,43,.25); }
.route-list .mono { color: var(--blaze); font-size: .68rem; }
.route-list h3 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 10px 0 12px; line-height: 1; }
.route-list p { margin: 0; opacity: .8; }
@media (max-width: 900px) { .route-list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .route-list { grid-template-columns: 1fr; gap: 44px; } }

/* Facebook follow link */
.fb { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--bone); font-weight: 600; }
.fb svg { width: 30px; height: 30px; color: var(--blaze); transition: transform .2s; }
.fb b { font-family: var(--mono); font-weight: 400; font-size: .8rem; opacity: .65; margin-left: 4px; }
.fb:hover svg { transform: scale(1.12); }
.fb:hover span { color: var(--blaze); }
.fb-go { margin-top: 30px; }
@media (max-width: 600px) { .fb b { display: block; margin: 2px 0 0; } }
.hero-foot p.mission { font-family: var(--display); font-weight: 500; font-variation-settings: "opsz" 72; font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.2; max-width: 22em; opacity: 1; }

/* Daily devotion: the opening question, and the list of past devotions */
.devo .ponder { margin: 0 0 46px; max-width: 30em; }
.devo .ponder .mono { color: var(--blaze); display: block; margin-bottom: 10px; }
.devo .ponder p { margin: 0; font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 72; font-size: clamp(1.45rem, 2.8vw, 2.2rem); line-height: 1.18; color: var(--navy); }
.devo .body > p { margin: 0 0 1.1em; }
.archive { background: var(--paper); color: var(--navy); padding: clamp(70px, 9vw, 120px) var(--pad); border-top: 3px solid var(--navy); }
.archive h2 { font-size: clamp(2.6rem, 6vw, 5rem); margin: 10px 0 36px; }
.archive h2 em { color: var(--blaze); font-weight: 600; }
.archive-list { display: grid; max-width: 1100px; border-top: 1px solid rgba(0,36,62,.25); }
.archive-list a { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(0,36,62,.25); text-decoration: none; transition: padding .2s, color .2s; }
.archive-list a b { font-family: var(--display); font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.6rem); line-height: 1.15; }
.archive-list a .mono { color: var(--muted); }
.archive-list a:hover, .archive-list a[aria-current] { color: var(--blaze); padding-left: 12px; }
.archive-list a[aria-current]::before { content: "You are here"; position: absolute; left: -9999px; }
@media (max-width: 640px) { .archive-list a { grid-template-columns: 1fr; gap: 2px; } }

/* Christian Faith in Life (CFL) — guided reflection tool */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.cfl-hero { min-height: 0; padding-top: clamp(130px, 18vh, 190px); }
.cfl-hero h1 { font-size: clamp(3.2rem, 8.5vw, 8rem); max-width: 12ch; }
.cfl-lede { position: relative; z-index: 2; max-width: 32em; font-size: clamp(1.05rem, 1.7vw, 1.3rem); opacity: .9; margin: 22px 0 0; }
.cfl-start { position: relative; z-index: 2; margin-top: clamp(30px, 5vh, 54px); padding-top: 26px; border-top: 1px solid rgba(243,236,223,.25); max-width: 860px; }
.cfl-start label { font-size: .85rem; }
.cfl-start textarea { font-family: var(--display); font-size: clamp(1.3rem, 2.4vw, 1.8rem); line-height: 1.3; min-height: 150px; }
.cfl-start .row { margin-top: 22px; }
.cfl-start .fine { font-size: .9rem; opacity: .7; margin: 18px 0 0; }
.cfl-start .fine a { color: var(--blaze); font-weight: 700; }
.cfl-hero.started { padding-bottom: 40px; }
.cfl-hero.started .cfl-start, .cfl-hero.started .cfl-lede { display: none; }
.cfl-hero.started h1 { font-size: clamp(2.6rem, 6vw, 5rem); }

.cfl-trail { position: sticky; top: 0; z-index: 20; background: var(--deep); color: var(--bone); display: flex; align-items: center; gap: 16px; padding: 0 var(--pad); border-bottom: 3px solid var(--blaze); }
.cfl-trail ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 1; max-width: 900px; }
.cfl-trail li { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 10px 14px 0; font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; opacity: .45; transition: opacity .3s; }
.cfl-trail li b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; font-size: .7rem; flex: none; }
.cfl-trail li.done { opacity: .85; }
.cfl-trail li.done b { background: var(--bone); color: var(--deep); border-color: var(--bone); }
.cfl-trail li.now { opacity: 1; color: var(--blaze); }
.cfl-trail li.now b { background: var(--blaze); color: #fff; border-color: var(--blaze); box-shadow: 0 0 0 0 rgba(224,88,43,.7); animation: pulse 2.2s infinite; }
.cfl-reset { background: none; border: 0; color: var(--bone); opacity: .7; cursor: pointer; padding: 8px 0; white-space: nowrap; }
.cfl-reset:hover { opacity: 1; color: var(--blaze); }
@media (max-width: 640px) { .cfl-trail li { flex-direction: column; gap: 4px; padding: 10px 2px; font-size: .58rem; letter-spacing: .04em; text-align: center; } .cfl-trail { gap: 8px; } .cfl-reset { font-size: .62rem; } }

.cfl-talk { padding: clamp(40px, 6vw, 80px) var(--pad) 40px; min-height: 60vh; }
.cfl-log { max-width: 780px; margin: 0 auto; display: grid; gap: 34px; }
.msg { position: relative; z-index: 1; scroll-margin-top: 90px; }
.msg .who { display: block; color: var(--blaze); margin-bottom: 8px; }
.msg.person { justify-self: end; max-width: 85%; background: var(--navy); color: var(--bone); padding: 18px 22px; border-left: 6px solid var(--blaze); }
.msg.person .who { color: rgba(243,236,223,.6); }
.msg.person p { margin: 0; }
.msg.guide { font-size: clamp(1.05rem, 1.4vw, 1.15rem); color: var(--ink); }
.msg.guide p { margin: 0 0 .9em; }
.msg.guide ul { margin: 0 0 1em; padding-left: 1.2em; }
.msg.guide li { margin-bottom: .35em; }
.msg.guide b { color: var(--navy); }
.thinking { display: flex; gap: 8px; padding: 8px 0; }
.thinking span { width: 10px; height: 10px; border-radius: 50%; background: var(--blaze); animation: think 1.2s infinite ease-in-out; }
.thinking span:nth-child(2) { animation-delay: .15s; } .thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-6px); } }

.choices { margin: 22px 0 6px; }
.choices > .mono { color: var(--navy); margin-bottom: 10px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.card { text-align: left; font: inherit; font-size: .98rem; line-height: 1.4; color: var(--ink); background: var(--paper); border: 2px solid var(--navy); padding: 16px 18px 18px; cursor: pointer; display: grid; gap: 6px; transition: transform .15s, box-shadow .15s, background .15s; }
.card b { font-family: var(--display); font-size: 1.25rem; line-height: 1.1; color: var(--navy); }
.card span { color: var(--muted); }
.card:not(:disabled):hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--blaze); }
.card:disabled { cursor: default; opacity: .55; }
.options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 20px 0 10px; }
.opt { background: var(--paper); border-top: 6px solid var(--navy); padding: 16px 18px; }
.opt .mono { display: block; color: var(--muted); }
.opt b { display: block; font-family: var(--display); font-size: 1.2rem; line-height: 1.15; margin: 6px 0; }
.opt p { margin: 0 !important; font-size: .98rem; }
.opt-better { border-top-color: #5a7a8c; }
.opt-best { border-top-color: var(--blaze); background: #fff8ef; }
.opt-best .mono { color: var(--blaze); }
.step-block { position: relative; margin-top: 22px; padding: 18px 0 0; border-top: 1px solid rgba(0,36,62,.2); }
.step-block > .mono { color: var(--blaze); display: block; margin-bottom: 8px; }
.step-block .copy { position: absolute; top: 16px; right: 0; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: .68rem; }
.step-block .copy:hover { color: var(--blaze); }
.care { margin: 22px 0; padding: 18px 22px; background: var(--navy); color: var(--bone); border-left: 6px solid var(--blaze); }
.care b { color: var(--bone) !important; font-family: var(--display); font-size: 1.3rem; }
.care p { margin: 8px 0 0 !important; }
.care a { color: var(--blaze); font-weight: 700; }
.msg .go.next { margin-top: 18px; border: 0; cursor: pointer; }
.msg .go.next:disabled { display: none; }

.cfl-reply { position: sticky; bottom: 0; z-index: 10; max-width: 780px; margin: 40px auto 0; display: flex; gap: 12px; align-items: end; background: var(--bone); padding: 14px 0 16px; border-top: 2px solid var(--navy); }
.cfl-reply textarea { color: var(--ink); border-bottom-color: rgba(0,36,62,.35); font-size: 1.1rem; min-height: 52px; max-height: 40vh; }
.cfl-reply .go { border: 0; cursor: pointer; flex: none; }
.cfl-reply .go:disabled { opacity: .5; cursor: wait; }
.cfl-foot { max-width: 780px; margin: 18px auto 0; text-align: right; }
.cfl-foot button { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; }
.cfl-foot button:hover { color: var(--blaze); }
@media print {
  .site-header, .site-footer, .cfl-trail, .cfl-reply, .cfl-foot, .cfl-start, .lamp, .copy, .cards, .go.next { display: none !important; }
  .cfl-hero { min-height: 0; background: none; color: var(--navy); padding: 0 0 20px; }
  .topo::before { display: none; }
  .msg.person { background: none; color: var(--ink); border: 1px solid #999; }
}
/* CFL optional World Faiths step: dashed waypoint, and the common ground / distinctives comparison */
.cfl-trail ol { grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1100px; }
.cfl-trail li.optional b { border-style: dashed; }
.cfl-trail li.optional:not(.now):not(.done) span::after { content: " (optional)"; text-transform: none; letter-spacing: 0; }
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 20px 0 10px; }
.compare > div { background: var(--paper); padding: 16px 18px 6px; border-top: 6px solid #5a7a8c; }
.compare .distinct { border-top-color: var(--blaze); }
.compare .mono { display: block; color: var(--muted); margin-bottom: 6px; }
.compare .distinct .mono { color: var(--blaze); }
.compare ul { margin: 0 0 .6em !important; padding-left: 1.1em; font-size: .98rem; }
@media (max-width: 640px) { .cfl-trail li.optional:not(.now):not(.done) span::after { content: none; } }
.cfl-foot { display: flex; justify-content: flex-end; gap: 26px; }
.cfl-foot .cfl-reset { color: var(--muted); opacity: 1; padding: 0; }

/* Signals of Christmas (unlisted page /signals-of-christmas): the trail-map system in the cover's deep teal and gold */
.soc { --teal: #0d3439; --teal-2: #13474d; --gold: #e9c86e; --cream: #e6d3ad; }
.soc .blaze { color: var(--blaze); }
.bars { display: inline-flex; align-items: flex-end; gap: 3px; height: 18px; flex: none; }
.bars i { display: block; width: 5px; height: calc(20% + var(--i) * 20%); background: currentColor; opacity: .25; }
.bars i.on { opacity: 1; }
.soc-hero { background: radial-gradient(ellipse at 75% 30%, var(--teal-2), var(--teal) 65%); min-height: 0; padding-top: clamp(150px, 20vh, 200px); }
.soc-hero .here { color: var(--gold); }
.soc-hero .here .bars i.on { animation: blip 2.4s infinite; animation-delay: calc(var(--i) * .18s); }
@keyframes blip { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .25; } }
.soc-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.soc-mark { width: clamp(64px, 8vw, 96px); height: auto; margin: 0 0 18px; filter: drop-shadow(0 0 22px rgba(233,200,110,.35)); }
.soc-hero h1 { font-size: clamp(3.4rem, 9.5vw, 9.6rem); max-width: 8ch; color: var(--bone); }
.soc-hero h1 em { color: var(--gold); font-weight: 500; font-size: .6em; display: block; margin: .08em 0 .02em; }
.soc-sub { font-family: var(--display); font-weight: 600; font-variation-settings: "opsz" 72; font-size: clamp(1.4rem, 2.6vw, 2.2rem); line-height: 1.1; color: var(--gold); margin: 22px 0 10px; }
.soc-by { margin: 0; opacity: .8; }
.soc-cover { margin: 0; justify-self: end; width: 100%; max-width: 400px; }
.soc-cover img { width: 100%; height: auto; box-shadow: 18px 18px 0 var(--gold), 0 30px 60px rgba(0,0,0,.45); transform: rotate(2deg); }
.soc-hero .hero-foot { align-items: center; }
.soc-hero .hero-foot p.mission { font-style: italic; }
.soc-hero .ridge { fill: var(--bone); }
.soc-star { width: 34px; height: 34px; margin-left: -17px; bottom: calc(var(--rh) * var(--y) + 4px); animation: twinkle 3s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(233,200,110,.8)); }
@keyframes twinkle { 50% { transform: scale(.82) rotate(22.5deg); } }
@media (max-width: 760px) {
  .soc-grid { grid-template-columns: 1fr; }
  .soc-hero h1 { font-size: 16vw; }
  .soc-cover { justify-self: start; max-width: 58vw; margin-top: 8px; }
  .soc-mark { display: none; }
  .soc-cover img { box-shadow: 12px 12px 0 var(--gold), 0 20px 40px rgba(0,0,0,.45); }
}

.soc-teaser { background: var(--bone); padding: clamp(70px, 10vw, 130px) var(--pad) clamp(10px, 3vw, 30px); }
.soc-teaser h2 em, .soc-head h2 em { color: var(--blaze); font-weight: 600; }
.soc-teaser h2 { color: var(--navy); }
.soc-teaser p { color: var(--ink); opacity: 1; max-width: 34em; }
.soc-head { max-width: 960px; margin-bottom: clamp(36px, 6vw, 70px); }
.soc-head h2 { font-size: clamp(2.8rem, 7vw, 6rem); color: var(--navy); margin-top: 14px; }

/* The five signals: a meter that fills as each one arrives */
.soc-signals { background: var(--bone); padding: clamp(60px, 9vw, 120px) var(--pad); }
.sig-list { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--navy); }
.sig { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(16px, 4vw, 60px); align-items: center; padding: clamp(26px, 4vw, 48px) 0; border-bottom: 2px solid var(--navy); }
.sig-meter { display: grid; gap: 10px; color: var(--teal-2); }
.sig-meter .bars { height: 46px; gap: 5px; }
.sig-meter .bars i { width: 12px; background: var(--navy); opacity: .12; }
.sig-meter .bars i.on { background: var(--blaze); opacity: 1; }
.js .sig .bars i.on { transform: scaleY(0); transform-origin: bottom; transition: transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.3s + var(--i) * .12s); }
.js .sig.in .bars i.on { transform: none; }
.sig-meter .mono { color: var(--blaze); }
.sig h3 { font-size: clamp(2.8rem, 7vw, 6rem); color: var(--navy); letter-spacing: -.035em; }
.sig h3 .g { color: var(--teal-2); font-style: italic; font-weight: 600; }
.sig-line { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 2.3vw, 1.8rem); line-height: 1.15; color: var(--navy); }
.sig-quote { margin: 0 0 12px; color: var(--muted); font-size: clamp(1.02rem, 1.4vw, 1.15rem); }
.sig-ref { color: var(--teal-2); font-size: .68rem; }
.soc-together { max-width: 26em; margin: clamp(40px, 6vw, 70px) 0 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.4rem, 2.8vw, 2.2rem); line-height: 1.2; color: var(--navy); border-left: 6px solid var(--blaze); padding-left: clamp(16px, 3vw, 30px); }
@media (max-width: 860px) {
  .sig { grid-template-columns: 1fr; gap: 10px; }
  .sig-meter { grid-template-columns: auto 1fr; align-items: end; gap: 14px; }
  .sig-meter .bars { height: 34px; }
  .sig-meter .bars i { width: 9px; }
  .sig h3 { font-size: clamp(2.8rem, 14vw, 4.6rem); }
}

/* John 1:14 band: gold on deep teal */
.soc-verse { background: var(--teal); color: var(--gold); padding: clamp(80px, 12vw, 160px) var(--pad); border-top: 6px solid var(--gold); border-bottom: 6px solid var(--gold); }
.soc-verse blockquote { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-variation-settings: "opsz" 144; font-size: clamp(2rem, 5vw, 4.6rem); line-height: 1.06; letter-spacing: -.02em; max-width: 20ch; }
.soc-verse cite { display: block; margin-top: 30px; font-style: normal; color: var(--bone); }

/* The family of resources */
.soc-family { background: var(--paper); padding: clamp(80px, 11vw, 150px) var(--pad); }
.soc-items { list-style: none; margin: 0; padding: 0; }
.soc-item { position: relative; display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: clamp(14px, 3vw, 40px); align-items: start; padding: clamp(26px, 3.5vw, 40px) 0; border-top: 2px solid var(--navy); color: var(--navy); }
.soc-item:last-child { border-bottom: 2px solid var(--navy); }
.soc-item .n { color: var(--blaze); padding-top: .7em; }
.soc-item h3 { font-size: clamp(2rem, 4.4vw, 3.6rem); }
.soc-item .who { color: var(--teal-2); margin: 10px 0 12px; font-size: .7rem; }
.soc-item p { margin: 0; color: var(--muted); max-width: 36em; }
.soc-item p.extra { margin-top: 10px; padding-left: 14px; border-left: 3px solid var(--gold); color: var(--ink); }
.soon { font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; color: var(--teal-2); border: 2px dashed var(--teal-2); padding: 7px 11px; transform: rotate(-2deg); margin-top: .5em; }
@media (max-width: 760px) {
  .soc-item { grid-template-columns: 1fr auto; gap: 10px 12px; align-items: center; }
  .soc-item .n { padding-top: 0; grid-column: 1; grid-row: 1; }
  .soc-item .soon { grid-column: 2; grid-row: 1; margin-top: 0; }
  .soc-item > div:not(.n) { grid-column: 1 / -1; grid-row: 2; }
}
/* The two finished books (real covers + a gold "Coming soon" stamp); .sb-stamp is shared with the /resources cards */
.soc-family .soc-head p { color: var(--ink); max-width: 36em; margin: 18px 0 0; font-size: 1.1rem; }
.soc-books { display: grid; gap: 0; border-top: 2px solid var(--navy); }
.soc-book { display: grid; grid-template-columns: minmax(180px, 320px) minmax(0, 1fr); gap: clamp(24px, 5vw, 70px); align-items: start; padding: clamp(34px, 5vw, 64px) 0; border-bottom: 2px solid var(--navy); color: var(--navy); scroll-margin-top: 20px; }
.sb-cover, .rb-cover { position: relative; margin: 0; display: block; }
.sb-cover img, .rb-cover img { width: 100%; height: auto; box-shadow: 12px 12px 0 var(--gold), 0 24px 44px rgba(0,0,0,.3); }
.sb-cover img { transform: rotate(-1.5deg); }
.sb-stamp { position: absolute; right: -10px; bottom: 14%; font-family: var(--mono); font-weight: 700; font-size: clamp(.68rem, 1.3vw, .85rem); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: var(--teal); background: var(--gold); border: 2px solid var(--teal); outline: 2px dashed var(--gold); outline-offset: 3px; padding: 8px 12px; transform: rotate(-8deg); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.soc-book .n { color: var(--blaze); margin-bottom: 14px; }
.soc-book h3 { font-size: clamp(2.2rem, 5vw, 4rem); }
.sb-sub { margin: 10px 0 0; font-family: var(--display); font-weight: 600; font-style: italic; font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.2; color: var(--teal-2); }
.soc-book .who { color: var(--teal-2); margin: 16px 0 16px; font-size: .7rem; line-height: 1.8; }
.sb-lede { margin: 0 0 12px; color: var(--ink); font-size: 1.1rem; max-width: 34em; }
.sb-inside { margin: 0 0 26px; padding: 0; list-style: none; max-width: 36em; }
.sb-inside li { position: relative; padding: 6px 0 6px 26px; color: var(--muted); border-top: 1px dashed rgba(0,36,62,.2); }
.sb-inside li::before { content: "\2726"; position: absolute; left: 2px; top: 6px; color: var(--blaze); font-size: .9rem; }
.sb-inside a { color: var(--blaze); font-weight: 600; }
.sb-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.soc-wip { color: var(--teal-2); margin: clamp(50px, 7vw, 80px) 0 14px; }
/* Coming 2027: the full book + album (same card as the finished books) */
.soc-later-head { margin: clamp(70px, 9vw, 120px) 0 clamp(30px, 4vw, 46px); }
.sb-album .sb-inside { display: flex; flex-wrap: wrap; gap: 8px; }
.sb-album .sb-inside li { border: 1px solid rgba(0,36,62,.25); padding: 6px 12px 6px 28px; color: var(--navy); font-weight: 600; }
.sb-album .sb-inside li::before { left: 9px; }
@media (max-width: 760px) {
  .soc-book { grid-template-columns: 1fr; gap: 30px; }
  .sb-cover { max-width: 62vw; }
  .sb-stamp { right: -18px; }
  .sb-foot .go { width: 100%; justify-content: center; }
}

/* /resources: the Signals of Christmas group above the supply list (teal + gold, like the Signals page) */
.res-soc { background: radial-gradient(ellipse at 80% 20%, var(--teal-2), var(--teal) 70%); color: var(--bone); padding: clamp(70px, 10vw, 130px) var(--pad); }
.res-soc-head { max-width: 860px; margin-bottom: clamp(36px, 5vw, 60px); }
.res-soc-head .mono { display: flex; align-items: center; gap: 12px; color: var(--gold); }
.res-soc-head .mono img { width: 30px; height: auto; }
.res-soc-head h2 { font-size: clamp(2.8rem, 7vw, 5.6rem); margin: 16px 0 18px; }
.res-soc-head h2 em { color: var(--gold); font-weight: 500; }
.res-soc-head p { margin: 0; font-size: 1.12rem; opacity: .88; max-width: 34em; }
.res-soc-books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.res-book { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr); gap: clamp(20px, 3vw, 34px); align-items: start; border: 2px solid rgba(233,200,110,.55); background: rgba(0,0,0,.18); padding: clamp(20px, 3vw, 32px); }
.res-book .sb-stamp { right: -12px; bottom: 10%; font-size: .62rem; padding: 6px 9px; }
.res-book .n { color: var(--gold); font-size: .68rem; margin-bottom: 10px; }
.res-book h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); }
.res-book h3 a { text-decoration: none; }
.res-book h3 a:hover { color: var(--gold); }
.res-book p { margin: 12px 0 20px; opacity: .88; }
.rb-links { display: flex; flex-wrap: wrap; gap: 10px; }
.rb-links .go { padding: 14px 18px; font-size: .74rem; }
.res-later { grid-column: 1 / -1; grid-template-columns: 96px minmax(0, 1fr); align-items: center; padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px); background: rgba(0,0,0,.1); border-style: dashed; }
.res-later .sb-stamp { right: auto; left: 50%; bottom: 8%; transform: translateX(-50%) rotate(-8deg); font-size: .52rem; padding: 4px 6px; outline-offset: 2px; }
.res-later h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); }
.res-later h3 em { color: var(--gold); font-weight: 500; }
.res-later p { margin: 8px 0 14px; }
.res-album { grid-column: 1 / -1; margin: 0; padding: 14px 0 0; border-top: 1px dashed rgba(233,200,110,.45); opacity: .9; }
.res-album .mono { color: var(--gold); font-size: .68rem; margin-right: 10px; }
.res-album a { color: var(--gold); font-weight: 600; }
@media (max-width: 1100px) { .res-soc-books { grid-template-columns: 1fr; max-width: 760px; } }
@media (max-width: 560px) {
  .res-book { grid-template-columns: 104px minmax(0, 1fr); gap: 18px; }
  .res-book .rb-links { grid-column: 1 / -1; }
  .res-book .rb-body { display: contents; }
  .res-book .rb-cover { grid-row: 1 / span 3; }
  .res-book .rb-body > :not(.rb-links) { grid-column: 2; }
  .res-book p { margin: 8px 0 0; font-size: 1rem; }
  .rb-links .go { flex: 1 1 100%; justify-content: center; }
  .res-later { grid-template-columns: 80px minmax(0, 1fr); align-items: start; }
  .res-later .rb-cover { grid-row: 1 / span 3; }
  .res-album .mono { display: block; margin: 0 0 4px; }
}

.soc-church { margin-top: clamp(40px, 6vw, 70px); max-width: 760px; background: var(--teal); color: var(--bone); padding: clamp(22px, 3vw, 34px); border-left: 6px solid var(--gold); }
.soc-church .mono { color: var(--gold); margin-bottom: 8px; }
.soc-church p { margin: 0; font-size: clamp(1.05rem, 1.6vw, 1.25rem); }

/* Closing quote + notify form */
.soc-closer { background: var(--teal); color: var(--bone); padding: clamp(80px, 11vw, 150px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 120px); align-items: start; }
.soc-closer blockquote { margin: 0 0 clamp(40px, 6vw, 70px); font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.15; color: var(--gold); }
.soc-closer h2 { font-size: clamp(2.8rem, 6vw, 5.4rem); margin: 12px 0 20px; }
.soc-closer h2 em { color: var(--gold); font-weight: 600; }
.soc-closer .intro p { font-size: 1.12rem; opacity: .85; max-width: 26em; margin: 0; }
.soc-closer label { color: var(--gold); }
.soc-closer form.request { padding-top: 8px; }
@media (max-width: 860px) { .soc-closer { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .soc-hero .here .bars i.on, .soc-star { animation: none; } .js .sig .bars i.on { transform: none; transition: none; } }

/* Advent-calendar doors (Signals teaser + Reverse Advent hero): numbered flaps swing open to show a gold star */
.door { position: relative; display: grid; place-items: center; aspect-ratio: 1; background: rgba(0,0,0,.22); color: var(--gold); perspective: 400px; }
.door svg { width: 46%; height: auto; filter: drop-shadow(0 0 6px rgba(233,200,110,.6)); }
.door b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-weight: 400; font-size: clamp(.7rem, 1.2vw, .95rem); color: var(--teal); background: var(--cream); border: 2px solid var(--gold); transform-origin: left center; backface-visibility: hidden; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.door.open b { transform: rotateY(-105deg); }
.door.anim b { animation: dooropen .9s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(.6s + var(--i) * .16s); transform: none; }
@keyframes dooropen { from { transform: none; } to { transform: rotateY(-105deg); } }
.ra-cal { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(6px, .9vw, 12px); width: 100%; max-width: 460px; justify-self: end; padding: clamp(10px, 1.4vw, 18px); border: 2px solid rgba(233,200,110,.5); box-shadow: 14px 14px 0 rgba(233,200,110,.25); transform: rotate(-1.5deg); }
@media (max-width: 760px) { .ra-cal { justify-self: start; max-width: 100%; margin-top: 10px; } }
@media (prefers-reduced-motion: reduce) { .door.anim b { animation: none; transform: rotateY(-105deg); } }

/* Signals page: Reverse Advent teaser */
.ra-teaser { background: var(--teal); color: var(--bone); padding: clamp(70px, 10vw, 130px) var(--pad); display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.ra-teaser .mono { color: var(--gold); }
.ra-teaser h2 { font-size: clamp(2.6rem, 6vw, 5.2rem); margin: 12px 0 20px; }
.ra-teaser h2 em { color: var(--gold); font-weight: 600; }
.ra-teaser p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); opacity: .88; max-width: 30em; margin: 0 0 28px; }
.ra-teaser-doors { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 340px; transform: rotate(-2deg); }
@media (max-width: 760px) { .ra-teaser { grid-template-columns: 1fr; } .ra-teaser-doors { max-width: 260px; } }
.soc-item p.extra a { color: var(--blaze); font-weight: 600; }

/* Reverse Advent page */
.ra-hero h1 { max-width: 9ch; }
.ra-hero h1 em { display: inline; font-size: 1em; font-style: italic; margin: 0; }
.ra-hero .soc-sub { max-width: 20em; }
.ra-what { background: var(--bone); padding: clamp(80px, 11vw, 140px) var(--pad); }
.ra-what h2 em, .ra-how h2 em, .ra-list h2 em { color: var(--blaze); font-weight: 600; }
.ra-two { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.ra-two p { font-size: clamp(1.08rem, 1.6vw, 1.25rem); margin: 0 0 1.1em; max-width: 34em; }
.ra-kinds { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ra-kinds li { font-family: var(--mono); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); border: 2px solid var(--navy); padding: 9px 12px; }
.ra-kinds li:nth-child(3n+1) { transform: rotate(-1.5deg); } .ra-kinds li:nth-child(3n+2) { transform: rotate(1deg); border-color: var(--blaze); color: var(--blaze); }
@media (max-width: 820px) { .ra-two { grid-template-columns: 1fr; } }

.ra-twist { background: var(--teal); color: var(--bone); padding: clamp(80px, 11vw, 150px) var(--pad); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.ra-twist .mono { color: var(--gold); }
.ra-twist h2 { font-size: clamp(2.8rem, 7vw, 6rem); margin: 12px 0 24px; }
.ra-twist h2 em { color: var(--gold); font-weight: 600; }
.ra-twist p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); opacity: .9; max-width: 32em; margin: 0 0 1em; }
.ra-twist blockquote { margin: 0; font-family: var(--display); font-style: italic; font-weight: 500; font-size: clamp(1.6rem, 3.2vw, 2.7rem); line-height: 1.15; color: var(--gold); border-left: 6px solid var(--gold); padding-left: clamp(18px, 3vw, 34px); }
.ra-twist cite { display: block; margin-top: 18px; font-style: normal; color: var(--bone); }
@media (max-width: 860px) { .ra-twist { grid-template-columns: 1fr; } }

.ra-how { background: var(--bone); padding: clamp(80px, 11vw, 150px) var(--pad); }
.ra-steps { list-style: none; margin: 0; padding: 0; position: relative; max-width: 980px; }
.ra-steps::before { content: ""; position: absolute; left: clamp(28px, 4vw, 46px); top: 20px; bottom: 20px; border-left: 3px dashed var(--blaze); opacity: .6; }
.ra-steps li { position: relative; display: grid; grid-template-columns: clamp(58px, 8vw, 94px) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); align-items: start; padding: 0 0 clamp(34px, 5vw, 56px); }
.ra-n { position: relative; z-index: 1; display: grid; place-items: center; aspect-ratio: 1; background: var(--blaze); color: #fff; font-family: var(--display); font-weight: 900; font-size: clamp(1.5rem, 3vw, 2.4rem); box-shadow: 0 0 0 6px var(--bone); }
.ra-steps h3 { font-size: clamp(1.9rem, 4vw, 3.2rem); color: var(--navy); margin: 6px 0 10px; }
.ra-steps p { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 34em; }

.ra-story { background: var(--deep); color: var(--bone); padding: clamp(80px, 11vw, 150px) var(--pad); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 6vw, 90px); align-items: center; }
.ra-66 { font-family: var(--display); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(9rem, 26vw, 24rem); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px var(--gold); }
.ra-story .mono { color: var(--gold); }
.ra-story h2 { font-size: clamp(2.6rem, 6vw, 5rem); margin: 12px 0 22px; }
.ra-story h2 em { color: var(--gold); font-weight: 600; }
.ra-story p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); opacity: .88; max-width: 32em; margin: 0 0 1em; }
@media (max-width: 760px) { .ra-story { grid-template-columns: 1fr; } .ra-66 { font-size: 46vw; } }

.ra-list { background: var(--paper); padding: clamp(80px, 11vw, 140px) var(--pad); }
.ra-soon { max-width: 860px; border: 3px dashed var(--teal-2); padding: clamp(26px, 4vw, 50px); position: relative; }
.ra-soon .soon { display: inline-block; margin: 0 0 18px; }
.ra-soon h2 { font-size: clamp(2.6rem, 6vw, 5rem); color: var(--navy); margin-bottom: 20px; }
.ra-soon p { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink); max-width: 34em; margin: 0 0 28px; }
.ra-soon p a { color: var(--blaze); font-weight: 600; }
.ra-soon .go.line { color: var(--navy); }
.ra-soon .go.line:hover { background: var(--navy); color: var(--bone); box-shadow: inset 0 0 0 2px var(--navy); }

/* Menu with 4 items (Signals of Christmas added 2026-10-23): stack brand over menu up to tablet width, and give phones a bit more room under it */
@media (max-width: 1000px) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
  .nav { justify-content: flex-start; gap: 4px 22px; }
}
@media (max-width: 720px) { .hero, .soc-hero { padding-top: 176px; } .nav { gap: 4px 18px; } }

/* Reverse Advent: the 24-day shopping list (Lance's list, 2026-10-23) */
a.door { text-decoration: none; }
a.door:hover b, a.door:focus-visible b { background: var(--gold); }
a.door:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
a.door:hover svg { transform: scale(1.25); transition: transform .2s; }
.ra-cal-wrap { justify-self: end; width: 100%; max-width: 460px; }
.ra-cap { margin: 22px 0 0; min-height: 1.6em; color: rgba(243,236,223,.6); text-align: center; }
.ra-cap.on { color: var(--gold); }
@media (max-width: 760px) { .ra-cal-wrap { justify-self: start; } .ra-cap { text-align: left; } }
.ra-list { padding: clamp(80px, 11vw, 140px) var(--pad); }
.ra-list-head p { font-size: clamp(1.05rem, 1.6vw, 1.25rem); max-width: 32em; margin: 18px 0 24px; }
.ra-print-btn { color: var(--navy); font: inherit; font-family: var(--mono); font-size: .85rem; font-weight: 700; }
.ra-print-btn::after { content: "⎙"; }
.ra-print-btn:hover { background: var(--navy); color: var(--bone); box-shadow: inset 0 0 0 2px var(--navy); }
.ra-days { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--navy); border-left: 2px solid var(--navy); max-width: 1200px; }
.ra-day { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px 16px; border-right: 2px solid var(--navy); border-bottom: 2px solid var(--navy); background: var(--paper); scroll-margin-top: 120px; transition: background .3s; }
.ra-day .d { font-family: var(--display); font-weight: 900; font-variation-settings: "opsz" 144; font-size: clamp(2.2rem, 3.4vw, 3rem); line-height: .9; letter-spacing: -.04em; color: var(--teal-2); min-width: 1.4em; display: grid; }
.ra-day .d small { font-family: var(--mono); font-weight: 400; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blaze); }
.ra-day .it { font-weight: 600; font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.25; color: var(--navy); }
.ra-day:nth-child(odd) { background: var(--bone); }
.ra-day:target { background: var(--gold); animation: dayglow 1.6s ease-out; }
.ra-day:target .d, .ra-day:target .d small { color: var(--deep); }
@keyframes dayglow { from { box-shadow: inset 0 0 0 4px var(--blaze); } to { box-shadow: inset 0 0 0 0 var(--blaze); } }
.ra-tips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; max-width: 1200px; }
.ra-tips li { position: relative; padding-left: 22px; color: var(--ink); font-size: 1rem; }
.ra-tips li::before { content: ""; position: absolute; left: 0; top: .45em; width: 10px; height: 10px; background: var(--blaze); transform: rotate(45deg); }
.ra-tie { margin-top: clamp(50px, 7vw, 90px); max-width: 860px; border: 3px dashed var(--teal-2); padding: clamp(24px, 4vw, 44px); }
.ra-tie .soon { display: inline-block; margin: 0 0 16px; }
.ra-tie h3 { font-size: clamp(2rem, 4.4vw, 3.4rem); color: var(--navy); margin-bottom: 16px; }
.ra-tie h3 em { color: var(--blaze); font-weight: 600; }
.ra-tie p { font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 34em; margin: 0 0 24px; }
.ra-tie p a { color: var(--blaze); font-weight: 600; }
.ra-tie .go.line { color: var(--navy); }
.ra-tie .go.line:hover { background: var(--navy); color: var(--bone); box-shadow: inset 0 0 0 2px var(--navy); }
.ra-print-head { display: none; }
@media (max-width: 1000px) { .ra-days { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ra-days { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ra-day { grid-template-columns: 1fr; gap: 4px; padding: 14px; } .ra-day .d { font-size: 2.2rem; } }

/* Print: just the list, one page, in the Reverse Advent branding */
@media print {
  @page { size: letter; margin: 12mm; }
  body.ra-page { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ra-page .site-header, .ra-page .site-footer, .ra-page main.ra > section:not(.ra-list), .ra-page .ra-tie, .ra-page .ra-print-btn, .ra-page .ra-list-head .mono { display: none !important; }
  .ra-page .topo::before { display: none; }
  .ra-page .ra-list { padding: 0; background: #fff; overflow: visible; }
  .ra-page .ra-print-head { display: grid; grid-template-columns: 54px 1fr auto; gap: 16px; align-items: center; background: var(--teal); color: var(--bone); padding: 14px 18px; margin-bottom: 16px; border-bottom: 5px solid var(--gold); }
  .ra-page .ra-print-head img { width: 54px; height: auto; }
  .ra-page .ra-print-head b { display: block; font-family: var(--display); font-weight: 800; font-size: 30pt; line-height: 1; letter-spacing: -.02em; color: var(--bone); }
  .ra-page .ra-print-head span { display: block; font-family: var(--mono); font-size: 7.5pt; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }
  .ra-page .ra-print-head em { font-family: var(--mono); font-style: normal; font-size: 8pt; letter-spacing: .1em; color: var(--gold); align-self: end; }
  .ra-page .soc-head { margin: 0 0 10px; }
  .ra-page .ra-list-head h2 { font-size: 22pt; }
  .ra-page .ra-list-head p { font-size: 10pt; margin: 4px 0 0; }
  .ra-page .ra-days { grid-template-columns: repeat(4, 1fr); border-color: var(--teal); }
  .ra-page .ra-day { position: relative; padding: 8px 10px 8px 30px; min-height: 1.05in; grid-template-columns: 1fr; gap: 3px; align-content: start; break-inside: avoid; border-color: var(--teal); background: #fff !important; animation: none; }
  .ra-page .ra-day::before { content: ""; position: absolute; left: 9px; top: 11px; width: 11px; height: 11px; border: 1.5px solid var(--teal); }
  .ra-page .ra-day .d { font-size: 20pt; color: var(--teal); }
  .ra-page .ra-day .d small { font-size: 6pt; }
  .ra-page .ra-day .it { font-size: 10pt; color: #000; }
  .ra-page .ra-tips { margin-top: 12px; gap: 4px 18px; }
  .ra-page .ra-tips li { font-size: 9pt; }
}
.devo .from { margin-top: 40px; font-size: .95rem; color: var(--muted); }
.devo .from a { color: var(--blaze); }
.devo aside a { color: var(--blaze); }
.devo .step p + p { margin-top: .9em; }
@media (max-width: 820px) { .devo aside { grid-template-columns: repeat(2, minmax(0, 1fr)); } }