:root{
  --ink:#0A0A0A; --bone:#F5F3EE; --platinum:#C8C5BE;
  --steel:#8E8B84; --graphite:#86837C; --slate:#6E6B66;
  --panel:#131316; --panel-deep:#0E0E11;
  --paper:#FFFFFF; --paper-warm:#EDEDED;
  --rule-dark:#26262A; --rule-light:#E0E0E0;
  --ink-body:#0A0A0A; --ink-label:#0A0A0A;
  --display:'Montserrat', sans-serif; --body:'Inter', sans-serif;
  --ease:cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink); color:var(--bone); font-family:var(--body);
  font-weight:400; line-height:1.8; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
em{font-style:normal;}
.quote{font-style:italic;}
img{max-width:100%; display:block; height:auto;}
::selection{background:var(--platinum); color:var(--ink);}

/* Headline/label type: Montserrat gets its own tight line-height everywhere,
   never the body's 1.8. */
h1,h2,h3,h4,h5,h6,
.display, .eyebrow, .btn, .spec-val, .a-val, .brand-sub,
.cred-item .cred-val{
  font-family:var(--display); line-height:1.12;
}
p, li, .body-text{ font-family:var(--body); line-height:1.8; }

/* Nav is body text (Inter), per the Standing Rules: "Inter for body copy,
   nav, and small UI text." Montserrat is reserved for display/labels/eyebrows,
   not for navigation, which needs to read as quiet UI chrome, not a headline. */
/* Per-property inversion (see build playbook §2): MCG puts Inter on nav and
   Montserrat on the brand-name text; Mashman Publishing deliberately inverts
   that — Montserrat for nav (more architectural, more confident, a better fit
   for a publishing-adjacent property), Inter for the brand-name text next to
   the logo (quieter, more editorial, literary register). Body copy stays
   Inter regardless of property; this exception applies only to nav vs.
   brand-name, and only for this property. */
.nav-links a{ font-family:var(--display); font-weight:600; letter-spacing:0.02em; }

/* Visually-hidden skip link, revealed on keyboard focus (playbook a11y baseline,
   matches the pattern used on mashmancg.com). */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:300;
  background:var(--platinum); color:var(--ink); padding:14px 22px;
  font-family:var(--display); font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:0.08em;
}
.skip-link:focus{ left:16px; top:16px; }

/* Focus visibility, sitewide baseline. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--platinum); outline-offset:3px;
}

/* Visually-hidden utility for the "(opens in a new tab)" cue and similar. */
.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;
}

.wrap{max-width:1200px; margin:0 auto; padding:0 40px;}
@media(max-width:640px){ .wrap{padding:0 24px;} }

.eyebrow{
  font-size:11px; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--platinum); display:flex; align-items:center; gap:12px; font-weight:600;
}
.eyebrow::before{content:''; width:20px; height:1px; background:var(--platinum);}
.eyebrow.center{justify-content:center;}
.eyebrow.on-paper{color:var(--ink-label);}
.eyebrow.on-paper::before{background:var(--ink-label);}

.measure{ max-width:62ch; }

