/*
 * The Juice Bar by DreadKnot Juice Press
 * An underground juice bar where knowledge is the juice and subjects are the
 * ingredients. Shell colors and fonts come from the DreadKnot site (ink, paper,
 * rescue green; Baron Kuffner, Norwester, Atkinson Hyperlegible, Daniel). The
 * bar's own palette: leaf green (from the owner's mockup), olive, warm orange, cream, over the owner's wood background.
 * Layout: header -> subject carousel -> hero (name | search) -> chalkboard copy
 * -> subject tiles -> recently added (catalog list appears only on search or "View all").
 */

@font-face { font-family: "Baron Kuffner"; src: url("../fonts/baron-kuffner.woff2") format("woff2"); font-display: swap; unicode-range: U+0020-007E; }
@font-face { font-family: "Daniel"; src: url("../fonts/daniel-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Daniel"; src: url("../fonts/daniel-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Norwester"; src: url("../fonts/norwester.woff2") format("woff2"); font-display: swap; }

:root {
  color-scheme: dark;
  --ink: #0c0c0b;
  --ink-raised: #151513;
  --ink-high: #1f1f1c;
  --line: #33332d;
  --line-strong: #4a4a42;
  --paper: #ede7d7;
  --paper-dim: #aaa493;
  --paper-faint: #77725f;
  --rescue: #baed66;

  --leaf: #8ca861;          /* sampled from the owner's mockup */
  --leaf-ink: #10170a;
  --leaf-tile: #1c2713;
  --leaf-tile-2: #2b3b1c;
  --amber: #f0a33c;
  --amber-tile: #4a2c0c;
  --amber-tile-2: #6a3f10;
  --olive: #c5c76a;
  --olive-tile: #2a2b12;
  --olive-tile-2: #3c3e18;

  --worn: "Baron Kuffner", "Norwester", "Atkinson Hyperlegible Next", Impact, sans-serif;
  --clean: "Norwester", "Atkinson Hyperlegible Next", "Arial Narrow", sans-serif;
  --sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --hand: "Daniel", "Atkinson Hyperlegible Next", cursive;
  --chalk-bg: #1b211c;
  --chalk: #ece9df;
  --chalk-yellow: #f2d98e;

  --radius: 6px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font-family: var(--sans); font-size: 16px; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--rescue); outline-offset: 3px; border-radius: 2px; }
.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: 16px; top: -60px; background: var(--rescue); color: var(--ink); padding: 8px 14px; font-weight: 700; z-index: 100; }
.skip:focus { top: 12px; }

/* The owner's wood background, fixed behind everything and darkened so text stays readable */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(10 8 6 / 0.5), rgb(10 8 6 / 0.68)), url("../img/bg-wood.webp") center / cover no-repeat; }
@media (prefers-contrast: more) { body::before { background: var(--ink); } }

