/* Carrier Press — carrierpress.com */

:root{
  --ink:#151a33;
  --ink-soft:#3d4460;
  --muted:#6f6c63;
  --paper:#faf7f0;
  --paper-2:#f2ede2;
  --line:#e2dccd;
  --gold:#c9992a;
  --gold-bright:#e8c84a;
  --navy:#1a1a2e;
  --card:#ffffff;
  --shadow:0 1px 2px rgba(21,26,51,.06), 0 8px 24px rgba(21,26,51,.08);
  --shadow-lift:0 2px 4px rgba(21,26,51,.08), 0 16px 40px rgba(21,26,51,.16);
  --serif:Georgia,'Iowan Old Style','Palatino Linotype',Palatino,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --wrap:1120px;
}

@media (prefers-color-scheme:dark){
  :root{
    --ink:#ece8dd;
    --ink-soft:#b9b4a6;
    --muted:#8f8b80;
    --paper:#12131f;
    --paper-2:#191b2b;
    --line:#2b2e42;
    --gold:#e8c84a;
    --gold-bright:#f2d76b;
    --navy:#0d0e18;
    --card:#1a1c2c;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:99;background:var(--card);padding:10px 16px;border-radius:6px}

/* ---------- Header ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.head-in{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.04em}
.brand img{width:34px;height:auto}
.brand .mark-light{display:none}
@media (prefers-color-scheme:dark){
  .brand .mark-dark{display:none}
  .brand .mark-light{display:block}
}
.brand span{font-family:var(--serif);font-size:17px;text-transform:uppercase;letter-spacing:.13em}
.nav{margin-left:auto;display:flex;gap:22px;font-family:var(--sans);font-size:14px;letter-spacing:.02em}
.nav a{text-decoration:none;color:var(--ink-soft);padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{color:var(--ink);border-bottom-color:var(--gold)}
.nav .nav-cta{color:var(--ink);font-weight:600}
@media(max-width:760px){
  .nav{gap:14px;font-size:13px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .head-in{gap:12px}
  .brand span{font-size:14px}
}
@media(max-width:460px){
  .brand span{display:none}
  .nav{gap:16px;font-size:13px}
}

/* ---------- Hero ---------- */
.hero{
  background:var(--navy);color:#f4efe3;
  border-bottom:3px solid var(--gold);
  padding:76px 0 68px;
}
.hero-in{display:grid;grid-template-columns:132px 1fr;gap:38px;align-items:center}
.hero-mark{
  width:132px;height:132px;border-radius:50%;
  background:#f7f2e6;display:grid;place-items:center;padding:18px;
  box-shadow:0 0 0 1px rgba(232,200,74,.5), 0 18px 48px rgba(0,0,0,.4);
}
.hero h1{
  font-size:clamp(2.3rem,6vw,3.7rem);line-height:1.05;margin:0 0 14px;
  letter-spacing:-.015em;font-weight:400;
}
.hero h1 em{font-style:normal;color:var(--gold-bright)}
.hero p{margin:0 0 26px;font-size:clamp(1.02rem,2.2vw,1.22rem);color:#d8d2c2;max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:720px){
  .hero{padding:48px 0 44px}
  .hero-in{grid-template-columns:1fr;gap:24px}
  .hero-mark{width:96px;height:96px;padding:13px}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:15px;font-weight:600;
  padding:13px 26px;border-radius:3px;text-decoration:none;
  border:1.5px solid transparent;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn-gold{background:var(--gold-bright);color:#1a1a2e;border-color:var(--gold-bright)}
.btn-gold:hover{background:#f2d76b;transform:translateY(-1px);box-shadow:0 8px 22px rgba(232,200,74,.28)}
.btn-ghost{border-color:rgba(244,239,227,.4);color:#f4efe3}
.btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn-ink:hover{transform:translateY(-1px);box-shadow:var(--shadow-lift)}

/* ---------- Sections ---------- */
section{padding:66px 0}
section + section{padding-top:10px}
.sec-head{margin:0 0 30px;max-width:70ch}
.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--gold);margin:0 0 8px;
}
.sec-head h2{font-size:clamp(1.6rem,3.6vw,2.2rem);margin:0 0 10px;font-weight:400;letter-spacing:-.01em}
.sec-head p{margin:0;color:var(--ink-soft);font-size:1.02rem}
.rule{height:1px;background:var(--line);border:0;margin:0}


.series-link{margin:14px 0 0;font-family:var(--sans);font-size:13.5px}
.series-link a{
  color:var(--ink);text-decoration:none;
  border-bottom:1.5px solid var(--gold);padding-bottom:2px;
}
.series-link a::after{content:" \2192";color:var(--gold)}
.series-link a:hover{color:var(--gold)}

/* ---------- Start Here band ---------- */
/* Uses only existing tokens, so the dark palette follows automatically. */
.featured{
  background:var(--paper-2);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:52px 0;
}
.featured + section{padding-top:56px}
.featured .shelf{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}

/* ---------- Best selling title band ---------- */
/* Tokens only, so the dark palette follows automatically. Deliberately NOT a
   navy band: --navy and --paper are nearly the same value in dark mode, so a
   navy panel that reads as a strong break in light mode all but vanishes at
   night. The lead is lifted with --card instead, which contrasts in both. */
.bestseller{padding:60px 0}
.bestseller .lead{
  display:grid;grid-template-columns:200px 1fr;gap:32px;align-items:start;
  background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:28px;box-shadow:var(--shadow);
}
.bestseller .lead-cover{
  display:block;border-radius:2px 4px 4px 2px;overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease;
}
.bestseller .lead-cover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.bestseller .lead-cover img{display:block;width:100%;height:auto}
.bestseller .lead-meta .by{font-size:.92rem;color:var(--muted);margin:0;font-style:italic}
.bestseller .lead-hook{
  font-family:var(--serif);font-size:1.06rem;line-height:1.62;
  color:var(--ink-soft);margin:12px 0 0;max-width:62ch;
}
.bestseller .lead .actions{
  display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;
  font-family:var(--sans);font-size:13.5px;
}
.bestseller .lead .actions a{text-decoration:none;white-space:nowrap}
.bestseller .lead .actions .buy{
  color:var(--ink);border-bottom:1.5px solid var(--gold);padding-bottom:2px;font-weight:600;
}
.bestseller .lead .actions .buy::after{content:" \2192";color:var(--gold)}
.bestseller .lead .actions .buy:hover{color:var(--gold)}
.bestseller .lead .actions .rev{color:var(--muted);border-bottom:1px solid transparent}
.bestseller .lead .actions .rev:hover{color:var(--ink);border-bottom-color:var(--line)}
/* Sub head introducing the connected shelf. An h3 inside a section that already
   owns an h2, so it is sized down rather than re-using the .sec-head h2 rule. */
.bestseller .sec-sub{margin:44px 0 24px}
.bestseller .sec-sub h3{
  font-size:clamp(1.15rem,2.4vw,1.4rem);margin:0 0 8px;font-weight:400;letter-spacing:-.01em;
}
.bestseller .shelf{grid-template-columns:repeat(auto-fill,minmax(158px,1fr))}
@media(max-width:720px){
  .bestseller .lead{grid-template-columns:1fr;gap:22px;padding:22px}
  .bestseller .lead-cover{max-width:170px}
}

/* ---------- Book grid ---------- */
.shelf{
  display:grid;gap:34px 24px;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
}
.book{display:flex;flex-direction:column;gap:11px;min-width:0}
.book a.cover{
  display:block;position:relative;border-radius:2px 4px 4px 2px;overflow:hidden;
  background:var(--paper-2);box-shadow:var(--shadow);
  transition:transform .16s ease,box-shadow .16s ease;
  aspect-ratio:1/1.6;
}
.book a.cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.20) 0,rgba(0,0,0,.05) 4px,rgba(255,255,255,.10) 8px,transparent 14px);
  pointer-events:none;
}
.book a.cover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift)}
.book img{width:100%;height:100%;object-fit:cover}
.book .meta{min-width:0}
.book .num,
.record .num{
  font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);display:block;margin-bottom:2px;
}
.book h3{font-size:.98rem;line-height:1.3;margin:0 0 3px;font-weight:600}
.book h3 a{text-decoration:none}
.book h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.book .by{font-size:.83rem;color:var(--muted);margin:0;font-style:italic}
.book .hook{font-size:.86rem;color:var(--ink-soft);margin:6px 0 0;line-height:1.5}

