/* The MICROHOME page (/microhome, 1 Oct 2026; apply-additions.py item 22, microhome_page.py, microhome.js). The
   four issues for the Meta ads: MICROHOME's own green from the home page's MICROHOME block for the first screen,
   then paper and the shop's light grey in turn, the shop's yellow for all four in one bag. The type stays in the
   shop's system: the page title (h1), section titles (h2 with the italic line), one h3 size, the lead, body text,
   one small grey line and the eyebrow labels; numbers at the size of the stories' facts. The side bar beside the
   issues (Lauris, 1 Oct 2026: "add sticky sidebar with all 4 options - add cart icon next to each or underneatch
   buy all four") is a white card over their bands, like the header's white; on tablets and phones it is a bar at
   the bottom of the screen, the book pages' buy bar (buy-bar.css). A price struck through is the four's own
   prices added up, beside the bundle's price (item 23). */
.mh-view{--mh-green:#1c231d;--mh-soft:#cbd0c8;--mh-gap:30px;--mh-rail:228px}
.mh-view h2{font-size:clamp(40px,4.3vw,70px)}
.mh-view h3{font-size:22px;line-height:1.25;letter-spacing:-.03em;font-weight:400;margin:10px 0 0;min-height:0}
.mh-view .button{margin:0}
.mh-view .button .mh-btn-price{font-size:14px;font-weight:700;line-height:inherit}
.mh-view .button .mh-btn-price span,.mh-view .button .mh-btn-price s{font-size:inherit;line-height:inherit}
/* A button's two states (microhome.js): Add to bag or In your bag; Buy all four or View bag once the four are in */
.mh-view .button .mh-lbl{font-size:inherit;line-height:inherit}
.mh-view .mh-in,.mh-view .mh-add.is-in .mh-out,.mh-view .mh-all-in,.mh-view.mh-full .mh-swap .mh-all-out{display:none}
.mh-view .mh-add.is-in .mh-in,.mh-view.mh-full .mh-swap .mh-all-in{display:inline}
.mh-view .button.dark.mh-add.is-in{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mh-view .button.dark.mh-add.is-in:hover{background:var(--surface)}
/* The note after a bag button (app.js's toast): above the bottom bar when it is up, within the screen */
body[data-microhome] .toast{width:max-content;max-width:calc(100vw - 32px);text-align:center;line-height:1.4}
.mh-was{font-weight:400;opacity:.62;text-decoration-thickness:1px}
.mh-was[hidden]{display:none}
.mh-save{display:inline-block;margin:0;padding:3px 8px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;line-height:1.5;letter-spacing:.02em}
.mh-save[hidden]{display:none}
.mh-lead{font-size:20px;line-height:1.55;letter-spacing:-.01em;margin:0}
.mh-small{font-size:13px;line-height:1.5;color:var(--muted)}
.mh-label{display:block;margin:0 0 8px;font-size:12px;letter-spacing:.095em;text-transform:uppercase;font-weight:700}
.mh-no{display:block;font-size:13px;line-height:1.5;color:var(--muted)}
.mh-textlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;font-size:14px;cursor:pointer;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.mh-textlink:hover{text-decoration-thickness:2px}
.mh-textlink span{font-size:16px;text-decoration:none}
.mh-head .eyebrow{margin:0}
.mh-head h2{margin:18px 0 0}
.mh-head .mh-lead{margin-top:24px;max-width:34em}
.mh-view :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.mh-hero :focus-visible,.mh-facts :focus-visible{outline-color:var(--yellow)}
.header nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px}

/* 1. The first screen: the title and Get all four beside the four covers */
.mh-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:center;padding:72px var(--pad) 84px;background:var(--mh-green);color:#fff}
.mh-hero h1{margin:22px 0 0;font-size:clamp(54px,5.7vw,94px);color:#fff}
.mh-hero .mh-lead{margin-top:26px;max-width:31em;color:var(--mh-soft)}
.mh-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;margin-top:34px}
.mh-meta{margin:20px 0 0;font-size:13px;line-height:1.5;color:var(--mh-soft)}
.mh-covers{list-style:none;margin:0;padding:0 0 36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.mh-covers li{position:relative;min-width:0}
.mh-covers li:nth-child(even){transform:translateY(36px)}
.mh-covers a{display:block}
.mh-covers img{display:block;width:100%;height:auto;box-shadow:0 22px 36px rgba(0,0,0,.38);transition:transform .2s}
.mh-covers a:hover img{transform:translateY(-4px)}
.mh-cover-no{display:none}

/* 2. Four numbers, still on the green */
.mh-facts{padding:0 var(--pad) 76px;background:var(--mh-green);color:#fff}
.mh-facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 var(--mh-gap);border-top:1px solid rgba(255,255,255,.24)}
.mh-facts li{padding-top:22px}
.mh-facts strong{display:block;font-size:clamp(42px,4.4vw,68px);font-weight:400;letter-spacing:-.065em;line-height:1}
.mh-facts span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--mh-soft)}