/* Paper grain, as on the DreadKnot site */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: 0.06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -0.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@media (prefers-contrast: more) { body::after { display: none; } }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgb(12 12 11 / 0.94); backdrop-filter: blur(6px); border-bottom: 1px solid #2e2a1f; }
.site-header .wrap { display: flex; align-items: center; gap: 28px; min-height: 76px; padding-block: 10px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 22px; text-decoration: none; }
.brand-mark { width: 46px; height: 46px; object-fit: contain; flex: none; }
.wordmark { display: flex; flex-direction: column; line-height: 0.9; gap: 3px; }
.wordmark .w1 { font-family: var(--worn); font-size: 31px; letter-spacing: 0.01em; color: var(--paper); }
.wordmark .w1 b { font-weight: 400; color: var(--leaf); }
.wordmark .w2 { font-family: var(--clean); font-size: 12px; letter-spacing: 0.14em; color: var(--amber); }
.tagline { font-family: var(--clean); font-size: 14px; letter-spacing: 0.16em; color: var(--paper); }
.nav { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.nav a { font-family: var(--clean); letter-spacing: 0.1em; font-size: 15px; text-decoration: none; padding: 8px 14px; border-bottom: 3px solid transparent; color: var(--paper); }
.nav a:hover { color: var(--leaf); }
.nav a[aria-current="page"] { color: var(--leaf); border-bottom-color: var(--leaf); }
.queue-btn { display: inline-flex; align-items: center; gap: 10px; border: 2px solid var(--leaf); border-radius: 999px; background: transparent; padding: 8px 18px; font-family: var(--clean); letter-spacing: 0.08em; font-size: 14px; color: var(--leaf); cursor: pointer; }
.queue-btn:hover { background: var(--leaf-tile); }
.queue-btn svg { width: 20px; height: 20px; }
@media (max-width: 1060px) { .tagline { display: none; } }
@media (max-width: 760px) {
  .site-header .wrap { gap: 10px 16px; }
  .nav { order: 3; width: 100%; margin-left: -14px; }
  .queue-btn { margin-left: auto; }
  .wordmark .w1 { font-size: 26px; } .brand-mark { width: 38px; height: 38px; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid #2e2a1f; background:
  radial-gradient(55% 90% at 85% 20%, rgb(60 90 30 / 0.30), transparent 70%),
  radial-gradient(45% 70% at 10% 100%, rgb(240 163 60 / 0.10), transparent 70%); }
.hero-splash { position: absolute; z-index: -1; left: -60px; top: -40px; width: 560px; max-width: none; opacity: 0.06; pointer-events: none; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; padding-block: 40px 36px; }
.hero h1 { margin: 0; font-family: var(--worn); font-weight: 400; font-size: clamp(64px, 8.6vw, 124px); line-height: 0.86; text-transform: uppercase; }
.hero h1 .l2 { color: var(--leaf); }
.hero .by { margin: 14px 0 0; font-family: var(--clean); font-size: 20px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.hero .by strong { font-weight: 400; }
.hero .tag { margin: 4px 0 0; font-family: var(--hand); font-weight: 700; font-size: 30px; color: var(--olive); transform: rotate(-2deg); transform-origin: left; }
.hero .tag em { font-style: normal; }
.hero-find { position: relative; }
.free-stamp { display: inline-block; margin-bottom: 14px; padding: 4px 12px 3px; border: 2.5px solid var(--amber); border-radius: 4px; color: var(--amber); font-family: var(--clean); font-size: 15px; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-2.5deg); opacity: 0.95;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='60'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.7'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.free-stamp span { color: var(--paper-faint); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* ---------- The bar: chalkboard copy beside the jar shelf ---------- */
.bar { padding-block: 40px 8px; }
.bar .wrap { display: flex; justify-content: center; }
.bar .chalkboard { width: 100%; max-width: 860px; }
.chalkboard { position: relative; padding: 34px 38px 30px; color: var(--chalk); border-radius: 6px;
  background:
    radial-gradient(40% 30% at 22% 28%, rgb(255 255 255 / 0.05), transparent 70%),
    radial-gradient(35% 25% at 78% 70%, rgb(255 255 255 / 0.04), transparent 70%),
    radial-gradient(30% 20% at 60% 15%, rgb(255 255 255 / 0.035), transparent 70%),
    var(--chalk-bg);
  border: 14px solid #5b3a20;
  border-image: linear-gradient(135deg, #7a4f2c, #4a2e18 40%, #6b4426 70%, #3f2614) 1;
  box-shadow: inset 0 0 40px rgb(0 0 0 / 0.55), 0 18px 40px -18px rgb(0 0 0 / 0.9); }
.chalkboard::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 -0.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); }
.chalkboard p { margin: 0 0 14px; font-size: 17.5px; line-height: 1.6; max-width: 62ch; }
.chalkboard .chalk-q { font-family: var(--hand); font-weight: 700; font-size: 29px; line-height: 1.15; color: var(--chalk-yellow); margin: 6px 0 16px; }
.chalkboard .chalk-close { margin: 22px 0 0; padding-top: 18px; border-top: 2px dashed rgb(236 233 223 / 0.35); font-family: var(--hand); font-size: 30px; line-height: 1.2; color: var(--chalk); }
.chalkboard .chalk-close strong { font-weight: 700; }
@media (max-width: 520px) { .chalkboard { padding: 24px 20px 22px; border-width: 10px; } .chalkboard p { font-size: 16.5px; } .chalkboard .chalk-q { font-size: 25px; } .chalkboard .chalk-close { font-size: 25px; } }

.search { display: flex; background: var(--paper); border-radius: 8px; overflow: hidden; box-shadow: 0 10px 30px -10px rgb(0 0 0 / 0.6); }
.search label { display: flex; align-items: center; gap: 12px; flex: 1; padding: 0 16px; color: var(--ink); min-width: 0; }
.search svg { width: 24px; height: 24px; flex: none; }
.search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--ink); padding: 16px 0; }
.search input::placeholder { color: #5b5649; }
.search input:focus { outline: none; }
.search:focus-within { outline: 3px solid var(--rescue); outline-offset: 3px; }
.search button { border: 0; background: var(--leaf); color: var(--leaf-ink); font-family: var(--clean); letter-spacing: 0.08em; font-size: 17px; padding: 0 30px; cursor: pointer; }
.search button:hover { filter: brightness(1.08); }
.try { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 16px; font-size: 14px; color: var(--paper-dim); }
.chip { border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; padding: 5px 14px; font-size: 14px; color: var(--paper); cursor: pointer; }
.chip:hover { border-color: var(--leaf); color: var(--leaf); }
.chip[aria-pressed="true"] { background: var(--leaf); border-color: var(--leaf); color: var(--leaf-ink); }
.features { display: flex; flex-wrap: wrap; gap: 0; margin-top: 22px; justify-content: flex-end; }
.feature { display: flex; align-items: center; gap: 10px; padding: 2px 22px; font-size: 13px; line-height: 1.25; color: var(--paper-dim); border-left: 1px solid var(--line-strong); }
.feature:first-child { border-left: 0; }
.feature svg { width: 30px; height: 30px; color: var(--paper); flex: none; }


@media (max-width: 760px) {
  .features { justify-content: flex-start; }
  .feature { padding: 4px 14px 4px 0; border-left: 0; }
  .search button { padding: 0 18px; }
}

/* ---------- Sections ---------- */
.section { padding-block: 34px 10px; }
.section-head { display: flex; align-items: baseline; gap: 10px 18px; flex-wrap: wrap; margin-bottom: 18px; }
.section-head .hand { flex-basis: 100%; margin-bottom: -10px; font-family: var(--hand); font-weight: 700; font-size: 24px; color: var(--olive); transform: rotate(-1.5deg); transform-origin: left; }
.section-head h2 { margin: 0; font-family: var(--clean); font-weight: 400; font-size: clamp(28px, 3.4vw, 38px); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.section-head p { margin: 0; color: var(--paper-dim); font-size: 15px; }
.section-head .more { margin-left: auto; color: var(--leaf); text-decoration: none; font-size: 15px; display: inline-flex; gap: 8px; align-items: center; }
.section-head .more:hover { text-decoration: underline; }
.section-head .more.pill { border: 1.5px solid var(--leaf); border-radius: 999px; padding: 6px 16px; }
.divider { border: 0; height: 14px; margin: 0; opacity: 0.45;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='14'%3E%3Cpath d='M0 7 C15 1 25 13 40 7 S65 1 80 7 S105 13 120 7' fill='none' stroke='%23f0a33c' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center; }

/* ---------- Subject cards: picture, torn paper label, tagline, arrow ---------- */
.tiles { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1280px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.tile { position: relative; display: flex; flex-direction: column; padding: 0; border-radius: 8px; overflow: hidden; text-align: left; cursor: pointer;
  border: 1px solid rgb(140 168 97 / 0.35); background: linear-gradient(180deg, #141b0e, #0e130a); color: var(--paper);
  box-shadow: 0 14px 30px -18px #000; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf), 0 16px 34px -14px rgb(140 168 97 / 0.45); }
.tile[aria-pressed="true"] { border-color: var(--rescue); box-shadow: 0 0 0 2px var(--rescue); }
.tile-art { position: relative; display: block; aspect-ratio: 1 / 1.06; overflow: hidden; }
.tile-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.12) contrast(1.05); transition: transform .5s var(--ease); }
.tile:hover .tile-art img { transform: scale(1.05); }
.tile-ph { position: absolute; inset: 0; display: grid; place-items: center; }
.tile.leaf .tile-ph { color: var(--leaf); background: radial-gradient(70% 70% at 50% 40%, rgb(140 168 97 / 0.30), transparent 70%), linear-gradient(160deg, #2b3b1c, #121a0b); }
.tile.olive .tile-ph { color: var(--olive); background: radial-gradient(70% 70% at 50% 40%, rgb(197 199 106 / 0.26), transparent 70%), linear-gradient(160deg, #3c3e18, #1d1e0b); }
.tile.amber .tile-ph { color: var(--amber); background: radial-gradient(70% 70% at 50% 40%, rgb(240 163 60 / 0.28), transparent 70%), linear-gradient(160deg, #5a3510, #241304); }
.tile-ph::before { content: ""; position: absolute; inset: -10%; background: url("../img/dreadknot-mark.webp") center / 80% no-repeat; opacity: 0.07; }
.tile-ph svg { position: relative; width: 52%; height: auto; transform: translateY(-8%) rotate(-5deg); filter: drop-shadow(0 0 24px currentColor); }
.tile-label { position: relative; z-index: 2; align-self: flex-start; margin: -30px 0 0 10px; max-width: calc(100% - 20px); filter: drop-shadow(2px 4px 0 rgb(0 0 0 / 0.45)); transform: rotate(-2deg); }
.tile:nth-child(even) .tile-label { transform: rotate(1.5deg); }
.tile-label span { display: block; padding: 9px 13px 6px; background: #ede7d7; color: var(--ink); font-family: var(--worn); font-size: clamp(19px, 1.45vw, 25px); line-height: 0.95; text-transform: uppercase; letter-spacing: 0.01em;
  clip-path: polygon(0% 9%, 6% 0%, 14% 7%, 22% 1%, 31% 8%, 40% 2%, 49% 7%, 58% 0%, 67% 6%, 76% 1%, 85% 8%, 93% 2%, 100% 7%, 98% 50%, 100% 93%, 92% 100%, 83% 94%, 74% 100%, 65% 93%, 56% 99%, 47% 94%, 38% 100%, 29% 93%, 20% 99%, 11% 94%, 3% 100%, 0% 91%, 2% 50%); }
.tile-body { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 14px; flex: 1; }
.tile-blurb { font-size: 14px; line-height: 1.35; color: rgb(237 231 215 / 0.9); }
.tile .count { margin-top: auto; min-height: 36px; display: flex; align-items: center; padding-right: 44px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); }
.tile .go { position: absolute; right: 12px; bottom: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--leaf); color: var(--leaf-ink); display: grid; place-items: center; }
.tile .go svg { width: 20px; height: 20px; }
@media (max-width: 640px) { .tile-label span { font-size: 18px; } .tile .go { width: 32px; height: 32px; } }

/* ---------- Packet cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cards.row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .cards.row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cards.row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .cards.row { grid-template-columns: minmax(0, 1fr); } }
.card { display: flex; flex-direction: column; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; transition: border-color .2s, box-shadow .2s; }
.card:hover, .card:focus-within { border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf), 0 10px 26px -14px rgb(140 168 97 / 0.6); }
.card .thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #f4f1e8; overflow: hidden; }
.card .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: sepia(0.25) contrast(1.05); }
.card .thumb .pill { position: absolute; left: 10px; bottom: 8px; }
.card .thumb.empty { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #1b1b18 0 10px, #161613 10px 20px); color: var(--paper-faint); font-family: var(--clean); letter-spacing: 0.1em; font-size: 14px; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; line-height: 1.5; }
.pill.leaf { background: var(--leaf); color: var(--leaf-ink); }
.pill.olive { background: var(--olive); color: #1c1d08; }
.pill.amber { background: var(--amber); color: #2a1606; }
.card .body { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px 12px; flex: 1; }
.card .code { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--paper-faint); }
.card h3 { margin: 0; font-family: var(--clean); font-weight: 400; font-size: 19px; line-height: 1.08; letter-spacing: 0.02em; }
.card .subtitle { font-size: 14px; color: var(--paper); }
.card .desc { font-size: 13.5px; color: var(--paper-dim); line-height: 1.42; margin-top: 4px; }
.card .flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.flag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--paper-dim); border-radius: 4px; padding: 1px 6px; }
.flag.staff { border-color: var(--amber); color: var(--amber); }
.flag.pending { border-color: var(--paper-faint); color: var(--paper-faint); border-style: dashed; }
.card .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 10px 14px 12px; border-top: 1px solid var(--line); font-size: 13px; color: var(--paper-dim); }
.card .foot span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.card .foot svg { width: 16px; height: 16px; }
.card .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--leaf); background: transparent; color: var(--leaf); display: grid; place-items: center; cursor: pointer; text-decoration: none; flex: none; }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: var(--leaf-tile); }
.icon-btn[aria-pressed="true"] { background: var(--leaf); color: var(--leaf-ink); }
.text-link { color: var(--leaf); font-size: 13px; text-decoration: none; }
.text-link:hover { text-decoration: underline; }

/* ---------- Catalog filters ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-bottom: 16px; padding: 12px 14px; background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); }
.filters label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); min-width: 0; }
.filters select, .filters input { font: inherit; font-size: 15px; letter-spacing: 0; text-transform: none; font-weight: 400; color: var(--paper); background: var(--ink); border: 1px solid var(--line-strong); border-radius: 4px; padding: 7px 10px; min-width: 0; max-width: 100%; }
.filters .grow { flex: 1 1 220px; }
.filters .result-count { margin-left: auto; font-size: 14px; color: var(--paper-dim); align-self: flex-end; padding-bottom: 6px; }
.filters .clear { align-self: flex-end; background: none; border: 0; color: var(--leaf); cursor: pointer; padding: 8px 4px; font-size: 14px; }
.empty-state { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 26px; color: var(--paper-dim); text-align: center; }

/* ---------- Print queue drawer ---------- */
.drawer-backdrop { position: fixed; inset: 0; background: rgb(0 0 0 / 0.55); z-index: 70; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); z-index: 80; background: var(--ink-raised); border-left: 2px solid var(--leaf); display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) 20px; }
.drawer h2 { margin: 0; font-family: var(--clean); font-weight: 400; letter-spacing: 0.08em; font-size: 26px; }
.drawer .close { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); background: none; border: 0; color: var(--paper); cursor: pointer; padding: 8px; }
.drawer .close svg { width: 22px; height: 22px; }
.drawer .hint { color: var(--paper-dim); font-size: 14px; margin: 6px 0 14px; }
.queue-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.queue-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; background: var(--ink-high); border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; }
.queue-list .qt { font-weight: 700; font-size: 14.5px; }
.queue-list .qm { font-size: 12.5px; color: var(--paper-dim); }
.queue-list button { grid-row: 1 / span 2; grid-column: 2; background: none; border: 1px solid var(--line-strong); color: var(--paper-dim); border-radius: 4px; padding: 4px 8px; cursor: pointer; font-size: 13px; }
.queue-list button:hover { color: var(--paper); border-color: var(--paper-dim); }
.drawer .totals { margin: 12px 0 10px; font-size: 14px; color: var(--paper-dim); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid var(--leaf); background: var(--leaf); color: var(--leaf-ink); font-family: var(--clean); letter-spacing: 0.08em; font-size: 16px; padding: 10px 18px; border-radius: 6px; cursor: pointer; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--leaf); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
.drawer .row { display: flex; gap: 10px; flex-wrap: wrap; }
.drawer .status { min-height: 1.4em; margin-top: 10px; font-size: 14px; color: var(--rescue); }

/* ---------- Prose pages ---------- */
.page-hero { padding-block: 40px 24px; border-bottom: 1px solid #2e2a1f; background: radial-gradient(60% 120% at 90% 0%, rgb(60 90 30 / 0.28), transparent 70%); }
.page-hero h1 { margin: 0; font-family: var(--worn); font-weight: 400; font-size: clamp(46px, 7vw, 82px); line-height: 0.9; text-transform: uppercase; }
.page-hero h1 span { color: var(--leaf); }
.page-hero p { max-width: 62ch; color: var(--paper); font-size: 18px; margin: 14px 0 0; }
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--clean); font-weight: 400; font-size: 26px; letter-spacing: 0.05em; text-transform: uppercase; margin: 34px 0 8px; }
.prose h3 { font-size: 18px; margin: 20px 0 4px; }
.prose p, .prose li { color: rgb(237 231 215 / 0.9); }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--paper); }
.prose .callout { border-left: 4px solid var(--leaf); background: var(--ink-raised); padding: 12px 16px; margin: 18px 0; }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 860px) { .two-col { grid-template-columns: minmax(0, 1fr); } }
.side-card { background: var(--ink-raised); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: sticky; top: 96px; }
.side-card h3 { margin: 0 0 8px; font-family: var(--clean); font-weight: 400; letter-spacing: 0.06em; font-size: 20px; }
.table-scroll { overflow-x: auto; }
.codes { border-collapse: collapse; width: 100%; font-size: 14.5px; }
.codes th, .codes td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.codes th { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper-dim); font-weight: 700; }
.codes td:first-child { font-weight: 700; white-space: nowrap; }

