/* Bold Calendar · website styles
   A multicolour page: each section takes one of the calendar colours, and the
   calendar shown in it is that colour. Yellow is kept for buttons, so they
   stand out on every background. */

:root {
  --note: #FFE45C;
  --green: #0B9234;
  --blue: #1975CB;
  --coral: #E2414E;
  --orange: #E87320;
  --charcoal: #4D4D4D;
  --note-deep: #F5D332;
  --ink: #14181F;
  --ink-soft: #4E5663;
  --paper: #F6F4EE;
  --white: #FFFFFF;
  --line: #E0DCD0;

  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1160px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
/* The stuck-on notes and the tilted ticker reach past the screen edge on purpose. Phones let you
   pan past body's overflow-x: hidden, so clip sideways overflow on the page content itself.
   clip (not hidden) trims only left and right and makes no scroll box, so the notes still
   overlap above and below and sticky elements keep working. */
main { overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: 1.04; letter-spacing: 0.025em; margin: 0; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ink-soft); }
.center { text-align: center; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.on-ink :focus-visible { outline-color: var(--note); }

/* ---------- header ---------- */
.testbar { background: #FFB25C; color: var(--ink); text-align: center; font-weight: 600; font-size: 14px; padding: 8px var(--gutter); }
/* The header stays at the top of the window while the page scrolls. */
.header { background: var(--white); border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 30; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; padding-top: 10px; padding-bottom: 10px; }
/* The Bold Calendar logo (option E, design/brand/bold-calendar on the logo branch): BOLD with
   CALENDAR cut out of a bar exactly as wide as BOLD, inlined as outlines so it is exact and crisp
   at any size. It takes the text colour: green on a white header, white on a coloured header or
   the footer, where the cut-out letters show the colour behind. Never narrower than 80 px. */
.brand { display: inline-flex; align-items: center; color: var(--green); text-decoration: none; line-height: 0; }
.brand .logo { display: block; width: clamp(80px, 6vw, 86px); height: auto; }
/* In the header, wider than a phone: the horizontal logo (BOLD, then CALENDAR cut out of a bar
   as tall as BOLD), 40 px tall, on one line with the navigation. Phones keep the stacked logo:
   the horizontal one would crowd the Order button there. The footer stays stacked. */
.header .logo--wide { display: none; width: auto; height: 40px; }
@media (min-width: 601px) {
  .header .logo--tall { display: none; }
  .header .logo--wide { display: block; }
}
.nav { display: flex; gap: clamp(14px, 2.4vw, 28px); align-items: center; font-size: 15px; font-weight: 600; }
.nav a { text-decoration: none; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .nav .nav-extra { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; cursor: pointer; text-decoration: none;
  background: var(--note); color: var(--ink);
  font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: 0.07em;
  padding: 16px 26px 15px; border-radius: 4px;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.5);
  transition: transform 0.12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: progress; }
.btn--small { font-size: 12.5px; padding: 11px 16px 10px; }
.btn--ink { background: var(--ink); color: #fff; box-shadow: none; }
.btn--wide { width: 100%; }
.text-link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

/* ---------- hero: headline above, calendar below, running into the next section ---------- */
.hero { background: var(--hero, var(--green)); transition: background 0.45s ease; color: #fff; text-align: center; padding: clamp(32px, 5vw, 64px) 0 0; }
.hero h1 { font-size: clamp(32px, 5.8vw, 78px); line-height: 1; max-width: 13em; margin: 0 auto; }
.hero .lede { font-size: clamp(17px, 2vw, 20px); font-weight: 600; max-width: 30em; margin: 20px auto 26px; }
.hero-cta { margin-top: clamp(30px, 3.2vw, 40px); display: flex; gap: 12px 20px; justify-content: center; align-items: center; flex-wrap: wrap; }
.hero-cta .from { font-size: 15px; font-weight: 600; }
/* Two buttons side by side, each with its own price underneath. */
.hero-cta .cta { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hero-cta .cta .btn { min-width: 240px; }
.btn--white { background: #fff; color: var(--ink); }
.hero-ship { margin-top: 14px; font-size: 15px; font-weight: 600; opacity: 0.92; }
@media (max-width: 560px) { .hero-cta .cta, .hero-cta .cta .btn { width: 100%; } }
.hero-stage { position: relative; max-width: 1040px; margin: clamp(26px, 2.6vw, 32px) auto 0; padding: 0 var(--gutter); }
.hero-stage::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 42%; transform: translateX(-50%); background: var(--paper); }
.hero-stage .cal-wrap { position: relative; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6); }
.pinned { position: absolute; z-index: 2; right: calc(var(--gutter) - 6px); top: -34px; width: clamp(104px, 13vw, 158px); aspect-ratio: 38 / 51; display: grid; place-items: center; text-align: center; padding: 10px; background: var(--note); color: #1c1c1c; font-family: var(--hand); font-weight: 700; font-size: clamp(18px, 2.2vw, 26px); line-height: 1.02; box-shadow: 4px 8px 14px rgba(0, 0, 0, 0.28); transform: rotate(5deg); }
@media (max-width: 640px) { .pinned { top: -22px; } }
.picker { background: var(--paper); padding: 22px var(--gutter) 0; display: flex; gap: 12px; justify-content: center; align-items: center; flex-wrap: wrap; }
.picker-label { font-size: 14.5px; font-weight: 600; margin-right: 4px; }

/* colour dots */
.dots { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.dot { width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; background: var(--c); box-shadow: 0 0 0 3px var(--ring, var(--paper)), 0 0 0 4px rgba(20, 24, 31, 0.2); transition: transform 0.12s ease; }
.dot:hover { transform: scale(1.08); }
.dot[aria-pressed="true"] { box-shadow: 0 0 0 3px var(--ring, var(--paper)), 0 0 0 6px var(--ink); }
.panel .dots { --ring: var(--white); }

/* ---------- facts row ---------- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0; margin-top: clamp(34px, 5vw, 56px); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.fact { padding: 18px 14px; font-family: var(--display); text-transform: uppercase; font-size: clamp(12.5px, 1.25vw, 15px); letter-spacing: 0.05em; line-height: 1.25; text-align: center; }
@media (min-width: 880px) { .fact + .fact { border-left: 2px solid var(--ink); } }

/* ---------- sections ---------- */
.section { padding: clamp(60px, 8vw, 108px) 0; }
.section--white { background: var(--white); }
.section--ink { background: var(--ink); color: #fff; }
.section--green { background: var(--green); color: #fff; }
.section--blue { background: var(--blue); color: #fff; }
.section--coral { background: var(--coral); color: #fff; }
.section--orange { background: var(--orange); color: #fff; }
.on-colour .sub { font-weight: 600; }
.section h2 { font-size: clamp(27px, 4.1vw, 50px); }
.section .sub { margin-top: 14px; max-width: 34em; font-size: 18px; }
.center .sub { margin-left: auto; margin-right: auto; }
.eyebrow { font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; }

/* sizes: two cards */
.sizes { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: clamp(28px, 4vw, 44px); }
.size { background: var(--white); border: 2px solid var(--ink); padding: 22px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; transition: transform 0.15s ease; }
.size:hover { transform: translateY(-4px); }
.size-art { background: var(--paper); padding: clamp(12px, 2vw, 22px); display: grid; place-items: center; aspect-ratio: 16 / 11.6; }
.size-art > div { width: 100%; }
.size--home .size-art > div { width: 54%; }
.size-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.size h3 { font-size: 23px; }
.size .price { font-family: var(--display); letter-spacing: 0.03em; font-size: 23px; }
.size p { color: var(--ink-soft); font-size: 15.5px; }

/* stickers sized to every day */
.fit { display: grid; gap: clamp(26px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .fit { grid-template-columns: 0.85fr 1.15fr; } }
.week-scroll { overflow-x: auto; padding-bottom: 8px; }
.week { display: grid; grid-template-columns: repeat(5, minmax(96px, 1fr)); gap: 2px; background: var(--wk, #1FA34A); border: 3px solid var(--wk, #1FA34A); min-width: 500px; }
.day { background: #fff; aspect-ratio: 35.77 / 56.67; position: relative; color: var(--wk, #1FA34A); }
.day.we { background: color-mix(in srgb, var(--wk, #1FA34A) 16%, #fff); }
.day .lab { display: flex; justify-content: space-between; padding: 6% 8% 0; font-weight: 600; font-size: clamp(13px, 1.5vw, 17px); line-height: 1; }
.day .note { position: absolute; left: 2.2%; right: 2.2%; bottom: 1.5%; top: 13.1%; border-radius: 2.8% / 2%; background: var(--c); transform: rotate(var(--r)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); font-family: var(--hand); font-weight: 700; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.02; color: #1c1c1c; display: grid; place-items: center; text-align: center; padding: 8px; }
.caption { font-size: 14px; color: var(--ink-soft); margin-top: 12px; }
.steps { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 10px; }
.steps li { display: flex; gap: 14px; align-items: baseline; font-weight: 500; }
.steps b { font-family: var(--display); letter-spacing: 0.05em; font-weight: 400; text-transform: uppercase; font-size: 16px; min-width: 3.6em; }

/* text one side, calendar the other */
.two { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (min-width: 900px) { .two { grid-template-columns: 0.9fr 1.1fr; } .two--flip { grid-template-columns: 1.1fr 0.9fr; } }
.two .cal-wrap { box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.6); }
.two .btn { margin-top: 26px; }
@media (max-width: 899px) { .two--flip > :first-child { order: 2; } }
.rows { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.rows li { display: grid; grid-template-columns: minmax(96px, 150px) 1fr; gap: 16px; align-items: baseline; font-size: 17.5px; font-weight: 600; border-top: 2px solid rgba(255, 255, 255, 0.45); padding-top: 12px; }
.rows b { font-family: var(--display); letter-spacing: 0.05em; font-weight: 400; text-transform: uppercase; font-size: 17px; }
.price-tag { font-family: var(--display); letter-spacing: 0.03em; font-size: clamp(19px, 2.2vw, 25px); margin-top: 20px; }

/* team pricing: three steps */
.steps3 { display: grid; grid-template-columns: 1fr; max-width: 900px; margin: clamp(30px, 4vw, 44px) auto clamp(26px, 4vw, 36px); border: 3px solid #fff; }
.steps3 div { padding: 30px 16px 28px; }
@media (min-width: 640px) { .steps3 { grid-template-columns: repeat(3, 1fr); } .steps3 div + div { border-left: 3px solid #fff; } }
@media (max-width: 639px) { .steps3 div + div { border-top: 3px solid #fff; } }
.steps3 b { display: block; font-family: var(--display); letter-spacing: 0.02em; font-weight: 400; font-size: clamp(44px, 5.4vw, 60px); line-height: 1; }
.steps3 span { display: block; margin-top: 10px; font-weight: 700; font-size: clamp(19px, 2vw, 22px); }
.steps3 small { display: block; margin-top: 5px; font-weight: 600; font-size: 16.5px; }

/* make it yours */
.yours { display: grid; gap: clamp(26px, 5vw, 60px); align-items: center; }
@media (min-width: 900px) { .yours { grid-template-columns: 1.15fr 0.85fr; } }
.yours .cal-wrap { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.7); }
.yours .btn { margin-top: 22px; }
.btn-pair { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.two .btn-pair { margin-top: 26px; }
.two .btn-pair .btn { margin-top: 0; }
.btn--line { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.tier-line { margin-top: 12px; font-size: 15.5px; opacity: 0.9; }

/* feature grid */
.features { display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: clamp(28px, 4vw, 44px); border-top: 2px solid var(--ink); border-left: 2px solid var(--ink); }
.feature { padding: 22px 22px 24px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--white); }
.feature h3 { font-size: 17px; margin-bottom: 8px; }
.feature p { font-size: 15.5px; color: var(--ink-soft); }

/* FAQ */
.faq { max-width: 800px; margin: 30px auto 0; text-align: left; }
.faq details { border-bottom: 2px solid var(--ink); padding: 18px 0; }
.faq details:first-child { border-top: 2px solid var(--ink); }
.faq summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 26px; line-height: 0.9; }
.faq details[open] summary::after { content: "–"; }
.faq p { color: var(--ink-soft); margin-top: 10px; }


/* Shown or hidden by the shop's state (set on <body> by script). */
.only-prelaunch, .only-test { display: none; }
body.is-prelaunch .only-prelaunch { display: block; }
body.is-prelaunch span.only-prelaunch { display: inline; }
body.is-prelaunch .hide-prelaunch { display: none; }
body.is-test .only-test { display: block; }

/* footer */
.footer { background: var(--ink); color: #C9CED6; padding: 54px 0 30px; font-size: 14.5px; }
.footer a { color: #fff; }
.footer .brand { color: #fff; }
.footer .brand .logo { width: 120px; }
.footer-grid { display: grid; gap: 34px 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 820px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; } }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { font-family: var(--display); letter-spacing: 0.06em; font-weight: 400; text-transform: uppercase; font-size: 13.5px; color: #fff; margin: 0 0 4px; }
.footer-col a { text-decoration: none; color: #C9CED6; }
.footer-col a:hover { color: #fff; text-decoration: underline; }
.footer-base { margin-top: 34px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.18); font-size: 13.5px; }
.footer--slim { padding: 30px 0; }
.footer--slim .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; justify-content: space-between; align-items: center; }
.footer--slim nav { display: flex; gap: 8px 20px; flex-wrap: wrap; }

/* ---------- product page ---------- */
.crumbs { font-size: 14px; color: var(--ink-soft); padding: 18px 0 14px; }
.crumbs a { text-decoration: none; }
.product { padding-bottom: clamp(56px, 8vw, 100px); }
.shop-grid { display: grid; gap: clamp(22px, 4vw, 52px); align-items: start; }
/* Grid items default to min-width: auto, so the picture strip pushed the page wider than a phone. */
.shop-grid > * { min-width: 0; }
@media (min-width: 980px) { .shop-grid { grid-template-columns: 1.3fr 1fr; } .gallery { position: sticky; top: 90px; } }
.gallery-main { background: var(--white); border: 2px solid var(--ink); padding: clamp(14px, 3vw, 36px); }
.gallery-main .cal-wrap { box-shadow: 0 18px 36px -20px rgba(20, 24, 31, 0.5), 0 0 0 1px var(--line); }
.thumbs { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 24px) / 3); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.thumbs::-webkit-scrollbar { display: none; }
/* The strip of pictures: round arrow buttons at either end and a slim bar under it in
   place of the browser's scrollbar, showing how far along the strip you are. */
.thumbs-wrap { position: relative; margin-top: 12px; }
.thumbs-wrap[hidden] { display: none; }
.thumbs-arrow { position: absolute; top: calc(50% - 9px); transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; background: var(--white); color: var(--ink); box-shadow: 0 2px 10px rgba(20, 24, 31, 0.28); transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease; }
.thumbs-arrow svg { width: 18px; height: 18px; }
.thumbs-arrow:hover { background: var(--accent, var(--ink)); color: var(--on-accent, #fff); }
.thumbs-arrow:active { transform: translateY(-50%) scale(0.94); }
.thumbs-arrow--prev { left: -12px; }
.thumbs-arrow--next { right: -12px; }
.thumbs-arrow[hidden] { display: none; }
.thumbs-bar { position: relative; height: 4px; margin-top: 12px; border-radius: 4px; background: rgba(20, 24, 31, 0.12); overflow: hidden; }
.thumbs-bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 4px; background: var(--accent, var(--ink)); transition: left 0.15s ease, width 0.15s ease; }
@media (max-width: 640px) { .thumbs-arrow { width: 34px; height: 34px; } .thumbs-arrow--prev { left: -6px; } .thumbs-arrow--next { right: -6px; } }
.thumbs .thumb { scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; }
.thumbs .thumb > span { margin-top: auto; padding-top: 6px; }
.thumbs .thumb > div { margin-top: auto; }
/* The Home size, drawn at its size beside the Office size: A1 is 71% as wide as A0. */
.gallery .cal-wrap.is-home { width: 70.7%; margin: 0 auto; }
.thumb { background: var(--white); border: 2px solid var(--line); padding: 8px 8px 6px; cursor: pointer; text-align: center; }
.thumb[aria-pressed="true"] { border-color: var(--ink); }
.thumb .cal-wrap { pointer-events: none; }
.thumb span { display: block; font-size: 12.5px; font-weight: 600; margin-top: 6px; color: var(--ink-soft); line-height: 1.2; }
.gallery .caption { text-align: center; }

.panel { background: var(--white); border: 2px solid var(--ink); padding: clamp(20px, 3vw, 30px); }
.panel h1 { font-size: clamp(25px, 3.1vw, 36px); }
.panel .btn, .doc .btn { box-shadow: inset 0 0 0 2px var(--ink); }
/* Order page: the purchase panel is filled with the chosen calendar colour, like the
   coloured sections on the landing page. White cards sit inside it for the parts people type in. */
.shop-page { --accent: var(--cta, var(--green)); --on-accent: var(--cta-text, #fff); }
.shop-page .product { background: color-mix(in srgb, var(--accent) 13%, var(--paper)); transition: background 0.25s ease; }
.shop-page .gallery-main { border-color: var(--accent); transition: border-color 0.25s ease; }
.shop-page .thumb[aria-pressed="true"] { border-color: var(--accent); }
.shop-page .panel { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transition: background 0.25s ease, border-color 0.25s ease; box-shadow: 0 26px 50px -30px rgba(20, 24, 31, 0.55); }
.shop-page .panel .price-line small, .shop-page .panel .field > .label span, .shop-page .panel .price-full,
.shop-page .panel .price-full s, .shop-page .panel .assure { color: inherit; opacity: 0.88; }
.shop-page .panel .made-for { color: var(--ink); }
/* Buttons: yellow on the colour inside the panel, the colour itself everywhere else on the page. */
.shop-page .btn { background: var(--ink); color: #fff; box-shadow: none; }
.shop-page .panel .btn:not(.btn--ink) { box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.55); }
.shop-page .footer .btn { background: var(--accent); color: var(--on-accent); transition: background 0.25s ease, transform 0.12s ease; }
/* The lower "make it yours" band takes the colour too, in place of black. */
.shop-page .section--ink { background: var(--accent); color: var(--on-accent); transition: background 0.25s ease; }
/* The header follows the colour on the landing page and the order page. */
.home-page { --accent: var(--hero, var(--green)); --on-accent: #fff; }
.home-page .header, .shop-page .header { background: var(--accent); color: var(--on-accent); border-bottom-color: rgba(255, 255, 255, 0.45); transition: background 0.3s ease; }
.home-page .header .brand, .shop-page .header .brand { color: inherit; }
/* Size choice: white outline, filled white when chosen. */
.shop-page .panel .field .seg button { background: transparent; color: inherit; border-color: currentColor; transition: background 0.2s ease, color 0.2s ease; }
.shop-page .panel .field .seg button[aria-pressed="true"] { background: var(--on-accent); border-color: var(--on-accent); color: var(--accent); }
/* Colour dots need a white edge, or the chosen one disappears into the panel. */
.shop-page .panel .field .dot { box-shadow: 0 0 0 2.5px #fff; }
.shop-page .panel .field .dot[aria-pressed="true"] { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5.5px var(--accent), 0 0 0 8px #fff; }
/* White cards inside the panel. */
.shop-page .panel .custom, .shop-page .panel .prelaunch-card { background: var(--white); color: var(--ink); border-color: var(--white); }
.shop-page .panel .custom .seg button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.shop-page .panel .custom .seg button { transition: background 0.2s ease, color 0.2s ease; }
.shop-page .panel .prelaunch-card h2 { color: var(--accent); }
.shop-page .panel .qty { border-color: var(--white); color: var(--ink); }
.shop-page .panel .summary { border-top-color: currentColor; }
.shop-page .panel .summary .saving { color: var(--note); }
.shop-page .panel .tiers li { border-color: currentColor; color: inherit; opacity: 0.9; }
.shop-page .panel .tiers li.is-on { background: var(--ink); border-color: var(--ink); color: #fff; opacity: 1; }
.shop-page .panel .bullets { background: rgba(255, 255, 255, 0.16); }
.shop-page .panel .accordions details { border-top-color: rgba(255, 255, 255, 0.45); }
.shop-page .panel .order-error { background: var(--white); padding: 8px 12px; border-radius: 4px; }
.shop-page .text-input:focus { border-color: var(--accent); }
.shop-page .file-row input[type="file"]::file-selector-button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.seg--small button { font-size: 12px; padding: 9px 12px 8px; }
.logo-options .dots { gap: 10px; }
/* Logo colour switch: a light two-part switch in ordinary type, so it reads as a
   setting and not as an action like the dark "Save and get a link" button. */
.toggle { display: flex; justify-self: stretch; padding: 3px; gap: 3px; background: var(--line); border-radius: 999px; }
.toggle button { background: transparent; border: 0; border-radius: 999px; flex: 1 1 auto; white-space: nowrap; padding: 7px 10px; cursor: pointer; font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--ink-soft); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; }
.toggle button:hover { color: var(--ink); }
.toggle button[aria-pressed="true"] { background: var(--white); color: var(--accent, var(--ink)); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18); }
.toggle button:focus-visible { outline: 2px solid var(--accent, var(--ink)); outline-offset: 2px; }
/* Under the standard colours: one button that opens the custom section below it.
   It turns white with the calendar's colour while the section is open. */
.custom-cta { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 18px; padding: 11px 14px; background: transparent; color: inherit; border: 1.5px solid currentColor; border-radius: 12px; cursor: pointer; font-family: var(--body); text-align: left; transition: background 0.2s ease, color 0.2s ease; }
.custom-cta:hover { background: rgba(255, 255, 255, 0.16); }
.custom-cta[aria-expanded="true"] { background: var(--on-accent, #fff); color: var(--accent, var(--ink)); border-color: var(--on-accent, #fff); border-radius: 12px 12px 0 0; }
.custom-cta .rainbow { width: 24px; height: 24px; border-radius: 50%; flex: none; background: conic-gradient(#E2414E, #E87320, #FFE45C, #0B9234, #1975CB, #7B2D8B, #E2414E); box-shadow: 0 0 0 2px #fff; }
.custom-cta-text { display: grid; line-height: 1.25; flex: 1 1 auto; }
.custom-cta-text strong { font-size: 15px; }
.custom-cta-text span { font-size: 13px; opacity: 0.85; }
.cta-price { font-weight: 700; font-size: 14px; white-space: nowrap; }
.custom-cta-mark { flex: none; width: 10px; height: 10px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-3px) rotate(45deg); transition: transform 0.2s ease; }
.custom-cta[aria-expanded="true"] .custom-cta-mark { transform: translateY(2px) rotate(-135deg); }

/* The custom section: no heading bar of its own, shown only when a chip opens it. */
.custom:not([open]) { display: none; }
.custom-cta[aria-expanded="true"] + .custom, .custom-cta + .custom { margin-top: 0; border-top: 0; border-radius: 0 0 12px 12px; }
.custom > summary { display: none !important; }
.custom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.custom-head p { margin: 0; font-size: 14px; color: var(--ink-soft); }
#custom-extra { font-weight: 700; color: var(--ink); }
.custom-sec { display: grid; gap: 8px; scroll-margin-top: 90px; }
.custom-sec + .custom-sec { padding-top: 16px; border-top: 1px solid var(--line); }
.custom-h { margin: 0; font-family: var(--body); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.custom-h label { margin: 0 !important; font: inherit !important; }
.custom-sec .hint { margin: 0; }
.custom-foot { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.custom-foot .hint { margin: 0; }

/* Any colour: a round swatch in the calendar's colour inside a rainbow ring. */
.colour-pick { display: inline-flex !important; align-items: center; gap: 12px; cursor: pointer; margin: 0 !important; font-weight: 400 !important; justify-self: start; }
.colour-pick-ring { flex: none; width: 42px; height: 42px; border-radius: 50%; padding: 3px; background: conic-gradient(#E2414E, #E87320, #FFE45C, #0B9234, #1975CB, #7B2D8B, #E2414E); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.colour-pick:hover .colour-pick-ring { transform: scale(1.06); }
.colour-pick.is-on .colour-pick-ring { box-shadow: 0 0 0 3px var(--white), 0 0 0 5px var(--ink); }
.colour-pick input[type="color"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 100%; padding: 0; border: 3px solid var(--white); border-radius: 50%; background: none; cursor: pointer; }
.colour-pick input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.colour-pick input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.colour-pick input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
.colour-pick input[type="color"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.colour-pick-text { display: grid; line-height: 1.3; }
.colour-pick-text strong { font-size: 14.5px; }
.colour-pick-text span { font-size: 13px; color: var(--ink-soft); }
.logo-colours { display: grid; gap: 6px; }
.logo-colours .dots { gap: 10px; }

/* Logo upload: a button instead of the browser's own file box. */
.upload-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.upload-btn { display: inline-flex !important; align-items: center; gap: 8px; margin: 0 !important; padding: 9px 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); cursor: pointer; font-size: 14px !important; font-weight: 600; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
button.upload-btn { font-family: inherit; color: var(--ink); }
.upload-btn[disabled] { opacity: 0.55; cursor: progress; }
.upload-btn svg { width: 18px; height: 18px; flex: none; }
.upload-btn:hover { background: var(--accent, var(--ink)); border-color: var(--accent, var(--ink)); color: var(--on-accent, #fff); }
#logo-file:focus-visible + .upload-btn { outline: 2px solid var(--ink); outline-offset: 3px; }
.upload-name { font-size: 13.5px; color: var(--ink-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo-options { display: grid; gap: 12px; padding-top: 4px; }
.logo-tint { display: grid; gap: 6px; }
.logo-tint .hint { margin: 0; }
.logo-tint .dots { gap: 10px; }
.logo-slider { display: grid; gap: 4px; }
.logo-options .logo-slider label { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; }
.logo-slider output { font-variant-numeric: tabular-nums; font-weight: 400; color: var(--ink-soft); }
.logo-slider input[type="range"] { width: 100%; accent-color: var(--accent, var(--ink)); }
.logo-options #logo-reset { justify-self: start; }
.panel .made-for { display: inline-block; background: var(--note); font-weight: 700; font-size: 14px; padding: 4px 10px; margin-bottom: 12px; }
.panel .price-line { font-weight: 700; font-size: 28px; margin-top: 10px; }
.price-full { margin-top: 4px; font-size: 14.5px; color: var(--ink-soft); }
.price-full s { color: var(--ink-soft); }
.offer-tag { display: inline-block; background: var(--note); color: var(--ink); font-weight: 700; font-size: 12.5px; padding: 2px 8px; margin-right: 6px; }
.was { font-family: var(--body); font-weight: 500; font-size: 0.62em; opacity: 0.7; margin-right: 4px; }
.panel .price-line small { font-weight: 400; font-size: 14.5px; color: var(--ink-soft); margin-left: 8px; }
.field { margin-top: 22px; }
.field > .label { display: block; font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.field > .label span { font-weight: 500; color: var(--ink-soft); text-transform: none; letter-spacing: 0; margin-left: 6px; font-size: 14px; }
.seg { display: flex; gap: 10px; flex-wrap: wrap; }
.seg button { background: var(--white); border: 2px solid var(--ink); border-radius: 4px; padding: 10px 18px 9px; cursor: pointer; font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 13.5px; }
.seg button[aria-pressed="true"] { background: var(--ink); color: #fff; }

.bullets { list-style: none; padding: 16px 18px; margin: 22px 0 0; background: var(--paper); display: grid; gap: 10px; font-size: 15.5px; font-weight: 500; }
.bullets li { display: flex; gap: 12px; align-items: baseline; }
.bullets li::before { content: ""; flex: none; width: 11px; height: 11px; background: var(--note-deep); outline: 1.5px solid var(--ink); transform: translateY(1px) rotate(-8deg); }

.custom { border: 2px solid var(--ink); margin-top: 22px; }
.custom > summary { cursor: pointer; list-style: none; padding: 14px 16px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.custom > summary::-webkit-details-marker { display: none; }
.custom > summary small { font-weight: 600; font-size: 14px; margin-left: auto; }
/* The custom option works as a tick box: ticked (open) puts the title and logo on
   the calendar, unticked takes them off again and keeps them for next time. */
.custom > summary { justify-content: flex-start; }
.custom > summary .tick { flex: none; width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 4px; background: var(--white); display: grid; place-items: center; transition: background 0.2s ease, border-color 0.2s ease; }
.custom > summary .tick::after { content: ""; width: 6px; height: 11px; border: solid var(--on-accent, #fff); border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); opacity: 0; }
.custom[open] > summary .tick { background: var(--accent, var(--ink)); border-color: var(--accent, var(--ink)); }
.custom[open] > summary .tick::after { opacity: 1; }
.custom[open] > summary { background: var(--paper); }
.custom-body { padding: 16px; display: grid; gap: 16px; }
.custom-body label { font-weight: 600; font-size: 14.5px; display: block; margin-bottom: 6px; }
.text-input { width: 100%; padding: 11px 14px; border: 2px solid var(--line); border-radius: 4px; background: #fff; }
.text-input:focus { border-color: var(--ink); outline: none; }
.file-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.file-row input[type="file"] { max-width: 100%; font-size: 14px; color: var(--ink-soft); }
/* The browser's own "Choose file" button, dressed like the rest of the page. */
.file-row input[type="file"]::file-selector-button {
  font-family: var(--display); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12px;
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); border-radius: 4px;
  padding: 9px 14px 8px; margin-right: 12px; cursor: pointer;
}
.file-row input[type="file"]::file-selector-button:hover { background: var(--ink); color: #fff; }
.link-btn { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-size: 14px; color: var(--ink-soft); }
.hint { font-size: 13.5px; color: var(--ink-soft); margin-top: 6px; }
.hint--warn { color: #9A5B00; }
.share { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 8px; }
.share .hint { flex-basis: 100%; margin-top: 0; }
.share input { flex: 1; min-width: 0; font-size: 13.5px; }

.qty { display: inline-flex; align-items: center; border: 2px solid var(--ink); border-radius: 4px; background: #fff; overflow: hidden; }
.qty button { width: 42px; height: 46px; border: 0; background: none; cursor: pointer; font-size: 20px; }
.qty input { width: 56px; text-align: center; border: 0; background: none; font-weight: 700; -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-row { display: flex; gap: 12px; align-items: stretch; margin-top: 18px; }
.buy-row #order-area { flex: 1; }
.buy-row .btn { height: 100%; }
.tiers { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; padding: 0; list-style: none; }
.tiers li { font-size: 13px; font-weight: 600; border: 1.5px solid var(--line); padding: 4px 10px; color: var(--ink-soft); }
.tiers li.is-on { background: var(--note); border-color: var(--ink); color: var(--ink); }

.summary { border-top: 2px solid var(--ink); margin-top: 24px; padding-top: 16px; display: grid; gap: 6px; }
.summary div { display: flex; justify-content: space-between; gap: 16px; font-size: 15.5px; }
.summary .total { font-weight: 700; font-size: 22px; margin-top: 6px; }
.summary .saving { color: #1F7A3D; font-weight: 600; }
.order-error { color: #B3261E; font-weight: 600; margin-top: 12px; font-size: 15px; }
/* Marketing opt-in beside Order now: unticked, the customer's own choice. */
.optin { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 0; font-size: 14px; line-height: 1.4; color: inherit; cursor: pointer; }
.optin input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--ink); cursor: pointer; }
.optin small { opacity: 0.85; font-size: 13px; }
.assure { font-size: 13.5px; color: var(--ink-soft); margin-top: 12px; text-align: center; }
.prelaunch-card { background: var(--paper); border: 2px solid var(--ink); padding: 18px; margin-top: 20px; }
.prelaunch-card h2 { font-size: 19px; }
.accordions { margin-top: 22px; }
.accordions details { border-top: 1px solid var(--line); padding: 14px 0; }
.accordions summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; }
.accordions summary::-webkit-details-marker { display: none; }
.accordions summary::after { content: "+"; font-size: 22px; line-height: 1; }
.accordions details[open] summary::after { content: "–"; }
.accordions p { color: var(--ink-soft); margin-top: 8px; font-size: 15.5px; }

/* ---------- plain document pages ---------- */
.doc { padding: clamp(32px, 5vw, 60px) 0 clamp(56px, 8vw, 96px); }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(28px, 4.2vw, 44px); margin-bottom: 12px; }
.doc h2 { font-size: 18px; margin: 36px 0 8px; }
.doc p, .doc li { margin-top: 10px; }
.doc ul { padding-left: 20px; margin: 0; }
.doc .meta { color: var(--ink-soft); font-size: 15px; }
.confirm { text-align: center; }
.confirm .tick { width: 76px; height: 76px; background: var(--note); margin: 0 auto 22px; transform: rotate(-6deg); display: grid; place-items: center; font-family: var(--display); letter-spacing: 0.02em; font-size: 30px; box-shadow: 3px 6px 12px rgba(0, 0, 0, 0.16); }
.receipt { text-align: left; background: var(--white); border: 2px solid var(--ink); padding: 20px 22px; margin: 26px auto 0; max-width: 460px; }
.receipt div { display: flex; justify-content: space-between; gap: 16px; padding: 5px 0; }
.receipt .receipt-item { align-items: center; gap: 14px; padding: 10px 0; }
.receipt-item img { flex: none; width: 120px; height: auto; border: 1px solid var(--line, #E4E1D8); border-radius: 4px; background: #fff; }
.receipt-item span:first-of-type { flex: 1; }
@media (max-width: 480px) { .receipt-item img { width: 84px; } .receipt .receipt-item { gap: 10px; } }

/* ---------- the calendar itself ----------
   calendar.js draws the sheet as two SVG layers in millimetres, from the print
   artwork's measurements (set on .cal as variables), scaled to the width of the
   preview: the paper and weekend boxes, then the logo, then the lines, hatching,
   text and border. Stickers and marker writing sit in a grid over the days. */
.cal-wrap { container-type: inline-size; width: 100%; background: #fff; }
.cal {
  --mm: calc(100cqw / var(--W));
  position: relative; width: 100%; aspect-ratio: var(--W) / var(--H); background: #fff; overflow: hidden;
  color: var(--accent);
}
/* A standard calendar, shown as a picture made from the same drawing (order page). */
.cal-pic { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 1020; }
.cal > svg { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; display: block; overflow: visible; }
.cal-paper { fill: #fff; }
.cal-we { fill: var(--weekend); }
.cal-blank { fill: #fff; }
/* Lines keep their printed weight, but never get thinner than the screen can show. */
.cal-ln { stroke: var(--rule); stroke-width: max(0.4px, calc(var(--mm) * var(--line))); vector-effect: non-scaling-stroke; stroke-linecap: butt; }
.cal-border { fill: none; stroke: var(--accent); stroke-width: max(0.9px, calc(var(--mm) * var(--border))); vector-effect: non-scaling-stroke; }
.cal-over text { font-family: Anton, var(--display); font-weight: 400; fill: var(--accent); font-kerning: normal; letter-spacing: 0; }
.cal-grid {
  position: absolute; left: calc(var(--mm) * var(--daysX)); top: calc(var(--mm) * var(--innerY));
  width: calc(var(--mm) * var(--pitchW) * 31); height: calc(var(--mm) * var(--innerH));
  display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr));
  pointer-events: none;
}
.cal-c { position: relative; min-width: 0; }
/* A sticker: flat on the day box under the date and day, stickerSide clear of the lines
   at its sides and foot, 1 mm corners. */
.cal-note {
  position: absolute;
  left: calc(var(--mm) * (var(--line) / 2 + var(--stickerSide))); right: calc(var(--mm) * (var(--line) / 2 + var(--stickerSide)));
  top: calc(var(--mm) * (var(--line) / 2 + var(--strip))); bottom: calc(var(--mm) * (var(--line) / 2 + var(--stickerSide)));
  border-radius: calc(var(--mm) * 1);
  transform: rotate(var(--tilt, 0deg)); box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.22);
  color: #1c1c1c; font-family: var(--hand); font-weight: 700; font-size: calc(var(--mm) * 9.5);
  line-height: 1; display: grid; place-items: center; text-align: center; overflow: hidden;
}
.cal-logo--original { background: none !important; opacity: 0.24 !important; -webkit-mask: none !important; mask: none !important; object-fit: contain; }
.cal-logo--grey { filter: grayscale(1); }
.cal-logo {
  position: absolute;
  left: calc(var(--mm) * var(--logoX)); top: calc(var(--mm) * var(--logoY));
  width: calc(var(--mm) * var(--logoW)); height: calc(var(--mm) * var(--logoH));
  background: var(--accent); opacity: var(--logoOpacity);
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
}

/* Small previews: the fine detail drops away. */
@container (max-width: 320px) {
  .cal-labels { visibility: hidden; }
  .cal-ln { stroke-width: 0.35px; }
  .cal-border { stroke-width: 0.8px; }
}

/* ---------- movement on the landing page ---------- */
/* A strip of facts that runs across the page, set at a slight angle over the sections. */
.ticker { position: relative; z-index: 3; overflow: hidden; background: var(--ink); color: #fff; margin: clamp(34px, 5vw, 60px) -2vw 0; transform: rotate(-1.3deg); box-shadow: 0 18px 30px -16px rgba(20, 24, 31, 0.6); }
.ticker-track { display: flex; width: max-content; animation: ticker 38s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { display: inline-flex; align-items: center; white-space: nowrap; padding: 15px 0 14px; font-family: var(--display); letter-spacing: 0.05em; text-transform: uppercase; font-size: clamp(14px, 1.9vw, 21px); }
.ticker-track span::after { content: ""; width: 0.72em; height: 0.92em; margin: 0 1.4em; background: var(--note); transform: rotate(8deg); }
.ticker-track span:nth-child(5n + 2)::after { background: #8FD3FF; transform: rotate(-6deg); }
.ticker-track span:nth-child(5n + 3)::after { background: #B8F06A; }
.ticker-track span:nth-child(5n + 4)::after { background: #FF9FB0; transform: rotate(-9deg); }
.ticker-track span:nth-child(5n + 5)::after { background: #FFB45C; }
@keyframes ticker { to { transform: translateX(-50%); } }

/* Pieces that slide up into place as they are scrolled to. Only when the script is running. */
.js [data-reveal] { opacity: 0; transform: translateY(38px) rotate(-1.6deg); transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: var(--rd, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Stickers land on the calendar one after another. */
.hero-stage .cal-note, [data-reveal].is-in .cal-note { animation: note-drop 0.55s cubic-bezier(0.2, 1.3, 0.4, 1) both; animation-delay: calc(var(--nd, 600ms) + var(--i, 0) * 110ms); }
.js [data-reveal]:not(.is-in) .cal-note { opacity: 0; }
@keyframes note-drop { from { opacity: 0; transform: translateY(-70%) rotate(calc(var(--tilt, 0deg) * 5)) scale(1.5); } to { opacity: 1; transform: rotate(var(--tilt, 0deg)); } }
.pinned { transform-origin: 50% 0; animation: sway 5.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(1deg); } }

/* The key points as notes stuck onto the page, like the pinned note in the hero.
   Each one drops on as the thing it is stuck to is scrolled to. */
.pin-host, .shot, .fit > div { position: relative; }
.fit > div { min-width: 0; }
.stuck { position: absolute; z-index: 4; width: clamp(96px, 11.5vw, 150px); aspect-ratio: 38 / 51; display: grid; place-items: center; text-align: center; padding: 9px; background: var(--c, var(--note)); color: #1c1c1c; font-family: var(--hand); font-weight: 700; font-size: clamp(17px, 2.1vw, 25px); line-height: 1.02; box-shadow: 4px 8px 14px rgba(0, 0, 0, 0.28); transform: rotate(var(--r, 0deg)); }
.stuck--tr { top: -34px; right: -10px; }
.stuck--tl { top: -34px; left: -10px; }
.stuck--br { bottom: -30px; right: -10px; }
.stuck--bl { bottom: -30px; left: -10px; }
.stuck--hero { top: 46%; left: calc(var(--gutter) - 12px); }
.js .stuck[data-reveal] { opacity: 0; transform: translateY(-70px) rotate(calc(var(--r, 0deg) * 4)) scale(1.4); transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.2, 1.3, 0.4, 1); transition-delay: var(--rd, 450ms); }
.js .stuck[data-reveal].is-in { opacity: 1; transform: rotate(var(--r, 0deg)); }

/* The calendar in rooms: one wide picture, two beneath, each set slightly askew. */
.shots-section { padding-top: clamp(48px, 7vw, 90px); }
.shots { display: grid; gap: clamp(18px, 3vw, 34px); margin-top: clamp(26px, 4vw, 46px); grid-template-columns: 1fr 1fr; }
.shot { margin: 0; }
.shot--a { grid-column: 1 / -1; }
.shot img { display: block; width: 100%; height: auto; border: clamp(5px, 0.8vw, 9px) solid var(--white); box-shadow: 0 28px 50px -26px rgba(20, 24, 31, 0.65); transform: rotate(var(--rest, 0deg)); transition: transform 0.35s ease; }
.shot--a img { --rest: -0.9deg; }
.shot--b img { --rest: 1.5deg; }
.shot--c img { --rest: -1.4deg; }
.shot:hover img { transform: rotate(0deg) scale(1.015); }
@media (max-width: 640px) { .shots { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .dot, .size, .hero, .shot img { transition: none; }
  .ticker-track, .pinned, .cal-note { animation: none !important; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .stuck[data-reveal] { opacity: 1; transform: rotate(var(--r, 0deg)); transition: none; }
  .js [data-reveal]:not(.is-in) .cal-note { opacity: 1; }
}
/* The Order button in the header: yellow, the same lettering size as the hero buttons, on every page. */
.header .nav-order, .shop-page .header .nav-order { background: var(--note); color: var(--ink); font-size: 15px; font-weight: 400; padding: 13px 24px 12px; box-shadow: none; }
/* The colour dots sit in the hero, under the button. */
.hero .picker { background: none; padding: clamp(30px, 3.2vw, 40px) 0 0; }
.hero .dot { box-shadow: 0 0 0 2.5px #fff; }
.hero .dot[aria-pressed="true"] { box-shadow: 0 0 0 2.5px #fff, 0 0 0 5.5px var(--hero, var(--green)), 0 0 0 8px #fff; }
/* Marker writing on the preview calendars: a word or two in the first day, then a line with an
   arrowhead through the days it covers, the way people mark a run of days on a wall planner. */
.cal-ink { position: absolute; z-index: 2; left: 8%; top: calc(var(--mm) * var(--strip)); bottom: 0; width: calc(var(--span, 1) * 100% - 16%); display: flex; align-items: center; gap: calc(var(--mm) * 4); white-space: nowrap; font-family: var(--hand); font-weight: 700; font-size: calc(var(--mm) * var(--strip) * 2.5); line-height: 1; pointer-events: none; }
.cal-ink::after { content: ""; flex: 1; min-width: 0; height: calc(var(--mm) * 1.1); min-height: 1px; border-radius: 1px; background: currentColor; opacity: 0.85; }
/* A small whiteboard marker resting by a calendar, in the same spirit as the stuck-on notes. */
.hero > .wrap, .section > .wrap { position: relative; }
.pen { position: absolute; z-index: 4; width: clamp(70px, 8vw, 104px); height: auto; pointer-events: none; transform: rotate(var(--pr, 0deg)); filter: drop-shadow(3px 6px 4px rgba(0, 0, 0, 0.28)); }
.js .pen[data-reveal] { opacity: 0; transform: translateY(-30px) rotate(calc(var(--pr, 0deg) * 2)); transition: opacity 0.3s ease, transform 0.5s cubic-bezier(0.2, 1.3, 0.4, 1); transition-delay: 600ms; }
.js .pen[data-reveal].is-in { opacity: 1; transform: rotate(var(--pr, 0deg)); }
.pen--hero { right: calc(var(--gutter) + 10px); bottom: -14px; --pr: -14deg; }
.pen--side { left: -8px; bottom: -16px; --pr: 12deg; }
@media (prefers-reduced-motion: reduce) { .js .pen[data-reveal] { opacity: 1; transform: rotate(var(--pr, 0deg)); transition: none; } }
.shop-page .panel .accordions p { color: inherit; opacity: 0.95; }
.shop-page .panel .accordions a { color: inherit; }

/* ---------- order page loading screen ---------- */
.page-loader { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: var(--green); color: #fff; transition: opacity 0.35s ease, visibility 0.35s ease; animation: loader-giveup 0.35s ease 6s forwards; }
/* Failsafe without any script: the screen lifts itself after 6 seconds. */
@keyframes loader-giveup { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.page-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.page-loader-icon { width: 64px; height: 64px; animation: loader-bob 1.1s ease-in-out infinite; }
.page-loader-text { font-family: var(--display); font-size: 22px; text-transform: uppercase; letter-spacing: 0.06em; }
.page-loader-bar { position: relative; width: 140px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.page-loader-bar span { position: absolute; top: 0; bottom: 0; width: 40%; border-radius: 2px; background: #fff; animation: loader-slide 1.1s ease-in-out infinite; }
@keyframes loader-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes loader-slide { 0% { left: -40%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .page-loader-icon, .page-loader-bar span { animation: none; } }

/* ---------- promo banner above the header: sticker-coloured tiles scrolling sideways ---------- */
.promo { overflow: hidden; background: var(--note); }
.promo-track { display: flex; width: max-content; animation: promo-scroll 40s linear infinite; }
.promo:hover .promo-track { animation-play-state: paused; }
.promo-set { display: flex; }
.promo-tile { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; height: 38px; padding: 0 28px; color: var(--ink); font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: 0.07em; }
.promo-tile::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; opacity: 0.55; transform: rotate(45deg); flex: none; }
.promo-tile--y { background: var(--note); }
.promo-tile--p { background: #FF9EC4; }
.promo-tile--s { background: #8FD3FF; }
.promo-tile--l { background: #B8F06A; }
.promo-tile--o { background: #FFB45C; }
/* Four copies of the five tiles; moving by a quarter brings the next copy into the same place. */
@keyframes promo-scroll { to { transform: translateX(-25%); } }
@media (max-width: 640px) { .promo-tile { height: 34px; padding: 0 20px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .promo-track { animation: none; } .promo { overflow-x: auto; } }

/* ---------- the sticker pack, an add-on on the order page ----------
   Built like the "Make it yours" button above it: same box, icon spot and text, the price
   lined up under that button's price, and the number of packs on a second row. */
.addon { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 10px; column-gap: 12px; row-gap: 10px; align-items: center; margin-top: 12px; padding: 11px 14px; border: 1.5px solid currentColor; border-radius: 12px; transition: background 0.2s ease; }
.addon.is-on { background: rgba(255, 255, 255, 0.16); }
.addon-art { position: relative; width: 24px; height: 24px; }
.addon-art i { position: absolute; left: 50%; top: 50%; width: 14px; height: 19px; margin: -9.5px 0 0 -7px; border-radius: 2.5px; background: var(--c); box-shadow: 0 0 0 1.5px #fff; transform: translateX(var(--x, 0)) rotate(var(--r, 0deg)); }
.addon-text strong { font-size: 15px; }
.addon-price { grid-column: 3; font-weight: 700; font-size: 14px; white-space: nowrap; }
.addon-qty { grid-column: 2 / -1; justify-self: start; }
.qty--small button { width: 36px; height: 34px; font-size: 18px; }
.qty--small input { width: 36px; font-size: 15px; }
.shop-page .panel .addon .qty { border-color: var(--white); }

/* ---------- the free sticker pack offer (Black Friday) ---------- */
/* site.js puts offer-on / offer-before / offer-after on <body> from /api/status. Offer text
   is hidden until the server says the offer is on, so a closed offer is never shown. */
body:not(.offer-on) .only-offer,
body:not(.offer-before) .only-offer-before,
body:not(.offer-after) .only-offer-after,
body.offer-on .hide-offer { display: none !important; }
.promo-tile--offer { background: var(--ink); color: #fff; text-decoration: none; }
.promo-tile--offer::before { opacity: 1; background: var(--note); }
.offer-note { margin: 4px 0 14px; padding: 9px 12px; background: var(--note); color: var(--ink); border-radius: 8px; font-size: 14.5px; line-height: 1.45; }
.shop-page .panel .summary .free-row { color: var(--note); font-weight: 600; }

/* ---------- Black Friday page (black-friday.html) ---------- */
.bf-kicker { display: inline-block; margin: 0 auto 18px; padding: 7px 14px; background: var(--note); color: var(--ink); border-radius: 999px; font-family: var(--display); font-size: clamp(13px, 1.6vw, 15px); letter-spacing: 0.06em; text-transform: uppercase; }
.bf-state { margin: -8px auto 0; font-weight: 700; font-size: 16px; }
.bf-stage { position: relative; max-width: 1000px; margin: clamp(26px, 3vw, 40px) auto 0; padding: 0 var(--gutter); }
.bf-stage::before { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 38%; transform: translateX(-50%); background: var(--paper); }
.bf-stage img { position: relative; display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.6); }
.bf-stage .stuck { z-index: 5; }
.bf-pic { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 26px 50px -24px rgba(0, 0, 0, 0.45); }
.bf-facts-section { padding: clamp(40px, 5vw, 64px) 0; }
.bf-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.bf-facts li { display: grid; gap: 6px; }
.bf-facts b { font-family: var(--display); font-weight: 400; font-size: clamp(26px, 3.4vw, 40px); letter-spacing: 0.03em; text-transform: uppercase; }
.bf-facts span { font-weight: 600; font-size: 16.5px; }
.bf-page .size-art img { display: block; width: 100%; height: auto; }
.bf-page .size--home .size-art img { width: 70%; margin: 0 auto; }
.bf-last { margin-top: 34px; }
@media (max-width: 640px) { .bf-stage .stuck { display: none; } }

/* Black Friday page: the big banner across the top, a black band with the offer scrolling in big type. */
.bf-banner { overflow: hidden; background: var(--ink); color: var(--note); border-bottom: clamp(6px, 1vw, 10px) solid var(--note); }
.bf-banner-track { display: flex; width: max-content; animation: bf-banner-scroll 30s linear infinite; }
@keyframes bf-banner-scroll { to { transform: translateX(-50%); } }
.bf-banner-set { display: flex; align-items: center; }
.bf-banner span { padding: clamp(14px, 2.2vw, 26px) clamp(18px, 2.4vw, 34px); font-family: var(--display); font-size: clamp(44px, 9vw, 120px); line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; }
.bf-banner span:nth-child(3) { color: #fff; }
.bf-banner i { font-style: normal; font-size: clamp(22px, 4vw, 52px); color: #FF9EC4; }
@media (prefers-reduced-motion: reduce) { .bf-banner-track { animation: none; } .bf-banner { overflow-x: auto; } }

/* Order page on phones: the total and the Order button fixed to the bottom of the screen. */
.buybar { display: none; }
@media (max-width: 767px) {
  .buybar:not([hidden]) { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 14px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -10px 28px -16px rgba(20, 24, 31, 0.45); }
  .buybar-sum { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
  .buybar-sum span { overflow: hidden; color: var(--ink-soft); font-size: 13.5px; white-space: nowrap; text-overflow: ellipsis; }
  .buybar-sum b { font-size: 20px; }
  .buybar .btn { flex: none; min-height: 48px; padding-left: 22px; padding-right: 22px; }
  body.has-buybar { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}