/* The Unsaid Things — pre-order page.
   Concept: Hayley's scrapbook over Mags's printed words. Mags = print (Gloock, Newsreader).
   Hayley = the edit layer (Caveat Brush in pink pen, stickers, tape, the editor pause). */

@font-face { font-family: 'Archivo Black'; font-weight: 400; font-display: swap; src: url(../fonts/archivo-black-400.woff2) format('woff2'); }
@font-face { font-family: 'Caveat Brush'; font-weight: 400; font-display: swap; src: url(../fonts/caveat-brush-400.woff2) format('woff2'); }
@font-face { font-family: 'Gloock'; font-weight: 400; font-display: swap; src: url(../fonts/gloock-400.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/newsreader-400.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/newsreader-600.woff2) format('woff2'); }
@font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/newsreader-400-italic.woff2) format('woff2'); }

:root {
  --paper: #f3ecdf;
  --paper-hi: #fbf8f1;
  --kraft: #d9c7a6;
  --ink: #1e1c1a;
  --ink-2: #4b4640;
  --cobalt: #2346b8;
  --cobalt-deep: #162f86;
  --pink: #f7268a;          /* Hayley's pause sticker */
  --pink-ink: #c2006a;      /* Hayley's pen: readable pink for text */
  --red: #e0141f;
  --red-deep: #a0141c;    /* the serious FAQ: dark red, 6.8:1 on the paper */
  --gold: #f2b010;
  --hl: rgba(255, 224, 58, .72);
  --line: #c3d3ee;
  --margin: #e99494;

  --f-display: 'Gloock', 'Newsreader', Georgia, serif;
  --f-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-hand: 'Caveat Brush', 'Bradley Hand', 'Comic Sans MS', cursive;
  --f-label: 'Archivo Black', 'Arial Black', Impact, sans-serif;
  --f-ui: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --f-app: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --gutter: clamp(18px, 5vw, 40px);
  --col: 36rem;
  --shadow: 0 1px 1px rgba(30, 28, 26, .08), 0 8px 16px -8px rgba(30, 28, 26, .38);

  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.1'/%3E%3C/svg%3E");
  --torn: polygon(0 100%, 0 45%, 2.5% 70%, 5% 30%, 7.5% 62%, 10% 22%, 12.5% 58%, 15% 35%, 17.5% 75%, 20% 28%, 22.5% 60%, 25% 18%, 27.5% 55%, 30% 38%, 32.5% 72%, 35% 25%, 37.5% 64%, 40% 30%, 42.5% 70%, 45% 20%, 47.5% 52%, 50% 34%, 52.5% 74%, 55% 26%, 57.5% 60%, 60% 16%, 62.5% 56%, 65% 36%, 67.5% 70%, 70% 24%, 72.5% 62%, 75% 32%, 77.5% 68%, 80% 22%, 82.5% 57%, 85% 30%, 87.5% 73%, 90% 26%, 92.5% 60%, 95% 20%, 97.5% 55%, 100% 35%, 100% 100%);
  --tape-cut: polygon(0 10%, 4% 0, 30% 6%, 60% 0, 96% 5%, 100% 0, 98% 35%, 100% 62%, 97% 100%, 70% 94%, 40% 100%, 6% 95%, 0 100%, 3% 65%, 0 38%);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1.125rem/1.5 var(--f-body);
  color: var(--ink);
  background-color: var(--paper);
  background-image: var(--noise), radial-gradient(rgba(30, 28, 26, .15) 1px, transparent 1.4px);
  background-size: 180px 180px, 22px 22px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img { max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--ink); color: #fff; font: 14px var(--f-label); border-radius: 8px; }
.skip:focus { top: 40px; }

/* ---------- Shared pieces ---------- */

.hand { font-family: var(--f-hand); color: var(--pink-ink); font-size: 1.4rem; line-height: 1.05; }
.hand--note { display: block; max-width: 19rem; margin: 0; transform: rotate(var(--r, -2deg)); }
.hand--head { font-size: 2rem; line-height: 1; color: var(--ink); margin: 0 0 14px; font-weight: 400; }

.h2 {
  font: 400 clamp(2.05rem, 8.6vw, 3.1rem)/1.02 var(--f-display);
  letter-spacing: -.01em;
  margin: 0 0 14px;
  text-wrap: balance;
}
/* Section titles: label strips cut from the same tape as "MAGS HARTLEY:" at the top, at the same size.
   Longer titles are two strips: side by side when there's room, stacked when there isn't. */
.h2--strip {
  font: 400 clamp(1.16rem, 5.68vw, 2.16rem)/1 var(--f-label);
  filter: drop-shadow(1px 2px 0 rgba(30, 28, 26, .25));
}
.h2--strip .strip { display: inline-block; margin: 0 .1em .2em 0; padding: .1em .1em .04em; white-space: nowrap; transform: rotate(var(--r, -2deg)); }
.h2--strip .strip + .strip { --r: 1deg; }

.tape {
  position: absolute;
  width: 96px; height: 26px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 7px),
    rgba(240, 228, 190, .8);
  clip-path: var(--tape-cut);
  z-index: 4;
  pointer-events: none;
}
.tape--tl { top: -11px; left: -22px; transform: rotate(-33deg); }
.tape--tr { top: -9px; right: -22px; transform: rotate(29deg); }
.tape--top { top: -14px; left: 50%; width: 130px; transform: translateX(-50%) rotate(-3deg); }

.sticker {
  position: absolute;
  z-index: 5;
  width: var(--w, 84px);
  transform: rotate(var(--r, 0deg));
  filter: drop-shadow(0 3px 2px rgba(30, 28, 26, .28));
  pointer-events: none;
}
.sticker img { display: block; width: 100%; height: auto; }
.js .sticker[data-reveal] { opacity: 0; transform: rotate(var(--r, 0deg)) scale(1.45); }
.js .sticker.in {
  opacity: 1;
  transform: rotate(var(--r, 0deg)) scale(1);
  transition: transform .4s cubic-bezier(.2, 1.7, .4, 1), opacity .1s;
}
/* hand-drawn line boil, like the stickers in the videos */
/* slow wobble; site.js gives each sticker its own pace and a random start point so they never move in step */
.sticker.in img, .no-js .sticker img { animation: boil var(--boil-dur, 1.3s) steps(1) var(--boil-delay, 0s) infinite; }
@keyframes boil-soft {
  0%   { transform: translate(0, 0) rotate(0); }
  33%  { transform: translate(.4px, -.4px) rotate(.5deg); }
  66%  { transform: translate(-.4px, .3px) rotate(-.45deg); }
}
@keyframes boil {
  0%   { transform: translate(0, 0) rotate(0); }
  33%  { transform: translate(.6px, -.6px) rotate(.8deg); }
  66%  { transform: translate(-.6px, .5px) rotate(-.7deg); }
}