/* 3. The competition and its four rules */
.mh-brief,.mh-anatomy,.mh-steps,.mh-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--mh-gap)}
.mh-brief{background:var(--surface)}
.mh-brief .mh-head{grid-column:1/span 5}
.mh-brief-text{grid-column:7/span 6;align-self:end}
.mh-brief-text p{margin:0;font-size:17px;line-height:1.6}
.mh-brief-text p+p{margin-top:16px}
.mh-rules{grid-column:1/-1;list-style:none;margin:64px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--mh-gap)}
.mh-rules li,.mh-steps li{padding-top:20px;border-top:1px solid var(--ink)}
.mh-rules p,.mh-steps li p{margin:10px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

/* 4. How a page works: the page with its pins, and the key beside it */
.mh-anatomy .mh-head{grid-column:1/span 6}
.mh-anatomy-figure{grid-column:1/span 8;grid-row:2;margin:52px 0 0}
.mh-anatomy-img{position:relative;box-shadow:0 0 0 1px var(--line),0 20px 44px rgba(0,0,0,.12)}
.mh-anatomy-img img{display:block;width:100%;height:auto}
.mh-anatomy-figure figcaption{margin-top:12px}
.mh-pin,.mh-pin-key{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:14px;font-weight:700;line-height:1}
.mh-pin{position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #fff,0 6px 14px rgba(0,0,0,.28)}
.mh-key{grid-column:9/span 4;grid-row:2;list-style:none;margin:52px 0 0;padding:0}
.mh-key li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.mh-key li:first-child{padding-top:0;border-top:0}
.mh-key h3{margin:3px 0 0}
.mh-key p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--muted)}

