/* Editorial layer: textures, photography, and the double-page-spread article layout. */

/* ---------- Textures & glows ---------- */
.fm-tex-graph,.fm-tex-dots,.fm-glow{position:relative;isolation:isolate}
/* Every texture layer fades out at all four edges (--mask-edges). Textured components share one rule. */
.fm-tex-graph::before,.fm-tex-dots::before,.fm-prompt::before,.fm-prereq__meta::before,.fm-figure--frame .fm-figure__media::before,.fm-course--light::before,.fm-promo--tint::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--texture-graph);-webkit-mask-image:var(--mask-edges);mask-image:var(--mask-edges);-webkit-mask-composite:source-in;mask-composite:intersect}
.fm-tex-dots::before{background:var(--texture-dots)}
.fm-tex--soft::before{opacity:0.6}
.fm-glow::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--gradient-glow);-webkit-mask-image:var(--mask-edges);mask-image:var(--mask-edges);-webkit-mask-composite:source-in;mask-composite:intersect}
.fm-bg-brand{background:var(--gradient-brand);color:var(--text-on-brand-2)}

/* ---------- Photo (art-directed image) ---------- */
.fm-photo{position:relative;overflow:hidden;background:var(--plum-950);margin:0;isolation:isolate}
.fm-photo>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slower) var(--ease-out)}
.fm-photo--fill{position:absolute;inset:0}
.fm-photo--plum>img{filter:grayscale(1) contrast(1.12) brightness(0.92)}
.fm-photo--plum::after{content:"";position:absolute;inset:0;background:var(--photo-grade);mix-blend-mode:color;opacity:var(--photo-grade-opacity);pointer-events:none}
.fm-photo--plum::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(160deg,oklch(72% 0.14 40 / 0.18),transparent 45%);mix-blend-mode:soft-light;pointer-events:none}
.fm-photo--mono>img{filter:grayscale(1) contrast(1.05)}
.fm-photo--scrim>.fm-photo__scrim{position:absolute;inset:0;z-index:2;background:var(--gradient-scrim);pointer-events:none}
.fm-photo__credit{position:absolute;right:0.75rem;bottom:1rem;z-index:3;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-ui);font-size:0.6875rem;font-weight:var(--fw-medium);letter-spacing:0.04em;color:oklch(100% 0 0 / 0.72);text-shadow:0 1px 2px oklch(0% 0 0 / 0.4)}
.fm-photo__caption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(1rem,2.5vw,2rem);color:var(--white)}
.fm-photo--framed{border-radius:var(--radius-md);box-shadow:var(--shadow-photo)}
[data-theme="hc"] .fm-photo--plum>img,[data-theme="hc-dark"] .fm-photo--plum>img{filter:none}