/* ---------- Journal ---------- */
.wrap-narrow{max-width:68ch}
.post{padding:56px 0}
.post h1{font-size:clamp(1.8rem,4vw,2.5rem);font-weight:400;letter-spacing:-.01em;margin:0 0 26px}
.post-body{font-size:1.06rem;line-height:1.75}
.post-body h2{font-size:1.3rem;font-weight:600;margin:34px 0 10px}
.post-body h3{font-size:1.08rem;font-weight:600;margin:26px 0 8px}
.post-body p{margin:0 0 18px}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:1.3em}
.post-body li{margin:0 0 7px}
.post-body blockquote{
  margin:22px 0;padding:2px 0 2px 18px;border-left:3px solid var(--gold);
  color:var(--ink-soft);font-style:italic;
}
.post-body code{
  font-size:.9em;background:var(--paper-2);border:1px solid var(--line);
  border-radius:3px;padding:1px 5px;
}
.post-body a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);
  text-underline-offset:3px}
.post-signup{
  margin:44px 0 0;padding:24px;background:var(--paper-2);
  border:1px solid var(--line);border-radius:6px;
}
.post-signup p{margin:0 0 14px}
.post-signup p:last-child{margin:0}
.post-back{margin:28px 0 0;font-family:var(--sans);font-size:13.5px}
.post-item{padding:26px 0;border-top:1px solid var(--line)}
.post-item h2{font-size:1.35rem;font-weight:500;margin:4px 0 8px}
.post-item h2 a{text-decoration:none}
.post-item h2 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.post-item p{margin:0;color:var(--ink-soft)}

