/* Journal flipbook: printed-magazine pages in the site's palette */
.flip-sec{padding:clamp(30px,4vw,56px) 0 clamp(50px,6vw,80px);background:radial-gradient(ellipse at 50% 40%,#F8F1E9 0%,#FFFDFA 70%)}
.flip-stage{display:flex;justify-content:center;margin:clamp(26px,3vw,40px) auto 0;padding:0 16px;max-width:1160px}
#book{margin:0 auto}
.page{background:#FFFDFA;color:var(--espresso);overflow:hidden}
.page .pg{position:relative;height:100%;padding:8% 9%;display:flex;flex-direction:column;
  background:linear-gradient(90deg,rgba(44,26,16,.05),rgba(44,26,16,0) 6%,rgba(44,26,16,0) 94%,rgba(44,26,16,.04))}
.page .eyebrow{font-size:10.5px;margin-bottom:12px}
.pg-no{position:absolute;bottom:4.5%;right:9%;font:600 10px 'DM Sans',sans-serif;letter-spacing:.2em;color:rgba(44,26,16,.45)}
.pg-no.light{color:rgba(255,253,250,.8)}

/* front cover */
.cover .pg{background:#F3ECE3;padding:7% 8%}
.cv-top{display:flex;justify-content:space-between;font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--brown);border-bottom:1px solid var(--espresso);padding-bottom:8px}
.cv-word{font:200 clamp(64px,10vw,124px)/0.82 'DM Sans',sans-serif;letter-spacing:-.04em;margin:8% 0 4% -2%;color:var(--espresso)}
.cv-head{font:500 clamp(16px,1.6vw,21px)/1.15 'Commissioner',sans-serif;letter-spacing:-.02em;max-width:16ch}
.cv-lines{list-style:none;margin-top:auto;border-top:1px solid rgba(44,26,16,.25)}
.cv-lines li{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid rgba(44,26,16,.12);font:400 clamp(11px,1vw,13px)/1.3 'Commissioner',sans-serif}
.cv-lines span{font:300 clamp(11px,1vw,13px) 'DM Sans',sans-serif;color:var(--brown);min-width:20px}
.cv-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:6%;font:600 9px 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(44,26,16,.6)}
.cv-foot img{height:26px}

/* contents and closing */
.ct-h{font:500 clamp(24px,2.4vw,34px)/1.05 'Commissioner',sans-serif;letter-spacing:-.03em;margin-bottom:12px}
.ct-h em{font-family:'Pinyon Script',cursive;font-style:normal;font-weight:400;color:var(--brown)}
.ct-p{font-size:clamp(12px,1.05vw,14px);line-height:1.65;color:rgba(44,26,16,.66);margin-bottom:6%}
.ct-list{list-style:none;border-top:1px solid var(--espresso)}
.ct-list li{display:grid;grid-template-columns:28px 1fr auto 26px;gap:10px;align-items:baseline;padding:10px 0;border-bottom:1px solid rgba(44,26,16,.14)}
.ct-list .n{font:300 15px 'DM Sans',sans-serif;color:var(--brown)}
.ct-list .t{font:400 clamp(12px,1.05vw,14px)/1.3 'Commissioner',sans-serif}
.ct-list .g{font:600 8.5px 'DM Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:rgba(44,26,16,.45)}
.ct-list .p{font:600 10px 'DM Sans',sans-serif;color:rgba(44,26,16,.5);text-align:right}
.closing .pg{justify-content:center;text-align:center;align-items:center}
.closing .btn-solid{display:inline-block}
.ct-mail{margin-top:12px;font-size:12px;color:rgba(44,26,16,.55)}

/* article spread */
.spread-l .pg{padding:0}
.sp-img{width:100%;height:100%;object-fit:cover;display:block}
.sp-h{font:500 clamp(18px,1.9vw,26px)/1.1 'Commissioner',sans-serif;letter-spacing:-.025em;margin-bottom:12px}
.sp-p{font-size:clamp(11.5px,1vw,13.5px);line-height:1.7;color:rgba(44,26,16,.72)}
.sp-learn{margin-top:auto;border-top:1.5px solid var(--espresso);padding-top:10px}
.sp-learn span{font:600 9px 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--brown)}
.sp-learn ol{margin:8px 0 0 16px;font-size:clamp(11px,.95vw,12.5px);line-height:1.5}
.sp-go{margin-top:14px;font:600 10.5px 'DM Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--brown);border-bottom:1px solid rgba(206,69,46,.4);align-self:flex-start;padding-bottom:3px}

/* back cover */
.back .pg{background:var(--espresso);color:var(--cream);align-items:center;justify-content:center;gap:14px}
.bk-mark{height:56px}
.bk-name{font:600 10px 'DM Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase}
.bk-url{font-size:12px;color:rgba(255,253,250,.6)}

/* controls */
.flip-ctrl{display:flex;justify-content:center;align-items:center;gap:22px;margin-top:22px;font:600 11px 'DM Sans',sans-serif;letter-spacing:.18em;color:rgba(44,26,16,.6)}
.flip-ctrl button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(44,26,16,.3);background:none;font-size:16px;color:var(--espresso);cursor:pointer;transition:background .3s,color .3s}
.flip-ctrl button:hover{background:var(--espresso);color:var(--cream)}
.flip-hint{text-align:center;margin-top:12px;font-size:12.5px;font-style:italic;color:rgba(44,26,16,.5)}
.flip-fallback{max-width:600px;margin:20px auto;line-height:2}
.nt-img{width:46%;aspect-ratio:4/5;object-fit:cover;border-radius:4px;margin:4% 0 6%}
.inside-back .pg{justify-content:center}
.in-mark{height:34px;margin-top:8%;align-self:flex-start}

/* full-screen magazine (user, 2026-10-10) */
.flip-sec{min-height:calc(100vh - 62px);padding:18px 0 14px;display:flex;flex-direction:column;justify-content:center}
.flip-stage{margin:0 auto}
.flip-ctrl{margin-top:14px}
.flip-hint{margin-top:6px}
/* issue block on the cover */
.cv-issue{display:flex;align-items:baseline;gap:10px;margin-top:6%;color:var(--brown)}
.cv-lab{font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase}
.cv-no{font:200 clamp(34px,4vw,56px)/.8 'DM Sans',sans-serif;letter-spacing:-.04em}
.cv-month{font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;margin-left:auto;color:var(--espresso)}
.cv-word{margin-top:4%}
/* the read-the-article block: large, editorial */
.sp-go{margin-top:6%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 0 4px;border-top:1.5px solid var(--espresso);border-bottom:0;align-self:stretch;color:var(--espresso);text-transform:none;letter-spacing:-.02em;font:500 clamp(18px,1.9vw,26px)/1.08 'Commissioner',sans-serif;transition:color .3s}
.sp-go-c{flex:none;width:clamp(48px,4.6vw,64px);height:clamp(48px,4.6vw,64px);border-radius:50%;background:var(--brown);color:var(--cream);display:flex;align-items:center;justify-content:center;font-size:clamp(18px,1.8vw,24px);transition:transform .4s var(--ease),background .3s}
.sp-go:hover{color:var(--brown)}
.sp-go:hover .sp-go-c{transform:translateX(6px) rotate(-8deg);background:var(--espresso)}
.sp-learn{margin-top:auto}
/* the stage must be full width, or the library thinks only one page fits */
.flip-stage{width:100%;max-width:none;display:flex;justify-content:center;box-sizing:border-box}

/* fill the screen: header floats over the top, arrows sit on the sides (user, 2026-10-10) */
.flip-sec{min-height:0;height:calc(100vh - 62px);padding:8px 0;position:relative;justify-content:center}
.flip-stage{height:100%;align-items:center}
.flip-ctrl{position:absolute;inset:0;margin:0;pointer-events:none;display:block}
.flip-ctrl button{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;background:rgba(255,253,250,.85);backdrop-filter:blur(6px);width:52px;height:52px;z-index:5}
#fl-prev{left:clamp(8px,1.6vw,24px)} #fl-next{right:clamp(8px,1.6vw,24px)}
#fl-count{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font:600 10px 'DM Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(44,26,16,.45)}
.flip-hint{position:absolute;left:0;right:0;bottom:26px;margin:0;transition:opacity .6s}
/* left-hand pages carry their number on the left, like a printed magazine */
.note .pg-no,.spread-l .pg-no,.closing .pg-no{right:auto;left:9%}
.spread-l .pg{background:#2C1A10}
.sp-img{object-position:center}

/* right page reading order (user, 2026-10-10): title, intro, the button right after, learn list last and quiet */
.spread-r .sp-go{margin-top:7%;border-top:1px solid rgba(44,26,16,.85);padding-top:14px}
.spread-r .sp-learn{margin-top:auto;border-top:1px solid rgba(44,26,16,.14);padding-top:10px;opacity:.85}
.spread-r .sp-learn ol{color:rgba(44,26,16,.7)}
/* cover shown whole (no cropping of its type), page in the cover's paper colour */
.spread-l .pg{display:flex;align-items:center;justify-content:center}
.spread-l.light .pg{background:#F3ECE3}
.spread-l.dark .pg{background:#2C1A10}
.sp-img{width:100%;height:100%;object-fit:contain}

/* next-issue page, set like the front cover (user, 2026-10-10) */
.inside-back .pg{justify-content:flex-start;background:#F3ECE3}
.nx-no{font:200 clamp(160px,22vw,340px)/.78 'DM Sans',sans-serif;letter-spacing:-.06em;color:var(--brown);margin:auto 0 0 -3%}
.nx-month{font:500 clamp(24px,2.6vw,38px)/1.05 'Commissioner',sans-serif;letter-spacing:-.03em;margin-top:6%;color:var(--espresso)}
.nx-p{margin-top:12px;font-size:clamp(12px,1.05vw,14px);line-height:1.65;color:rgba(44,26,16,.66);max-width:34ch}
.nx-foot{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(44,26,16,.2);font:600 9.5px 'DM Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:rgba(44,26,16,.55);margin-bottom:6%}
.nx-foot a{color:var(--brown);letter-spacing:.1em;text-transform:none;font-size:12px}
.nx-foot a{white-space:nowrap}

/* type scales with the page itself, so phones and big screens both look composed */
.page{container-type:inline-size}
.cv-word{font-size:27cqw}
.cv-no{font-size:13cqw}
.cv-head{font-size:5.2cqw}
.nx-no{font-size:52cqw}
.nx-month{font-size:8cqw}
.ct-h{font-size:7.4cqw}
.sp-h{font-size:6.2cqw}
.sp-go{font-size:5.6cqw}
.sp-go-c{width:14cqw;height:14cqw;font-size:5.4cqw}

.h-mob{display:none}
@media (max-width:700px){
  .h-desk{display:none} .h-mob{display:inline}
  /* controls move into a bar under the page instead of covering it */
  .flip-ctrl button{top:auto;bottom:4px;transform:none;width:42px;height:42px}
  #fl-prev{left:16px} #fl-next{right:16px}
  #fl-count{bottom:18px}
  .flip-hint{bottom:auto;top:calc(100% - 66px);font-size:11.5px}
  .page .pg{padding:9% 8%}
  .cv-lines li,.ct-list .t{font-size:3.6cqw}
  .sp-p,.ct-p{font-size:3.8cqw}
}
@media (max-width:700px){
  #fl-count{white-space:nowrap;font-size:9px;letter-spacing:.16em;bottom:20px}
  .flip-hint{display:none}
}
.spread-r .sp-learn{margin-bottom:7%}

/* type follows the page's width AND height, so short phone pages never crowd (iPhone SE) */
.page{container-type:size}
.cv-word{font-size:min(27cqw,18cqh)}
.cv-no{font-size:min(13cqw,8.5cqh)}
.cv-head{font-size:min(5.2cqw,3.5cqh)}
.cv-issue{margin-top:min(6%,3cqh)}
.cv-lines li{font-size:min(3.6cqw,2.3cqh);padding:min(7px,1.1cqh) 0}
.nx-no{font-size:min(52cqw,34cqh)}
.nx-month{font-size:min(8cqw,5.2cqh)}
.ct-h{font-size:min(7.4cqw,4.8cqh)}
.sp-h{font-size:min(6.2cqw,4cqh)}
.sp-p,.ct-p{font-size:min(3.8cqw,2.5cqh)}
.sp-go{font-size:min(5.6cqw,3.6cqh)}
.sp-go-c{width:min(14cqw,9cqh);height:min(14cqw,9cqh)}
@media (min-width:701px){.sp-p,.ct-p{font-size:min(2.9cqw,2.2cqh)}.cv-lines li{font-size:min(2.6cqw,2cqh)}}
/* full-page cover art carries no folio, as in print */
.spread-l .pg-no{display:none}