/* WholeArc Magazine: shared styles for the reader chrome and every page layout. */
:root{
  --bg:#f7f2eb; --ink:#081f5c; --muted:#4d5a86; --line:#bad6eb; --btn:#fff9f0; --btn-ink:#081f5c; --focus:#334eac;
  --sans:"Dosis","Avenir Next","Segoe UI",system-ui,sans-serif;
  --serif:"Crimson Pro","Iowan Old Style",Georgia,"Times New Roman",serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#081f5c;--ink:#f7f2eb;--muted:#bad6eb;--line:#334eac;--btn:#122b6e;--btn-ink:#f7f2eb;--focus:#d0e3ff;}
}
:root[data-theme="dark"]{--bg:#081f5c;--ink:#f7f2eb;--muted:#bad6eb;--line:#334eac;--btn:#122b6e;--btn-ink:#f7f2eb;--focus:#d0e3ff;}
*,*::before,*::after{box-sizing:inherit}
html{height:100%;scroll-padding-top:env(safe-area-inset-top,0px)}

header.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px clamp(16px,4vw,40px) 10px}
.brand{font-weight:300;font-size:20px;letter-spacing:.34em;margin:0}
.brand a{color:inherit;text-decoration:none}
.brand span{letter-spacing:.02em;font-family:var(--serif);font-size:17px;color:var(--muted);margin-left:.4em}
.issue{font-family:var(--serif);color:var(--muted);font-size:16px;margin:0}

.wrap{position:relative;flex:none}
.book{position:absolute;left:0;top:0;transform-origin:0 0}

.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.08),0 12px 30px rgba(0,0,0,.10)}
.face.back{transform:rotateY(180deg)}
.face.front::after,.face.back::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5}
.face.front::after{background:linear-gradient(to right,rgba(0,0,0,.10),rgba(0,0,0,0) 7%)}
.face.back::after{background:linear-gradient(to left,rgba(0,0,0,.10),rgba(0,0,0,0) 7%)}
.face.nocrease::after{display:none}

.single{position:relative;perspective:2200px}
.spage .face{position:absolute;inset:0}


