/* =====================================================================
   ArthVed Media — premium publishing theme
   Palette: midnight ink · warm parchment · gilt brass · bottle-green cloth
   Type: Fraunces (display) · Spectral (read) · Inter (ui) · Noto Serif Devanagari
   ===================================================================== */

:root{
  --arthved-header-height:78px;
  --ink:#14131F;
  --ink-2:#211F30;
  --ink-soft:#565471;
  --parchment:#F6F1E7;
  --parchment-2:#EFE8D8;
  --paper:#FCFAF4;
  --brass:#B08D4C;
  --brass-deep:#8C6D33;
  --brass-soft:#D8C08A;
  --cloth:#17352E;
  --cloth-2:#0F241F;
  --line:rgba(20,19,31,.12);
  --shadow:rgba(20,19,31,.16);

  --f-display:"Fraunces", Georgia, serif;
  --f-read:"Spectral","Noto Serif Devanagari", Georgia, serif;
  --f-sans:"Inter", system-ui, -apple-system, sans-serif;

  --wrap:1200px;
  --gap:clamp(20px,4vw,64px);
  --radius:4px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--parchment); color:var(--ink);
  font-family:var(--f-sans); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
.wrap{width:min(var(--wrap),92vw); margin-inline:auto}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.skip-link,
a[href="#primary"]{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; left:0; top:0;}
.skip-link:focus,
a[href="#primary"]:focus{position:absolute !important; width:auto; height:auto; overflow:visible; clip:auto; clip-path:none; white-space:normal; left:16px; top:12px; background:var(--ink); color:var(--parchment); padding:8px 14px; border-radius:6px; z-index:100000;}

/* -------- shared type bits -------- */
.eyebrow{font-family:var(--f-sans); font-size:12px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px}
.eyebrow--brass{color:var(--brass-deep)}
em{font-style:italic}

/* -------- buttons -------- */
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-sans);
  font-weight:600; font-size:15px; letter-spacing:.01em; padding:13px 26px;
  border-radius:10px; cursor:pointer; border:1px solid transparent; transition:.18s; white-space:nowrap}
.btn--ink{background:var(--ink); color:var(--parchment)}
.btn--ink:hover{background:var(--ink-2); transform:translateY(-1px)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--brass); background:#fff}
.btn--brass{background:linear-gradient(180deg,var(--brass-soft),var(--brass)); color:#241a06;
  box-shadow:0 10px 22px -12px rgba(176,141,76,.9)}
.btn--brass:hover{transform:translateY(-1px); filter:brightness(1.03)}

/* =====================================================================
   HEADER
   ===================================================================== */
.site-header{position:sticky; top:0; z-index:100; transition:.28s;
  background:rgba(246,241,231,.82); backdrop-filter:blur(10px); border-bottom:1px solid transparent}
.site-header.is-stuck{border-bottom-color:var(--line); box-shadow:0 8px 30px -22px var(--shadow)}
.header__inner{display:flex; align-items:center; gap:26px; height:78px; transition:height .28s}
.site-header.is-stuck .header__inner{height:62px}

.brand-word{font-family:var(--f-display); font-weight:600; font-size:23px; letter-spacing:.01em; line-height:1}
.brand-word b{color:var(--brass-deep); font-weight:600}
.brand-word span{display:inline-block; margin-left:8px; font-family:var(--f-sans); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-soft); vertical-align:middle}
.brand-word--light{color:var(--parchment)}
.brand-word--light b{color:var(--brass-soft)}
.custom-logo{max-height:44px; width:auto}

.header__nav{margin-left:auto}
.nav-list{display:flex; gap:26px; list-style:none; margin:0; padding:0}
.nav-list a{font-size:14.5px; font-weight:500; color:var(--ink); position:relative; padding:6px 0}
.nav-list a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px;
  background:var(--brass); transition:right .28s}
.nav-list a:hover::after{right:0}
.nav-list .sub-menu{display:none}

.header__actions{display:flex; align-items:center; gap:14px}
.btn--plus{background:var(--ink); color:var(--parchment); padding:9px 18px; border-radius:9px;
  font-family:var(--f-display); font-weight:600; font-size:15px}
.btn--plus span{color:var(--brass-soft)}
.btn--plus:hover{background:var(--cloth)}

.nav-toggle{display:none; width:40px; height:40px; background:none; border:1px solid var(--line);
  border-radius:9px; cursor:pointer; flex-direction:column; gap:4px; align-items:center; justify-content:center}
