/* C.K. Walton Coloring Books: the classroom bulletin board.
   Cork ground, construction-paper fields per book, white paper and index cards for reading, red scalloped trim,
   push pins, wooden rails. Yellow is reserved for "Buy the Book on Amazon". */

:root {
  --cork: #b8895a; --cork-dot1: #a3744a; --cork-dot2: #cf9f6f;
  --rail: #5b3d25; --rail-edge: #3f2a19; --rail-ink: #fff6ea;
  --paper: #ffffff; --card: #fffdf7; --card-line: #d9e5f2; --card-margin: #f0b3ad;
  --ink: #1d2340; --muted: #4a5070; --line: #d8dae4;
  --trim: #c8372d; --pin-red: #d93a2f; --pin-blue: #2b6cb0;
  --bestiary: #5c268c; --christmas: #1f4e9a; --norse: #17656d; --board: #1f4e9a;
  --on-field: #ffffff;
  --buy: #f7c63c; --buy-ink: #1d2340; --buy-edge: #b98a12;
  --focus: #f7c63c;
  --shadow: 29 20 10;
  --radius: 4px;
  --step: 1rem;
  color-scheme: light;
}
/* night lighting: the same board under a desk lamp */
:root[data-theme="dark"] {
  --cork: #3d2c1f; --cork-dot1: #33241a; --cork-dot2: #4a3727;
  --rail: #24180f; --rail-edge: #120c07;
  --paper: #1f2338; --card: #22263d; --card-line: #2f3654; --card-margin: #6b3b3b;
  --ink: #eef0f7; --muted: #b9bed3; --line: #343a58;
  --trim: #b3392f;
  --bestiary: #4a1f73; --christmas: #1a3f7c; --norse: #12525a; --board: #1a3f7c;
  --shadow: 0 0 0;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cork: #3d2c1f; --cork-dot1: #33241a; --cork-dot2: #4a3727;
    --rail: #24180f; --rail-edge: #120c07;
    --paper: #1f2338; --card: #22263d; --card-line: #2f3654; --card-margin: #6b3b3b;
    --ink: #eef0f7; --muted: #b9bed3; --line: #343a58;
    --trim: #b3392f;
    --bestiary: #4a1f73; --christmas: #1a3f7c; --norse: #12525a; --board: #1a3f7c;
    --shadow: 0 0 0;
    color-scheme: dark;
  }
}
/* high contrast: flat ground, solid borders, underlined links */
:root[data-contrast="high"] { --cork: #ffffff; --cork-dot1: transparent; --cork-dot2: transparent; --paper: #ffffff;
  --card: #ffffff; --ink: #000000; --muted: #000000; --line: #000000; --rail: #000000; --rail-edge: #000000;
  --bestiary: #3d1166; --christmas: #0b2f6b; --norse: #08434a; --board: #0b2f6b; --card-line: transparent; }
:root[data-contrast="high"][data-theme="dark"] { --cork: #000000; --paper: #000000; --card: #000000; --ink: #ffffff;
  --muted: #ffffff; --line: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root[data-contrast="high"]:not([data-theme="light"]) { --cork: #000000; --paper: #000000; --card: #000000;
    --ink: #ffffff; --muted: #ffffff; --line: #ffffff; }
}
:root[data-text="large"] { font-size: 125%; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: rgb(247 198 60 / .3);
  scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; color: var(--ink); font: 1.0625rem/1.6 Nunito, system-ui, sans-serif;
  background-color: var(--cork);
  background-image: radial-gradient(var(--cork-dot1) 1.3px, transparent 1.6px), radial-gradient(var(--cork-dot2) 1px, transparent 1.3px),
    radial-gradient(var(--cork-dot1) .8px, transparent 1.1px), radial-gradient(ellipse 2.2px 1.4px, var(--cork-dot2), transparent);
  background-size: 13px 11px, 7px 17px, 23px 19px, 29px 31px; background-position: 0 0, 3px 9px, 11px 4px, 17px 21px;
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
main { flex: 1 0 auto; }
::selection { background: var(--buy); color: var(--buy-ink); }
h1, h2, h3 { font-family: Fredoka, Nunito, sans-serif; line-height: 1.1; margin: 0 0 .45em; text-wrap: balance; }
h2 { font-size: 1.65rem; }
p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 3px; }
img, video { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; box-shadow: 0 0 0 6px #1d2340; }
:root[data-contrast="high"] a:not(.btn) { text-decoration: underline; }
.wrap { width: min(1100px, 100% - 32px); margin-inline: auto; }
.rail .wrap { width: min(1240px, 100% - 32px); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 30; background: var(--buy); color: var(--buy-ink);
  padding: 10px 16px; border-radius: var(--radius); font-weight: 800; }
.skip:focus { top: 12px; }

/* wooden rail: sticky header */
.rail, .foot { background-image: linear-gradient(178deg, rgb(255 255 255 / .07) 0 8%, transparent 8% 22%, rgb(0 0 0 / .1) 22% 26%,
    transparent 26% 55%, rgb(255 255 255 / .05) 55% 60%, transparent 60% 82%, rgb(0 0 0 / .12) 82% 86%, transparent 86%); }
:root[data-contrast="high"] .rail, :root[data-contrast="high"] .foot { background-image: none; }
.rail { position: sticky; top: 0; z-index: 20; background-color: var(--rail); color: var(--rail-ink);
  box-shadow: 0 3px 0 var(--rail-edge), 0 8px 16px rgb(var(--shadow) / .25); }
.rail-inner { display: flex; align-items: center; gap: 10px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { font-family: Fredoka, sans-serif; font-weight: 600; font-size: 1.15rem; text-decoration: none; margin-right: auto; }
.rail nav ul { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rail nav a { display: block; padding: 8px 10px; border-radius: var(--radius); text-decoration: none; font-weight: 700; }
.rail nav a:hover, .rail nav a[aria-current="page"] { background: rgb(255 255 255 / .12); }
.rail nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
.display { position: relative; }
.display > summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: var(--radius); font-weight: 700;
  border: 2px solid rgb(255 255 255 / .35); }
.display > summary::-webkit-details-marker { display: none; }
.display[open] > summary { background: rgb(255 255 255 / .12); }
.display-panel { position: absolute; right: 0; top: calc(100% + 10px); width: 260px; padding: 16px; background: var(--paper);
  color: var(--ink); border-radius: var(--radius); box-shadow: 0 12px 28px rgb(var(--shadow) / .35); display: grid; gap: 10px; }
.display-panel p { margin: 0; font-weight: 800; font-size: .9rem; }
.choice { display: flex; gap: 6px; }
.choice button { flex: 1; min-height: 44px; border: 2px solid var(--line); background: var(--paper); color: var(--ink);
  border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; }
.choice button[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.no-js .display { display: none; }

/* Follow on Pinterest: official P badge, unaltered, on a white chip so the brand red stays true in every theme.
   Only on wide screens, where the rail has room; narrower screens keep Buy on one row (critique, 9 Nov 2026). */
.follow-wide { display: none; }
.fbtn { display: inline-flex; align-items: center; gap: 7px; min-height: 42px; padding: 3px 14px 3px 4px; border-radius: 999px;
  background: #ffffff; color: #1d1d1f; border: 2px solid #4a4a4a; font-weight: 800; font-size: .95rem; text-decoration: none;
  white-space: nowrap; transition: transform .15s ease-out; }
.fbtn img { width: 32px; height: 32px; display: block; }
.fbtn:hover { transform: translateY(-2px); }
.fbtn:active { transform: translateY(1px); }
:root[data-contrast="high"] .fbtn { border-color: #000000; outline: 2px solid #ffffff; }
@media (min-width: 1300px) {
  :root:not([data-text="large"]) .brand { margin-right: 0; }
  :root:not([data-text="large"]) .follow-wide { display: flex; margin-right: auto; }
}
/* the same ask at the happy moment: under each free-page download */
.follow-note { margin: .8em 0 0; font-size: .92rem; }
.follow-note a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); }
.follow-note img { width: 22px; height: 22px; flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius); font-weight: 800; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s cubic-bezier(.16, 1, .3, 1); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }
.btn.buy { background: var(--buy); color: var(--buy-ink); box-shadow: 0 3px 0 var(--buy-edge); }
.btn.paper { background: var(--paper); color: var(--ink); box-shadow: 0 3px 0 rgb(var(--shadow) / .25); }
.rail .btn.buy { min-height: 42px; padding: 8px 16px; }
:root[data-contrast="high"] .btn { outline: 2px solid currentColor; }
.buttons { display: flex; flex-wrap: wrap; gap: 14px; }

/* push pin and pinned items */
.pinned { position: relative; background: var(--paper); padding: 8px; box-shadow: 0 8px 18px rgb(var(--shadow) / .3);
  transition: transform .25s cubic-bezier(.16, 1, .3, 1), box-shadow .25s cubic-bezier(.16, 1, .3, 1); }
.pinned::before { content: ""; position: absolute; top: -9px; left: calc(50% - 9px); width: 18px; height: 18px; border-radius: 50%;
  background: var(--pin-red); box-shadow: inset -3px -3px 0 rgb(0 0 0 / .25), 0 2px 3px rgb(0 0 0 / .3); z-index: 1; }
.pinned.blue::before { background: var(--pin-blue); }
a.pinned:hover, a.pinned:focus-visible { transform: translateY(-6px) rotate(0deg) !important; box-shadow: 0 16px 26px rgb(var(--shadow) / .35); }
.tilt-l { transform: rotate(-2.5deg); } .tilt-r { transform: rotate(2deg); } .tilt-s { transform: rotate(-1deg); }

/* construction-paper board inside scalloped trim */
.board { position: relative; margin: 28px auto; padding: clamp(22px, 4vw, 44px); color: var(--on-field);
  border-radius: 2px; isolation: isolate; }
.board::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--board); border-radius: 2px; }
.board::before { content: ""; position: absolute; inset: -13px; z-index: -1; border-radius: 6px;
  background: radial-gradient(circle at 13px 13px, var(--trim) 12px, transparent 12.5px) 0 0 / 26px 26px; }
