/*
Theme Name: Quiet Creek
Theme URI: https://quietcreekpress.com/
Author: Quiet Creek Press
Description: Paper-white, cover-forward theme for a coloring-book publisher. Static-export friendly: no JavaScript beyond the nav toggle.
Version: 0.1.0
License: GNU General Public License v2 or later
Text Domain: quietcreek
*/

/* 1. Tokens */
:root {
  --paper: #fbf9f4; --paper-2: #f3efe6; --sand: #efe6d4;
  --ink: #1d1c1a; --ink-2: #4a4742; --muted: #7a766f; --line: #e6e1d6;
  --creek: #2a7f7a; --creek-hover: #226b67; --marigold: #e3a52a;
  --radius: 10px;
  --shadow: 0 1px 2px rgb(29 28 26 / .06), 0 8px 24px rgb(29 28 26 / .08);
  --serif: "Fraunces", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 32px; --s7: 48px;
  --t0: 17px; --t1: 20px; --t2: 24px; --t3: 29px; --t4: 35px; --t5: 42px;
  --container: 1120px;
}
@font-face {
  font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("assets/fonts/Fraunces-Variable.woff2") format("woff2");
}

/* 2. Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--t0)/1.6 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 var(--s4); letter-spacing: -0.01em; }
h1 { font-size: var(--t4); } h2 { font-size: var(--t3); } h3 { font-size: var(--t2); }
@media (min-width: 720px) { h1 { font-size: var(--t5); } }
p, ul, ol { margin: 0 0 var(--s4); }
a { color: var(--creek); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--creek-hover); }
:focus-visible { outline: 3px solid var(--marigold); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.prose { max-width: 68ch; }
.prose ul { list-style: none; padding-left: var(--s5); }
.prose ul li::before { content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 var(--s2) 0 calc(-1 * var(--s5)); background: url("assets/leaf.svg") center/contain no-repeat; vertical-align: -1px; }
.table-wrap { overflow-x: auto; margin: var(--s4) 0; border: 1px solid var(--line); border-radius: var(--radius); }
.table-wrap table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; background: var(--paper); }
.table-wrap th, .table-wrap td { padding: var(--s2) var(--s3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table-wrap thead th { background: var(--paper-2); font-weight: 600; white-space: nowrap; }
.table-wrap tbody tr:last-child td { border-bottom: 0; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.screen-reader-text:focus { clip: auto; width: auto; height: auto; overflow: visible; position: fixed; top: var(--s3); left: var(--s3); z-index: 100; padding: var(--s2) var(--s4); background: var(--paper); color: var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }

/* 3. Layout */
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--s4); }
.section { padding-top: var(--s6); padding-bottom: var(--s6); }
@media (min-width: 720px) { .section { padding-top: var(--s7); padding-bottom: var(--s7); } }
.band { background: var(--paper-2); }
.two-col { display: grid; gap: var(--s6); }
@media (min-width: 720px) { .two-col { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; } }
.grid { display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

/* 4. Header and footer */
.site-header { position: relative; border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .container { display: flex; align-items: center; gap: var(--s5); min-height: 64px; }
.wordmark { display: inline-flex; flex-direction: column; color: var(--ink); text-decoration: none; font-family: var(--serif); font-size: var(--t1); font-weight: 600; }
.wordmark { flex-direction: row; align-items: center; gap: var(--s2); }
.wordmark__logo { width: 48px; height: 48px; flex: none; }
.nav { display: none; margin: 0 0 0 auto; }
.nav__list { display: flex; list-style: none; margin: 0; padding: 0; gap: var(--s4); }
.nav a { color: var(--ink); text-decoration: none; padding: var(--s2) var(--s1); }
.nav__group { position: relative; }
.nav__menu { display: none; position: absolute; top: 100%; left: 0; min-width: 220px; margin: 0; padding: var(--s2) 0; list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); z-index: 10; }
.nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { display: block; }
.nav__menu a { display: block; min-height: 44px; line-height: 44px; padding: 0 var(--s4); }
.btn { display: inline-block; padding: var(--s3) var(--s5); min-height: 44px; border-radius: var(--radius); border: 1px solid var(--creek); color: var(--creek); background: transparent; font: 600 var(--t0)/1.2 var(--sans); text-decoration: none; cursor: pointer; }
.btn--primary { background: var(--creek); color: #fff; }
.btn--primary:hover { background: var(--creek-hover); color: #fff; }
.nav-toggle { margin-left: auto; background: none; border: 1px solid var(--line); border-radius: var(--radius); min-width: 44px; min-height: 44px; }
@media (min-width: 900px) { .nav { display: block; } .nav-toggle { display: none; } }
.nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 64px; background: var(--paper); border-bottom: 1px solid var(--line); padding: var(--s4); z-index: 20; }
.nav.is-open .nav__list { display: block; }
.nav.is-open .nav__menu { display: block; position: static; border: 0; box-shadow: none; }
.site-footer { border-top: 1px solid var(--line); background: var(--paper-2); padding: var(--s7) 0 var(--s6); font-size: 15px; color: var(--ink-2); }
.footer-cols { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--s6); }
.footer-cols h3 { font-size: var(--t0); margin-bottom: var(--s2); }
.footer-cols ul { list-style: none; padding: 0; margin: 0; }
.footer-cols li { margin-bottom: var(--s1); }
.footer-cols a, .crumbs a { display: inline-block; min-height: 44px; line-height: 44px; }
.disclosure { font-size: 14px; color: var(--muted); margin: var(--s2) 0 0; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: var(--s4) 0; padding: 0; font-size: 14px; color: var(--muted); }
.crumbs li + li::before { content: "›"; margin-right: var(--s2); }

/* 5. Components */
.tile { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2 / 3; padding: var(--s4); border-radius: 6px; background: var(--tile, var(--sand)); color: var(--ink); text-decoration: none; box-shadow: inset 0 0 0 1px rgb(29 28 26 / .08), inset 0 0 0 6px var(--tile, var(--sand)), inset 0 0 0 7px rgb(29 28 26 / .12); }
.tile__title { font-family: var(--serif); font-weight: 600; line-height: 1.1; }
.tile--l .tile__title { font-size: var(--t3); } .tile--m .tile__title { font-size: var(--t2); } .tile--s .tile__title { font-size: var(--t1); }
.tile__author { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); margin-top: var(--s2); }
.tile__tag { align-self: flex-end; font-size: 12px; color: var(--ink-2); border: 1px solid rgb(29 28 26 / .2); border-radius: 999px; padding: 2px 8px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.card:hover { box-shadow: var(--shadow); }
.card__media { display: block; padding: var(--s3); }
.card__media img { aspect-ratio: 2 / 3; object-fit: contain; width: 100%; border: 1px solid var(--line); background: #fff; }
.card__media--page img { aspect-ratio: 8.5 / 11; border: 6px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.card__body { padding: 0 var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.card__title { font-size: var(--t1); margin: 0; }
.card__title a { color: var(--ink); text-decoration: none; }
.card__author, .card__date, .card__from { color: var(--muted); font-size: 14px; margin: 0; }
.card__verdict { margin: 0; font-size: 15px; }
.card__link { margin: auto 0 0; }
.badge { align-self: flex-start; background: var(--sand); color: var(--ink-2); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; }
.list { display: grid; gap: var(--s5); }
.card--list { display: grid; grid-template-columns: 44px 140px 1fr; gap: var(--s4); padding: var(--s4); }
@media (max-width: 600px) { .card--list { grid-template-columns: 44px 1fr; } .card--list .card__media { grid-column: 2; max-width: 160px; } .card--list .card__body { grid-column: 1 / -1; } }
.card__num { font-family: var(--serif); font-size: var(--t3); color: var(--muted); }
.card__label { color: var(--creek); font-weight: 600; margin: 0; }
.card__pc { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; font-size: 15px; }
.card__pc ul { margin: 0; padding-left: var(--s5); }
.pros li::marker { content: "+ "; color: var(--creek); } .cons li::marker { content: "– "; color: var(--muted); }
.card--mini { flex-direction: row; align-items: center; gap: var(--s3); }
.card--mini .card__media { width: 72px; padding: var(--s2); }
.card--mini .card__body { padding: var(--s2) var(--s3) var(--s2) 0; }
.card--guide .card__collage { display: flex; gap: var(--s1); padding: var(--s3); background: var(--paper-2); }
.card--guide .card__collage img, .card--guide .card__collage .tile { width: 33%; }
.buy { margin: var(--s3) 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s4); border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 15px; }
.chip:hover { border-color: var(--creek); color: var(--creek); }
.chip--current { background: var(--creek); color: #fff; border-color: var(--creek); }
.chip--static { min-height: 0; padding: 2px 10px; font-size: 13px; color: var(--muted); }
.chip__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--dot, var(--sand)); border: 1px solid rgb(29 28 26 / .15); }

/* 8. Core blocks (the static export does not ship wp-block-library, so these are the plain rules) */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table th, .wp-block-table td { border: 1px solid var(--line); padding: var(--s2) var(--s3); text-align: left; }
.wp-block-image img { max-width: 100%; border-radius: var(--radius); }
.wp-block-quote { border-left: 3px solid var(--creek); padding-left: var(--s4); margin: 0 0 var(--s4); color: var(--ink-2); }
figure { margin: 0 0 var(--s4); }

/* 6. Pages */
.hero { padding: var(--s7) 0 var(--s4); }
.hero + .section { padding-top: var(--s4); }
.lead { font-size: var(--t1); color: var(--ink-2); }
/* The middle cover is in normal flow and sets the fan's height; the outer two sit 30px lower, so the
   bottom padding leaves room for them. The box hugs the covers instead of a fixed 4:3. */
.fan { position: relative; overflow: hidden; padding-bottom: 44px; }
.fan__c { position: absolute; width: 46%; border: 1px solid var(--line); box-shadow: var(--shadow); background: #fff; }
.fan__c--0 { left: 0; top: 30px; transform: rotate(-6deg); } .fan__c--1 { position: relative; display: block; margin-left: 27%; top: 0; z-index: 2; } .fan__c--2 { left: 54%; top: 30px; transform: rotate(6deg); }
@media (max-width: 719px) { .two-col > .fan { order: -1; } }
.book-hero .cover img, .book-hero .cover .tile { max-width: 420px; }
.details-strip { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); margin: var(--s4) 0; }
.details-strip dt, .who dt { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.details-strip dd, .who dd { margin: 0; font-weight: 600; }
.who { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.muted { color: var(--muted); font-weight: 400; }
.samples img { aspect-ratio: 8.5 / 11; object-fit: contain; border: 6px solid #fff; box-shadow: 0 0 0 1px var(--line); background: #fff; }
.details { border-collapse: collapse; margin-bottom: var(--s4); }
.details th, .details td { text-align: left; padding: var(--s2) var(--s4) var(--s2) 0; border-bottom: 1px solid var(--line); }
.details th { color: var(--muted); font-weight: 400; }
.page-preview img { border: 6px solid #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow); }
.from-book { margin-top: var(--s5); }
.guide .prose { max-width: 72ch; }
.pagination { margin-top: var(--s6); }

/* 7. Signup and FAQ */
.signup { background: var(--sand); border-radius: var(--radius); padding: var(--s5); margin: var(--s6) 0; }
.signup__title { margin-bottom: var(--s1); }
.signup__blurb { color: var(--ink-2); font-size: 15px; }
.signup__form { display: flex; flex-wrap: wrap; gap: var(--s2); }
.signup__form input { flex: 1 1 220px; min-height: 44px; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); font: inherit; }
.signup__fine { font-size: 13px; color: var(--muted); margin: var(--s2) 0 0; }
.faq__item { border-top: 1px solid var(--line); padding: var(--s3) 0; }
.faq__item summary { font-weight: 600; cursor: pointer; }

/* Etsy PDF button sits under the Amazon disclosure. */
.buy--etsy { margin: var(--s2) 0 0; }

/* Social icons in the footer: 44px targets, ink until hovered. */
.social { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0 0 var(--s4); padding: 0; }
.social__link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; color: var(--ink-2); border: 1px solid var(--line); background: var(--paper); }
.social__link:hover, .social__link:focus-visible { color: var(--creek); border-color: var(--creek); }
.social__link svg { width: 20px; height: 20px; }

/* Phones: the badge alone (it spells the name); the text stays for screen readers. */
@media (max-width: 519px) {
  .wordmark span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Social bar: the profile icons just below the header row, small and quiet. */
.topbar { background: var(--paper-2); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.topbar .container { display: flex; align-items: center; justify-content: flex-end; gap: var(--s3); min-height: 44px; }
.social--topbar { margin: 0; gap: 0; }
.social--topbar .social__link { width: 44px; height: 44px; border: 0; background: none; border-radius: 0; }
.social--topbar .social__link svg { width: 16px; height: 16px; }
@media (max-width: 519px) { .topbar__label { display: none; } .topbar .container { justify-content: center; } }

/* Sample viewer: a dialog over the book page. Esc, the backdrop or the button closes it. */
.viewer { border: 0; padding: var(--s6) var(--s4) var(--s4); max-width: min(92vw, 760px); max-height: 94vh; background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); }
.viewer::backdrop { background: rgb(29 28 26 / .72); }
.viewer__img { display: block; width: auto; max-width: 100%; max-height: calc(94vh - 7rem); margin: 0 auto; border: 1px solid var(--line); background: #fff; }
.viewer__close { position: absolute; top: var(--s2); right: var(--s2); width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 26px; line-height: 1; cursor: pointer; }
.viewer__close:hover { border-color: var(--creek); color: var(--creek); }
.viewer__caption { margin: var(--s2) 0 0; text-align: center; font-size: 14px; color: var(--muted); }
.sample-link { cursor: zoom-in; }