:root{--paper:#f6f1e7;--ink:#2a251f;--ink2:#6b6153;--green:#2f5142;--green2:#28453a;--gold:#b08a4e;--panel:#fffdf8;--line:#e5dcc7;--dark:#221e19}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased}
h1,h2,h3,.wordmark{font-family:'Playfair Display','Georgia',serif;font-weight:600;line-height:1.15}
img{max-width:100%;height:auto;display:block}
a{color:var(--green2)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
/* header */
header.site{background:rgba(246,241,231,.92);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.hd{display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:0 auto;padding:13px 24px;gap:20px}
.brand{text-decoration:none;color:var(--ink);line-height:1;display:inline-flex;align-items:center;gap:8px}
.brand .wordmark{font-size:25px;letter-spacing:.01em}
.brand .wordmark b{color:var(--green);font-weight:600}
.brand .tl{display:block;font-family:'Inter',sans-serif;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-top:4px;font-weight:600}
nav.main{display:flex;gap:26px;align-items:center}
nav.main a{font-family:'Jost',sans-serif;font-size:13.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:#3d634c;text-decoration:none;position:relative}
nav.main a:after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s}
nav.main a:hover:after{transform:scaleX(1)}
.hd .search{background:none;border:0;cursor:pointer;color:var(--ink);padding:6px;display:flex;align-items:center}
.hd .search:hover{color:var(--green)}
@media(max-width:760px){nav.main{display:none}}
/* split hero */
.hero{display:grid;grid-template-columns:1fr 1fr;min-height:min(48vh,420px);margin:0}
.hero-text{background-color:var(--green);background-image:linear-gradient(180deg,rgba(0,0,0,.17) 0,rgba(0,0,0,0) 38px,rgba(0,0,0,0) calc(100% - 38px),rgba(0,0,0,.17) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,255,255,.026) 0 1px,transparent 1px 5px),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px);color:#f2ede0;display:flex;flex-direction:column;justify-content:center;padding:48px clamp(24px,4vw,64px) 48px max(24px, calc((100vw - 1180px)/2 + 24px))}
.hero-text .kick{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hero-text h1{font-size:clamp(32px,4.2vw,52px);color:#fff;margin:16px 0 16px}
.hero-text p{font-size:18px;color:#e3e9e2;max-width:46ch;margin:0 0 26px}
.hero-btn{display:inline-flex;align-self:flex-start;background:var(--gold);color:#fff;text-decoration:none;font-family:'Inter',sans-serif;font-weight:600;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px 28px;border-radius:40px;transition:transform .2s,box-shadow .2s}
.hero-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.22)}
.hero-img{overflow:hidden;position:relative}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:820px){.hero{grid-template-columns:1fr}.hero-img{height:210px;order:-1}.hero-text{padding:40px 26px}}
/* sections */
.sec{padding:56px 0 8px}
.sechd{display:block;position:relative;border-bottom:1.5px solid var(--ink);padding-bottom:12px;margin-bottom:30px}
.sechd .k{display:block;line-height:1.2;margin-bottom:5px}
.sechd .more{position:absolute;right:0;bottom:14px;margin-left:0}
.sechd h2{font-size:28px;margin:0}
.sechd .k{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.sechd .more{margin-left:auto;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--green2);white-space:nowrap;position:relative}.sechd .more:after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .28s}.sechd .more:hover:after{transform:scaleX(1)}
.lede{font-family:'Playfair Display',serif;font-size:21px;line-height:1.5;max-width:760px;margin:0 0 6px;color:var(--ink)}
/* grids */
.grid{display:grid;gap:24px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
@media(max-width:560px){.g4{grid-template-columns:1fr}}
/* ROUNDED-RECTANGLE cards (trufflesmedia style, warmed up) */
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(42,33,20,.13);border-color:#d9ccaf}
.card-img{aspect-ratio:3/2;overflow:hidden;display:block}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s}
.card:hover .card-img img{transform:scale(1.045)}
.card-body{padding:18px 20px 22px}
.card-cat{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.card h3{font-size:19px;margin:8px 0 8px}
.card p{font-family:'Inter',sans-serif;font-size:14px;color:var(--ink2);margin:0;line-height:1.55}
/* genre chips (rounded rectangles, text) */
.genre{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 22px 15px;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s,border-color .25s}
.genre:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(42,33,20,.13);border-color:var(--green)}
.genre .n{font-family:'Inter',sans-serif;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.genre h3{font-size:20px;margin:9px 0 6px}
.genre p{font-family:'Inter',sans-serif;font-size:13.5px;color:var(--ink2);margin:0}
.genre .arr{color:var(--green);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;margin-top:auto;padding-top:6px;transition:transform .2s}
.genre:hover .arr{transform:translateX(5px)}
/* book pick cards (rounded, text, dummy buy) */
.pick{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.pick:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(42,33,20,.13)}
.pick .g{font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.pick h3{font-size:19px;margin:8px 0 3px}
.pick .auth{font-family:'Inter',sans-serif;font-size:13px;color:var(--ink2);font-style:italic;margin-bottom:11px}
.pick p{font-family:'Inter',sans-serif;font-size:14px;color:var(--ink2);margin:0 0 18px;line-height:1.55}
.buy{margin-top:auto;display:inline-flex;align-items:center;gap:8px;background:var(--green);color:#fff!important;text-decoration:none;font-family:'Inter',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.04em;padding:11px 20px;border-radius:40px;align-self:flex-start;transition:transform .2s,background .2s}
.buy:hover{transform:translateY(-2px);background:var(--green2)}
.buy em{font-style:normal;display:inline-block;transition:transform .22s}.buy:hover em{transform:translateX(4px)}
/* editorial band */
.heritage{background-color:var(--gold);background-image:linear-gradient(180deg,rgba(0,0,0,.10) 0,rgba(0,0,0,0) 38px,rgba(0,0,0,0) calc(100% - 38px),rgba(0,0,0,.17) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,255,255,.026) 0 1px,transparent 1px 5px),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px);color:#2a251f;margin-top:66px;padding:58px 0}
.heritage .ab{max-width:720px;text-align:center}
.heritage h2{color:#fff;font-size:28px;margin:0 0 14px}
.heritage p{color:#fff;margin:0 auto;max-width:60ch;font-size:17px;line-height:1.7}
.heritage a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* footer */
footer.site{background-color:#21382d;background-image:linear-gradient(180deg,rgba(0,0,0,.17) 0,rgba(0,0,0,0) 38px,rgba(0,0,0,0) calc(100% - 38px),rgba(0,0,0,.17) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,255,255,.026) 0 1px,transparent 1px 5px),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px);color:#fff;padding:52px 0 30px;font-family:'Inter',sans-serif}
footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1.4fr 1fr;gap:44px;align-items:start}footer .cols>div{max-width:100%}@media(max-width:900px){footer .cols{grid-template-columns:1fr 1fr;gap:34px 40px}}@media(max-width:560px){footer .cols{grid-template-columns:1fr;gap:30px}}
footer a{color:#fff;text-decoration:none;font-size:14px;display:block;padding:4px 0}
footer a:hover{color:#fff;text-decoration:underline}
footer h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
footer .bd{font-family:'Playfair Display',serif;font-size:22px;color:#fff}
footer .bd b{color:var(--gold)}
footer .fine{border-top:1px solid rgba(255,255,255,.32);margin-top:32px;padding-top:18px;font-size:12.5px;color:#fff;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* ---- interior / post template ---- */
.crumb{font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.03em;color:var(--ink2);padding:18px 0 0}
.crumb a{color:var(--green2);text-decoration:none}.crumb a:hover{text-decoration:underline}
.post{max-width:760px;margin:0 auto;padding:38px 24px 48px}
.post-head{padding:22px 0 18px;border-bottom:1px solid var(--line);margin-bottom:28px}
.post-head .k{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.post-head h1{font-size:clamp(30px,4.4vw,44px);margin:12px 0 16px}
.byline{font-family:'Inter',sans-serif;font-size:13px;color:var(--ink2);display:flex;gap:8px 16px;flex-wrap:wrap;align-items:center}
.byline b{color:var(--ink);font-weight:600}
.post p{margin:0 0 20px;text-wrap:pretty}  /* text-wrap:pretty = the house orphan guard. Nick, 24 Aug: a single
     word dropping to its own line is a standing pet hate. Every other
     site in the network sets this; .post p was the gap. */.post h2{font-size:26px;margin:42px 0 16px}
.post-lede{font-family:'Playfair Display',serif;font-style:italic;font-size:21px;line-height:1.5;color:var(--ink);margin:0 0 26px}
.qa{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:0 10px 10px 0;padding:20px 10px 20px 24px;margin:0 0 22px}
.qa h3{font-size:12px;font-family:'Inter',sans-serif;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.qa ol{margin:0;padding-left:20px}.qa li{font-family:'Inter',sans-serif;font-size:15px;margin:0 0 7px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qa li b{color:var(--ink)}
.entry{border-top:1px solid var(--line);padding:30px 0}.entry:first-of-type{border-top:0;padding-top:8px}
.entry .num{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--gold);letter-spacing:.12em}
.entry h3{font-size:23px;margin:0 0 2px}
.entry .auth{font-family:'Inter',sans-serif;font-size:14px;font-style:italic;color:var(--ink2);margin-bottom:9px}
.entry .tag{display:inline-block;font-family:'Inter',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);background:rgba(55,90,74,.09);border-radius:20px;padding:4px 11px;margin-bottom:13px}
.entry p{margin:0 0 16px}
.faq{border-top:2px solid var(--ink);margin-top:50px;padding-top:6px}.faq h2{margin-top:22px;margin-bottom:6px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:'Playfair Display',serif;font-size:19px;padding:18px 34px 18px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:14px;font-size:24px;color:var(--gold);font-family:'Inter',sans-serif}
.faq details[open] summary:after{content:"–"}
.faq details p{padding:0 0 20px;font-family:'Inter',sans-serif;font-size:15.5px;color:var(--ink2)}
.relband{margin-top:44px;padding-top:0}

.brand-emb{height:40px;width:auto;display:block;flex:none}.brand-wm-svg{height:40px;width:auto;display:block}
@media(max-width:820px){.brand-emb{height:36px}.brand-wm-svg{height:35px}}
@media(max-width:480px){.brand-wm-svg{height:24px}.brand-emb{height:30px}}
.foot-logo{height:38px;width:auto;display:block;margin-bottom:18px}
@media(max-width:820px){.foot-logo{height:34px}}
/* --- menu right + hamburger --- */
.hd-right{display:flex;align-items:center;gap:24px}
.nav-toggle{display:none;width:42px;height:42px;border-radius:50%;align-items:center;justify-content:center;background:transparent;border:0;cursor:pointer;color:var(--ink);padding:0;transition:background .2s}
.nav-toggle svg{width:24px;height:24px}.nav-toggle:hover{background:rgba(55,90,74,.1)}
header.site .search:hover{color:var(--gold)}
header.site .nav-toggle:hover{background:rgba(242,237,224,.13)}
.mnav{display:none}
/* NAV COLLAPSE - one breakpoint for nav.main, .nav-toggle and .hd .search.
   Was 1040, which fired ~380px before the nav actually stopped fitting
   (it holds to ~660). 760 keeps the real nav on iPad portrait. */
@media(max-width:760px){.nav-toggle{display:inline-flex}.mnav{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;padding:6px 22px;box-shadow:0 14px 32px rgba(42,33,20,.16);z-index:60;border-top:1px solid var(--line)}header.site.nav-open .mnav{display:flex}header.site{position:sticky;top:0;z-index:30}.mnav a{padding:14px 2px;border-bottom:1px solid var(--line);color:#3d634c;text-decoration:none;font-family:'Jost',sans-serif;font-weight:400;font-size:15px;letter-spacing:.14em;text-transform:uppercase}.mnav a:last-child{border-bottom:0}.mnav a:hover{color:var(--green)}}
@media(max-width:760px){.hd .search{display:inline-flex}}
.heritage .ab-book{display:block;margin:0 auto 18px;color:#fff}
.totop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--green);color:#fff;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 22px rgba(42,33,20,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .25s,transform .25s,background .2s;z-index:80}
.totop.show{opacity:1;visibility:visible;transform:none}.totop:hover{background:var(--green2)}
@media(max-width:560px){.totop{right:16px;bottom:16px;width:44px;height:44px}}
/* --- 2-col book entries with covers --- */
.entries{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:32px 0 8px}
.entries .entry{position:relative;display:flex;flex-direction:column;padding:15px;border-top:0;background:#fdfbf6;border-radius:12px;margin:10px 0}.entries .entry::before{content:"";position:absolute;top:-11px;left:8px;right:8px;height:1px;background:linear-gradient(to right,transparent,var(--line) 16%,var(--line) 84%,transparent)}
.entries .entry:nth-child(odd){margin-right:10px}.entries .entry:nth-child(odd)::after{content:"";position:absolute;top:20px;bottom:20px;right:-11px;width:1px;background:linear-gradient(to bottom,transparent,var(--line) 14%,var(--line) 86%,transparent)}.entries .entry:nth-child(even){margin-left:10px}
.entry-cover{float:right;width:87px;display:block;margin:0 0 14px 20px;position:relative}
.entry-cover img{width:100%;height:auto;border-radius:3px;box-shadow:0 4px 11px rgba(42,33,20,.14);display:block}
.entry-body .num{margin-bottom:2px}
@media(max-width:760px){.entries{grid-template-columns:1fr;margin:24px 0 0;gap:0}.entries .entry:nth-child(2)::before{content:""}.entries .entry:nth-child(2){padding-top:28px}.entries .entry:nth-child(odd){margin-right:0}.entries .entry:nth-child(odd)::after{content:none}.entries .entry:nth-child(even){margin-left:0}}
html{scroll-behavior:smooth}
.qa-jump{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);margin-left:8px;vertical-align:middle;flex:none;transition:background .2s,color .2s}
.qa-jump:hover{background:var(--gold);color:#fff}
.entries .entry{scroll-margin-top:96px}
.entry-main{display:flow-root;margin-bottom:9px}
.entry-body p{font-size:15px;line-height:1.55;clear:both}
.entries .entry>.buy{margin-top:auto}
.post-hero{position:relative;background:var(--green) center/cover no-repeat;background-image:url("/images/post-hero.webp?v=2");min-height:min(56vh,440px);display:flex;flex-direction:column;margin-bottom:8px;border-bottom:3px solid var(--gold)}
.post-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(18,24,18,.85),rgba(18,24,18,.36) 55%,rgba(18,24,18,.22))}
.post-hero-inner{position:relative;z-index:1;max-width:1180px;margin:auto auto 0;padding:0 24px 46px;width:100%;color:#fff}
.post-hero .k{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.post-hero .kicker{font-family:'Inter',sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);display:block}
.post-hero h1{color:#fff;font-size:clamp(48px,7.6vw,84px);margin:12px 0 16px;max-width:17ch;line-height:1.12}
.post-hero .hero-quote{font-family:'Playfair Display',serif;font-style:italic;font-size:clamp(17px,2vw,22px);color:#f2ede0;max-width:58ch;margin:0 0 18px;line-height:1.5}
.post-hero .byline{color:#e3e9e2;display:flex;gap:6px 7px;flex-wrap:wrap;align-items:center;font-family:'Inter',sans-serif;font-size:13px}
.post-hero .byline b{color:#fff;font-weight:600;font-style:italic}
@media(max-width:700px){.post-hero{min-height:min(76vh,580px);background-position:center 30%}.post-hero-inner{padding:0 22px 34px}.post-hero h1{margin-top:8px;max-width:15ch;line-height:1.1}}
.pick-cover{align-self:flex-start;height:184px;width:auto;max-width:100%;object-fit:contain;display:block;margin:0 0 16px;border-radius:3px;box-shadow:0 5px 14px rgba(42,33,20,.16)}
.hero-crumb{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;padding:18px 24px 0;color:rgba(255,255,255,.82)}
.hero-crumb a{color:#fff}
/* utility + hub pages */
.pagehead{max-width:820px;margin:0 auto;padding:52px 24px 4px;text-align:center}
.pagehead .k{font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--gold);font-weight:600}
.pagehead h1{font-family:'Playfair Display',serif;font-weight:600;font-size:clamp(30px,4.4vw,46px);color:var(--ink);margin:10px 0 0;line-height:1.12}
.pagehead p.lede{font-size:17px;color:var(--ink2);margin:15px auto 0;max-width:640px;line-height:1.62}
.prose{max-width:720px;margin:0 auto;padding:24px 24px 66px}
.prose h2{font-family:'Playfair Display',serif;font-weight:600;font-size:23px;color:var(--ink);margin:34px 0 10px}
.prose p{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 16px}
.prose a{color:var(--green);text-decoration:underline;text-underline-offset:2px}
.prose ul{margin:2px 0 18px;padding-left:20px}
.prose li{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 9px}
.prose .contact-email{font-size:21px;font-family:'Playfair Display',serif;font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.prose em{color:var(--ink2)}
/* shop shelf color-hero + shelf furniture */
.shelf-hero{position:relative;background:linear-gradient(135deg,var(--green2) 0%,var(--green) 60%,#365b4b 100%);color:#fff;padding:58px 24px 52px;border-bottom:3px solid var(--gold);overflow:hidden}
.shelf-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 18%,rgba(176,138,78,.22),transparent 46%);pointer-events:none}
.shelf-hero-inner{max-width:1180px;margin:0 auto;position:relative;z-index:1}
.shelf-hero .k{font-family:"Inter",sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--gold);font-weight:700}
.shelf-hero h1{font-family:"Playfair Display",serif;font-weight:600;font-size:clamp(32px,5vw,52px);margin:10px 0 12px;line-height:1.08;max-width:16ch}
.shelf-hero p{max-width:600px;font-size:17px;line-height:1.62;color:rgba(255,255,255,.9);margin:0}
@media(max-width:600px){.shelf-hero{padding:44px 22px 40px}.shelf-hero h1{font-size:34px}}
.more-shelves{margin:6px 0 10px}
/* shop hub shelf-card images */
.genre .gimg{display:block;width:calc(100% + 44px);max-width:none;margin:-22px -22px 16px;height:166px;object-fit:cover;border-radius:13px 13px 0 0}

/* hero-hdr — transparent header over photo heroes (swishlist pattern) */
.site.hero-top{position:fixed;top:0;left:0;right:0;z-index:30;background:rgba(0,0,0,.20);backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.55);transition:background .3s,border-color .3s,box-shadow .3s}
.site.hero-top .brand-emb,.site.hero-top .brand-wm-svg{filter:brightness(0) invert(1);transition:filter .3s}
.site.hero-top nav.main a{color:#fff}
.site.hero-top nav.main a:after{background:#fff;height:1px}
.site.hero-top .nav-toggle,.site.hero-top .search{color:#fff}
.site.hero-top.solid,.site.hero-top.nav-open{background:rgba(253,251,246,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);box-shadow:0 1px 12px rgba(42,33,20,.06)}
.site.hero-top.solid .brand-emb,.site.hero-top.solid .brand-wm-svg,.site.hero-top.nav-open .brand-emb,.site.hero-top.nav-open .brand-wm-svg{filter:none}
.site.hero-top.solid nav.main a,.site.hero-top.nav-open nav.main a{color:#3d634c}
.site.hero-top.solid nav.main a:after{background:var(--gold);height:2px}
.site.hero-top.solid .nav-toggle,.site.hero-top.solid .search,.site.hero-top.nav-open .nav-toggle,.site.hero-top.nav-open .search{color:var(--ink)}
.hero-top+.post-hero .hero-crumb{padding-top:92px}

/* taller hero on desktop (+20%), mobile unchanged */
@media(min-width:900px){.post-hero{min-height:min(67vh,528px)}}

/* wide screens: post width matches hero, book grid 3-up, lede+qa side by side */
@media(min-width:1200px){
.post{max-width:1180px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:48px;align-items:start}
.post>*{grid-column:1/-1}
.post>.post-lede{grid-column:1;margin-bottom:0}
.post>.qa{grid-column:2;margin-bottom:26px}
.entries{grid-template-columns:1fr 1fr 1fr;margin-top:36px}
.entries .entry:nth-child(odd){margin-right:0}
.entries .entry:nth-child(even){margin-left:0}
.entries .entry:nth-child(odd)::after{content:none}
.entries .entry:nth-child(3n+1){margin-right:10px}
.entries .entry:nth-child(3n+2){margin-left:10px;margin-right:10px}
.entries .entry:nth-child(3n){margin-left:10px}
.entries .entry:nth-child(3n+1)::after,.entries .entry:nth-child(3n+2)::after{content:"";position:absolute;top:20px;bottom:20px;right:-11px;width:1px;background:linear-gradient(to bottom,transparent,var(--line) 14%,var(--line) 86%,transparent)}
/* ==== reading measure: prose stays ~68ch while grids/images keep the full 1180 ==== */
}

/* tighter hero->content gap on hub pages */
.post-hero+.wrap>.sec:first-child{padding-top:26px}

/* colon-split post titles: subtitle own line, thin italic */
.post-hero h1 .h1-sub{display:block;font-style:italic;font-weight:400;font-size:.68em;line-height:1.18;margin-top:4px}

/* star ratings — guardian-style circle badges in brand colours */
.stars{display:inline-flex;align-items:center;gap:9px;margin:0 0 9px;font-family:'Inter',sans-serif}
.stars .s-wrap{display:inline-flex;gap:3px;line-height:1}
.stars .st{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;font-size:11px;font-style:normal;line-height:1}
.stars .st.f{background:var(--gold);color:#fdfbf6}
.stars .st.h{background:linear-gradient(90deg,var(--gold) 50%,#e9e2d3 50%);color:#fdfbf6}
.stars .st.e{background:#e9e2d3;color:#8f8674}
.stars em{font-style:normal;font-size:12px;font-weight:600;color:var(--ink2);letter-spacing:.02em}

/* editor's picks title links — same jump as arrows, subtle underline rollover */
.qa .qa-title{color:inherit;text-decoration:none}
.qa .qa-title:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:var(--gold)}

/* roundup card numbers — green circle, top-right */
.entries .entry .num2{position:absolute;top:15px;right:15px;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Jost',sans-serif;font-size:12px;font-weight:500;line-height:1;letter-spacing:0;z-index:1;pointer-events:none}
/* whole-card amazon link + animated sheen */
.entries .entry{transition:transform .25s,box-shadow .25s}
.entries .entry:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(42,33,20,.13)}
.card-link{position:absolute;inset:0;z-index:2;border-radius:12px;overflow:hidden}
.card-link::after{content:"";position:absolute;top:-20%;bottom:-20%;left:-80%;width:45%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .65s ease}
.entries .entry:hover .card-link::after{left:130%}

/* sechd final overrides — tight kicker/title stack, more-link pinned right (cascade-final) */
.sechd .k{display:block;line-height:1;margin:0 0 8px}
.sechd h2{margin:0;line-height:1.1}
.sechd .more{position:absolute;right:0;bottom:14px;margin-left:0}

/* sub-shelf section headings */
.subshelf{margin-top:6px}
.ss-hd{margin:34px 0 0;border-bottom:1.5px solid var(--ink);padding-bottom:10px}
.ss-hd h2{font-size:24px;margin:0 0 4px}
.ss-hd p{font-family:'Inter',sans-serif;font-size:14px;color:var(--ink2);margin:0}
.subshelf:first-of-type .ss-hd{margin-top:8px}
/* whole-card hover drives the buy-button arrow + shade (overlay eats button hover) */
.entries .entry:hover .buy{background:var(--green2)}
.entries .entry:hover .buy em{transform:translateX(4px)}

/* homepage picks: whole-card link + sheen (match book cards) */
.pick{position:relative}
.pick .card-link{border-radius:13px}
.pick:hover .card-link::after{left:130%}
.pick:hover .buy{background:var(--green2)}
.pick:hover .buy em{transform:translateX(4px)}

/* hero button arrow animation */
.hero-btn em{display:inline-block;font-style:normal;transition:transform .22s}
.hero-btn:hover em{transform:translateX(4px)}

/* ===== HEADER v2 — footer identity (dark green canvas, white logo) ===== */
header.site{background-color:#21382d;background-image:linear-gradient(180deg,rgba(0,0,0,.17) 0,rgba(0,0,0,0) 38px,rgba(0,0,0,0) calc(100% - 38px),rgba(0,0,0,.17) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,255,255,.026) 0 1px,transparent 1px 5px),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px);border-bottom:1px solid rgba(176,138,78,.4);backdrop-filter:none}
.brand-full{height:44px;width:auto;display:block}
@media(max-width:820px){.brand-full{height:38px}}
@media(max-width:480px){.brand-full{height:32px}}
header.site nav.main a{color:#f2ede0}
header.site .nav-toggle,header.site .search{color:#f2ede0}
.mnav{background:#21382d;border-top:1px solid rgba(176,138,78,.4)}
.mnav a{color:#f2ede0;border-bottom:1px solid rgba(255,255,255,.12)}
.mnav a:hover{color:var(--gold)}
/* hero pages: transparent state unchanged; scrolled/solid + nav-open now = same green canvas */
.site.hero-top{background-image:none}
.site.hero-top.solid,.site.hero-top.nav-open{background-color:#21382d;background-image:linear-gradient(180deg,rgba(0,0,0,.17) 0,rgba(0,0,0,0) 38px,rgba(0,0,0,0) calc(100% - 38px),rgba(0,0,0,.17) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,255,255,.026) 0 1px,transparent 1px 5px),repeating-linear-gradient(135deg,rgba(255,255,255,.022) 0 1px,transparent 1px 5px),repeating-linear-gradient(45deg,rgba(0,0,0,.05) 0 2px,transparent 2px 5px);border-bottom:1px solid rgba(176,138,78,.4);backdrop-filter:none;box-shadow:0 2px 14px rgba(0,0,0,.25)}
.site.hero-top.solid nav.main a,.site.hero-top.nav-open nav.main a{color:#f2ede0}
.site.hero-top.solid .nav-toggle,.site.hero-top.solid .search,.site.hero-top.nav-open .nav-toggle,.site.hero-top.nav-open .search{color:#f2ede0}
.site.hero-top .brand-full{filter:brightness(0) invert(1)}
.site.hero-top.solid .brand-full,.site.hero-top.nav-open .brand-full{filter:none}
.site.hero-top.solid nav.main a:after,.site.hero-top.nav-open nav.main a:after{background:var(--gold);height:2px}

/* editor's picks blurbs: hidden on mobile */
@media(max-width:640px){.qa .qa-blurb{display:none}}

@media(max-width:767px){.crumb-cur{display:none}}

.stars{flex-wrap:wrap;max-width:calc(100% - 46px);gap:0 7px;margin:0 0 7px}
.stars b{order:-1;width:100%;margin:0 0 3px;line-height:1.05;font-weight:600;font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;color:#8f8674;font-family:'Inter',sans-serif;text-align:left}
.ratings-note{font-size:13.5px;line-height:1.55;color:#8f8674;font-style:italic;margin:0 0 14px}

.entry-body .tag{display:inline-block;margin:0 0 6px}

.entries .entry .entry-cover .num2{position:absolute;top:-11px;right:-11px;left:auto;bottom:auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--green,#24382c);color:#fdfbf6;font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.02em;box-shadow:0 2px 6px rgba(0,0,0,.18);z-index:5}

/* ==== editorial scene images (magazine breaks inside posts) ==== */
.scene{margin:34px 0 30px}
.scene img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:14px}
.scene figcaption{margin-top:11px;font-size:14.5px;line-height:1.5;color:var(--muted,#5b6167);
  font-style:italic;text-wrap:pretty;max-width:62ch}
.post h3{font-size:19px;margin:26px 0 8px;letter-spacing:.01em}
@media(min-width:1200px){.scene{grid-column:1/-1}}
@media(max-width:640px){.scene{margin:26px 0 22px}.scene figcaption{font-size:13.5px}}

/* ==== Editor's Picks: shrink-to-content + green favicon chip (v116) ==== */
.qa{width:fit-content;max-width:100%;padding:15px 24px 17px 22px}
.qa h3{display:flex;align-items:center;gap:10px;margin:0 0 11px}
.qa h3::before{content:"";width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19 18 34 34' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 25c-3.4-2.2-8.3-3.5-13.5-3.2v24c5.2-.3 10.1.9 13.5 3.2'/%3E%3Cpath d='M36 25c3.4-2.2 8.3-3.5 13.5-3.2v24c-5.2-.3-10.1.9-13.5 3.2'/%3E%3Cpath d='M36 25v24'/%3E%3C/svg%3E") center/17px auto no-repeat}
/* ==== "the doors" 2-col card grid in a light box ==== */
.doorbox{background:#fdfbf6;border:1px solid var(--line);border-radius:14px;
  padding:28px 30px;margin:26px 0 30px}
.doorgrid{display:grid;grid-template-columns:1fr 1fr;gap:26px 34px}
.door h3{display:flex;align-items:flex-start;gap:10px;margin:0 0 8px;font-size:17.5px;line-height:1.3}
.door h3::before{content:"";width:24px;height:24px;border-radius:50%;flex:none;margin-top:1px;
  background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='19 18 34 34' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 25c-3.4-2.2-8.3-3.5-13.5-3.2v24c5.2-.3 10.1.9 13.5 3.2'/%3E%3Cpath d='M36 25c3.4-2.2 8.3-3.5 13.5-3.2v24c-5.2-.3-10.1.9-13.5 3.2'/%3E%3Cpath d='M36 25v24'/%3E%3C/svg%3E") center/15px auto no-repeat}
.door p{margin:0 0 10px;font-size:15.5px;line-height:1.62}
.door p:last-child{margin-bottom:0}
.amzlink{color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--gold)}
.amzlink:hover{text-decoration-thickness:2px}
@media(max-width:760px){.doorgrid{grid-template-columns:1fr;gap:22px}.doorbox{padding:20px 18px}}

/* picks list flush with the chip's left edge */
.qa ol{padding-left:0;list-style:none}

/* ratings note now sits at the foot of the article */
.ratings-note{margin:34px 0 0;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;font-style:italic;color:var(--muted,#6b7169)}


/* long tags wrap beside the floated cover instead of dropping below it (cover 87px + 20px gap) */
.entry .tag{max-width:calc(100% - 113px);white-space:normal;line-height:1.35;text-align:left}

/* wide layout: intro and Editor's Picks share the row evenly (50/50) */
@media(min-width:1200px){
  .post{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .post>.qa{justify-self:stretch;width:auto;max-width:none}
}

/* two-column body section on wide desktop (20px either side of the centre) */
@media(min-width:1200px){
  .twocol{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;align-items:start;margin:42px 0 0}
  .twocol .tc-col>h2{margin-top:0}
  .twocol .tc-col>*:first-child{margin-top:0}
}
.twocol .tc-col>p:last-child{margin-bottom:0}

/* mood shots: one column wide, aligned to the text grid (post 1180 - 48 padding - 40 gap) / 2 */
@media(min-width:1200px){
  .post>figure.scene{max-width:546px;margin-right:auto}
}

/* paired mood shots: two single-column images side by side, square corners */
.scenepair{display:grid;grid-template-columns:1fr;gap:22px;margin:34px 0 30px}
.scenepair .scene{margin:0;max-width:none}
/* mobile + narrow: each shot keeps its own caption */
.scenepair .pair-cap{display:none}
@media(min-width:1200px){
  .scenepair{grid-template-columns:1fr 1fr;column-gap:40px}
  .scenepair .scene{grid-column:auto}   /* .scene{grid-column:1/-1} would span both tracks */
  /* wide: one caption spanning the pair */
  .scenepair .scene figcaption{display:none}
  .scenepair .pair-cap{display:block;grid-column:1/-1;margin:-8px 0 0;
    font-size:14.5px;line-height:1.5;color:var(--muted,#5b6167);font-style:italic;
    text-wrap:pretty;max-width:72ch}
}

/* FAQ: two full-width columns with a dashed divider (village style, accordion engine) */
.faq .faqgrid{display:grid;grid-template-columns:1fr}
@media(min-width:900px){
  .faq .faqgrid{grid-template-columns:1fr 1fr}
  .faq .faqgrid{position:relative}
  .faq .faqcol:first-child{padding-right:40px}
  .faq .faqgrid::before{content:"";position:absolute;top:0;bottom:0;left:50%;
    border-left:1px dashed var(--line)}
  .faq .faqcol:last-child{padding-left:40px}
}

/* ==== full-bleed gold band under the post hero: lede + Editor's Picks ==== */
.ledeband{background-color:var(--gold);background-image:linear-gradient(180deg,rgba(0,0,0,.10) 0,rgba(0,0,0,0) 38px,rgba(0,0,0,0) calc(100% - 38px),rgba(0,0,0,.17) 100%),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.18'/%3E%3C/svg%3E"),repeating-linear-gradient(45deg,rgba(255,255,255,.026) 0 1px,transparent 1px 5px);
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);padding:46px 0}
.lb-in{max-width:1180px;margin:0 auto;padding:0 24px}
.ledeband .post-lede{color:#fff;margin:0 0 24px}
@media(min-width:1200px){
  .lb-in{display:grid;grid-template-columns:minmax(0,1fr) 400px;column-gap:56px;align-items:center}
  .ledeband .post-lede{margin-bottom:0}
  .ledeband .qa{justify-self:end}
}

/* hero sits flush against the gold lede band */
.post-hero:has(+ .ledeband){margin-bottom:0;border-bottom:0}

/* gold statement band inside a post (full-bleed, sits above the FAQ) */
.post .postband,.postband{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:46px 24px;margin-top:40px;margin-bottom:34px}
.postband .ab{max-width:720px;margin:0 auto;text-align:center}
.postband h2{margin:0 0 14px}
.postband p{text-wrap:balance}

/* ==== contact page ==== */
.contact-page{max-width:820px}
.mailcard{display:flex;align-items:center;gap:16px;width:fit-content;margin:6px auto 44px;
  padding:16px 26px 16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s}
.mailcard:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(42,33,20,.06);border-color:var(--green)}
.mailcard-ico{flex:none;width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .25s}
.mailcard:hover .mailcard-ico{transform:scale(1.07) rotate(-4deg)}
.mailcard-txt{display:flex;flex-direction:column;text-align:left}
.mailcard-k{font-family:'Inter',sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.mailcard-addr{font-family:'Playfair Display',serif;font-size:22px;color:var(--green);
  border-bottom:1px solid transparent;padding-bottom:1px;transition:border-color .25s}
.mailcard:hover .mailcard-addr{border-bottom-color:var(--green)}
.mailcard-addr{text-decoration:none}
.contact-page h2.ctr{text-align:center;margin:0 0 22px}
.ctgrid{display:grid;grid-template-columns:1fr;gap:18px}
.ctitem{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.ctitem h3{margin:0 0 6px;font-size:18px}
.ctitem p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink2)}
.closing{text-align:center;margin-top:52px;font-style:italic;font-size:14.5px;
  color:var(--muted,#8a8375);opacity:.9;text-wrap:balance}
@media(min-width:760px){.ctgrid{grid-template-columns:1fr 1fr;gap:20px}}
@media(max-width:520px){.mailcard{width:auto;flex-direction:column;text-align:center;gap:12px;padding:22px}
  .mailcard-txt{text-align:center;align-items:center}.mailcard-addr{font-size:18px}}

/* the gold band already separates the FAQ - drop the rule above it */
.postband + .faq{border-top:0;margin-top:0;padding-top:0}
.postband + .faq h2{margin-top:0}

/* the band now carries a whole section: icon + centred heading + two white columns */
.postband .ab{padding-bottom:4px}
.postband .ab h2{margin:0 0 26px}
.pb-body{max-width:1180px;margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1fr;gap:0 40px}
.pb-body p{color:#fff;margin:0 0 18px;text-wrap:pretty}
.pb-body p:last-child{margin-bottom:0}
.pb-body strong{color:#fff}
.pb-body em{color:#fff}
.pb-body a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media(min-width:1000px){.pb-body{grid-template-columns:1fr 1fr}}

/* FAQ heading centred, with room under it before the questions */
.faq h2{text-align:center;margin-bottom:26px}
.postband + .faq h2{margin-top:44px}

/* ==== gold hero band on the utility pages ==== */
.pagehero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  padding:54px 24px 58px;margin-bottom:48px}
.pagehero .ab{max-width:760px;margin:0 auto;text-align:center;padding:0}
.pagehero .ab-book{margin:0 auto 20px}
.pagehero .k{display:block;color:#f0e6cf;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:12px}
.pagehero h1{color:#fff;margin:0 0 16px;font-size:clamp(34px,4.6vw,50px);line-height:1.1}
.pagehero .lede{color:#fdf8ec;margin:0 auto;max-width:62ch;font-size:17.5px;line-height:1.65;text-wrap:balance}

/* .prose a outranks .mailcard - kill the inherited underline, hover border only */
.prose a.mailcard,.prose a.mailcard:hover{text-decoration:none}
.prose a.mailcard .mailcard-k,.prose a.mailcard .mailcard-addr{text-decoration:none}

/* footer fine print: legal line lighter and smaller than the copyright */
.fine span:last-child{font-size:11.5px;color:rgba(255,255,255,.62)}

/* utility hero: breadcrumb sits inside the band, no cream strip above */
.pagehero{padding-top:20px}
.pagehero .hero-crumb{max-width:1180px;margin:0 auto 26px;padding:0 24px;text-align:left;
  color:rgba(255,255,255,.78);font-family:'Inter',sans-serif;font-size:12px;letter-spacing:.03em}
.pagehero .hero-crumb a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.45)}
.pagehero .hero-crumb a:hover{border-bottom-color:#fff}
/* opening paragraph on the utility pages, matching the post lede */
.prose p.prose-lede{text-wrap:pretty;font-family:'Playfair Display',serif;font-style:italic;font-size:21px;
  line-height:1.5;color:var(--ink);margin:0 0 26px}
/* .prose p outranks .closing - restate it */
.prose p.closing{font-family:'Inter',sans-serif;font-size:14.5px;font-style:italic;
  color:var(--muted,#8a8375);margin-top:52px;text-align:center;text-wrap:balance}

/* footer legal line: keep it off a single-word last line */

/* utility hero flush to the header */
.pagehero{margin-top:0}

/* disclosure on a single line on desktop; wraps naturally on narrow screens */
@media(min-width:900px){.fine span:last-child{white-space:nowrap}}

/* ==== reading-order lists (5 Aug 2026) ==== */
.rolist{list-style:none;margin:22px 0 30px;padding:0;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.rolist li{display:grid;grid-template-columns:46px 1fr auto;align-items:baseline;gap:0 14px;
  padding:11px 16px;border-bottom:1px solid var(--line);font-size:16px;background:#fff}
.rolist li:nth-child(odd){background:#fdfbf6}
.rolist li:last-child{border-bottom:0}
.ro-n{font-variant-numeric:tabular-nums;font-size:13px;font-weight:600;color:var(--gold,#b08a4e)}
.ro-t{font-weight:600;text-decoration:none;color:inherit}
.ro-t:hover{text-decoration:underline;text-decoration-color:var(--gold,#b08a4e);text-underline-offset:4px}
.ro-y{font-variant-numeric:tabular-nums;font-size:14px;color:#6b7278;white-space:nowrap}
.ro-s{grid-column:2/-1;font-size:13.5px;color:#6b7278;margin-top:2px}
.rohead{display:grid;grid-template-columns:46px 1fr auto;gap:0 14px;padding:9px 16px;
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#6b7278;
  background:#f6f1e7;border-bottom:1px solid var(--line)}
@media(max-width:560px){.rolist li{grid-template-columns:34px 1fr;font-size:15px}
  .rolist .ro-y{grid-column:2;font-size:13px}.rohead{display:none}}

/* phones: cover floats left, tag + rating sit beside it, then title/author/blurb
   clear underneath at full box width. the original RIGHT float left a dead gap and
   pushed .stars (inline-flex, cannot wrap internally) below the image. */
@media(max-width:560px){
  .entry-main{display:block}
  .entry-cover{float:left;margin:0 14px 10px 0;width:92px}
  .entry-body{display:block;width:auto}
  /* MUST stay inline-block: a block box next to a float slides UNDER the float and
     the pill background renders behind the cover. Inline-level boxes wrap correctly. */
  .entry .tag{display:inline-block;max-width:100%;margin:0 0 7px}
  .entry-body h3{clear:left;padding-top:4px}
  .entry-body p{clear:none}
  .stars{flex-wrap:wrap;gap:6px}
}

.ordband{margin-top:40px;border-top:1.5px solid var(--ink);padding-top:22px}
.ordband>span.k{display:block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:6px}
.ordband>h2{font-size:22px;margin:0 0 6px}
.ordband>p.lede{margin:0 0 18px;color:var(--ink2);font-size:15px;max-width:56ch}
.ordband ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 26px}
.ordband li{border-bottom:1px solid var(--line)}
.ordband a{display:flex;gap:12px;align-items:baseline;padding:11px 2px;text-decoration:none;color:var(--ink)}
.ordband a:hover{color:var(--green)}
.ordband a b{font-weight:600}
.ordband a span{color:var(--ink2);font-size:13.5px;margin-left:auto;text-align:right;white-space:nowrap}
@media(max-width:700px){.ordband ul{grid-template-columns:1fr}.ordband a span{display:none}}

/* long reading orders split into two columns on wide desktop - fills down, then across */
@media(min-width:1200px){
  .rowrap{display:grid;grid-template-columns:1fr 1fr;column-gap:52px;align-items:start}
  .rowrap>.rolist{margin:0;border:0;border-radius:0}
  .rowrap>.rolist+.rolist{border-left:1px dashed var(--line);margin-left:-26px;padding-left:26px}
  .pairsec{display:grid;grid-template-columns:1fr 1fr;column-gap:52px;align-items:stretch;
    margin-top:56px}
  .pairsec>div{display:flex;flex-direction:column}
  /* same divider treatment as the split lists: centred in the 52px gap */
  .pairsec>div+div{border-left:1px dashed var(--line);margin-left:-26px;padding-left:26px}
  .pairsec>div>h2{margin-top:0}
  /* Flush to the pixel. The figure must contribute ZERO to the row's natural height,
     or the grid sizes the row to the tall portrait image and nothing needs to shrink.
     height:0 + flex-grow does that: base size 0, then it fills whatever Marple leaves. */
  .pairsec>div>figure.scene{flex:1 1 auto;height:0;min-height:0;overflow:hidden;
    display:grid;grid-template-rows:1fr auto;margin-top:-10px;margin-bottom:0}
  .pairsec>div>figure.scene img{width:100%;height:100%;min-height:0;object-fit:cover;
    border-radius:10px;display:block}
  .pairsec>div>figure.scene figcaption{align-self:end;margin-bottom:0}
}

/* reading-order band nested inside the gold heritage panel */
.postband .ordband{max-width:1180px;margin:34px auto 0;padding:26px 24px 0;
  border-top:1px solid rgba(255,255,255,.30)}
.postband .ordband>span.k{color:rgba(255,255,255,.72)}
.postband .ordband>h2{color:#fff;text-align:center;font-size:22px}
.postband .ordband>p.lede{color:rgba(255,255,255,.90);text-align:center;max-width:60ch;
  margin:0 auto 20px;font-size:15px;line-height:1.6}
.postband .ordband li{border-bottom:1px solid rgba(255,255,255,.22)}
.postband .ordband a{color:#fff;text-decoration:none}
.postband .ordband a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.postband .ordband a span{color:rgba(255,255,255,.70)}

/* split reading-order lists: the wrapper carries the panel, the halves sit inside it */
.rowrap{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:22px 0 30px}
.rowrap>.rolist{margin:0;border:0;border-radius:0}
.rowrap>.rolist:first-child>li:last-child{border-bottom:1px solid var(--line)}
@media(max-width:1199px){.rowrap>.rolist:last-child>li:last-child{border-bottom:0}}

/* breathing room above the paired Marple / Tommy block on narrow screens too */
@media(max-width:1199px){.pairsec{margin-top:44px}}

/* Reading Room hub: sectioned card grids */
.sec-lede{color:var(--ink2);font-size:16px;max-width:62ch;margin:-16px 0 26px}
.sec .grid.g3+.sechd{margin-top:56px}
@media(max-width:760px){.sec .grid.g3+.sechd{margin-top:42px}.sec-lede{margin:-10px 0 20px}}

/* Reading Room: jump-to-section pills */
.qnav{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 34px}
.qnav a{display:inline-flex;align-items:baseline;gap:8px;font-family:'Inter',sans-serif;
  font-size:13.5px;font-weight:600;letter-spacing:.01em;text-decoration:none;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:8px 15px;
  transition:border-color .18s,color .18s}
.qnav a:hover{border-color:var(--gold);color:var(--green)}
.qnav a span{font-weight:600;font-size:12px;color:var(--ink2);font-variant-numeric:tabular-nums}
/* clear the sticky header when jumping */
.sechd[id]{scroll-margin-top:104px}
@media(max-width:760px){.qnav{gap:7px;margin-bottom:26px}.qnav a{font-size:13px;padding:7px 13px}}

/* clear the sticky header on in-page anchors */
h2[id]{scroll-margin-top:104px}

/* --- section headers: return .more to flow on narrow screens (was absolutely
   positioned at every width, so the h2 ran underneath it on phones) --- */
@media(max-width:600px){
  .sechd .more{position:static;display:inline-block;right:auto;bottom:auto;margin:10px 0 0}
  .sechd h2{padding-right:0}
}

/* --- deck / standfirst: tighten on mobile. Five variants existed at 1.5-1.65 with
   NO mobile override, so a 21px deck ran to ~31px leading on a phone. --- */
.door h3{line-height:1.15}
@media(max-width:600px){
  .lede{font-size:18px;line-height:1.4}
  .pagehead p.lede{font-size:16px;line-height:1.45}
  .pagehero .lede{font-size:16px;line-height:1.45}
  .ordband>p.lede,.postband .ordband>p.lede{font-size:15px;line-height:1.45}
}

/* ⛔ HERO ORPHANS - h1,h2,h3 already get Playfair but NO text-wrap, so hero
   headlines drop their last word onto a line of its own. Audited 9 Sep 2026:
   12 of 46 pages orphaned at 1280px, including every "Books Like X" guide.
   balance evens the line lengths; it is the right value for short headings
   (pretty is for body copy). See feedback_no_orphan_words. */
.post-hero h1,.pagehero h1,.hero-text h1,.shelf-hero-inner h1{text-wrap:balance}