.nav-toggle:focus-visible,.icon-btn:focus-visible,.btn:focus-visible,.nav-list a:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.nav-toggle span{width:18px; height:1.6px; background:var(--ink); transition:.25s}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{position:relative; overflow:hidden; padding:clamp(48px,8vw,110px) 0 clamp(60px,9vw,120px);
  background:radial-gradient(120% 90% at 18% 0%, #FBF7EF 0%, var(--parchment) 52%, var(--parchment-2) 100%)}
.hero__grain{position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:radial-gradient(rgba(20,19,31,.045) 1px, transparent 1px); background-size:4px 4px}
.hero__inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; align-items:center; gap:var(--gap)}
.hero__eyebrow{opacity:0; animation:rise .7s .05s forwards}
.hero__title{font-family:var(--f-display); font-weight:600; letter-spacing:-.015em;
  font-size:clamp(42px,7vw,86px); line-height:1.04; margin:0 0 26px; color:var(--ink);
  overflow:visible}
.hero__title .line{display:block; overflow:visible; line-height:1.04; padding-bottom:.04em}
.hero__title .line > *,.hero__title em{display:inline-block}
.hero__title em{color:var(--brass-deep)}
.hero__title .line{opacity:0; transform:translateY(30px); animation:reveal .75s cubic-bezier(.2,.7,.2,1) forwards}
.hero__title .line:nth-child(1){animation-delay:.12s}
.hero__title .line:nth-child(2){animation-delay:.24s}
.hero__title .line:nth-child(3){animation-delay:.36s}
.hero__sub{max-width:52ch; font-family:var(--f-read); font-size:19px; color:var(--ink-soft);
  margin:0 0 32px; opacity:0; animation:rise .8s .5s forwards}
.hero__cta{display:flex; gap:14px; flex-wrap:wrap; opacity:0; animation:rise .8s .62s forwards}

/* 3.1.1 — prevent hero headline clipping while preserving motion */
.hero__title .line,.hero__title em{clip-path:none!important; -webkit-clip-path:none!important}
.hero__sub{overflow:visible; text-wrap:pretty}
@media(max-width:720px){
  .hero__title{font-size:clamp(42px,14vw,66px); line-height:1.03}
  .hero__title .line{line-height:1.03}
  .hero__sub{max-width:36ch; font-size:18px}
}

.hero__stage{position:relative; display:grid; place-items:center; min-height:380px}
.hero__book{position:relative; width:min(300px,60%); aspect-ratio:2/3; border-radius:3px;
  box-shadow:0 40px 80px -30px var(--shadow), 0 8px 20px -10px var(--shadow);
  transform:rotate(-4deg); opacity:0; animation:floatIn 1.1s .5s forwards; overflow:visible}
.hero__book img{width:100%; height:100%; object-fit:cover; border-radius:3px}
.hero__book-edge{position:absolute; top:6px; bottom:6px; right:-4px; width:5px; border-radius:2px;
  background:linear-gradient(var(--brass-soft),var(--brass),var(--brass-deep))}
.hero__book--placeholder{background:linear-gradient(160deg,var(--cloth),var(--cloth-2));
  display:grid; place-items:center; color:var(--brass-soft)}
.hero__book--placeholder .ph-title{font-family:var(--f-display); font-weight:600; font-size:30px;
  text-align:center; line-height:1.1; letter-spacing:.02em}
.hero__glow{position:absolute; width:340px; height:340px; border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(176,141,76,.28), transparent 65%); filter:blur(20px)}
.hero__scroll{position:absolute; left:50%; bottom:22px; transform:translateX(-50%);
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft);
  display:flex; flex-direction:column; align-items:center; gap:8px; opacity:0; animation:rise 1s 1s forwards}
.hero__scroll span{width:1px; height:26px; background:var(--brass); animation:scrollLine 1.8s infinite}

/* =====================================================================
   MARQUEE
   ===================================================================== */
.marquee{background:var(--ink); color:var(--parchment); overflow:hidden; padding:16px 0; border-block:1px solid var(--brass-deep)}
.marquee__track{display:inline-flex; align-items:center; gap:22px; white-space:nowrap;
  animation:scrollX 32s linear infinite; will-change:transform}
.marquee span{font-family:var(--f-display); font-size:20px; letter-spacing:.02em}
.marquee i{color:var(--brass); font-size:10px; font-style:normal}

/* =====================================================================
   SECTIONS / HEADINGS
   ===================================================================== */
.section{content-visibility:auto; contain-intrinsic-size:1px 700px;padding:clamp(56px,8vw,104px) 0}
.section__head{display:flex; align-items:flex-end; gap:20px; margin-bottom:44px; flex-wrap:wrap}
.section__head .eyebrow{margin:0}
.section__title{font-family:var(--f-display); font-weight:600; letter-spacing:-.01em;
  font-size:clamp(30px,4.4vw,52px); line-height:1.02; margin:0; flex:1 1 auto}
.section__head .eyebrow + .section__title{flex-basis:100%}
.section__link{font-family:var(--f-sans); font-weight:600; font-size:14px; color:var(--brass-deep);
  border-bottom:1.5px solid transparent; padding-bottom:2px; transition:.2s}