/* ---------- Footer ---------- */
.site-footer { margin-top: 56px; border-top: 1px solid #2e2a1f; padding-block: 30px calc(30px + env(safe-area-inset-bottom, 0px)); color: var(--paper-dim); font-size: 14px; }
.site-footer .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.site-footer img { width: 72px; height: auto; }
.site-footer .free { font-family: var(--clean); letter-spacing: 0.12em; color: var(--paper); font-size: 15px; }
.site-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.site-footer nav a { color: var(--paper-dim); text-decoration: none; }
.site-footer nav a:hover { color: var(--leaf); }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: minmax(0, 1fr); } }

.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 90; background: var(--paper); color: var(--ink); font-weight: 700; padding: 10px 16px; border-radius: 6px; font-size: 14px; max-width: calc(100% - 32px); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .tile:hover { transform: none; } }

/* ---------- Subject carousel: big sliding image cards ---------- */
.carousel { position: relative; padding-top: 22px; border-bottom: 1px solid #2e2a1f; overflow: hidden; overflow: clip; /* clip: the section can never be scrolled sideways */
  background:
    radial-gradient(45% 55% at 50% 38%, rgb(240 163 60 / 0.10), transparent 70%),
    radial-gradient(55% 80% at 88% 0%, rgb(60 90 30 / 0.28), transparent 70%),
    radial-gradient(45% 70% at 8% 100%, rgb(60 90 30 / 0.14), transparent 70%); }
