/* outside.club: the website, "Go Outside" edition.
   Retro print, today's kids. The page is printed matter: a folded poster up top, then a slideshow
   of the band, one picture per feature, a magazine and a coupon, on cream stock with paper grain,
   one serif and one loud condensed sans (Anton, the lettering of the GO OUTSIDE poster).
   Kept simple: one distinctive thing per section.
   Three stripes, sun, tangerine and red, sign everything off.
   Colour runs in bands: sky (poster), cream (note, photo, the Sky Loop and its features),
   sky (mail), red (join), cream (footer).
   Nothing moves on its own; the page only answers your scroll, your click and your typing.
   Self-contained: brand.html keeps its own base.css. */

:root {
  --paper: #F4ECDF;        /* poster stock */
  --paper-2: #EADFCB;      /* card stock in shadow */
  --paper-3: #FBF7EF;      /* highlight */
  --ink: #1E1A1B;          /* warm black ink */
  --ink-2: #5C5452;
  --cream: #F6EEDF;        /* type on dark colours */
  --sky: #2A5A95;
  --sky-deep: #1C3967;
  --sun: #F0C553;
  --tang: #EC8143;
  --red: #E5433E;
  --brick: #C9342E;        /* red deep enough for cream body text */
  --teal: #3A9CAB;

  /* six skies (the band colourways) */
  --sky-lilac: #9C98F2;
  --sky-glacier: #7FBAF0;
  --sky-mint: #8FD5B5;
  --sky-peach: #F5A394;
  --sky-cobalt: #4F80E6;
  --sky-smoke: #A4A6AA;

  --f-display: 'Anton', 'Impact', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --f-serif: 'Newsreader', 'Times New Roman', Times, serif;
  --f-sans: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --f-hand: 'Permanent Marker', 'Marker Felt', 'Comic Sans MS', cursive;

  --nav-h: 64px;
  --pb: clamp(10px, 1.4vw, 20px);          /* the paper border round the poster */
  --gutter: clamp(16px, 4vw, 56px);
  --maxw: 1320px;
  --sec: clamp(80px, 10vw, 150px);
  --ease-snap: cubic-bezier(0.2, 1.4, 0.35, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
@media (max-width: 600px) { :root { --nav-h: 56px; } }

/* ---- reset ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; overflow-x: hidden;
  background: var(--paper) url(../img/grain-dark.png);
  color: var(--ink);
  font: 400 18px/1.5 var(--f-serif);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p, h1, h2, h3, figure, dl, dd { margin: 0; }
::selection { background: var(--sun); color: var(--ink); }
:focus-visible { outline: 3px solid var(--tang); outline-offset: 3px; border-radius: 4px; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--cream); padding: 10px 14px; border-radius: 8px; font: 700 14px var(--f-sans); text-decoration: none; transition: top 0.2s; }
.skip:focus { top: 12px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- type and the small parts ------------------------------------------------------------------ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.kicker { font: 800 12.5px/1.2 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; }
.title { font: 400 clamp(52px, 8.4vw, 132px)/0.88 var(--f-display); text-transform: uppercase; letter-spacing: 0.002em; text-wrap: balance; }
.lede { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.42; max-width: 32em; text-wrap: pretty; }

/* three stripes: sun, tangerine, red. The house signature */
.stripes { display: block; height: 18px; background: linear-gradient(var(--sun) 0 33.4%, var(--tang) 0 66.7%, var(--red) 0); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--cream);
  font: 800 14px/1 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: transform 0.35s var(--ease-snap), background-color 0.2s, color 0.2s;
}
.btn:hover { background: var(--red); transform: translateY(-2px); }
.btn:active { transform: scale(0.97); }
.btn .arrow { width: 18px; height: 18px; flex: none; }

/* a die-cut sticker slapped on the page */
.sticker { position: relative; display: grid; place-items: center; width: clamp(96px, 9vw, 128px); aspect-ratio: 1; transform: rotate(-12deg); filter: drop-shadow(0 8px 10px rgba(60, 30, 0, 0.3)); }
.sticker-shape { position: absolute; inset: 0; }
.sticker-shape svg { width: 100%; height: 100%; overflow: visible; }
.sticker-shape path { fill: var(--red); stroke: var(--cream); stroke-width: 5; stroke-linejoin: round; paint-order: stroke; }
.sticker-txt { position: relative; width: 5.2em; text-align: center; font: 400 clamp(14px, 1.3vw, 18px)/0.95 var(--f-display); text-transform: uppercase; color: var(--cream); }
.sticker-sun .sticker-shape path { fill: var(--sun); stroke: var(--ink); stroke-width: 4; }
.sticker-sun .sticker-txt { color: var(--ink); }
.sticker-tang .sticker-shape path { fill: var(--tang); stroke: var(--ink); stroke-width: 4; }
.sticker-tang .sticker-txt { color: var(--ink); }

/* a word swiped with a marker as you read it */
.hi { position: relative; isolation: isolate; display: inline-block; white-space: nowrap; }
.hi::before {
  content: ''; position: absolute; z-index: -1; left: -0.1em; right: -0.1em; top: 0.12em; bottom: 0.02em;
  background: var(--hl, var(--sun)); border-radius: 0.14em 0.08em 0.16em 0.06em;
  transform: rotate(-1.2deg) scaleX(0); transform-origin: left center; transition: transform 0.55s cubic-bezier(0.7, 0, 0.2, 1);
}
.hi.lit::before { transform: rotate(-1.2deg) scaleX(1); }
.hi-sun { --hl: var(--sun); } .hi-tang { --hl: var(--tang); } .hi-red { --hl: var(--red); }

/* ---- nav: the name and one button, printed along the top of the poster ------------------------ */
.nav { position: absolute; inset: 0 0 auto; z-index: 20; height: var(--nav-h); display: flex; align-items: center; gap: 24px; padding: 0 calc(var(--pb) + clamp(4px, 1vw, 14px)); }
.nav-logo { display: block; flex: none; }
.nav-logo img { height: clamp(22px, 2.2vw, 30px); width: auto; }
.nav-cta { height: 40px; padding: 0 18px; font-size: 12.5px; margin-left: auto; }

/* ---- the poster: THE FUTURE IS OUTSIDE -----------------------------------------------------------
   The sky is a printed picture. The headline sits on the cloud tops and is masked with a silhouette
   of those clouds, so the letters tuck in behind them. Its two lines are set to one width, so
   OUTSIDE comes out huge; everything is sized in container units, so the type keeps its place on
   the clouds at any size. */
.poster { position: relative; padding: var(--nav-h) var(--pb) var(--pb); }
.poster-art {
  position: relative; container-type: size; overflow: hidden; isolation: isolate;
  height: max(460px, min(calc(100svh - var(--nav-h) - var(--pb)), calc((100vw - 2 * var(--pb)) * 0.5625)));
  background: var(--sky-deep);
  --off: 20.25cqw;   /* cloud tops, measured up from the bottom: 36% of the picture's height */
}
.poster-sky { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; z-index: -1; }
.go {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: var(--off);
  /* the block's width: as wide as the poster allows, or as tall as the sky above the clouds allows.
     In Anton, THE FUTURE IS is 5.093em wide and OUTSIDE 2.948em, so the stack stands 0.4837 of its width */
  --B: min(88cqw, calc((91cqh - var(--off)) / 0.4837));
  font: 400 16px/0.86 var(--f-display);
  text-transform: uppercase; color: var(--ink); text-align: center; white-space: nowrap;
  -webkit-mask: url(../img/go/sky-wide-mask.png) 50% 100% / cover no-repeat;
  mask: url(../img/go/sky-wide-mask.png) 50% 100% / cover no-repeat;
}
.go span { display: block; transform: translateY(0.012em); }
.go-l1 { font-size: calc(var(--B) / 5.093); }
.go-l2 { font-size: calc(var(--B) / 2.948); margin-top: calc(var(--B) * 0.022); }
.poster-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; justify-content: center; gap: 16px; padding: clamp(14px, 2.2cqw, 28px) clamp(16px, 2.6cqw, 34px); font: 800 clamp(10.5px, 0.95cqw, 13px)/1.2 var(--f-sans); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246, 238, 223, 0.82); }
.poster-low { position: absolute; left: 0; right: 0; top: calc(100% - var(--off)); bottom: clamp(44px, 6cqw, 84px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(14px, 1.8cqw, 24px); padding: 0 16px; text-align: center; }
.poster-line { max-width: 22em; font: 500 clamp(19px, 2.3cqw, 36px)/1.12 var(--f-serif); text-wrap: balance; font-variation-settings: 'opsz' 36; letter-spacing: -0.012em; color: var(--ink); text-shadow: 0 0 18px rgba(251, 246, 236, 0.7); }
.poster-foot { position: absolute; z-index: 2; left: clamp(14px, 2.4cqw, 34px); right: clamp(14px, 2.4cqw, 34px); bottom: clamp(12px, 1.8cqw, 26px); display: flex; align-items: center; gap: clamp(12px, 1.6cqw, 22px); }
.poster-foot .stripes { flex: 1; height: clamp(14px, 1.9cqw, 28px); }
.poster-url { font: 600 clamp(18px, 2.4cqw, 36px)/1 var(--f-serif); font-variation-settings: 'opsz' 28; letter-spacing: -0.01em; } /* the logo's wordmark, exactly */
/* the sheet: aged stock, a fold down the middle and one across. The button sits on top of the folds */
.poster-low .btn { position: relative; z-index: 4; }
.poster-art::before {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, transparent calc(50% - 2px), rgba(255, 255, 255, 0.22) calc(50% - 2px) calc(50% - 0.5px), rgba(40, 24, 10, 0.2) calc(50% - 0.5px) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(180deg, transparent calc(52% - 2px), rgba(255, 255, 255, 0.2) calc(52% - 2px) calc(52% - 0.5px), rgba(40, 24, 10, 0.18) calc(52% - 0.5px) calc(52% + 1px), transparent calc(52% + 1px)),
    linear-gradient(90deg, rgba(60, 40, 10, 0.05), transparent 49.6%, rgba(255, 255, 255, 0.04) 50.4%, transparent),
    linear-gradient(180deg, rgba(60, 40, 10, 0.04), transparent 51.6%, rgba(255, 255, 255, 0.035) 52.4%, transparent),
    radial-gradient(140% 120% at 50% 45%, transparent 62%, rgba(120, 80, 20, 0.12));
}
.poster-art::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: url(../img/grain-light.png); opacity: 0.5; mix-blend-mode: overlay; }
@media (max-aspect-ratio: 1/1) {
  .poster-art {
    height: max(560px, calc(100svh - var(--nav-h) - var(--pb)));
    --off: max(53.3cqw, 40cqh);   /* the tall picture's cloud tops: 40% of its height */
  }
  .go { -webkit-mask-image: url(../img/go/sky-tall-mask.png); mask-image: url(../img/go/sky-tall-mask.png); }
  .poster-low { bottom: clamp(48px, 13cqw, 72px); }
  .poster-line { font-size: clamp(19px, 5.4cqw, 30px); }
  .poster-foot .stripes { height: 14px; }
  .poster-url { font-size: clamp(18px, 5.4cqw, 26px); }
}