.section__link:hover{border-color:var(--brass)}

/* -------- book grid -------- */
.book-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,44px)}
.book-card{text-align:left}
.book-card__cover{display:block; aspect-ratio:2/3; border-radius:3px; overflow:hidden; position:relative;
  background:linear-gradient(160deg,var(--cloth),var(--cloth-2));
  box-shadow:0 24px 50px -30px var(--shadow); transition:transform .4s, box-shadow .4s}
.book-card__badge{position:absolute; top:12px; left:12px; z-index:2; font-family:var(--f-sans);
  font-weight:600; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#241a06;
  background:linear-gradient(180deg,var(--brass-soft),var(--brass)); padding:5px 11px; border-radius:20px;
  box-shadow:0 8px 18px -8px rgba(176,141,76,.8)}
.book-card__cover img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.book-card:hover .book-card__cover{transform:translateY(-8px); box-shadow:0 40px 70px -34px var(--shadow)}
.book-card:hover .book-card__cover img{transform:scale(1.04)}
.book-card__ph{display:grid; place-items:center; height:100%; color:var(--brass-soft);
  font-family:var(--f-display); font-size:22px; text-align:center; padding:20px; line-height:1.2}
.book-card__title{font-family:var(--f-read); font-weight:600; font-size:19px; line-height:1.25; margin:18px 0 4px}
.book-card__author{font-size:14px; color:var(--ink-soft); margin:0}

/* =====================================================================
   FLAGSHIP (cloth-bound band)
   ===================================================================== */
.flagship{background:linear-gradient(150deg,var(--cloth),var(--cloth-2)); color:var(--parchment);
  padding:clamp(56px,8vw,110px) 0; position:relative; overflow:hidden}
.flagship::after{content:""; position:absolute; inset:0; opacity:.35; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:5px 5px}
.flagship__inner{position:relative; display:grid; grid-template-columns:.6fr 1fr; gap:var(--gap); align-items:center}
.flagship__cover{aspect-ratio:2/3; max-width:300px; border-radius:3px; overflow:hidden; justify-self:center;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.flagship__cover img{width:100%; height:100%; object-fit:cover}
.flagship__title{font-family:var(--f-display); font-weight:600; font-size:clamp(28px,4vw,46px);
  line-height:1.05; margin:6px 0 18px}
.flagship__excerpt{font-family:var(--f-read); font-size:19px; color:rgba(246,241,231,.82); max-width:52ch; margin:0 0 28px}
.eyebrow--brass{color:var(--brass-soft)}

/* -------- stories -------- */
.story-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px)}
.story-card__media{display:block; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden;
  background:var(--parchment-2); box-shadow:0 20px 44px -30px var(--shadow)}
.story-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.story-card:hover .story-card__media img{transform:scale(1.05)}
.story-card__ph{display:block}
.story-card__date{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:16px 0 6px}
.story-card__title{font-family:var(--f-read); font-weight:600; font-size:22px; line-height:1.22; margin:0 0 8px}
.story-card__excerpt{font-size:15px; color:var(--ink-soft); margin:0}

/* =====================================================================
   ARTHVED+ TEASER
   ===================================================================== */
.plus{position:relative; background:radial-gradient(120% 120% at 80% 0%, var(--ink-2), var(--ink));
  color:var(--parchment); padding:clamp(64px,9vw,120px) 0; overflow:hidden; text-align:center}
.plus__grain{position:absolute; inset:0; opacity:.4; pointer-events:none;
  background-image:radial-gradient(rgba(216,192,138,.08) 1px, transparent 1px); background-size:6px 6px}
.plus__inner{position:relative; max-width:640px; margin-inline:auto}
.plus__title{font-family:var(--f-display); font-weight:600; font-size:clamp(32px,5vw,58px);
  line-height:1.02; margin:8px 0 18px}
.plus__sub{font-family:var(--f-read); font-size:19px; color:rgba(246,241,231,.78); margin:0 0 30px}

/* =====================================================================
   NEWSLETTER
   ===================================================================== */