.rv{opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.rv.in{opacity:1; transform:none;}
@media(prefers-reduced-motion:reduce){ .rv{opacity:1; transform:none; transition:none;} *{animation:none !important; transition:none !important;} }

/* NAV */
header{
  position:fixed; top:0; left:0; right:0; z-index:200;
  background:rgba(10,10,10,0.86); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-dark);
}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:80px;}
.brand{display:flex; align-items:center; gap:14px;}
.brand-icon{height:34px; width:auto;}
.brand-name{font-family:var(--body); font-weight:500; font-size:15px; color:var(--bone); letter-spacing:0.04em; text-transform:uppercase;}
.brand-sub{
  font-size:10px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--steel); border-left:1px solid var(--rule-dark); padding-left:14px; display:none;
}
@media(min-width:900px){ .brand-sub{display:block;} }
.nav-links{display:none; align-items:center; gap:32px; font-size:13.5px; color:var(--steel);}
@media(min-width:980px){ .nav-links{display:flex;} }
.nav-links a{position:relative; padding:4px 0; transition:color .25s ease;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--platinum); transition:width .3s var(--ease);}
.nav-links a:hover{color:var(--bone);}
.nav-links a:hover::after{width:100%;}
.btn{
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase; font-weight:700;
  padding:14px 26px; display:inline-block; white-space:nowrap; transition:all .3s var(--ease);
  cursor:pointer; border:1px solid transparent;
}
.btn-primary{background:var(--bone); color:var(--ink);}
.btn-primary:hover, .btn-primary:active{background:var(--platinum); transform:translateY(-1px); box-shadow:0 10px 30px rgba(200,197,190,0.2);}
.btn-ghost{border-color:var(--rule-dark); color:var(--bone); background:transparent;}
.btn-ghost:hover{border-color:var(--platinum); color:var(--platinum);}
.btn-ghost-dark{border:1px solid rgba(10,10,10,0.3); color:var(--ink); background:transparent;}
.btn-ghost-dark:hover{border-color:var(--ink);}
.btn-dark{background:var(--ink); color:var(--bone);}
.nav-cta{display:none;} @media(min-width:640px){ .nav-cta{display:inline-block;} }
.burger{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
@media(min-width:980px){ .burger{display:none;} }
.burger span{width:22px; height:1.5px; background:var(--bone);}
.mobile-menu{
  position:fixed; inset:0; top:80px; background:var(--ink); z-index:190;
  display:flex; flex-direction:column; padding:50px 40px; gap:6px;
  transform:translateX(100%); transition:transform .45s var(--ease);
}
.mobile-menu.open{transform:none;}
.mobile-menu a{
  font-family:var(--display); font-size:26px; font-weight:600; padding:14px 0;
  border-bottom:1px solid var(--rule-dark); color:var(--bone); display:block;
}
.mobile-menu a:hover{color:var(--platinum);}

/* HERO */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; padding:170px 0 120px; border-bottom:1px solid var(--rule-dark); overflow:hidden;}
.hero-mark{position:absolute; right:-8%; top:50%; transform:translateY(-50%); width:min(620px,70vw); height:auto; opacity:0.07; pointer-events:none; animation:slowspin 200s linear infinite;}
@keyframes slowspin{from{transform:translateY(-50%) rotate(0);} to{transform:translateY(-50%) rotate(360deg);}}
.hero-content{position:relative; z-index:2; max-width:740px;}
.hero h1{font-weight:700; font-size:clamp(36px,6vw,64px); letter-spacing:-0.025em; margin:28px 0 28px;}
.hero h1 em{color:var(--platinum); font-style:normal; font-weight:300;}
.hero .lede{font-size:17px; color:var(--steel); max-width:56ch; margin-bottom:40px; font-weight:300; line-height:1.8;}
.hero-cta{display:flex; gap:16px; flex-wrap:wrap;}
.hero-meta{position:absolute; bottom:44px; left:0; right:0; z-index:2;}
.hero-meta .wrap{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel);}
.hero-meta strong{color:var(--platinum); font-weight:600;}
.hero-meta .arrow{color:var(--graphite); margin:0 10px;}
@media(max-width:760px){
  .hero{min-height:0; padding:140px 0 60px; display:block;}
  .hero-meta{position:static; margin-top:70px;}
  .hero-meta .wrap{flex-direction:column; align-items:flex-start; gap:10px;}
}

.credibility{background:var(--panel); border-bottom:1px solid var(--rule-dark); padding:44px 0;}
.cred-grid{display:flex; flex-wrap:wrap;}
.cred-item{padding:16px 28px 16px 0; border-right:1px solid var(--rule-dark); margin-right:28px; flex:1 1 220px;}
.cred-item:last-child{border-right:none; margin-right:0;}
.cred-item .cred-val{font-size:14px; font-weight:600; color:var(--bone);}
.cred-item .cred-src{font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--graphite); margin-top:6px; font-family:var(--display);}