.btn {
  display: flex; align-items: center; justify-content: center; gap: .55em;
  width: 100%; min-height: 60px;
  padding: 14px 22px;
  background: var(--cobalt);
  color: #fff;
  font: 1.22rem/1 var(--f-label);
  letter-spacing: .01em;
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 16px;
  /* white die-cut edge + soft lift, the same treatment as the stickers */
  box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(30, 28, 26, .12), 0 12px 18px -8px rgba(30, 28, 26, .5);
  transform: rotate(-1.5deg);
  transition: transform .2s cubic-bezier(.2, 1.6, .4, 1), box-shadow .2s, background-color .2s;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.btn::after { content: "→"; font: 600 1.25em/1 var(--f-body); transition: transform .2s; }
.btn:hover { background: var(--cobalt-deep); transform: rotate(0deg) scale(1.025); }
.btn:hover::after { transform: translateX(4px); }
.btn:active { transform: rotate(0deg) scale(.97); box-shadow: 0 0 0 6px #fff, 0 0 0 7px rgba(30, 28, 26, .12), 0 4px 8px -4px rgba(30, 28, 26, .5); }
.btn--small { width: auto; min-height: 44px; padding: 9px 16px; font-size: 1rem; border-width: 2.5px; border-radius: 12px; box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(30, 28, 26, .14); transform: rotate(-2deg); }

.hl {
  background: linear-gradient(100deg, transparent .15em, var(--hl) .15em calc(100% - .15em), transparent calc(100% - .15em)) no-repeat 0 88% / 100% 60%;
  padding: 0 .08em;
}
.js .hl { background-size: 0% 60%; transition: background-size 1s cubic-bezier(.3, .7, .2, 1) .25s; }
.js .hl.in { background-size: 100% 60%; }

/* ---------- Editor title bar ---------- */

.editbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  height: 30px; padding: 0 12px;
  background: var(--ink); color: #ede6d8;
  font: 500 11px/1 var(--f-ui);
  letter-spacing: .02em;
}
.editbar__dots { display: flex; gap: 5px; }
.editbar__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); }
.editbar__dots i:nth-child(2) { background: var(--gold); }
.editbar__dots i:nth-child(3) { background: var(--cobalt); }
.editbar__file { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: .8; }
.editbar__tc { color: var(--pink); font-variant-numeric: tabular-nums; }
.editbar__tc::before { content: "▶ "; font-size: 9px; }
.editbar__scrub { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--progress, 0) * 100%); background: var(--pink); }

/* ---------- Hero ---------- */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px;
  max-width: 72rem; margin: 0 auto;
  padding: 28px var(--gutter) 48px;
}