/* ---------- Article opener: double-page spread ---------- */
.fm-opener{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:calc(100vh - var(--header-h));background:var(--bg-page)}
.fm-opener__photo{position:relative;min-height:28rem}
.fm-opener__plate{position:absolute;left:clamp(1.25rem,3.5vw,3.5rem);bottom:clamp(1.25rem,3.5vw,3.5rem);right:4rem;z-index:3;display:grid;gap:var(--space-3);color:var(--white)}
.fm-opener__plate .fm-label{color:var(--plum-200)}
.fm-opener__no{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(4.5rem,2rem + 9vw,12rem);line-height:0.78;letter-spacing:-0.065em;font-variant-numeric:tabular-nums;color:var(--white)}
.fm-opener__page{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-9);padding:clamp(2rem,4vw,4.5rem) clamp(1.5rem,5vw,6.5rem) clamp(2rem,4vw,4.5rem) clamp(1.5rem,5vw,6rem);background:var(--gradient-paper)}
.fm-opener__page::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4rem;background:linear-gradient(90deg,var(--gutter-shade),transparent);pointer-events:none}
.fm-opener__head{display:grid;gap:var(--space-6)}
.fm-opener__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4)}
.fm-opener__title{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:clamp(2.75rem,1.1rem + 3.6vw,6rem);line-height:0.93;letter-spacing:-0.042em;color:var(--text-1);text-wrap:balance;margin:0}
.fm-opener__deck{font-family:var(--font-reading);font-weight:var(--fw-light);font-size:var(--fs-lede);line-height:1.36;color:var(--text-2);font-variation-settings:"opsz" 48;max-width:34ch;margin:0;text-wrap:pretty}
.fm-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;border-top:var(--border-width-strong) solid var(--border-strong);border-bottom:var(--border-width) solid var(--border-1)}
.fm-facts>div{display:grid;gap:0.4rem;align-content:start;padding:var(--space-4) var(--space-4) var(--space-4) 0;border-right:var(--border-width) solid var(--border-1)}
.fm-facts>div+div{padding-left:var(--space-4)}
.fm-facts>div:last-child{border-right:0}
.fm-facts dt{font-family:var(--font-ui);font-size:var(--fs-xs);font-weight:var(--fw-semibold);letter-spacing:var(--tracking-label);text-transform:uppercase;color:var(--text-3)}
.fm-facts dd{margin:0;font-family:var(--font-ui);font-size:0.9375rem;font-weight:var(--fw-semibold);color:var(--text-1);line-height:1.3}
.fm-ingredients{display:grid;gap:var(--space-4)}
.fm-ingredients__title{font-family:var(--font-reading);font-style:italic;font-weight:var(--fw-regular);font-size:1.75rem;line-height:1;color:var(--text-1);margin:0}
.fm-leaders{list-style:none;margin:0;padding:0;columns:2 16rem;column-gap:var(--space-8)}
.fm-leaders li{display:flex;align-items:baseline;gap:var(--space-2);padding:0.55rem 0;break-inside:avoid;font-family:var(--font-ui);font-size:0.9375rem;color:var(--text-1)}
.fm-leaders__item{flex:none;max-width:70%}
.fm-leaders__dots{flex:1;min-width:1rem;border-bottom:1.5px dotted var(--border-2);transform:translateY(-0.28em)}
.fm-leaders__qty{flex:none;font-family:var(--font-reading);font-style:italic;font-size:1rem;color:var(--text-3)}
@media (max-width:1023.98px){.fm-opener{grid-template-columns:1fr;min-height:0}.fm-opener__photo{min-height:62vh}.fm-opener__page::after{display:none}.fm-facts{grid-template-columns:1fr 1fr}.fm-facts>div:nth-child(2){border-right:0}.fm-facts>div:nth-child(3){padding-left:0}.fm-facts>div:nth-child(n+3){border-top:var(--border-width) solid var(--border-1)}}

/* ---------- Contents (book-style) ---------- */
.fm-contents{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));border-top:var(--border-width-strong) solid var(--border-strong);list-style:none;margin:0;padding:0}
.fm-contents li{border-right:var(--border-width) solid var(--border-1);border-bottom:var(--border-width) solid var(--border-1)}
.fm-contents li:last-child{border-right:0}
.fm-contents a{display:grid;gap:var(--space-3);align-content:start;height:100%;padding:var(--space-5) var(--space-5) var(--space-6);text-decoration:none;color:var(--text-2);transition:background-color var(--dur-fast) var(--ease-out)}
.fm-contents a:hover{background:var(--accent-softer);color:var(--text-1)}
.fm-contents__num{font-family:var(--font-display);font-weight:var(--fw-black);font-size:2.25rem;line-height:0.85;letter-spacing:-0.05em;color:var(--accent);font-variant-numeric:tabular-nums}
.fm-contents__title{font-family:var(--font-ui);font-weight:var(--fw-semibold);font-size:0.9375rem;line-height:1.3;color:var(--text-1)}
.fm-contents__page{font-family:var(--font-reading);font-style:italic;font-size:0.875rem;color:var(--text-3)}
.fm-contents .is-active a{background:var(--surface-brand);color:var(--text-on-brand-2)}
.fm-contents .is-active .fm-contents__title{color:var(--white)}
.fm-contents .is-active .fm-contents__num{color:var(--plum-300)}