.standard{background:var(--paper); color:var(--ink); border-bottom:1px solid var(--rule-light); padding:70px 0;}
.standard .wrap{display:grid; grid-template-columns:1fr; gap:34px;}
@media(min-width:880px){ .standard .wrap{grid-template-columns:0.9fr 2fr; align-items:start;} }
.standard h2{font-weight:700; font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--ink-label); padding-top:6px;}
.standard p{font-weight:500; font-size:clamp(18px,2.2vw,25px); line-height:1.4; letter-spacing:-0.01em; color:var(--ink); font-family:var(--display);}
.standard p strong{font-weight:700;}

section{padding:130px 0;}
@media(max-width:640px){ section{padding:90px 0;} }
.section-head{max-width:70ch; margin-bottom:64px;}
.section-head h2{font-weight:700; font-size:clamp(26px,3.4vw,42px); margin-top:20px; line-height:1.14; letter-spacing:-0.01em;}
.section-head h2 em{color:var(--platinum); font-style:normal; font-weight:300;}
.section-head p{color:var(--steel); font-size:15.5px; max-width:56ch; margin-top:18px; font-weight:300;}

.tracks{background:var(--panel); border-bottom:1px solid var(--rule-dark);}
.track-grid{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-dark); margin-top:10px;}
.track{background:var(--panel); padding:44px 38px; position:relative; flex:1 1 280px;}
.track::before{content:''; position:absolute; left:0; top:0; width:100%; height:2px; background:var(--platinum); transform:scaleX(0); transform-origin:left; transition:transform .5s var(--ease);}
.track:hover::before{transform:none;}
.track .num{font-size:13px; letter-spacing:0.16em; text-transform:uppercase; color:var(--platinum); font-weight:700;}
.track h3{font-size:21px; margin:18px 0 12px; font-weight:600;}
.track p{font-size:14px; color:var(--steel); font-weight:300;}

.featured{background:var(--paper); color:var(--ink); border-bottom:1px solid var(--rule-light);}
.feat-grid{display:grid; grid-template-columns:1fr; gap:60px; align-items:center;}
@media(min-width:880px){ .feat-grid{grid-template-columns:0.62fr 1.38fr;} }
.feat-cover{max-width:340px; border:1px solid var(--rule-light); box-shadow:0 30px 60px rgba(10,10,10,0.18); transition:transform .4s var(--ease);}
.feat-cover:hover{transform:translateY(-6px);}
.feat-body .eyebrow{margin-bottom:16px;}
.feat-body h2{font-size:clamp(25px,3vw,38px); font-weight:700; margin-bottom:18px; line-height:1.16;}
.feat-body h2 em{font-weight:300; font-style:normal;}
.feat-body p{color:var(--ink-body); font-size:15.5px; margin-bottom:16px; max-width:60ch; font-weight:400; font-family:var(--body); line-height:1.8;}
.spec-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0; margin:32px 0; border-top:1px solid var(--rule-light); border-bottom:1px solid var(--rule-light);}
@media(min-width:520px){ .spec-grid{grid-template-columns:repeat(4,1fr);} }
.spec{padding:20px 24px 20px 0; border-right:1px solid var(--rule-light);}
.spec:nth-child(2n){border-right:none;}
@media(min-width:520px){ .spec{border-right:1px solid var(--rule-light);} .spec:nth-child(2n){border-right:1px solid var(--rule-light);} .spec:nth-child(4n){border-right:none;} }
.spec .spec-label{font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-label); margin-bottom:6px;}
.spec .spec-val{font-size:15px; font-weight:600; color:var(--ink);}
.feat-cta{display:flex; gap:16px; flex-wrap:wrap;}
.retailer-strip{border-top:1px solid var(--rule-light); padding-top:22px; margin-bottom:32px;}
.retailer-format-line{font-size:13px; color:var(--ink-body); margin-bottom:8px; font-family:var(--body); line-height:1.7;}
.retailer-format-line strong{font-family:var(--display); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--ink); margin-right:8px;}
.retailer-format-line a{text-decoration:underline; color:var(--ink-body);}
.retailer-format-line a:hover{color:var(--ink);}
.retailer-strip .lbl{font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-label); margin-bottom:10px; font-family:var(--display);}
.retailer-list{display:flex; flex-wrap:wrap; gap:10px;}
.retailer-list span{font-size:11.5px; letter-spacing:0.04em; color:var(--ink-body); border:1px solid var(--rule-light); padding:7px 14px; font-family:var(--display);}

