/* ==========================================================================
   Jack's Adventures - "Sunlit Logbook" design system
   Source of truth: docs/design-brief.md (sections 3-9).
   Contents
     0  Fonts (self-hosted, latin subsets, OFL)
     1  Tokens: light "Sunlit paper", dark "Camp at night", chapter accents
     2  Base, typography, links, focus
     3  Layout helpers
     4  Header, nav, More menu, mobile tab bar
     5  Footer and toggles
     6  Buttons, chips, badges
     7  Paper things: cards, stamps, postmark, day band, torn note, stickers, rotating badge
     8  Polaroids, photo groups, lightbox
     9  Postcards (comments)
    10  Turn-the-page links
    11  Scenes (illustration frames + CSS fallback)
    12+ Pages
    90  Motion and reduced motion
    99  Print
   ========================================================================== */

/* 0 ---------------------------------------------------------------- fonts */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:400 900;font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:normal;font-weight:400 800;font-display:swap;
  src:url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";font-style:italic;font-weight:400 800;font-display:swap;
  src:url("../fonts/nunito-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Caveat";font-style:normal;font-weight:500 700;font-display:swap;
  src:url("../fonts/caveat-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Special Elite";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/special-elite-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* 1 --------------------------------------------------------------- tokens
   Contrast rules (brief section 5):
   1. --ember (#E2572B, 3.5:1 on paper) is for fills, illustration and type >= 24px only.
      Every link, small label and button uses --ember-ink.
   2. Routes over water/sky are drawn in --ember-ink with a --paper halo.
   3. --paper vs --map-paper is 1.17:1: cards always get an ink border or a hard shadow.
   4. Grain lowers contrast: page grain alpha <= .18, and text cards on --map-paper stay grain-free
      (on them use --ink, --ink-soft or --pine for text).
   5. Never pure white or black; #FFF only as a photo mat.
   6. Focus ring: 3px --sea on light, 3px --sun on dark, 2px offset. */
:root{
  color-scheme:light dark;
  --paper:#FFF8E9; --map-paper:#F3E6C8; --ink:#1E2B3A; --ink-soft:#4A5866;
  --sea:#146A85; --pine:#2C6446; --ember:#E2572B; --ember-ink:#B43F17;
  --sky:#9AD3E3; --sand:#EFD09B; --sun:#F5B73B;
  --surface:var(--map-paper); --surface-2:#FBF1DC; --card:#FFFCF4;
  --mat:#FFFFFF; --mat-ink:#1E2B3A;
  --on-ember:#FFF8E9; --focus:#146A85; --shadow-ink:#1E2B3A; --sticker-edge:#FFFFFF;
  --footer-bg:#1E2B3A; --footer-ink:#F6ECD6; --footer-link:#F5B73B;
  --bubble:#DCEFF4; --cork:#E6C99A;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .30  0 0 0 0 .14  0 0 0 .18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display:"Fraunces","Alegreya",Georgia,serif;
  --font-body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-hand:"Caveat","Bradley Hand","Segoe Print",cursive;
  --font-stamp:"Special Elite","Courier New",monospace;

  --step--1:clamp(.85rem,.83rem + .1vw,.92rem);
  --step-0:clamp(1.125rem,1.08rem + .2vw,1.25rem);
  --step-1:clamp(1.35rem,1.25rem + .5vw,1.6rem);
  --step-2:clamp(1.75rem,1.5rem + 1.2vw,2.4rem);
  --step-3:clamp(2.3rem,1.8rem + 2.4vw,3.6rem);
  --step-4:clamp(3rem,2rem + 5vw,6.5rem);

  --line:2.5px;
  --gutter:clamp(16px,4vw,40px);
  --section:clamp(3.5rem,2.4rem + 5vw,7rem);
  --radius:14px; --radius-lg:26px;
  --wobbly:18px 14px 20px 12px / 12px 18px 14px 20px;
  --shadow-soft:0 10px 22px -8px rgb(30 43 58 / .45);
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --tabbar-h:0px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#111C26; --map-paper:#23323A; --ink:#F6ECD6; --ink-soft:#B9C3CC;
    --sea:#6CC3DB; --pine:#8CC79A; --ember:#FF8A5B; --ember-ink:#FF8A5B;
    --sky:#2E5B73; --sand:#4A3F2C; --sun:#F7C45E;
    --surface:#1A2836; --surface-2:#22344A; --card:#1A2836;
    --mat:#F6ECD6; --mat-ink:#1E2B3A;
    --on-ember:#111C26; --focus:#F7C45E; --shadow-ink:#060B10; --sticker-edge:#22344A;
    --footer-bg:#0A121A; --footer-ink:#F6ECD6; --footer-link:#F7C45E;
    --bubble:#1C3A4A; --cork:#3A3122;
    --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .92  0 0 0 0 .84  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}
:root[data-theme="light"]{color-scheme:light}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#111C26; --map-paper:#23323A; --ink:#F6ECD6; --ink-soft:#B9C3CC;
  --sea:#6CC3DB; --pine:#8CC79A; --ember:#FF8A5B; --ember-ink:#FF8A5B;
  --sky:#2E5B73; --sand:#4A3F2C; --sun:#F7C45E;
  --surface:#1A2836; --surface-2:#22344A; --card:#1A2836;
  --mat:#F6ECD6; --mat-ink:#1E2B3A;
  --on-ember:#111C26; --focus:#F7C45E; --shadow-ink:#060B10; --sticker-edge:#22344A;
  --footer-bg:#0A121A; --footer-ink:#F6ECD6; --footer-link:#F7C45E;
  --bubble:#1C3A4A; --cork:#3A3122;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .96  0 0 0 0 .92  0 0 0 0 .84  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Chapter accents reuse the palette (brief section 5): prologue sun, Inside Passage pine,
   Africa ember, Haida Gwaii sea, Around Canada sky with an ember route. */
.j-prologue{--accent:var(--sun);--accent-ink:var(--ember-ink)}
.j-alaska-2007{--accent:var(--pine);--accent-ink:var(--pine)}
.j-africa-2007{--accent:var(--ember);--accent-ink:var(--ember-ink)}
.j-jetski-2008{--accent:var(--sand);--accent-ink:var(--sea)}
.j-haida-gwaii-2010{--accent:var(--sea);--accent-ink:var(--sea)}
.j-canada-2014{--accent:var(--sky);--accent-ink:var(--sea)}
/* --accent-fg: icon/text colour that reads on the --accent fill in both themes */
.j-prologue{--accent-fg:#1E2B3A}
.j-alaska-2007,.j-africa-2007,.j-haida-gwaii-2010{--accent-fg:var(--on-ember)}
.j-jetski-2008,.j-canada-2014{--accent-fg:var(--ink)}

/* 2 ----------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;
  background:var(--grain),var(--paper);background-size:240px 240px,auto;
  color:var(--ink);font-family:var(--font-body);font-size:var(--step-0);line-height:1.65;
  font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:hidden}
main{flex:1 0 auto;overflow-x:clip}
img,svg{max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);margin:0 0 .4em;text-wrap:balance;
  font-optical-sizing:auto;letter-spacing:-.01em}
h1,.display{font-weight:800;line-height:.98;font-size:var(--step-4);font-variation-settings:"SOFT" 100,"WONK" 1}
h2{font-weight:700;line-height:1.05;font-size:var(--step-3);font-variation-settings:"SOFT" 100,"WONK" 1}
h3{font-weight:700;line-height:1.15;font-size:var(--step-2);font-variation-settings:"SOFT" 100,"WONK" 0}
h4{font-weight:700;font-size:var(--step-1);font-variation-settings:"SOFT" 100,"WONK" 0}
p{margin:0 0 1.05em}
a{color:var(--sea);text-decoration-thickness:2px;text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
a:hover{color:var(--ember-ink);text-decoration-color:currentColor}
strong,b{font-weight:800}
em,i{font-style:italic}
::selection{background:var(--sun);color:#1E2B3A}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:6px}
button{font:inherit;color:inherit}
.skip{position:absolute;left:12px;top:-60px;z-index:2000;background:var(--ink);color:var(--paper);padding:.6em 1em;border-radius:10px;font-weight:800}
.skip:focus{top:12px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.icon{width:1.2em;height:1.2em;flex:none;vertical-align:-.2em}
.hand{font-family:var(--font-hand);font-weight:700;font-size:max(1.5rem,22px);line-height:1.1;color:var(--ember-ink)}
.muted{color:var(--ink-soft)}
.eyebrow,.kicker{font-family:var(--font-stamp);font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 .6rem}
.lead{font-size:var(--step-1);line-height:1.5;color:var(--ink);max-width:40ch}

/* 3 --------------------------------------------------------------- layout */
.wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:var(--gutter)}
.wrap-narrow{width:100%;max-width:calc(760px + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section) 0}
.section-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(1.5rem,1rem + 2vw,2.75rem)}
.section-head h2{margin:0}
.section-head p{margin:.4rem 0 0;max-width:46ch;color:var(--ink-soft)}
.section-head .hand{display:block;transform:rotate(-2deg);transform-origin:left;margin-bottom:.1rem}

.prose > p,.prose > ul,.prose > ol{max-width:64ch}
.prose ul,.prose ol{padding-left:1.3em;margin:0 0 1.1em}
.prose li{margin:.2em 0}
.prose a{overflow-wrap:anywhere}
.page-head{position:relative;padding-block:clamp(2.5rem,1.5rem + 4vw,5rem) clamp(1.5rem,1rem + 2vw,2.5rem)}
.page-head h1{margin-bottom:.25em}
.page-head .lead{max-width:48ch}
.page-head .hand{display:inline-block;transform:rotate(-2deg);margin-bottom:.35rem}

/* 4 --------------------------------------------------------------- header */
.site-header{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--line) solid var(--ink)}
.header-inner{display:flex;align-items:center;gap:1rem;min-height:72px}
.brand{display:inline-flex;align-items:center;gap:.65rem;text-decoration:none;color:var(--ink);margin-right:auto;min-height:48px}
.brand:hover{color:var(--ink)}
.brand-badge{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ember);color:#FFF8E9;border:var(--line) solid var(--ink);box-shadow:2px 3px 0 var(--ink);transition:transform .4s var(--ease-out)}
.brand-badge .icon{width:26px;height:26px;stroke-width:2.2}
.brand:hover .brand-badge{transform:rotate(-25deg)}
.brand-name{font-family:var(--font-display);font-weight:800;font-size:1.4rem;line-height:1;letter-spacing:-.01em;font-variation-settings:"SOFT" 100,"WONK" 1}
.site-nav ul{display:flex;gap:.25rem;list-style:none;margin:0;padding:0}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding:.35rem .85rem;border-radius:999px;color:var(--ink);font-weight:800;font-size:1.05rem;text-decoration:none}
.site-nav a:hover{background:var(--map-paper);color:var(--ink)}
.site-nav a[aria-current="page"]{text-decoration:underline wavy var(--ember);text-decoration-thickness:2px;text-underline-offset:7px;text-decoration-skip-ink:none}
.more{position:relative}
.more summary{list-style:none;display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.35rem .9rem;border:var(--line) solid var(--ink);border-radius:999px;font-weight:800;cursor:pointer;background:var(--paper);user-select:none}
.more summary::-webkit-details-marker{display:none}
.more summary:hover,.more[open] summary{background:var(--map-paper)}
.more-panel{position:absolute;right:0;top:calc(100% + 10px);z-index:60;width:min(300px,calc(100vw - 32px));background:var(--surface-2);border:var(--line) solid var(--ink);border-radius:var(--radius);box-shadow:5px 6px 0 var(--shadow-ink);padding:.75rem}
.more-panel ul{list-style:none;margin:0 0 .5rem;padding:0}
.more-panel a{display:flex;align-items:center;min-height:46px;padding:.2rem .7rem;border-radius:10px;color:var(--ink);font-weight:700;text-decoration:none}
.more-panel a:hover{background:var(--map-paper)}
.more-panel a[aria-current="page"]{text-decoration:underline wavy var(--ember);text-underline-offset:6px}
.more-toggles{display:grid;gap:.5rem;border-top:2px dashed color-mix(in srgb,var(--ink) 30%,transparent);padding-top:.75rem}
.more-toggles .toggle{width:100%;justify-content:flex-start}