/* ---------- Spread: one section as two facing pages ---------- */
.fm-spread{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);border-top:var(--border-width) solid var(--border-1)}
.fm-spread__left{position:relative;isolation:isolate;padding:var(--space-11) clamp(1.5rem,4vw,5rem) var(--space-11) var(--gutter)}
.fm-spread__left::after{content:"";position:absolute;right:0;top:0;bottom:0;width:3rem;background:linear-gradient(270deg,var(--gutter-shade),transparent);pointer-events:none}
.fm-spread__sticky{position:sticky;top:calc(var(--header-h) + var(--space-8));display:grid;gap:var(--space-5);max-width:30rem;margin-left:auto}
.fm-spread__num{font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(5rem,2.6rem + 6.4vw,11.5rem);line-height:0.76;letter-spacing:-0.065em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px var(--accent);margin-left:-0.04em}
[data-theme="hc"] .fm-spread__num,[data-theme="hc-dark"] .fm-spread__num{color:var(--accent);-webkit-text-stroke:0}
.fm-spread__title{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-h2);line-height:1;letter-spacing:-0.035em;color:var(--text-1);margin:0;text-wrap:balance;scroll-margin-top:calc(var(--header-h) + var(--space-6))}
.fm-spread__summary{font-family:var(--font-reading);font-style:italic;font-size:1.25rem;line-height:1.45;color:var(--text-2);margin:0;text-wrap:pretty}
.fm-spread__subs{list-style:none;margin:var(--space-3) 0 0;padding:var(--space-4) 0 0;border-top:var(--border-width) solid var(--border-1);display:grid;gap:var(--space-2)}
.fm-spread__subs a{display:flex;gap:var(--space-3);font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-3);text-decoration:none}
.fm-spread__subs a:hover{color:var(--text-accent)}
.fm-spread__subs a::before{content:"";flex:none;width:1rem;height:1px;margin-top:0.7em;background:currentColor}
.fm-spread__figure{margin-top:var(--space-5)}
.fm-spread__right{position:relative;padding:var(--space-11) var(--gutter) var(--space-11) clamp(1.5rem,4.5vw,5.5rem)}
.fm-spread__right::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3rem;background:linear-gradient(90deg,var(--gutter-shade),transparent);pointer-events:none}
.fm-spread__body{max-width:40rem}
.fm-spread__body.fm-prose>h3:first-child,.fm-spread__body.fm-prose>p:first-child{margin-top:0}
.fm-spread--tint{background:var(--bg-subtle)}
.fm-spread--photo .fm-spread__left{padding:0}
.fm-spread--photo .fm-spread__left::after{display:none}
.fm-spread__photo{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));min-height:30rem}
.fm-spread__photo .fm-photo{position:absolute;inset:0}
.fm-spread__overlay{position:absolute;left:0;right:0;bottom:0;z-index:4;display:grid;gap:var(--space-4);padding:clamp(1.5rem,3.5vw,3.5rem) clamp(1.5rem,3.5vw,3.5rem) clamp(1.5rem,3.5vw,3.5rem) var(--gutter);color:var(--white)}
.fm-spread__overlay .fm-spread__num{-webkit-text-stroke:1.5px var(--plum-200)}
.fm-spread__overlay .fm-spread__title{color:var(--white)}
.fm-spread__overlay .fm-spread__summary{color:var(--plum-100)}
@media (max-width:1023.98px){
  .fm-spread{grid-template-columns:1fr}
  .fm-spread__left{padding:var(--space-10) var(--gutter) var(--space-5)}
  .fm-spread__left::after,.fm-spread__right::before{display:none}
  .fm-spread__sticky{position:static;margin-left:0;max-width:none}
  .fm-spread__right{padding:var(--space-5) var(--gutter) var(--space-10)}
  .fm-spread__num{font-size:clamp(4rem,14vw,7rem)}
  .fm-spread__photo{position:relative;height:62vh;top:0}
  .fm-spread--photo .fm-spread__right{padding-top:var(--space-9)}
}

/* ---------- Feature quote (full-bleed) ---------- */
.fm-featurequote{position:relative;isolation:isolate;display:grid;align-items:end;min-height:min(86vh,52rem);color:var(--white);margin:0}
.fm-featurequote>.fm-photo{position:absolute;inset:0;z-index:-1}
.fm-featurequote__inner{padding:var(--space-12) var(--gutter) clamp(2.5rem,6vw,6rem);max-width:var(--page-max);width:100%;margin-inline:auto;display:grid;gap:var(--space-6)}
.fm-featurequote blockquote{margin:0;font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:clamp(2.25rem,1rem + 4.2vw,6rem);line-height:0.98;letter-spacing:-0.04em;max-width:17ch;text-wrap:balance;text-indent:-0.4em}
.fm-featurequote blockquote::before{content:"\201C";color:var(--plum-300)}
.fm-featurequote blockquote::after{content:"\201D";color:var(--plum-300)}
.fm-featurequote figcaption{font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--plum-200)}
.fm-featurequote figcaption strong{color:var(--white);font-weight:var(--fw-semibold)}