/* ---- manifesto: a note to parents, lit word by word as you read --------------------------------- */
.manifesto { padding: var(--sec) 0; }
.mf-grid { display: grid; gap: 26px; }
.mf-side { display: grid; gap: 14px; justify-items: start; }
.mf-side .stripes { width: 120px; height: 15px; }
.mf-text { display: grid; gap: 0.62em; font: 450 clamp(28px, 3.7vw, 58px)/1.1 var(--f-serif); font-variation-settings: 'opsz' 60; letter-spacing: -0.02em; max-width: 21em; }
.mf .w { opacity: 0.18; transition: opacity 0.35s ease; }
.mf .w.lit { opacity: 1; }
.mf-sign { font: 400 1.18em/0.95 var(--f-display); text-transform: uppercase; letter-spacing: 0; padding-top: 0.2em; }
.circled { position: relative; display: inline-block; white-space: nowrap; }
.circled svg { position: absolute; left: -14%; top: -22%; width: 128%; height: 150%; max-width: none; overflow: visible; pointer-events: none; }
.circled path { stroke-dasharray: 900; stroke-dashoffset: 900; transition: stroke-dashoffset 1.1s var(--ease-out); }
.circled.drawn path { stroke-dashoffset: 0; }
@media (min-width: 1000px) {
  .mf-grid { grid-template-columns: 210px minmax(0, 1fr); gap: 64px; }
  .mf-side { position: sticky; top: 40px; align-self: start; padding-top: 0.9em; }
}

