/* stop-playing.com — "Night becomes day" (concept A, chosen 10 Oct 2026)
   One continuous sky: pages open in the cover's night and end in daylight. */

@font-face{font-family:"Literata";font-style:normal;font-weight:200 900;font-display:swap;src:url("/assets/fonts/literata.woff2") format("woff2")}
@font-face{font-family:"Literata";font-style:italic;font-weight:200 900;font-display:swap;src:url("/assets/fonts/literata-italic.woff2") format("woff2")}

:root{
  --night:#08172B;      /* cover sky, top */
  --dusk:#1E3049;       /* cover sky, lower */
  --ember:#D9782F;      /* horizon */
  --gold:#EDB665;       /* title gold on the cover */
  --sun:#FFD27A;        /* the sun itself */
  --day:#EEF3F6;        /* clear morning sky */
  --ink:#13233A;        /* text on daylight */
  --moon:#F4EEE4;       /* text on night */
  --mist:#A9B6C6;       /* secondary text on night */
  --slate:#4A5A6E;      /* secondary text on day */
  --amber-text:#9A4E17; /* amber that passes contrast on day */
  --serif:"Literata","Iowan Old Style","Palatino Linotype",Georgia,serif;
  color-scheme:dark light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--night);color:var(--moon);font-family:var(--serif);font-size:1.0625rem;line-height:1.65;font-optical-sizing:auto;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:2px}