.newsletter{padding:clamp(56px,8vw,96px) 0; text-align:center; background:var(--parchment)}
.newsletter__inner{max-width:600px; margin-inline:auto}
.newsletter__title{font-family:var(--f-display); font-weight:600; font-size:clamp(28px,4vw,46px); line-height:1.05; margin:0 0 12px}
.newsletter__sub{font-family:var(--f-read); font-size:18px; color:var(--ink-soft); margin:0 0 26px}
.newsletter__form{display:flex; gap:10px; max-width:460px; margin:0 auto}
.newsletter__form input{flex:1; padding:14px 18px; border:1px solid var(--line); border-radius:10px;
  font-family:var(--f-sans); font-size:15px; background:#fff}
.newsletter__form input:focus{outline:2px solid var(--brass); outline-offset:1px}
.newsletter__fine{font-size:12px; color:var(--ink-soft); margin:14px 0 0}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--ink); color:var(--parchment); padding:clamp(52px,7vw,84px) 0 34px}
.footer__grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--gap)}
.footer__tag{font-family:var(--f-read); color:rgba(246,241,231,.62); max-width:40ch; margin:16px 0 20px; font-size:16px}
.footer__social{display:flex; gap:18px; flex-wrap:wrap}
.footer__social a{font-size:13px; color:rgba(246,241,231,.72); border-bottom:1px solid transparent; padding-bottom:2px}
.footer__social a:hover{color:var(--brass-soft); border-color:var(--brass)}
.footer__col h4{font-family:var(--f-sans); font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-soft); margin:0 0 16px}
.footer__col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.footer__col a{color:rgba(246,241,231,.78); font-size:15px}
.footer__col a:hover{color:var(--parchment)}
.footer__base{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin-top:44px; padding-top:22px; border-top:1px solid rgba(246,241,231,.14);
  font-size:13px; color:rgba(246,241,231,.55)}

/* =====================================================================
   SINGLE PAGE / POST
   ===================================================================== */
.single-page{padding:clamp(40px,6vw,72px) 0}
.single-page__head{margin-bottom:30px}
.single-page__title{font-family:var(--f-display); font-weight:600; font-size:clamp(32px,5vw,58px);
  line-height:1.03; margin:8px 0; max-width:20ch}
.single-page__media{margin:0 auto 34px; border-radius:var(--radius); overflow:hidden}
.single-page__body{max-width:72ch; margin-inline:auto; font-family:var(--f-read); font-size:19px; line-height:1.75}
.entry-content h2{font-family:var(--f-display); font-weight:600; font-size:28px; margin:1.6em 0 .5em}
.entry-content h3{font-family:var(--f-display); font-weight:600; font-size:22px; margin:1.4em 0 .4em}
.entry-content a{color:var(--brass-deep); border-bottom:1px solid var(--line)}
.entry-content img{border-radius:var(--radius); margin:1.2em 0}
.entry-content blockquote{border-left:3px solid var(--brass); margin:1.4em 0; padding:.2em 0 .2em 24px;
  font-style:italic; color:var(--ink-soft)}

.post-list{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,40px)}
.post-item__media{display:block; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; background:var(--parchment-2)}
.post-item__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.post-item:hover .post-item__media img{transform:scale(1.05)}
.post-item__date{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); margin:16px 0 6px}
.post-item__title{font-family:var(--f-read); font-weight:600; font-size:22px; line-height:1.22; margin:0 0 8px}
.post-item__excerpt{font-size:15px; color:var(--ink-soft); margin:0}
.pagination{margin-top:48px}
.pagination .page-numbers{display:inline-block; padding:8px 14px; margin:0 3px; border:1px solid var(--line);
  border-radius:8px; font-size:14px}
.pagination .current{background:var(--ink); color:var(--parchment); border-color:var(--ink)}

/* =====================================================================
   BOOK SINGLE + READER
   ===================================================================== */