/* ---- the club: one photo ------------------------------------------------------------------------- */
.chat { padding-bottom: var(--sec); }
.photo { width: 100%; height: auto; }

/* ---- the Sky Loop: a slideshow of the band --------------------------------------------------------------
   One picture at a time, full width, its caption underneath. Swipe, scroll sideways or use the
   arrows; nothing moves on its own. Pictures are 3:2; on a short screen the box gets a little
   wider than that and the picture is trimmed top and bottom, so a slide always fits the screen. */
.loop { padding: var(--sec) 0 calc(var(--sec) * 0.7); }
.loop-head { display: grid; gap: 16px; justify-items: start; }
.show { position: relative; margin-top: clamp(28px, 3.6vw, 52px); }
.slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.slides::-webkit-scrollbar { display: none; }
.slides:focus-visible { outline: 3px solid var(--tang); outline-offset: 4px; }
.slide { flex: 0 0 100%; scroll-snap-align: start; margin: 0; display: grid; gap: 16px; align-content: start; }
.slide-pic { position: relative; overflow: hidden; width: 100%; aspect-ratio: 3 / 2; max-height: calc(100svh - 120px); background: var(--paper-2); }
.slide-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.slide figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-right: 200px; }
.slide figcaption b { font: 400 clamp(26px, 2.6vw, 38px)/0.95 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; }
.slide figcaption span { font: italic 400 clamp(18px, 1.6vw, 22px)/1.25 var(--f-serif); color: var(--ink-2); }
/* the counter and arrows sit on the caption's line, at the right */
.show-bar { position: absolute; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; }
.show-count { margin-right: 8px; font: 800 13px/1 var(--f-sans); letter-spacing: 0.16em; color: var(--ink-2); }
.show-count span { color: var(--ink); }
.show-btn { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); transition: background-color 0.2s, color 0.2s, opacity 0.2s; }
.show-btn:hover { background: var(--ink); color: var(--cream); }
.show-btn:focus-visible { outline: 3px solid var(--tang); outline-offset: 3px; }
.show-btn:disabled { opacity: 0.25; pointer-events: none; }
.show-btn svg { width: 20px; height: 20px; }
@media (max-width: 700px) {
  .slide figcaption { padding-right: 0; }
  .show-bar { position: static; margin-top: 14px; }
  .show-count { margin-right: auto; }
}