.accolades{display:flex; flex-wrap:wrap; gap:12px; margin:28px 0;}
.accolade{border:1px solid var(--rule-dark); padding:14px 18px; flex:1 1 240px; max-width:300px;}
.accolade.on-paper{border-color:var(--rule-light);}
.accolade .a-val{font-size:13.5px; font-weight:600; color:var(--platinum);}
.accolade.on-paper .a-val{color:var(--ink);}
.accolade .a-src{font-size:10px; letter-spacing:0.12em; text-transform:uppercase; color:var(--graphite); margin-top:5px; font-family:var(--display);}

.model{background:var(--ink); border-bottom:1px solid var(--rule-dark);}
.model-step{display:grid; grid-template-columns:80px 1fr; gap:30px; padding:40px 0; border-bottom:1px solid var(--rule-dark); align-items:start;}
@media(min-width:820px){ .model-step{grid-template-columns:110px 0.9fr 1.4fr; gap:40px;} }
.model-step:last-child{border-bottom:none;}
.step-num{font-weight:600; font-size:clamp(26px,3.2vw,40px); color:var(--platinum); line-height:1;}
.model-step h3{font-weight:600; font-size:20px; line-height:1.25;}
.model-step p{color:var(--steel); font-size:14px; font-weight:300; grid-column:2; font-family:var(--body); line-height:1.8;}
@media(min-width:820px){ .model-step p{grid-column:auto;} }

.org-band{background:var(--paper); color:var(--ink); padding:100px 0; border-bottom:1px solid var(--rule-light);}
.org-band .wrap{display:grid; grid-template-columns:1fr; gap:40px;}
@media(min-width:900px){ .org-band .wrap{grid-template-columns:1.15fr 0.85fr; align-items:center;} }
.org-band h2{font-size:clamp(24px,2.8vw,34px); font-weight:600; line-height:1.2; margin-top:18px;}
.org-band h2 em{font-weight:300; font-style:normal;}
.org-band p{margin-top:16px; font-size:15px; max-width:52ch; color:var(--ink-body); font-weight:400; font-family:var(--body); line-height:1.8;}
.org-panel{background:var(--ink); color:var(--bone); padding:40px; border:1px solid var(--rule-light);}
.org-panel .eyebrow{color:var(--platinum); margin-bottom:16px;}
.org-panel .eyebrow::before{background:var(--platinum);}
.org-panel p{color:var(--steel); font-size:14px; font-weight:300; margin-bottom:0; font-family:var(--body); line-height:1.8;}
.org-panel strong{color:var(--bone); font-weight:600;}

.clients{background:var(--panel); border-bottom:1px solid var(--rule-dark);}
.clients-grid{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-dark);}
.client-card{background:var(--ink); padding:48px 44px; flex:1 1 380px;}
@media(max-width:640px){ .client-card{padding:36px 26px;} }
.client-tag{font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--steel); border:1px solid var(--rule-dark); display:inline-block; padding:6px 12px; margin-bottom:24px;}
.client-tag.on{color:var(--platinum);}
.client-card h3{font-size:25px; font-weight:600; margin-bottom:14px;}
.client-card p{font-size:14.5px; color:var(--steel); margin-bottom:24px; font-weight:300; font-family:var(--body); line-height:1.8;}
.client-link{font-size:12px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum); font-weight:700; display:inline-flex; align-items:center; gap:10px;}
.client-link .arrow-ic{transition:transform .25s var(--ease);}
.client-card:hover .client-link .arrow-ic{transform:translateX(6px);}

