/* ==========================================================================
   site.css — castmarkpress.com

   The publisher's own pages. It loads AFTER app.css and borrows its tokens
   wholesale, so the catalogue, the book pages and the companion apps are
   visibly one object: a reader who scans the QR code inside a book should feel
   they landed somewhere that belongs to the same people.

   Where it differs from the app: the app is a tool used one-thumbed in a cab,
   so it is dense and tappable. These pages are read once, usually on a phone
   the reader is holding still, so they can breathe.
   ========================================================================== */

/* ------------------------------------------------------------------ shell */
.sitewrap{max-width:var(--maxw);margin:0 auto;padding:0 18px 72px}

/* Full-bleed by sitting outside .sitewrap, so it carries the wrap's padding
   itself rather than a negative margin — which pushed it past the viewport edge
   and gave every page a horizontal scrollbar. */
.sitebar{position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid var(--line);padding:0 18px}
.sitebar .in{max-width:var(--maxw);margin:0 auto;display:flex;align-items:center;
  gap:12px;min-height:60px}
.sitebar .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.sitebar .brand img{border-radius:8px}
.sitebar .brand b{font-size:1rem;letter-spacing:-.01em}
.sitebar .brand span{display:block;font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700}
.sitebar nav{margin-left:auto;display:flex;gap:4px}
.sitebar nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;
  border-radius:9px;text-decoration:none;color:var(--ink-2);font-size:.9rem;font-weight:650}
.sitebar nav a:hover{background:var(--surface-2);color:var(--ink)}
.sitebar nav a[aria-current]{color:var(--navy);background:var(--blue-l)}
@media (prefers-color-scheme:dark){.sitebar nav a[aria-current]{color:var(--blue-d)}}

/* ------------------------------------------------------------------- hero */
.sitehero{padding:44px 0 30px;border-bottom:1px solid var(--line);margin-bottom:32px}
.sitehero .eyebrow{font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:800;color:var(--gold);margin-bottom:14px}
.sitehero h1{font-size:clamp(1.75rem,6vw,2.5rem);letter-spacing:-.02em;margin-bottom:14px;
  max-width:15ch}
.sitehero p{font-size:1.08rem;color:var(--ink-2);max-width:52ch;margin:0 0 8px}
.sitehero .row{margin-top:22px}

/* --------------------------------------------------------------- sections */
.sitesec{margin:44px 0 0}
.sitesec > h2{font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-weight:800;padding-bottom:10px;border-bottom:1px solid var(--line);
  margin-bottom:20px}

/* ------------------------------------------------------------- book cards */
.shelf{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:600px){.shelf{grid-template-columns:1fr 1fr}}