:root[data-contrast="high"] .board::before { background: var(--line); inset: -4px; }
.board.bestiary { --board: var(--bestiary); } .board.christmas { --board: var(--christmas); } .board.norse { --board: var(--norse); }

.banner { display: inline-block; background: var(--paper); color: var(--ink); padding: 14px 24px 16px; position: relative;
  box-shadow: 0 6px 14px rgb(var(--shadow) / .3); transform: rotate(-1.2deg); }
.banner::before { content: ""; position: absolute; top: -8px; left: 22px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--pin-red); box-shadow: inset -3px -3px 0 rgb(0 0 0 / .25); }
.banner h1, .banner h2 { margin: 0; }
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.hero h1 em { font-style: normal; color: var(--bestiary); }
:root[data-theme="dark"] .hero h1 em { color: #c9a2ee; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 em { color: #c9a2ee; } }
.lead { font-size: 1.15rem; margin: 22px 0; max-width: 38ch; }
.covers { display: flex; justify-content: center; gap: clamp(10px, 2vw, 22px); padding-top: 12px; }
.covers .pinned { width: min(31%, 170px); }
.covers .pinned:nth-child(2) { margin-top: -16px; }
.book-hero .covers .pinned { width: min(80%, 300px); }

/* paper sheets and index cards on the cork */
.sheet { background: var(--paper); color: var(--ink); padding: clamp(20px, 3vw, 34px); box-shadow: 0 8px 20px rgb(var(--shadow) / .28); }
.card-index { background: var(--card); color: var(--ink); padding: 22px 24px 22px 44px; position: relative;
  box-shadow: 0 6px 16px rgb(var(--shadow) / .25);
  background-image: linear-gradient(90deg, transparent 30px, var(--card-margin) 30px, var(--card-margin) 32px, transparent 32px),
    repeating-linear-gradient(var(--card) 0 1.55rem, var(--card-line) 1.55rem calc(1.55rem + 1px)); }
section { margin-block: 44px; }
.section-title { display: inline-block; background: var(--paper); color: var(--ink); padding: 8px 18px; font-size: 1.65rem;
  box-shadow: 0 4px 10px rgb(var(--shadow) / .25); transform: rotate(-1deg); margin-bottom: 22px; }

/* home: book panels */
.books { display: grid; gap: 40px; }
.book { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(20px, 3vw, 36px); align-items: center; }
.book .pinned img { width: 100%; }
.book h3 { font-size: 1.7rem; margin: 0; }
.book .sub { font-weight: 700; opacity: .92; margin: .2em 0 .9em; }
.book p { max-width: 52ch; }

/* free pages strip */
.freebies { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.free { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.minis { display: flex; }
.minis img { width: 64px; border: 1px solid var(--line); background: #fff; }
.minis img + img { margin-left: -18px; }
.free h3 { font-size: 1.2rem; margin-bottom: .3em; }
.free p { margin: 0 0 .7em; font-size: .97rem; }

/* book pages */
.facts { margin: 0; padding-left: 1.1em; }
.facts li { margin: .2em 0; }
.watch { width: min(100%, 300px); }
.watch figcaption { text-align: center; font-weight: 700; font-size: .9rem; padding-top: 6px; color: var(--ink); }
.watch img.still { display: none; }
.watch { position: relative; }
.pause { position: absolute; top: 18px; right: 18px; min-height: 44px; min-width: 44px; padding: 8px 14px; border: 0;
  border-radius: var(--radius); background: rgb(0 0 0 / .72); color: #fff; font: inherit; font-weight: 800; cursor: pointer; }
.no-js .pause { display: none; }
@media (prefers-reduced-motion: reduce) { .watch video, .pause { display: none; } .watch img.still { display: block; } }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.pages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; padding-top: 10px; }
.pages .pinned img { width: 100%; }
.regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.regions h3 { font-size: 1.3rem; }
.regions ul, .ideas { margin: 0; padding-left: 1.1em; }
.regions li, .ideas li { margin: .15em 0; }

/* wooden rail: footer */
.foot { background-color: var(--rail); color: var(--rail-ink); margin-top: 60px; box-shadow: 0 -3px 0 var(--rail-edge); }
.foot-inner { padding-block: 26px 34px; text-align: center; font-size: .95rem; }
.foot a { font-weight: 800; }
.foot p { margin: .3em 0; }

/* back to top */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 15; min-height: 48px; padding: 10px 16px; border-radius: var(--radius);
  background: var(--paper); color: var(--ink); font-weight: 800; text-decoration: none; box-shadow: 0 6px 16px rgb(var(--shadow) / .35);
  opacity: 0; pointer-events: none; transform: translateY(10px); transition: opacity .2s, transform .2s; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.no-js .to-top { opacity: 1; pointer-events: auto; transform: none; }
:root[data-contrast="high"] .to-top { outline: 3px solid var(--ink); }

@media (max-width: 820px) {
  .rail nav { order: 3; width: 100%; overflow-x: auto; }
  .rail nav ul { width: max-content; }
  .hero, .book, .duo, .freebies, .regions { grid-template-columns: minmax(0, 1fr); }
  .covers { padding-top: 22px; }
  .book .pinned { width: 180px; margin-inline: auto; }
  .book-hero { grid-template-columns: minmax(0, 1fr) 104px; column-gap: 16px; row-gap: 0; align-items: start; }
  .book-hero > .hero-text { display: contents; }
  .book-hero > .hero-text > * { grid-column: 1 / -1; }
  .book-hero .banner { justify-self: start; }
  .book-hero > .hero-text > .sub-lead { grid-column: 1; grid-row: 2; align-self: center; margin: 20px 0 0; }
  .book-hero .covers { grid-column: 2; grid-row: 2; padding-top: 18px; }
  .book-hero .covers .pinned { width: 100%; }
  .pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .free { grid-template-columns: minmax(0, 1fr); }
  .watch { margin-inline: auto; }
}
@media (max-width: 820px) {
  :root[data-text="large"] .rail nav, :root[data-contrast="high"] .rail nav { overflow: visible; }
  :root[data-text="large"] .rail nav ul, :root[data-contrast="high"] .rail nav ul { width: auto; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .rail .btn.buy span, .brand-tail { display: none; }
  .rail-inner { gap: 8px; min-height: 56px; }
  .rail .btn.buy { padding: 8px 12px; }
  .rail nav a { padding: 8px 8px; font-size: .95rem; }
  .nav-tail { display: none; }
  .display-panel { right: -8px; width: min(260px, 90vw); }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .fbtn, .pinned, .to-top { transition: none; }
  .btn:hover, .fbtn:hover, a.pinned:hover { transform: none !important; }
}
@media print { .rail, .foot, .to-top { display: none; } body { background: #fff; } }