/* ---------- Chapter pill (floating progress) ---------- */
.fm-chapterpill{position:fixed;left:50%;bottom:var(--space-6);z-index:var(--z-sticky);display:flex;align-items:center;gap:var(--space-3);max-width:calc(100vw - 2rem);padding:0.375rem 0.375rem 0.375rem 1.25rem;background:color-mix(in oklch,var(--surface-inverse) 90%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--bg-page);border-radius:var(--radius-pill);box-shadow:var(--shadow-3);font-family:var(--font-ui);font-size:var(--fs-sm);transform:translateX(-50%);transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
@media (min-width:1200px){.fm-chapterpill--compact{display:none}}
.fm-chapterpill.is-hidden{opacity:0;transform:translate(-50%,1rem);pointer-events:none}
.fm-chapterpill__num{font-family:var(--font-display);font-weight:var(--fw-heavy);font-variant-numeric:tabular-nums;letter-spacing:-0.02em}
.fm-chapterpill__num span{opacity:0.5;font-weight:var(--fw-medium)}
.fm-chapterpill__title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:24ch;font-weight:var(--fw-medium)}
.fm-chapterpill .fm-iconbtn{color:inherit;width:2.25rem;height:2.25rem}
.fm-chapterpill .fm-iconbtn:hover{background:oklch(50% 0 0 / 0.25);color:inherit}
.fm-chapterpill__toggle{display:flex;align-items:center;gap:var(--space-3);min-width:0;background:none;border:0;padding:0.25rem 0;color:inherit;font:inherit;cursor:pointer}
.fm-chapterpill__toggle .bi{opacity:0.6;font-size:0.8em}
.fm-chapterpill__panel{position:absolute;left:50%;bottom:calc(100% + 0.625rem);transform:translateX(-50%);width:min(24rem,calc(100vw - 2rem));max-height:60vh;overflow:auto;padding:var(--space-3);background:var(--surface-raised);color:var(--text-2);border:var(--border-width) solid var(--border-1);border-radius:var(--radius-lg);box-shadow:var(--shadow-4)}
.fm-chapterpill__panel ol{list-style:none;margin:0;padding:0}
.fm-chapterpill__panel a{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:var(--space-2);padding:0.6rem 0.75rem;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-2);font-size:0.9375rem}
.fm-chapterpill__panel a:hover{background:var(--accent-softer);color:var(--text-1)}
.fm-chapterpill__panel .is-active a{background:var(--accent-soft);color:var(--text-1);font-weight:var(--fw-semibold)}
.fm-chapterpill__panel b{font-family:var(--font-display);font-weight:var(--fw-heavy);color:var(--text-accent);font-variant-numeric:tabular-nums}
.fm-chapterpill__bar{position:absolute;left:1.25rem;bottom:0;max-width:calc(100% - 2.5rem);height:2px;border-radius:2px;background:var(--plum-400);transition:width var(--dur-base) var(--ease-out)}

/* ---------- Feature quote without photo ---------- */
.fm-featurequote--brand{background:var(--gradient-brand);min-height:0}
.fm-featurequote--brand .fm-featurequote__inner{padding-block:clamp(4rem,8vw,8rem)}

