/* ==========================================================================
   LucasHeffner.com / Up Armor Publishing -- theme mockup stylesheet
   Structure from the Divi "Author" layout pack, reskinned to the Up Armor brand.
   Headings + UI: Poppins 700 | Body: Mulish | Palette: Up Armor orange on near-black
   ========================================================================== */

:root{
  /* ---- Up Armor brand ------------------------------------------------- */
  --brand:#f48120;          /* Up Armor orange -- primary action + accent   */
  --brand-deep:#d96a0f;     /* hover / pressed                              */
  --brand-soft:#fdf0e4;     /* tinted background wash                       */
  --panel:#1f2328;          /* dark panel / hero card / contact card        */
  --footer:#121417;         /* footer band                                  */
  --ink:#1a1d21;            /* body text + nav                              */
  --muted:#6b7280;          /* secondary text                               */
  --light:#f4f4f4;          /* light section background                     */
  --white:#fff;
  --line:rgba(0,0,0,.12);

  /* status colours for the book status engine */
  --st-available:#1f7a45;
  --st-preorder:#f48120;
  --st-coming:#1f2328;
  --st-dev:#6b7280;
  --st-sold:#8c2f2f;

  /* ---- legacy token names kept as aliases so existing rules still read -- */
  --navy:var(--panel);
  --dark:var(--footer);
  --blue:var(--brand);
  --tan:var(--brand);
  --tan-card:var(--panel);

  /* ---- type: Poppins headings over Mulish body (both SIL OFL) ---------- */
  --serif:"Poppins",Helvetica,Arial,sans-serif;
  --sans:"Mulish",Helvetica,Arial,sans-serif;
  --ui:"Poppins",Helvetica,Arial,sans-serif;

  --row:1080px;
  --row-wide:1280px;
  --header-h:64px;

  --shadow-card:0 35px 50px -35px rgba(0,0,0,.5);
  --shadow-hero:0 35px 70px -35px rgba(0,0,0,.6);
  --shadow-btn:0 22px 40px 0 rgba(244,129,32,.28);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  padding-top:var(--header-h);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.8em;
  color:var(--ink);
  background:var(--white);
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Typography ---------- */
h1,h2,h3,h5,h6{
  font-family:var(--serif);
  font-weight:700;
  line-height:1.15em;
  letter-spacing:-.02em;
  margin:0 0 .3em;
  color:var(--ink);
}
h1{font-size:60px}
h2{font-size:46px}
h3{font-size:24px;line-height:1.4em}
h5{font-size:20px}
h6{font-size:18px}
h4{                                  /* the eyebrow / kicker style */
  font-family:var(--ui);
  font-weight:700;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:2px;
  line-height:1.8em;
  color:var(--tan);
  margin:0 0 .6em;
}
p{margin:0 0 1em}
.lead{font-size:18px;line-height:1.8em}
.small{font-size:14px}
.muted{color:var(--muted)}

/* ---------- Layout primitives ---------- */
.section{padding:100px 0;position:relative}
.section--tight{padding:70px 0}
.section--tall{padding:150px 0}
.row{max-width:var(--row);margin:0 auto;padding:0 30px}
.row--wide{max-width:var(--row-wide)}
.row--narrow{max-width:800px}
.grid{display:grid;gap:40px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.stack>*+*{margin-top:20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-weight:700;
  font-size:14px;
  letter-spacing:2px;
  text-transform:uppercase;
  padding:.85em 1.9em;
  border:2px solid var(--brand);
  background:var(--brand);
  color:var(--white);
  cursor:pointer;
  transition:all .3s ease;
}
.btn:hover{background:var(--brand-deep);border-color:var(--brand-deep)}
.btn--dark{background:var(--ink);border-color:var(--ink)}
.btn--dark:hover{background:var(--brand);border-color:var(--brand)}
.btn--outline{background:transparent;color:var(--brand)}
.btn--outline:hover{background:var(--brand);color:#fff}
.btn--shadow{box-shadow:var(--shadow-btn)}
.btn--ghost{
  border:0;
  background:transparent;
  color:var(--blue);
  padding:.3em 0;
}
.btn--ghost:hover{background:transparent;color:var(--ink)}
.btn--light{border-color:var(--white);background:var(--white);color:var(--ink)}
.btn--block{display:block;width:100%;text-align:center}

/* ---------- Header ---------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:99;
  height:var(--header-h);
  background:var(--white);
  box-shadow:0 0 30px rgba(7,51,84,.17);
  font-family:var(--ui);
}
.site-header .row{
  max-width:none;padding:0 40px;height:100%;
  display:flex;align-items:center;justify-content:space-between;
}
.site-title{
  font-family:var(--ui);
  font-size:23px;font-weight:600;color:var(--ink);
  margin:0;line-height:1;
}
.main-nav ul{display:flex;gap:22px;margin:0;padding:0;list-style:none}
.main-nav a{font-size:15px;font-weight:500;color:var(--ink)}
.main-nav a:hover{color:var(--muted)}
.main-nav .is-current a{font-weight:600}
.header-tools{display:flex;align-items:center;gap:18px}
.cart-link{font-size:15px;font-weight:500}
.cart-count{
  display:inline-block;min-width:20px;padding:0 6px;margin-left:4px;
  background:var(--blue);color:#fff;border-radius:10px;
  font-size:12px;line-height:20px;text-align:center;
}
.nav-toggle{display:none;background:none;border:0;font:inherit;cursor:pointer}

/* ---------- Hero variants ---------- */
/* Split hero: colour wash on the left 40%, paper texture over the whole band */
.hero-split{
  padding:100px 0 180px;
  /* flat two-tone band: brand block on the left 40%, light on the right.
     A photographic texture here fought the book cover for attention. */
  background-image:linear-gradient(90deg,var(--brand) 40%,var(--light) 40%);
}
.hero-split .row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.hero-cover img{border-radius:6px;box-shadow:var(--shadow-hero)}
.hero-body h1{margin-bottom:.1em}
.hero-body .genre{font-size:15px;font-weight:600;margin-bottom:40px}
.hero-body .btn{margin-top:30px}

/* Panel hero: photo band with a navy card bleeding off the left edge */
/* background-position is anchored to the top so tall photos crop from the
   bottom only -- on wide screens a centred crop cut off the subject's head */
.hero-panel{padding:150px 0 0;background-size:cover;background-position:center top}
.hero-panel .hero-card{
  background:var(--navy);
  border-radius:0 6px 6px 0;
  border-right:30px solid var(--tan);
  box-shadow:var(--shadow-hero);
  padding:60px;
  max-width:620px;
}
.hero-panel .hero-card h1,
.hero-panel .hero-card h2,
.hero-panel .hero-card h4,
.hero-panel .hero-card p{color:var(--white)}
.hero-panel .row{padding-bottom:100px}

/* ---------- Intro / author bio ---------- */
.avatar{width:120px;border-radius:50%;margin:0 auto 20px}
.section--fade{background-image:linear-gradient(180deg,var(--light) 0%,var(--white) 100%)}
.section--paper{background-image:linear-gradient(rgba(244,244,244,.94),rgba(244,244,244,.94)),url(../images/ua-texture-shingle.jpg);background-size:cover}
.section--light{background:var(--light)}

/* ---------- Book cards ---------- */
.book{text-align:center}
.book img{border-radius:6px;box-shadow:var(--shadow-card)}
.book h3{margin:20px 0 8px}
.book p{font-size:16px;margin-bottom:15px}

/* ---------- Stats / counters ---------- */
.counter{text-align:center}
.counter .value{
  font-family:var(--serif);font-weight:700;font-size:60px;
  color:var(--tan);line-height:1.1;display:block;
}
.counter .label{
  font-family:var(--sans);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:2px;color:var(--ink);
}

/* ---------- Quote / testimonial band ---------- */
.section--quotes{
  background-color:var(--navy);
  background-image:url(../images/pages-divider.png);
  background-size:contain;background-position:center top;background-repeat:no-repeat;
  padding:150px 0 120px;
}
.quote{color:#fff;text-align:center}
.quote .mark{
  display:block;font-family:var(--serif);font-size:70px;line-height:1;
  color:var(--tan);margin-bottom:10px;
}
.quote p{
  font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:24px;line-height:1.4em;color:#fff;
}
.quote cite{
  display:block;font-family:var(--sans);font-weight:700;font-style:normal;
  font-size:14px;text-transform:uppercase;letter-spacing:2px;color:var(--tan);
}

/* ---------- Logo strip ---------- */
.logos{display:flex;flex-wrap:wrap;gap:50px;align-items:center;justify-content:center}
.logos img{max-height:64px;width:auto;opacity:.75}

/* ---------- Events ---------- */
.event{
  display:grid;grid-template-columns:220px 1fr 180px;gap:30px;align-items:center;
  padding:40px 0;border-bottom:1px solid var(--line);
}
.event:last-child{border-bottom:0}
.event .date{
  font-family:var(--sans);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:2px;color:var(--tan);
}
.event .city{font-family:var(--serif);font-weight:700;font-size:24px;color:var(--ink)}
.event h3{margin:0 0 8px}
.event p{font-size:16px;margin:0}
.event .action{text-align:right}
.event--stacked{grid-template-columns:1fr;gap:10px}
.event--stacked .action{text-align:left}

/* ---------- Blog ---------- */
.post-card{background:var(--white);box-shadow:var(--shadow-card);border-radius:6px;overflow:hidden}
.post-card .thumb{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-card .body{padding:25px}
.post-card h3{margin-bottom:6px}
.post-meta{
  font-size:13px;color:var(--muted);text-transform:uppercase;
  letter-spacing:1px;margin-bottom:12px;
}
.post-card p{font-size:15px}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:60px}
.pagination a,.pagination span{
  padding:8px 16px;border:1px solid var(--line);
  font-size:14px;font-weight:700;letter-spacing:1px;
}
.pagination .is-current{background:var(--blue);color:#fff;border-color:var(--blue)}

/* ---------- Shop / products ---------- */
.product-card{text-align:center;position:relative}
.product-card .media{
  display:block;                    /* inline <a> broke absolute badge placement */
  position:relative;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-card);
}
.product-card .media img{aspect-ratio:3/4;object-fit:cover;width:100%}
.product-card h3{margin:20px 0 4px;font-size:20px}
.badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:var(--tan);color:#fff;
  font-family:var(--sans);font-weight:700;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;padding:4px 12px;border-radius:3px;
}
.price{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink)}
.price del{color:var(--muted);font-size:17px;margin-right:8px;font-weight:400}
.price ins{text-decoration:none}
.stars{color:var(--tan);letter-spacing:2px;font-size:14px}
.stars .count{color:var(--muted);letter-spacing:0;margin-left:6px;font-size:13px}

/* ---------- Countdown ---------- */
.countdown{display:flex;gap:30px;justify-content:center;flex-wrap:wrap}
.countdown .unit{text-align:center;color:#fff}
.countdown .num{font-family:var(--serif);font-size:72px;line-height:1;color:var(--tan)}
.countdown .cap{
  font-family:var(--sans);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:2px;
}

/* ---------- Coming soon / CTA split ---------- */
.section--cta{
  padding:150px 0 10%;
  background-image:linear-gradient(90deg,var(--light) 30%,rgba(244,244,244,.55) 65%),
                   url(../images/ua-texture-shingle.jpg);
  background-size:auto,cover;background-position:center;
}
.section--cta .row{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);padding:100px 0;color:#fff}
.contact-card{
  background:var(--panel);
  border-left:10px solid var(--brand);
  border-radius:6px;
  box-shadow:0 35px 65px 0 rgba(0,0,0,.25);
  padding:70px 3%;
  margin-top:-10%;
  position:relative;z-index:2;
}
.contact-card .grid{gap:30px}
.contact-item{display:flex;gap:20px;align-items:flex-start;color:#fff}
.contact-item .icon{
  flex:0 0 auto;width:82px;height:82px;border:3px solid #fff;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.contact-item .icon svg{width:32px;height:32px;fill:none;stroke:#fff;stroke-width:1.6}
.contact-item h3{color:#fff;font-size:24px;margin:0 0 4px;line-height:1.2}
.contact-item a{font-size:18px;color:#fff}

.newsletter{max-width:800px;margin:0 auto;text-align:center}
.newsletter h2{color:#fff;font-size:38px;line-height:1.3em}
.newsletter p{color:#fff;font-size:18px}
.newsletter form{display:flex;gap:12px;justify-content:center;margin-top:24px;flex-wrap:wrap}
.newsletter input{
  flex:1 1 260px;max-width:340px;
  padding:14px 18px;border:0;border-radius:3px;
  font-family:var(--sans);font-size:16px;background:#fff;color:var(--ink);
}
/* Transparent monochrome icons -- colour is inherited, so the same markup
   reads white on the dark footer and ink on a light section */
.social{display:flex;gap:18px;justify-content:center;margin-top:36px;list-style:none;padding:0}
.social a{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;
  color:inherit;opacity:.75;
  transition:opacity .3s ease;
}
.social a svg{width:100%;height:100%;fill:currentColor}
.social a:hover{opacity:1}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:60px;padding-top:24px;
  text-align:center;font-size:14px;color:rgba(255,255,255,.6);
}

/* ==========================================================================
   WooCommerce templates
   ========================================================================== */

/* Page header used by the shop sub-pages */
.page-head{
  padding:150px 0 60px;
  background:var(--light);
  background-image:linear-gradient(rgba(244,244,244,.94),rgba(244,244,244,.94)),
                   url(../images/ua-texture-shingle.jpg);
  background-size:cover;
  border-bottom:5px solid var(--brand);
  text-align:center;
}
.page-head h1{font-size:64px}
.breadcrumb{
  font-family:var(--sans);font-size:13px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted);
}
.breadcrumb a:hover{color:var(--ink)}

/* WooCommerce notices */
.notice{
  border-left:6px solid var(--blue);
  background:var(--light);
  padding:18px 24px;margin-bottom:40px;
  font-size:15px;
}
.notice--success{border-left-color:var(--tan)}

/* Single product */
.product-single{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.product-gallery .main img{border-radius:6px;box-shadow:var(--shadow-card)}
.product-gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:14px}
.product-gallery .thumbs img{border-radius:4px;cursor:pointer;aspect-ratio:1;object-fit:cover}
.product-summary h1{font-size:48px;margin-bottom:.15em}
.product-summary .price{font-size:32px;display:block;margin:10px 0 20px}
.product-summary .excerpt{font-size:18px;line-height:1.8em}
.qty-row{display:flex;gap:14px;align-items:center;margin:30px 0}
.qty{
  width:80px;padding:12px;border:1px solid var(--line);
  font-family:var(--sans);font-size:16px;text-align:center;
}
.product-meta{
  border-top:1px solid var(--line);margin-top:30px;padding-top:20px;
  font-size:14px;color:var(--muted);
}
.product-meta span{display:block}

.tabs{margin-top:80px;border-top:1px solid var(--line)}
.tabs nav{display:flex;gap:30px;padding:20px 0;flex-wrap:wrap}
.tabs nav a{
  font-family:var(--sans);font-weight:700;font-size:14px;
  text-transform:uppercase;letter-spacing:2px;color:var(--muted);
  padding-bottom:6px;
}
.tabs nav a.is-active{color:var(--ink);border-bottom:2px solid var(--blue)}
.tab-panel{padding:20px 0 40px;max-width:760px}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{
  text-align:left;padding:12px 0;border-bottom:1px solid var(--line);
}
.spec-table th{width:200px;font-family:var(--sans);font-weight:700}

.review{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.review .avatar-sm{width:56px;height:56px;border-radius:50%;flex:0 0 auto;object-fit:cover}
.review h4{color:var(--ink);margin-bottom:2px}

/* Cart */
.cart-layout{display:grid;grid-template-columns:2fr 1fr;gap:60px;align-items:start}
.cart-table{width:100%;border-collapse:collapse}
.cart-table th{
  font-family:var(--sans);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:2px;color:var(--muted);
  text-align:left;padding:0 12px 16px;border-bottom:1px solid var(--line);
}
.cart-table td{padding:24px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.cart-table td:first-child,.cart-table th:first-child{padding-left:0}
.cart-table td:last-child,.cart-table th:last-child{padding-right:0;text-align:right}
.cart-item{display:flex;gap:20px;align-items:center}
.cart-item img{width:90px;border-radius:4px;flex:0 0 auto}
.cart-item h3{font-size:20px;margin:0 0 4px}
.remove{color:var(--muted);font-size:20px;line-height:1}
.remove:hover{color:#c0392b}
.cart-actions{display:flex;gap:14px;justify-content:space-between;margin-top:30px;flex-wrap:wrap}
.coupon{display:flex;gap:10px}
.coupon input{padding:12px 16px;border:1px solid var(--line);font-family:var(--sans);font-size:15px}

.panel{
  background:var(--light);
  border-radius:6px;
  padding:36px 32px;
}
.panel h2{font-size:32px;margin-bottom:20px}
.totals{width:100%;border-collapse:collapse;font-size:16px}
.totals th{text-align:left;font-family:var(--sans);font-weight:700;padding:12px 0}
.totals td{text-align:right;padding:12px 0}
.totals tr+tr th,.totals tr+tr td{border-top:1px solid var(--line)}
.totals .grand th,.totals .grand td{
  font-family:var(--serif);font-weight:700;font-size:24px;padding-top:18px;
}
.shipping-options label{display:block;font-size:15px;margin-bottom:6px}

/* Checkout */
.checkout-layout{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:start}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:20px}
.field--full{grid-column:1 / -1}
.field label{
  font-family:var(--sans);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);
}
.field label .req{color:#c0392b}
.field input,.field select,.field textarea{
  padding:13px 16px;border:1px solid var(--line);background:#fff;
  font-family:var(--sans);font-size:16px;color:var(--ink);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--blue);
}
.field textarea{min-height:110px;resize:vertical}
.checkbox{display:flex;gap:10px;align-items:center;font-size:15px;margin-bottom:20px}
.form-section-title{
  font-family:var(--serif);font-weight:700;font-size:32px;
  margin:0 0 24px;
}
.order-review .line{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line);font-size:15px;
}
.order-review .line.total{
  font-family:var(--serif);font-weight:700;font-size:24px;border-bottom:0;padding-top:20px;
}
.payment-method{
  border:1px solid var(--line);background:#fff;
  padding:18px 20px;margin-bottom:12px;
}
.payment-method.is-active{border-color:var(--blue)}
.payment-method .head{display:flex;gap:10px;align-items:center;font-weight:700;font-size:15px}
.payment-method .desc{font-size:14px;color:var(--muted);margin:10px 0 0;padding-left:26px}

/* Order received */
.order-hero{text-align:center;max-width:760px;margin:0 auto}
.order-hero .tick{
  width:88px;height:88px;border-radius:50%;background:var(--tan);
  display:flex;align-items:center;justify-content:center;margin:0 auto 24px;
}
.order-hero .tick svg{width:40px;height:40px;stroke:#fff;stroke-width:2.5;fill:none}
.order-summary{
  display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  background:var(--light);border-radius:6px;padding:32px;margin:50px 0;
  text-align:center;
}
.order-summary .k{
  font-family:var(--sans);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:2px;color:var(--muted);
  display:block;margin-bottom:6px;
}
.order-summary .v{font-family:var(--serif);font-weight:700;font-size:22px}
.address-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:50px}
.address-grid address{font-style:normal;font-size:16px;line-height:1.9}

/* ---------- Mockup index page ---------- */
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.index-card{
  border:1px solid var(--line);border-radius:6px;padding:26px;
  transition:box-shadow .3s ease;
}
.index-card:hover{box-shadow:var(--shadow-card)}
.index-card h3{margin:0 0 6px}
.index-card p{font-size:14px;color:var(--muted);margin:0}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  h1{font-size:40px}
  h2{font-size:40px}
  .main-nav{display:none}
  .nav-toggle{display:block}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3,
  .index-grid{grid-template-columns:1fr}
  .grid--2,
  .hero-split .row,
  .section--cta .row,
  .product-single,
  .cart-layout,
  .checkout-layout,
  .address-grid{grid-template-columns:1fr}
  .hero-split{padding:60px 0 100px;background-image:linear-gradient(180deg,var(--brand) 42%,var(--light) 42%)}
  .section{padding:70px 0}
  .hero-panel .hero-card{padding:40px;border-radius:6px}
  .event{grid-template-columns:1fr;gap:10px}
  .event .action{text-align:left}
  .order-summary{grid-template-columns:repeat(2,1fr)}
  .contact-card{margin-top:0}
  .form-grid{grid-template-columns:1fr}
  .page-head{padding:90px 0 40px}
}
@media (max-width:640px){
  .grid--4{grid-template-columns:1fr}
  .cart-table thead{display:none}
  .cart-table td{display:block;border-bottom:0;padding:6px 0}
  .cart-table tr{display:block;border-bottom:1px solid var(--line);padding:20px 0}
  .cart-table td:last-child{text-align:left}
  .order-summary{grid-template-columns:1fr}
  .site-header .row{padding:0 20px}
}

/* ==========================================================================
   Brief-specific components
   Books library, Toolbox / Resources, Community, single article, My Account.
   ========================================================================== */

/* ---------- Status badges: the book status engine's only visual output ---- */
.status{
  display:inline-block;
  font-family:var(--ui);font-weight:700;font-size:11px;
  letter-spacing:2px;text-transform:uppercase;
  padding:5px 12px;border-radius:3px;color:#fff;background:var(--muted);
}
.status--available{background:var(--st-available)}
.status--preorder{background:var(--st-preorder)}
.status--coming{background:var(--st-coming)}
.status--development{background:var(--st-dev)}
.status--sold{background:var(--st-sold)}
.badge--status{position:absolute;top:14px;left:14px;z-index:2}

/* ---------- Books library ------------------------------------------------ */
.shelf{margin-bottom:80px}
.shelf:last-child{margin-bottom:0}
.shelf-head{
  display:flex;align-items:baseline;gap:16px;
  border-bottom:2px solid var(--line);padding-bottom:14px;margin-bottom:40px;
}
.shelf-head h2{font-size:32px;margin:0}
.shelf-head .count{font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.book-card{position:relative;text-align:left}
.book-card .media{position:relative;display:block;border-radius:6px;overflow:hidden;box-shadow:var(--shadow-card)}
.book-card h3{margin:20px 0 4px;font-size:22px}
.book-card .sub{font-family:var(--ui);font-size:14px;font-weight:600;color:var(--muted);margin:0 0 10px}
.book-card p{font-size:15px}

/* ---------- Editions (Choose Your Edition) ------------------------------- */
.edition{
  border:1px solid var(--line);border-top:5px solid var(--brand);
  background:#fff;padding:34px 30px;display:flex;flex-direction:column;
}
.edition h3{font-size:24px;margin-bottom:4px}
.edition .price{display:block;margin:6px 0 18px}
.edition ul{margin:0 0 24px;padding-left:18px;font-size:15px}
.edition li{margin-bottom:6px}
.edition .btn{margin-top:auto}
.edition--feature{border-top-color:var(--st-sold);box-shadow:var(--shadow-card)}

/* ---------- Toolbox / Resources ------------------------------------------ */
.chip-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.chip{
  font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:1px;
  text-transform:uppercase;padding:9px 18px;border:1px solid var(--line);border-radius:40px;
  transition:all .3s ease;
}
.chip:hover,.chip.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.tool-card{
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  display:flex;flex-direction:column;background:#fff;
}
.tool-card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tool-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.tool-card h3{font-size:20px;margin-bottom:8px}
.tool-card p{font-size:15px}
.tool-card .why{
  border-left:3px solid var(--brand);padding-left:14px;
  font-size:15px;color:var(--muted);margin:0 0 20px;
}
.tool-card .btn{margin-top:auto;align-self:flex-start}
.disclosure{
  background:var(--brand-soft);border-left:5px solid var(--brand);
  padding:22px 26px;font-size:15px;line-height:1.7;
}
.disclosure strong{font-family:var(--ui)}

/* ---------- FAQ (static <details>, no JavaScript) ------------------------ */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 40px 22px 0;position:relative;
  font-family:var(--serif);font-weight:700;font-size:20px;line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:6px;top:18px;
  font-family:var(--ui);font-weight:700;font-size:26px;color:var(--brand);
}
.faq details[open] summary::after{content:"\2013"}
.faq .answer{padding:0 40px 26px 0;font-size:16px;color:var(--muted)}

/* ---------- Community ---------------------------------------------------- */
.step{display:flex;gap:22px;align-items:flex-start}
.step .num{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:var(--brand);color:#fff;
  font-family:var(--serif);font-weight:700;font-size:22px;
  display:flex;align-items:center;justify-content:center;
}
.step h3{font-size:20px;margin:6px 0 6px}
.step p{font-size:15px;margin:0}
.url-list{list-style:none;margin:0;padding:0;font-family:var(--ui);font-size:15px}
.url-list li{
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid rgba(255,255,255,.14);
}
.url-list code{
  font-family:var(--ui);font-weight:600;color:var(--brand);
  background:rgba(244,129,32,.1);padding:3px 10px;border-radius:3px;
}
.url-list .to{font-size:14px;color:rgba(255,255,255,.6)}

/* ---------- Single article ----------------------------------------------- */
.article-hero{padding:130px 0 50px;background:var(--light)}
.article-hero h1{font-size:48px;max-width:820px}
.article-hero .post-meta{margin-bottom:16px}
.article-figure{max-width:760px;margin:0 auto 50px}
.article-figure img{border-radius:6px;box-shadow:var(--shadow-card);width:100%}
.prose{max-width:760px;margin:0 auto;font-size:18px;line-height:1.85}
.prose h2{font-size:32px;margin:48px 0 16px}
.prose h3{font-size:22px;margin:36px 0 12px}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:8px}
.prose blockquote{
  margin:36px 0;padding:6px 0 6px 28px;border-left:5px solid var(--brand);
  font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.5;
}
.prose img{border-radius:6px;margin:36px 0}
.share{
  display:flex;gap:16px;align-items:center;margin-top:50px;
  padding-top:26px;border-top:1px solid var(--line);
}
.share span{
  font-family:var(--ui);font-size:13px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted);
}
.share .social{margin:0}
.author-box{
  display:flex;gap:26px;align-items:flex-start;
  background:var(--light);border-radius:6px;padding:32px;margin-top:50px;
}
.author-box img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-box h3{margin-bottom:6px}
.author-box p{font-size:15px;margin:0}

/* ---------- My Account ---------------------------------------------------- */
.account-layout{display:grid;grid-template-columns:260px 1fr;gap:50px;align-items:start}
.account-nav{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.account-nav li+li{border-top:1px solid var(--line)}
.account-nav a{
  display:block;padding:15px 20px;
  font-family:var(--ui);font-size:14px;font-weight:600;
}
.account-nav a:hover{background:var(--light)}
.account-nav .is-current a{background:var(--brand);color:#fff}
.account-panel h2{font-size:30px}
.data-table{width:100%;border-collapse:collapse;font-size:15px}
.data-table th{
  text-align:left;padding:0 14px 14px;border-bottom:1px solid var(--line);
  font-family:var(--ui);font-size:12px;font-weight:700;
  letter-spacing:2px;text-transform:uppercase;color:var(--muted);
}
.data-table td{padding:18px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.data-table th:first-child,.data-table td:first-child{padding-left:0}
.data-table th:last-child,.data-table td:last-child{padding-right:0;text-align:right}
.download-row{display:flex;gap:16px;align-items:center}
.download-row img{width:54px;border-radius:3px}

/* ---------- Misc --------------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.split--top{align-items:start}
.split img{border-radius:6px;box-shadow:var(--shadow-card)}
.section--dark{background:var(--panel)}
.section--dark h1,.section--dark h2,.section--dark h3,.section--dark p{color:#fff}
.section--brand{background:var(--brand-soft)}
.ph-note{
  font-family:var(--ui);font-size:12px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--muted);margin-top:10px;
}

@media (max-width:980px){
  .account-layout,.split{grid-template-columns:1fr}
  .article-hero h1{font-size:34px}
  .prose{font-size:17px}
  .author-box{flex-direction:column}
}