/* Lagerlöfs Magasin
   Layout: the home page is a full-bleed magazine cover; "Bostäder" opens a 3D page-flip
   catalogue (spreads on desktop, single pages on phones). All type is sized in container
   units (cqw) so every page keeps its proportions at any screen size. */
:root{
  --ink:#16130f;
  --paper:#f6f2ea;
  --paper-2:#ebe4d8;
  --mute:#7a7064;
  --claret:#7a1b2a;
  --table:#d9d3c8;
  --table-ink:#2a251f;
  --table-line:rgba(42,37,31,.18);
  --f-display:"Bodoni Moda","Didot","Bodoni 72","Playfair Display",Georgia,serif;
  --f-label:"Jost","Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  --f-body:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --dur:.9s;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--table:#141210;--table-ink:#e9e2d6;--table-line:rgba(233,226,214,.16);color-scheme:dark}
}
:root[data-theme="dark"]{--table:#141210;--table-ink:#e9e2d6;--table-line:rgba(233,226,214,.16);color-scheme:dark}
@media (prefers-reduced-motion: reduce){:root{--dur:.01s}}

body.lgm-home{background:var(--table);color:var(--table-ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased}
body.lgm-reading{overflow:hidden}
.lgm *,.lgm *::before,.lgm *::after{box-sizing:border-box}
.lgm [hidden]{display:none!important}
.lgm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.lgm a{color:inherit}
.lgm button:focus-visible,.lgm a:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- Cover (home) ---------- */
.cover{
  position:relative;min-height:100vh;min-height:100svh;z-index:5;color:#fff;
  background:#3d4236 center/cover no-repeat;
  display:grid;grid-template-rows:auto auto 1fr;
  padding-top:max(14px,env(safe-area-inset-top,0px));
  padding-bottom:max(18px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  transition:opacity .7s ease, transform .8s cubic-bezier(.6,0,.2,1);
}
.cover::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,8,.55) 0%,rgba(10,10,8,.08) 36%,rgba(10,10,8,.05) 50%,rgba(10,10,8,.65) 100%)}
.cover>*{position:relative}
.cover.is-leaving{opacity:0;transform:scale(.92);pointer-events:none}
.cover-menu{position:absolute;z-index:6;top:52px;right:max(16px,env(safe-area-inset-right,0px));background:var(--paper);color:var(--ink);padding:18px 24px;min-width:240px;box-shadow:0 18px 40px rgba(0,0,0,.3)}
.cover-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.cover-menu a{display:block;padding:8px 0;font:500 13px/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;color:var(--ink)}
.cover-menu a:hover{color:var(--claret)}
.cover-nav{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  font:500 12px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase}
.cover-nav div{display:flex;gap:10px 22px;flex-wrap:wrap}
.cover-nav a,.cover-nav button{padding:6px 0;border-bottom:1px solid transparent;text-decoration:none;transition:border-color .2s;letter-spacing:inherit;text-transform:inherit}
.cover-nav a:hover,.cover-nav button:hover{border-color:#fff}
.dateline{display:flex;justify-content:space-between;margin-top:clamp(14px,3vh,34px);
  font:500 11px/1 var(--f-label);letter-spacing:.3em;text-transform:uppercase;opacity:.9}
.masthead{
  font-family:var(--f-display);font-weight:800;font-optical-sizing:auto;
  font-size:min(16.2vw,30vh);line-height:.8;letter-spacing:-.025em;text-align:center;
  margin:.14em 0 0;white-space:nowrap;
}
.masthead img{display:block;width:min(92vw,1200px);height:auto;margin:0 auto;filter:brightness(0) invert(1);animation:lgm-mast 1.4s cubic-bezier(.2,.7,.2,1) both}
@keyframes lgm-mast{from{transform:scale(1.03);opacity:.85}to{transform:none;opacity:1}}
@media (prefers-reduced-motion: reduce){.masthead img{animation:none}}
.cover-body{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;min-height:0}
.lines{display:grid;gap:clamp(14px,2.4vh,26px);max-width:32rem}
.cl{margin:0;display:grid;gap:6px}
.cl-k{font:600 11px/1 var(--f-label);letter-spacing:.28em;text-transform:uppercase}
.cl-big{font:700 clamp(30px,4.6vw,64px)/.95 var(--f-display);letter-spacing:-.01em;text-wrap:balance}
.cl-big em{font-weight:400}
.cl-m{font:italic 400 clamp(17px,1.7vw,23px)/1.2 var(--f-display);text-wrap:balance;max-width:22em}
.cover-side{display:grid;justify-items:end;gap:18px}
.lgm .open{display:inline-flex;align-items:center;gap:14px;background:var(--paper);color:var(--ink)!important;
  font:600 12px/1 var(--f-label)!important;letter-spacing:.24em!important;text-transform:uppercase;padding:18px 24px!important;
  transition:background .25s,color .25s}
.lgm .open:hover{background:var(--claret);color:var(--paper)!important}
.open span{font-size:16px;letter-spacing:0;transition:transform .25s}
.open:hover span{transform:translateX(4px)}
.issue{display:flex;align-items:flex-end;gap:12px;background:#fff;color:#111;padding:8px 10px 6px}
.issue svg{width:84px;height:34px;display:block}
.issue p{margin:0;font:500 9px/1.3 var(--f-label);letter-spacing:.14em;text-transform:uppercase}
.issue b{display:block;font:700 15px/1 var(--f-display);letter-spacing:0}
@media (max-width:640px){
  .dateline span:first-child,.dateline span:last-child{display:none}
  .dateline{justify-content:center}
  .cover-nav{justify-content:center}
  .cover-nav div{justify-content:center;gap:8px 16px}
  .cover-body{flex-direction:column;align-items:stretch}
  .cover-side{justify-items:stretch}
  .cover-side .issue{display:none}
  .open{justify-content:space-between}
  .masthead{font-size:15vw;margin-top:.25em}
}

/* ---------- Reader ---------- */
.reader{position:fixed;inset:0;z-index:50;display:grid;grid-template-rows:auto 1fr auto;
  padding-top:max(10px,env(safe-area-inset-top,0px));
  padding-bottom:max(10px,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  background:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--table) 88%,#fff) 0%,var(--table) 70%)}
.r-bar,.r-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font:500 11px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase}
.r-bar{padding-bottom:10px;border-bottom:1px solid var(--table-line)}
.r-mast{font:800 20px/1 var(--f-display);letter-spacing:-.01em;text-transform:none}
.r-mast i{font-weight:400;margin-left:.3em}
.r-btn{padding:10px 0;white-space:nowrap;letter-spacing:inherit!important;text-transform:inherit}
.r-btn:hover{text-decoration:underline;text-underline-offset:4px}
.r-count{white-space:nowrap;font-variant-numeric:tabular-nums;min-width:9em;text-align:right}
.r-nav{padding-top:10px;border-top:1px solid var(--table-line)}
.r-nav button{padding:12px 16px;border:1px solid var(--table-line);transition:background .2s,color .2s;letter-spacing:inherit!important;text-transform:inherit}
.r-nav button:hover:not(:disabled){background:var(--table-ink);color:var(--table)}
.r-nav button:disabled{opacity:.35;cursor:default}
.r-hint{opacity:.6;text-align:center}
@media (max-width:640px){.r-hint{display:none}.r-mast{font-size:15px}.r-mast i{display:none}.r-bar{letter-spacing:.12em}.r-count{min-width:0}}

.stage{position:relative;display:grid;place-items:center;perspective:2800px;min-height:0;overflow:visible}
.book{position:relative;transform-style:preserve-3d;transition:transform var(--dur) cubic-bezier(.645,.045,.355,1),opacity .6s ease;cursor:pointer}
.book.arriving{opacity:0;transform:translateX(-25%) scale(.86)!important}
.book.single.arriving{transform:scale(.86)!important}
.book::before{content:"";position:absolute;inset:2% 1% -2.5%;background:rgba(0,0,0,.35);filter:blur(22px);transform:translateZ(-1px);pointer-events:none}
.leaf{position:absolute;top:0;left:50%;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;
  transition:transform var(--dur) cubic-bezier(.645,.045,.355,1)}
.leaf.flipped{transform:rotateY(-180deg)}
.single .leaf{left:0;width:100%;transition:transform var(--dur) cubic-bezier(.645,.045,.355,1),opacity .35s ease calc(var(--dur)*.45)}
.single .leaf.flipped{opacity:0;pointer-events:none}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;
  background:var(--paper);color:var(--ink);container-type:size}
.face.back{transform:rotateY(180deg)}
.face::after{content:"";position:absolute;top:0;bottom:0;width:12%;pointer-events:none;z-index:3}
.face.front::after{left:0;background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(0,0,0,.06) 35%,transparent)}
.face.back::after{right:0;background:linear-gradient(270deg,rgba(0,0,0,.2),rgba(0,0,0,.05) 35%,transparent)}
.single .face.front::after{width:4%}
.folio{position:absolute;bottom:3.6cqw;font:500 2cqw/1 var(--f-label);letter-spacing:.2em;z-index:2;font-variant-numeric:tabular-nums}
.face.front .folio{right:7cqw}.face.back .folio{left:7cqw}
.single .face .folio{left:auto;right:7cqw}