footer.bar{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 16px 18px;flex-wrap:wrap}
.btn{appearance:none;border:1px solid var(--line);background:var(--btn);color:var(--btn-ink);font-family:var(--sans);font-size:15px;font-weight:400;padding:8px 16px;border-radius:999px;cursor:pointer;min-width:44px;min-height:40px}
.btn:hover{border-color:var(--muted)}
.btn:disabled{opacity:.4;cursor:default}
.btn:focus-visible,.pg a:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.count{font-family:var(--serif);font-size:16px;color:var(--muted);min-width:150px;text-align:center}
@media (max-width:560px){.issue{display:none}#first{display:none}.count{min-width:0}footer.bar{gap:8px}.btn{padding:8px 12px}}

/* section pages */
.sec{padding:0}
.sec .kick{position:relative;margin:0;padding:64px 56px 0;font-size:13px;color:#8a8883;font-style:italic}
.sec h3{margin:6px 56px 0;font-size:38px;line-height:1.05}
.sec .lede{margin:16px 56px 0;font-size:14.5px;line-height:1.65;color:#6f6d68}
.sec .lede.narrow{margin-right:220px}
.sec .rows{list-style:none;margin:26px 56px 0;padding:0;border-top:1px solid #2f2f2e}
.sec .rows li{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:baseline;padding:11px 0;border-bottom:1px solid #e3e2df;font-size:13.5px;line-height:1.5;color:#86847f}
.sec .rows.tight li{padding:8px 0}
.sec .rn{font-family:"Dosis",sans-serif;font-size:17px;color:#2f2f2e}
.sec .rows b{display:block;font-family:"Dosis",sans-serif;font-weight:400;font-size:16px;color:#2f2f2e}
.sec .v,.sec .p{font-style:normal;font-family:"Dosis",sans-serif;font-size:12px;color:#2f2f2e;border:1px solid #2f2f2e;padding:1px 10px;border-radius:999px}
.sec .p{border:0;color:#86847f}
.sec .thumb{position:absolute;top:56px;right:40px;width:170px;height:150px;background-size:cover;background-position:center}
.sec .hero{height:240px;background-size:cover;background-position:center}
.sec .hero.short{height:250px}
.sec .hero.feat{height:280px}
.sec .below .essay{margin-top:14px}
.sec .below .essay p{margin-bottom:0}
.sec .hero.arch{height:450px;background-position:center 24%}
.sec .below .kick{padding-top:26px}
.sec .below h3{font-size:34px}
.sec .qa{margin:26px 56px 0;border-top:1px solid #2f2f2e}
.sec .qa dt{font-family:"Dosis",sans-serif;font-size:16px;color:#2f2f2e;padding-top:14px}
.sec .qa dd{margin:3px 0 0;padding-bottom:13px;border-bottom:1px solid #e3e2df;font-size:14px;color:#a09e98}
.sec .verdict{margin:22px 56px 0;font-size:14.5px;color:#6f6d68}
.sec .verdict b{color:#2f2f2e;font-weight:500}
.sec .essay{margin:20px 56px 0;column-count:1}
.sec .essay p{margin:0 0 14px;font-size:14.5px;line-height:1.75;color:#6f6d68;text-align:justify;hyphens:auto}
.sec .pull{margin:26px 56px 0;padding-top:18px;border-top:1px solid #2f2f2e;font-family:"Dosis",sans-serif;font-weight:300;font-size:24px;line-height:1.3;color:#2f2f2e}
.sec .two{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:20px 56px 0;border-top:1px solid #2f2f2e;padding-top:12px}
.sec .two h4{margin:0 0 6px;font-family:"Dosis",sans-serif;font-weight:400;font-size:16px;color:#2f2f2e}
.sec .two p{margin:0;font-size:13.5px;line-height:1.6;color:#6f6d68}
.pg.nx dl{top:250px}
.pg.nx dt{font-size:16px;padding-top:9px}
.pg.nx dd{font-size:13px;padding-bottom:9px}
.pg.bk ul{top:452px}
.pg.bk li{margin-bottom:10px}
.sec h3.narrow{margin-right:230px}

/* news spread */
.nwL .mark{position:absolute;left:44px;top:0;width:1px;height:30px;background:#9a9892}
.nwL .mark::after{content:"";position:absolute;left:-14px;top:30px;width:28px;height:28px;border:1px solid #9a9892;border-radius:50%}
.nwL .mark::before{content:"";position:absolute;left:-2px;top:42px;width:5px;height:5px;background:#9a9892;border-radius:50%;z-index:1}
.nwL .pq{position:absolute;left:330px;right:60px;top:34px;font-size:21px;line-height:1.3;color:#77756f}
.nwL .qm{display:block;font-family:"Dosis",sans-serif;font-weight:500;font-size:74px;line-height:.7;color:#4a4946;margin-bottom:10px}
.nwL .by{position:absolute;left:56px;top:250px;margin:0;font-family:"Dosis",sans-serif;font-size:10px;letter-spacing:.14em;color:#2f2f2e}
.nwL .bar{position:absolute;left:56px;top:278px;width:40px;height:3px;background:#2f2f2e}
.nwL h3{position:absolute;left:56px;top:298px;margin:0;font-family:"Crimson Pro",Georgia,serif;font-weight:500;font-size:27px;line-height:1.12;letter-spacing:.02em;color:#2f2f2e}
.nwL .lede{position:absolute;left:56px;width:260px;top:420px;margin:0;font-size:13.5px;line-height:1.6;color:#77756f}
.nwL .img{position:absolute;left:56px;right:56px;top:510px;height:210px;background-size:cover;background-position:center 52%}
.nwL .img.duo{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#fff}
.nwL .cap{position:absolute;left:56px;right:56px;top:732px;font-size:13px;line-height:1.55;color:#86847f}
.nwL .cap b{display:block;font-family:"Dosis",sans-serif;font-weight:400;font-size:15px;color:#2f2f2e;margin-bottom:2px}
.nwR .col{position:absolute;top:56px;width:232px}
.nwR .c1{left:56px}.nwR .c2{left:312px}
.nwR .img{height:320px;background-size:cover}
.nwR .c1 .img{background-position:52% center}
.nwR .c2 .img{background-position:40% 30%}
.nwR h4{margin:14px 0 6px;font-family:"Dosis",sans-serif;font-weight:500;font-size:14px;line-height:1.3;color:#2f2f2e}
.nwR p{margin:0;font-size:12.5px;line-height:1.6;color:#86847f;text-align:left}
.nwR .low{position:absolute;left:56px;right:56px;top:600px;display:grid;grid-template-columns:1fr 1fr;gap:24px;border-top:1px solid #2f2f2e;padding-top:4px}

/* gearhead tools spread */
.gh{background:#fff}
.gh .gk{position:absolute;left:56px;top:56px;margin:0;font-size:13px;font-style:italic;color:#8a8883}
.gh h3{position:absolute;left:56px;top:76px;margin:0;font-size:34px;line-height:1.05}
.gh .intro{position:absolute;left:56px;width:230px;top:128px;margin:0;font-size:14px;line-height:1.6;color:#6f6d68}
.gh .tile{position:absolute;transform:rotateX(56deg) rotateZ(-45deg)}
.gh .glyph{position:absolute;filter:drop-shadow(4px 6px 4px rgba(0,0,0,.12))}
.gh .glyph svg{display:block}
.gh .tn{display:none;position:absolute;font-family:"Dosis",sans-serif;font-size:11px;color:#9a9892}
.gh .gi{position:absolute;font-size:12.5px;line-height:1.55;color:#86847f}
.gh .gi .gn{display:inline-block;width:18px;color:#9a9892}
.gh .gi b{display:block;font-family:"Dosis",sans-serif;font-weight:400;font-size:16px;color:#2f2f2e;border-top:1px solid #2f2f2e;padding-top:6px;margin-bottom:2px}
.gh .gi i{display:block;font-size:12.5px;color:#a09e98;margin-bottom:6px}
.gh .gi p{margin:0;font-family:"Crimson Pro",Georgia,serif}
.gh .gi em{display:block;font-style:normal;font-family:"Dosis",sans-serif;font-size:12px;color:#2f2f2e;margin-top:8px;padding-top:6px;border-top:1px solid #e3e2df}
.hdr-r{display:flex;align-items:center;gap:14px}
.snd{appearance:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--btn);color:var(--btn-ink);cursor:pointer;padding:0}
.snd:hover{border-color:var(--muted)}
.snd:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.snd .on{display:none}.snd[aria-pressed="true"] .on{display:block}.snd[aria-pressed="true"] .off{display:none}
body.focus header.bar{position:absolute;top:0;right:0;left:auto;z-index:30;padding:12px 16px 0}
body.focus header.bar .brand,body.focus header.bar .issue,body.focus footer.bar{display:none}
body.focus .stage{padding:56px 10px 12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Magazine pages (fixed 600 × 848 design units) ---------- */
.pg{position:absolute;inset:0;color:#2f2f2e;font-family:"Crimson Pro",Georgia,serif}
.pg p{margin:0}
.body{font-size:13.5px;line-height:1.72;color:#7d7b76;text-align:justify;hyphens:auto}
.h-dosis{font-family:"Dosis",sans-serif;font-weight:300;color:#2f2f2e;margin:0;letter-spacing:.005em}
.folio{position:absolute;bottom:22px;font-family:"Dosis",sans-serif;font-size:12px;color:#aaa8a3}
.folio.r{right:36px}.folio.l{left:36px}
.bg{position:absolute;background-repeat:no-repeat}

/* cover */
.cover .mast{position:absolute;top:92px;left:0;right:0;text-align:center;font-family:"Dosis",sans-serif;font-weight:300;font-size:46px;letter-spacing:.42em;padding-left:.42em;color:#2f2f2e}
.cover .sub{position:absolute;top:164px;left:0;right:0;text-align:center;font-size:17px;color:#3a3a39;letter-spacing:.02em}
.cover .about{position:absolute;top:166px;left:60px;right:60px;text-align:center;font-size:17px;line-height:1.4;color:#3a3a39}
.cover .rule{position:absolute;top:228px;left:150px;right:150px;border-top:1px solid #6f6e6b}
.cover ul{position:absolute;top:266px;left:0;right:0;list-style:none;margin:0;padding:0;text-align:center}
.cover li{font-size:12px;letter-spacing:.09em;color:#86847f;margin-bottom:30px;text-transform:uppercase}
.cover .img{left:24px;right:24px;top:452px;height:332px;background-size:cover;background-position:center}
.cover .no{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-family:"Dosis",sans-serif;font-size:12px;color:#9a9892}

/* contents */
.toc h2{position:absolute;top:96px;left:84px;font-family:"Dosis",sans-serif;font-weight:300;font-size:27px;margin:0;color:#2f2f2e}
.toc .rule{position:absolute;top:140px;left:84px;right:0;border-top:1px solid #2f2f2e}
.toc ol{position:absolute;top:186px;left:44px;right:40px;list-style:none;margin:0;padding:0}
.toc li{display:flex;align-items:stretch}
.toc .n{width:44px;text-align:right;padding-right:14px;font-family:"Dosis",sans-serif;font-size:16px;color:#55544f;border-right:1px solid #55544f;padding-top:9px;padding-bottom:9px}
.toc a{display:block;flex:1;padding:9px 0 9px 16px;color:#6d6b66;text-decoration:none;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.toc a:hover{color:#2f2f2e}
.toc .t{display:block;flex:1;padding:9px 0 9px 16px;color:#6d6b66;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.toc .t small{display:block;text-transform:none;letter-spacing:0;font-size:13px;color:#a09e98;margin-bottom:2px}
.toc a small{display:block;text-transform:none;letter-spacing:0;font-size:13px;color:#a09e98;margin-bottom:2px}
.toc .note{position:absolute;left:102px;right:40px;bottom:70px;font-size:14px;line-height:1.6;color:#8a8883;font-style:italic}
.win{background:#0b0b0b}
.win .img{inset:0;background-size:cover;background-position:50% 55%}
.tocimg .img{inset:0;background-size:cover;background-position:center}
.tocimg .rule{position:absolute;top:140px;left:0;right:42px;border-top:1px solid #2f2f2e;z-index:2}

/* feature */
.f1 .h-dosis{position:absolute;top:104px;left:54px;font-size:46px}
.f1 .img,.f2 .img{background-size:763px auto;height:482px;top:246px}
.f1 .img{left:54px;right:0;background-position:0 50%}
.f2 .img{left:0;width:215px;background-position:-546px 50%}
.f2 .thumb{position:absolute;top:52px;left:282px;right:40px;height:190px;background-size:cover;background-position:center}
.f2 h3{position:absolute;top:298px;left:282px;font-size:44px}
.f2 .body{position:absolute;top:372px;left:282px;right:40px;font-size:12.5px;line-height:1.7}
.f2 .big{position:absolute;right:88px;bottom:-40px;font-family:"Dosis",sans-serif;font-weight:300;font-size:250px;line-height:1;color:#e7e6e3}

.f3 .c1,.f3 .c2{position:absolute;top:58px;width:222px}
.f3 .c1{left:46px}.f3 .c2{left:320px}
.f3 h4{font-size:19px;margin:34px 0 10px}
.f3 .img,.f4 .img{top:470px;bottom:0;background-size:auto 378px}
.f3 .img{left:0;right:0;background-position:0 100%}
.f4 .img{left:0;width:262px;background-position:-600px 100%}
.f4 .c2{position:absolute;top:58px;left:314px;width:228px}
.f4 blockquote{position:absolute;left:310px;right:52px;bottom:66px;margin:0;font-size:16px;line-height:1.5;color:#2f2f2e}
.f4 blockquote cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:#8a8883}

.f5 .img{left:166px;right:40px;top:60px;bottom:52px;background-size:cover;background-position:center}
.f5 h3{position:absolute;top:142px;left:62px;font-size:42px;z-index:2}
.f5 .body{position:absolute;left:62px;width:132px;top:230px;font-size:12px;text-align:left;hyphens:manual;line-height:1.6;display:none}
.f5 .side{position:absolute;left:36px;right:42px;bottom:22px}

/* design spread page (text page) */
.f6 .body{position:absolute;top:96px;left:56px;right:56px;font-size:14px;line-height:1.8}
.f6 h3{position:absolute;top:470px;left:56px;font-size:30px}
.f6 .big{position:absolute;left:52px;bottom:-40px;font-family:"Dosis",sans-serif;font-weight:300;font-size:250px;line-height:1;color:#e7e6e3}
.f6 .body2{position:absolute;top:530px;left:56px;width:250px;font-size:13px;line-height:1.7;color:#7d7b76}

/* next issue */
.nx h3{position:absolute;top:90px;left:56px;font-size:40px}
.nx .body{position:absolute;top:160px;left:56px;right:56px}
.nx dl{position:absolute;top:400px;left:56px;right:56px;margin:0;border-top:1px solid #2f2f2e}
.nx dt{font-family:"Dosis",sans-serif;font-size:19px;font-weight:400;color:#2f2f2e;padding-top:16px}
.nx dd{margin:2px 0 0;font-size:14px;color:#86847f;padding-bottom:14px;border-bottom:1px solid #e3e2df}

/* back cover */
.bk{background:#ededed}
.bk .img{inset:0;background-size:cover;background-position:center}
/* back cover: the WholeArc family arc */
.bk .fam{position:absolute;top:120px;left:0;right:0;margin:0;text-align:center;font-family:"Dosis",sans-serif;font-size:12px;letter-spacing:.32em;padding-left:.32em;text-transform:uppercase;color:#77756f;z-index:2}
.bk .arc{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.bk .arc path{fill:none;stroke:#334eac;stroke-width:1.2;stroke-dasharray:2 6;stroke-linecap:round}
.bk .arc circle{fill:#334eac}
.bk .site{position:absolute;z-index:2;width:160px;text-align:center;font-size:14.5px;line-height:1.25;color:#081f5c;text-decoration:none}
.bk .site small{display:block;font-family:"Dosis",sans-serif;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#77756f;margin-bottom:2px}
.bk .site:hover{color:#334eac;text-decoration:underline;text-underline-offset:3px}
.bk .site:focus-visible{outline:2px solid #334eac;outline-offset:4px}
.bk .s1{left:12px;top:384px}.bk .s4{left:428px;top:384px}
.bk .s2{left:112px;top:180px}.bk .s3{left:328px;top:180px}
.bk ul{position:absolute;left:400px;top:382px;list-style:none;margin:0;padding:0;font-family:"Dosis",sans-serif;font-size:15px;color:#2f2f2e}
.bk li{margin-bottom:12px}
.bk .about{position:absolute;left:0;right:0;bottom:104px;text-align:center;font-size:16px;font-style:italic;color:#5f5d58;margin:0 auto;max-width:360px;line-height:1.45}
.bk .mast{position:absolute;bottom:60px;left:0;right:0;text-align:center;font-family:"Dosis",sans-serif;font-weight:300;font-size:18px;letter-spacing:.42em;padding-left:.42em;color:#6f6e6b}