.bookcard{display:flex;align-items:flex-start;gap:15px;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.bookcard .meta{align-self:stretch}
.bookcard:hover{border-color:var(--line-2);box-shadow:var(--shadow-lg)}
/* A definite box, not an aspect-ratio. Covers arrive in different shapes —
   640x1024 for a 6x9, 640x828 for an 8.5x11 — and an aspect-ratio box let the
   taller ones render past their container instead of cropping. */
.bookcard .art{flex:0 0 76px;width:76px;height:103px;border-radius:6px;
  overflow:hidden;background:var(--surface-3);display:block}
.bookcard .art img{width:100%;height:100%;object-fit:cover;display:block}
.bookcard .art .initials{display:grid;place-items:center;width:100%;height:100%}
/* A book with no cover yet gets its initials, not a broken image frame. */
.bookcard .art .initials{font-weight:800;font-size:1.4rem;color:var(--ink-3);letter-spacing:-.03em}
.bookcard .meta{flex:1;min-width:0;display:flex;flex-direction:column}
.bookcard .meta b{font-size:1rem;line-height:1.3;letter-spacing:-.01em}
.bookcard .meta .sub{font-size:.85rem;color:var(--ink-3);margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bookcard .meta .tags{margin-top:auto;padding-top:10px;display:flex;gap:6px;flex-wrap:wrap}

.tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:20px;background:var(--surface-3);color:var(--ink-2);
  border:1px solid var(--line)}
/* NOT `.tag.app`. app.css styles `.app` unscoped — it is the application
   shell, `min-height:100dvh;display:flex` — and a tag carrying that class
   inherited a full viewport of height, which cascaded up and made every book
   card 640px tall. Both stylesheets load on every page, so a site class may
   never reuse a bare app.css class name. tools/build_site.py asserts this. */
.tag.hasapp{background:var(--gold-l);border-color:var(--gold);color:var(--warn)}
.tag.soon{background:var(--blue-l);border-color:var(--blue);color:var(--blue-d)}

/* --------------------------------------------------------------- one book */
.bookhead{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:8px}
.bookhead .art{flex:0 0 150px;width:150px;border-radius:8px;overflow:hidden;
  box-shadow:var(--shadow-lg);align-self:flex-start;background:var(--surface-3)}
/* height:auto is not optional. The <img> carries width/height attributes so
   the browser can reserve the right box before the file arrives; setting only
   `width` in CSS leaves the attribute height in force and the cover renders at
   its full intrinsic height. */
.bookhead .art img{width:100%;height:auto;display:block}
.bookhead .who{flex:1;min-width:min(100%,260px)}
.bookhead h1{font-size:clamp(1.4rem,5vw,2rem);letter-spacing:-.02em;margin-bottom:8px}
.bookhead .sub{color:var(--ink-2);font-size:1rem;margin:0 0 14px}

.buyrow{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:18px 0 6px}
.fmt{font-size:.85rem;color:var(--ink-3)}

.pitch{font-size:1.06rem;color:var(--ink);margin:26px 0 18px;max-width:56ch}
.inside{list-style:none;padding:0;margin:0}
.inside li{position:relative;padding:10px 0 10px 30px;border-bottom:1px solid var(--line);
  font-size:.97rem}
.inside li:last-child{border-bottom:0}
.inside li::before{content:"✓";position:absolute;left:2px;top:10px;color:var(--ok);
  font-weight:800}

/* --------------------------------------------------- the companion app card */
/* The differentiator, so it is the loudest thing on a book page after the title. */
.appcard{display:block;text-decoration:none;color:inherit;border-radius:var(--r);
  padding:20px;background:linear-gradient(135deg,var(--navy),var(--navy-2));
  color:#fff;box-shadow:var(--shadow-lg);margin:26px 0}
.appcard .kicker{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:var(--gold);margin-bottom:9px}
.appcard b{display:block;font-size:1.2rem;letter-spacing:-.01em;margin-bottom:7px}
.appcard p{margin:0;font-size:.94rem;color:#cfdbee;line-height:1.55}
.appcard .cta{display:inline-flex;align-items:center;gap:7px;margin-top:15px;
  background:var(--gold);color:#241a06;font-weight:800;font-size:.92rem;
  padding:11px 18px;border-radius:11px;min-height:var(--tap)}
.appcard:hover .cta{filter:brightness(1.06)}

/* ------------------------------------------------- how the app works */
/* Three numbered steps because it genuinely is a sequence: the QR that opens
   the app is printed inside the book the reader just bought. */
.howgrid{display:grid;gap:14px;grid-template-columns:1fr}
@media (min-width:640px){.howgrid{grid-template-columns:1fr 1fr 1fr}}
.howstep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px 14px;box-shadow:var(--shadow)}
.howstep .hownum{display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:50%;background:var(--gold-l);color:var(--warn);border:1px solid var(--gold);
  font-weight:800;font-size:.82rem;margin-bottom:10px}
.howstep b{display:block;font-size:1rem;letter-spacing:-.01em;margin-bottom:6px}
.howstep p{margin:0;font-size:.9rem;color:var(--ink-2);line-height:1.55}
.howstep a{color:var(--blue-d);font-weight:650}

/* --------------------------------------------------------------------- faq */
.faq{max-width:60ch}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 0;font-weight:700;font-size:.97rem;cursor:pointer;list-style:none;
  min-height:var(--tap)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;color:var(--ink-3);font-size:1.1rem;
  flex:0 0 auto}
.faq details[open] summary::after{content:"\2212"}
.faq summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px;border-radius:6px}
.faq details p{margin:0 0 14px;color:var(--ink-2);font-size:.95rem;max-width:56ch}