/* 5. The four issues: the cover (it stays in view beside the words), the words, a few of its pages */
.mh-issues-head{padding-bottom:20px}
.mh-issue{padding:76px var(--pad) 92px;border-top:1px solid var(--line)}
.mh-issue-main{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 var(--mh-gap)}
.mh-issue:nth-of-type(odd){background:var(--surface);border-top:0}
.mh-issue-cover{grid-column:1/span 5;grid-row:1;align-self:start;position:sticky;top:122px}
.mh-issue-body{grid-column:7/span 6;grid-row:1}
.mh-issue:nth-of-type(even) .mh-issue-cover{grid-column:8/span 5}
.mh-issue:nth-of-type(even) .mh-issue-body{grid-column:1/span 6}
.mh-cover-btn{position:relative;display:block;width:100%;color:var(--ink)}
.mh-cover-btn img{display:block;width:100%;height:auto;box-shadow:0 20px 40px rgba(0,0,0,.18);transition:transform .2s}
.mh-cover-btn:hover img{transform:translateY(-4px)}
.mh-cover-look{position:absolute;right:14px;bottom:14px;padding:9px 13px;background:#fff;color:var(--ink);font-size:13px;line-height:1.2}
.mh-oncover{margin:18px 0 0;font-size:15px;line-height:1.55}
.mh-issue-body h2{margin:18px 0 0}
.mh-issue-body .mh-lead{margin-top:24px}
.mh-issue-facts{list-style:none;display:flex;flex-wrap:wrap;gap:6px 26px;margin:30px 0 0;padding:16px 0 0;border-top:1px solid var(--ink);font-size:15px;line-height:1.5}
.mh-issue-body>.mh-label{margin-top:38px}
.mh-picks{list-style:none;margin:0;padding:0}
.mh-picks li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.mh-pick-img{aspect-ratio:1;overflow:hidden;background:var(--line)}
.mh-pick-img img{display:block;width:100%;height:100%;object-fit:cover}
.mh-picks h3{margin:0}
.mh-picks p{margin:4px 0 0;font-size:15px;line-height:1.5}
.mh-extra{margin:0;padding:16px 0 0;border-top:1px solid var(--line);font-size:15px;line-height:1.55}
.mh-buy{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin-top:36px}
.mh-price{margin:0;font-size:clamp(30px,2.6vw,40px);letter-spacing:-.05em;line-height:1;white-space:nowrap}
.mh-price .mh-small{letter-spacing:0}
.mh-price .mh-was{font-size:.55em;letter-spacing:0}
.mh-strip{margin-top:64px}
.mh-strip ul{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.mh-strip li{min-width:0}
.mh-strip li p{margin:10px 0 0}
.mh-page{display:block;width:100%}
.mh-page img{display:block;width:100%;height:auto;box-shadow:0 0 0 1px var(--line),0 10px 24px rgba(0,0,0,.1);transition:transform .2s}
.mh-page:hover img{transform:translateY(-3px)}
.mh-strip>.mh-textlink{margin-top:16px}

/* The side bar: from 1101 px a white card that stays in view over the issues' left margin, as they scroll by */
.mh-rail{display:none}
.mh-rail-in{background:#fff;border:1px solid var(--line);box-shadow:0 18px 44px rgba(20,20,20,.1);padding:18px 18px 20px}
.mh-rail .mh-label{margin:0 0 6px;font-size:12px;color:var(--muted)}
.mh-rail-list{list-style:none;margin:0;padding:0}
.mh-rail-list li{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto 40px;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line)}
.mh-rail-list li::before{content:'';position:absolute;left:-18px;top:8px;bottom:8px;width:3px;background:var(--yellow);opacity:0;transition:opacity .2s}
.mh-rail-list li.is-here::before{opacity:1}
.mh-rail-link{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;color:inherit;text-decoration:none}
.mh-rail-link img{flex:0 0 auto;display:block;width:30px;height:auto;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.mh-rail-name{display:block;min-width:0}
.mh-rail-no{display:block;font-size:13px;font-weight:700;line-height:1.3}
.mh-rail-pages{display:block;font-size:12px;line-height:1.35;color:var(--muted);white-space:nowrap}
.mh-rail-link:hover .mh-rail-no{text-decoration:underline;text-underline-offset:3px}
.mh-rail-price{font-size:14px;white-space:nowrap}
.mh-bag{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:1px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;transition:background .18s,color .18s}
.mh-bag:hover{background:var(--yellow)}
.mh-bag .mh-bag-in,.mh-bag.is-in .mh-bag-add{display:none}
.mh-bag.is-in .mh-bag-in{display:block}
.mh-bag.is-in{background:var(--ink);color:#fff}
.mh-bag.is-in:hover{background:#343430}
.mh-rail-all{margin-top:4px;padding-top:14px;border-top:1px solid var(--ink)}
.mh-rail-sum{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0;font-size:15px}
.mh-rail-sum-price{font-size:24px;letter-spacing:-.04em;white-space:nowrap}
.mh-rail-sum-price .mh-was{font-size:15px;letter-spacing:0}
.mh-rail-all .mh-save{margin-top:8px}
.mh-view .mh-rail-buy{width:100%;min-height:48px;margin-top:14px;padding:0 16px;gap:12px}
@media(min-width:1101px){
  .mh-issues-body{display:grid}
  .mh-rail,.mh-issues-list{grid-area:1/1}
  .mh-rail{display:block;position:sticky;top:118px;z-index:3;align-self:start;width:calc(var(--pad) + var(--mh-rail));padding:40px 0 40px var(--pad);pointer-events:none}
  .mh-rail-in{pointer-events:auto}
  .mh-issue{padding-left:calc(var(--pad) + var(--mh-rail) + 48px)}
}
@media(min-width:1101px) and (max-width:1365px){
  .mh-issue .mh-issue-cover{grid-column:1/span 4}
  .mh-issue .mh-issue-body{grid-column:6/span 7}
  .mh-issue:nth-of-type(even) .mh-issue-cover{grid-column:9/span 4}
  .mh-issue:nth-of-type(even) .mh-issue-body{grid-column:1/span 7}
}

/* Tablets and phones: the bar at the bottom of the screen, the four covers and all four */
.mh-bar .buy-bar-row{gap:16px;min-height:72px;padding:10px var(--pad)}
.mh-bar-issues{display:flex;gap:10px;flex:1;min-width:0;list-style:none;margin:0;padding:0}
.mh-bar-issue{position:relative;display:block;width:40px;min-height:40px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer}
.mh-bar-issue img{display:block;width:40px;height:auto;box-shadow:0 2px 8px rgba(0,0,0,.22)}
.mh-bar-no{position:absolute;left:0;right:0;bottom:0;background:rgba(20,20,20,.78);color:#fff;font-size:12px;font-weight:700;line-height:16px;text-align:center}
.mh-bar-mark{position:absolute;top:-7px;right:-8px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 2px #fff;font-size:14px;font-weight:700;line-height:1}
.mh-bar-tick,.mh-bar-issue.is-in .mh-bar-plus{display:none}
.mh-bar-issue.is-in .mh-bar-tick{display:block;font-size:12px}
.mh-bar-issue.is-in .mh-bar-mark{background:var(--ink);color:#fff}
.mh-view .mh-bar-all{min-height:52px;padding:0 18px;gap:12px}
.mh-view .mh-bar-all span,.mh-view .mh-bar-all s{font-size:14px;line-height:1.2}
.mh-bar-price{font-weight:700;white-space:nowrap}
.mh-view .mh-bar-all .mh-bar-price span{font-size:16px}
@media(min-width:1101px){.mh-bar{display:none}}
@media(max-width:1100px){
  body[data-microhome] .bnf{padding-bottom:calc(64px + 80px)}
  body:has(.mh-bar.is-on) .bb-cookies,body:has(.mh-bar.is-on) .toast{bottom:calc(96px + env(safe-area-inset-bottom))}
}

/* 6. All four in one bag, on the shop's yellow */
.mh-all{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:40px 64px;align-items:center;background:var(--yellow)}
.mh-all-covers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mh-all-covers img{display:block;width:100%;height:auto;box-shadow:0 16px 28px rgba(0,0,0,.2)}
.mh-all .mh-lead{color:var(--ink)}

/* 7. How it works, 8. questions */
.mh-steps .mh-head,.mh-faq .mh-head{grid-column:1/span 4}
.mh-steps ol{grid-column:6/span 7;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--mh-gap)}
.mh-faq{background:var(--surface)}
.mh-qa{grid-column:6/span 7}
.mh-qa details{border-top:1px solid var(--ink)}
.mh-qa details:last-of-type{border-bottom:1px solid var(--ink)}
.mh-qa summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:44px;padding:18px 0;list-style:none;cursor:pointer;font-size:20px;line-height:1.35;letter-spacing:-.02em}
.mh-qa summary::-webkit-details-marker{display:none}
.mh-qa summary::after{content:'+';flex:none;font-size:24px;line-height:1;transition:transform .2s}
.mh-qa details[open] summary::after{transform:rotate(45deg)}
.mh-qa p{margin:0 0 22px;max-width:38em;font-size:16px;line-height:1.6;color:var(--muted)}
.mh-qa .mh-textlink{margin-top:26px}

@media(max-width:1100px){
  .mh-hero{gap:40px}
  .mh-issue-cover{grid-column:1/span 5}
  .mh-issue-body{grid-column:6/span 7}
  .mh-issue:nth-of-type(even) .mh-issue-cover{grid-column:8/span 5}
  .mh-issue:nth-of-type(even) .mh-issue-body{grid-column:1/span 7}
  .mh-anatomy-figure{grid-column:1/-1}
  .mh-key{grid-column:1/-1;grid-row:3;margin-top:36px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--mh-gap)}
  .mh-key li:first-child{padding-top:18px;border-top:1px solid var(--line)}
  .mh-steps .mh-head,.mh-faq .mh-head{grid-column:1/-1}
  .mh-steps ol,.mh-qa{grid-column:1/-1;margin-top:40px}
}
@media(max-width:860px){
  .mh-hero{grid-template-columns:1fr;padding-top:48px;padding-bottom:56px}
  .mh-covers{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding-bottom:0}
  .mh-covers li:nth-child(even){transform:none}
  .mh-facts ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:12px}
  .mh-brief .mh-head,.mh-brief-text,.mh-anatomy .mh-head{grid-column:1/-1}
  .mh-brief-text{margin-top:28px}
  .mh-rules{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:44px;row-gap:28px}
  .mh-issue-main{grid-template-columns:minmax(0,1fr)}
  .mh-issue .mh-issue-cover,.mh-issue:nth-of-type(even) .mh-issue-cover{grid-column:1;grid-row:1;position:static;max-width:520px}
  .mh-issue .mh-issue-body,.mh-issue:nth-of-type(even) .mh-issue-body{grid-column:1;grid-row:2;margin-top:36px}
  .mh-strip{margin-top:52px}
  .mh-all{grid-template-columns:1fr}
}
@media(max-width:700px){
  .mh-view{--mh-gap:20px}
  .mh-lead{font-size:18px}
  .mh-view h3{font-size:20px}
  .mh-hero h1{font-size:clamp(46px,13vw,60px)}
  .mh-view h2{font-size:clamp(36px,10.5vw,46px)}
  .mh-actions{gap:6px 24px}
  .mh-actions .button{width:100%}
  .mh-hero{gap:28px;padding-top:28px}
  .mh-covers{order:-1;display:flex;justify-content:center;gap:0;padding:0 0 4px}
  .mh-covers li{flex:0 0 34%;margin-left:-12%}
  .mh-covers li:first-child{margin-left:0}
  .mh-covers img{box-shadow:0 12px 22px rgba(0,0,0,.4)}
  .mh-hero .mh-lead{font-size:17px}
  .mh-facts{padding-bottom:52px}
  .mh-facts strong{font-size:45px}
  .mh-rules{grid-template-columns:1fr}
  .mh-anatomy-figure{margin-top:36px}
  .mh-pin,.mh-pin-key{width:24px;height:24px;font-size:12px}
  .mh-pin{box-shadow:0 0 0 2px #fff,0 4px 10px rgba(0,0,0,.28)}
  .mh-key{display:block}
  .mh-key li{grid-template-columns:24px minmax(0,1fr);gap:14px}
  .mh-key li:first-child{padding-top:0;border-top:0}
  .mh-issue{padding-top:56px;padding-bottom:64px}
  .mh-picks li{grid-template-columns:88px minmax(0,1fr);gap:16px}
  .mh-buy .button{flex:1 1 auto}
  .mh-bar .buy-bar-row{gap:12px;min-height:70px;padding:10px 16px}
  .mh-bar-issues{gap:8px}
  .mh-view .mh-bar-all{padding:0 14px;gap:8px}
  body[data-microhome] .bnf{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
  body:has(.mh-bar.is-on) .bb-cookies,body:has(.mh-bar.is-on) .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  .mh-strip ul{display:flex;gap:14px;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad));padding:0 var(--pad) 6px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);scrollbar-width:none}
  .mh-strip ul::-webkit-scrollbar{display:none}
  .mh-strip li{flex:0 0 78%;scroll-snap-align:start}
  .mh-all-covers{gap:10px}
  .mh-steps ol{grid-template-columns:1fr;row-gap:24px}
  .mh-qa summary{font-size:18px}
}
@media(max-width:400px){.mh-bar-price .mh-was{display:none}}
@media(prefers-reduced-motion:reduce){.mh-covers img,.mh-cover-btn img,.mh-page img,.mh-qa summary::after,.mh-rail-list li::before,.mh-bag{transition:none}}
@media print{.mh-actions,.mh-buy,.mh-rail,.mh-bar{display:none!important}}