/* CONTACT / CTA */
.cta-final{text-align:center; padding:170px 0; position:relative; overflow:hidden; border-top:1px solid var(--rule-dark);}
.cta-final .hero-mark{right:auto; left:50%; transform:translate(-50%,-50%); top:50%;}
.cta-final .wrap{position:relative; z-index:2;}
.cta-final h2{font-weight:700; font-size:clamp(28px,4.2vw,46px); max-width:20ch; margin:26px auto; line-height:1.15; letter-spacing:-0.01em;}
.cta-final h2 em{color:var(--platinum); font-style:normal; font-weight:300;}
.cta-final > .wrap > p{color:var(--steel); max-width:46ch; margin:0 auto 40px; font-weight:300; font-family:var(--body); line-height:1.8;}

.contact-form{max-width:520px; margin:0 auto; text-align:left;}
.form-row{margin-bottom:20px;}
.form-row label{display:block; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--steel); margin-bottom:8px; font-family:var(--display);}
.form-row input, .form-row textarea{
  width:100%; background:var(--panel); border:1px solid var(--rule-dark); color:var(--bone);
  padding:14px 16px; font-family:var(--body); font-size:14.5px;
}
.form-row textarea{resize:vertical; min-height:120px;}
.form-note{font-size:12.5px; color:var(--graphite); margin-top:18px; font-family:var(--body); line-height:1.7;}
.hp-field{position:absolute; left:-5000px;}