/* ---------- Chapter head (Folio layout) ---------- */
.fm-chapterhead{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2) var(--space-7);align-items:end;margin-top:var(--space-section);padding:var(--space-8) var(--space-7) var(--space-7) 0;border-top:var(--border-width-strong) solid var(--border-strong);scroll-margin-top:calc(var(--header-h) + var(--space-5))}
.fm-chapterhead::before{content:"";position:absolute;inset:0 0 0 -2rem;z-index:-1;pointer-events:none;background:var(--texture-graph);-webkit-mask-image:var(--mask-edges);mask-image:var(--mask-edges);-webkit-mask-composite:source-in;mask-composite:intersect}
.fm-chapterhead__num{grid-row:span 2;font-family:var(--font-display);font-weight:var(--fw-black);font-size:clamp(4rem,2.4rem + 4.4vw,8rem);line-height:0.76;letter-spacing:-0.065em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
[data-theme="hc"] .fm-chapterhead__num,[data-theme="hc-dark"] .fm-chapterhead__num{color:var(--accent);-webkit-text-stroke:0}
.fm-chapterhead__title{font-family:var(--font-display);font-weight:var(--fw-heavy);font-size:var(--fs-h2);line-height:1;letter-spacing:-0.035em;color:var(--text-1);margin:0;text-wrap:balance}
.fm-chapterhead__summary{font-family:var(--font-reading);font-style:italic;font-size:1.25rem;line-height:1.4;color:var(--text-2);margin:0;max-width:44ch}
@media (max-width:600px){.fm-chapterhead{grid-template-columns:1fr;padding-right:0}.fm-chapterhead__num{grid-row:auto}}

/* ---------- Screenshot frame ---------- */
.fm-shot{position:relative;margin:0;background:var(--surface-card);border:var(--border-width) solid var(--border-1);border-radius:var(--radius-md);box-shadow:var(--shadow-photo);overflow:hidden}
.fm-shot__bar{display:flex;align-items:center;gap:var(--space-3);height:2.25rem;padding:0 var(--space-4);background:var(--bg-subtle);border-bottom:var(--border-width) solid var(--border-1);font-family:var(--font-ui);font-size:0.75rem;font-weight:var(--fw-medium);color:var(--text-3)}
.fm-shot__dots{display:flex;gap:6px}
.fm-shot__dots span{width:9px;height:9px;border-radius:50%;background:var(--border-2)}
.fm-shot__app{margin-inline:auto;display:inline-flex;align-items:center;gap:0.4em;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fm-shot__body{position:relative}
.fm-shot__body>img{display:block;width:100%;height:auto}
.fm-shot__zoom{position:absolute;right:var(--space-3);top:var(--space-3);z-index:2;opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.fm-shot:hover .fm-shot__zoom{opacity:1}
.fm-shot__marker{position:absolute;z-index:2;display:grid;place-items:center;width:1.75rem;height:1.75rem;margin:-0.875rem 0 0 -0.875rem;border-radius:50%;background:var(--accent);color:var(--text-on-accent);font-family:var(--font-ui);font-weight:var(--fw-bold);font-size:0.8125rem;box-shadow:0 0 0 3px var(--surface-card),var(--shadow-2)}
.fm-shot__legend{list-style:none;margin:var(--space-3) 0 0;padding:0;display:grid;gap:var(--space-2);font-family:var(--font-ui);font-size:var(--fs-sm);color:var(--text-2)}
.fm-shot__legend li{display:flex;gap:var(--space-3);align-items:baseline}
.fm-shot__legend b{flex:none;display:inline-grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--accent-soft);color:var(--text-accent);font-size:0.75rem}
/* skeleton UI placeholder for missing screenshots */
.fm-skel{display:grid;grid-template-columns:22% minmax(0,1fr);aspect-ratio:var(--ratio,16 / 9);background:var(--surface-card)}
.fm-skel__side{background:var(--bg-sunken);padding:8% 12%;display:grid;align-content:start;gap:10%}
.fm-skel__side i{display:block;height:0.5rem;border-radius:2px;background:var(--border-1)}
.fm-skel__side i:nth-child(2){background:var(--accent-soft)}
.fm-skel__main{position:relative;padding:4% 5%;display:grid;align-content:start;gap:4%}
.fm-skel__h{height:0.9rem;width:40%;border-radius:2px;background:var(--border-2)}
.fm-skel__row{display:grid;grid-template-columns:30% 1fr;gap:4%;align-items:center}
.fm-skel__row i{display:block;height:0.45rem;border-radius:2px;background:var(--border-1)}
.fm-skel__row i+i{height:1.4rem;border:var(--border-width) solid var(--border-1);background:var(--bg-page);border-radius:3px}
.fm-skel__label{white-space:nowrap;max-width:90%;overflow:hidden;text-overflow:ellipsis;position:absolute;right:4%;bottom:6%;font-family:var(--font-ui);font-size:0.75rem;font-weight:var(--fw-medium);color:var(--text-4);background:var(--surface-card);padding:0.2rem 0.5rem;border-radius:var(--radius-xs);border:var(--border-width) dashed var(--border-2)}