/* ---- the features: one picture each, the feature and its question -------------------------------------- */
.feats { padding: calc(var(--sec) * 0.3) 0 var(--sec); }
.feats-head .title { max-width: none; font-size: clamp(40px, 6vw, 96px); }
.feat-list { list-style: none; margin: clamp(32px, 4vw, 60px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 5vw, 72px) clamp(18px, 2.4vw, 34px); }
.feat { display: grid; gap: 8px; align-content: start; }
.feat img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-bottom: 14px; }
.feat-t { font: 400 clamp(42px, 4.4vw, 66px)/0.9 var(--f-display); text-transform: uppercase; letter-spacing: 0.005em; }
.feat-q { font: italic 500 clamp(22px, 2.1vw, 30px)/1.2 var(--f-serif); letter-spacing: -0.01em; text-wrap: balance; }
@media (max-width: 999px) { .feat-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feat-list { grid-template-columns: minmax(0, 1fr); } }

/* ---- no app needed, kids get mail: the magazine, on a sky-blue page ---------------------------------- */
.mail { padding: var(--sec) 0; background: var(--sky) url(../img/grain-light.png); color: var(--cream); }
.mail-grid { display: grid; gap: clamp(30px, 4vw, 60px); align-items: center; }
.mail-paper { display: grid; place-items: center; }
.mail-paper { position: relative; }
/* Lola's magazine: click it and the page turns, right where it is. Cover, her week, her month, the back
   cover, then the cover again. The cover is a photograph of the printed magazine; the inside pages lie
   exactly over it (same spot, same tilt), so each one lands where the last one was */