/* ---------- Direct support band ---------- */
.support{background:var(--paper-2);border-top:1px solid var(--line)}
.support-links{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.support .eth{
  margin:18px 0 0;font-family:var(--sans);font-size:13px;
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:baseline;
}
.support .eth-label{color:var(--muted)}
.support .eth code{
  font-size:12.5px;word-break:break-all;background:var(--card);
  border:1px solid var(--line);border-radius:4px;padding:5px 8px;
}

/* ---------- Buy / review actions ---------- */
.book .actions,
.record .actions{
  display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;
  font-family:var(--sans);font-size:12px;margin:9px 0 0;
}
.book .actions a,
.record .actions a{text-decoration:none;white-space:nowrap}
.book .actions .buy,
.record .actions .buy{
  font-weight:600;color:var(--ink);
  border-bottom:1.5px solid var(--gold);padding-bottom:1px;
}
.book .actions .buy::after,
.record .actions .buy::after{content:" \2192";color:var(--gold)}
.book .actions .buy:hover,
.record .actions .buy:hover{color:var(--gold)}
.book .actions .rev{color:var(--muted);border-bottom:1px solid transparent}
.book .actions .rev:hover{color:var(--ink);border-bottom-color:var(--line)}
.book .fmt,
.record .fmt{font-family:var(--sans);font-size:11px;color:var(--muted);margin:4px 0 0;letter-spacing:.03em}

/* ---------- Magnet ---------- */
.magnet{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.magnet-in{display:grid;grid-template-columns:1fr 220px;gap:44px;align-items:center}
.magnet h2{font-size:clamp(1.5rem,3.4vw,2.05rem);margin:0 0 12px;font-weight:400}
.magnet p{color:var(--ink-soft);margin:0 0 8px}
.magnet .fine{font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:14px}
.magnet-cover{box-shadow:var(--shadow-lift);border-radius:2px 4px 4px 2px;overflow:hidden}
@media(max-width:720px){
  .magnet-in{grid-template-columns:1fr;gap:26px}
  .magnet-cover{max-width:170px}
}

/* ---------- About ---------- */
.about-in{display:grid;grid-template-columns:210px 1fr;gap:40px;align-items:start}
.about-in img{border-radius:50%;box-shadow:var(--shadow)}
.about-in p{margin:0 0 16px}
.about-in p:last-child{margin-bottom:0}
@media(max-width:720px){
  .about-in{grid-template-columns:1fr;gap:24px}
  .about-in img{max-width:150px}
}

/* ---------- Footer ---------- */
.site-foot{background:var(--navy);color:#cfc9b9;padding:56px 0 40px;margin-top:60px;font-size:15px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.site-foot h4{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin:0 0 12px;font-weight:700;
}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:9px}
.site-foot a{color:#e6e0d0;text-decoration:none;border-bottom:1px solid rgba(232,200,74,.3)}
.site-foot a:hover{color:var(--gold-bright);border-bottom-color:var(--gold-bright)}
.site-foot .brandline{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.site-foot .brandline img{width:40px}
.site-foot .brandline strong{font-size:16px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:#f4efe3}
.site-foot .note{color:#948e80;font-size:13.5px;line-height:1.6;margin:0}
.colophon{
  border-top:1px solid rgba(255,255,255,.09);margin-top:38px;padding-top:22px;
  font-family:var(--sans);font-size:12.5px;color:#8d8779;display:flex;flex-wrap:wrap;gap:8px 20px;
}
@media(max-width:720px){ .foot-grid{grid-template-columns:1fr;gap:30px} }

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- Music ---------- */
/* Deliberately quieter than the shelves. This is a book imprint's site and the
   music is a second business, so the band sits back: no filled panel, one hair
   rule, smaller art than a book cover, and secondary type. */
.music{background:none;border-top:1px solid var(--line);border-bottom:0;padding:44px 0 40px}
.music .sec-head{margin-bottom:22px}
.music .sec-head h2{font-size:clamp(1.25rem,2.4vw,1.5rem)}
.music .sec-head p{font-size:.95rem}
.records{display:grid;grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:26px 20px}
.record img{width:100%;height:auto;aspect-ratio:1/1;display:block;border:1px solid var(--line);border-radius:2px}
.record .meta{padding-top:9px;min-width:0}
.record h3{font-size:.88rem;margin:2px 0 0;font-weight:600;line-height:1.32}
.record h3 a{text-decoration:none;color:inherit}
.record h3 a:hover{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px}
.record .num{font-size:9.5px}
.record .fmt{margin-top:3px;font-size:10.5px}
.record .actions{margin-top:7px;font-size:12.5px}
.plat{margin:5px 0 0;font-family:var(--sans);font-size:10.5px;display:flex;flex-wrap:wrap;gap:9px}
.plat a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
.plat a:hover{color:var(--ink);border-bottom-color:var(--line)}
@media(max-width:420px){.records{grid-template-columns:repeat(2,1fr);gap:20px 16px}}

/* Comics. Reuses the .records grid, but a comic cover is portrait, not a square
   record sleeve, so the column is wider and the box takes the 6.625 x 10.25 print
   trim ratio. object-fit is REQUIRED here and not on .record: the two published
   covers are 1130x1600 and 1048x1600, so without it they would stretch to the box
   instead of centre cropping into it the way book covers already do. Worst crop is
   about four percent a side, inside the cover bleed. */
.comics .sec-head p{font-size:.95rem}
.comics .sec-head .fine{
  font-family:var(--sans);font-size:12.5px;color:var(--muted);margin-top:10px;
}
.comics .records{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.comics .record img{aspect-ratio:1/1.5472;object-fit:cover}

/* Square art (audiobooks). The 1/1.6 book ratio would crop a third away. */
.book a.cover.sq{aspect-ratio:1/1}

/* Verified rating on a card. Only rendered where both stars and count exist. */
.book .rating{font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);margin:5px 0 0;letter-spacing:.02em}
.book .rating .stars{color:var(--gold);margin-right:3px}
.book .rating .rcount{color:var(--muted)}

/* ---------- Reading excerpt ---------- */
.excerpt{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.excerpt-body{font-size:1.05rem;line-height:1.78;color:var(--ink)}
.excerpt-body p{margin:0 0 17px;text-indent:1.4em}
.excerpt-body p:first-child{text-indent:0}
.excerpt-body p:first-child::first-letter{
  float:left;font-size:3.1em;line-height:.82;padding:6px 9px 0 0;color:var(--gold);font-weight:600;
}
.excerpt-cta{margin:26px 0 0;color:var(--ink-soft);font-size:.98rem;border-top:1px solid var(--line);padding-top:22px}
.excerpt-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin:18px 0 0}
.excerpt-buy{font-family:var(--sans);font-size:13.5px;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--gold);padding-bottom:2px}
.excerpt-buy::after{content:" \2192";color:var(--gold)}
.excerpt-buy:hover{color:var(--gold)}