/* FOOTER */
footer{background:var(--panel); border-top:1px solid var(--rule-dark); padding:100px 0 40px;}
.footer-grid{display:grid; grid-template-columns:1fr; gap:50px;}
@media(min-width:840px){
  .footer-grid{grid-template-columns:1.4fr 0.7fr 0.7fr 0.9fr;}
  /* Desktop keeps the original left-to-right sequence (Company, Connect,
     Mashman). Mobile follows plain DOM order (Company, Mashman, Connect)
     so social links stack below Mashman, per request. */
  .footer-col-company{order:1;}
  .footer-col-connect{order:2;}
  .footer-col-mashman{order:3;}
}
.footer-grid .footer-h5{font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--steel); margin-bottom:20px; font-weight:700; font-family:var(--display);}
.footer-grid a, .footer-grid p{font-size:13.5px; color:var(--steel); display:block; margin-bottom:10px; font-weight:300; font-family:var(--body);}
.footer-grid a:hover{color:var(--platinum);}
.footer-brand-lockup{display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.footer-icon{height:26px; width:auto;}
.footer-brand-lockup .brand-name{font-size:14px;}
.foot-note{font-size:12.5px; color:var(--graphite); max-width:80ch; margin-top:18px; font-weight:300; line-height:1.7; font-family:var(--body);}
.foot-bottom{margin-top:80px; padding-top:28px; border-top:1px solid var(--rule-dark); display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; font-size:12px; color:var(--graphite); font-family:var(--display);}
.foot-bottom a:hover{color:var(--platinum);}

/* PAGE HEAD (catalog/about) */
.page-head{padding:170px 0 70px; border-bottom:1px solid var(--rule-dark);}

/* Legal document pages (Privacy, Terms): centered narrow reading column,
   header sized for a document rather than a marketing headline. */
.legal-head{padding:170px 0 60px; border-bottom:1px solid var(--rule-dark); text-align:center;}
.legal-head .wrap{max-width:760px;}
.legal-head .eyebrow{justify-content:center;}
.legal-head h1{font-weight:700; font-size:clamp(26px,3.6vw,38px); margin:20px 0 14px; line-height:1.2;}
.legal-head p{color:var(--steel); font-size:14px; font-family:var(--body);}
.legal-body{padding:80px 0 120px;}
.legal-body .wrap{max-width:760px; text-align:left;}
.legal-body h2{font-family:var(--display); font-weight:600; font-size:19px; margin:44px 0 14px; line-height:1.3;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{color:var(--steel); font-size:14.5px; font-family:var(--body); line-height:1.8; margin-bottom:14px;}
.legal-body ul{margin:0 0 14px 0; padding-left:22px;}
.legal-body li{color:var(--steel); font-size:14.5px; font-family:var(--body); line-height:1.8; margin-bottom:8px;}
.legal-body strong{color:var(--bone); font-weight:600;}
.legal-body a{color:var(--platinum); text-decoration:underline;}
.page-head h1{font-weight:700; font-size:clamp(32px,5vw,52px); margin:22px 0 20px; line-height:1.14;}
.page-head h1 em{color:var(--platinum); font-style:normal; font-weight:300;}
.page-head p{color:var(--steel); max-width:60ch; font-size:15.5px; font-weight:300; font-family:var(--body); line-height:1.8;}

.breadcrumb{font-size:12px; color:var(--graphite); margin-bottom:20px; font-family:var(--display); text-transform:uppercase; letter-spacing:0.08em;}
.breadcrumb a{color:var(--steel);}
.breadcrumb a:hover{color:var(--platinum);}
.breadcrumb .sep{margin:0 8px; color:var(--rule-dark);}

.title-entry{display:grid; grid-template-columns:1fr; gap:56px; align-items:start;}
@media(min-width:880px){ .title-entry{grid-template-columns:0.55fr 1.45fr;} }
.title-cover{max-width:320px; border:1px solid var(--rule-dark); box-shadow:0 30px 70px rgba(0,0,0,0.5);}
.title-status{font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--platinum); border:1px solid var(--rule-dark); display:inline-block; padding:6px 12px; margin-bottom:22px;}
.title-body h2{font-size:clamp(24px,3.2vw,36px); font-weight:700; line-height:1.18; margin-bottom:10px;}
.title-body h2 em{font-weight:300; color:var(--platinum); font-style:normal;}
.title-body .fore{font-size:14px; color:var(--steel); margin-bottom:22px; font-family:var(--body);}
.title-body p.desc{color:var(--steel); font-size:15.5px; max-width:64ch; margin-bottom:28px; font-weight:300; font-family:var(--body); line-height:1.8;}

.spec-table{border-top:1px solid var(--rule-dark);}
.spec-row{display:grid; grid-template-columns:1fr; gap:4px; padding:18px 0; border-bottom:1px solid var(--rule-dark);}
@media(min-width:600px){ .spec-row{grid-template-columns:220px 1fr; gap:20px; align-items:baseline;} }
.spec-row .k{font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--graphite); font-weight:600;}
.spec-row .v{font-size:14.5px; color:var(--bone); font-weight:400; font-family:var(--body);}

.retailer-strip.dark .lbl{color:var(--graphite);}
.retailer-strip.dark{border-top-color:var(--rule-dark);}
.retailer-strip.dark .retailer-list span{color:var(--steel); border-color:var(--rule-dark);}

.formats{background:var(--paper); color:var(--ink); border-bottom:1px solid var(--rule-light);}
.format-grid{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-light); border:1px solid var(--rule-light); margin-top:10px;}
.format-card{background:var(--paper); padding:32px 30px; flex:1 1 260px;}
.format-card.format-pending{background:var(--paper-warm);}
.format-head{margin-bottom:10px;}
.format-head h3{font-size:19px; font-weight:600; margin-bottom:4px;}
.format-price{font-size:17px; font-weight:700; color:var(--ink); font-family:var(--display);}
.format-isbn{font-size:11.5px; color:var(--ink-label); font-family:var(--display); letter-spacing:0.02em;}
.format-retailers{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px;}
.format-retailers span{font-size:12px; font-family:var(--display); letter-spacing:0.02em;}
.format-retailers span a{border:1px solid var(--rule-light); padding:6px 12px; display:inline-block; color:var(--ink-body); text-decoration:none;}
.format-retailers span a:hover{border-color:var(--ink); color:var(--ink);}
.format-pending-note{font-size:13px; color:var(--ink-label); font-family:var(--body); line-height:1.7; margin-top:10px;}