.car-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; margin-bottom: 6px; }
.car-head .hand { font-family: var(--hand); font-weight: 700; font-size: 26px; color: var(--olive); transform: rotate(-1.5deg); }
.car-title { margin: 0; font-family: var(--clean); font-weight: 400; font-size: clamp(26px, 3vw, 36px); letter-spacing: 0.08em; text-transform: uppercase; }
.stage { position: relative; height: clamp(380px, 60vh, 640px); }
.slides { position: absolute; inset: 0; touch-action: pan-y; }
.slide { --w: min(1040px, 76vw); position: absolute; top: 3%; bottom: 3%; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2);
  border-radius: 14px; overflow: hidden; border: 2px solid var(--line); background: var(--ink-raised); cursor: pointer;
  transform: translateX(calc(var(--off) * var(--w) * 0.86)) scale(0.82); opacity: 0; filter: brightness(0.45) saturate(0.8); z-index: 0;
  transition: transform 0.8s var(--ease), opacity 0.8s var(--ease), filter 0.8s var(--ease), border-color 0.8s;
  box-shadow: 0 30px 60px -28px #000; }
.slide[data-pos="active"] { transform: translateX(0) scale(1); opacity: 1; filter: none; z-index: 3; cursor: default; }
.slide[data-pos="near"] { opacity: 0.95; z-index: 2; filter: brightness(0.62) saturate(0.85); }
.slide[data-pos="far"] { pointer-events: none; }
.slide.leaf[data-pos="active"] { border-color: var(--leaf); }
.slide.olive[data-pos="active"] { border-color: var(--olive); }
.slide.amber[data-pos="active"] { border-color: var(--amber); }
.slide-art { position: absolute; inset: 0; overflow: hidden; }
.slide-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide[data-pos="active"] .slide-art > * { animation: drift 14s ease-out both; }
@keyframes drift { from { transform: scale(1.09) translateX(1.5%); } to { transform: scale(1) translateX(0); } }
/* Placeholder art until a subject has its own picture: subject color, the DreadKnot splash, the subject icon */
.slide-placeholder { position: absolute; inset: 0; }
.slide.leaf .slide-placeholder { background: radial-gradient(70% 90% at 78% 40%, rgb(140 168 97 / 0.35), transparent 70%), linear-gradient(135deg, #2b3b1c, #121a0b); }
.slide.olive .slide-placeholder { background: radial-gradient(70% 90% at 78% 40%, rgb(197 199 106 / 0.28), transparent 70%), linear-gradient(135deg, #3c3e18, #1d1e0b); }
.slide.amber .slide-placeholder { background: radial-gradient(70% 90% at 78% 40%, rgb(240 163 60 / 0.32), transparent 70%), linear-gradient(135deg, #6a3f10, #2a1606); }
.slide-placeholder::before { content: ""; position: absolute; right: -6%; top: -18%; width: 70%; aspect-ratio: 1; background: url("../img/dreadknot-mark.webp") center / contain no-repeat; opacity: 0.08; }
.slide-placeholder::after { content: ""; position: absolute; inset: 0; opacity: 0.16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"); }
.ph-icon { position: absolute; right: 8%; top: 50%; width: min(34%, 300px); aspect-ratio: 1; transform: translateY(-50%) rotate(-6deg); opacity: 0.9; filter: drop-shadow(0 0 36px currentColor); }
.ph-icon svg { width: 100%; height: 100%; }
.slide.leaf .ph-icon { color: var(--leaf); } .slide.olive .ph-icon { color: var(--olive); } .slide.amber .ph-icon { color: var(--amber); }
.slide::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgb(12 12 11 / 0.9) 0%, rgb(12 12 11 / 0.55) 42%, transparent 72%); }
.slide-text { position: absolute; z-index: 2; left: clamp(20px, 4vw, 56px); bottom: clamp(22px, 6%, 52px); max-width: min(520px, 82%);
  opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease) 0.25s, transform 0.6s var(--ease) 0.25s; }
.slide[data-pos="active"] .slide-text { opacity: 1; transform: none; }
.slide-count { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber); }
.slide-name { margin: 4px 0 6px; font-family: var(--clean); font-weight: 400; font-size: clamp(34px, 4.6vw, 64px); line-height: 0.98; letter-spacing: 0.02em; }
.slide-blurb { margin: 0 0 16px; font-size: 17px; color: var(--paper); max-width: 40ch; }
.car-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--leaf); background: rgb(12 12 11 / 0.78); color: var(--leaf); display: grid; place-items: center; cursor: pointer; }
.car-arrow svg { width: 30px; height: 30px; }
.car-arrow:hover { background: var(--leaf); color: var(--leaf-ink); }
.car-arrow.prev { left: max(12px, 2.5vw); } .car-arrow.next { right: max(12px, 2.5vw); }
.car-pause { position: absolute; z-index: 5; top: calc(3% + 12px); right: calc(50% - min(1040px, 76vw) / 2 + 12px); width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: rgb(12 12 11 / 0.7); color: var(--paper-dim); display: grid; place-items: center; cursor: pointer; }
.car-pause svg { width: 16px; height: 16px; }
.car-pause:hover { color: var(--paper); border-color: var(--paper-dim); }
.car-progress { width: min(1040px, 76vw); height: 3px; margin: 8px auto 0; background: var(--line); border-radius: 3px; overflow: hidden; }
.car-progress span { display: block; height: 100%; background: var(--amber); transform-origin: left; transform: scaleX(0); }
.is-paused .car-progress { opacity: 0.35; }
.car-dots { position: relative; display: flex; gap: 8px; overflow-x: auto; padding: 14px 2px 6px; scrollbar-width: thin; justify-content: safe center; }
.car-dot { flex: none; border: 1.5px solid var(--line-strong); border-radius: 999px; background: transparent; color: var(--paper-dim); padding: 5px 13px; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.car-dot:hover { color: var(--paper); border-color: var(--leaf); }
.car-dot[aria-current="true"] { background: var(--leaf); border-color: var(--leaf); color: var(--leaf-ink); font-weight: 700; }
.scroll-cue { display: flex; flex-direction: column; align-items: center; gap: 0; width: max-content; margin: 8px auto 0; padding: 6px 14px 14px; text-decoration: none; font-family: var(--clean); letter-spacing: 0.12em; text-transform: uppercase; font-size: 14px; color: var(--amber); }
.scroll-cue svg { width: 26px; height: 26px; animation: cue 1.8s var(--ease) infinite; }
.scroll-cue:hover { color: var(--paper); }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@media (max-width: 760px) {
  .stage { height: clamp(440px, 66vh, 580px); }
  .slide { --w: 88vw; }
  .slide::after { background: linear-gradient(0deg, rgb(12 12 11 / 0.95) 0%, rgb(12 12 11 / 0.75) 45%, transparent 78%); }
  .slide-text { left: 18px; right: 18px; max-width: none; bottom: 18px; }
  .slide-blurb { font-size: 15.5px; }
  .ph-icon { top: 26%; right: 50%; transform: translate(50%, -50%) rotate(-6deg); width: 44%; }
  .car-arrow { width: 46px; height: 46px; top: 28%; }
  .car-arrow svg { width: 22px; height: 22px; }
  .car-pause { right: calc(6vw + 10px); }
  .car-progress { width: 88vw; }
}

/* ---------- Subject panel ---------- */
.subject-panel { position: fixed; z-index: 80; left: 50%; top: max(4vh, env(safe-area-inset-top, 0px)); transform: translateX(-50%); width: min(1120px, calc(100% - 24px)); max-height: calc(100% - 8vh); display: flex; flex-direction: column; background: var(--ink-raised); border: 2px solid var(--leaf); border-radius: 12px; box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.9); }
.subject-panel.olive { border-color: var(--olive); } .subject-panel.amber { border-color: var(--amber); }
.subject-panel .close { position: absolute; top: 12px; right: 12px; background: none; border: 0; color: var(--paper); cursor: pointer; padding: 8px; }
.subject-panel .close svg { width: 24px; height: 24px; }
.sp-head { display: flex; gap: 16px; align-items: center; padding: 20px 64px 14px 22px; border-bottom: 1px solid var(--line); }
.sp-icon { width: 64px; height: 64px; flex: none; color: var(--leaf); }
.subject-panel.olive .sp-icon { color: var(--olive); } .subject-panel.amber .sp-icon { color: var(--amber); }
.sp-head h2 { margin: 0; font-family: var(--clean); font-weight: 400; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: 0.04em; line-height: 1; }
.sp-head p { margin: 4px 0 0; color: var(--paper-dim); }
.sp-body { overflow: auto; padding: 18px 22px; flex: 1; }
.sp-sub { font-family: var(--clean); font-weight: 400; letter-spacing: 0.08em; font-size: 20px; margin: 22px 0 10px; color: var(--paper-dim); }
.sp-foot { padding: 12px 22px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
@media (max-width: 760px) { .subject-panel { top: 0; width: 100%; max-height: 100%; height: 100%; border-radius: 0; border-width: 0; } .sp-icon { width: 48px; height: 48px; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }

@media (max-width: 480px) {
  .queue-btn { padding: 8px 12px; }
  .queue-btn .q-label { display: none; }
  .wordmark .w1 { font-size: 23px; } .wordmark .w2 { font-size: 10.5px; }
  .brand { gap: 10px; }
}

/* ---------- "Fresh off the press": geometric pattern bands (triangles, dots, rules) ---------- */
.pattern-band, .press-mark .band {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='22'%3E%3Cpath d='M0 1.5h28M0 20.5h28' stroke='%23f0a33c' stroke-width='2'/%3E%3Cpath d='M0 17 L7 5 L14 17z' fill='%23f0a33c'/%3E%3Cpath d='M14 5 L21 17 L28 5' fill='none' stroke='%23ede7d7' stroke-width='1.6'/%3E%3Ccircle cx='21' cy='9' r='1.4' fill='%23ede7d7'/%3E%3C/svg%3E") repeat-x left center;
}
.pattern-band { height: 22px; margin-bottom: 26px; opacity: 0.75; }
.press-mark { flex-basis: 100%; display: flex; align-items: center; gap: 14px; margin-bottom: 4px; }
.press-mark .band { flex: 1 1 40px; max-width: 160px; height: 22px; }
.press-mark .band:last-child { flex-grow: 6; max-width: none; opacity: 0.55; }
.press-word { flex: none; font-family: var(--worn); font-size: clamp(24px, 2.6vw, 32px); line-height: 1; text-transform: uppercase; letter-spacing: 0.04em; color: var(--amber); padding: 4px 12px 2px; border: 2px solid var(--amber); transform: rotate(-1.5deg); }
@media (max-width: 520px) { .press-mark .band:first-child { display: none; } }

/* ---------- Brush-stroke section headings ---------- */
.section-head h2.brush-head { position: relative; isolation: isolate; font-family: var(--worn); letter-spacing: 0.02em; padding: 2px 14px 0 6px; }
.section-head h2.brush-head::before { content: ""; position: absolute; z-index: -1; left: -14px; top: 22%; bottom: 4%; width: 58%; background: var(--leaf); opacity: 0.7; transform: skewX(-14deg) rotate(-1.5deg);
  clip-path: polygon(0% 30%, 4% 8%, 18% 14%, 34% 0%, 52% 10%, 70% 2%, 88% 12%, 100% 6%, 97% 48%, 100% 92%, 82% 100%, 60% 90%, 41% 100%, 22% 92%, 6% 100%, 2% 70%); }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Shared lesson buttons ---------- */
.lesson-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lesson-buttons .btn { font-size: 14px; padding: 8px 13px; }
.lesson-buttons .btn svg { width: 17px; height: 17px; }
.btn.ghost { background: rgb(12 12 11 / 0.55); }

/* ---------- Featured collection band (homepage) ---------- */
.feature-band { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 18px 24px; align-items: center; padding: 24px 28px; text-decoration: none; color: var(--paper); border-radius: 12px; overflow: hidden;
  border: 1px solid rgb(140 168 97 / 0.5); background: radial-gradient(60% 120% at 0% 50%, rgb(140 168 97 / 0.22), transparent 70%), linear-gradient(120deg, #18210f, #0f140a 70%); box-shadow: 0 18px 40px -22px #000; transition: border-color .2s, box-shadow .2s; }
.feature-band:hover, .feature-band:focus-visible { border-color: var(--leaf); box-shadow: 0 0 0 1px var(--leaf), 0 18px 40px -18px rgb(140 168 97 / 0.5); }
.fb-sprig { width: 90px; height: 150px; color: var(--leaf); }
.fb-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fb-kicker, .col-kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.fb-title { font-family: var(--worn); font-size: clamp(38px, 4.6vw, 60px); line-height: 0.95; text-transform: uppercase; }
.fb-sub { font-family: var(--hand); font-weight: 700; font-size: 24px; color: var(--leaf); }
.fb-intro { max-width: 62ch; font-size: 16px; color: rgb(237 231 215 / 0.9); }
.fb-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fb-cats span { border: 1px solid rgb(140 168 97 / 0.55); border-radius: 999px; padding: 3px 11px; font-size: 13px; color: var(--paper); }
@media (max-width: 900px) { .feature-band { grid-template-columns: minmax(0, 1fr); } .fb-emblem { width: 110px; } .fb-go { justify-self: start; } }

/* ---------- Featured collection page ---------- */
.col-hero { position: relative; overflow: hidden; padding-block: 46px 34px; text-align: center; border-bottom: 1px solid #2e2a1f;
  background: radial-gradient(50% 80% at 50% 0%, rgb(140 168 97 / 0.22), transparent 70%); }
.col-hero h1 { margin: 6px 0 0; font-family: var(--worn); font-weight: 400; font-size: clamp(58px, 9vw, 112px); line-height: 0.9; text-transform: uppercase; }
.col-sub { margin: 10px 0 0; font-family: var(--hand); font-weight: 700; font-size: clamp(24px, 3vw, 34px); color: var(--leaf); }
.col-intro { max-width: 760px; margin: 22px auto 0; padding: 22px 28px; text-align: left; border-radius: 10px; background: rgb(12 12 11 / 0.72); border: 1px solid var(--line); }
.col-intro p { margin: 0 0 12px; font-size: 17.5px; line-height: 1.6; }
.col-intro p:last-child { margin-bottom: 0; }
.col-sprig { position: absolute; top: 30px; width: 110px; height: 200px; color: var(--leaf); opacity: 0.55; pointer-events: none; }
.col-sprig.left { left: max(10px, 4vw); transform: rotate(-12deg); }
.col-sprig.right { right: max(10px, 4vw); transform: scaleX(-1) rotate(-12deg); }
@media (max-width: 760px) { .col-sprig { display: none; } }
.col-cat { margin-bottom: 34px; }
.col-cat-title { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; font-family: var(--clean); font-weight: 400; font-size: clamp(24px, 3vw, 32px); letter-spacing: 0.05em; text-transform: uppercase; border-bottom: 2px solid rgb(140 168 97 / 0.5); padding-bottom: 8px; }
.col-num { font-family: var(--worn); color: var(--leaf); font-size: 1.2em; }
.col-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 22px; padding: 18px; border-radius: 10px; background: var(--ink-raised); border: 1px solid var(--line); }
.col-card:hover, .col-card:focus-within { border-color: var(--leaf); }
.col-thumb { display: block; border-radius: 4px; overflow: hidden; background: #fff; aspect-ratio: 408 / 528; box-shadow: 0 10px 24px -14px #000; }
.col-thumb img { width: 100%; height: 100%; object-fit: cover; }
.col-body h3 { margin: 4px 0 6px; font-family: var(--clean); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.05; letter-spacing: 0.02em; }
.col-body p { margin: 0 0 8px; color: rgb(237 231 215 / 0.9); max-width: 70ch; }
.col-body .code { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--paper-faint); }
.col-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; color: var(--paper-dim); }
.col-meta span { display: inline-flex; align-items: center; gap: 6px; }
.col-meta svg { width: 16px; height: 16px; }
@media (max-width: 640px) { .col-card { grid-template-columns: minmax(0, 1fr); } .col-thumb { max-width: 200px; } }

/* ---------- Lesson preview page ---------- */
.lp { padding-block: 26px 10px; }
.crumbs { font-size: 14px; color: var(--paper-dim); margin-bottom: 14px; }
.crumbs a { color: var(--leaf); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 32px; align-items: start; }
@media (max-width: 960px) { .lp-grid { grid-template-columns: minmax(0, 1fr); } }
.lp-info { padding: 22px 24px; border-radius: 10px; background: rgb(12 12 11 / 0.8); border: 1px solid var(--line); }
.lp-info .code { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; color: var(--amber); text-transform: uppercase; }
.lp-title { margin: 6px 0 10px; font-family: var(--clean); font-weight: 400; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.02; letter-spacing: 0.02em; }
.lp-desc { font-size: 17px; margin: 0 0 14px; }
.lp-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin: 0 0 14px; }
.lp-facts div { border-top: 1px solid var(--line); padding-top: 6px; }
.lp-facts dt { font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper-dim); }
.lp-facts dd { margin: 2px 0 0; font-size: 15px; }
.lp-h { margin: 6px 0 6px; font-family: var(--clean); font-weight: 400; font-size: 20px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--leaf); }
.lp-obj { margin: 0; padding-left: 20px; }
.lp-obj li { margin-bottom: 6px; }
.lp-note { font-size: 13.5px; color: var(--paper-dim); margin: 10px 0 0; }
.lp-preview { border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #2a2a26; }
.lp-preview object { display: block; width: 100%; height: min(86vh, 1000px); }
.lp-preview object img { display: block; max-width: 100%; margin: 0 auto; }
@media (max-width: 960px) { .lp-preview object { height: 70vh; } }

/* ---------- Credits table ---------- */
.credits td, .credits th { font-size: 14px; }
.credits td:first-child { white-space: nowrap; }
.credits a { color: var(--leaf); }
.credits tbody tr:nth-child(even) td { background: rgb(255 255 255 / 0.025); }

/* ---------- Maya's Blend emblem ---------- */
.col-emblem { display: block; width: clamp(150px, 17vw, 220px); height: auto; margin: 0 auto 14px; filter: drop-shadow(0 14px 26px rgb(0 0 0 / 0.6)); }
.fb-emblem { width: 150px; height: auto; filter: drop-shadow(0 10px 20px rgb(0 0 0 / 0.55)); transition: transform .3s var(--ease); }
.feature-band:hover .fb-emblem { transform: rotate(-3deg) scale(1.03); }

/* Hero without a search bar: stamp and badges stacked on the right */
.hero-find { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hero-find .free-stamp { font-size: 19px; padding: 6px 16px 5px; }
@media (max-width: 900px) { .hero-find { align-items: flex-start; } }

/* Hero first: title, who it's for, and Free · Printable · No login all fit on the first screen */
.hero .wrap { padding-block: 26px 24px; gap: 18px 40px; }
.hero h1 { font-size: clamp(50px, 6.4vw, 96px); }
.hero .who { margin: 12px 0 0; max-width: 34ch; font-size: 18px; line-height: 1.4; color: var(--paper); }
.carousel { padding-top: 14px; }
@media (max-width: 900px) {
  .hero .wrap { padding-block: 16px 16px; gap: 12px; }
  .hero h1 { font-size: 46px; }
  .hero .by { font-size: 15px; margin-top: 8px; }
  .hero .tag { font-size: 22px; }
  .hero .who { font-size: 16px; margin-top: 8px; }
  .hero-find .free-stamp { font-size: 15px; padding: 4px 12px 3px; margin-bottom: 0; }
  .hero .features { display: none; }
}

/* ---------- First-visit free-use notice (SHIELD spec). In normal flow: never fixed, never an overlay. ---------- */
.jb-notice { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
  padding: 8px 16px; background: var(--leaf-tile, #1c2713); color: var(--paper, #ede7d7);
  font-family: var(--sans); font-size: 15px; line-height: 1.4; border-bottom: 1px solid var(--line, #33332d); }
.jb-notice[hidden] { display: none; }
.jb-notice p { margin: 0; }
.jb-notice a { color: var(--amber, #f0a33c); text-decoration: underline; margin-left: 6px; }
.jb-notice-ok { min-height: 36px; min-width: 64px; padding: 6px 18px; border: 0; border-radius: 999px;
  background: var(--amber, #f0a33c); color: var(--ink, #0c0c0b); font: inherit; font-weight: 700; cursor: pointer; }
.jb-notice a:focus-visible, .jb-notice-ok:focus-visible { outline: 3px solid var(--paper, #ede7d7); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .jb-notice, .jb-notice * { transition: none !important; animation: none !important; } }
@media print { .jb-notice { display: none; } }

/* Footer copyright notice */
.site-footer .legal { margin: 8px 0 4px; font-size: 13.5px; line-height: 1.5; color: var(--paper-dim); max-width: 80ch; }
.site-footer .legal strong { color: var(--paper); }
.site-footer .legal a { color: var(--leaf); }