.daylight :focus-visible{outline-color:var(--ink)}
.wrap{width:min(1120px,100%);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:#1A1406;padding:.6rem 1rem;z-index:10}
.skip:focus{left:8px;top:8px}

/* ---------- night ---------- */
.masthead{background:var(--night)}
.night{background:linear-gradient(180deg,var(--night) 0%,#0C1E37 55%,var(--dusk) 100%)}
.help{font-size:1rem;padding-block:.55rem;color:var(--mist);border-bottom:1px solid rgba(244,238,228,.08)}
.help .wrap{display:flex;gap:.3rem 1rem;flex-wrap:wrap;justify-content:space-between}
.help a{color:var(--moon);text-underline-offset:3px}

.top{padding-block:1.1rem}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{text-decoration:none;font-weight:600;letter-spacing:.01em;font-size:1.2rem;line-height:1.3}
.brand small{display:block;font-weight:400;font-size:.9rem;color:var(--mist);letter-spacing:.02em}
.nav{display:flex;gap:1.7rem;font-size:1.12rem;white-space:nowrap}
.nav a{text-decoration:none;color:var(--mist)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--moon)}
@media (max-width:560px){.nav .opt{display:none}.nav{font-size:1.05rem}.help{font-size:.95rem}
  .top .wrap{flex-wrap:wrap;row-gap:.55rem}.brand{white-space:nowrap}.nav{width:100%;gap:1.5rem}}
@media (max-width:400px){.nav{gap:1rem;font-size:.98rem}.brand{font-size:1.04rem}.brand small{font-size:.82rem}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-weight:600;font-size:1.05rem;text-decoration:none;padding:.95rem 1.5rem;border-radius:999px;border:0;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn-sun{background:var(--sun);color:#1A1406}
.btn-sun:hover{transform:translateY(-1px);box-shadow:0 8px 30px -8px rgba(255,190,90,.65)}
.btn-ink{background:var(--ink);color:var(--day)}
.btn-ink:hover{transform:translateY(-1px);background:#0B1729}
.is-soon{opacity:.6;cursor:default}
.is-soon:hover{transform:none;background:var(--ink)}
.btn-line{border:1.5px solid currentColor;background:transparent;padding:.85rem 1.35rem}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* home hero */
.hero{position:relative;padding-block:clamp(2.5rem,7vw,6rem) clamp(3rem,8vw,7rem)}
#stars{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.hero h1{font-weight:500;font-size:clamp(2.3rem,5.1vw,3.9rem);line-height:1.04;letter-spacing:-.015em;margin:0 0 1.2rem;text-wrap:balance;font-variation-settings:"opsz" 72}
.hero h1 span{display:block}
.hero .sub{font-size:clamp(1.1rem,1.8vw,1.3rem);color:#D7DCE3;max-width:32ch;margin:0 0 2rem}
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem}
.price-note{font-size:.92rem;color:var(--mist);line-height:1.45}
.price-note b{color:var(--moon);font-weight:600}
/* the cover as a real book: slight turn, page block on the right, binding crease, floor shadow */
.cover{justify-self:center;width:min(380px,100%);perspective:1800px;position:relative;--pages:22px}
.book{position:relative;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(2deg);transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cover:hover .book{transform:rotateY(-4deg) rotateX(0deg) translateY(-10px) scale(1.04)}
.book img{position:relative;width:100%;display:block;aspect-ratio:2550/3300;border-radius:2px 6px 6px 2px;
  box-shadow:0 0 0 1px rgba(255,255,255,.05)}
.book::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:2px 6px 6px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.42) 0,rgba(255,255,255,.22) 1.3%,rgba(0,0,0,.28) 2.6%,rgba(0,0,0,0) 6%),
             linear-gradient(90deg,rgba(255,255,255,0) 80%,rgba(255,255,255,.07) 100%)}
.book::after{content:"";position:absolute;top:.6%;bottom:.6%;right:0;width:var(--pages);transform-origin:right center;transform:rotateY(-90deg);
  background:repeating-linear-gradient(90deg,#F3EEE3 0 1.5px,#D9D1C1 1.5px 2.5px);
  box-shadow:inset 0 0 6px rgba(0,0,0,.25)}
.cover::after{content:"";position:absolute;left:8%;right:-2%;bottom:-26px;height:34px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(0,0,0,.6) 0,rgba(0,0,0,0) 70%);filter:blur(6px);z-index:-1}
@media (prefers-reduced-motion:reduce){.book{transition:none}}
@media (max-width:820px){.hero .wrap{grid-template-columns:1fr}.cover{order:-1;width:min(260px,70vw);--pages:15px}.book{transform:rotateY(-18deg) rotateX(1deg)}}

/* statements */
.statements{padding-block:clamp(2rem,6vw,4.5rem)}
.statements .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.6rem)}
.st{min-width:0;padding:2.2rem 1.7rem 1.9rem;border-radius:14px;background:rgba(8,23,43,.55);border:1px solid rgba(237,182,101,.22)}
.st::before{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-bottom:1.4rem}
.st p{margin:0;font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.2;font-weight:500;text-wrap:balance;font-variation-settings:"opsz" 48}
.st p em{font-style:normal;color:var(--gold)}
.st small{display:block;margin-top:1.1rem;font-size:.9rem;color:var(--mist);line-height:1.5}
@media (max-width:820px){.statements .wrap{grid-template-columns:1fr}}

/* story */
.story{padding-block:clamp(3rem,7vw,5rem)}
.story .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,6vw,5rem)}
h2{font-weight:500;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.12;letter-spacing:-.01em;margin:0 0 1.2rem;text-wrap:balance;font-variation-settings:"opsz" 60}
.story p{margin:0 0 1rem;max-width:58ch;color:#E3E6EA}
.story .pull{font-style:italic;font-size:1.15rem;color:var(--moon);border-left:2px solid var(--gold);padding-left:1.1rem;margin-top:1.6rem}
@media (max-width:820px){.story .wrap{grid-template-columns:1fr}}

/* ---------- horizon ---------- */
.horizon{position:relative;height:clamp(200px,30vw,420px);background:url("/assets/img/horizon-1800.webp") center 38%/cover no-repeat}
@media (max-width:900px){.horizon{background-image:url("/assets/img/horizon-900.webp")}}
.horizon::before,.horizon::after{content:"";position:absolute;left:0;right:0;pointer-events:none}
.horizon::before{top:0;height:45%;background:linear-gradient(180deg,var(--dusk),rgba(30,48,73,0))}
.horizon::after{bottom:0;height:30%;background:linear-gradient(0deg,var(--day),rgba(238,243,246,0))}
.horizon p{position:absolute;inset:auto 0 34% 0;margin:0;text-align:center;font-style:italic;font-size:clamp(1.15rem,2.4vw,1.6rem);color:#FFF6E6;text-shadow:0 2px 18px rgba(60,25,5,.55);padding-inline:16px;z-index:1}
.horizon.thin{height:clamp(120px,16vw,220px)}

/* ---------- day ---------- */
.daylight{background:var(--day);color:var(--ink);color-scheme:light}
.inside{padding-block:clamp(3rem,7vw,5.5rem)}
.lead{max-width:56ch;margin:0 0 2.4rem;color:var(--slate)}
.parts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem;margin:0;padding:0;list-style:none}
.parts li{display:grid;grid-template-columns:2.2rem 1fr;align-content:start;gap:.2rem 1rem;padding-block:1.05rem;border-top:1px solid rgba(19,35,58,.18)}
.parts .k{font-weight:600;color:var(--amber-text);font-size:1.05rem;grid-row:span 2}
.parts h3{margin:0;font-size:1.1rem;font-weight:600}
.parts p{margin:0;font-size:.98rem;color:var(--slate)}
@media (max-width:720px){.parts{grid-template-columns:1fr}}

.route{margin-top:3rem;padding:2rem clamp(1.2rem,3vw,2.4rem);border-radius:16px;background:#FFFFFF;border:1px solid rgba(19,35,58,.08)}
.route h3{margin:0 0 .3rem;font-size:1.35rem;font-weight:600}
.route > p{margin:0 0 1.4rem;color:var(--slate);max-width:60ch}
.route ol{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:r}
.route li{counter-increment:r;min-width:0;font-size:.97rem;color:var(--slate)}
.route li::before{content:counter(r);display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:var(--ink);color:var(--day);font-weight:600;font-size:.9rem;margin-bottom:.6rem}
.route li b{display:block;color:var(--ink);font-weight:600;margin-bottom:.15rem}
@media (max-width:820px){.route ol{grid-template-columns:repeat(2,minmax(0,1fr))}}

.tools{padding-block:clamp(2.5rem,6vw,4rem)}
.tools ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 2.4rem}
.tools li{min-width:0}
.tools b{display:block;font-size:1.12rem;margin-bottom:.25rem}
.tools span{color:var(--slate);font-size:.98rem}
@media (max-width:820px){.tools ul{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tools ul{grid-template-columns:1fr}}

.final{padding-block:clamp(3rem,7vw,5.5rem)}
.final .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.offer{background:#FFFFFF;border-radius:20px;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:0 30px 60px -40px rgba(19,35,58,.5);display:grid;grid-template-columns:120px 1fr;gap:1.6rem;align-items:center}
.offer img{width:120px;border-radius:3px;box-shadow:0 12px 24px -12px rgba(0,0,0,.45)}
.offer h2{margin-bottom:.6rem}
.amount{font-size:2.6rem;font-weight:600;line-height:1;margin:.2rem 0 .8rem;font-variant-numeric:lining-nums}
.amount small{font-size:1rem;font-weight:400;color:var(--slate);margin-left:.4rem}
.offer ul{margin:1.2rem 0 0;padding-left:1.1rem;color:var(--slate);font-size:.95rem}
.thumbs{display:flex;gap:.6rem;margin-bottom:1.2rem}
.thumbs img{width:calc((100% - 1.2rem)/3);max-width:110px;border-radius:10px;box-shadow:0 14px 28px -16px rgba(19,35,58,.6)}
.freecards h3{font-size:1.3rem;margin:0 0 .5rem;font-weight:600}
.freecards p{margin:0 0 1rem;color:var(--slate)}
.link{font-size:.98rem;text-underline-offset:4px}
@media (max-width:820px){.final .wrap{grid-template-columns:1fr}}
@media (max-width:460px){.offer{grid-template-columns:1fr}.offer img{width:110px}}

.faq{padding-block:0 clamp(3rem,7vw,5rem)}
.faq .wrap{max-width:820px}
.faq details{border-top:1px solid rgba(19,35,58,.16);padding-block:1.05rem}
.faq details:last-child{border-bottom:1px solid rgba(19,35,58,.16)}
.faq summary{cursor:pointer;font-weight:600;font-size:1.08rem;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;color:var(--slate)}
.faq details[open] summary::after{content:"\2013"}
.faq details p{margin:.7rem 0 0;color:var(--slate);max-width:62ch}

/* ---------- inner pages ---------- */
.page-head{padding-block:clamp(2rem,6vw,4.5rem) clamp(2.5rem,6vw,4rem)}
.page-head h1{font-weight:500;font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 1rem;text-wrap:balance;font-variation-settings:"opsz" 72}
.page-head p{margin:0;max-width:56ch;color:#D7DCE3;font-size:clamp(1.05rem,1.6vw,1.2rem)}
.content{padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5.5rem)}
.prose{max-width:720px}
.prose h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-top:2.6rem}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.15rem;margin:1.8rem 0 .4rem;font-weight:600}
.prose p,.prose li{color:#2A3A50}
.prose ul,.prose ol{padding-left:1.2rem}
.prose li{margin-bottom:.4rem}
.note{font-size:.95rem;color:var(--slate);background:#FFFFFF;border:1px solid rgba(19,35,58,.1);border-radius:12px;padding:1rem 1.2rem}

/* cards page */
.cardgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1.2rem,3vw,2.4rem)}
.cardgrid figure{margin:0;min-width:0;display:flex;flex-direction:column}
.cardgrid img{width:100%;max-width:260px;border-radius:22px;box-shadow:0 30px 50px -30px rgba(19,35,58,.7);aspect-ratio:1170/2532;margin-bottom:1rem}
.cardgrid figcaption b{display:block;font-size:1.12rem;margin-bottom:.15rem}
.cardgrid figcaption span{display:block;color:var(--slate);font-size:.97rem;margin-bottom:.9rem}
.cardgrid .save{margin-top:auto;align-self:flex-start;font-size:.98rem;padding:.7rem 1.15rem}
@media (max-width:820px){.cardgrid{grid-template-columns:1fr}.cardgrid figure{display:grid;grid-template-columns:120px 1fr;gap:0 1.2rem;align-items:start}.cardgrid img{grid-row:span 3;margin:0;border-radius:14px}}
.howto{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3rem);margin-top:clamp(2.5rem,6vw,4rem)}
.howto > div{min-width:0;background:#FFFFFF;border-radius:16px;padding:clamp(1.3rem,3vw,2rem);border:1px solid rgba(19,35,58,.08)}
.howto h2{font-size:1.5rem;margin-bottom:.8rem}
.howto ol{margin:0 0 1rem;padding-left:1.2rem;color:#2A3A50}
.howto li{margin-bottom:.5rem}
.howto .small{font-size:.9rem;color:var(--slate);margin:0}
@media (max-width:760px){.howto{grid-template-columns:1fr}}
.frombook{margin-top:clamp(2.5rem,6vw,4rem);display:grid;grid-template-columns:auto 1fr;gap:1.6rem;align-items:center;max-width:760px}
.frombook img{width:96px;border-radius:3px;box-shadow:0 12px 24px -12px rgba(0,0,0,.45)}
.frombook h2{font-size:1.4rem;margin-bottom:.4rem}
.frombook p{margin:0 0 .8rem;color:var(--slate)}

/* help page */
.urgent{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.urgent div{min-width:0;padding:1.1rem 1.2rem;border-radius:12px;background:rgba(8,23,43,.55);border:1px solid rgba(237,182,101,.22)}
.urgent b{display:block;font-size:.88rem;color:var(--mist);font-weight:500}
.urgent a{font-size:1.3rem;font-weight:600;text-decoration:none;color:var(--moon);font-variant-numeric:lining-nums}
.urgent a:hover{color:var(--sun)}
@media (max-width:820px){.urgent{grid-template-columns:1fr 1fr}}
@media (max-width:330px){.urgent{grid-template-columns:1fr}}
.jump{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2.4rem;padding:0;list-style:none}
.jump a{display:inline-block;padding:.45rem .9rem;border-radius:999px;background:#FFFFFF;border:1px solid rgba(19,35,58,.12);text-decoration:none;font-size:.95rem}
.jump a:hover{border-color:var(--ink)}
.country{background:#FFFFFF;border-radius:16px;border:1px solid rgba(19,35,58,.08);padding:clamp(1.2rem,3vw,2rem);margin-bottom:1.4rem;scroll-margin-top:1rem}
.country h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:0 0 1rem}
.country dl{margin:0;display:grid;grid-template-columns:12rem 1fr;gap:0}
.country dt,.country dd{padding-block:.75rem;border-top:1px solid rgba(19,35,58,.1);margin:0}
.country dt{font-weight:600;padding-right:1rem}
.country dd{color:#2A3A50;min-width:0;overflow-wrap:anywhere}
.country dd a{color:var(--ink);font-weight:600}
@media (max-width:640px){.country dl{grid-template-columns:1fr}.country dd{border-top:0;padding-top:0}}
.checked{font-size:.92rem;color:var(--slate);margin:0 0 1.6rem}

/* footer */
footer{background:var(--day);color:var(--slate);font-size:.9rem;padding-block:2.4rem 3rem;border-top:1px solid rgba(19,35,58,.12)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2.4rem;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
footer a{color:var(--ink);text-underline-offset:3px}
footer p{margin:0;max-width:52ch}
footer .copy{flex-basis:100%;font-size:.85rem}

/* articles */
.kicker{margin:0 0 .9rem!important;font-size:.85rem!important;letter-spacing:.08em;text-transform:uppercase}
.kicker a{color:var(--gold);text-decoration:none}
.kicker a:hover{text-decoration:underline;text-underline-offset:3px}
.page-head .byline{margin-top:1.2rem;font-size:.92rem;color:var(--mist)}
.article{max-width:680px;font-size:1.08rem}
.article > p,.article li{line-height:1.72}
.article h2{margin-top:2.8rem}
.article h3{color:var(--amber-text)}
.article b{color:var(--ink)}
.glance,.research,.nextbox{background:#FFFFFF;border:1px solid rgba(19,35,58,.08);border-left:3px solid var(--gold);border-radius:12px;padding:1.1rem 1.3rem;margin:0 0 2rem}
.glance ul,.nextbox ul{margin:0;padding-left:1.1rem}
.glance li,.nextbox li{margin-bottom:.45rem;font-size:1rem}
.glance li:last-child,.nextbox li:last-child{margin-bottom:0}
.lbl{margin:0 0 .6rem!important;font-size:.78rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--amber-text)!important}
.research{margin-top:2.4rem}
.research p{margin:0 0 .6rem;font-size:1rem}
.research .src{margin:0;font-size:.85rem;color:var(--slate)!important}
.nextbox{border-left-color:var(--ink)}
.byline-end{font-size:.88rem;color:var(--slate)!important;border-top:1px solid rgba(19,35,58,.12);padding-top:1rem;margin-top:2rem}
.alist{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;max-width:760px}
.alist a{display:block;text-decoration:none;background:#FFFFFF;border:1px solid rgba(19,35,58,.08);border-radius:16px;padding:clamp(1.2rem,3vw,1.8rem);transition:border-color .15s ease,transform .15s ease}
.alist a:hover{border-color:var(--ink);transform:translateY(-1px)}
.alist h2{margin:0 0 .4rem;font-size:clamp(1.3rem,2.4vw,1.6rem);color:var(--ink)}
.alist p{margin:0 0 .7rem;color:var(--slate)}
.alist span{font-size:.88rem;color:var(--amber-text)}
@media (max-width:380px){.nav{gap:.8rem;font-size:.93rem}.brand{font-size:.98rem}}

/* article layout: text + side column (quote, more articles) */
.a-layout{display:grid;grid-template-columns:minmax(0,680px) 300px;gap:clamp(2rem,5vw,3.6rem);align-items:start}
.a-side{display:grid;gap:1.4rem;position:sticky;top:1.4rem}
@media (max-width:1060px){.a-layout{grid-template-columns:minmax(0,1fr)}.a-layout .article{max-width:680px}.a-side{position:static;max-width:680px;margin-top:2.6rem}}
/* quote cards: night sky with a sunrise strip, like the cover */
.qcard{margin:0;position:relative;overflow:hidden;border-radius:18px;padding:1.9rem 1.6rem 5.6rem;color:var(--moon);
  background:linear-gradient(180deg,var(--night) 0%,#0C1E37 55%,var(--dusk) 100%);
  box-shadow:0 30px 50px -36px rgba(8,23,43,.9)}
.qcard::before{content:"";display:block;width:34px;height:2px;background:var(--gold);margin-bottom:1.2rem}
.qcard blockquote{margin:0;font-size:1.32rem;line-height:1.3;font-weight:500;text-wrap:balance;font-variation-settings:"opsz" 48}
.qcard blockquote em{font-style:normal;color:var(--gold)}
.qcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4.2rem;
  background:linear-gradient(180deg,var(--dusk) 0%,rgba(30,48,73,0) 55%),url("/assets/img/horizon-900.webp") center 42%/cover no-repeat}
.qcard-lg::after{height:5.4rem}
.qcard figcaption{margin-top:1rem;font-size:.85rem;letter-spacing:.06em;color:var(--mist)}
.qcard figcaption::before{content:"— "}
.qcard-lg{padding:2.4rem 2rem 7rem}
.qcard-lg blockquote{font-size:clamp(1.5rem,2.6vw,1.95rem)}
.amore{background:#FFFFFF;border:1px solid rgba(19,35,58,.08);border-radius:16px;padding:1.2rem 1.3rem}
.amore ul,.ateasers{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.2rem}
.amore li a,.ateasers li a{display:block;text-decoration:none;padding:.85rem 0;border-top:1px solid rgba(19,35,58,.1)}
.amore h3,.ateasers h3{margin:0 0 .3rem;font-size:1.05rem;line-height:1.3;color:var(--ink);font-weight:600}
.amore p,.ateasers p{margin:0 0 .35rem;font-size:.93rem;color:var(--slate);line-height:1.5}
.more{font-size:.9rem;color:var(--amber-text);font-weight:600}
.amore li a:hover h3,.ateasers li a:hover h3{text-decoration:underline;text-underline-offset:3px}
/* home: from the articles */
.from-articles{padding-block:clamp(2.5rem,6vw,4.5rem) 0}
.from-articles .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.from-articles h2{margin:0 0 .4rem}
.from-articles .lead{margin:0 0 1.2rem}
.ateasers h3{font-size:1.2rem}
.ateasers p{font-size:.98rem}
@media (max-width:820px){.from-articles .wrap{grid-template-columns:1fr}}

/* side quotes on the home page: 2 left, 2 right of the hero, wide screens only (≥1720px, so each box keeps a readable width) — one soft-gold colour for text and frame */
.sideq{display:none;--q:#E9CB93}
@media (min-width:1720px){
 .sideq{display:block;position:absolute;width:min(270px,calc((100vw - 1120px)/2 - 70px));margin:0;padding:1.7rem 1.5rem 1.5rem;border-radius:14px;background:rgba(8,23,43,.6);border:1.5px solid var(--q);box-shadow:0 0 28px -10px rgba(233,203,147,.35);z-index:1;color:var(--q)}
 .sideq::before{content:"";display:block;width:34px;height:2px;background:var(--q);margin-bottom:1.1rem}
 .sideq blockquote{margin:0;font-size:1.3rem;line-height:1.28;font-weight:500;color:var(--q);text-wrap:balance;font-variation-settings:"opsz" 48}
 .sideq blockquote::before{content:"\201C"}
 .sideq blockquote::after{content:"\201D"}
 .sideq blockquote em{font-style:normal;color:inherit}
 .sideq figcaption{margin-top:.9rem;font-size:.85rem;color:var(--q);opacity:.8;letter-spacing:.05em}
 .sideq figcaption::before{content:"— "}
 .sideq.left{left:calc((100vw - 1120px)/4 - 135px)} .sideq.right{right:calc((100vw - 1120px)/4 - 135px)}
 .sideq.n1{top:2.5rem} .sideq.n2{top:27rem}
 .sideq{transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease,border-color .45s ease,background .45s ease,color .45s ease}
 .sideq:hover{--q:#F6DDAA;transform:translateY(-6px) scale(1.035);background:rgba(8,23,43,.85);
   box-shadow:0 0 0 1px rgba(246,221,170,.35),0 0 46px -6px rgba(237,182,101,.55),0 24px 40px -24px rgba(0,0,0,.8)}
 .sideq::before{transition:width .45s ease}
 .sideq:hover::before{width:64px}
}
@media (prefers-reduced-motion:reduce){.sideq,.sideq::before{transition:none}.sideq:hover{transform:none}}