/* =========================================================
   Nicholas Bagley — nicholasbagley.com
   "Ledger": cobalt trim, semibold grotesk, white ground
   ========================================================= */

:root{
  --white:#FFFFFF;
  --off:#F5F6FA;
  --off2:#EDEFF6;
  --cobalt:#1B33A0;
  --cobalt-lift:#2440BE;
  --deep:#0F1C5E;
  --ink:#14172B;
  --mute:#5A6178;
  --mute-soft:#7A8299;
  --rule:#E2E5EE;
  --yellow:#F5B913;
  --red:#CC2A2A;        /* sampled from the jacket's own red */

  --sans:"Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;

  --measure:66ch;
  --gutter:clamp(20px, 5vw, 56px);
  --maxw:1160px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--cobalt);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:2px}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:760px}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--deep);color:#fff;
  padding:12px 18px;z-index:100;font-family:var(--sans);font-weight:600;font-size:14px;
}
.skip:focus{left:0}

/* ---------- Header / nav ---------- */
.site-head{background:var(--cobalt);color:#fff;position:relative}
.site-head a{color:#fff}
.head-inner{
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.wordmark{
  font-family:var(--sans);font-weight:600;font-size:15px;
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.wordmark:hover{text-decoration:none;color:var(--yellow)}

.nav-toggle{
  display:none;appearance:none;background:transparent;border:1px solid rgba(255,255,255,.45);
  color:#fff;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.08em;
  text-transform:uppercase;padding:8px 14px;border-radius:2px;cursor:pointer;
}

.site-nav ul{
  display:flex;gap:26px;list-style:none;margin:0;padding:0;
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.03em;
}
.site-nav a{color:rgba(255,255,255,.82);padding:4px 0;display:inline-block}
.site-nav a:hover{color:#fff;text-decoration:none;box-shadow:inset 0 -2px 0 rgba(255,255,255,.5)}
.site-nav a[aria-current="page"]{color:#fff;box-shadow:inset 0 -2px 0 var(--yellow)}

/* The hamburger takes over well before the seven nav items could wrap. The row
   needs ~883px at the intended font; the extra margin covers the case where
   Archivo hasn't loaded and the fallback face measures wider. */
@media (max-width:960px){
  .nav-toggle{display:block}
  .site-nav{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:40;
    background:var(--cobalt);border-top:1px solid rgba(255,255,255,.2);
    box-shadow:0 14px 30px rgba(9,16,60,.28);
  }
  .site-nav.open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:6px var(--gutter) 16px}
  .site-nav li{border-bottom:1px solid rgba(255,255,255,.14)}
  .site-nav li:last-child{border-bottom:0}
  .site-nav a{padding:14px 0;font-size:15px;width:100%}
  .site-nav a:hover,.site-nav a[aria-current="page"]{box-shadow:none;color:var(--yellow)}
}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--sans);color:var(--deep);margin:0;text-wrap:balance;font-weight:600}
h1{font-size:clamp(38px,5.4vw,62px);line-height:1.0;letter-spacing:-.032em}
h2{font-size:clamp(26px,3.2vw,36px);line-height:1.1;letter-spacing:-.028em}
h3{font-size:20px;line-height:1.25;letter-spacing:-.02em}
p{margin:0}

.eyebrow{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--cobalt);padding-left:16px;
  border-left:3px solid var(--yellow);margin:0;
}
.sechead{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--cobalt);
  padding-bottom:12px;border-bottom:2px solid var(--cobalt);margin:0;
}
.lede{font-size:clamp(19px,2.1vw,22px);line-height:1.55;color:var(--ink);max-width:var(--measure)}
.prose p{max-width:var(--measure);margin-bottom:1.1em}
.prose p:last-child{margin-bottom:0}
/* The jacket copy on the book page runs wider than the default measure — with
   no heading beside it, the standard 66ch column left too much empty page to
   its right. Same specificity as `.prose p`, so it has to come after it.
   Widening alone pushed the line to 90 characters, which is past comfortable,
   so the type size goes up with it: bigger text fills the same column at a
   sane line length, and this is the most important prose on the page. */
.prose-wide{max-width:820px;font-size:21px}
.prose-wide p{max-width:none}
@media (max-width:900px){.prose-wide{font-size:19px}}
.muted{color:var(--mute)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:14px;
  letter-spacing:.03em;padding:13px 28px;border-radius:2px;
  background:var(--cobalt);color:#fff;border:1px solid var(--cobalt);
  transition:background .16s ease,border-color .16s ease;
}
.btn:hover{background:var(--cobalt-lift);border-color:var(--cobalt-lift);color:#fff;text-decoration:none}
.btn-ghost{
  background:transparent;color:var(--deep);border:1px solid var(--rule);
}
.btn-ghost:hover{background:var(--off);border-color:var(--cobalt);color:var(--deep)}
.link-strong{
  font-family:var(--sans);font-weight:600;font-size:14px;color:var(--deep);
  box-shadow:inset 0 -2px 0 var(--yellow);
}
.link-strong:hover{text-decoration:none;box-shadow:inset 0 -6px 0 var(--yellow)}

.btn-on-deep{color:#fff;border-color:rgba(255,255,255,.42);background:transparent}
.btn-on-deep:hover{background:rgba(255,255,255,.10);border-color:#fff;color:#fff}

.buy-note{font-family:var(--sans);font-size:12.5px;color:var(--mute);letter-spacing:.02em}

/* ---------- Order menu ---------- */
.order{position:relative;display:inline-block}
.order-btn{
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;list-style:none;
  font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.03em;
  padding:13px 26px;border-radius:2px;background:var(--cobalt);color:#fff;
  border:1px solid var(--cobalt);transition:background .16s ease;
}
.order-btn::-webkit-details-marker{display:none}
.order-btn::marker{content:""}
.order-btn:hover{background:var(--cobalt-lift);border-color:var(--cobalt-lift)}
.order-chev{transition:transform .18s ease;flex:none}
.order[open] .order-chev{transform:rotate(180deg)}

/* An absolutely positioned child of a closed <details> can still paint in some
   browsers, so hide it explicitly rather than relying on the default. */
.order:not([open]) .order-menu{display:none}
.order-menu{
  position:absolute;z-index:30;top:calc(100% + 8px);left:0;min-width:262px;
  background:var(--white);border:1px solid var(--rule);border-radius:3px;
  box-shadow:0 16px 38px rgba(15,28,94,.20);padding:8px 0 6px;
}
.order-menu-head{
  font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--mute);padding:8px 18px 10px;margin:0;
  border-bottom:1px solid var(--rule);
}
.order-menu ul{list-style:none;margin:0;padding:6px 0 0}
.order-menu a{
  display:block;padding:11px 18px;font-family:var(--sans);font-weight:500;
  font-size:14.5px;color:var(--deep);
}
.order-menu a:hover{background:var(--off);color:var(--cobalt);text-decoration:none}
.order-menu li:first-child a{font-weight:600}
.order-menu li:first-child a::after{
  content:"Publisher";float:right;font-size:10px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute-soft);padding-top:3px;
}
.band-deep .order-menu{border-color:transparent}
@media (max-width:520px){
  .order{display:block}
  .order-btn{width:100%;justify-content:space-between}
  .order-menu{min-width:0;left:0;right:0}
}

/* ---------- "More from" link ---------- */
.more-row{margin-top:22px}
.more-link{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);
  font-weight:600;font-size:14px;letter-spacing:.02em;color:var(--cobalt);
}
.more-link svg{transition:transform .16s ease;flex:none}
.more-link:hover{text-decoration:none;box-shadow:inset 0 -2px 0 var(--yellow)}
.more-link:hover svg{transform:translateX(3px)}

/* ---------- Hero ---------- */
.hero{padding:clamp(52px,7vw,92px) 0 clamp(48px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(32px,5vw,64px);align-items:center}
.hero-copy>*+*{margin-top:22px}
/* Yellow marker-pen swipe under the last two words. The letters stay navy, so
   the color pops without costing any legibility (yellow type on white measures
   1.77:1 — well under the 3:1 minimum for large text). The gradient stops sit
   inside the line box, so a wrapped title gets the swipe on each line. */
.hero h1 em{
  font-style:normal;
  color:var(--deep);
  background-image:linear-gradient(180deg,
    transparent 0 58%, var(--yellow) 58% 96%, transparent 96% 100%);
  padding-inline:.06em;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.hero .subtitle{
  font-family:var(--sans);font-weight:500;font-size:clamp(16px,1.9vw,19px);
  color:var(--mute);max-width:30ch;line-height:1.34;letter-spacing:-.01em;
}
/* ---------- The cover as an actual object in space ----------
   Real 3D rather than shading painted onto a flat rectangle. The book is
   turned on its Y axis so the left edge comes toward you, and a spine panel
   is hinged off that edge and rotated a quarter turn so it recedes behind
   the cover. `--thick` is the block thickness as a share of cover width —
   roughly right for a 256-page hardcover. */
.hero-cover{perspective:2400px;perspective-origin:62% 46%}

.book{
  --thick:12%;
  --turn:20deg;
  position:relative;display:block;
  transform-style:preserve-3d;
  transform:rotateY(var(--turn)) rotateX(1.5deg);
  transition:transform .65s cubic-bezier(.2,.7,.3,1);
}
.hero-cover:hover .book{--turn:12deg}

/* front board */
.book img{
  position:relative;z-index:2;width:100%;
  border-radius:1px 4px 4px 1px;
  box-shadow:
    0 2px 3px rgba(15,28,94,.22),
    0 18px 26px -10px rgba(15,28,94,.30),
    0 40px 60px -22px rgba(15,28,94,.34);
}

/* spine, hinged on the left edge and swung back a quarter turn */
.book::before{
  content:"";position:absolute;z-index:1;top:0;left:0;
  height:100%;width:var(--thick);
  transform-origin:left center;
  transform:rotateY(90deg);
  background:linear-gradient(90deg,
    #ffffff 0%, #f2f3f7 34%, #dfe2ec 72%, #b9bece 100%);
  border-radius:1px 0 0 1px;
}

/* contact shadow on the floor, kept flat so it doesn't tilt with the book */
.book::after{
  content:"";position:absolute;z-index:0;
  left:4%;right:2%;bottom:-16px;height:26px;
  background:radial-gradient(ellipse at 50% 50%,rgba(15,28,94,.34) 0%,rgba(15,28,94,0) 72%);
  filter:blur(5px);transform:translateZ(-1px);
}

@media (max-width:820px){
  .book{--turn:16deg}
  .book::after{bottom:-11px;height:18px}
}
@media (prefers-reduced-motion:reduce){
  .hero-cover:hover .book{--turn:20deg}
}
@media (max-width:820px){
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero-cover{order:-1;max-width:250px}
}

/* ---------- Title card (book page hero) ----------
   The jacket's own typography, blown up: stacked, tight, uppercase, with the
   balloon cut from the cover art crashing over it. `multiply` drops the white
   background out of the balloon JPEG so it sits in the type, not on top. */
/* The balloon bleeds past the text column, so it needs clipping — but the
   clipping has to live on a layer that holds ONLY the balloon. Putting
   `overflow:hidden` on the section itself also swallowed the order menu when
   it opened downward out of the hero. */
.titlecard{position:relative;padding:clamp(38px,5vw,64px) 0 clamp(40px,5vw,60px)}
.titlecard .wrap{position:relative;z-index:2}
.titlecard-art{
  position:absolute;inset:0;z-index:1;
  overflow:hidden;pointer-events:none;display:block;
}
.titlecard-balloon{
  position:absolute;right:1.5%;top:-3%;width:min(34%,392px);
  transform:rotate(9deg);mix-blend-mode:multiply;
}
.titlecard-kicker{
  position:relative;z-index:2;
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--red);margin:0 0 20px;
}
/* The jacket sets the title in TITLE CASE, not caps — the personality lives in
   the lowercase (the sheared tail on the y, the double-storey a, the wedge
   apostrophe). Setting it uppercase threw that away. Weight 900, leading
   tightened to .86 and tracking to -.045em to match the jacket's stacking,
   where the lines almost touch. */
.titlecard-h{
  position:relative;z-index:2;
  font-family:var(--sans);font-weight:900;
  font-size:clamp(46px,10.2vw,132px);line-height:.86;letter-spacing:-.045em;
  color:var(--cobalt);margin:0;text-wrap:nowrap;
  font-feature-settings:"kern" 1;
}
.titlecard-h .red{color:var(--red)}
.titlecard-sub{
  position:relative;z-index:2;
  font-family:var(--sans);font-weight:700;text-transform:uppercase;
  font-size:clamp(12.5px,1.5vw,19px);letter-spacing:.045em;color:var(--deep);
  margin:clamp(22px,2.6vw,32px) 0 0;padding-top:16px;border-top:5px solid var(--deep);
}
/* Sits above the balloon layer, and high enough that the open menu clears
   whatever section follows the hero. */
.titlecard-act{position:relative;z-index:20;margin-top:28px}

@media (max-width:620px){
  .titlecard-balloon{width:54%;right:-6%;top:auto;bottom:30%;opacity:.9}
  .titlecard-h{font-size:clamp(38px,11vw,60px)}
  .titlecard-sub{border-top-width:4px}
}

/* ---------- Sections ---------- */
.band{padding:clamp(48px,6vw,80px) 0}
.band-off{background:var(--off);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.band-deep{background:var(--deep);color:#fff}
.band-deep h2,.band-deep h3{color:#fff}
.band-deep .eyebrow{color:var(--yellow);border-left-color:var(--yellow)}
.band-deep a{color:var(--yellow)}
.stack{display:flex;flex-direction:column;gap:26px}
.stack-sm{display:flex;flex-direction:column;gap:14px}

/* ---------- Praise ---------- */
/* Short blurbs run side by side. The column count is set per block so a row
   never leaves an orphan: three on the book page (six blurbs = 3x2), four on
   the homepage (four featured). */
.praise-grid{display:grid;gap:34px}
.praise-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.praise-grid.cols-2{grid-template-columns:repeat(2,1fr);gap:32px 44px}
@media (max-width:900px){
  .praise-grid.cols-3{grid-template-columns:repeat(2,1fr);gap:28px}
}
@media (max-width:620px){
  .praise-grid.cols-3,.praise-grid.cols-2{grid-template-columns:1fr;gap:26px}
}

.praise{border-left:3px solid var(--cobalt);padding-left:20px}
.praise blockquote{
  margin:0;font-size:16.5px;line-height:1.5;color:var(--ink);
}

/* Full blurbs, one after another, on praise.html */
.praise-full{display:flex;flex-direction:column;gap:38px;max-width:800px}
.praise-lg{border-left-width:4px;padding-left:26px}
.praise-lg blockquote{font-size:18.5px;line-height:1.6}
.praise-lg cite{margin-top:16px;font-size:13.5px}
.praise cite{
  display:block;margin-top:14px;font-style:normal;font-family:var(--sans);
  font-size:12.5px;font-weight:600;line-height:1.45;color:var(--deep);
}
.praise cite span{display:block;font-weight:400;color:var(--mute);font-size:12px;margin-top:3px}
.band-deep .praise{border-left-color:var(--yellow)}
.band-deep .praise blockquote{color:rgba(255,255,255,.94)}
.band-deep .praise cite{color:#fff}
.band-deep .praise cite span{color:rgba(255,255,255,.66)}

.pullquote{
  font-family:var(--sans);font-weight:500;
  font-size:clamp(22px,3.1vw,34px);line-height:1.24;letter-spacing:-.026em;
  color:var(--deep);border-left:4px solid var(--cobalt);padding-left:26px;max-width:24ch;margin:0;
}
.pullquote-cite{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);margin-top:20px;padding-left:30px;font-style:normal;display:block;
}

/* ---------- About row ---------- */
.about-grid{display:grid;grid-template-columns:210px 1fr;gap:clamp(26px,4vw,46px);align-items:start}
.about-grid img{width:210px;border-radius:2px}
@media (max-width:720px){
  .about-grid{grid-template-columns:1fr;gap:24px}
  .about-grid img{width:150px}
}

/* ---------- Article lists ---------- */
.arts{list-style:none;margin:0;padding:0}
.arts li{border-bottom:1px solid var(--rule)}
.arts a.art{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:19px 0;color:var(--ink);
}
.arts a.art:hover{text-decoration:none}
.arts a.art:hover .art-title{color:var(--cobalt);box-shadow:inset 0 -2px 0 var(--yellow)}
.art-title{
  font-family:var(--sans);font-weight:600;font-size:19px;line-height:1.3;
  letter-spacing:-.02em;color:var(--deep);transition:color .14s ease;
}
.art-meta{
  font-family:var(--sans);font-size:11.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap;
}
.art-note{
  display:block;font-family:var(--serif);font-size:15.5px;line-height:1.5;
  color:var(--mute);margin-top:7px;text-transform:none;letter-spacing:normal;max-width:62ch;
}
@media (max-width:640px){
  .arts a.art{flex-direction:column;gap:7px;padding:17px 0}
  .art-meta{white-space:normal}
}

/* ---------- Academic list ---------- */
.pubs{list-style:none;margin:0;padding:0}
.pubs li{padding:17px 0;border-bottom:1px solid var(--rule)}
.pub-title{font-family:var(--sans);font-weight:600;font-size:18px;line-height:1.32;letter-spacing:-.018em;color:var(--deep)}
a.pub-title:hover{color:var(--cobalt);text-decoration:none;box-shadow:inset 0 -2px 0 var(--yellow)}
.pub-cite{display:block;font-size:16px;color:var(--mute);margin-top:5px;line-height:1.5}
.pub-cite em{font-style:italic}
.pub-tag{
  display:inline-block;font-family:var(--sans);font-size:10.5px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cobalt);
  border:1px solid var(--rule);border-radius:2px;padding:2px 7px;margin-left:8px;vertical-align:2px;
}

/* ---------- Table of contents ---------- */
.toc{list-style:none;margin:0;padding:0;counter-reset:ch}
.toc .part{
  font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.17em;
  text-transform:uppercase;color:var(--cobalt);padding:26px 0 10px;border-bottom:1px solid var(--rule);
}
.toc .part:first-child{padding-top:0}
.toc .ch{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule);align-items:baseline}
.toc .num{
  font-family:var(--sans);font-size:12px;font-weight:600;color:var(--mute-soft);
  letter-spacing:.06em;min-width:34px;
}
.toc .name{font-family:var(--sans);font-weight:600;font-size:18px;letter-spacing:-.018em;color:var(--deep)}

/* ---------- Detail table ---------- */
.facts{list-style:none;margin:0;padding:0;font-family:var(--sans);font-size:14.5px}
.facts li{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
.facts dt,.facts .k{
  font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);min-width:120px;padding-top:2px;
}
.facts .v{font-weight:500;color:var(--deep);font-variant-numeric:tabular-nums}

/* ---------- Events ---------- */
.events{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.event{
  display:grid;grid-template-columns:104px 1fr;gap:32px;align-items:start;
  padding:28px 0;border-bottom:1px solid var(--rule);
}
.event:first-child{border-top:2px solid var(--cobalt)}
.event:last-child{border-bottom:2px solid var(--cobalt)}

.event-date{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--rule);border-radius:3px;
  padding:12px 6px 10px;font-family:var(--sans);line-height:1;
  box-shadow:0 2px 6px rgba(15,28,94,.07);
}
.event-date .mo{
  font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cobalt);
}
.event-date .day{
  font-size:34px;font-weight:600;letter-spacing:-.03em;color:var(--deep);
  margin:7px 0 6px;font-variant-numeric:tabular-nums;
}
/* "TBA" needs to sit at a readable size in the same slot as a numeral */
.event-date .day:not(:only-child){font-size:34px}
.event-date .yr{font-size:11.5px;font-weight:500;letter-spacing:.1em;color:var(--mute)}

.event-body>*+*{margin-top:8px}
.event-venue{font-size:23px;letter-spacing:-.024em}
.event-where{
  font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);
}
.event-note{font-size:16.5px;line-height:1.55;color:var(--ink);max-width:60ch}
.event-body .btn{margin-top:16px}
.event-soon{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.05em;
  color:var(--mute-soft);margin-top:16px;
}

@media (max-width:620px){
  .event{grid-template-columns:1fr;gap:16px;padding:24px 0}
  /* In a grid it's justify-self that pulls the block back to its content
     width; align-self only moves it vertically. */
  .event-date{
    flex-direction:row;align-items:baseline;gap:8px;
    justify-self:start;padding:8px 14px;
  }
  .event-date .day{font-size:20px;margin:0}
  .event-venue{font-size:20px}
}

/* Long "TBA" text shrinks so it never breaks the date block's width */
.event-date .day{max-width:100%;overflow-wrap:anywhere}

/* ---------- Cards (press kit) ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.card{border:1px solid var(--rule);border-radius:3px;padding:22px;background:var(--white);display:flex;flex-direction:column;gap:12px}
.card h3{font-size:17px}
.card p{font-size:15.5px;color:var(--mute);line-height:1.5}
.card .btn{align-self:flex-start;margin-top:auto}

/* ---------- Excerpt ---------- */
.excerpt{font-size:19px;line-height:1.68}
.excerpt p{max-width:64ch;margin-bottom:1.15em}
.excerpt p:first-of-type::first-letter{
  float:left;font-family:var(--sans);font-weight:600;font-size:64px;line-height:.82;
  padding:6px 12px 0 0;color:var(--cobalt);
}

/* ---------- Footer ---------- */
.site-foot{background:var(--deep);color:rgba(255,255,255,.72);padding:44px 0;font-family:var(--sans);font-size:14px}
.site-foot a{color:var(--yellow)}
.foot-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;font-size:13px}
.foot-links a{color:rgba(255,255,255,.82)}
.contact-row{display:flex;gap:20px;flex-wrap:wrap;align-items:center;margin-top:2px}
.contact-link{display:inline-flex;align-items:center;gap:8px;color:var(--yellow);font-size:14px}
.contact-link svg{flex:none;opacity:.9}
.contact-link:hover{text-decoration:none;box-shadow:inset 0 -1px 0 currentColor}
.foot-name{font-weight:600;color:#fff;letter-spacing:.06em;text-transform:uppercase;font-size:13px}

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

@media print{
  .site-head,.site-foot,.buy,.nav-toggle{display:none}
  body{font-size:11pt;color:#000}
  a{color:#000;text-decoration:underline}
}