.book-hero{padding:clamp(44px,6vw,84px) 0 clamp(30px,4vw,50px);
  background:radial-gradient(120% 90% at 15% 0%, #FBF7EF, var(--parchment) 60%, var(--parchment-2))}
.book-hero__inner{display:grid; grid-template-columns:.5fr 1fr; gap:var(--gap); align-items:start}
.book-hero__cover{aspect-ratio:2/3; max-width:320px; border-radius:3px; overflow:hidden; justify-self:center;
  box-shadow:0 40px 80px -30px var(--shadow)}
.book-hero__cover img{width:100%;height:100%;object-fit:cover}
.book-hero__title{font-family:var(--f-display); font-weight:600; font-size:clamp(30px,4.4vw,52px);
  line-height:1.04; margin:6px 0 8px}
.book-hero__author{font-family:var(--f-read); font-size:18px; color:var(--ink-soft); margin:0 0 22px}
.book-hero__subtitle{font-family:var(--f-read); font-style:italic; font-size:19px; color:var(--ink-soft); margin:-2px 0 10px}
.book-hero__meta-row{display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 22px}
.book-hero__tag{font-family:var(--f-sans); font-size:12px; font-weight:600; letter-spacing:.04em;
  color:var(--brass-deep); background:rgba(176,141,76,.12); padding:5px 12px; border-radius:20px}
.book-hero__isbn{font-family:var(--f-sans); font-size:12px; color:var(--ink-soft); align-self:center}
.book-hero__desc{font-family:var(--f-read); font-size:18px; line-height:1.7; max-width:60ch; margin-bottom:28px}
.book-hero__cta{display:flex; gap:12px; flex-wrap:wrap}

.reader-section{padding:0 0 clamp(56px,8vw,96px)}
.reader-frame{border:1px solid var(--line); border-radius:14px; overflow:hidden; background:var(--paper);
  box-shadow:0 30px 70px -40px var(--shadow); max-width:960px; margin-inline:auto}
.rbar{display:flex; align-items:center; gap:16px; padding:0 20px; height:58px;
  border-bottom:1px solid var(--line); background:rgba(246,241,231,.6)}
.rbar__brand{font-family:var(--f-display); font-weight:600; font-size:17px}
.rbar__brand b{color:var(--brass-deep)}
.rbar__brand span{font-family:var(--f-sans); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft)}
.rbar__tools{display:flex; gap:8px}
.rbtn{min-width:38px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:9px;
  background:transparent; cursor:pointer; font-family:var(--f-read); font-size:14px; transition:.16s}
.rbtn:hover{background:#fff; border-color:var(--brass)}
.rbar__book{margin-left:auto; font-family:var(--f-read); font-weight:600; font-size:14px;
  max-width:40%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.rstage{position:relative; height:min(72vh,640px)}
.rpaper{position:absolute; inset:14px 56px; background:var(--paper); border:1px solid var(--parchment-2);
  border-radius:4px; box-shadow:0 14px 40px -26px var(--shadow)}
.rviewer{position:absolute; inset:16px 26px}
.rflip{position:absolute; top:0; bottom:0; width:56px; border:0; background:transparent; cursor:pointer;
  font-family:var(--f-read); font-size:26px; color:var(--ink-soft); opacity:.5; transition:.18s; z-index:3}
.rflip:hover{opacity:1; color:var(--brass-deep)}
.rflip:disabled{opacity:.12; cursor:default}
.rflip--prev{left:0} .rflip--next{right:0}

.roverlay{position:absolute; inset:0; display:grid; place-items:center; z-index:4; background:var(--paper)}
.rload{font-family:var(--f-read); color:var(--ink-soft); letter-spacing:.05em}

.rgate{position:absolute; inset:0; z-index:10; display:none; place-items:center;
  background:radial-gradient(120% 100% at 50% 0%, rgba(20,19,31,.5), rgba(20,19,31,.8)); opacity:0; transition:opacity .45s}
.rgate.show{display:grid; opacity:1}
.rgate__plate{width:min(460px,88%); background:linear-gradient(180deg,var(--paper),var(--parchment));
  border:1px solid var(--brass); border-radius:16px; padding:34px 32px 28px; text-align:center;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.6); transform:translateY(16px); transition:.45s}
.rgate.show .rgate__plate{transform:none}
.rgate__rule{display:block; width:44px; height:2px; margin:0 auto 16px; background:linear-gradient(90deg,transparent,var(--brass),transparent)}
.rgate__cover{width:88px; border-radius:3px; margin:6px auto 16px; box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
.rgate__title{font-family:var(--f-display); font-weight:600; font-size:24px; margin:0 0 12px; line-height:1.12}
.rgate__text{font-family:var(--f-read); color:var(--ink-soft); font-size:15px; line-height:1.6; max-width:34ch; margin:0 auto 22px}
.rgate__actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.rgate__back{display:block; margin:16px auto 0; background:none; border:0; cursor:pointer;
  color:var(--ink-soft); font-size:13px; text-decoration:underline; font-family:var(--f-sans)}

.rfoot{display:flex; flex-direction:column; gap:8px; justify-content:center; padding:12px 24px;
  border-top:1px solid var(--line); background:rgba(246,241,231,.6)}
.rfoot__meta{display:flex; justify-content:space-between; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-soft)}
.rfoot__meta [data-r=mleft]{color:var(--brass-deep); font-weight:600}
.rtrack{position:relative; height:3px; background:var(--line); border-radius:2px}
.rfill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:2px;
  background:linear-gradient(90deg,var(--brass),var(--brass-deep)); transition:width .4s}
.rlimit{position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--ink); opacity:.35}