/* Page: mini cover */
.p-cover{position:absolute;inset:0;background:#3d4236 center/cover;color:#fff;padding:5cqw;display:flex;flex-direction:column}
.p-cover::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),transparent 34%,transparent 55%,rgba(0,0,0,.65))}
.p-cover>*{position:relative}
.p-cover .dl{display:flex;justify-content:space-between;font:500 1.9cqw/1 var(--f-label);letter-spacing:.28em;text-transform:uppercase}
.p-cover .m{margin-top:4cqw}
.p-cover .m img,.p-backcover .m img{display:block;width:86cqw;height:auto;margin:0 auto;filter:brightness(0) invert(1)}
.p-backcover .m img{width:60cqw}
.p-cover .cls{margin-top:auto;display:grid;gap:3cqw;max-width:72%}
.p-cover .k{font:600 1.9cqw/1 var(--f-label);letter-spacing:.28em;text-transform:uppercase;display:block;margin-bottom:1.2cqw}
.p-cover .b{font:700 8cqw/.95 var(--f-display);display:block}
.p-cover .b em{font-weight:400}
.p-cover .s{font:italic 400 3.6cqw/1.2 var(--f-display);display:block}
.p-cover .issue{position:absolute;right:5cqw;bottom:5cqw;padding:1.2cqw 1.4cqw 1cqw}
.p-cover .issue svg{width:15cqw;height:6cqw}
.p-cover .issue p{font-size:1.5cqw}.p-cover .issue b{font-size:2.6cqw}