.chapters{margin-top:36px;}
.chapters h3{font-size:14px; letter-spacing:0.1em; text-transform:uppercase; color:var(--platinum); margin-bottom:18px; font-weight:600;}
.chapter-list{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 30px; list-style:none;}
@media(max-width:560px){ .chapter-list{grid-template-columns:1fr;} }
.chapter-list li{font-size:14px; color:var(--steel); font-weight:300; padding:10px 0; border-bottom:1px solid var(--rule-dark); font-family:var(--body);}
.chapter-list li span{color:var(--graphite); font-size:12px; margin-right:10px; font-family:var(--display);}
.chapter-list li span.essay-tag{color:var(--platinum); letter-spacing:0.08em; text-transform:uppercase; font-size:10.5px;}

.historical{background:var(--panel);}
.hist-tag{font-size:10px; letter-spacing:0.18em; text-transform:uppercase; color:var(--graphite); border:1px solid var(--rule-dark); display:inline-block; padding:6px 12px; margin-bottom:22px;}
.hist-note{font-size:13.5px; color:var(--graphite); max-width:64ch; margin-top:24px; font-weight:300; border-top:1px solid var(--rule-dark); padding-top:20px; font-family:var(--body); line-height:1.7;}

.acclaim-grid{display:flex; flex-wrap:wrap; gap:1px; background:var(--rule-dark); margin-top:36px; border:1px solid var(--rule-dark);}
.acclaim-item{background:var(--ink); padding:24px 26px; flex:1 1 260px;}
.acclaim-item .a-quote{font-size:14px; color:var(--bone); font-family:var(--body); line-height:1.6; margin-bottom:14px;}
.acclaim-item .a-name{font-size:14.5px; font-weight:600; color:var(--bone); font-family:var(--display);}
.acclaim-item .a-role{font-size:12.5px; color:var(--steel); margin-top:4px; font-weight:300; font-family:var(--body);}

.future{background:var(--panel);}
.future h2{font-weight:600; font-size:clamp(22px,2.6vw,32px); margin:20px 0; max-width:24ch; line-height:1.25;}
.future h2 em{color:var(--platinum); font-style:normal; font-weight:300;}
.future p{color:var(--steel); max-width:56ch; font-size:14.5px; font-weight:300; font-family:var(--body); line-height:1.8;}

.prose{padding:90px 0; border-bottom:1px solid var(--rule-dark);}
.prose h2{font-weight:600; font-size:clamp(22px,2.6vw,30px); margin-bottom:20px; line-height:1.25;}
.prose h2 em{color:var(--platinum); font-style:normal; font-weight:300;}
.prose p{color:var(--steel); font-size:15.5px; margin-bottom:18px; max-width:62ch; font-weight:300; font-family:var(--body); line-height:1.8;}
.prose p strong{color:var(--bone); font-weight:600;}
.prose .lead-stmt{font-size:17px; font-weight:500; color:var(--bone); line-height:1.6; max-width:60ch; font-family:var(--display);}

.fact-panel{background:var(--panel); border:1px solid var(--rule-dark); padding:36px 40px; margin:34px 0;}
.fact-panel .eyebrow{margin-bottom:14px;}
.fact-panel p{color:var(--steel); font-size:14.5px; margin-bottom:0; font-weight:300; font-family:var(--body); line-height:1.8;}
.fact-panel p strong{color:var(--bone);}

.qa{border-top:1px solid var(--rule-dark);}
.qa-item{padding:32px 0; border-bottom:1px solid var(--rule-dark);}
.qa-item h3{font-size:17px; font-weight:600; margin-bottom:10px;}
.qa-item p{color:var(--steel); font-size:14.5px; font-weight:300; max-width:62ch; font-family:var(--body); line-height:1.8;}