/* reading modes toggled by JS on the frame */
.reader-frame.sepia .rpaper{background:#F3E7CE}
.reader-frame.night{background:#15141d}
.reader-frame.night .rbar,.reader-frame.night .rfoot{background:rgba(18,17,25,.7)}
.reader-frame.night .rpaper{background:#1b1a25; border-color:#2a2836}
.reader-frame.night .rbar__brand,.reader-frame.night .rbar__book,.reader-frame.night .rbtn{color:#e7e3d8}
.reader-frame.night .roverlay{background:#15141d}

/* =====================================================================
   REVEAL / MOTION
   ===================================================================== */
.reveal{opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1; transform:none}

@keyframes reveal{to{opacity:1; transform:none}}
@keyframes rise{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
@keyframes floatIn{from{opacity:0; transform:rotate(-4deg) translateY(40px) scale(.96)} to{opacity:1; transform:rotate(-4deg) translateY(0) scale(1)}}
@keyframes scrollX{from{transform:translateX(0)} to{transform:translateX(-50%)}}
@keyframes scrollLine{0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom}}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  .book-grid,.story-grid,.post-list,.video-grid,.picks-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
  .hero__inner{grid-template-columns:1fr; gap:36px}
  .hero__stage{order:-1; min-height:300px}
  .flagship__inner,.book-hero__inner{grid-template-columns:1fr; text-align:center}
  .flagship__excerpt,.book-hero__desc,.hero__sub{margin-inline:auto}
  .book-hero__cta,.hero__cta,.book-hero__meta-row{justify-content:center}
}
@media(max-width:720px){
  .header__nav{position:fixed; top:var(--arthved-header-height); left:0; right:0; background:var(--parchment); border-bottom:1px solid var(--line);
    transform:translateY(-140%); transition:transform .32s; margin:0; padding:20px 0}
  .header__nav.open{transform:none}
  .nav-list{flex-direction:column; gap:0; width:min(var(--wrap),92vw); margin-inline:auto}
  .nav-list li{border-bottom:1px solid var(--line)}
  .nav-list a{display:block; padding:14px 0}
  .nav-toggle{display:flex}
  .book-grid,.story-grid,.post-list,.video-grid,.picks-grid{grid-template-columns:1fr 1fr; gap:20px}
  .footer__grid{grid-template-columns:1fr}
  .newsletter__form{flex-direction:column}
  .rpaper{inset:10px 44px}
  .rflip{width:44px}
}
@media(max-width:460px){
  .book-grid{grid-template-columns:1fr 1fr}
  .story-grid,.post-list{grid-template-columns:1fr}
}

/* =====================================================================
   AUTHOR PROFILES
   ===================================================================== */
.author-hero{padding:clamp(48px,7vw,88px) 0;
  background:radial-gradient(120% 90% at 15% 0%, #FBF7EF, var(--parchment) 60%, var(--parchment-2))}
.author-hero__inner{display:grid; grid-template-columns:220px 1fr; gap:var(--gap); align-items:start}
.author-hero__photo{width:220px; height:220px; border-radius:50%; overflow:hidden;
  background:linear-gradient(160deg,var(--cloth),var(--cloth-2)); box-shadow:0 30px 60px -30px var(--shadow);
  display:grid; place-items:center}
.author-hero__photo img{width:100%; height:100%; object-fit:cover}
.author-hero__ph{font-family:var(--f-display); font-weight:600; font-size:64px; color:var(--brass-soft)}
.author-hero__name{font-family:var(--f-display); font-weight:600; font-size:clamp(28px,4vw,44px); margin:4px 0 6px}
.author-hero__role{font-family:var(--f-sans); font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass-deep); margin:0 0 18px}
.author-hero__bio{font-family:var(--f-read); font-size:18px; line-height:1.7; max-width:64ch; margin-bottom:20px}
.author-hero__social{display:flex; gap:16px; flex-wrap:wrap}
.author-hero__social a{font-size:14px; font-weight:600; color:var(--brass-deep); border-bottom:1.5px solid transparent; padding-bottom:2px}
.author-hero__social a:hover{border-color:var(--brass)}

.author-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,3vw,32px)}
.author-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px}
.author-card__photo{width:120px; height:120px; border-radius:50%; overflow:hidden; margin-bottom:10px;
  background:linear-gradient(160deg,var(--cloth),var(--cloth-2)); box-shadow:0 20px 40px -24px var(--shadow);
  display:grid; place-items:center; transition:transform .3s}
.author-card:hover .author-card__photo{transform:translateY(-4px)}
.author-card__photo img{width:100%; height:100%; object-fit:cover}
.author-card__ph{font-family:var(--f-display); font-weight:600; font-size:32px; color:var(--brass-soft)}
.author-card__name{font-family:var(--f-read); font-weight:600; font-size:17px}
.author-card__role{font-size:13px; color:var(--ink-soft)}

/* =====================================================================
   FORMS (contact + newsletter)
   ===================================================================== */
.av-form-wrap{max-width:560px}
.av-form__row{margin-bottom:16px}
.av-form__row label{display:block; font-weight:600; font-size:14px; margin-bottom:6px}
.av-form__row input,.av-form__row textarea{width:100%; padding:.85em 1em; border:1px solid var(--line);
  border-radius:9px; font-family:var(--f-sans); font-size:15px; background:#fff}
.av-form__row input:focus,.av-form__row textarea:focus{outline:2px solid var(--brass); outline-offset:1px}
.av-form-notice{padding:1em 1.3em; border-radius:10px; margin-bottom:20px; font-size:14.5px}
.av-form-notice--ok{background:#EAF3EA; color:#2E5C34}
.av-form-notice--err{background:#F6E7E5; color:#8C3A2E}

.newsletter--inline{max-width:600px; margin:0 auto; text-align:center; padding:8px 0}
.newsletter--inline .newsletter__title{font-family:var(--f-display); font-weight:600;
  font-size:clamp(26px,3.6vw,38px); margin:0 0 18px}

/* =====================================================================
   RESPONSIVE — authors
   ===================================================================== */
@media(max-width:860px){
  .author-hero__inner{grid-template-columns:1fr; text-align:center}
  .author-hero__photo{margin-inline:auto}
  .author-hero__bio{margin-inline:auto}
  .author-hero__social{justify-content:center}
  .author-grid{grid-template-columns:repeat(2,1fr)}
}

/* =====================================================================
   VIDEOS
   ===================================================================== */
.video-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(22px,3vw,36px)}
.video-card{display:flex; flex-direction:column; gap:10px}
.video-card__media{position:relative; display:block; aspect-ratio:16/9; border-radius:var(--radius);
  overflow:hidden; background:linear-gradient(160deg,var(--cloth),var(--cloth-2)); box-shadow:0 20px 44px -30px var(--shadow)}
.video-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.video-card:hover .video-card__media img{transform:scale(1.05)}
.video-card__play{position:absolute; inset:0; display:grid; place-items:center; font-size:15px; color:#fff;
  background:rgba(20,19,31,.15); transition:.2s}
.video-card__play::before{content:""; position:absolute; inset:0; margin:auto; width:52px; height:52px;
  border-radius:50%; background:rgba(20,19,31,.55); backdrop-filter:blur(2px)}
.video-card__play{padding-left:3px} /* optical centering of ▶ glyph */
.video-card:hover .video-card__play{background:rgba(20,19,31,.05)}
.video-card:hover .video-card__play::before{background:var(--brass)}
.video-card__date{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft)}
.video-card__title{font-family:var(--f-read); font-weight:600; font-size:18px; line-height:1.28; color:var(--ink)}

.video-embed{position:relative; width:100%; aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:var(--ink); box-shadow:0 30px 70px -40px var(--shadow)}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-embed--fallback img{width:100%; height:100%; object-fit:cover}

/* =====================================================================
   SEARCH + BREADCRUMBS
   ===================================================================== */
.icon-btn{width:38px; height:38px; border:1px solid var(--line); border-radius:9px; background:transparent;
  cursor:pointer; font-size:17px; color:var(--ink); display:grid; place-items:center; transition:.16s}
.icon-btn:hover{background:#fff; border-color:var(--brass)}
.header__search{border-top:1px solid var(--line); background:rgba(246,241,231,.96); padding:14px 0}
.header__search[hidden]{display:none}
.search-form{display:flex; gap:10px; max-width:520px}
.search-form__field{flex:1; padding:12px 16px; border:1px solid var(--line); border-radius:9px; font-family:var(--f-sans); font-size:15px}
.search-form__field:focus{outline:2px solid var(--brass); outline-offset:1px}
.search-form__submit{padding:12px 20px; border:0; border-radius:9px; background:var(--ink); color:var(--parchment); font-weight:600; cursor:pointer}

.breadcrumbs{margin-bottom:18px}
.breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; font-size:13px; color:var(--ink-soft)}
.breadcrumbs li:not(:last-child)::after{content:"/"; margin-left:6px; color:var(--line)}
.breadcrumbs a{color:var(--ink-soft); border-bottom:1px solid transparent}
.breadcrumbs a:hover{color:var(--brass-deep); border-color:var(--brass)}
.breadcrumbs [aria-current="page"]{color:var(--ink); font-weight:600}

/* =====================================================================
   PWA INSTALL BUTTON
   ===================================================================== */
.install-fab{position:fixed; right:20px; bottom:20px; z-index:200; display:flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--parchment); border:1px solid var(--brass-deep); padding:13px 18px;
  border-radius:999px; font-family:var(--f-sans); font-weight:600; font-size:14px; cursor:pointer;
  box-shadow:0 20px 44px -20px rgba(0,0,0,.5); animation:installIn .5s ease}
.install-fab span{color:var(--brass-soft)}
.install-fab:hover{background:var(--ink-2)}
.install-fab__close{background:rgba(246,241,231,.15); border:0; color:var(--parchment); width:20px; height:20px;
  border-radius:50%; font-size:14px; line-height:1; cursor:pointer; margin-left:2px}
@keyframes installIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@media(max-width:600px){.install-fab{left:16px; right:16px; justify-content:center}}

/* =====================================================================
   EDITOR'S PICKS
   ===================================================================== */
.picks-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.6vw,28px)}
.pick-card{display:flex; flex-direction:column; gap:10px}
.pick-card__media{position:relative; display:block; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(160deg,var(--cloth),var(--cloth-2)); box-shadow:0 18px 40px -28px var(--shadow); aspect-ratio:4/3}
.pick-card--book .pick-card__media{aspect-ratio:2/3}
.pick-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .45s}
.pick-card:hover .pick-card__media img{transform:scale(1.05)}
.pick-card__badge{position:absolute; top:10px; left:10px; font-family:var(--f-sans); font-weight:600;
  font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#241a06;
  background:linear-gradient(180deg,var(--brass-soft),var(--brass)); padding:4px 9px; border-radius:20px}