.tabbar{display:none}
@media (max-width: 820px){
  :root{--tabbar-h:66px}
  .site-nav{display:none}
  .header-inner{min-height:62px}
  .brand-badge{width:40px;height:40px}
  .brand-name{font-size:1.25rem}
  body{padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom))}
  .tabbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:var(--paper);border-top:var(--line) solid var(--ink);padding:4px 2px env(safe-area-inset-bottom);min-height:var(--tabbar-h)}
  .tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:58px;color:var(--ink);text-decoration:none;font-weight:800;font-size:.9375rem;letter-spacing:-.01em;border-radius:12px}
  .tabbar a .icon{width:30px;height:26px;padding:1px 3px;border-radius:999px;stroke-width:2.1}
  .tabbar a[aria-current="page"] .icon{background:var(--sun);color:#1E2B3A;outline:2px solid var(--ink)}
  .tabbar a:active{background:var(--map-paper)}
}
@media (max-width: 420px){ .tabbar a{font-size:.875rem;letter-spacing:-.015em} .tabbar a span{max-width:100%;white-space:nowrap} }

/* 5 --------------------------------------------------------------- footer */
.site-footer{position:relative;overflow-x:clip;margin-top:var(--section);background:var(--footer-bg);color:var(--footer-ink);padding-block:3.25rem 2.5rem}
.site-footer::before{content:"";position:absolute;left:-10px;right:-10px;top:-14px;height:30px;background:var(--footer-bg);filter:url(#torn)}
.footer-inner{position:relative;display:grid;grid-template-columns:1.3fr 1fr auto;gap:2rem 3rem;align-items:start}
.footer-hand{font-family:var(--font-hand);font-weight:700;font-size:clamp(1.9rem,1.5rem + 1.2vw,2.5rem);line-height:1.05;margin:0 0 .8rem;color:var(--footer-ink);transform:rotate(-1.5deg);transform-origin:left}
.footer-credit{color:color-mix(in srgb,var(--footer-ink) 82%,transparent);font-size:1.05rem;max-width:42ch;margin:0}
.site-footer a{color:var(--footer-link)}
.site-footer a:hover{color:#FFF8E9}
.footer-nav ul{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.footer-nav a{display:inline-flex;min-height:40px;align-items:center;font-weight:700;text-decoration:none}
.footer-nav a:hover{text-decoration:underline}
.footer-toggles{display:grid;gap:.6rem}
.site-footer :focus-visible{outline-color:#F7C45E}
.toggle{display:inline-flex;align-items:center;gap:.55rem;min-height:46px;padding:.4rem 1rem .4rem .8rem;border-radius:999px;border:2px solid currentColor;background:transparent;font-weight:800;font-size:1rem;cursor:pointer;color:inherit}
.toggle:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
.toggle[aria-pressed="true"]{background:var(--sun);color:#1E2B3A;border-color:var(--sun)}
.toggle .i-sun{display:none}
.toggle.js-theme-toggle[aria-pressed="true"] .i-sun{display:inline}
.toggle.js-theme-toggle[aria-pressed="true"] .i-moon{display:none}
html:not(.js) .toggle{display:none}
@media (max-width: 820px){ .footer-inner{grid-template-columns:1fr} .footer-toggles{grid-auto-flow:column;justify-content:start} }

/* 6 ------------------------------------------------- buttons, chips, badges */
.btn{--btn-bg:var(--ember-ink);--btn-fg:var(--on-ember);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:52px;padding:.7rem 1.45rem;
  background:var(--btn-bg);color:var(--btn-fg);border:var(--line) solid var(--ink);border-radius:999px;
  font-family:var(--font-body);font-weight:800;font-size:1.08rem;line-height:1.1;text-decoration:none;cursor:pointer;
  box-shadow:0 4px 0 var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{color:var(--btn-fg);transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}
.btn .icon{width:1.25em;height:1.25em}
.btn--sea{--btn-bg:var(--sea);--btn-fg:var(--paper)}
.btn--ghost{--btn-bg:var(--paper);--btn-fg:var(--ink)}
.btn--ghost:hover{--btn-bg:var(--map-paper)}
.btn-row{display:flex;flex-wrap:wrap;gap:.9rem 1rem;align-items:center}
.link-arrow{display:inline-flex;align-items:center;gap:.35rem;font-weight:800;text-decoration:none;min-height:44px}
.link-arrow:hover{text-decoration:underline}
.chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:46px;padding:.35rem 1.05rem;border:2px solid var(--ink);border-radius:999px;background:var(--paper);color:var(--ink);font-weight:800;font-size:1rem;text-decoration:none;cursor:pointer;transition:background .15s,transform .15s}
.chip:hover{background:var(--map-paper);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.chip .dot,.chapter-tag .dot{width:.8em;height:.8em;border-radius:50%;background:var(--accent,var(--ink-soft));border:2px solid var(--ink);flex:none}
.chip .count{font-family:var(--font-stamp);font-weight:400;font-size:.85rem;opacity:.85}
.badge{display:inline-flex;align-items:center;min-height:30px;padding:.1rem .7rem;border-radius:999px;border:2px solid var(--ink);font-family:var(--font-stamp);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.badge--ember{background:var(--ember-ink);color:var(--on-ember)}
.badge--sea{background:var(--sea);color:var(--paper)}
.chapter-tag{display:inline-flex;align-items:center;gap:.5rem;font-weight:800;text-decoration:none;color:var(--ink);min-height:40px}
.chapter-tag:hover{color:var(--ember-ink)}

/* 7 ------------------------------------------------------- paper things */
.card{position:relative;background:var(--surface);border:var(--line) solid var(--ink);border-radius:var(--wobbly);padding:clamp(1.1rem,.9rem + 1vw,1.75rem)}
.card--hard{box-shadow:6px 7px 0 var(--shadow-ink)}

/* rubber stamp: decorative; the same text is always also in the DOM as plain text */
.stamp{display:inline-flex;flex-direction:column;align-items:center;font-family:var(--font-stamp);color:var(--stamp-color,var(--ember-ink));opacity:1;border:3.5px solid currentColor;border-radius:10px;padding:.35em .9em .3em;
  font-size:1.35rem;line-height:1.05;letter-spacing:.13em;text-transform:uppercase;-webkit-text-stroke:.025em currentColor;transform:rotate(var(--sr,-6deg));filter:url(#stamp);white-space:nowrap}
.stamp small{font-size:.66em;letter-spacing:.2em;margin-top:.25em}
/* stamps on a paper patch: holes show the patch, not the art behind it (#stamp-solid, flood colour follows the theme) */
.hero-stamp,.sleeve-num,.chapter-art .stamp,.stamp--solid{filter:url(#stamp-solid)}
.stamp-backing{flood-color:var(--paper)}
.stamp--round{border-radius:50%;aspect-ratio:1;justify-content:center;padding:.6em;border-style:double;border-width:6px}

.postmark{display:block;width:clamp(150px,20vw,210px);height:auto;color:var(--ember-ink);font-family:var(--font-stamp);overflow:visible}
.postmark text{letter-spacing:1.7px;stroke:currentColor;stroke-width:.35px}
.postmark text:first-of-type{font-size:12px;letter-spacing:1.9px}
.postmark text:last-of-type{letter-spacing:2.6px}

/* ticket-stripe day counter */
.dayband{position:relative;display:flex;align-items:center;gap:1rem 1.25rem;flex-wrap:wrap;margin:1.4rem 0 0;padding:1rem 1.25rem;background:var(--sand);color:#1E2B3A;border-radius:6px;
  --stripe:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 10px)}
:root[data-theme="dark"] .dayband{color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .dayband{color:var(--ink)} }
.dayband::before,.dayband::after{content:"";position:absolute;left:0;right:0;height:5px;background:var(--stripe)}
.dayband::before{top:-9px}.dayband::after{bottom:-9px}
.dayband-label{font-family:var(--font-stamp);font-size:1.15rem;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.dayband-label b{font-family:var(--font-display);font-weight:800;font-size:2rem;letter-spacing:0;vertical-align:-.1em;margin:0 .1em;color:var(--ember-ink)}
.ticks{flex:1 1 220px;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:3px;min-width:200px;height:26px}
.ticks i{display:block;border:1.5px solid currentColor;border-radius:2px;opacity:.5}
.ticks i.on{background:currentColor;opacity:1}
.ticks i.on:last-of-type{background:var(--ember-ink);border-color:var(--ember-ink)}

/* torn-edge note (strip under the note is the only thing filtered) */
.note-torn{position:relative;background:var(--map-paper);color:var(--ink);padding:1.3rem 1.5rem 1.4rem;margin-bottom:22px}
.note-torn::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-14px;height:24px;background:var(--map-paper);filter:url(#torn)}
.note-torn p:last-child{margin-bottom:0}

/* die-cut stickers (brief 8.1): four hard outlines + one soft shadow; wobble on the art only */
.sticker{display:inline-grid;place-items:center;color:var(--sticker-color,var(--ember-ink));
  filter:drop-shadow(3px 0 0 var(--sticker-edge)) drop-shadow(-3px 0 0 var(--sticker-edge)) drop-shadow(0 3px 0 var(--sticker-edge)) drop-shadow(0 -3px 0 var(--sticker-edge)) drop-shadow(0 5px 6px rgb(30 43 58 / .3));
  transform:rotate(var(--sr,6deg))}
.sticker svg{filter:url(#wobble);display:block;width:100%;height:auto}
.head-sticker{position:absolute;right:var(--gutter);top:clamp(1.8rem,1rem + 3vw,3.5rem);width:clamp(84px,6rem + 3vw,136px)}
.about-hero > div:first-child{position:relative}
.about-hero .head-sticker{right:-24px;top:-6px;width:clamp(84px,4rem + 3vw,112px)}
@media (min-width: 861px) and (max-width: 1099px){ .about-hero .head-sticker{display:none} }
.hero-sticker{position:absolute;z-index:3;left:-26px;top:-18px;width:clamp(90px,8vw,124px)}
.memory-sticker{position:absolute;z-index:4;right:20px;bottom:18px;width:clamp(80px,8vw,116px)}
@media (max-width: 600px){ .head-sticker{width:76px;top:1.2rem} .page-head:has(> .head-sticker) > .hand{max-width:calc(100% - 84px)} .about-hero .head-sticker{display:none} .hero-sticker{left:-6px;top:-22px;width:84px} .stats li{min-width:92px} .stats b{font-size:2rem} }

/* rotating text badge: one per page, paused offscreen and for reduced motion */
.spin-badge{position:relative;display:grid;place-items:center;width:var(--size,150px);aspect-ratio:1;border-radius:50%;background:var(--sun);color:#1E2B3A;border:var(--line) solid var(--ink);box-shadow:4px 5px 0 var(--shadow-ink)}
.spin-badge svg.ring{position:absolute;inset:6%;width:88%;height:88%;animation:spin 24s linear infinite;overflow:visible}
.spin-badge text{font-family:var(--font-stamp);font-size:11.5px;letter-spacing:1.6px;fill:#1E2B3A;text-transform:uppercase}
.spin-badge .icon{width:34%;height:34%;color:#1E2B3A;transform:rotate(-35deg)}
.spin-badge.is-offscreen svg.ring{animation-play-state:paused}
@keyframes spin{to{transform:rotate(360deg)}}

/* 8 ------------------------------------------------------------ polaroids */
.polaroid{position:relative;isolation:isolate;margin:0;padding:11px 11px 12px;width:min(100%,var(--pw,440px));transform:rotate(var(--r,-2deg));transition:transform .28s var(--ease-out)}
.polaroid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--mat);box-shadow:var(--shadow-soft),0 0 0 1px rgb(30 43 58 / .06);filter:url(#rough)}
.polaroid:not(:has(figcaption)){padding-bottom:36px}
.polaroid .photo-link{display:block;line-height:0;border-radius:1px;outline-offset:3px}
.polaroid img{display:block;width:100%;height:auto;filter:sepia(.18) saturate(1.08) contrast(.98);transition:filter .7s ease}
.polaroid figcaption{font-family:var(--font-hand);font-weight:700;font-size:max(1.45rem,22px);line-height:1.08;text-align:center;color:var(--mat-ink);padding:.55rem .3rem .15rem;text-wrap:balance}
.tape{position:absolute;z-index:2;top:-13px;left:50%;width:88px;height:26px;background:rgb(245 183 59 / .62);transform:translateX(-50%) rotate(3deg);filter:url(#rough);pointer-events:none}
.polaroid:nth-child(3n+2) .tape{left:18%;transform:translateX(-50%) rotate(-24deg);top:-8px;background:rgb(154 211 227 / .7)}
.polaroid:nth-child(4n+3) .tape{left:82%;transform:translateX(-50%) rotate(28deg);top:-8px;background:rgb(239 208 155 / .78)}
/* develop: archival prints rest slightly faded and come to full colour when they come into view */
html.js:not([data-motion="reduce"]) .polaroid:not(.developed) img{filter:sepia(.35) saturate(.7) contrast(.93) brightness(1.04)}
@media (hover: hover){
  .polaroid:hover,.polaroid:focus-within{transform:rotate(0deg) translateY(-6px) scale(1.03);z-index:5}
  .polaroid:hover img{filter:sepia(.1) saturate(1.1) contrast(1)}
}

.photos{margin:2rem 0 2.2rem}
.photos-single .polaroid{--pw:520px}
.photos-single.side-left .polaroid{margin-inline:0 auto}
.photos-single.side-right .polaroid{margin-inline:auto 0}
.photos-single .polaroid.portrait{--pw:340px}
.photos-scatter{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:clamp(1.2rem,.8rem + 2vw,2.2rem) clamp(1rem,.6rem + 2vw,2rem);align-items:start}
.photos-scatter .polaroid{width:100%}
.photos-scatter .polaroid:nth-child(even){margin-top:1.2rem}
.photos.is-compact .polaroid{--pw:320px}
.photos.is-compact.photos-scatter{grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr))}
.more-photos-label{margin:2rem 0 -.5rem}
@media (min-width: 900px){
  .post-body .photos-single.side-left{margin-left:-3.5rem}
  .post-body .photos-single.side-right{margin-right:-3.5rem}
  .post-body .photos-scatter{width:min(1100px,calc(100vw - 2 * var(--gutter)));margin-left:calc(50% - min(550px,50vw - var(--gutter)))}
}

/* lightbox (markup injected by site.js) */
.lightbox{position:fixed;inset:0;z-index:1000;display:none;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:64px 20px 56px;background:rgb(10 17 24 / .95);color:#F6ECD6}
.lightbox.open{display:grid}
body.lb-open{overflow:hidden}
.lb-figure{grid-column:2;margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;height:100%}
.lb-figure img{display:block;max-width:min(100%,1600px);max-height:calc(100vh - 190px);max-height:calc(100dvh - 190px);width:auto;height:auto;object-fit:contain;background:#F6ECD6;padding:10px;border-radius:2px;box-shadow:0 24px 60px -20px #000}
.lb-caption{margin-top:1rem;text-align:center;font-size:1.1rem;max-width:60ch}
.lb-caption .lb-title{display:block;font-family:var(--font-hand);font-weight:700;font-size:1.9rem;line-height:1.1}
.lb-caption .lb-date{font-family:var(--font-stamp);font-size:.95rem;letter-spacing:.06em;opacity:.85}
.lb-caption a{color:#F7C45E;font-weight:800}
.lb-close,.lb-prev,.lb-next{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;border:2.5px solid #F6ECD6;background:#1E2B3A;color:#F6ECD6;font-size:2rem;line-height:1;cursor:pointer;box-shadow:0 4px 0 #F6ECD6}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:#F7C45E;color:#1E2B3A}
.lb-close{position:absolute;top:12px;right:14px}
.lb-prev{grid-column:1}.lb-next{grid-column:3}
.lb-counter{position:absolute;left:18px;top:22px;font-family:var(--font-stamp);letter-spacing:.08em}
.lightbox :focus-visible{outline:3px solid #F7C45E;outline-offset:3px}
@media (max-width: 700px){
  .lightbox{grid-template-columns:minmax(0,1fr);padding:64px 10px 92px}
  .lb-figure{grid-column:1}
  .lb-prev,.lb-next{position:absolute;bottom:18px}
  .lb-prev{left:18px}.lb-next{right:18px}
  .lb-figure img{max-height:calc(100dvh - 260px)}
}

/* 9 ------------------------------------------------------------ postcards */
.notes{margin-top:3.5rem}
.notes-title{display:flex;align-items:center;gap:.6rem;font-size:var(--step-2);margin-bottom:1.5rem}
.notes-title .icon{width:1em;height:1em;color:var(--ember-ink)}
.postcards{list-style:none;margin:0;padding:0;display:grid;gap:1.6rem}
.postcards > li,.guestbook > li{container-type:inline-size}
.postcard{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:0 1.25rem;background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:5px;padding:1.25rem 1.25rem 1.2rem 1.4rem;
  box-shadow:5px 6px 0 color-mix(in srgb,var(--shadow-ink) 22%,transparent);transform:rotate(var(--r,0deg))}
.pc-msg{padding-right:1.25rem;border-right:2px dashed color-mix(in srgb,var(--ink) 35%,transparent);overflow-wrap:anywhere;font-size:var(--step-0);line-height:1.6}
.pc-msg p{margin:0 0 .6em}
.pc-side{display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;text-align:right}
.pc-stamp{display:inline-block;padding:5px;transform:rotate(4deg);
  background:radial-gradient(circle at center,transparent 2.6px,var(--sand) 3px) -5px -5px/10px 10px}
.pc-stamp-in{display:grid;place-items:center;min-width:92px;min-height:84px;padding:.4rem;background:var(--sea);color:var(--paper);font-family:var(--font-stamp);font-size:.95rem;line-height:1.15;letter-spacing:.05em;text-align:center;border:2px solid var(--paper)}
.pc-from{font-family:var(--font-hand);font-weight:700;font-size:max(1.5rem,22px);line-height:1;margin:0;color:var(--ember-ink);overflow-wrap:anywhere}
.pc-re{margin:0;font-size:1rem;line-height:1.35;color:var(--ink-soft)}
.pc-re a{font-weight:700}
@container (max-width: 520px){
  .postcard{grid-template-columns:minmax(0,1fr)}
  .pc-msg{border-right:0;padding-right:0;padding-bottom:.8rem;border-bottom:2px dashed color-mix(in srgb,var(--ink) 35%,transparent)}
  .pc-side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;padding-top:.8rem;text-align:left}
  .pc-stamp{order:2}
  .pc-stamp-in{min-width:80px;min-height:60px;font-size:.9rem}
  .pc-re{flex-basis:100%;order:3}
}

/* 10 ---------------------------------------------------------- turn the page */
.turn{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:3.5rem}
.turn a{position:relative;display:flex;flex-direction:column;gap:.15rem;min-height:132px;padding:1.1rem 1.3rem 2.2rem;background:var(--surface-2);color:var(--ink);border:var(--line) solid var(--ink);border-radius:6px;text-decoration:none;transition:transform .2s var(--ease-out),box-shadow .2s;box-shadow:4px 5px 0 var(--shadow-ink)}
.turn a::after{content:"";position:absolute;bottom:-2.5px;width:34px;height:34px;background:linear-gradient(135deg,var(--map-paper) 50%,var(--paper) 50%);border-top:var(--line) solid var(--ink)}
.turn-prev::after{left:-2.5px;transform:scaleX(-1) rotate(0deg);border-left:var(--line) solid var(--ink)}
.turn-next::after{right:-2.5px;border-left:var(--line) solid var(--ink)}
.turn .turn-next{text-align:right;align-items:flex-end;grid-column:2}
.turn a:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:6px 8px 0 var(--shadow-ink);color:var(--ink)}
.turn-dir{display:inline-flex;align-items:center;gap:.3rem;font-weight:800;color:var(--ember-ink);font-size:1rem}
.turn-day{font-family:var(--font-stamp);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.turn strong{font-family:var(--font-display);font-weight:700;font-size:var(--step-1);line-height:1.15;font-variation-settings:"SOFT" 100}
@media (max-width: 600px){ .turn{grid-template-columns:1fr} .turn .turn-next{grid-column:1} }

/* 11 ---------------------------------------------------------------- scenes */
.scene{position:relative;overflow:hidden;background:var(--sky);isolation:isolate}
.scene > svg.illu{position:absolute;inset:0;width:100%;height:100%;display:block}
.scene .illu-dark{display:none}
:root[data-theme="dark"] .scene.has-dark .illu:not(.illu-dark){display:none}
:root[data-theme="dark"] .scene.has-dark .illu-dark{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .scene.has-dark .illu:not(.illu-dark){display:none}
  :root:not([data-theme="light"]) .scene.has-dark .illu-dark{display:block}
}
/* CSS-only fallback: flat layered sky + silhouettes; farther layers lighter (Alto's rule) */
.scene-fb{position:absolute;inset:0;--sky-top:var(--sun);--sky-mid:var(--sand);--sky-low:var(--paper);--far:color-mix(in srgb,var(--pine) 30%,var(--paper));--mid:color-mix(in srgb,var(--pine) 62%,var(--paper));--near:var(--pine);--water:var(--sea)}
.scene-fb i{position:absolute;display:block}
.fb-sky{inset:0;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--sky-low) 100%)}
.fb-sun{width:24%;aspect-ratio:1;border-radius:50%;left:60%;top:24%;background:var(--sun);box-shadow:0 0 0 18px color-mix(in srgb,var(--sun) 28%,transparent),0 0 0 40px color-mix(in srgb,var(--sun) 14%,transparent)}
.fb-far{left:-4%;right:-4%;bottom:26%;height:42%;background:var(--far);filter:drop-shadow(0 -2px 0 color-mix(in srgb,var(--ink) 35%,transparent));
  clip-path:polygon(0 100%,0 58%,7% 44%,15% 56%,26% 16%,35% 44%,44% 30%,55% 60%,66% 20%,77% 48%,88% 32%,100% 54%,100% 100%)}
.fb-mid{left:-2%;right:-2%;bottom:22%;height:30%;background:var(--mid);
  clip-path:polygon(0 100%,0 70%,4% 40%,8% 70%,12% 30%,16% 70%,21% 50%,26% 72%,40% 66%,52% 74%,60% 44%,64% 72%,68% 26%,72% 70%,77% 48%,81% 74%,100% 70%,100% 100%)}
.fb-near{left:-2%;right:-2%;bottom:18%;height:26%;background:var(--near);
  clip-path:polygon(0 100%,0 40%,3% 60%,6% 10%,9% 60%,12% 34%,15% 64%,19% 70%,70% 78%,76% 64%,80% 20%,84% 62%,87% 36%,91% 66%,95% 16%,98% 60%,100% 50%,100% 100%)}
.fb-water{left:0;right:0;bottom:0;height:19%;background:repeating-linear-gradient(180deg,transparent 0 12px,color-mix(in srgb,var(--paper) 30%,transparent) 12px 14px),var(--water);border-top:var(--line) solid var(--ink)}
.fb-vehicle{left:14%;top:20%;width:16%;aspect-ratio:1;color:var(--ink);transform:rotate(-28deg)}
.fb-vehicle .icon{width:100%;height:100%;stroke-width:1.4}
.scene-fb--africa-2007{--sky-top:var(--sun);--sky-mid:var(--sand);--sky-low:var(--sand);--far:color-mix(in srgb,var(--ember) 35%,var(--sand));--mid:color-mix(in srgb,var(--ember) 55%,var(--sand));--near:color-mix(in srgb,var(--pine) 55%,var(--sand));--water:color-mix(in srgb,var(--ember) 30%,var(--sand))}
.scene-fb--africa-2007 .fb-far{clip-path:polygon(0 100%,0 64%,18% 62%,22% 30%,54% 28%,58% 60%,100% 62%,100% 100%)}
.scene-fb--africa-2007 .fb-water{background:var(--water)}
.scene-fb--alaska-2007{--sky-top:var(--sky);--sky-mid:color-mix(in srgb,var(--sky) 45%,var(--paper));--sky-low:var(--paper)}
.scene-fb--haida-gwaii-2010{--sky-top:color-mix(in srgb,var(--sea) 45%,var(--sky));--sky-mid:var(--sky);--sky-low:var(--paper);--far:color-mix(in srgb,var(--sea) 30%,var(--paper));--mid:color-mix(in srgb,var(--pine) 50%,var(--sea))}
.scene-fb--jetski-2008{--sky-top:var(--sky);--sky-mid:var(--sand);--sky-low:var(--paper)}
.scene-fb--jetski-2008 .fb-far{bottom:24%;height:20%}
.scene-fb--canada-2014{--sky-top:var(--ember);--sky-mid:var(--sun);--sky-low:var(--sky);--far:var(--paper);--mid:color-mix(in srgb,var(--sky) 55%,var(--paper));--near:color-mix(in srgb,var(--sea) 70%,var(--ink));--water:var(--sky)}
.scene-fb--canada-2014 .fb-far{filter:drop-shadow(0 -2.5px 0 var(--ink))}
.scene-fb--prologue{--sky-top:var(--sun);--sky-mid:var(--sand);--sky-low:var(--sand)}

/* ====================================================================== 12 home */
.hero{padding-block:clamp(2rem,1rem + 4vw,4.5rem) 0}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
.hero-copy .hand{display:inline-block;font-size:clamp(1.7rem,1.3rem + 1.4vw,2.4rem);transform:rotate(-3deg);margin:0 0 .2rem .2rem}
.hero-title{margin:0 0 .35em;font-size:clamp(3.2rem,2rem + 5.4vw,7rem);line-height:.9}
.hero-title .wm{display:block}
.hero-title .wm-2{color:var(--ember);padding-left:.55em}
.hero-title svg.illu{display:none;width:calc(100% + 12px);height:auto;margin:.1em 0 0 -8px}
@media (min-width: 700px){ .hero-title.has-svg .wm-text{display:none} .hero-title.has-svg svg.illu{display:block} }
/* desktop: a bigger, bolder lockup. The SVG box is 820 units wide with the compass starting at x=16 and ~10% air on the right,
   so the box may run past the copy column; the left margin pulls the compass flush with the lead text. */
@media (min-width: 1024px){
  .hero-grid{grid-template-columns:minmax(0,1.22fr) minmax(0,1fr)}
  .hero-title.has-svg svg.illu{--wm:min(58.6vw,760px);width:var(--wm);max-width:none;margin:0 calc(var(--wm) * -.1) -.05em calc(var(--wm) * -16 / 820)}
}
.hero-title .wm-2{text-shadow:3px 3px 0 color-mix(in srgb,var(--ink) 85%,transparent)}
.hero-lead{font-size:var(--step-1);line-height:1.5;max-width:30ch;margin-bottom:1.1rem}
.hero-quote{position:relative;max-width:44ch;margin:0 0 1.8rem;padding-left:1.1rem;border-left:4px solid var(--sun);color:var(--ink-soft);font-style:italic}
.hero-quote cite{display:block;font-style:normal;font-family:var(--font-hand);font-weight:700;font-size:1.5rem;color:var(--ember-ink);margin-top:.2rem}
.hero-art{position:relative;margin:0}
.hero-arch{aspect-ratio:1/1.02;border-radius:999px 999px 26px 26px;border:var(--line) solid var(--ink);box-shadow:8px 10px 0 var(--shadow-ink)}
.hero-art .spin-badge{position:absolute;left:-44px;bottom:48px;--size:150px;z-index:3}
.hero-art .hero-stamp{position:absolute;right:-12px;top:22%;z-index:3;--sr:9deg;background:var(--paper);font-size:1.15rem}
@media (max-width: 860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-art{max-width:560px;margin-inline:auto;width:100%}
  .hero-art .spin-badge{left:-8px;bottom:-26px;--size:118px}
  .hero-art .hero-stamp{right:-4px}
}

.home-map-wrap .section-head{margin-bottom:1.25rem}
.home-map{position:relative}
.home-map:empty,.home-map #home-map-mount:empty{min-height:0}

.sleeves{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(2rem,1.2rem + 2.5vw,3.2rem) clamp(1.5rem,1rem + 2vw,2.8rem);list-style:none;margin:0;padding:0}
.sleeve{position:relative;display:flex;flex-direction:column;height:100%;color:var(--ink);text-decoration:none}
.sleeve:hover{color:var(--ink)}
.sleeve-art{position:relative;isolation:isolate;margin-right:14%}
.sleeve-cover{position:relative;z-index:1;aspect-ratio:1;border:var(--line) solid var(--ink);border-radius:6px;overflow:hidden;box-shadow:6px 7px 0 var(--shadow-ink);background:var(--accent,var(--sky))}
.sleeve-cover .scene{position:absolute;inset:0}
.sleeve-record{position:absolute;z-index:0;top:4%;right:-16%;width:92%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--paper) 0 3%,var(--accent,var(--sun)) 3.5% 17%,#1E2B3A 17.5% 18.5%,transparent 19%),
    repeating-radial-gradient(circle,#1b2530 0 2px,#2a3642 2px 3.2px);
  border:var(--line) solid var(--ink);transition:transform .6s var(--ease-out)}
.sleeve:hover .sleeve-record,.sleeve:focus-visible .sleeve-record{transform:translateX(12%) rotate(40deg)}
.sleeve-num{position:absolute;z-index:2;left:-10px;top:-14px;--sr:-8deg;background:var(--paper);font-size:1rem}
.sleeve-label{padding:1.2rem .2rem 0}
.sleeve-title{font-size:var(--step-2);margin:0 0 .3rem;line-height:1.05}
.sleeve-title a{color:inherit;text-decoration:none}
.sleeve-title a:hover{text-decoration:underline wavy var(--ember);text-underline-offset:6px;text-decoration-thickness:2px}
.sleeve:hover .sleeve-title{text-decoration:underline wavy var(--ember);text-underline-offset:6px;text-decoration-thickness:2px}
.sleeve-sub{margin:0 0 .75rem;color:var(--ink-soft);font-size:1.05rem;line-height:1.45}
.sleeves--index .sleeve-sub{font-size:var(--step-0);line-height:1.55}
.sleeve-meta{display:flex;flex-wrap:wrap;gap:.35rem .5rem;list-style:none;margin:auto 0 0;padding:0}
.sleeve-meta li{display:inline-flex;align-items:baseline;gap:.3rem;padding:.1rem .65rem;border:2px solid var(--ink);border-radius:999px;font-size:.95rem;font-weight:700;background:var(--paper)}
.sleeve-meta b{font-family:var(--font-display);font-weight:800;font-size:1.1rem}
.sleeve--prologue .sleeve-cover{background:var(--sun);display:grid;place-items:center;padding:12%}
.sleeve--prologue .sleeve-cover::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent 0 14px,color-mix(in srgb,var(--paper) 22%,transparent) 14px 16px)}
.sleeve--prologue .polaroid{--pw:100%;--r:-4deg;padding-bottom:28px}
.sleeve--prologue .sleeve-sub{font-style:italic}

/* memory table */
.memory{position:relative;border:var(--line) solid var(--ink);border-radius:var(--radius-lg);background:var(--map-paper);padding:clamp(1.5rem,1rem + 3vw,3.5rem) clamp(1rem,.5rem + 3vw,3.5rem) clamp(2.5rem,2rem + 3vw,4.5rem);overflow:hidden}
.memory::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-radial-gradient(circle at 12% 88%,transparent 0 38px,color-mix(in srgb,var(--pine) 22%,transparent) 38px 39.5px),
             repeating-radial-gradient(circle at 92% 8%,transparent 0 30px,color-mix(in srgb,var(--sea) 18%,transparent) 30px 31.5px)}
.memory-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:minmax(40px,auto);gap:0}
.memory-grid .polaroid{width:100%;align-self:start}
.memory-grid .m1{grid-column:1/5;grid-row:1/6}
.memory-grid .m2{grid-column:4/8;grid-row:2/7;margin-top:2.5rem}
.memory-grid .m3{grid-column:8/12;grid-row:1/5}
.memory-grid .m4{grid-column:1/5;grid-row:6/11;margin-top:1rem}
.memory-grid .m5{grid-column:5/9;grid-row:7/12;margin-top:1.5rem}
.memory-grid .m6{grid-column:9/13;grid-row:5/10;margin-top:2rem}
.memory-grid .m7{grid-column:9/12;grid-row:10/14;margin-top:1rem}
.memory-note{grid-column:1/5;grid-row:11/14;align-self:end;margin:2rem 0 0 1rem;max-width:30ch;transform:rotate(-2deg);z-index:2}
.memory-note blockquote{margin:0;font-family:var(--font-hand);font-weight:700;font-size:1.75rem;line-height:1.1;color:var(--ink)}
.memory-note p{margin:.5rem 0 0;font-size:1rem;color:var(--ink-soft)}
@media (max-width: 860px){
  .memory-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.4rem 1rem}
  .memory-grid > *{grid-column:auto!important;grid-row:auto!important;margin:0!important}
  .memory-grid .polaroid:nth-child(even){margin-top:1.4rem!important}
  .memory-grid .polaroid figcaption{font-size:22px}
  .memory-note{grid-column:1/-1!important;margin-top:1rem!important}
}

/* replay teaser: boarding pass on a ticket-stripe band */
.replay-band{position:relative;padding-block:clamp(2.5rem,2rem + 3vw,4.5rem);margin-top:var(--section);background:var(--sky);border-block:var(--line) solid var(--ink)}
.replay-band::before,.replay-band::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 10px)}
.replay-band::before{top:8px}.replay-band::after{bottom:8px}
.ticket{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 300px;background:var(--paper);border:var(--line) solid var(--ink);border-radius:18px;box-shadow:8px 10px 0 var(--shadow-ink)}
.ticket::before,.ticket::after{content:"";position:absolute;right:300px;width:34px;height:34px;margin-right:-17px;border-radius:50%;background:var(--sky);border:var(--line) solid var(--ink)}
.ticket::before{top:-17px;clip-path:inset(50% 0 0 0)}
.ticket::after{bottom:-17px;clip-path:inset(0 0 50% 0)}
.ticket-main{padding:clamp(1.4rem,1rem + 2vw,2.6rem)}
.ticket-main h2{margin:.1rem 0 .6rem}
.ticket-main > p{max-width:48ch}
.ticket-stub{padding:clamp(1.4rem,1rem + 2vw,2.2rem);border-left:3px dashed var(--ink);display:flex;flex-direction:column;gap:.9rem;justify-content:center}
.ticket-stub dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;align-items:baseline}
.ticket-stub dt{font-family:var(--font-stamp);font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.ticket-stub dd{margin:0;font-weight:800;font-size:1.05rem;line-height:1.3}
.replay-stops{display:flex;flex-wrap:wrap;gap:.3rem 0;list-style:none;margin:1.2rem 0 1.6rem;padding:0;font-size:1rem}
.replay-stops li{display:inline-flex;align-items:center;font-weight:700}
.replay-stops li:not(:last-child)::after{content:"";width:28px;height:3px;margin:0 .4rem;background:radial-gradient(circle,var(--ember-ink) 1.5px,transparent 2px) 0 50%/7px 3px repeat-x}
.replay-stops b{font-family:var(--font-stamp);font-weight:400;font-size:.8rem;color:var(--ember-ink);margin-right:.3rem;letter-spacing:.04em}
.replay-plane{position:absolute;right:320px;top:-38px;width:120px;height:80px;color:var(--ink);transform:rotate(8deg);z-index:2}
.replay-plane svg{width:100%;height:100%}
.btn .play{display:grid;place-items:center;width:1.9em;height:1.9em;margin-left:-.6rem;border-radius:50%;background:var(--paper);color:var(--ember-ink);border:2px solid var(--ink)}
.btn .play .icon{width:1em;height:1em;margin-left:.12em}
@media (max-width: 860px){
  .ticket{grid-template-columns:1fr}
  .ticket::before,.ticket::after{display:none}
  .ticket-stub{border-left:0;border-top:3px dashed var(--ink)}
  .replay-plane{right:12px;top:-44px;width:92px}
}

.family-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:1.8rem;list-style:none;margin:0;padding:0;align-items:start}
.family-cards > li{container-type:inline-size}
.family-more{margin-top:2rem}

/* ============================================================ 13 journeys index */
.passport{position:relative;margin-top:var(--section);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:2rem;align-items:center;padding:clamp(1.5rem,1rem + 2.5vw,3rem);background:var(--surface);border:var(--line) solid var(--ink);border-radius:var(--wobbly)}
.passport h2{font-size:var(--step-2)}
.passport p{color:var(--ink-soft);margin:0}
.passport .hand{display:block;transform:rotate(-2deg);margin-bottom:.3rem}
.stamps{display:flex;flex-wrap:wrap;gap:1.4rem 1.6rem;align-items:center;justify-content:center;list-style:none;margin:0;padding:0}
.stamps a{display:block;text-decoration:none;padding:.4rem}
.stamps .stamp{--stamp-color:var(--accent-ink,var(--ember-ink))}
.stamps li:nth-child(1) .stamp{--sr:-7deg}
.stamps li:nth-child(2) .stamp{--sr:5deg}
.stamps li:nth-child(3) .stamp{--sr:-3deg}
.stamps li:nth-child(4) .stamp{--sr:8deg}
.stamps li:nth-child(5) .stamp{--sr:-5deg}
.stamps li:nth-child(6) .stamp{--sr:4deg}
.stamps a:hover .stamp{filter:none}
@media (max-width: 760px){ .passport{grid-template-columns:1fr} }

/* ================================================================= 14 chapter */
.chapter-hero{padding-block:clamp(2rem,1rem + 3vw,4rem) 0}
.chapter-hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(2rem,1rem + 3vw,4rem);align-items:center}
.chapter-hero h1{font-size:clamp(2.8rem,1.8rem + 4.4vw,5.6rem)}
.chapter-hero .subtitle{font-family:var(--font-display);font-size:var(--step-1);font-weight:600;line-height:1.3;color:var(--accent-ink,var(--ink));margin-bottom:1.2rem;font-variation-settings:"SOFT" 100}
.chapter-hero .intro{font-size:var(--step-0);max-width:56ch}
.chapter-art{position:relative}
.chapter-arch{aspect-ratio:5/4;border-radius:220px 220px 22px 22px;border:var(--line) solid var(--ink);box-shadow:8px 10px 0 var(--shadow-ink);background:var(--accent)}
.chapter-art .stamp{position:absolute;right:-8px;bottom:-22px;background:var(--paper);--sr:-8deg;font-size:1.5rem;z-index:2}
.chapter-art .vehicle-sticker{position:absolute;left:-26px;top:-18px;width:120px;height:120px;z-index:2;--sr:-10deg}
.vehicle-sticker > *{width:100%;height:100%}
.vehicle-sticker .icon{stroke-width:1.6;padding:12px;background:var(--paper);border-radius:50%;color:var(--ink)}
.stats-band{position:relative;margin-top:clamp(2.5rem,2rem + 2vw,4rem);background:var(--sand);color:#1E2B3A;border-block:var(--line) solid var(--ink)}
:root[data-theme="dark"] .stats-band{color:var(--ink)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .stats-band{color:var(--ink)} }
.stats-band::before,.stats-band::after{content:"";position:absolute;left:0;right:0;height:6px;background:repeating-linear-gradient(90deg,currentColor 0 6px,transparent 6px 10px)}
.stats-band::before{top:6px}.stats-band::after{bottom:6px}
.stats{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem 2rem;list-style:none;margin:0;padding:1.6rem 0}
.stats li{display:flex;flex-direction:column;align-items:flex-start;min-width:110px}
.stats b{font-family:var(--font-display);font-weight:800;font-size:var(--step-3);line-height:1;font-variation-settings:"SOFT" 100,"WONK" 1}
.stats span{font-family:var(--font-stamp);font-size:.95rem;letter-spacing:.08em;text-transform:uppercase}
.chapter-actions{margin-top:2rem}
.stops-box{margin-top:var(--section)}
.stops-list{list-style:none;margin:0;padding:0;columns:3 250px;column-gap:2.2rem}
.stops-list li{break-inside:avoid;display:grid;grid-template-columns:3.6rem 1fr;gap:.6rem;align-items:baseline;padding:.45rem 0;border-bottom:2px dotted color-mix(in srgb,var(--ink) 25%,transparent)}
.stops-list .sd{font-family:var(--font-stamp);font-size:.85rem;letter-spacing:.04em;color:var(--ember-ink);text-transform:uppercase}
.stops-list .sn{font-weight:700;line-height:1.3}
.stops-list .sn small{display:block;font-weight:400;font-size:.95rem;color:var(--ink-soft)}
.stops-list a{color:inherit;text-decoration-color:color-mix(in srgb,var(--sea) 60%,transparent)}
.stops-list .kind-overnight .sn::before{content:"";display:inline-block;width:.6em;height:.6em;margin-right:.45rem;border-radius:50%;background:var(--accent,var(--sea));border:2px solid var(--ink);vertical-align:.05em}
.stops-key{margin:.4rem 0 1.4rem;color:var(--ink-soft);font-size:1rem}
.stops-details summary{display:inline-flex;align-items:center;gap:.5rem;min-height:46px;padding:.3rem 1rem;margin:.4rem 0 .2rem;border:2px dashed var(--ink);border-radius:999px;font-weight:800;cursor:pointer;list-style:none}
.stops-details summary::-webkit-details-marker{display:none}
.stops-details summary::before{content:"+";font-family:var(--font-stamp);font-size:1.3rem;line-height:1}
.stops-details[open] summary::before{content:"\2212"}
.stops-details[open] .when-closed,.stops-details:not([open]) .when-open{display:none}
@media (min-width: 821px){ .stops-details summary{display:none} }
.stops-key i{display:inline-block;width:.7em;height:.7em;border-radius:50%;background:var(--accent,var(--sea));border:2px solid var(--ink);margin:0 .3rem 0 0;vertical-align:-.02em}
.part{margin-top:var(--section)}
.part-head{display:flex;align-items:center;gap:1rem;margin-bottom:2rem}
.part-head h2{margin:0;font-size:var(--step-2)}
.part-head::after{content:"";flex:1;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 10px);opacity:.8}
.part-head .part-num{font-family:var(--font-stamp);font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ember-ink)}
.entries{display:grid;gap:clamp(2.5rem,2rem + 2vw,4rem)}
.entry{position:relative;display:grid;grid-template-columns:200px minmax(0,1fr);gap:1.5rem clamp(1.5rem,1rem + 2vw,3rem);padding:clamp(1.4rem,1rem + 2vw,2.6rem);background:var(--surface-2);border:var(--line) solid var(--ink);border-radius:8px;box-shadow:6px 7px 0 color-mix(in srgb,var(--shadow-ink) 85%,transparent)}
.entry::before{content:"";position:absolute;top:0;bottom:0;left:calc(200px + clamp(1.4rem,1rem + 2vw,2.6rem) + clamp(.75rem,.5rem + 1vw,1.5rem));width:2px;background:color-mix(in srgb,var(--ember) 45%,transparent)}
.entry-margin{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.entry-margin .postmark{width:180px}
.entry-margin .day-chip{font-family:var(--font-stamp);font-size:1rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .7rem;background:var(--ink);color:var(--paper);border-radius:4px;transform:rotate(-3deg)}
.entry-main{min-width:0}
.entry-title{font-size:var(--step-2);margin:0 0 .3rem}
.entry-title a{color:var(--ink);text-decoration:none}
.entry-title a:hover{text-decoration:underline wavy var(--ember);text-underline-offset:6px;text-decoration-thickness:2px}
.entry-meta{color:var(--ink-soft);font-size:1rem;margin-bottom:1.2rem;display:flex;flex-wrap:wrap;gap:.2rem .8rem;align-items:center}
.entry-meta .byline{margin:0}
.entry-body{font-size:var(--step-0)}
.entry .notes{margin-top:2rem}
.entry .notes-title{font-size:var(--step-1)}
.entry-foot{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.8rem 1.4rem}
@media (max-width: 860px){
  .chapter-hero-grid{grid-template-columns:1fr}
  .chapter-art{max-width:560px}
  .entry{grid-template-columns:1fr;gap:.75rem}
  .entry::before{display:none}
  .entry-margin{flex-direction:row;align-items:center;justify-content:space-between}
  .entry-margin .postmark{width:160px}
}
.vehicle-note{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:center;margin-top:var(--section)}
.vehicle-note .vehicle-sticker{position:static;width:140px;height:140px}

/* =================================================================== 15 post */
.post-head{padding-top:clamp(1.8rem,1rem + 3vw,3.5rem);margin-bottom:2.2rem}
.post-kicker{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:0 0 1.2rem}
.post-title-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.4rem 2rem;align-items:center}
.post-postmark .postmark{width:clamp(170px,19vw,220px)}
.post-title{font-size:clamp(2.4rem,1.6rem + 3.6vw,4.6rem);margin:0 0 .35rem}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.4rem;margin:1.2rem 0 0;color:var(--ink-soft);font-weight:700}
.post-meta .icon{color:var(--ember-ink)}
.post-meta .nw{display:inline-flex;align-items:center;gap:.45rem}
.byline{margin:.2rem 0 0;display:inline-flex;align-items:center;gap:.5rem}
.byline--louise .hand{font-size:1.9rem;transform:rotate(-2deg);display:inline-block}
.byline--jack .plate{display:inline-block;padding:.35rem .8rem .3rem;background:var(--ink);color:var(--paper);border-radius:4px;font-family:var(--font-stamp);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:inset 0 0 0 3px var(--ink),inset 0 0 0 4.5px color-mix(in srgb,var(--paper) 45%,transparent)}
.byline--jack .clip{width:30px;height:30px;color:var(--ink-soft);transform:rotate(-30deg)}
.post-body{font-size:var(--step-0)}
.post-body .photos{clear:both}
.post-body.has-dropcap > p:first-child::first-letter{font-family:var(--font-display);font-weight:800;float:left;font-size:3.6em;line-height:.8;padding:.08em .1em 0 0;color:var(--ember-ink);font-variation-settings:"SOFT" 100,"WONK" 1}
.post-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.5rem}
.post-source{margin-top:2rem;font-size:1rem}
.post-source a{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink-soft)}
.post-source a:hover{color:var(--ember-ink)}
@media (max-width: 600px){
  .post-title-row{grid-template-columns:1fr}
  .post-postmark{order:-1;margin-bottom:-.6rem}
  .post-postmark .postmark{width:180px}
}

/* ================================================================ 16 gallery */
.filterbar{position:sticky;top:74px;z-index:20;padding:.8rem 0;margin-bottom:1rem;background:var(--paper);border-bottom:2px dashed color-mix(in srgb,var(--ink) 25%,transparent)}
@media (max-width: 820px){ .filterbar{top:64px} .filterbar .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .filterbar .chip{flex:none} }
.gallery-section{padding-top:clamp(2rem,1.5rem + 2vw,3.5rem)}
.gallery-section[hidden]{display:none}
.gallery-section-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;margin-bottom:1.8rem}
.gallery-section-head h2{font-size:var(--step-2);margin:0}
.gallery-section-head .count{font-family:var(--font-stamp);color:var(--ink-soft);letter-spacing:.06em;text-transform:uppercase;font-size:.95rem}
.wall{columns:4 250px;column-gap:clamp(1.2rem,.8rem + 1.5vw,2.2rem)}
.wall .polaroid{display:inline-block;width:100%;margin:0 0 clamp(1.4rem,1rem + 1.5vw,2.4rem);break-inside:avoid;--pw:100%}
.wall .polaroid figcaption{font-size:max(1.3rem,22px)}
/* a wall with only a few prints (the prologue) lays them side by side instead of stacking them in column one */
.wall--few{columns:auto;display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 clamp(1.2rem,.8rem + 1.5vw,2.2rem)}
.wall--few .polaroid{flex:0 1 290px}
@media (max-width: 600px){ .wall{columns:2;column-gap:14px} .wall--few{gap:0 14px} .wall--few .polaroid{flex-basis:calc(50% - 7px)} .wall .polaroid{padding:7px 7px 8px;margin-bottom:1.2rem} .wall .polaroid figcaption{font-size:22px;padding-top:.35rem} .wall .tape{width:60px;height:20px;top:-10px} }

/* ================================================================== 17 about */
.about-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center;padding-top:clamp(2rem,1rem + 3vw,4rem)}
.about-portraits{position:relative;min-height:420px}
.about-portraits .polaroid{position:relative}
.about-portraits .p-jack{--pw:340px;--r:-3deg;z-index:2}
.about-portraits .p-zodiac{--pw:320px;--r:4deg;margin:-70px 0 0 auto;z-index:1}
.zodiac-note{margin-top:2rem;max-width:52ch}
.zodiac-note .hand{display:block;margin-bottom:.4rem}
.facts{display:flex;flex-wrap:wrap;justify-content:center;gap:1.8rem 1.4rem;list-style:none;margin:0;padding:0}
.fact{display:flex;flex-direction:column;align-items:center;justify-content:center;width:158px;aspect-ratio:1;border-radius:50%;background:var(--fact-bg,var(--sun));color:#1E2B3A;text-align:center;padding:1rem;border:var(--line) solid #1E2B3A}
.fact b{font-family:var(--font-display);font-weight:800;font-size:2.1rem;line-height:1;font-variation-settings:"SOFT" 100,"WONK" 1}
.fact--word b{font-size:1.55rem}
.fact span{font-weight:800;font-size:1rem;line-height:1.2;margin-top:.25rem}
.fact .icon{width:30px;height:30px;margin-bottom:.2rem}
.facts li:nth-child(6n+1){--fact-bg:var(--sun);--sr:-6deg}
.facts li:nth-child(6n+2){--fact-bg:#9AD3E3;--sr:5deg}
.facts li:nth-child(6n+3){--fact-bg:#EFD09B;--sr:-3deg}
.facts li:nth-child(6n+4){--fact-bg:#F5B73B;--sr:7deg}
.facts li:nth-child(6n+5){--fact-bg:#9AD3E3;--sr:-8deg}
.facts li:nth-child(6n+6){--fact-bg:#EFD09B;--sr:4deg}
.facts .sticker{--sticker-color:#1E2B3A}
.interview{margin-top:var(--section)}
.interview-talk{display:flex;flex-direction:column;gap:1.4rem;margin-top:2rem}
.qa-intro{font-size:var(--step-1);line-height:1.5;max-width:52ch}
.qa-intro em{font-style:normal}
.qa-who{margin:0 0 .15rem;font-family:var(--font-stamp);font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.qa-q{margin-top:1.6rem;max-width:40ch}
.hand-q{font-family:var(--font-hand);font-weight:700;font-size:clamp(1.9rem,1.5rem + 1.3vw,2.6rem);line-height:1.08;color:var(--ember-ink);margin:0;transform:rotate(-1.2deg);transform-origin:left}
.qa-a{align-self:flex-end;width:min(100%,640px)}
.qa-a .qa-who{text-align:right}
.bubble{position:relative;background:var(--bubble);border:var(--line) solid var(--ink);border-radius:26px 26px 6px 26px;padding:1.2rem 1.5rem .3rem;box-shadow:4px 5px 0 color-mix(in srgb,var(--shadow-ink) 70%,transparent)}
.bubble::after{content:"";position:absolute;right:-2.5px;bottom:-16px;width:26px;height:16px;background:var(--bubble);border-right:var(--line) solid var(--ink);clip-path:polygon(0 0,100% 0,100% 100%);box-shadow:inset -1px 0 0 var(--ink)}
.bubble::before{content:"";position:absolute;right:-2.5px;bottom:-18.5px;width:30px;height:19px;background:var(--ink);clip-path:polygon(0 0,100% 0,100% 100%)}
.bubble p{margin-bottom:.9em}
.qa-photo .photos{margin:.6rem 0}
.qa-photo:nth-of-type(even) .photos-single .polaroid{margin-inline:auto 0}
.qa-outro{font-style:italic;color:var(--ink-soft);max-width:60ch;margin-top:1rem}
.qa-sign{font-family:var(--font-hand);font-weight:700;font-size:1.7rem;color:var(--ember-ink)}
.qa-sign a{color:inherit}
@media (max-width: 860px){
  .about-hero{grid-template-columns:1fr}
  .about-portraits{min-height:0;max-width:440px}
  .about-portraits .p-jack{--pw:78%}
  .about-portraits .p-zodiac{--pw:70%;margin-top:-50px}
}

/* ============================================================== 18 guestbook */
.corkboard{position:relative;padding:clamp(1.5rem,1rem + 3vw,3.5rem) clamp(1rem,.5rem + 2.5vw,3rem);border:var(--line) solid var(--ink);border-radius:var(--radius-lg);background:
  radial-gradient(circle at 20% 30%,color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.6px) 0 0/13px 13px,
  radial-gradient(circle at 70% 60%,color-mix(in srgb,var(--paper) 30%,transparent) 1px,transparent 1.8px) 0 0/17px 17px,
  var(--cork);box-shadow:inset 0 0 0 10px color-mix(in srgb,var(--ink) 10%,transparent)}
.guestbook{list-style:none;margin:0;padding:0;columns:3 330px;column-gap:clamp(1.2rem,1rem + 1.5vw,2.4rem)}
.guestbook > li{break-inside:avoid;margin:0 0 clamp(1.6rem,1.2rem + 1.5vw,2.6rem);position:relative;padding-top:10px}
.guestbook > li[hidden]{display:none}
.guestbook > li::before{content:"";position:absolute;z-index:3;top:0;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF8E9 0 3px,transparent 3.5px),var(--pin,#B43F17);border:2px solid #1E2B3A;box-shadow:2px 3px 0 rgb(30 43 58 / .35)}
.guestbook > li:nth-child(3n+2)::before{--pin:#146A85}
.guestbook > li:nth-child(3n)::before{--pin:#2C6446}
.guestbook .postcard{box-shadow:4px 6px 0 rgb(30 43 58 / .25)}
.gb-count{font-family:var(--font-stamp);color:var(--ink-soft);letter-spacing:.05em;margin:.8rem 0 0}

/* ================================================================ 19 archive */
.search{display:flex;align-items:center;gap:.6rem;max-width:620px;padding:.35rem .5rem .35rem 1rem;border:var(--line) solid var(--ink);border-radius:999px;background:var(--card);box-shadow:4px 5px 0 var(--shadow-ink)}
.search .icon{color:var(--ink-soft)}
.search input{flex:1;min-width:0;min-height:48px;border:0;background:transparent;color:var(--ink);font:inherit;font-weight:700}
.search input:focus{outline:none}
.search:focus-within{outline:3px solid var(--focus);outline-offset:3px}
.search input::placeholder{color:var(--ink-soft);font-weight:400}
.archive-tools{display:flex;flex-wrap:wrap;gap:1rem 1.5rem;align-items:center;margin-bottom:1rem}
.archive-tools .search{flex:1 1 380px}
.archive-tools[hidden]{display:none}
.archive-status{font-family:var(--font-stamp);color:var(--ink-soft);letter-spacing:.04em;min-height:1.6em;margin:0 0 1rem}
.archive-year{padding-top:2.2rem}
.archive-year[hidden]{display:none}
.archive-year > h2{display:flex;align-items:center;gap:1rem;font-size:var(--step-3);margin:0 0 .6rem}
.archive-year > h2::after{content:"";flex:1;height:6px;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 10px);opacity:.6}
.archive-list{list-style:none;margin:0;padding:0}
.archive-list > li{border-bottom:2px dotted color-mix(in srgb,var(--ink) 25%,transparent)}
.archive-list > li[hidden]{display:none}
.arow{display:grid;grid-template-columns:76px 7.2rem minmax(0,1fr) auto;gap:.4rem 1.2rem;align-items:center;padding:.7rem .4rem;color:var(--ink);text-decoration:none;border-radius:10px}
.arow:hover{background:var(--map-paper);color:var(--ink)}
.arow .thumb{width:76px;height:57px;border-radius:4px;object-fit:cover;border:2px solid var(--ink);background:var(--map-paper)}
.arow .thumb--none{display:grid;place-items:center;color:var(--ink-soft)}
.arow time{font-family:var(--font-stamp);font-size:.95rem;letter-spacing:.04em;color:var(--ink-soft)}
.arow .t{font-weight:800;line-height:1.3}
.arow .t small{display:flex;align-items:center;gap:.4rem;font-weight:600;font-size:.95rem;color:var(--ink-soft);margin-top:.1rem}
.arow .t small .dot{width:.7em;height:.7em;border-radius:50%;background:var(--accent);border:1.5px solid var(--ink)}
.arow .c{display:flex;gap:.8rem;font-size:.95rem;color:var(--ink-soft);white-space:nowrap}
.arow .c span{display:inline-flex;align-items:center;gap:.25rem}
.arow .c .icon{width:1.05em;height:1.05em}
@media (max-width: 640px){
  .arow{grid-template-columns:64px minmax(0,1fr);gap:.2rem .9rem}
  .arow .thumb{width:64px;height:48px;grid-row:1/4}
  .arow time{grid-column:2}
  .arow .c{grid-column:2}
}

/* =============================================================== 20 timeline */
.ribbon{position:relative;margin:2rem 0 1rem;padding:5.5rem 0 3.2rem}
.ribbon-line{position:absolute;left:0;right:0;top:calc(5.5rem + 14px);height:12px;border:var(--line) solid var(--ink);border-radius:999px;background:repeating-linear-gradient(90deg,var(--sand) 0 12px,var(--sun) 12px 24px)}
.ribbon-years{position:relative;display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;height:40px}
.ribbon-years li{position:relative;flex:1;font-family:var(--font-stamp);font-size:.8rem;color:var(--ink-soft)}
.ribbon-years li span{position:absolute;top:48px;left:0;transform:translateX(-50%)}
.ribbon-years li:not(.major) span{display:none}
.ribbon-beads{position:absolute;left:0;right:0;top:0;height:100%;list-style:none;margin:0;padding:0}
.ribbon-beads li{position:absolute;top:calc(5.5rem + 20px);left:var(--x);transform:translate(-50%,-50%)}
.ribbon-beads a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--accent,var(--sun));border:var(--line) solid var(--ink);color:var(--ink);box-shadow:2px 3px 0 var(--shadow-ink)}
.ribbon-beads a .icon{width:24px;height:24px;color:var(--accent-fg,#1E2B3A)}
.ribbon-beads .lbl{position:absolute;bottom:56px;left:50%;transform:translateX(-50%) rotate(-4deg);white-space:nowrap;font-family:var(--font-hand);font-weight:700;font-size:1.4rem;color:var(--ink)}
.ribbon-beads li:nth-child(even) .lbl{bottom:auto;top:56px;transform:translateX(-50%) rotate(3deg)}
.ribbon-beads li:nth-child(3) .lbl{bottom:84px}
.ribbon-beads li:nth-child(4) .lbl{top:84px}
.ribbon-beads li:last-child .lbl{top:auto;bottom:56px;transform:translateX(-78%) rotate(-3deg)}
.tl-list{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.5rem;position:relative}
.tl-list::before{content:"";position:absolute;left:34px;top:0;bottom:0;width:4px;background:repeating-linear-gradient(180deg,var(--ink) 0 8px,transparent 8px 14px)}
.tl-item{position:relative;display:grid;grid-template-columns:72px minmax(0,1fr);gap:.4rem 1.2rem;align-items:start}
.tl-item[data-gap]::before{content:attr(data-gap);grid-column:1/-1;margin:0 0 .2rem calc(72px + 1.2rem);font-family:var(--font-hand);font-weight:700;font-size:1.6rem;line-height:1.1;color:var(--ember-ink);transform:rotate(-1.5deg);transform-origin:left}
/* year disc: paper centre + chapter ring, so the ink year reads on every accent in both themes */
.tl-year{position:relative;z-index:1;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--paper);border:var(--line) solid var(--ink);box-shadow:inset 0 0 0 7px var(--accent,var(--sun)),2px 3px 0 var(--shadow-ink);font-family:var(--font-display);font-weight:800;font-size:1.2rem;color:var(--ink)}
.tl-bead,.tl-sub{display:none}
.tl-card{padding:1.2rem 1.4rem;background:var(--surface-2);border:var(--line) solid var(--ink);border-radius:var(--wobbly)}
.tl-card h2{font-size:var(--step-2);margin:0 0 .2rem}
.tl-card h2 a{color:var(--ink);text-decoration:none}
.tl-card h2 a:hover{text-decoration:underline wavy var(--ember);text-underline-offset:6px}
.tl-card .when{font-family:var(--font-stamp);font-size:.95rem;color:var(--ink-soft);letter-spacing:.05em;text-transform:uppercase;margin:0 0 .6rem}
.tl-card p{margin:0 0 .6rem}
.tl-card .tl-meta{font-size:1rem;color:var(--ink-soft);margin:0}
@media (max-width: 1100px){ .ribbon-beads a{width:36px;height:36px} .ribbon-beads a .icon{width:20px;height:20px} .ribbon-beads .lbl{font-size:1.3rem} }
/* phones and small tablets: the ribbon becomes a dotted route running down the page; years are rubber stamps on it,
   each trip a small card with its chapter colour on a bead and along the card's inner edge */
@media (max-width: 820px){
  .ribbon{display:none}
  .tl-list{margin-top:1rem;gap:1rem}
  .tl-list::before{left:24px;top:14px;bottom:30px;width:4px;background:radial-gradient(circle,var(--ember-ink) 1.7px,transparent 2.3px) 50% 0/4px 12px repeat-y}
  .tl-item{grid-template-columns:52px minmax(0,1fr);gap:.55rem .55rem;align-items:center}
  .tl-item[data-gap]::before{margin:.1rem 0 .2rem 52px;font-size:1.45rem}
  .tl-year{grid-column:1/-1;justify-self:start;width:auto;height:auto;padding:.32em .65em .26em;border:3px solid currentColor;border-radius:8px;box-shadow:none;background:var(--paper);color:var(--ember-ink);
    font-family:var(--font-stamp);font-weight:400;font-size:1.3rem;line-height:1;letter-spacing:.14em;-webkit-text-stroke:.02em currentColor;transform:rotate(-4deg);filter:url(#stamp-solid)}
  .tl-item:nth-child(3n+2) .tl-year{transform:rotate(3deg)}
  .tl-item--same .tl-year{display:none}
  .tl-bead{display:grid;place-items:center;justify-self:center;position:relative;z-index:1;width:42px;height:42px;border-radius:50%;background:var(--accent,var(--sun));color:var(--accent-fg,#1E2B3A);border:var(--line) solid var(--ink);box-shadow:2px 3px 0 var(--shadow-ink)}
  .tl-bead .icon{width:22px;height:22px}
  .tl-card{padding:.8rem 1rem .85rem 1.35rem;border-radius:14px;box-shadow:inset 8px 0 0 var(--accent,var(--sun)),3px 4px 0 color-mix(in srgb,var(--shadow-ink) 80%,transparent)}
  .tl-card .when{font-size:.85rem;margin:0 0 .3rem;letter-spacing:.06em}
  .tl-card h2{font-size:var(--step-1);line-height:1.15;margin:0 0 .25rem}
  .tl-sub{display:block;font-size:var(--step-0);line-height:1.4}
  .tl-card .tl-sub{margin:0 0 .35rem}
  .tl-text{display:none}
  .tl-card .tl-meta{font-size:.95rem}
}

/* =================================================================== 21 404 */
.nf{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,1rem + 4vw,5rem);align-items:center;padding-top:clamp(2.5rem,1.5rem + 5vw,6rem)}
.nf-art{position:relative;justify-self:center;width:min(100%,330px)}
.nf-compass{width:100%}
.nf-compass svg{animation:nf-spin 1.9s cubic-bezier(.2,.8,.2,1) .25s both}
.nf-compass--fb{aspect-ratio:1;border-radius:50%;background:var(--sand);color:var(--ink)}
.nf-compass--fb .icon{width:70%;height:70%;filter:none}
.nf-stamp{position:absolute;right:-8%;bottom:2%;z-index:2;--sr:-11deg;font-size:1.05rem;background:var(--paper)}
.nf-copy h1{margin-bottom:.15em}
.nf-hand{display:inline-block;font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem);text-wrap:balance;transform:rotate(-2deg);transform-origin:left;margin:0 0 1rem}
.nf .lead{max-width:38ch;margin-bottom:1.6rem}
@keyframes nf-spin{0%{rotate:-330deg}72%{rotate:14deg}88%{rotate:-5deg}100%{rotate:0deg}}
@media (max-width: 760px){ .nf{grid-template-columns:1fr;gap:1.5rem} .nf-art{width:min(58vw,220px)} .nf-stamp{font-size:.9rem} }

/* ================================================================ 90 motion */
html.js .will-reveal{opacity:0;transform:translateY(16px)}
html.js .will-reveal.in-view{opacity:1;transform:none;transition:opacity .5s var(--ease-out),transform .5s var(--ease-out);transition-delay:var(--delay,0ms)}
html.js .polaroid.will-reveal{transform:translateY(16px) rotate(var(--r,-2deg))}
html.js .polaroid.will-reveal.in-view{transform:rotate(var(--r,-2deg))}
html.js:not([data-motion="reduce"]) .thump:not(.thumped){opacity:0}
.thump.thumped{animation:thump .42s var(--ease-out) both}
@keyframes thump{0%{scale:1.6;opacity:0}60%{scale:.95;opacity:1}100%{scale:1;opacity:1}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .spin-badge svg.ring,.nf-compass svg{animation:none}
  html.js .will-reveal{opacity:1;transform:none}
  html.js .thump{opacity:1}
  html.js .polaroid.will-reveal{transform:rotate(var(--r,-2deg))}
  @view-transition{navigation:none}
}
html[data-motion="reduce"] *,html[data-motion="reduce"] *::before,html[data-motion="reduce"] *::after{animation:none!important;transition:none!important}
html[data-motion="reduce"] .will-reveal{opacity:1!important;transform:none!important}
html[data-motion="reduce"] .polaroid.will-reveal{transform:rotate(var(--r,-2deg))!important}

/* =================================================================== 99 print */
@media print{
  :root{--paper:#fff;--ink:#000}
  body{background:#fff;color:#000;padding:0;font-size:12pt}
  .site-header,.tabbar,.site-footer,.lightbox,.filterbar,.archive-tools,.post-actions,.turn,.spin-badge,.svg-defs,.skip,.replay-band,.home-map-wrap{display:none!important}
  .polaroid,.postcard,.stamp,.sticker{transform:none!important;box-shadow:none!important}
  .polaroid::before{filter:none;box-shadow:none;border:1px solid #999}
  .polaroid img{filter:none!important}
  .will-reveal{opacity:1!important;transform:none!important}
  .entry,.card,.postcard{break-inside:avoid;box-shadow:none}
  a{color:#000}
  .post-body a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}