.ransom {
  position: relative; /* holds Hayley's side-eye beside "Lip" */
  margin: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: .05em;
  font-size: clamp(2.9rem, 14.2vw, 5.4rem);
  font-weight: 400; line-height: 1;
}
.ransom__line { display: flex; align-items: center; white-space: nowrap; filter: drop-shadow(1px 2px 0 rgba(30, 28, 26, .25)); }
.ransom__line--strip { font-size: .4em; margin-bottom: .14em; }
.strip { background: var(--ink); color: var(--paper-hi); font-family: var(--f-label); letter-spacing: .04em; text-transform: uppercase; padding: .32em .5em .26em; clip-path: polygon(0 6%, 99% 0, 100% 92%, 1% 100%); }
.ch {
  display: inline-block;
  padding: .1em .1em .04em;
  margin-right: .035em;
  transform: translateY(var(--y, 0)) rotate(var(--r, 0deg));
  animation: chip-in .5s cubic-bezier(.2, 1.5, .35, 1) both;
  animation-delay: calc(120ms + var(--i) * 45ms);
}
.v1 { background: var(--paper-hi); font-family: var(--f-display); clip-path: polygon(3% 0, 100% 4%, 97% 100%, 0 95%); }
.v2 { background: var(--cobalt); color: var(--paper-hi); font-family: var(--f-label); font-size: .84em; padding-block: .17em .1em; clip-path: polygon(0 3%, 96% 0, 100% 96%, 4% 100%); }
.v3 { background: var(--pink); color: #fff; font-family: var(--f-body); font-style: italic; clip-path: polygon(5% 2%, 100% 0, 95% 100%, 0 97%); }
.v4 { background: var(--ink); color: var(--gold); font-family: var(--f-label); font-size: .82em; padding-block: .18em .1em; clip-path: polygon(0 0, 100% 5%, 96% 97%, 3% 100%); }
.v5 { background: var(--gold); font-family: var(--f-body); font-weight: 600; clip-path: polygon(2% 4%, 97% 0, 100% 100%, 0 96%); }
.v6 { background: #fff; color: var(--red); font-family: var(--f-label); font-size: .84em; padding-block: .17em .1em; clip-path: polygon(4% 0, 100% 2%, 96% 100%, 0 97%); }
.v7 { color: var(--pink-ink); font-family: var(--f-hand); font-size: 1.12em; padding-inline: .06em; }
/* the red L on white: a learner plate */
.lplate { display: inline-grid; place-items: center; width: 1.32em; height: 1.32em; padding: .06em 0 0; border-radius: .12em; clip-path: none; box-shadow: inset 0 0 0 .035em rgba(30, 28, 26, .14); }

.hero__sub { margin: 0; font-size: 1.3rem; font-weight: 600; line-height: 1.3; white-space: nowrap; animation: rise .5s ease .45s both; }
/* Hayley's side-eye: right-justified beside the short "Lip" line and centred on it
   (the row is the L plate's 1.32em tall; the sticker is 0.7 as tall as it is wide) */
.sticker--sub { --w: 74px; right: 2px; bottom: calc((1.32em - var(--w) * .7) / 2); animation: slap .4s cubic-bezier(.2, 1.7, .4, 1) 1.2s both; }
@media (max-width: 359px) { .sticker--sub { --w: 56px; } } /* after the base rule, or it never applies */
.sticker--sub img { animation: boil var(--boil-dur, 1.3s) steps(1) var(--boil-delay, 0s) infinite; }

.polaroid {
  position: relative;
  width: min(80%, 330px);
  margin: 8px auto 4px;
  padding: 10px 10px 0;
  background: #fff;
  box-shadow: var(--shadow), 0 20px 34px -20px rgba(30, 28, 26, .5);
  transform: rotate(var(--r, 0deg));
  animation: drop-in .75s cubic-bezier(.2, 1.3, .35, 1) .3s both;
}
.polaroid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.polaroid figcaption { padding: 10px 6px 14px; text-align: center; font: 1.35rem/1.05 var(--f-hand); color: var(--pink-ink); }


.coupon-wrap {
  position: relative;
  width: calc(100% - 76px); /* leaves a margin for Hayley's notes */
  max-width: 30rem;
  margin-top: 16px;
  transform: rotate(-1deg);
  animation: rise .6s ease .7s both;
  scroll-margin-top: 50px;
}
.coupon-wrap .tape--tl { top: -10px; left: -12px; }
.coupon-wrap .tape--tr { top: -9px; right: -12px; }
.coupon { position: relative; z-index: 0; isolation: isolate; padding: 30px 20px 18px; }
/* the cut-out paper is its own layer, so notes can sit outside the coupon */
.coupon__paper {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(30, 28, 26, .14)) drop-shadow(0 14px 16px rgba(30, 28, 26, .2));
}
.coupon__paper::before {
  content: ""; position: absolute; inset: 0;
  background-color: #fffaf0;
  background-image: radial-gradient(rgba(30, 28, 26, .07) .8px, transparent 1px);
  background-size: 4px 4px;
  clip-path: polygon(.5% .9%, 22% 0, 48% .7%, 76% .1%, 99.5% .8%, 100% 28%, 99.4% 61%, 100% 99.2%, 72% 100%, 43% 99.3%, .3% 100%, 0 72%, .7% 38%);
}
.coupon::before { content: ""; position: absolute; inset: 8px; border: 2px dashed rgba(30, 28, 26, .5); pointer-events: none; }
.coupon__scissors { position: absolute; top: 0; left: 64px; width: 30px; height: 18px; padding: 0 3px; background: #fffaf0; color: var(--ink); }
.coupon__kicker { display: inline-block; margin: 0 0 16px; padding: 6px 10px 5px; background: var(--red); color: #fff; font: 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-1deg); }
.coupon__lines { margin: 4px 0 14px; padding: 0; list-style: none; }
.coupon__lines li:first-child { padding-right: 44px; }
.coupon__lines li { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 9px; font-size: 1rem; line-height: 1.38; }
.box { position: relative; flex: none; width: 20px; height: 20px; margin-top: 2px; border: 2px solid var(--ink); }
.box::after {
  content: ""; position: absolute; left: -2px; top: -10px; width: 28px; height: 28px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 17c3 2 6 6 8 10C15 18 21 9 29 3' fill='none' stroke='%23C2006A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.coupon__prices { margin: 0 0 16px; padding: 2px 12px; background: #fff; border: 2px solid var(--ink); }
.price-row { position: relative; display: flex; align-items: flex-end; margin: 0; padding: 9px 0; font-size: .95rem; line-height: 1.25; }
.price-row + .price-row { border-top: 1.5px dashed rgba(30, 28, 26, .3); }
.price-row__dots { flex: 1 1 10px; min-width: 10px; margin: 0 6px .3em; border-bottom: 2px dotted rgba(30, 28, 26, .45); }
.price-row__amt { flex: none; font: 1.5rem/1 var(--f-label); font-weight: 400; }
.price-row--pre { margin: 0 -12px; padding: 11px 12px 10px; background: #ffe24a; }
.price-row--pre .price-row__label { font: 12px/1.25 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.price-row--pre .price-row__dots { border-bottom-color: rgba(224, 20, 31, .5); }
.price-row--pre .price-row__amt { color: var(--red); font-size: 2.05rem; }
.price-row--full .price-row__label, .price-row--full .price-row__amt { color: var(--ink-2); }
.price-row--full .price-row__amt { font-size: 1.3rem; }
.price-row--pre .usd { left: calc(100% + 28px); } /* this row bleeds 12px further, so 12px less to reach the paper edge */
/* Hayley's dollar note: outside the coupon, an arrow pointing in at the £15, level with its row
   (flag above, eagle hanging below beside "Price after launch") */
/* 34px (row padding + box border + coupon padding) reaches the paper edge; +6px so the arrow tip lands on the page, not the coupon */
.usd { position: absolute; left: calc(100% + 40px); bottom: calc(50% - 13px); display: flex; align-items: flex-end; transform: rotate(-3deg); transform-origin: 0 100%; pointer-events: none; }
.usd__arrow { flex: none; width: 30px; height: 14px; margin-bottom: 6px; fill: none; stroke: var(--pink-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.usd__note { display: flex; flex-direction: column; align-items: center; }
.usd__eagle { width: 56px; height: 45px; margin-bottom: -3px; fill: none; stroke: var(--pink-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.usd__flag { width: 38px; height: 25px; margin: 0 0 3px 6px; translate: -8px -5px; rotate: -7deg; fill: none; stroke: var(--pink-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Hayley's hand-drawn "around" over each dollar amount (dollars are approximate: buyers pay in pounds).
   The -6px right margin keeps it from widening the note, so nothing shifts on small phones. */
.usd__price { display: flex; flex-direction: column; align-items: flex-start; }
.usd__around { display: block; width: 44px; height: 15px; margin: 0 -6px 3px -2px; rotate: -4deg; fill: none; stroke: var(--pink-ink); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
/* the eagle hangs under "around $20" (the user's layout: flag, $20, eagle; the "$++" note was dropped) */
.usd__note { position: relative; }
.usd__eagle--under { position: absolute; top: 100%; left: 50%; margin: 2px 0 0; translate: calc(-46% - 6px) 1px; rotate: 5deg; } /* off-line and tilted, like a doodle; clear of the screen edge at 320px */
.usd__eye { fill: var(--pink-ink); stroke: none; }
.usd__amt { font: 1.5rem/1 var(--f-hand); color: var(--pink-ink); white-space: nowrap; }
.coupon__fields {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 8px 10px;
  margin: 0 0 8px; padding: 2px 0;
  font: 11px/1 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.coupon__fields i { display: block; margin-bottom: 1px; border-bottom: 1.5px dotted var(--ink-2); }
.coupon__scribble { position: absolute; left: -4px; top: -6px; width: calc(100% + 8px); height: calc(100% + 12px); overflow: visible; fill: none; stroke: var(--pink-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.coupon__scribble path { vector-effect: non-scaling-stroke; }
.js .coupon__scribble path { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; transition: stroke-dashoffset .9s ease-out .3s; } /* gap longer than the line: no round-cap dot before it draws */
.js .coupon__fields.in .coupon__scribble path { stroke-dashoffset: 0; }
/* Hayley's arrow down to the button: the shaft ends straight down, so both sides of the head show */
.coupon__arrow { display: block; width: 40px; height: 47px; margin: 4px 30px 13px auto; rotate: -4deg; overflow: visible; fill: none; stroke: var(--pink-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
/* she draws it once the zigzag has crossed out the form (that ends 1.2s after the reveal): the line, then the head */
.js .coupon__arrow path { stroke-dasharray: 1 2; stroke-dashoffset: 1.01; }
.js .coupon__fields.in ~ .coupon__arrow path { stroke-dashoffset: 0; }
.js .coupon__fields.in ~ .coupon__arrow .coupon__arrow-shaft { transition: stroke-dashoffset .45s ease-in-out 1.25s; }
.js .coupon__fields.in ~ .coupon__arrow .coupon__arrow-head { transition: stroke-dashoffset .2s ease-out 1.7s; }
.coupon .btn { padding-inline: 14px; font-size: 1.08rem; white-space: nowrap; }
.coupon__terms { margin: 16px 0 0; font-size: 1rem; text-align: center; }
/* "Read the FAQs" link: CTA cobalt + CTA font, underlined */
.coupon__terms a {
  display: inline-block;
  color: var(--cobalt);
  font: 1.02rem/1.2 var(--f-label);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  transition: color .2s;
}
.coupon__terms a:hover { color: var(--cobalt-deep); }
/* sale countdown (real deadline: midnight 1 Dec 2026, UK) */
.countdown { margin: 14px 0 2px; padding-top: 12px; border-top: 2px dashed rgba(30, 28, 26, .35); text-align: center; }
.countdown__label { margin: 0 0 9px; font: 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.countdown__tiles { display: none; justify-content: center; gap: 7px; margin: 0 0 9px; }
.js .countdown__tiles { display: flex; }
.countdown__tile { display: grid; justify-items: center; gap: 4px; min-width: 52px; padding: 8px 4px 6px; background: var(--ink); color: var(--paper-hi); transform: rotate(var(--r, 0deg)); clip-path: polygon(2% 3%, 98% 0, 100% 96%, 0 100%); }
.countdown__tile:nth-child(1) { --r: -2deg; color: var(--gold); }
.countdown__tile:nth-child(2) { --r: 1.5deg; }
.countdown__tile:nth-child(3) { --r: -1deg; }
.countdown__tile:nth-child(4) { --r: 2deg; background: var(--red); }
.countdown__tile b { display: inline-block; min-width: 2ch; font: 1.45rem/1 var(--f-label); font-weight: 400; text-align: center; }
.countdown__tile i { font: 9px/1 var(--f-label); font-style: normal; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.countdown__static { margin: 0; font: 700 .88rem/1.35 var(--f-body); color: var(--ink); text-wrap: balance; }
.countdown__over { display: none; margin: 0; font: 600 1rem/1.3 var(--f-body); }
.countdown.is-over .countdown__label, .countdown.is-over .countdown__tiles, .countdown.is-over .countdown__static { display: none; }
.countdown.is-over .countdown__over { display: block; }

/* magazine price flash */
.flash {
  position: absolute; z-index: 6; top: -14px; right: 6px;
  display: grid; place-content: center; justify-items: center;
  width: 92px; height: 92px; margin: 0;
  background: var(--red); color: #fff;
  font: 11px/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
  clip-path: polygon(50.0% 0.0%, 59.1% 10.0%, 71.7% 5.0%, 75.6% 17.9%, 89.1% 18.8%, 86.9% 32.2%, 98.7% 38.9%, 91.0% 50.0%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 75.6% 82.1%, 71.7% 95.0%, 59.1% 90.0%, 50.0% 100.0%, 40.9% 90.0%, 28.3% 95.0%, 24.4% 82.1%, 10.9% 81.2%, 13.1% 67.8%, 1.3% 61.1%, 9.0% 50.0%, 1.3% 38.9%, 13.1% 32.2%, 10.9% 18.8%, 24.4% 17.9%, 28.3% 5.0%, 40.9% 10.0%);
  transform: rotate(12deg);
  animation: flash-in .5s cubic-bezier(.2, 1.7, .4, 1) 1.1s both;
}
.flash b { display: block; font: 1.85rem/.9 var(--f-label); font-weight: 400; letter-spacing: -.02em; }

/* ---------- The editor pause ---------- */

.cut { padding: 8px var(--gutter) 52px; }
.viewer { max-width: 25rem; margin: 0 auto; }
.viewer__frame {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #000;
  border: 2.5px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
}
/* Default (reset) state: Hayley's paused frame. Greyscale, pink pause sticker, no captions. */
.viewer__frame > img:first-child { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05) brightness(.9); }
.viewer__play {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%; padding: 0;
  background: none; border: 0; border-radius: 15px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.viewer__play:focus-visible { outline: 3px solid var(--pink); outline-offset: -6px; }
.viewer__tag {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  padding: 6px 10px 5px;
  background: var(--pink); color: #fff;
  font: 13px/1 var(--f-label);
  border-radius: 6px;
  transform: rotate(-3deg);
  pointer-events: none;
}
.viewer__pause, .viewer__resume {
  position: absolute; left: 80%; top: 33%; z-index: 1;
  width: 26%;
  translate: -50% -50%;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35));
  pointer-events: none;
  transition: scale .3s cubic-bezier(.2, 1.7, .4, 1), opacity .12s;
  animation: boil-soft 1.2s steps(1) infinite; /* constant, slow, subtle hand-drawn jitter */
}
.viewer__resume { scale: .5; opacity: 0; }
/* while her note plays the sticker flips to play; the frame stays greyscale */
.viewer.is-playing .viewer__pause { scale: .5; opacity: 0; }
.viewer.is-playing .viewer__resume { scale: 1; opacity: 1; }
.viewer__sound {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  display: grid; place-items: center;
  width: 58px; height: 48px; padding: 6px;
  background: rgba(255, 255, 255, .94);
  border: 2.5px solid var(--ink); border-radius: 12px;
  box-shadow: 0 3px 0 rgba(30, 28, 26, .55);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transform: rotate(3deg);
  transition: transform .15s;
}
.viewer__sound:hover { transform: rotate(0) scale(1.05); }
.viewer__sound img { grid-area: 1 / 1; width: 100%; height: auto; }
.viewer__sound-off { visibility: hidden; }
.viewer__sound[aria-pressed="false"] .viewer__sound-on { visibility: hidden; }
.viewer__sound[aria-pressed="false"] .viewer__sound-off { visibility: visible; }
.cap {
  position: absolute; left: 6%; right: 6%; bottom: 6%; z-index: 1;
  margin: 0;
  text-align: center; text-wrap: balance;
  font: 1.12rem/1.24 var(--f-label);
  color: #fff;
  text-shadow: 0 2px 0 #000, 2px 0 0 #000, -2px 0 0 #000, 0 -2px 0 #000, 2px 2px 0 #000, -2px 2px 0 #000, 2px -2px 0 #000, -2px -2px 0 #000, 0 5px 10px rgba(0, 0, 0, .45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
}
.viewer.is-playing .cap { opacity: 1; }
.viewer.is-ending .cap { opacity: 0; }
/* one phrase on screen at a time, like the videos */
.cap__page { display: none; }
.cap__page.is-current { display: inline; }
.cap__w { transition: color .08s; }
.cap__w.on { color: var(--pink); }
/* Hayley's "click to play" note under the frame, arrow pointing up at it */
.viewer__hint {
  position: relative;
  width: max-content; margin: 38px 18px 0 auto; padding-left: 40px;
  font-size: 1.5rem; transform: rotate(-3deg);
  transition: opacity .2s;
}
.viewer__hint::before {
  content: ""; position: absolute; left: 0; top: -22px; width: 34px; height: 40px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M34 44C14 42 6 28 10 6M10 6l-6 10M10 6l9 8' fill='none' stroke='%23C2006A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.viewer__hint-tap { display: none; }
@media (hover: none) and (pointer: coarse) {
  .viewer__hint-click { display: none; }
  .viewer__hint-tap { display: inline; }
}
.viewer.is-playing .viewer__hint { opacity: 0; }
.no-js .viewer__hint, .no-js .viewer__play, .no-js .viewer__sound { display: none; }

/* ---------- Social links (under Hayley's note, and on the order confirmation page) ---------- */

/* paper tags with an ink edge and hard shadow, like the sound button; hand-drawn pink icons, not the brands' logos */
.socials { max-width: 25rem; margin: 26px auto 0; }
.socials__note { margin: 0 0 10px; font-size: 1.35rem; text-wrap: balance; transform: rotate(-2deg); }
.socials__list { display: flex; flex-wrap: wrap; gap: 10px 8px; margin: 0; padding: 0; list-style: none; }
.socials__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 11px 8px 9px;
  background: var(--paper-hi); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  font: 13px/1 var(--f-label); letter-spacing: .01em; text-decoration: none; /* the brands' own spelling: TikTok, YouTube */
  transform: rotate(var(--r, -1.5deg));
  transition: transform .15s, box-shadow .15s;
}
.socials__list li:nth-child(2) .socials__link { --r: 1deg; }
.socials__list li:nth-child(3) .socials__link { --r: -.5deg; }
.socials__link:hover { transform: rotate(0) translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.socials__icon { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--pink-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.socials--big .socials__link { min-height: 52px; padding: 11px 16px 11px 12px; gap: 8px; font-size: 15px; }
.socials--big .socials__icon { width: 24px; height: 24px; }

/* ---------- How Mags works ---------- */

.sample { position: relative; max-width: var(--col); margin: 0 auto; padding: 20px var(--gutter) 56px; }
.lede { margin: 0 0 28px; font-size: 1.2rem; line-height: 1.5; }

/* comments sent in to the show: TikTok reply bubbles, scattered like screenshots */
.comments { list-style: none; margin: 0; padding: 0; }
.reply {
  position: relative;
  width: fit-content;
  max-width: min(88%, 22rem);
  margin: 0 0 18px;
  padding: 10px 14px 12px;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 10px 20px -12px rgba(0, 0, 0, .4);
  font-family: var(--f-app);
  transform: rotate(var(--r, -1.2deg));
}
.reply--l { margin-right: auto; --r: -1.4deg; }
.reply--r { margin-left: auto; --r: 1.2deg; }
.reply:nth-child(3) { --r: -.6deg; }
.reply:nth-child(4) { --r: 1.8deg; }
.reply:nth-child(6) { --r: .7deg; }
/* each bubble arrives as you scroll to it, sliding in from its own side like a chat message */
.js .comments .reply { opacity: 0; transform: translate(var(--from-x, 0), 26px) rotate(var(--r)) scale(.92); transition: opacity .4s ease, transform .55s cubic-bezier(.2, 1.35, .4, 1); }
.js .comments .reply--l { --from-x: -28px; }
.js .comments .reply--r { --from-x: 28px; }
.js .comments .reply.in { opacity: 1; transform: rotate(var(--r)); }
.reply::after {
  content: ""; position: absolute; left: 18px; bottom: -7px;
  width: 16px; height: 16px; background: #fff;
  transform: rotate(45deg); border-radius: 2px; z-index: -1;
}
.reply__head { display: flex; align-items: center; gap: 8px; margin: 0 0 5px; font-size: 12.5px; color: #8a8b91; }
.reply__avatar { position: relative; flex: none; width: 22px; height: 22px; overflow: hidden; border-radius: 50%; background: #d6d7dc; }
.reply__avatar::before { content: ""; position: absolute; left: 7px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: #f2f2f5; }
.reply__avatar::after { content: ""; position: absolute; left: 3px; top: 14px; width: 16px; height: 12px; border-radius: 50%; background: #f2f2f5; }
.reply__text { margin: 0; font-size: 15.5px; line-height: 1.35; color: #161823; }


/* ---------- Contents (notebook page) ---------- */

.contents { padding: 34px var(--gutter) 64px; }
.notebook {
  position: relative;
  max-width: 40rem; margin: 0 auto;
  padding: 2.6rem 18px 1.6rem 64px;
  background-color: var(--paper-hi);
  background-image: linear-gradient(90deg, transparent 46px, var(--margin) 46px 48px, transparent 48px);
  box-shadow: var(--shadow), 0 26px 44px -26px rgba(30, 28, 26, .45);
  transform: rotate(.5deg);
}
.notebook::before {
  content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px;
  background: var(--paper-hi);
  clip-path: var(--torn);
}
.notebook::after {
  content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 18px;
  background: radial-gradient(circle, var(--paper) 0 6px, rgba(30, 28, 26, .22) 6.5px 7.4px, transparent 7.6px) 0 34px / 18px 118px repeat-y;
}
.notebook .h2 { margin-bottom: .9rem; }

.sticky-note {
  position: relative;
  padding: 30px 20px 22px;
  background: linear-gradient(180deg, #ffec88, #ffe165);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .06), 0 16px 24px -16px rgba(30, 28, 26, .55);
  transform: rotate(-1.4deg);
}

/* Lined paper: every line of text sits on the 2rem ruled grid, like handwriting.
   --rule-y places the rules just under the baselines; the nudges line each font's baseline up with them. */
.chapters {
  --lh: 2rem;
  /* measured baselines in a 32px line: titles 24.5, descriptions 20, Hayley's title 25, her line 23.
     Everything is nudged to sit at 24px, with the rule drawn directly under it. */
  --rule-y: -7px;
  --nudge-t: -.5px;
  --nudge-q: 4px;
  --nudge-th: -1px;
  --nudge-qh: 1px;
  list-style: none; counter-reset: ch;
  margin: 0 -18px 0 -64px; padding: 0 18px var(--lh) 64px;
  line-height: var(--lh);
  background: linear-gradient(transparent calc(var(--lh) - 1px), var(--line) calc(var(--lh) - 1px)) 0 var(--rule-y) / 100% var(--lh);
}
.chapter { position: relative; padding: 0 0 var(--lh); counter-increment: ch; }
.chapter::before {
  content: counter(ch);
  position: absolute; left: -50px; top: var(--nudge-n, -2px);
  display: grid; place-items: center;
  width: 36px; height: 36px;
  font: 1.35rem/1 var(--f-hand); color: var(--pink-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'%3E%3Cpath d='M33 7C17 5 6 17 7 31s14 23 28 21 19-14 17-26S40 6 28 9c-6 2-10 5-13 9' fill='none' stroke='%23C2006A' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.chapter--bonus::before { content: "+"; }
.chapter__t { position: relative; top: var(--nudge-t, 0px); margin: 0; padding-right: 2.5rem; font: 400 1.45rem/var(--lh) var(--f-display); }
/* inline edits must not stretch a ruled line: only the 2rem strut sets line height */
.chapter__t del, .chapter__t ins, .chapter__q del { line-height: 1; }
/* Mags's original title, full size in her ink; Hayley scores it out with a hand-drawn pink pen stroke
   (slight wobble and rise, overshooting the words a touch). Each wrapped line gets its own stroke. */
.chapter__t del {
  color: var(--ink);
  text-decoration: none;
  padding: 0 .1em; margin: 0 -.1em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M1.5 7.1C28 6.3 52 7.3 81 6.2S141 5.5 166 5.2 191 4.9 198.5 4.4' fill='none' stroke='%23C2006A' stroke-width='2.8' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 var(--strike-y, 50%) / 100% .42em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.chapter__t ins { display: inline-block; margin-left: .1em; font: 1.12em/1 var(--f-hand); color: var(--pink-ink); text-decoration: none; transform: rotate(-2deg); }
.chapter__t--hand { top: var(--nudge-th, 0px); font: 1.75rem/var(--lh) var(--f-hand); color: var(--pink-ink); }
.chapter__q del { color: var(--ink-2); text-decoration-color: var(--pink-ink); text-decoration-thickness: 2.5px; }
.chapter__q { position: relative; top: var(--nudge-q, 0px); max-width: 30rem; margin: 0; font-size: 1.08rem; font-style: italic; line-height: var(--lh); }
.chapter__q--hand { top: var(--nudge-qh, 0px); font: 1.32rem/var(--lh) var(--f-hand); color: var(--pink-ink); }
/* contents stickers: one base size, each scaled by --k so they look the same size (balanced by outline and ink, not just width) */
.sticker--ch { --w: calc(62px * var(--k, 1)); right: -12px; top: -8px; }
/* phones: keep the line beside a sticker clear of it */
.chapter--sticker .chapter__q { padding-right: 3.4rem; }
.sticker--bed { right: -16px; top: 34px; } /* phones: beside the short description, clear of "situationships" */
/* very narrow phones: slightly smaller stickers, and room beside the long bonus title */
@media (max-width: 359px) {
  .sticker--ch { --w: calc(54px * var(--k, 1)); }
  .chapter--bonus .chapter__t { padding-right: 3.2rem; }
}

/* ---------- For you (sticky note) ---------- */

.foryou { position: relative; max-width: var(--col); margin: 0 auto; padding: 26px var(--gutter) 64px; }
.ticks { list-style: none; margin: 0; padding: 0; }
/* tick yourself: real checkboxes, unticked by default; a pen tick draws in when checked */
.ticks li { margin: 0 0 12px; }
.tick { position: relative; display: block; padding-left: 40px; font-size: 1.08rem; line-height: 1.4; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tick input { position: absolute; left: 0; top: .12em; width: 26px; height: 26px; margin: 0; opacity: 0; cursor: pointer; }
.tick__box {
  position: absolute; left: 0; top: .12em;
  width: 24px; height: 24px;
  border: 2px solid var(--ink); border-radius: 4px;
  transform: rotate(-3deg);
  transition: background-color .15s;
  pointer-events: none;
}
.tick__box::after {
  content: ""; position: absolute; left: -1px; top: -9.5px;
  width: 32px; height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M4 17c3 2 6 6 8 10C15 18 21 9 29 3' fill='none' stroke='%23C2006A' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .3s ease-out;
}
.tick input:checked + .tick__box::after { clip-path: inset(0 0 0 0); }
.tick:hover .tick__box { background-color: rgba(255, 255, 255, .45); }
.tick input:focus-visible + .tick__box { outline: 3px solid var(--pink); outline-offset: 3px; }
.ticks.is-restoring .tick__box::after { transition: none; } /* saved ticks appear instantly on load */
.foryou__note { position: relative; width: max-content; max-width: 100%; margin: 26px 0 0 auto; padding-left: 38px; text-align: right; --r: -3deg; }
.foryou__note::before {
  content: ""; position: absolute; left: 0; top: -20px; width: 32px; height: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M34 44C14 42 6 28 10 6M10 6l-6 10M10 6l9 8' fill='none' stroke='%23C2006A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- How pre-ordering works ---------- */

.howto { position: relative; max-width: var(--col); margin: 0 auto; padding: 20px var(--gutter) 60px; }
.screenshot { position: relative; margin: 18px 0 24px; padding: 8px; background: #fff; box-shadow: var(--shadow); transform: rotate(.8deg); }
.screenshot .tape--top { left: 27%; width: 90px; }
.timeline { --cols: 1.2fr 1.2fr minmax(54px, .6fr); padding: 10px 10px 14px; background: #17181c; border-radius: 6px; color: #c9cbd3; font-family: var(--f-ui); -webkit-user-select: none; user-select: none; }
.timeline__ruler {
  display: grid; grid-template-columns: var(--cols); gap: 4px; /* the clips' columns, so 1ST DECEMBER sits over the launch */
  margin-bottom: 10px; padding: 0 0 10px;
  font-size: 12.5px; letter-spacing: .04em;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .3) 0 1px, transparent 1px 12px) 0 100% / 100% 6px no-repeat;
}
.timeline__ruler span { min-width: 0; white-space: nowrap; }
.timeline__ruler span:last-child { justify-self: end; }
.timeline__track { position: relative; display: grid; grid-template-columns: var(--cols); gap: 4px; touch-action: pan-y; }
.clip {
  display: flex; align-items: flex-start;
  min-height: 58px; padding: 8px 8px 20px; /* labels stay clear of the waveform strip */
  border-radius: 5px;
  font: 14px/1.1 var(--f-label); letter-spacing: .02em; text-transform: uppercase; color: #fff;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .22) 0 2px, transparent 2px 5px);
  background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 14px;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35);
}
.clip--now { background-color: var(--pink); padding-right: 20px; } /* keeps clear pink right of the label for the playhead to rest in (the label wraps first) */
.clip--launch { background-color: var(--cobalt); }
.clip--after { background-color: var(--gold); color: var(--ink); font-size: 17px; } /* "£++" needs to read at a glance */
/* the playhead: static, but secretly draggable (scrub it like an editor) */
.playhead { position: absolute; top: -20px; bottom: -6px; left: calc((100% - 8px) * .4 - 11px); width: 2px; background: #fff; cursor: grab; touch-action: none; }
.playhead::after { content: ""; position: absolute; top: -8px; bottom: -6px; left: 50%; width: 30px; translate: -50% 0; } /* bigger grab area */
.playhead.is-dragging { cursor: grabbing; box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.timeline__track.is-scrubbing { cursor: grabbing; }
.clip { transition: filter .12s, box-shadow .12s; }
.clip.is-under { filter: brightness(1.15) saturate(1.1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .9); }
.playhead::before { content: ""; position: absolute; top: -2px; left: 50%; width: 12px; height: 12px; translate: -50% 0; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%); }
.iykyk { position: absolute; right: 12px; top: -46px; z-index: 5; display: flex; align-items: center; gap: 5px; margin: 0; font-size: 1.5rem; letter-spacing: .02em; transform: rotate(-5deg); pointer-events: none; }
@media (max-width: 374px) { .iykyk { right: 0; top: -45px; font-size: 1.3rem; } } /* small phones: clear the title's first line */
/* a hand-drawn "Pr" app tile before IYKYK: the timeline is a Premiere Pro nod */
.iykyk__pr { flex: none; width: 23px; height: 23px; rotate: -4deg; fill: none; stroke: var(--pink-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.semi { font-weight: 600; }
/* Hayley's Christmas tree doodle: tucked into the empty bottom-right corner of this section
   (beside the short last line and the section's bottom padding), so nothing else moves */
.xmas { position: absolute; right: var(--gutter); bottom: 4px; width: 45px; height: 58px; rotate: 6deg; fill: none; stroke: var(--pink-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.xmas__dot { fill: var(--pink-ink); stroke: none; }
.steps { list-style: none; margin: 0 0 18px; padding: 0; }
.steps li { display: flex; align-items: baseline; gap: 12px; margin: 0 0 10px; font-size: 1.06rem; line-height: 1.4; }
.dot { flex: none; width: 14px; height: 14px; border: 2px solid var(--ink); border-radius: 3px; translate: 0 2px; }
.dot--now { background: var(--pink); }
.dot--launch { background: var(--cobalt); }
.dot--after { background: var(--gold); }

/* ---------- FAQ ---------- */

.faq { max-width: var(--col); margin: 0 auto; padding: 16px var(--gutter) 60px; scroll-margin-top: 38px; } /* "Read the FAQs" lands with Hayley's note and the title clear of the 30px editor bar */
/* Hayley's note above the title: an envelope doodle with "new mail" sparks, and an arrow down at the title
   that stops on the page, just above the strip */
.faq__note { position: relative; display: flex; align-items: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 6px 22px auto; padding-left: 34px; --r: -3deg; }
.faq__note::before {
  content: ""; position: absolute; left: 0; top: 10px; width: 28px; height: 32px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 48'%3E%3Cpath d='M34 4C14 6 6 20 10 42M10 42l-6-10M10 42l9-8' fill='none' stroke='%23C2006A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq__mail { flex: none; width: 36px; height: 28px; rotate: -8deg; fill: none; stroke: var(--pink-ink); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.faq details { border-top: 2px solid var(--ink); }
.faq details:last-of-type { border-bottom: 2px solid var(--ink); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 2px;
  list-style: none; cursor: pointer;
  font: 600 1.3rem/1.2 var(--f-body); /* semi-bold (Gloock has no semi-bold; faking it smudged the letters) */
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 1.7rem/1 var(--f-hand); color: var(--pink-ink); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details.is-closing summary::after { transform: none; } /* the × turns back as soon as an answer starts closing */
.faq__a { display: flow-root; } /* holds the last paragraph's margin, so the slide (site.js) ends at the true height */
.faq details p { max-width: 34rem; margin: 0 0 18px; font-size: 1.05rem; }
.faq__serious summary { color: var(--red-deep); }
/* Hayley signs her answers in pink pen */
.faq__sig { display: inline-block; margin-left: .15em; font-size: 1.3rem; line-height: 1; white-space: nowrap; transform: rotate(-3deg); }
/* Hayley's doodled heart hands (two hands making a heart) in "Can I share it with a friend?" */
.faq__hands { display: inline-block; width: 2em; height: 1.4em; margin: 0 .05em 0 .1em; vertical-align: -.38em; rotate: -6deg; overflow: visible; fill: none; stroke: var(--pink-ink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
/* Hayley's doodled heart ("Is Mags real?" and the "follow mum" note) */
.doodle-heart { display: inline-block; width: 1.15em; height: 1.05em; margin: 0 .05em; vertical-align: -.2em; rotate: -10deg; fill: none; stroke: var(--pink-ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
/* hidden details (email, company, address): a little "redacted" label strip until it's tapped, then the real thing (site.js) */
.show-chip {
  display: inline-block; padding: .2em .5em .14em;
  background: var(--ink); color: var(--paper-hi); border-radius: 2px;
  font: 11.5px/1.2 var(--f-label); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  vertical-align: .12em; transform: rotate(-1.5deg); cursor: pointer;
}
.show-chip:hover { background: var(--pink-ink); }
.shown { font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Final CTA: manga panel ---------- */

.panel { max-width: 34rem; margin: 0 auto; padding: 30px var(--gutter) 72px; text-align: center; }
.panel__art { position: relative; margin-bottom: 44px; } /* room for the slip's corner tape */
.panel__frame {
  position: relative;
  aspect-ratio: 1 / 1.08;
  overflow: hidden;
  background: #fff;
  border: 3px solid var(--ink);
  box-shadow: 7px 7px 0 var(--ink);
  transform: rotate(-1deg);
}
.panel__lines {
  position: absolute; inset: -25%;
  background: repeating-conic-gradient(from 3deg at 50% 50%, rgba(30, 28, 26, .9) 0 .8deg, transparent .8deg 6.2deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 30%, #000 58%);
          mask: radial-gradient(circle at 50% 50%, transparent 0 30%, #000 58%);
  animation: lines .45s steps(1) infinite;
}
.panel__mags { position: absolute; left: 50%; bottom: -4%; width: 92%; translate: -44% 0; }
/* Mags's speech bubble breaks out over the panel's top-left border, with the panel's hard shadow,
   so it pops off the page. It stays above her eyebrows; the tail points down at her mouth. */
.bubble {
  position: absolute; top: -24px; left: -4px; z-index: 3;
  width: min-content; margin: 0; padding: .42em .78em .5em;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 50%;
  font: 400 clamp(1.75rem, 8.4vw, 2.6rem)/1 var(--f-display);
  letter-spacing: -.01em;
  filter: drop-shadow(5px 5px 0 var(--ink));
  transform: rotate(-6deg);
}
.bubble::before, .bubble::after { content: ""; position: absolute; left: 58%; clip-path: polygon(0 0, 100% 0, 85% 100%); }
.bubble::before { bottom: -30px; width: 34px; height: 32px; background: var(--ink); }
.bubble::after { bottom: -22px; margin-left: 5px; width: 22px; height: 25px; background: #fff; }
.panel__note { position: absolute; left: 5%; bottom: 6%; z-index: 3; margin: 0; padding: 2px 8px; background: #fff; font-size: 1.35rem; transform: rotate(-6deg); } /* solid: the same white as the panel behind her */
.panel .coupon-wrap { text-align: left; }

/* ---------- Footer (the back page) ---------- */

.foot {
  position: relative;
  padding: 34px var(--gutter) calc(112px + env(safe-area-inset-bottom));
  background: var(--noise), var(--kraft);
  background-size: 180px 180px, auto;
  text-align: center;
}
.foot::before { content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 12px; background: var(--kraft); clip-path: var(--torn); }
/* Hayley's sign-off, her links and the socials, all in her pink pen, like the Payhip store's footer */
.foot__hayley { margin: 6px 0 14px; font-size: 1.6rem; line-height: 1.1; transform: rotate(-2deg); }
/* the row is tilted as one line (tilting each link on its own left a step between them) */
.foot__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 26px; margin: 0 0 12px; padding: 0; list-style: none; transform: rotate(-2deg); }
.foot__links li { display: flex; } /* no inline line box, or the envelope nudges "Show Email" up */
.foot__link {
  display: inline-flex; align-items: center; gap: 6px;
  font: 1.45rem/1 var(--f-hand); color: var(--pink-ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
  overflow-wrap: anywhere; transition: transform .2s cubic-bezier(.2, 1.6, .4, 1);
}
.foot__link:hover { transform: rotate(-3deg) scale(1.08); }
.foot__mail { flex: none; width: 30px; height: 23px; rotate: -8deg; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.foot__socials { display: flex; justify-content: center; gap: 12px; margin: 0; padding: 0; list-style: none; }
.foot__socials a { display: block; padding: 9px; color: var(--pink-ink); transition: transform .2s cubic-bezier(.2, 1.6, .4, 1); }
.foot__socials a:hover { transform: rotate(-8deg) scale(1.15); }
.foot__socials svg { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Small print page ---------- */

.doc { max-width: var(--col); margin: 0 auto; padding: 36px var(--gutter) 80px; font-size: 1.2rem; } /* same text and column as the main page's .lede */
.doc__back { margin-bottom: 26px; font: 1.3rem var(--f-hand); }
.doc__back a { color: var(--pink-ink); text-decoration: none; }
.doc__note { margin: -4px 0 28px; }
.doc__hayley { max-width: 26rem; margin: 2px 0 8px 10px; text-wrap: balance; --r: -2.5deg; } /* her aside under "sales are final" */
.doc h2 { margin: 34px 0 10px; font: 400 1.55rem/1.15 var(--f-display); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: .5em; }
.doc__updated { margin-top: 40px; font-size: .9rem; color: var(--ink-2); }

/* ---------- Order confirmation page (Payhip sends buyers here after checkout) ---------- */

.thanks { position: relative; max-width: var(--col); margin: 0 auto; padding: 44px var(--gutter) 72px; }
.thanks__gift { --w: 100px; right: var(--gutter); top: 146px; animation: slap .4s cubic-bezier(.2, 1.7, .4, 1) .5s both; }
.thanks__gift--bag { --w: 92px; top: 138px; } /* the generic page's gift bag */
.thanks__gift img { animation: boil var(--boil-dur, 1.3s) steps(1) var(--boil-delay, 0s) infinite; }
.thanks__note { max-width: none; margin: 2px 0 26px; padding-right: 102px; font-size: 1.45rem; --r: -3deg; } /* clear of the wrapped gift, which sits beside it */
.thanks__lede { margin: 0 0 18px; font-size: 1.12rem; }
.thanks__help { margin-bottom: 44px; }
.thanks .socials { max-width: none; margin: 0 0 34px; }
.thanks .socials p { max-width: 32rem; }
.socials__plea { margin: 20px 0 0 auto; width: max-content; max-width: 100%; font-size: 1.4rem; --r: -3deg; }

/* ---------- Sticky pre-order bar ---------- */

.stickybar {
  position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 7px 7px 16px;
  background: var(--paper-hi);
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translateY(170%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.2, 1.2, .4, 1), visibility 0s .32s;
}
.stickybar.is-on { transform: none; visibility: visible; transition: transform .32s cubic-bezier(.2, 1.2, .4, 1); }
.stickybar .btn { white-space: nowrap; }
.stickybar p { margin: 0; font: 600 1rem/1.1 var(--f-body); }
.stickybar b { margin-right: 4px; font: 1.3rem/1 var(--f-label); }
@media (max-width: 400px) { .stickybar__then { display: none; } }

/* ---------- Motion ---------- */

@keyframes chip-in { from { opacity: 0; transform: translateY(var(--y, 0)) rotate(calc(var(--r, 0deg) * -2.5)) scale(1.7); } }
@keyframes drop-in { from { opacity: 0; transform: rotate(calc(var(--r, 0deg) - 9deg)) translateY(-34px) scale(1.06); } }
@keyframes tape-in { from { opacity: 0; transform: rotate(-2deg) scaleX(.2); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes slap { from { opacity: 0; transform: rotate(var(--r, 0deg)) scale(1.45); } }
@keyframes flash-in { from { opacity: 0; transform: rotate(-30deg) scale(.3); } }
@keyframes lines { 0% { transform: rotate(0); } 33% { transform: rotate(1.6deg); } 66% { transform: rotate(-1.2deg); } }

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

/* ---------- Wider screens: the scrapbook spread ---------- */

@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "title  photo"
      "sub    photo"
      "coupon photo";
    column-gap: 64px; row-gap: 26px;
    padding-top: 56px; padding-bottom: 72px;
  }
  .ransom { grid-area: title; font-size: clamp(4.2rem, 7.6vw, 6.6rem); }
  .h2--strip { font-size: clamp(1.68rem, 3.04vw, 2.3rem); } /* the "MAGS HARTLEY:" strip's size, capped so "HOW PRE-ORDERING" fits its column */
  .hero__sub { grid-area: sub; width: max-content; }
  .polaroid { grid-area: photo; align-self: start; position: sticky; top: 76px; width: 100%; max-width: 420px; margin: 12px auto 0; }
  .coupon-wrap { grid-area: coupon; width: auto; max-width: min(30rem, calc(100% - 110px)); margin-top: 8px; }
  .coupon .btn { padding-inline: 22px; font-size: 1.22rem; }
  .usd { bottom: calc(50% - 15px); }
  .usd__amt { font-size: 1.8rem; }
  .usd__eagle { width: 72px; height: 58px; }
  .usd__flag { width: 48px; height: 32px; translate: -10px -6px; }
  .usd__eagle--under { translate: calc(-46% - 8px) 2px; }
  /* desktop has room beside the price: "around $20" on one line */
  .usd__price { flex-direction: row; align-items: flex-end; gap: 3px; }
  .usd__around { width: 50px; height: 17px; margin: 0 0 6px; }
  .xmas { right: 0; bottom: -24px; width: 56px; height: 73px; }
  .timeline__ruler { font-size: 13px; }
  .clip { font-size: 15px; }
  .clip--after { font-size: 18px; }
  .usd__arrow { width: 38px; height: 17px; }
  .flash { width: 104px; height: 104px; }
  .flash b { font-size: 2.05rem; }
  .band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 64px; align-items: start;
    max-width: 72rem; margin: 0 auto; padding: 0 var(--gutter) 48px;
  }
  .band > section { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
  .band--a .cut { padding-top: 30px; }
  .band--b .foryou { padding-top: 70px; }
  .band--c .panel { padding-top: 24px; }
  .sticker--sub { --w: 96px; }
  .sticker--ch { --w: calc(76px * var(--k, 1)); right: -64px; }
  .sticker--bed { top: -6px; }
  .chapter--sticker .chapter__q { padding-right: 0; }
  .stickybar { left: auto; right: 24px; bottom: 24px; }
}

/* Desktop: Hayley's note stays pinned while the comments scroll past, but only when the window is tall
   enough to show all of it (frame, "click to play" and the social links under it) */
@media (min-width: 960px) and (min-height: 840px) {
  .band--a .cut { position: sticky; top: 64px; }
}