.pick-card__title{font-family:var(--f-read); font-weight:600; font-size:16px; line-height:1.28; color:var(--ink)}

/* =====================================================================
   ACCESSIBILITY
   ===================================================================== */
:focus-visible{outline:2px solid var(--brass); outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none}
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important}
  .marquee__track{animation:none}
  .hero__title .line{opacity:1; transform:none}
  .install-fab{animation:none}
}

/* =====================================================================
   2.4.0 — WORLD-CLASS EDITORIAL LAYER
   ===================================================================== */
.editorial-lead{padding:clamp(36px,6vw,76px) 0;background:var(--paper);border-block:1px solid var(--line)}
.editorial-lead__grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:clamp(28px,5vw,72px);align-items:center}
.editorial-lead__media{aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius);background:var(--parchment-2)}
.editorial-lead__media a{display:block;width:100%;height:100%}
.editorial-lead__media img{display:block;width:100%;height:100%;object-fit:cover}
.editorial-lead__body h2{font-family:var(--f-display);font-size:clamp(2rem,4vw,4rem);line-height:1.03;letter-spacing:-.025em;margin:.35rem 0 1rem}
.editorial-lead__body h2 a{text-decoration:none}
.editorial-lead__meta{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 1.1rem}
.editorial-lead__excerpt{font-family:var(--f-read);font-size:1.15rem;line-height:1.65;color:var(--ink-soft);max-width:48ch;margin:0 0 1.5rem}
.single-page__crumbs{padding-top:24px}
.single-editorial__head{margin-bottom:34px}
.single-editorial__category{display:inline-block;color:var(--brass-deep);font-size:.76rem;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;font-weight:700;text-decoration:none}
.single-editorial__dek{font-family:var(--f-read);font-size:clamp(1.05rem,1.8vw,1.3rem);line-height:1.6;color:var(--ink-soft);max-width:65ch;margin:1rem 0 0}
.single-editorial__byline{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:1.15rem;font-size:.78rem;color:var(--ink-soft)}
.single-editorial__hero-media{max-width:1100px}
.single-editorial__body{font-size:20px;line-height:1.82}
.single-editorial__body p{max-width:72ch}
.single-editorial__body blockquote{margin:2rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--brass);background:rgba(176,141,76,.07);font-family:var(--f-read);font-size:1.15em}
.single-editorial__after{max-width:1000px;margin-inline:auto}
.editorial-author{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;margin:clamp(44px,7vw,80px) 0;padding:28px 0;border-block:1px solid var(--line)}
.editorial-author__avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--cloth);color:var(--brass-soft);font-family:var(--f-display);font-size:25px}
.editorial-author h2{font-family:var(--f-display);font-size:28px;margin:.1rem 0 .35rem}
.editorial-author p:not(.eyebrow){color:var(--ink-soft);max-width:60ch;line-height:1.6;margin:.3rem 0 .7rem}
.editorial-author a{font-weight:700;text-decoration:none}
.editorial-related{padding:clamp(30px,5vw,64px) 0 clamp(50px,8vw,90px)}
.editorial-related__grid{margin-top:10px}
.single-editorial__source{max-width:72ch;margin:28px auto 0;padding:16px 0;border-top:1px solid var(--line);font-size:.85rem;color:var(--ink-soft)}
.single-editorial__source a{color:inherit}
@media (max-width:800px){
  .editorial-lead__grid{grid-template-columns:1fr}
  .editorial-lead__body h2{font-size:2.4rem}
  .single-editorial__body{font-size:18px;line-height:1.75}
}
@media (max-width:600px){
  .single-page__crumbs{padding-top:16px}
  .single-editorial__byline{font-size:.72rem}
  .editorial-author{grid-template-columns:1fr}
  .editorial-author__avatar{width:48px;height:48px;font-size:21px}
}

/* 2.5.0 — Book product layer refinements */
.book-single .book-hero__desc{max-width:68ch}
.reader-frame [data-r]{touch-action:manipulation}
.reader-frame button:focus-visible,.book-single a:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.rgate__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
@media (max-width:700px){
 .book-hero__cover{max-width:250px}
 .rbar{gap:8px;padding:10px 12px}
 .rbar__book{display:none}
 .rpaper{min-height:58vh}
 .rflip{width:42px;height:42px}
 .rfoot{padding:10px 12px}
}