/* Taylor L. Rabe. Fonts "Signpost" and the wolf track logo were chosen on 18
October 2026. Colours "Flare", 19 October 2026, replacing "Prismatic".
Colour idea. Lala chose one photo to build the site around: Taylor in the
forest under a cobalt sky, with the sun flaring rose and gold across the
lens (assets/img/taylor-portrait-trees-*). Measured from it: sky blue at hue
217, plum shadows at 344 (not brown), rose flare at 341 to 352, a peach-gold
flare and a hazy white. Taylor asked (voice note, 19 October 2026) to keep the
site's colours but make them brighter, even neon: brighter oranges, yellows,
greens and blues, and no browns, mustard yellows or burnt orange. So the
photo's hues are pushed to full colour, her yellow stays, turquoise and green
stay but brighter, and the brick and burnt-orange shades are gone.
Feel (Lala, 19 October 2026): soulful, human, imperfect. Never corporate.
So: torn paper edges between bands, a light grain over everything, footage
and photos as taped prints, her own words in handwriting on a sticky note,
hand-drawn underlines, sketchy buttons.
Every colour lives in :root. Tone classes only point at these tokens.
Contrast (WCAG), all checked: on deep, snow 14.7, mist 9.9, sun 10.0, reef 7.1,
leaf 8.7, ember 5.8, flare 5.4; on ocean, snow 7.1, sun 4.8, mist 4.7; on
jungle, snow 9.6, fern 7.3, leaf 5.7; ink on sun 11.1, ink-soft on sun 6.1,
ink on reef 7.9, on ember 6.4, on flare 6.0, on leaf 9.7; on plum, snow 13.3,
sun 9.1, rose-mist 9.3, flare 4.9; on snow, ink 16.3, ink-soft 8.9,
ocean-deep 7.7, jungle-mid 5.1, flare-deep 5.5, plum-deep 9.1.
Brighter still after Taylor's feedback (19 October 2026, "neon bright"): reef,
leaf, flare and ember pushed up; ink on them 9.3, 11.2, 5.7 and 6.1. Leaf is
now a band tone too. Taylor found navy with yellow "ugly" and dark green "too
dark", so bands use cobalt, turquoise, neon green, rose, tangerine, plum and
snow; navy stays for the header and footer, yellow for accents.
On reef, ember, flare, leaf and sun all text is ink: softer shades fail there.
Paper notes are snow or sun with ink text. */
:root {
/* from the photo, pushed to full colour */
--deep: #13204A; /* dusk blue: the darkest of the sky */
--ocean: #1F4DB3; /* cobalt: the sky behind her */
--flare: #FF4F92; /* the rose flare across the lens */
--plum: #4A1739; /* the plum shadows */
--sun: #FFC629; /* the sun itself; Taylor's favourite yellow */
/* kept from before, brighter (Taylor) */
--reef: #14D3CB; /* turquoise water */
--jungle: #0B4A35; /* rainforest canopy */
--leaf: #9BE34A; /* new leaves: neon green */
--ember: #FF6A2C; /* bright tangerine, never burnt */
--snow: #F6F7FB; /* the hazy white of the flare, and paper */
/* text and lines */
--ink: #101833;
--ink-soft: #3B4466;
--mist: #BFCDEA;
--fern: #BCE3CC;
--rose-mist: #F2C4D6;
--ocean-deep: #2148A8;
--jungle-mid: #16784A;
--flare-deep: #C21A55;
--plum-deep: #7A1F52;
--deep-dark: #0C1533;
--deep-line: #2A3A6E;
--ocean-line: #3A66C6;
--reef-line: #0E9F9A;
--jungle-line: #1B6247;
--plum-line: #6A2A55;
--flare-line: #E83D7E;
--leaf-line: #7FC935;
--sun-line: #E3A60F;
--ember-line: #E85A22;
--snow-line: #D5DAE8;
--tape: color-mix(in srgb, var(--snow) 55%, transparent);
--shadow: color-mix(in srgb, var(--ink) 35%, transparent);
/* hand-made textures, all colourless masks or noise */
--grain: url("data:image/svg+xml;utf8,");
--squiggle: url("data:image/svg+xml;utf8,");
--torn-a: polygon(0 55%, 3% 30%, 6% 62%, 10% 40%, 13% 70%, 17% 35%, 21% 58%, 24% 28%, 28% 64%, 32% 44%, 36% 72%, 40% 38%, 43% 56%, 47% 26%, 51% 60%, 55% 42%, 58% 70%, 62% 34%, 66% 58%, 70% 30%, 73% 66%, 77% 46%, 81% 74%, 85% 36%, 88% 58%, 92% 30%, 96% 62%, 100% 40%, 100% 100%, 0 100%);
--torn-b: polygon(0 40%, 4% 66%, 7% 34%, 11% 58%, 15% 26%, 18% 62%, 22% 44%, 26% 72%, 30% 36%, 33% 60%, 37% 30%, 41% 66%, 45% 48%, 48% 74%, 52% 34%, 56% 58%, 60% 28%, 63% 64%, 67% 42%, 71% 70%, 75% 38%, 78% 60%, 82% 32%, 86% 66%, 90% 44%, 93% 70%, 97% 36%, 100% 58%, 100% 100%, 0 100%);
--font-head: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
--r: 4px;
--sketch: 255px 14px 225px 14px / 14px 225px 14px 255px;
--wrap: 1180px;
}
/* Tones: one world per band */
.tone-deep { --bg: var(--deep); --fg: var(--snow); --muted: var(--mist); --accent: var(--sun);
--line: var(--deep-line); --pill-bg: var(--sun); --pill-fg: var(--ink);
--btn-bg: var(--sun); --btn-fg: var(--ink); --ghost: var(--mist);
--link: var(--sun); --scribble: var(--reef); }
.tone-ocean { --bg: var(--ocean); --fg: var(--snow); --muted: var(--snow); --accent: var(--sun);
--line: var(--ocean-line); --pill-bg: var(--sun); --pill-fg: var(--ink);
--btn-bg: var(--sun); --btn-fg: var(--ink); --ghost: var(--snow);
--link: var(--sun); --scribble: var(--sun); }
.tone-jungle { --bg: var(--jungle); --fg: var(--snow); --muted: var(--fern); --accent: var(--leaf);
--line: var(--jungle-line); --pill-bg: var(--leaf); --pill-fg: var(--ink);
--btn-bg: var(--leaf); --btn-fg: var(--ink); --ghost: var(--fern);
--link: var(--leaf); --scribble: var(--leaf); }
.tone-sun { --bg: var(--sun); --fg: var(--ink); --muted: var(--ink-soft); --accent: var(--ink);
--line: var(--sun-line); --pill-bg: var(--ink); --pill-fg: var(--sun);
--btn-bg: var(--ink); --btn-fg: var(--sun); --ghost: var(--ink);
--link: var(--ink); --scribble: var(--ember); }
.tone-reef { --bg: var(--reef); --fg: var(--ink); --muted: var(--ink); --accent: var(--ink);
--line: var(--reef-line); --pill-bg: var(--ink); --pill-fg: var(--reef);
--btn-bg: var(--ink); --btn-fg: var(--snow); --ghost: var(--ink);
--link: var(--ink); --scribble: var(--sun); }
.tone-ember { --bg: var(--ember); --fg: var(--ink); --muted: var(--ink); --accent: var(--ink);
--line: var(--ember-line); --pill-bg: var(--ink); --pill-fg: var(--ember);
--btn-bg: var(--ink); --btn-fg: var(--sun); --ghost: var(--ink);
--link: var(--ink); --scribble: var(--sun); }
.tone-snow { --bg: var(--snow); --fg: var(--ink); --muted: var(--ink-soft); --accent: var(--flare-deep);
--line: var(--snow-line); --pill-bg: var(--ember); --pill-fg: var(--ink);
--btn-bg: var(--ember); --btn-fg: var(--ink); --ghost: var(--ink);
--link: var(--flare-deep); --scribble: var(--reef); }
.tone-flare { --bg: var(--flare); --fg: var(--ink); --muted: var(--ink); --accent: var(--ink);
--line: var(--flare-line); --pill-bg: var(--ink); --pill-fg: var(--flare);
--btn-bg: var(--ink); --btn-fg: var(--snow); --ghost: var(--ink);
--link: var(--ink); --scribble: var(--sun); }
.tone-leaf { --bg: var(--leaf); --fg: var(--ink); --muted: var(--ink); --accent: var(--ink);
--line: var(--leaf-line); --pill-bg: var(--ink); --pill-fg: var(--leaf);
--btn-bg: var(--ink); --btn-fg: var(--snow); --ghost: var(--ink);
--link: var(--ink); --scribble: var(--flare); }
.tone-plum { --bg: var(--plum); --fg: var(--snow); --muted: var(--rose-mist); --accent: var(--flare);
--line: var(--plum-line); --pill-bg: var(--flare); --pill-fg: var(--ink);
--btn-bg: var(--sun); --btn-fg: var(--ink); --ghost: var(--rose-mist);
--link: var(--sun); --scribble: var(--flare); }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--deep); color: var(--snow);
font: 400 17px/1.6 var(--font-body); }
/* Grain over everything, like paper or film */
body::after { content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
background-image: var(--grain); opacity: 0.13; mix-blend-mode: overlay; }
img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.wrap { max-width: var(--wrap); margin: 0 auto;
padding-left: max(20px, env(safe-area-inset-left, 0px));
padding-right: max(20px, env(safe-area-inset-right, 0px)); }
/* Type */
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
letter-spacing: 0.01em; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(46px, 7.2vw, 96px); line-height: 0.94; }
h2 { font-size: clamp(32px, 4.2vw, 54px); line-height: 0.98; }
/* A hand-drawn underline under every section heading */
.head-block h2::after { content: ""; display: block; width: min(230px, 62%); height: 13px;
margin-top: 12px; background: var(--scribble);
-webkit-mask: var(--squiggle) no-repeat center / 100% 100%;
mask: var(--squiggle) no-repeat center / 100% 100%; }
.lede { font-size: clamp(18px, 1.7vw, 21px); color: var(--muted); max-width: 46ch; margin: 0; }
.sub { color: var(--muted); font-size: 18px; max-width: 56ch; margin: 0; }
/* Eyebrows are stickers */
.eyebrow { align-self: flex-start; display: inline-block; font: 700 14px/1 var(--font-head);
text-transform: uppercase; letter-spacing: 0.14em; color: var(--pill-fg);
background: var(--pill-bg); padding: 7px 11px 6px; border-radius: 3px 6px 4px 7px;
transform: rotate(-2.5deg); box-shadow: 2px 3px 0 var(--shadow); }
/* Header */
.head { position: sticky; top: 0; z-index: 10; background: var(--deep); }
@media (max-width: 700px) { .head { position: static; } }
.head .wrap { display: flex; flex-wrap: wrap; align-items: center;
justify-content: space-between; gap: 10px 32px; padding-block: 14px; }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.logo .badge { width: 52px; height: 52px; flex: none; transform: rotate(-6deg);
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .35)); }
.logo span { font: 700 24px/1 var(--font-head); text-transform: uppercase;
letter-spacing: 0.05em; color: var(--snow); }
.head nav { display: flex; flex-wrap: nowrap; gap: 26px; }
.head nav a { font: 600 17px/1 var(--font-head); text-transform: uppercase;
letter-spacing: 0.1em; color: var(--mist); text-decoration: none;
padding-block: 8px 10px; }
.head nav a:hover { color: var(--snow); }
.head nav a[aria-current="page"] { color: var(--snow); position: relative; }
.head nav a[aria-current="page"]::after { content: ""; position: absolute; left: -2px; right: -2px;
bottom: 0; height: 8px; background: var(--sun);
-webkit-mask: var(--squiggle) no-repeat center / 100% 100%;
mask: var(--squiggle) no-repeat center / 100% 100%; }
/* Phones: the nav gets its own row under the logo and all six links stay on
one line, the type shrinking with the screen (measured to fit at 320px). */
@media (max-width: 760px) {
.head nav { flex: 1 1 100%; justify-content: space-between; gap: 8px; }
.head nav a { font-size: clamp(13px, 4.2vw, 17px); letter-spacing: 0.05em; }
}
/* Bands, with torn paper edges between them */
.band { position: relative; background: var(--bg); color: var(--fg);
padding-block: clamp(64px, 8vw, 116px); }
.band:not(.hero)::before { content: ""; position: absolute; left: 0; right: 0; top: -15px;
height: 16px; background: var(--bg); clip-path: var(--torn-a); }
.band:nth-of-type(even):not(.hero)::before { clip-path: var(--torn-b); }
.head-block { display: flex; flex-direction: column; gap: 16px; margin-bottom: 36px; }
/* Texture: a contour map behind every band, faint, like a field map under the
page; a wolf's trail across the travels band instead. Both are generated by
tools/textures.py (seamless tile, fixed seed). */
.tone-deep, .tone-ocean, .tone-jungle, .tone-plum { --topo: url("topo-light.svg"); --topo-o: 0.075; }
.tone-sun, .tone-reef, .tone-ember, .tone-flare, .tone-leaf, .tone-snow { --topo: url("topo-dark.svg"); --topo-o: 0.07; }
.band::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background: var(--topo) 0 0 / 640px 640px repeat; opacity: var(--topo-o); }
.band:nth-of-type(odd)::after { background-position: 230px 160px; }
.band > .wrap { position: relative; z-index: 1; }
.band.tex-tracks::after { background: url("tracks.svg") right -60px bottom 20px / 1400px auto no-repeat;
opacity: 0.12; }
@media (max-width: 700px) {
.band.tex-tracks::after { background-size: 900px auto; background-position: right -140px bottom 10px; }
}
/* Buttons and links: sketchy outlines, never machine-perfect */
.acts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.btn { display: inline-block; text-decoration: none; border-radius: var(--sketch);
font: 700 17px/1 var(--font-head); text-transform: uppercase; letter-spacing: 0.1em;
padding: 16px 26px; background: var(--btn-bg); color: var(--btn-fg);
border: 2.5px solid var(--btn-bg); transition: transform .15s ease; }
.btn:hover { transform: translateY(-2px) rotate(-1.5deg); }
.btn.ghost { background: transparent; color: var(--fg); border-color: var(--ghost); }
.more { margin: 30px 0 0; }
.more a { font: 700 24px/1 var(--font-hand); color: var(--link); text-decoration: none; }
.more a:hover { text-decoration: underline; text-underline-offset: 5px; }
/* Placeholder tag: something Taylor still has to send */
.todo-tag { display: inline-flex; align-items: center; vertical-align: middle;
font: 600 13px/1 var(--font-head); text-transform: uppercase; letter-spacing: 0.12em;
color: var(--fg); border: 1.5px dashed var(--fg); border-radius: var(--r);
padding: 5px 9px; margin-left: 10px; white-space: nowrap; }
/* Hero */
.hero { padding-block: clamp(56px, 8vw, 112px) clamp(80px, 9vw, 136px); }
.hero-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.hero h1 { max-width: 15ch; }
.hero .acts { margin-top: 12px; }
.hero.has-media .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
gap: clamp(40px, 6vw, 80px); align-items: center; }
@media (max-width: 860px) { .hero.has-media .wrap { grid-template-columns: minmax(0, 1fr); } }
/* The scope frame: an uneven pool with a soft glow, the way a hot spring
steams at its edges. No hard rings. */
.scope { margin: 0; display: flex; flex-direction: column; gap: 22px; align-items: center;
padding: clamp(16px, 4vw, 40px); }
.scope-view { width: 100%; max-width: 400px; aspect-ratio: 1;
border-radius: 54% 46% 58% 42% / 47% 56% 44% 53%;
background: radial-gradient(ellipse at 44% 42%, var(--ocean) 0 28%, var(--deep) 78%);
box-shadow: 0 0 0 5px color-mix(in srgb, var(--sun) 80%, transparent),
0 0 36px 14px color-mix(in srgb, var(--flare) 42%, transparent),
0 0 80px 34px color-mix(in srgb, var(--sun) 22%, transparent),
0 0 130px 60px color-mix(in srgb, var(--ocean) 30%, transparent);
transform: rotate(-5deg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 12px; padding: 18%; text-align: center; color: var(--snow); }
.scope-view > * { transform: rotate(5deg); }
.scope-view .todo-tag { margin: 0; color: var(--snow); border-color: var(--snow); }
.scope-hint { font: 500 24px/1.15 var(--font-hand); color: var(--snow); }
.scope figcaption { font: 500 22px/1.2 var(--font-hand); color: var(--muted); transform: rotate(-2deg); }
.scope figcaption:empty { display: none; }
.scope-view.has-video { padding: 0; overflow: hidden; background: var(--deep); }
.scope-view.has-video > video { display: block; width: 100%; height: 100%; object-fit: cover;
transform: rotate(5deg) scale(1.14); }
/* Paper and tape: the trip ticket, the clips and her notes */
.trip-facts, .clip, .quote, .print { position: relative; }
.trip-facts::before, .clip::before, .quote::before, .print::before {
content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px;
background: var(--tape); transform: translateX(-50%) rotate(-4deg);
box-shadow: 0 1px 2px var(--shadow); }
/* Trip */
.trip { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
gap: clamp(32px, 5vw, 64px); }
@media (max-width: 860px) { .trip { grid-template-columns: minmax(0, 1fr); } }
.trip-main { min-width: 0; }
.trip .head-block { margin-bottom: 20px; }
.trip h2 { font-size: clamp(38px, 5.4vw, 68px); }
.trip-copy { display: flex; flex-direction: column; gap: 12px; }
.trip-copy p { margin: 0; color: var(--muted); max-width: 52ch; }
.trip-copy p:first-child { color: var(--fg); font-size: 20px; font-weight: 500; }
.trip-facts { margin: 12px 0 0; align-self: start; background: var(--snow); color: var(--ink);
border-radius: 3px; padding: 14px 26px 10px; transform: rotate(1.6deg);
box-shadow: 0 14px 30px var(--shadow); }
.trip-facts div { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: 16px;
padding-block: 13px; border-bottom: 1.5px dashed var(--snow-line); }
.trip-facts div:last-child { border-bottom: 0; }
.trip-facts dt { font: 700 22px/1.2 var(--font-hand); color: var(--flare-deep); }
.trip-facts dd { margin: 0; font-weight: 500; font-size: 18px; line-height: 1.4; }
.trip-facts .todo-tag { margin: 6px 0 0; display: flex; width: fit-content; max-width: 100%;
white-space: normal; color: var(--ink); border-color: var(--ink); }
@media (max-width: 480px) {
.trip-facts { padding-inline: 20px; }
.trip-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* Footage clips: taped prints, each at its own angle */
.clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px;
padding-top: 10px; }
@media (max-width: 960px) { .clips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .clips { grid-template-columns: minmax(0, 1fr); } }
.clip { margin: 0; display: flex; flex-direction: column; gap: 10px; min-width: 0;
background: var(--snow); color: var(--ink); padding: 12px 12px 14px;
transform: rotate(var(--tilt, -1.6deg)); box-shadow: 0 14px 28px var(--shadow); }
.clip:nth-child(3n+2) { --tilt: 1.4deg; }
.clip:nth-child(3n) { --tilt: -0.6deg; }
.clip:nth-child(3n+2)::before { transform: translateX(-30%) rotate(5deg); }
.clip-view { position: relative; aspect-ratio: 16 / 9; max-width: 100%;
background: radial-gradient(ellipse at 50% 50%, var(--ocean) 0 22%, var(--deep) 75%);
display: grid; place-items: center; overflow: hidden; }
.clip-ring { display: none; }
.clip-view .todo-tag { margin: 0; color: var(--snow); border-color: var(--snow); }
.clip-view.has-video { background: var(--ink); }
.clip-view.has-video video { display: block; width: 100%; height: 100%; object-fit: cover;
object-position: var(--focus, 50% 50%); }
/* An upright clip spans two rows and takes whatever height they give it, so
the prints beside it set the rhythm; on one column it keeps its own shape. */
.clips { grid-auto-flow: row dense; }
.clip.tall { grid-row: span 2; }
.clip.tall .clip-view { aspect-ratio: auto; flex: 1 1 0; min-height: 0; }
.clip.tall .clip-view video { position: absolute; inset: 0; }
@media (max-width: 600px) {
.clip.tall { grid-row: auto; }
.clip.tall .clip-view { aspect-ratio: 9 / 16; flex: none; }
}
.clip figcaption { display: flex; flex-direction: column; gap: 2px; padding-inline: 4px; }
.clip-cap { font: 500 23px/1.15 var(--font-hand); }
.clip-cap:empty { display: none; }
.clip-src { font-size: 14px; color: var(--ink-soft); }
.clip-src a { color: var(--ink-soft); text-underline-offset: 3px; }
.clip-src a:hover { color: var(--flare-deep); }
/* Her photos: taped prints on a pinboard, mixed shapes, each at its own angle */
.prints { columns: 3 260px; column-gap: 34px; padding-top: 10px; }
.print { margin: 0 0 44px; break-inside: avoid; display: flex; flex-direction: column; gap: 10px;
background: var(--snow); color: var(--ink); padding: 12px 12px 14px;
transform: rotate(var(--tilt, -1.4deg)); box-shadow: 0 14px 28px var(--shadow); }
.print:nth-child(3n+2) { --tilt: 1.6deg; }
.print:nth-child(3n) { --tilt: -0.5deg; }
.print:nth-child(4n) { --tilt: 2.1deg; }
.print:nth-child(3n+2)::before { transform: translateX(-30%) rotate(5deg); }
.print img { display: block; width: 100%; height: auto; }
.print figcaption { font: 500 23px/1.15 var(--font-hand); padding-inline: 4px; }
.portrait { max-width: 440px; justify-self: center; }
.print.art { max-width: 360px; align-self: center; padding: 22px; --tilt: 2deg; }
/* The photo a page is built around: full width, the hero's torn edge over it */
.photo-band { margin: 0; line-height: 0; background: var(--deep); }
.photo-band img, .photo-band video { display: block; width: 100%; height: clamp(300px, 56vw, 760px);
object-fit: cover; object-position: var(--focus, 50% 32%); }
.photo-band + .hero { padding-block: clamp(48px, 6vw, 84px) clamp(72px, 8vw, 112px); }
.photo-band + .band.hero::before, .carousel + .band.hero::before {
content: ""; position: absolute; left: 0; right: 0; top: -15px; z-index: 2;
height: 16px; background: var(--bg); clip-path: var(--torn-a); }
.carousel + .hero { padding-block: clamp(48px, 6vw, 84px) clamp(72px, 8vw, 112px); }
/* Carousels (home, footage): her photos and clips crossfading, each slowly settling in,
with a handwritten label taped on like a print's caption */
.carousel { position: relative; height: clamp(320px, 58vw, 780px); overflow: hidden;
background: var(--deep); }
.slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 1.4s ease;
pointer-events: none; }
.slide.is-on { opacity: 1; pointer-events: auto; }
.slide img, .slide video { display: block; width: 100%; height: 100%; object-fit: cover;
object-position: var(--focus, 50% 40%); }
.slide.is-on img { animation: settle 9s ease-out both; }
@keyframes settle { from { transform: scale(1.07); } to { transform: scale(1); } }
.slide figcaption { position: absolute; left: max(20px, calc((100% - var(--wrap)) / 2 + 20px));
bottom: 46px; background: var(--snow); color: var(--ink);
font: 600 25px/1 var(--font-hand); padding: 9px 16px 8px;
transform: rotate(-2.5deg); box-shadow: 0 8px 18px var(--shadow); }
.car-ui { display: none; }
.carousel.js .car-ui { display: flex; align-items: center; gap: 16px; position: absolute;
right: max(20px, calc((100% - var(--wrap)) / 2 + 20px)); bottom: 46px; }
.car-pause { font: 600 22px/1 var(--font-hand); color: var(--snow); background: none;
border: 2px solid var(--snow); border-radius: var(--sketch); padding: 6px 14px 7px;
cursor: pointer; }
.car-dots { display: flex; gap: 10px; }
.car-dots button { width: 14px; height: 14px; padding: 0; border-radius: 50% 45% 55% 48%;
border: 2px solid var(--snow); background: transparent; cursor: pointer; }
.car-dots button[aria-current] { background: var(--sun); border-color: var(--sun); }
.car-pause, .car-dots button { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
@media (max-width: 600px) {
.slide figcaption { bottom: 74px; font-size: 21px; }
.carousel.js .car-ui { bottom: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.slide { transition: none; }
.slide.is-on img { animation: none; }
}
/* Hover a polaroid and it straightens, grows and comes to the front; a clip
starts playing (chrome.py SCRIPT). Mouse and trackpad only: on touch the
video controls do the job. Bands clip sideways so a print popping out near
the edge never makes the page scroll left and right. */
.band { overflow-x: clip; }
@media (hover: hover) and (pointer: fine) {
.clip, .print { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease; }
.clip:hover, .clip:focus-within, .print:hover {
transform: rotate(0deg) scale(1.3); z-index: 5;
box-shadow: 0 34px 70px color-mix(in srgb, var(--ink) 55%, transparent); }
.print:hover { transform: rotate(0deg) scale(1.22); }
.clip.zoomable { cursor: zoom-in; }
}
/* Below three columns a polaroid already fills most of the width, so growing it
pushed its caption off both edges (Lala, 20 October 2026): there it only
straightens and lifts. */
@media (hover: hover) and (pointer: fine) and (max-width: 960px) {
.clip:hover, .clip:focus-within, .print:hover { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
.clip, .print { transition: none; }
}
/* Cards: her upcoming trips and the charities she supports, as taped tickets */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
gap: 44px 32px; padding-top: 10px; }
.card { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
background: var(--snow); color: var(--ink); padding: 26px 24px 22px;
border-radius: 3px; transform: rotate(var(--tilt, -1.2deg));
box-shadow: 0 14px 28px var(--shadow); }
.card:nth-child(3n+2) { --tilt: 1.3deg; }
.card:nth-child(3n) { --tilt: -0.4deg; }
.card::before { content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px;
background: var(--tape); transform: translateX(-50%) rotate(-4deg);
box-shadow: 0 1px 2px var(--shadow); }
.card-when { font: 700 24px/1.1 var(--font-hand); color: var(--flare-deep); }
.card h3 { font-size: clamp(26px, 2.6vw, 32px); line-height: 1; }
.card p { margin: 0; font-size: 17px; line-height: 1.5; }
.card .card-with { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.card-foot { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; align-items: center;
gap: 10px; }
.card .btn { background: var(--ink); color: var(--snow); border-color: var(--ink);
font-size: 15px; padding: 13px 20px; }
.card .todo-tag { margin: 0; color: var(--ink); border-color: var(--ink); white-space: normal; }
.tone-snow .wk-kind[data-k="website"] { color: var(--jungle-mid); }
.tone-deep .wk-kind[data-k="website"] { color: var(--leaf); }
/* Work list: each kind stamped in its own colour */
.wk-block + .wk-block { margin-top: 56px; }
.wk-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px;
font-size: clamp(26px, 2.8vw, 34px); line-height: 1; margin-bottom: 8px; }
.wk-note { color: var(--muted); margin: 0 0 8px; max-width: 60ch; }
.wk-list { list-style: none; margin: 16px 0 0; padding: 0; }
.wk { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px 20px;
padding-block: 20px; border-top: 1.5px dashed var(--line); }
.wk:last-child { border-bottom: 1.5px dashed var(--line); }
@media (max-width: 600px) { .wk { grid-template-columns: minmax(0, 1fr); } }
.wk-kind { align-self: start; justify-self: start; font: 700 13px/1.5 var(--font-head);
text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent);
border: 2px solid currentColor; border-radius: 3px 5px 3px 6px; padding: 1px 8px;
transform: rotate(-3deg); }
.wk:nth-child(even) .wk-kind { transform: rotate(2deg); }
.tone-snow .wk-kind[data-k="talk"] { color: var(--flare-deep); }
.tone-snow .wk-kind[data-k="podcast"] { color: var(--ocean-deep); }
.tone-snow .wk-kind[data-k="article"] { color: var(--jungle-mid); }
.tone-snow .wk-kind[data-k="report"] { color: var(--plum-deep); }
.tone-snow .wk-kind[data-k="video"] { color: var(--ocean-deep); }
.tone-snow .wk-kind[data-k="paper"] { color: var(--plum-deep); }
.tone-deep .wk-kind[data-k="talk"] { color: var(--sun); }
.tone-deep .wk-kind[data-k="podcast"] { color: var(--reef); }
.tone-deep .wk-kind[data-k="article"] { color: var(--leaf); }
.tone-deep .wk-kind[data-k="report"] { color: var(--ember); }
.tone-deep .wk-kind[data-k="video"] { color: var(--reef); }
.tone-deep .wk-kind[data-k="paper"] { color: var(--flare); }
.wk-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wk-title { font-size: 19px; font-weight: 600; line-height: 1.35; text-decoration: none;
overflow-wrap: break-word; }
.wk-title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.wk-src { color: var(--muted); font-size: 15px; }
/* Split: story plus facts or her words */
.split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
gap: clamp(36px, 6vw, 80px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: minmax(0, 1fr); } }
.split-main, .split-side { min-width: 0; }
.split-side { display: flex; flex-direction: column; gap: 44px; padding-top: 12px; }
.prose p { margin: 0 0 16px; max-width: 62ch; font-size: 18px; line-height: 1.65; }
.prose p:last-child { margin-bottom: 0; }
.facts { margin: 0; }
.facts div { padding-block: 14px; border-bottom: 1.5px dashed var(--line); }
.facts div:first-child { border-top: 1.5px dashed var(--line); }
.facts dt { font: 700 22px/1.2 var(--font-hand); color: var(--accent); }
.facts dd { margin: 2px 0 0; font-weight: 500; }
/* Her own words, on a sticky note */
.quote { margin: 0; background: var(--sun); color: var(--ink); border-radius: 2px;
padding: 30px 30px 26px; transform: rotate(-2deg); box-shadow: 0 16px 30px var(--shadow); }
.quote p { margin: 0 0 14px; font: 600 31px/1.12 var(--font-hand); }
.quote footer { font: 600 14px/1.4 var(--font-head); text-transform: uppercase; letter-spacing: 0.08em;
color: var(--ink); }
.quote footer a { color: var(--ink); text-underline-offset: 3px; }
/* Travels: passport stamps on paper. Stamp inks are the deep shades that
pass on snow (ocean-deep 8.1, ember-deep 5.6, jungle-mid 6.0, rust-deep 6.2,
ink 15.7), so this block belongs on the snow tone. */
.stamp-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 52px; }
@media (max-width: 900px) { .stamp-groups { grid-template-columns: minmax(0, 1fr); } }
.stamp-group { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stamp-region { font: 700 34px/1 var(--font-hand); text-transform: none; letter-spacing: 0;
color: var(--fg); transform: rotate(-1.5deg); }
.stamps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
gap: 16px 14px; align-items: center; }
.stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; min-height: 56px; padding: 9px 14px 8px; color: var(--ocean-deep);
border: 2.5px solid currentColor; border-radius: 6px 3px 7px 4px;
box-shadow: inset 0 0 0 3px var(--bg), inset 0 0 0 4.5px currentColor;
transform: rotate(-3deg); }
.stamp:nth-child(5n+2) { color: var(--flare-deep); transform: rotate(2.5deg);
border-radius: 999px; padding-inline: 20px; }
.stamp:nth-child(5n+3) { color: var(--jungle-mid); transform: rotate(-1deg); }
.stamp:nth-child(5n+4) { color: var(--plum-deep); transform: rotate(3.5deg); }
.stamp:nth-child(5n) { color: var(--ink); transform: rotate(-4deg);
border-radius: 999px; padding-inline: 20px; }
.stamp-place { font: 700 17px/1.05 var(--font-head); text-transform: uppercase; letter-spacing: 0.08em; }
.stamp-sub { font: 600 19px/1 var(--font-hand); margin-top: 3px; }
.stamp-note { margin: 2px 0 0; font: 500 22px/1.25 var(--font-hand); color: var(--muted); max-width: 32ch; }
/* Call to action */
.cta { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
gap: 8px 40px; }
.cta .head-block { margin-bottom: 0; }
.head-todo .todo-tag { margin-left: 0; }
.cta .acts { margin-top: 0; }
/* Footer */
.foot { position: relative; background: var(--deep-dark); color: var(--snow); }
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -15px; height: 16px;
background: var(--deep-dark); clip-path: var(--torn-b); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px;
align-items: start; padding-block: 60px 36px; }
@media (max-width: 700px) { .foot .wrap { grid-template-columns: minmax(0, 1fr); } }
.foot-brand { display: flex; align-items: center; gap: 12px; }
/* Her five-animal logo, taped to the footer on a paper card */
.foot-logo { position: relative; margin: 14px 0 0; width: min(100%, 380px); background: var(--snow);
padding: 16px 18px 12px; transform: rotate(-1.8deg); box-shadow: 0 14px 28px rgba(0, 0, 0, .35); }
.foot-logo::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px;
background: var(--tape); transform: translateX(-50%) rotate(3deg); }
.foot-logo img { display: block; width: 100%; height: auto; }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.foot h4 { font: 700 24px/1 var(--font-hand); text-transform: none; letter-spacing: 0;
color: var(--sun); margin-bottom: 12px; }
.foot-cols a { display: block; color: var(--snow); text-decoration: none; padding-block: 5px; }
.foot-cols a:hover { color: var(--sun); }
.legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between;
gap: 8px 24px; padding-top: 24px; border-top: 1.5px dashed var(--deep-line);
color: var(--mist); font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
.btn:hover { transform: none; }
}