/* Page: editorial text pages */
.p-text{position:absolute;inset:0;padding:8cqw 8cqw 10cqw;display:flex;flex-direction:column;gap:3.4cqw}
.kick{display:flex;justify-content:space-between;gap:2cqw;border-bottom:.25cqw solid var(--ink);padding-bottom:2cqw;
  font:500 2.1cqw/1.2 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.kick span:last-child{color:var(--mute);text-align:right}
.h-big{margin:0;font:800 11cqw/.92 var(--f-display);letter-spacing:-.02em;text-wrap:balance}
.h-big em{font-weight:400}
.dek{margin:0;font:italic 400 4.6cqw/1.24 var(--f-display);text-wrap:pretty}
.copy{margin:0;font:400 3.05cqw/1.52 var(--f-body);hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
.copy+.copy{margin-top:-1.4cqw;text-indent:4cqw}
.drop{float:left;font:800 11.4cqw/.78 var(--f-display);margin:.8cqw 1.8cqw 0 0;color:var(--claret)}
.sig{margin:0;font:italic 400 3.6cqw/1.3 var(--f-display)}
.facts{margin:auto 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:.25cqw solid var(--ink)}
.facts div{padding:2cqw 2cqw 2cqw 0;border-bottom:.12cqw solid rgba(22,19,15,.2);min-width:0}
.facts dt{font:500 1.8cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.facts dd{margin:1.2cqw 0 0;font:600 3.2cqw/1.15 var(--f-display);font-variant-numeric:lining-nums;overflow-wrap:anywhere}
.buy{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2cqw 3cqw} /* a long price wraps the buttons to their own row instead of pushing them off the page */
.buy .lbl{display:block;font:500 1.8cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:1.2cqw}
.buy b{font:700 5.2cqw/1 var(--f-display);font-variant-numeric:lining-nums;white-space:nowrap}
.buy b.soft{font:italic 400 3.8cqw/1.1 var(--f-display);white-space:normal}
.cta{display:inline-block;background:var(--ink);color:var(--paper)!important;font:600 2cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;padding:2.6cqw 3.6cqw;white-space:nowrap;text-decoration:none;transition:background .2s}
.cta:hover{background:var(--claret)}

/* Page: photo */
.p-photo{position:absolute;inset:0;background-color:#2a2622;background-size:cover;background-position:center;color:#fff}
.p-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.05) 42%,transparent 66%,rgba(0,0,0,.55))}
.ph-head{position:absolute;top:7cqw;left:7cqw;right:7cqw}
.ph-k{font:600 2.2cqw/1 var(--f-label);letter-spacing:.3em;text-transform:uppercase}
.ph-t{margin:2.4cqw 0 0;font:800 12cqw/.92 var(--f-display);letter-spacing:-.025em;text-wrap:balance;overflow-wrap:anywhere}
.ph-t em{font-weight:400;display:block}
.ph-cap{position:absolute;left:7cqw;right:22cqw;bottom:8cqw;margin:0;font:italic 400 3.2cqw/1.3 var(--f-display)}
.ph-cap a{text-decoration:none;border-bottom:.15cqw solid rgba(255,255,255,.7)}
.p-photo .folio{color:#fff}

/* Page: contents */
.toc{display:grid;margin:0;padding:0;list-style:none}
.toc li{border-bottom:.12cqw solid rgba(22,19,15,.2)}
.toc button{display:grid;grid-template-columns:11cqw minmax(0,1fr);gap:3cqw;align-items:baseline;width:100%;text-align:left;padding:2.4cqw 0}
.toc .n{font:800 7cqw/1 var(--f-display);color:var(--claret);font-variant-numeric:lining-nums}
.toc .t{font:700 4.3cqw/1.1 var(--f-display);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc .t em{font-weight:400}
.toc .w{display:block;margin-top:1cqw;font:500 1.9cqw/1.2 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc button:hover .t{text-decoration:underline;text-decoration-thickness:.2cqw;text-underline-offset:.8cqw}
.note{margin:auto 0 0;font:400 2.2cqw/1.4 var(--f-label);color:var(--mute)}

/* Page: sell (claret) */
.p-sell{background:var(--claret);color:var(--paper)}
.p-sell .kick{border-color:var(--paper)}
.p-sell .kick span:last-child{color:rgba(246,242,234,.7)}
.steps{list-style:none;margin:0;padding:0;display:grid;border-top:.25cqw solid var(--paper)}
.steps li{display:grid;grid-template-columns:9cqw 1fr;padding:2.4cqw 0;border-bottom:.12cqw solid rgba(246,242,234,.3)}
.steps b{font:800 5cqw/1 var(--f-display)}
.steps span{font:400 3cqw/1.4 var(--f-body)}
.steps strong{display:block;font:600 1.9cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;margin-bottom:1cqw}
.ctas{display:flex;gap:2cqw;flex-wrap:wrap;margin-top:auto}
.p-sell .cta{background:var(--paper);color:var(--claret)!important}
.p-sell .cta:hover{background:var(--ink);color:var(--paper)!important}
.cta.ghost{background:transparent;border:.2cqw solid currentColor;color:inherit!important}

/* Page: register */
.reg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4cqw 3cqw;margin:0;padding:0;list-style:none}
.reg button{display:grid;gap:1.4cqw;text-align:left;width:100%;min-width:0}
.reg .th{aspect-ratio:4/3;background:#2a2622 center/cover}
.reg .t{font:700 3cqw/1.1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reg .w{font:500 1.7cqw/1.25 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.reg button:hover .th{filter:brightness(1.08)}
/* dev6.31: status on the thumbnails of the contents and the register (Till salu / Kommande / Bokad) */
.reg .th,.toc-tiles .th{position:relative}
.reg .th .st,.toc-tiles .th .st{position:absolute;top:1.2cqw;left:1.2cqw;padding:.9cqw 1.1cqw .75cqw;font:600 1.75cqw/1 var(--f-label);letter-spacing:.16em;text-transform:uppercase;background:var(--paper);color:var(--ink)}
.reg .th .st.is-kommande,.toc-tiles .th .st.is-kommande{background:var(--claret);color:#fff}
.reg .th .st.is-bokad,.toc-tiles .th .st.is-bokad{background:var(--ink);color:var(--paper)}

/* Page: back cover / blank */
.p-backcover{position:absolute;inset:0;background:var(--ink);color:var(--paper);display:grid;place-content:center;justify-items:center;gap:3cqw;text-align:center}
.p-backcover .m{line-height:0}
.p-backcover p{margin:0;font:500 2.1cqw/1.4 var(--f-label);letter-spacing:.3em;text-transform:uppercase;opacity:.75}
.p-backcover .issue{margin-top:6cqw;padding:1.2cqw 1.4cqw 1cqw}
.p-backcover .issue svg{width:15cqw;height:6cqw}
.p-backcover .issue p{font-size:1.5cqw;opacity:1;color:#111}.p-backcover .issue b{font-size:2.6cqw}
.blank{background:linear-gradient(270deg,var(--paper-2),var(--paper))}

.toast{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));transform:translate(-50%,10px);opacity:0;
  background:var(--table-ink);color:var(--table);font:500 13px/1.4 var(--f-label);padding:12px 18px;max-width:min(92vw,420px);
  text-align:center;transition:opacity .25s,transform .25s;pointer-events:none;z-index:20}
.toast.on{opacity:1;transform:translate(-50%,0)}
.lgm-noscript{padding:24px;font:16px/1.5 var(--f-body)}

/* WordPress admin bar (logged-in preview) sits above the fixed cover and reader. */
.admin-bar .cover,.admin-bar .reader{top:32px}
@media (max-width:782px){.admin-bar .cover,.admin-bar .reader{top:46px}}

/* Articles list page */
.arts{list-style:none;margin:0;padding:0;border-top:.25cqw solid var(--ink)}
.arts li{border-bottom:.12cqw solid rgba(22,19,15,.2)}
.arts a{display:grid;gap:1cqw;padding:2.3cqw 0;text-decoration:none}
.arts .t{font:600 3.6cqw/1.15 var(--f-display)}
.arts .w{font:500 1.8cqw/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.arts a:hover .t{text-decoration:underline;text-underline-offset:.6cqw}
.lgm-home .lgm-foot{position:relative;z-index:5}

/* Design round (dev6): cover */
.cl-m.is-caps{font:500 clamp(12px,1.1vw,14px)/1.6 var(--f-label);font-style:normal;letter-spacing:.14em}
.cl-m{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.masthead img{width:min(84vw,1080px)}
@media (max-width:640px){
  .cover-nav .cover-nav-link{display:none}
  .cover-nav{justify-content:space-between}
  .cover-nav div{gap:8px 16px}
  .cover-nav a,.cover-nav button{padding:12px 0;min-height:44px}
}

/* Masthead style (setting "Omslagets namnlogga"): real logo or LAGERLÖFS set in Bodoni */
.mast-logo .mh-type,.mast-type .mh-logo{display:none}
.mh-type{display:block;font-family:var(--f-display);font-weight:800;font-optical-sizing:auto;letter-spacing:-.025em;line-height:.8;text-transform:uppercase;white-space:nowrap}
.mh-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.mast-type .masthead{font-size:min(16.2vw,30vh);margin-top:.1em}
.p-cover .m .mh-type{font-size:16cqw;text-align:center;color:#fff}.p-backcover .m .mh-type{font-size:11cqw;text-align:center}
.mast-type .masthead{max-width:100%;overflow:hidden}
@media (max-width:640px){.mast-type .masthead{font-size:13.6vw;margin-top:.35em}}
.mast-type .masthead{padding-top:.2em}

/* Menu panel motion (lgmPanel): short fade + small movement; closing a little faster; none for reduced motion. */
.lgm-menu,.cover-menu{opacity:0;transform:translateY(-6px);transition:opacity .24s ease,transform .26s cubic-bezier(.2,.7,.2,1)}
.lgm-menu.is-open,.cover-menu.is-open{opacity:1;transform:none}
.lgm-menu.is-closing,.cover-menu.is-closing{transition-duration:.18s,.18s;transition-timing-function:ease-in,ease-in}
@media (prefers-reduced-motion: reduce){.lgm-menu,.cover-menu{transition:none;transform:none}.lgm-menu:not(.is-open),.cover-menu:not(.is-open){opacity:1}}

/* Cover links that open the book: a real link (fallback), styled as before; no double-tap zoom delay. */
.lgm .open,.cover-nav [data-open]{text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
/* Book on touch screens: horizontal swipes turn pages and are not taken by the browser (swipe-to-go-back /
   horizontal overscroll); vertical scrolling and pinch zoom stay with the browser. */
.reader .stage,.reader .book{touch-action:pan-y pinch-zoom}
body.lgm-reading,html:has(body.lgm-reading){overscroll-behavior:none}

/* Cover line for the magazine's reportage (Alexander, oktober 2026): typography over the existing cover
   picture, right side above "Öppna bostäderna" on desktop; its own row under the masthead on mobile.
   A soft scrim keeps white type readable on light pictures. The whole teaser is one link. */
.cover-story{display:grid;justify-items:end;text-align:right;gap:6px;max-width:19rem;padding:14px 16px 12px;margin-bottom:6px;color:#fff!important;text-decoration:none;
  background:linear-gradient(180deg,rgba(12,10,8,.28),rgba(12,10,8,.46));-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);text-shadow:0 1px 14px rgba(0,0,0,.35);
  border-top:1px solid rgba(255,255,255,.7);touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cs-k{font:600 11px/1 var(--f-label);letter-spacing:.3em;text-transform:uppercase}
.cs-t{font:700 clamp(30px,3.4vw,46px)/.95 var(--f-display);letter-spacing:-.015em;text-wrap:balance}
.cs-s{font:italic 400 clamp(16px,1.4vw,20px)/1.2 var(--f-display);text-wrap:balance}
.cs-l{margin-top:6px;font:600 11px/1 var(--f-label);letter-spacing:.22em;text-transform:uppercase;padding-bottom:4px;border-bottom:1px solid rgba(255,255,255,.55);transition:border-color .2s}
.cs-l span{display:inline-block;transition:transform .25s}
.cover-story:hover .cs-l,.cover-story:focus-visible .cs-l{border-color:#fff}
.cover-story:hover .cs-l span{transform:translateX(4px)}
.cover-story:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media (max-width:640px){
  .cover-body{justify-content:flex-start}
  .cover-side{display:contents}
  .cover-story{order:-1;justify-items:start;text-align:left;max-width:none;margin:2px 0 0;padding:12px 14px 10px;gap:4px}
  .cover-body .lines{margin-top:auto}
  .cover-body .open{margin-top:clamp(14px,2.4vh,26px)}
  .cs-t{font-size:clamp(26px,8vw,34px)}
  .cs-s{font-size:15px}
}
@media (max-width:640px) and (max-height:700px){.cs-s{display:none}.cover-story{padding:10px 12px 8px}}
@media (prefers-reduced-motion: reduce){.cs-l span,.cs-l{transition:none}}
@media (max-width:640px){.cover-story{background:rgba(12,10,8,.6)}}

/* ---------- The issue in departments (24 Oct 2026): contents spread, feature, reportage, styling, tools ---------- */
/* reader bar tools */
.r-tools{display:flex;align-items:center;gap:clamp(10px,2vw,26px)}
.r-tools .r-btn[aria-expanded="true"]{text-decoration:underline;text-underline-offset:4px}
.r-n{display:inline-block;min-width:1.6em;padding:2px 6px;margin-left:4px;border:1px solid currentColor;border-radius:999px;text-align:center;font-variant-numeric:tabular-nums;font-size:.92em}
@media (max-width:820px){.r-mast{display:none}.r-tools{gap:12px}}
@media (max-width:480px){#lgm-toc-btn{display:none}.r-count{display:none}}
/* page strip */
.r-strip{border-top:1px solid var(--table-line);padding:10px 0 0}
.r-strip ol{display:flex;gap:10px;margin:0;padding:0 0 8px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.r-strip li{flex:0 0 auto;scroll-snap-align:center}
.r-strip button{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;width:150px;text-align:left;padding:6px;border:1px solid transparent}
.r-strip button[aria-current]{border-color:var(--table-ink)}
.r-strip button:hover{background:rgba(0,0,0,.05)}
.r-strip .th{grid-row:1/span 2;width:44px;height:58px;background:#d8d0c3 center/cover}
.r-strip .n{font:600 11px/1 var(--f-label);letter-spacing:.16em}
.r-strip .t{font:500 13px/1.2 var(--f-display);text-transform:none;letter-spacing:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* saved homes */
.r-saved{border-top:1px solid var(--table-line);padding:12px 0 6px;max-height:34vh;overflow:auto}
.r-saved-h{margin:0 0 8px;font:600 12px/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase}
.r-saved ul{list-style:none;margin:0;padding:0}
.r-saved li{display:flex;align-items:center;gap:14px;padding:8px 0;border-bottom:1px solid var(--table-line);text-transform:none;letter-spacing:0}
.r-saved li>button:first-child,.r-saved li>span.t{flex:1;text-align:left;display:flex;gap:12px;align-items:baseline;min-width:0}
.r-saved .t{font:500 17px/1.2 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-saved .w,.r-saved a,.r-saved .rm{font:500 11px/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.r-saved a{text-decoration:underline;text-underline-offset:3px}
.r-saved .rm{opacity:.7}
.r-saved-empty{margin:0;font:400 15px/1.5 var(--f-body);text-transform:none;letter-spacing:0;max-width:56ch}
/* contents spread */
.p-toc{gap:2.6cqw}
.toc-depts button{padding:1.9cqw 0}
.toc-depts .k{display:block;font:600 1.7cqw/1 var(--f-label);letter-spacing:.24em;text-transform:uppercase;color:var(--claret);margin-bottom:1cqw}
.toc-depts .t{font-size:3.9cqw}
.toc-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3.4cqw 2.6cqw}
.toc-tiles button{display:grid;gap:1.1cqw;text-align:left;width:100%;min-width:0}
.toc-tiles .th{position:relative;aspect-ratio:4/5;background:#2a2622 center/cover;display:block;overflow:hidden}
.toc-tiles .th .n{position:absolute;left:1.6cqw;bottom:1.2cqw;font:800 6cqw/1 var(--f-display);color:#fff;text-shadow:0 .3cqw 2cqw rgba(0,0,0,.5);font-variant-numeric:lining-nums}
.toc-tiles .more .th{background:var(--claret)}
.toc-tiles .t{font:700 2.7cqw/1.1 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-tiles .w{font:500 1.6cqw/1.2 var(--f-label);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toc-tiles button:hover .th{filter:brightness(1.08)}
.toc-tiles button:hover .t{text-decoration:underline;text-underline-offset:.6cqw}
.p-toc .note{margin-top:auto}
/* Månadens bostad */
.p-photo.is-feature .ph-k{color:#f3d9c6}
.p-feature .duo{display:grid;grid-template-columns:1fr 1fr;gap:2cqw}
.p-feature .duo span{aspect-ratio:4/3;background:#2a2622 center/cover}
.p-feature .facts{grid-template-columns:repeat(3,1fr)}
/* save button */
.buy-r{display:flex;align-items:center;gap:2.4cqw;margin-left:auto}
.plan-row{margin:0;text-align:right}
.plan-link{display:inline-block;font:600 1.9cqw/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;padding:1.8cqw 0 0;white-space:nowrap;color:var(--claret)!important;text-decoration:underline;text-underline-offset:.5cqw}
.save{font:600 1.9cqw/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;padding:2.4cqw 0;white-space:nowrap;color:var(--ink)}
.save[aria-pressed="true"]{color:var(--claret)}
.save span{font-size:1.25em;letter-spacing:0}
/* reportage spread */
.p-rep::before{background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.08) 46%,transparent 70%,rgba(0,0,0,.35))}
.ph-note{position:absolute;left:7cqw;bottom:8cqw;margin:0;font:500 1.7cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;opacity:.85}
.p-rep-text .dek{font-size:5.4cqw}
.pull{margin:1cqw 0;padding:3cqw 0;border-top:.25cqw solid var(--ink);border-bottom:.12cqw solid rgba(22,19,15,.25);font:italic 400 5.2cqw/1.18 var(--f-display);color:var(--claret);text-wrap:balance}
/* Interiör & styling mosaic */
.p-mosaic{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.2cqw;background:var(--paper)}
.p-mosaic.n2{grid-template-rows:1fr}
.p-mosaic.n3 span:first-child{grid-row:1/span 2}
.p-mosaic span{background:#2a2622 center/cover}
.mo-head{position:absolute;top:6cqw;left:6cqw;background:var(--paper);padding:2cqw 3cqw}
.mo-head .ph-k{color:var(--ink)}
.sty-facts{list-style:none;margin:0;padding:0;border-top:.25cqw solid var(--ink)}
.sty-facts li{padding:1.9cqw 0;border-bottom:.12cqw solid rgba(22,19,15,.2);font:600 2.9cqw/1.2 var(--f-display)}
.sty-facts li::before{content:"— ";color:var(--claret)}
/* contents spread: fits eight departments and nine pictures on one page each */
.p-toc .h-big{font-size:8.6cqw}
.toc-depts button{grid-template-columns:9cqw minmax(0,1fr);gap:2.4cqw;padding:1.35cqw 0}
.toc-depts .n{font-size:5.4cqw}
.toc-depts .k{font-size:1.5cqw;margin-bottom:.7cqw}
.toc-depts .t{font-size:3.3cqw}
.toc-depts .w{font-size:1.5cqw;margin-top:.6cqw}
.toc-tiles{gap:2.6cqw 2.4cqw}
.toc-tiles .th{aspect-ratio:5/4}
.toc-tiles .th .n{font-size:5cqw}
.toc-tiles button{gap:.8cqw}
.toc-tiles .t{font-size:2.4cqw}
.toc-tiles .w{font-size:1.4cqw}
.p-toc .note{font-size:1.7cqw}
/* sold homes in the book are links (to their pages), not page jumps: same card layout as the register (was unstyled) */
.reg a{display:grid;gap:1.4cqw;text-align:left;width:100%;min-width:0;text-decoration:none;color:inherit}
.reg a .th{display:block}
.reg a:hover .th{filter:brightness(1.08)}
.reg a:hover .t{text-decoration:underline;text-underline-offset:.6cqw}
.r-strip ol{position:relative} /* offsetLeft of the items is measured from the strip */
.reader>*{min-width:0}.r-strip,.r-saved{max-width:100%;overflow-x:hidden} /* the page strip scrolls inside itself, it never widens the reader */
.toc-depts .w{display:none} /* nine departments: section name + title fit on the page */ .toc-depts button{padding:1.25cqw 0}
/* Kvarteren spread (pages 3–4): the claret map and its addresses; the map itself is styled in site.css */
.p-map{gap:2.8cqw}
.p-map .h-big{font-size:8.2cqw}
.p-map .lgm-kmap{--kp:5.6cqw;--kf:2.2cqw;box-shadow:none;margin:1cqw -8cqw 0} /* bleeds to the page edges */
.p-map .klegend{display:flex;gap:4cqw;margin:0;font:500 1.6cqw/1 var(--f-label);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.p-map .klegend i{display:inline-block;width:2.4cqw;height:2.4cqw;border-radius:50%;vertical-align:-.6cqw;margin-right:1.2cqw;background:var(--paper);box-shadow:0 0 0 .3cqw var(--claret)}
.p-map .klegend .ap i{background:var(--claret);box-shadow:inset 0 0 0 .35cqw var(--paper),0 0 0 .2cqw var(--claret)}
.p-map .lgm-kmap-n{font-size:2cqw}
.p-map .lgm-kpin{border:0;padding:0;cursor:pointer;color:var(--claret);background:var(--paper)}
.p-map .lgm-kpin.is-approx{background:var(--claret);color:var(--paper)}
.p-map .lgm-kpin:hover,.p-map .lgm-kpin.on,.p-map .lgm-kpin:focus-visible{background:var(--ink);color:var(--paper)}
.lgm-kpin-t{position:absolute;left:calc(100% + 1.2cqw);top:50%;transform:translateY(-50%);white-space:nowrap;background:var(--paper);color:var(--ink);
  padding:1cqw 1.6cqw;font:600 2.3cqw/1 var(--f-display);box-shadow:0 1cqw 2.4cqw rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .2s}
.lgm-kpin.flip .lgm-kpin-t{left:auto;right:calc(100% + 1.2cqw)}
.lgm-kpin:hover .lgm-kpin-t,.lgm-kpin.on .lgm-kpin-t,.lgm-kpin:focus-visible .lgm-kpin-t{opacity:1}
.p-map .note{font-size:1.8cqw}
.p-map-list{gap:2.2cqw}
.kl-h{margin:1.2cqw 0 0;font:500 5.4cqw/1 var(--f-display)}
.kl-h em{font-weight:400}
.klist{list-style:none;margin:0;padding:0;border-top:.25cqw solid var(--ink)}
.klist button{display:grid;grid-template-columns:7cqw minmax(0,1fr) auto;align-items:baseline;gap:2cqw;width:100%;text-align:left;padding:1.35cqw 0;border-bottom:.12cqw solid rgba(22,19,15,.2)}
.klist .n{font:800 3.6cqw/1 var(--f-display);color:var(--claret);font-variant-numeric:lining-nums}
.klist .t{font:600 3.1cqw/1.15 var(--f-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.klist .w{font:500 1.5cqw/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.klist button:hover .t,.klist button.on .t{text-decoration:underline;text-underline-offset:.6cqw}
.klist button.on .n{color:var(--ink)}
.klist.is-out button{grid-template-columns:7cqw minmax(0,1fr);align-items:center;row-gap:.6cqw}
.klist.is-out .th{grid-row:1/span 2;aspect-ratio:1;background:#2a2622 center/cover}
.klist.is-out .w{grid-column:2}
/* Kvarterspromenaden: the district map folded in three panels that unfold once (CSS 3D only), and the stops */
.p-walkmap{position:absolute;inset:0;background:var(--claret);overflow:hidden;perspective:180cqw;--water:#4f0f1b}
.wm-fold{position:absolute;inset:0;display:flex;transform-style:preserve-3d}
.wm-panel{position:relative;flex:1 1 0;overflow:hidden;transform-style:preserve-3d;backface-visibility:hidden;
  transition:transform .6s cubic-bezier(.2,.75,.25,1) calc(var(--i)*70ms),filter .6s ease calc(var(--i)*70ms)}
.wm-strip{position:absolute;top:0;bottom:0;width:300%}
.wm-strip .lgm-map-art{position:absolute;inset:0;width:100%;height:100%}
.p-walkmap[data-fold="closed"] .wm-panel:nth-child(1){transform:rotateY(34deg);transform-origin:100% 50%;filter:brightness(.82)}
.p-walkmap[data-fold="closed"] .wm-panel:nth-child(2){transform:translateZ(-6cqw) rotateY(-22deg);filter:brightness(1.06)}
.p-walkmap[data-fold="closed"] .wm-panel:nth-child(3){transform:rotateY(34deg);transform-origin:0 50%;filter:brightness(.78)}
.p-walkmap[data-fold="open"] .wm-panel{transform:none;filter:none}
.p-walkmap[data-fold="open"] .wm-panel+.wm-panel{box-shadow:inset 1px 0 0 rgba(0,0,0,.18),inset 2px 0 0 rgba(246,242,234,.08)} /* the fold lines stay faintly visible */
.wm-head{position:absolute;left:7cqw;top:7cqw;color:var(--paper)}
.wm-head .ph-k{color:var(--paper)}
.wm-area{margin-top:2cqw;font:italic 400 9cqw/1 var(--f-display);color:var(--paper)}
.wm-note{position:absolute;right:7cqw;bottom:12cqw;margin:0;color:var(--paper);opacity:.8;font:500 1.6cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.wm-pin{position:absolute;z-index:2;transform:translate(-50%,-50%);width:6cqw;height:6cqw;border-radius:50%;background:var(--paper);color:var(--claret);display:grid;place-items:center;font:700 2.6cqw/1 var(--f-display);box-shadow:0 0 0 1cqw rgba(246,242,234,.2)}
.wm-pin.on{background:var(--ink);color:var(--paper)}
.book.single .wm-panel,.p-walkmap .wm-panel{will-change:auto}
.book.single .p-walkmap .wm-panel{transform:none!important;filter:none!important;transition:none} /* phones: a calm, flat map */
@media (prefers-reduced-motion: reduce){.p-walkmap .wm-panel{transform:none!important;filter:none!important;transition:none!important}}
.p-walk{gap:2.2cqw}
.p-walk .h-big{font-size:7.6cqw}
.walk-stops{list-style:none;margin:0;padding:0;border-top:.25cqw solid var(--ink)}
.walk-stops li{padding:1.6cqw 0 1.6cqw 2cqw;border-bottom:.12cqw solid rgba(22,19,15,.2);border-left:.5cqw solid transparent;transition:border-color .2s,background-color .2s}
.walk-stops li.on{border-left-color:var(--claret);background:rgba(122,27,42,.05)}
.ws{display:grid;grid-template-columns:6cqw minmax(0,1fr);gap:2cqw;align-items:baseline;width:100%;text-align:left}
.ws .n{font:800 4.2cqw/1 var(--f-display);color:var(--claret)}
.ws .t{display:block;font:600 3.4cqw/1.1 var(--f-display)}
.ws .a{display:block;margin-top:.6cqw;font:500 1.5cqw/1.2 var(--f-label);letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.walk-stops .d{margin:1cqw 0 .6cqw 8cqw;font:400 2.2cqw/1.4 var(--f-body)}
.walk-stops .rd{margin-left:8cqw;font:600 1.5cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase;color:var(--claret)}
.p-walk .note{margin:0;font-size:1.7cqw}
.walk-homes{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:2cqw;padding-top:2cqw;border-top:.25cqw solid var(--ink)}
.walk-homes p{margin:0;font:400 2.2cqw/1.3 var(--f-body)}
.walk-back{margin:0;font:600 1.5cqw/1 var(--f-label);letter-spacing:.2em;text-transform:uppercase}
.walk-back a{text-decoration:none}
.face .p-walkmap~.folio{color:var(--paper);opacity:.85}

/* ==========================================================================
   Mobile (dev6.29): below 820 CSS px the start page is a vertical editorial page. The cover is a clear full-screen
   cover – masthead, issue, the number of homes, the cover story and one button to the homes – and the rest of
   the start page follows as ordinary sections. The page-flip book is not used here (magasin.js: narrow()).
   820 px and wider are unchanged.
   ========================================================================== */
@media (max-width:819.98px){
  .reader{display:none!important}
  body.lgm-reading{overflow:visible}
  .cover{grid-template-rows:auto auto auto 1fr;min-height:100vh;min-height:100svh}
  .cover::before{background:linear-gradient(180deg,rgba(10,10,8,.55) 0%,rgba(10,10,8,.1) 30%,rgba(10,10,8,.12) 48%,rgba(10,10,8,.78) 100%)}
  .cover-nav{justify-content:space-between;font-size:13px}
  .cover-nav .cover-nav-link{display:none}
  .cover-nav div{gap:8px 16px}
  .cover-nav a,.cover-nav button{padding:12px 0;min-height:44px}
  .dateline{justify-content:center;font-size:12px}
  .dateline span:first-child,.dateline span:last-child{display:none}
  .masthead{font-size:15vw;margin-top:.25em}
  .mast-type .masthead{font-size:13.6vw;margin-top:.35em}
  .cover-body{flex-direction:column;justify-content:flex-end;align-items:stretch;gap:18px;padding-top:24px}
  .cover-side{display:contents}
  .cover-side .issue{display:none}
  .lines{order:1;max-width:none;gap:0}
  .lines .cl:not(:first-child){display:none} /* the lead home and "Sälja med oss" are sections further down */
  .cl-k{font-size:12px}
  .cl-big{font-size:clamp(36px,10.5vw,58px)}
  .cover-story{order:2;justify-items:start;text-align:left;max-width:none;margin:0;padding:14px 0 0;gap:6px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-top:1px solid rgba(255,255,255,.6)}
  .cs-k,.cs-l{font-size:12px}
  .cs-t{font-size:clamp(26px,7.6vw,40px)}
  .cs-s{font-size:16px}
  .lgm .open{order:3;justify-content:space-between;width:100%;min-height:56px;font-size:13px!important;margin-top:4px}
}
@media (max-width:819.98px) and (max-height:620px){.cs-s{display:none}.cl-big{font-size:clamp(30px,9vw,44px)}}