/* ----------------------------------------------- guide -> book handoff */
/* The card a guide ends on. Same anatomy as a bookcard, slightly louder
   border: this is the one conversion moment of the page. */
.bookcta{display:flex;align-items:flex-start;gap:15px;padding:16px;max-width:34rem;
  background:var(--surface);border:2px solid var(--navy);border-radius:var(--r);
  text-decoration:none;color:inherit;box-shadow:var(--shadow)}
.bookcta:hover{box-shadow:var(--shadow-lg)}
.bookcta .art{flex:0 0 76px;width:76px;height:103px;border-radius:6px;
  overflow:hidden;background:var(--surface-3);display:block}
.bookcta .art img{width:100%;height:100%;object-fit:cover;display:block}
.bookcta .art .initials{display:grid;place-items:center;width:100%;height:100%;
  font-weight:800;font-size:1.4rem;color:var(--ink-3)}
.bookcta .meta{flex:1;min-width:0}
.bookcta .meta b{font-size:1rem;line-height:1.3}
.bookcta .meta .sub{display:block;font-size:.85rem;color:var(--ink-3);margin-top:4px}
.bookcta .meta .go{display:inline-block;margin-top:10px;color:var(--blue-d);
  font-weight:700;font-size:.9rem}
@media (prefers-color-scheme:dark){.bookcta{border-color:var(--blue-d)}}

/* ------------------------------------------------------------------ prose */
.prose{max-width:60ch}
.prose h2{font-size:1.2rem;margin:32px 0 10px}
.prose h3{font-size:1rem;margin:24px 0 8px}
.prose p,.prose li{color:var(--ink-2);font-size:1rem}
.prose li{margin:6px 0}
.prose a{color:var(--blue-d);font-weight:650}
.prose code{background:var(--surface-3);padding:2px 6px;border-radius:5px;font-size:.9em}
.prose dl{margin:14px 0}
.prose dt{font-weight:750;color:var(--ink);margin-top:14px}
.prose dd{margin:3px 0 0;color:var(--ink-2)}


/* ------------------------------------------------------------------- forms */
/* The support form. Fields are generous because most people reach it on a
   phone, annoyed, having just found a mistake in something they paid for. */
.sform{max-width:34rem;margin:6px 0 8px}
.sform label{display:block;margin:0 0 16px;font-weight:700;font-size:.9rem;color:var(--ink)}
.sform input,.sform select,.sform textarea{display:block;width:100%;margin-top:6px;
  font:inherit;font-weight:400;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-2);border-radius:10px;padding:12px 13px;min-height:var(--tap)}
.sform textarea{min-height:130px;resize:vertical;line-height:1.5}
.sform input:focus-visible,.sform select:focus-visible,.sform textarea:focus-visible{
  outline:3px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.sform .hint{display:block;margin-top:6px;font-weight:400;font-size:.82rem;color:var(--ink-3)}
.sform .f2{display:grid;gap:0 14px;grid-template-columns:1fr}
@media (min-width:520px){.sform .f2{grid-template-columns:1fr 1fr}}
.sform button{margin-top:4px}
/* The honeypot: a field only a bot will fill. Hidden from sight AND from
   assistive technology, so a screen-reader user is never asked to fill it. */
.sform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ----------------------------------------------------------------- footer */
.sitefoot{margin-top:64px;padding-top:24px;border-top:1px solid var(--line);
  color:var(--ink-3);font-size:.86rem}
.sitefoot .links{display:flex;gap:6px 16px;flex-wrap:wrap;margin-bottom:14px}
/* Real tap targets (WCAG 2.2 asks 24px): these are the only nav on the page end. */
.sitefoot .links a{display:inline-flex;align-items:center;min-height:30px}
.sitefoot a{color:var(--ink-2);text-decoration:none;font-weight:650}
.sitefoot a:hover{color:var(--ink);text-decoration:underline}
.sitefoot p{margin:0 0 8px;max-width:64ch;line-height:1.6}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}