.mag { all: unset; position: relative; display: block; width: min(100%, 520px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mag:focus-visible { outline: 3px solid var(--sun); outline-offset: 10px; border-radius: 6px; }
.mag-stack { position: relative; display: block; rotate: -3deg; filter: drop-shadow(0 34px 34px rgba(8, 18, 50, 0.45)); transition: rotate 0.5s var(--ease-snap), translate 0.5s var(--ease-snap); }
.mag:hover .mag-stack { rotate: -1.5deg; translate: 0 -8px; }
.mag-page { visibility: hidden; }
.mag-page.is-on { visibility: visible; z-index: 2; }
.mag-page.is-next { visibility: visible; z-index: 1; }
.mag-cover { position: relative; display: block; width: 100%; height: auto; }
/* an inside page: on the cover's printed face, with a few pages' edges showing underneath */
.mag-flat { position: absolute; left: 49.86%; top: 50.09%; width: 85.2%; aspect-ratio: 1 / 1.414; translate: -50% -50%; rotate: -1.6deg; box-shadow: 2px 3px 0 #EDE4D2, 4px 6px 0 #DED3BE; }
.mag-sheet { position: absolute; inset: 0; overflow: hidden; background: #F3EBDC; }
.mag-sheet > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mag-sticker { position: absolute; right: -7%; top: 46%; width: clamp(92px, 9vw, 122px); transform: rotate(10deg); transition: transform 0.45s var(--ease-snap), opacity 0.25s; }
.mag:hover .mag-sticker { transform: rotate(3deg) scale(1.08); }
.mag:not([data-page='0']) .mag-sticker { opacity: 0; transform: rotate(10deg) scale(0.6); }
@media (max-width: 600px) { .mag-sticker { right: -2%; width: 86px; } }
/* the peek: the top page tilts up from its bottom-left corner and slides a little left, showing the
   page underneath. On hover with a mouse; on a phone when the magazine scrolls into view (magazine.js) */
.mag { --peek: translate(-4%, -1%) translate(-50%, 50%) rotate(-6deg) translate(50%, -50%); }
/* on a phone the magazine nearly fills the width, so the page shrinks back a little from its left edge
   as it tilts, showing the page underneath on the right without swinging off the screen */
@media (max-width: 600px) { .mag { --peek: translate(3%, -1%) translate(-50%, 0) rotate(-4deg) scale(0.93) translate(50%, 0); } }
.mag-page { transition: transform 0.55s cubic-bezier(0.3, 1.25, 0.4, 1); }
.mag-page.is-turning { transition: none; }
.mag.is-peek .mag-page.is-on { transform: var(--peek); }
@media (hover: hover) { .mag:hover .mag-page.is-on { transform: var(--peek); } }
@media (prefers-reduced-motion: reduce) { .mag .mag-page.is-on { transform: none !important; } }
/* the cue under the magazine: what to do, which page, and an arrow that nudges with the peek */
.mag-cue { display: flex; align-items: center; gap: 14px; margin-top: clamp(30px, 4vw, 44px); color: var(--cream); }
.mag-hint { margin-right: auto; font: italic 400 clamp(17px, 1.5vw, 20px)/1.2 var(--f-serif); }
.mag-count { font: 800 13px/1 var(--f-sans); letter-spacing: 0.16em; opacity: 0.75; }
.mag-count span { opacity: 1; }
.mag-arrow { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--sun); color: var(--ink); transition: transform 0.45s var(--ease-snap), background-color 0.2s; }
.mag-arrow svg { width: 22px; height: 22px; }
.mag.is-peek .mag-arrow { transform: translateX(6px); }
@media (hover: hover) { .mag:hover .mag-arrow { transform: translateX(6px); background: var(--tang); } }
.on-touch { display: none; }
@media (hover: none) { .on-hover { display: none; } .on-touch { display: inline; } }
/* the back cover, set in type (--u is 1% of the page) */
.mag-back .mag-sheet { --u: 1cqi; container-type: inline-size; background: var(--sky-deep); }
.mag-back .mag-sheet > img { object-position: 50% 100%; }
.bc-line { position: absolute; left: 8%; right: 8%; top: 8%; font: 400 calc(var(--u) * 15.5)/0.86 var(--f-display); text-transform: uppercase; color: var(--cream); }
.bc-next { position: absolute; left: 8%; top: 37%; font: italic 500 calc(var(--u) * 3.4)/1.2 var(--f-serif); color: var(--cream); }
.bc-foot { position: absolute; left: 6%; right: 6%; bottom: 4.5%; display: flex; align-items: center; gap: 3%; font: 600 calc(var(--u) * 3.8)/1 var(--f-serif); color: var(--ink); }
.bc-foot .stripes { flex: 1; height: calc(var(--u) * 2.4); }
.mail-copy { display: grid; gap: 18px; align-content: center; }
.mail-copy .kicker { color: var(--sun); }
/* one sentence a line; NO APP NEEDED. is about 5.6em wide, so the size keeps it inside the column */
.mail-title { font-size: clamp(40px, 5.4vw, 84px); }
.mail-title span { display: block; white-space: nowrap; }
/* the two promises, printed on cream card like the coupon: a title and a line */
.mail-points { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.mail-points li { padding: 18px 22px 20px; border-radius: 3px; background: var(--paper) url(../img/grain-dark.png); color: var(--ink); box-shadow: 0 16px 24px -18px rgba(8, 18, 50, 0.6); }
.mail-points b { display: block; font: 400 clamp(22px, 2vw, 28px)/1 var(--f-display); text-transform: uppercase; letter-spacing: 0.01em; }
.mail-points p { margin-top: 6px; font-size: 17px; line-height: 1.4; color: var(--ink-2); }
/* the punchline, centred */
.mail-close { display: grid; justify-items: center; margin-top: clamp(70px, 9vw, 130px); text-align: center; }
.mail-close p { max-width: 19em; font: 500 clamp(28px, 3.6vw, 54px)/1.12 var(--f-serif); letter-spacing: -0.02em; text-wrap: balance; }
.mail-close .dim { color: rgba(246, 238, 223, 0.62); }
.mail-close .hi.lit { color: var(--ink); }
@media (min-width: 1000px) { .mail-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---- join the club: a red page, the prototype poster and a coupon to clip ---------------------- */
.join { padding: var(--sec) 0; background: var(--brick) url(../img/grain-light.png); color: var(--cream); }
/* the poster always sits beside the words, never on its own row: on a phone it's small, next to
   the heading, with the coupon full width underneath; from tablets up it takes the left column */
.join-grid { display: grid; grid-template-columns: minmax(0, 1fr) 36%; grid-template-areas: 'head poster' 'action action'; gap: 30px 18px; align-items: center; }
.join-head { grid-area: head; display: grid; gap: 14px; align-content: center; }
.join-head .kicker { color: var(--sun); }
.join-action { grid-area: action; align-self: start; }
/* the prototype poster, on a cream paper border like the hero's, pinned to the wall */
.join-poster { grid-area: poster; margin: 0; justify-self: end; width: 100%; padding: clamp(5px, 1.2vw, 16px); background: var(--paper) url(../img/grain-dark.png); transform: rotate(-2deg); box-shadow: 0 30px 40px -24px rgba(60, 10, 0, 0.65); }
.join-poster img { width: 100%; height: auto; }
@media (max-width: 699px) {
  .join-head .title { font-size: clamp(40px, 12vw, 56px); }
  .join-head .lede { font-size: 17px; }
}
@media (min-width: 700px) {
  .join-grid { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); grid-template-areas: 'poster head' 'poster action'; column-gap: clamp(32px, 6vw, 100px); row-gap: clamp(26px, 3vw, 44px); }
  .join-poster { justify-self: center; width: min(100%, 460px); }
}

/* the coupon: clip it, fill it in */
.coupon { position: relative; display: grid; gap: 18px; max-width: 520px; padding: clamp(22px, 3vw, 34px); background: var(--paper) url(../img/grain-dark.png); color: var(--ink); outline: 2px dashed rgba(246, 238, 223, 0.9); outline-offset: 9px; }
.coupon-cut { position: absolute; top: -22px; left: 18px; font-size: 22px; line-height: 1; color: var(--cream); transform: rotate(90deg); }
.coupon-head { font: 400 clamp(30px, 3vw, 42px)/0.95 var(--f-display); text-transform: uppercase; }
.field { display: grid; gap: 6px; }
.field label { font: 800 11.5px/1 var(--f-sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.field input { width: 100%; height: 48px; padding: 0 2px; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); font: 500 22px var(--f-serif); }
.field input::placeholder { color: rgba(30, 26, 27, 0.32); }
.field input:focus { outline: none; border-bottom-color: var(--red); box-shadow: 0 2px 0 var(--red); }
.field input[aria-invalid='true'] { border-bottom-color: var(--red); }
.field-error { font: 600 14px/1.3 var(--f-sans); color: var(--red); }
.coupon-submit { justify-self: start; margin-top: 4px; }
.coupon-submit:hover { background: var(--sky); }
/* the price: one quiet line under the lede, the figure in sun */
.join-price { max-width: 32em; font: 400 clamp(16px, 1.3vw, 18px)/1.45 var(--f-serif); text-wrap: pretty; }
.join-price b { font-weight: 700; color: var(--sun); }
.join-done { display: grid; gap: 14px; justify-items: start; }
.join-done-title { font-size: clamp(44px, 5vw, 80px); }
.join-done-btn { margin-top: 6px; background: var(--cream); color: var(--ink); }
.join-done-btn:hover { background: var(--sun); }

/* ---- lock in your spot: a card that opens after the coupon. Three questions, one at a time (tap an
   answer and the next one comes up), then the founding-member invites ------------------------------ */
.lock { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: clamp(24px, 4vw, 40px); border: 0; overflow: auto; background: var(--paper) url(../img/grain-dark.png); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(40, 8, 0, 0.7); }
.lock::backdrop { background: rgba(60, 14, 10, 0.72); }
.lock[open] { animation: lock-in 0.45s var(--ease-out); }
@keyframes lock-in { from { opacity: 0; transform: translateY(24px) rotate(-1deg); } }
:root:has(.lock[open]) { overflow: hidden; }
.lock-x { all: unset; position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; color: var(--ink-2); }
.lock-x:hover { background: var(--paper-2); color: var(--ink); }
.lock-x:focus-visible { outline: 3px solid var(--tang); }
.lock-x svg { width: 22px; height: 22px; }
.lock-quiz, .lock-done { display: grid; gap: 16px; }
.lock-done[hidden], .lock-quiz[hidden] { display: none; }
.lock-kicker { color: var(--brick); padding-right: 44px; }
.lock-title { font: 400 clamp(32px, 4.4vw, 46px)/0.95 var(--f-display); text-transform: uppercase; text-wrap: balance; padding-right: 30px; }
.lock-progress { height: 6px; border-radius: 3px; background: var(--paper-2); overflow: hidden; }
.lock-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sun), var(--tang)); transition: width 0.4s var(--ease-out); }
.lock-q { display: none; margin: 6px 0 0; padding: 0; border: 0; min-width: 0; }
.lock-q.is-on { display: block; animation: q-in 0.35s var(--ease-out); }
@keyframes q-in { from { opacity: 0; transform: translateX(18px); } }
.lock-q legend { padding: 0; margin-bottom: 16px; font: 500 clamp(22px, 2.4vw, 27px)/1.2 var(--f-serif); }
.lock-n { display: block; margin-bottom: 6px; font: 800 12px/1 var(--f-sans); letter-spacing: 0.16em; color: var(--ink-2); }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chips span { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); font: 700 16px/1 var(--f-sans); transition: background-color 0.15s, transform 0.3s var(--ease-snap); }
.chips label:hover span { background: var(--paper-3); }
.chips input:checked + span { background: var(--sun); transform: scale(1.04); }
.chips input:disabled { cursor: default; }
.chips input:disabled + span { opacity: 0.3; }
.chips label:has(input:disabled):hover span { background: none; }
.chips input:focus-visible + span { outline: 3px solid var(--tang); outline-offset: 3px; }
.lock-hint { display: block; margin: -6px 0 14px; font: 500 14px/1.4 var(--f-sans); color: var(--ink-2); text-wrap: pretty; }
/* ages: a tile per year, and a wide one for a grown-up */
.chips-age { gap: 8px; }
.chips-age span { justify-content: center; min-width: 52px; padding: 0 14px; }
/* a grown-up's own band: a quiet tick box under the ages, not another chip */
.lock-me { position: relative; display: inline-flex; margin-top: 16px; cursor: pointer; }
.lock-me input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.lock-me span { display: inline-flex; align-items: center; gap: 10px; font: 500 14px/1.3 var(--f-sans); color: var(--ink-2); }
.lock-me span::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--ink-2); background: no-repeat center / 12px; }
.lock-me:hover span { color: var(--ink); }
.lock-me input:checked + span { color: var(--ink); }
.lock-me input:checked + span::before { box-shadow: none; background-color: var(--ink); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23F6EEDF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lock-me input:focus-visible + span { outline: 3px solid var(--tang); outline-offset: 4px; border-radius: 4px; }
.lock-sub { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; animation: q-in 0.35s var(--ease-out); }
.lock-sub[hidden] { display: none; }
.lock-sub legend { padding: 0; margin-bottom: 12px; font: 500 clamp(19px, 2vw, 22px)/1.25 var(--f-serif); }
.lock-next { display: inline-flex; margin-top: 22px; }
.lock-next:disabled { opacity: 0.3; pointer-events: none; }
/* somewhere else: a country picker opens under the chips */
.lock-other { display: grid; gap: 4px; margin-top: 20px; animation: q-in 0.35s var(--ease-out); }
.lock-other[hidden] { display: none; }
.lock-other .lock-hint { margin: 0 0 6px; }
.lock-other select { width: 100%; height: 52px; padding: 0 44px 0 18px; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%231E1A1B' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 20px; color: var(--ink); font: 600 16px var(--f-sans); appearance: none; cursor: pointer; }
.lock-other select:focus-visible { outline: 3px solid var(--tang); outline-offset: 2px; }
.lock-other .lock-next { justify-self: start; margin-top: 14px; }
.lock-back { all: unset; justify-self: start; cursor: pointer; font: 700 14px/1 var(--f-sans); color: var(--ink-2); padding: 8px 0; }
.lock-back:hover { color: var(--ink); }
.lock-back:focus-visible { outline: 3px solid var(--tang); outline-offset: 3px; }
.lock-done .lock-title { font-size: clamp(36px, 5vw, 54px); }
.lock-lede { font: 500 clamp(20px, 2vw, 24px)/1.3 var(--f-serif); }
.lock-copy { font: 400 17px/1.5 var(--f-serif); color: var(--ink-2); text-wrap: pretty; }
.lock-copy b { color: var(--ink); }
.lock-error { margin-top: 12px; }
/* the my-spot page (spot.html): the same card as the popup's thank-you, on the join section's red */
.spot-page { min-height: 100svh; background: var(--brick) url(../img/grain-light.png); }
.spot-page .nav-logo img { filter: brightness(0) invert(0.95); }
.spot-main { display: grid; place-items: center; min-height: 100svh; padding: calc(var(--nav-h) + 20px) 12px 40px; }
.spot-wait { font: italic 400 20px var(--f-serif); color: var(--cream); }
.spot-card { display: grid; gap: 16px; width: min(560px, 100%); padding: clamp(24px, 4vw, 40px); background: var(--paper) url(../img/grain-dark.png); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(40, 8, 0, 0.7); }
.spot-card > .btn { justify-self: start; }
.spot-fine { font: 500 13px/1.45 var(--f-sans); color: var(--ink-2); }
.spot-find { display: grid; gap: 18px; justify-items: start; }
.spot-find .field { width: 100%; }
/* the spot: place in line, points, perk, three numbers on a ruled card */
.spot-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 4px; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.spot-stats p { display: grid; gap: 6px; padding: 14px 4px 12px; text-align: center; }
.spot-stats p + p { border-left: 1px dashed rgba(30, 26, 27, 0.35); }
.spot-stats b { font: 400 clamp(30px, 4.4vw, 44px)/0.9 var(--f-display); letter-spacing: 0.01em; }
.spot-stats p:first-child b { color: var(--brick); }
.spot-stats span { font: 800 10.5px/1 var(--f-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.spot-link { justify-self: start; font: 700 14px/1 var(--f-sans); color: var(--ink-2); text-underline-offset: 3px; }
.spot-link:hover { color: var(--ink); }
.invite { display: flex; gap: 8px; margin-top: 6px; }
.invite input { flex: 1; min-width: 0; height: 52px; padding: 0 16px; border: 2px dashed var(--ink); border-radius: 999px; background: var(--paper-3); color: var(--ink); font: 600 15px var(--f-sans); }
.invite input:focus { outline: 3px solid var(--tang); outline-offset: 2px; }
.invite-copy { flex: none; }
.invite-copy.is-copied { background: var(--teal); }
.share { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border-radius: 999px; box-shadow: inset 0 0 0 2px var(--ink); cursor: pointer; font: 800 13px/1 var(--f-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); }
.share-btn[hidden] { display: none; }
.share-btn:hover { background: var(--ink); color: var(--cream); }
.share-btn:focus-visible { outline: 3px solid var(--tang); outline-offset: 3px; }
@media (max-width: 600px) {
  .lock { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; padding: 26px 18px calc(env(safe-area-inset-bottom, 0px) + 22px); }
  .lock[open] { animation-name: lock-up; }
  @keyframes lock-up { from { transform: translateY(100%); } }
  .chips span { min-height: 46px; padding: 0 16px; font-size: 15px; }
  .invite { flex-direction: column; }
  .invite input { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .lock[open], .lock-q.is-on { animation: none !important; } }

/* ---- footer: the logo, big, and the small print ------------------------------------------------------ */
.foot { padding: var(--sec) 0 calc(env(safe-area-inset-bottom, 0px) + 26px); }
.foot-logo { width: 100%; height: auto; }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 28px; margin-top: clamp(20px, 2.4vw, 32px); font: 700 11.5px/1.4 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.foot-legal a { text-decoration: none; }
.foot-legal a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}