/* ============================================================
   THE EDITORIAL — scoped styles for the editorial reading experience
   and index. All selectors namespaced .agl-ed* to avoid collisions.
   Native to the Architectural Noir token layer (--agl-*).
   ============================================================ */

/* ---- scroll progress bar (fixed top) ---------------------------------- */
.agl-ed-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--agl-gold);z-index:9999;transition:width .1s linear}

/* ---- utility bar (back / visit galleria) ------------------------------ */
.agl-ed-util{display:flex;justify-content:space-between;align-items:center;padding:18px var(--agl-inline);border-bottom:1px solid var(--agl-hairline-soft);background:var(--agl-noir-950)}
.agl-ed-util a{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--agl-stone-500);text-decoration:none;font-variation-settings:"wdth" 112;transition:color var(--agl-t-base) var(--agl-ease)}
.agl-ed-util a:hover{color:var(--agl-gold)}

/* ---- article shell ---------------------------------------------------- */
.agl-ed{background:var(--agl-noir-950);color:var(--agl-ivory)}
.agl-ed__inner{max-width:1600px;margin-inline:auto;padding-inline:clamp(28px,4vw,72px)}
/* reading column width for prose (centered within the wider inner) */
.agl-ed__col{max-width:760px;margin-inline:auto}

/* ---- hero -------------------------------------------------------------- */
.agl-ed__hero{padding:88px 0 56px}
/* header gets a wider column than the body prose — title/deck are display, not
   reading content, so they breathe at a larger width. */
.agl-ed__headcol{max-width:1040px;margin-inline:auto}
.agl-ed__kicker{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--agl-gold);font-weight:500;font-variation-settings:"wdth" 112}
.agl-ed__title{font-family:var(--agl-display);font-weight:400;font-size:clamp(40px,5.4vw,82px);line-height:1.04;margin:22px 0 0;max-width:22ch}
.agl-ed__deck{font-family:var(--agl-display);font-style:italic;font-size:clamp(19px,2vw,24px);line-height:1.5;color:var(--agl-stone-300);margin-top:26px;max-width:52ch}
.agl-ed__meta{display:flex;align-items:center;gap:14px;margin-top:30px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112}
.agl-ed__meta .b{color:var(--agl-gold)}
.agl-ed__meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5}

/* ---- full-bleed hero image -------------------------------------------- */
.agl-ed__lead{margin:40px auto 0;aspect-ratio:3/2;overflow:hidden;background:var(--agl-noir-900)}
.agl-ed__lead img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- prose ------------------------------------------------------------- */
/* Weight 300 + size 17 matches the rest of the site's Archivo body (which is
   300), just sized up for long-form reading. */
.agl-ed__body{padding:70px 0 40px;font-family:var(--agl-body);font-weight:300;font-size:17px;line-height:1.8;color:var(--agl-stone-300)}
.agl-ed__body p{margin:0 0 24px}
.agl-ed__body a{color:var(--agl-gold);text-decoration:none;border-bottom:1px solid rgba(200,183,138,.4);transition:border-color var(--agl-t-base) var(--agl-ease)}
.agl-ed__body a:hover{border-color:var(--agl-gold)}
.agl-ed__body strong{color:var(--agl-ivory);font-weight:500}
/* drop cap on first paragraph of a section */
.agl-ed__body .has-dropcap::first-letter{font-family:var(--agl-display);font-weight:500;font-size:4.4em;line-height:.78;float:left;margin:6px 14px 0 0;color:var(--agl-gold)}

/* ---- section header (roman numeral + title) --------------------------- */
.agl-ed__section{margin:64px 0 30px}
.agl-ed__section .num{font-family:var(--agl-display);font-style:italic;font-size:15px;letter-spacing:.1em;color:var(--agl-gold);display:block;margin-bottom:10px}
.agl-ed__section h2{font-family:var(--agl-display);font-weight:400;font-size:clamp(28px,3.4vw,42px);line-height:1.1;margin:0}
.agl-ed__section h2 em{font-style:italic;color:var(--agl-gold)}

/* ---- pull quote -------------------------------------------------------- */
.agl-ed__quote{margin:48px 0;padding-left:26px;border-left:2px solid var(--agl-gold)}
.agl-ed__quote p{font-family:var(--agl-display);font-style:italic;font-size:clamp(22px,2.6vw,30px);line-height:1.4;color:var(--agl-ivory);margin:0}
.agl-ed__quote cite{display:block;margin-top:18px;font-family:var(--agl-body);font-style:normal;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112}

/* ---- inline figures (full reading width + wider landscape) ------------ */
.agl-ed__fig{margin:48px 0}
.agl-ed__fig img{width:100%;height:auto;display:block}
.agl-ed__fig figcaption{font-family:var(--agl-display);font-style:italic;font-size:14px;color:var(--agl-stone-500);margin-top:14px;text-align:center}
/* wide figure breaks out past the reading column */
.agl-ed__fig--wide{max-width:1100px;margin-inline:auto}

/* ---- reveal-on-scroll -------------------------------------------------- */
.agl-ed__reveal{opacity:0;transform:translateY(24px);transition:opacity 1s var(--agl-ease),transform 1s var(--agl-ease)}
.agl-ed__reveal.is-visible{opacity:1;transform:none}

/* ---- closing CTA band -------------------------------------------------- */
.agl-ed__cta{border-top:1px solid var(--agl-hairline-soft);margin-top:40px;padding:80px 0;text-align:center}
.agl-ed__cta .eyebrow{justify-content:center;margin-bottom:16px}
.agl-ed__cta h2{font-family:var(--agl-display);font-weight:400;font-size:clamp(30px,3.6vw,48px);line-height:1.08;margin:0 0 26px}
.agl-ed__cta h2 em{font-style:italic;color:var(--agl-gold)}

/* ---- responsive -------------------------------------------------------- */
@media (max-width:640px){
  .agl-ed__hero{padding:56px 0 40px}
  .agl-ed__body{padding:48px 0 30px;font-size:16px}
  .agl-ed__body .has-dropcap::first-letter{font-size:3.6em}
}
@media (prefers-reduced-motion:reduce){
  .agl-ed__reveal{opacity:1;transform:none;transition:none}
  .agl-ed-progress{display:none}
}

/* ============================================================
   THE EDITORIAL — INDEX ("magazine cover")
   ============================================================ */
.agl-ed-index{background:var(--agl-noir-950);color:var(--agl-ivory)}
.agl-edx__inner{max-width:var(--agl-page-max);margin-inline:auto;padding-inline:var(--agl-inline)}

/* hero — full-bleed image band (matches the site's .s-hero, smaller height) */
.agl-edx__hero{position:relative;min-height:54svh;display:flex;align-items:flex-end;background:var(--agl-noir-950);color:var(--agl-ivory);overflow:hidden;border-bottom:1px solid var(--agl-hairline-soft)}
.agl-edx__hero-bg{position:absolute;inset:0}
.agl-edx__hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.agl-edx__hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(11,11,10,.78) 0%,rgba(11,11,10,.5) 42%,rgba(11,11,10,.18) 78%),linear-gradient(180deg,rgba(11,11,10,.3) 0%,rgba(11,11,10,0) 34%,rgba(11,11,10,.66) 100%)}
.agl-edx__hero-in{position:relative;width:100%;max-width:var(--agl-page-max);margin-inline:auto;padding:0 var(--agl-inline) 64px}
.agl-edx__hero .eyebrow{margin-bottom:18px}
.agl-edx__hero h1{font-family:var(--agl-display);font-weight:500;font-size:clamp(40px,5vw,72px);line-height:1.04;margin:0;max-width:16ch}
.agl-edx__hero h1 em{font-style:italic;color:var(--agl-gold)}
.agl-edx__deck{font-family:var(--agl-display);font-style:italic;font-size:clamp(18px,2vw,23px);line-height:1.55;color:var(--agl-stone-300);margin-top:22px;max-width:52ch}

/* featured */
.agl-edx__feat{padding:72px 0;border-bottom:1px solid var(--agl-hairline-soft)}
.agl-edx__featlink{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;text-decoration:none;color:inherit}
.agl-edx__featimg{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--agl-noir-900)}
.agl-edx__featimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s var(--agl-ease)}
.agl-edx__featlink:hover .agl-edx__featimg img{transform:scale(1.04)}
.agl-edx__featkicker{display:block;font-size:11px;letter-spacing:.2em;color:var(--agl-gold);font-variation-settings:"wdth" 112;font-weight:500}
.agl-edx__feattitle{display:block;font-family:var(--agl-display);font-weight:400;font-size:clamp(32px,4vw,56px);line-height:1.06;margin-top:18px}
.agl-edx__featdeck{display:block;color:var(--agl-stone-300);font-size:16px;line-height:1.7;margin-top:20px;max-width:48ch}
.agl-edx__featcta{display:flex;align-items:center;gap:22px;margin-top:30px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--agl-gold);font-variation-settings:"wdth" 112}
.agl-edx__featcta .arr{margin-left:6px;transition:transform var(--agl-t-base) var(--agl-ease);display:inline-block}
.agl-edx__featlink:hover .agl-edx__featcta .arr{transform:translateX(5px)}
.agl-edx__featdate{color:var(--agl-stone-500)}

/* grid */
.agl-edx__grid-sec{padding:70px 0 120px}
.agl-edx__gridhead{font-family:var(--agl-display);font-weight:400;font-size:clamp(28px,3.4vw,44px);margin:0 0 36px}
.agl-edx__gridhead em{font-style:italic;color:var(--agl-gold)}
/* N° badge overlaid on card image (matches live index) */
.edcard .ei{position:relative}
.edcard__badge{position:absolute;top:14px;left:14px;background:rgba(11,11,10,.72);border:1px solid rgba(200,183,138,.4);color:var(--agl-gold);font-size:10px;letter-spacing:.18em;padding:6px 10px;font-variation-settings:"wdth" 112;backdrop-filter:blur(4px)}

@media (max-width:860px){
  .agl-edx__featlink{grid-template-columns:1fr;gap:28px}
  .agl-edx__featimg{aspect-ratio:3/2.4}
}

/* ============================================================
   THE EDITORIAL — spec card (the "The Material" callout that closes a section)
   ============================================================ */
.agl-ed__spec{margin:40px 0;padding:26px 28px;border:1px solid var(--agl-hairline);background:var(--agl-noir-900);display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;column-gap:24px;align-items:center}
.agl-ed__spec-label{grid-column:1;grid-row:1;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112}
.agl-ed__spec-name{grid-column:1;grid-row:2;font-family:var(--agl-display);font-weight:400;font-size:28px;line-height:1.1;margin:10px 0 0;color:var(--agl-ivory)}
.agl-ed__spec-desc{grid-column:1;grid-row:3;font-size:12px;letter-spacing:.04em;color:var(--agl-stone-300);margin-top:10px}
.agl-ed__spec-link{grid-column:2;grid-row:1 / 4;align-self:center;display:inline-flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--agl-gold);text-decoration:none;font-variation-settings:"wdth" 112;border:0;white-space:nowrap}
.agl-ed__spec-link .arr{transition:transform var(--agl-t-base) var(--agl-ease)}
.agl-ed__spec-link:hover .arr{transform:translateX(5px)}
@media (max-width:560px){.agl-ed__spec{grid-template-columns:1fr}.agl-ed__spec-link{grid-column:1;grid-row:auto;margin-top:16px;justify-content:flex-start}}

/* ============================================================
   THE EDITORIAL — single-post footer ("Continue reading" + CTA cards)
   ============================================================ */
.agl-ed__footer{border-top:1px solid var(--agl-hairline-soft);margin-top:60px;padding:80px 0}
.agl-ed__foothead{display:flex;justify-content:space-between;align-items:baseline;gap:24px;margin-bottom:40px}
.agl-ed__foothead h2{font-family:var(--agl-display);font-weight:400;font-size:clamp(26px,3vw,38px);margin:0}
.agl-ed__foothead h2 em{font-style:italic;color:var(--agl-gold)}
.agl-ed__footlink{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--agl-gold);text-decoration:none;white-space:nowrap;font-variation-settings:"wdth" 112}
.agl-ed__ctacards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.agl-ed__ctacard{border:1px solid var(--agl-hairline);background:var(--agl-noir-850);padding:34px 32px;transition:border-color var(--agl-t-base) var(--agl-ease)}
.agl-ed__ctacard:hover{border-color:rgba(244,242,237,.25)}
.agl-ed__ctacard .k{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112}
.agl-ed__ctacard h3{font-family:var(--agl-display);font-weight:400;font-size:24px;margin:12px 0 18px}
.agl-ed__ctacard a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--agl-gold);text-decoration:none;font-variation-settings:"wdth" 112}
.agl-ed__ctacard a .arr{display:inline-block;margin-left:6px;transition:transform var(--agl-t-base) var(--agl-ease)}
.agl-ed__ctacard a:hover .arr{transform:translateX(5px)}
@media (max-width:640px){.agl-ed__ctacards{grid-template-columns:1fr}}

/* ============================================================
   THE EDITORIAL — share row (end of article)
   ============================================================ */
.agl-ed__share{display:flex;align-items:center;gap:18px;max-width:760px;margin:48px auto 0;padding-top:28px;border-top:1px solid var(--agl-hairline-soft)}
.agl-ed__share-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112}
.agl-ed__share-btns{display:flex;gap:10px}
.agl-ed__share-btns a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--agl-hairline);border-radius:50%;color:var(--agl-stone-300);transition:border-color var(--agl-t-base) var(--agl-ease),color var(--agl-t-base) var(--agl-ease)}
.agl-ed__share-btns a:hover{border-color:var(--agl-gold);color:var(--agl-gold)}
.agl-ed__share-btns svg{width:16px;height:16px;display:block}

/* ============================================================
   THE EDITORIAL — footer goes full-width (not the 660 reading column)
   + related post tiles ("Continue reading")
   ============================================================ */
.agl-ed__footer{max-width:1600px;margin:60px auto 0;border-top:1px solid var(--agl-hairline-soft);padding:80px 0 90px}
.agl-ed__related{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:64px}
.agl-ed__rtile{display:block;text-decoration:none;color:inherit}
.agl-ed__rimg{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--agl-noir-900);margin-bottom:18px}
.agl-ed__rimg img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s var(--agl-ease)}
.agl-ed__rtile:hover .agl-ed__rimg img{transform:scale(1.04)}
.agl-ed__rkicker{display:block;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--agl-gold);font-variation-settings:"wdth" 112}
.agl-ed__rtitle{display:block;font-family:var(--agl-display);font-weight:400;font-size:23px;line-height:1.15;margin-top:10px}
.agl-ed__rdeck{display:block;font-size:14px;line-height:1.6;color:var(--agl-stone-500);margin-top:10px}
.agl-ed__ctacards{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.agl-ed__related{grid-template-columns:1fr;gap:32px}}
@media (max-width:640px){.agl-ed__ctacards{grid-template-columns:1fr}}

/* ============================================================
   THE EDITORIAL — category / tag archive header (SEO hubs)
   ============================================================ */
.agl-edx__archhead{padding:100px 0 40px;border-bottom:1px solid var(--agl-hairline-soft)}
.agl-edx__crumb{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112;margin-bottom:20px}
.agl-edx__crumb a{color:var(--agl-gold);text-decoration:none}
.agl-edx__crumb span{margin:0 8px;opacity:.5}
.agl-edx__archhead h1{font-family:var(--agl-display);font-weight:400;font-size:clamp(36px,4.4vw,60px);line-height:1.05;margin:0}
.agl-edx__archdesc{color:var(--agl-stone-300);font-size:16px;line-height:1.7;max-width:60ch;margin-top:18px}
.agl-edx__empty{color:var(--agl-stone-500);padding:40px 0}
/* pagination */
.agl-ed-index .pagination,.agl-ed-index .nav-links{display:flex;gap:14px;justify-content:center;margin-top:56px}
.agl-ed-index .page-numbers{font-size:12px;letter-spacing:.12em;color:var(--agl-stone-300);text-decoration:none;padding:8px 14px;border:1px solid var(--agl-hairline);transition:border-color var(--agl-t-base) var(--agl-ease),color var(--agl-t-base) var(--agl-ease)}
.agl-ed-index .page-numbers.current{color:var(--agl-gold);border-color:var(--agl-gold)}
.agl-ed-index .page-numbers:hover{border-color:var(--agl-gold);color:var(--agl-gold)}

/* ============================================================
   THE EDITORIAL — end-of-article tags + share block
   ============================================================ */
.agl-ed__endmeta{max-width:760px;margin:48px auto 0;padding-top:30px;border-top:1px solid var(--agl-hairline-soft)}
.agl-ed__tags{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:26px}
.agl-ed__tags-label{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112;margin-right:6px}
.agl-ed__tag{font-size:11px;letter-spacing:.06em;color:var(--agl-stone-300);text-decoration:none;padding:6px 13px;border:1px solid var(--agl-hairline);border-radius:100px;transition:border-color var(--agl-t-base) var(--agl-ease),color var(--agl-t-base) var(--agl-ease)}
.agl-ed__tag:hover{border-color:var(--agl-gold);color:var(--agl-gold)}
/* share now lives inside endmeta — drop its own border/margin */
.agl-ed__endmeta .agl-ed__share{max-width:none;margin:0;padding:0;border:0}

/* ============================================================
   THE EDITORIAL — wider, less-squished index/archive layout
   (overrides the shared .edgrid only within editorial surfaces)
   ============================================================ */
/* Give the editorial index + archives a more generous container: wider max
   and a smaller side inset than the default --agl-inline, so cards breathe. */
.agl-ed-index .agl-edx__inner,
.agl-ed-index .agl-edx__hero-in{max-width:1600px;padding-inline:clamp(28px,4vw,72px)}

/* Grid fills the full width and adapts to item count (no forced empty 3rd
   column when there are only 2 posts). min 300px keeps cards substantial. */
.agl-ed-index .edgrid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:28px}
/* When exactly 2 or 3 posts exist, auto-fit already fills the row. Cap visual
   density so a single leftover card doesn't stretch absurdly wide. */
.agl-ed-index .edgrid > .edcard{max-width:none}

/* slightly larger card titles to match the more generous scale */
.agl-ed-index .edcard .et{font-size:23px}

@media (max-width:760px){
	.agl-ed-index .edgrid{grid-template-columns:1fr}
}

/* ============================================================
   THE EDITORIAL — table of contents (auto-built from H2s)
   Sticky left-gutter rail on desktop + scroll-spy; <details> on mobile.
   Brand-skinned: gold active state, hairline rule, Cormorant title.
   ============================================================ */
.agl-ed__bodyshell{position:relative}

.agl-toc__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.agl-toc__title{font-family:var(--agl-display);font-style:italic;font-size:17px;color:var(--agl-stone-300);margin:0 0 14px}
.agl-toc__link{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;padding:8px 0 8px 14px;border-left:1px solid var(--agl-hairline);color:var(--agl-stone-500);text-decoration:none;border-bottom:0;transition:color var(--agl-t-base) var(--agl-ease),border-color var(--agl-t-base) var(--agl-ease)}
.agl-toc__n{font-size:10px;letter-spacing:.12em;color:var(--agl-gold-ink);font-variation-settings:"wdth" 112;transition:color var(--agl-t-base) var(--agl-ease)}
.agl-toc__t{font-size:13px;line-height:1.4;font-weight:300}
.agl-toc__link:hover{color:var(--agl-stone-300);border-left-color:var(--agl-stone-500)}
.agl-toc__link[aria-current="true"]{color:var(--agl-gold);border-left-color:var(--agl-gold)}
.agl-toc__link[aria-current="true"] .agl-toc__n{color:var(--agl-gold)}

/* click-to-scroll: smooth + land below the sticky header */
html{scroll-behavior:smooth}
.agl-ed__body h2,.agl-ed__section{scroll-margin-top:140px}

/* desktop: rail floats in the left gutter; body stays centered */
@media (min-width:1180px){
	.agl-toc--rail{position:absolute;top:0;left:clamp(28px,4vw,72px);width:210px;height:100%}
	.agl-toc--rail > .agl-toc__list{position:sticky;top:140px;max-height:calc(100vh - 180px);overflow-y:auto;overscroll-behavior:contain}
	.agl-toc--rail > .agl-toc__title{position:sticky;top:104px}
	.agl-toc--mobile{display:none}
}

/* below breakpoint: hide the rail, show the collapsible inline above the prose */
@media (max-width:1179px){
	.agl-toc--rail{display:none}
	.agl-toc--mobile{display:block;margin-bottom:8px;border:1px solid var(--agl-hairline);background:var(--agl-noir-900)}
	.agl-toc--mobile summary{cursor:pointer;list-style:none;padding:16px 20px;margin:0}
	.agl-toc--mobile summary::-webkit-details-marker{display:none}
	.agl-toc--mobile summary::after{content:"+";float:right;color:var(--agl-gold);font-family:var(--agl-display)}
	.agl-toc--mobile[open] summary::after{content:"\2212"}
	.agl-toc--mobile .agl-toc__list{padding:0 20px 16px}
}

/* ============================================================
   THE EDITORIAL — interactive modules (.agl-mod)
   Shared namespace; each module type adds its own block below.
   All sit at the wide figure width so they read as feature moments.
   ============================================================ */
.agl-mod{margin:48px auto;max-width:1100px}
.agl-mod figcaption,.agl-mod > figcaption{margin-top:14px;font-family:var(--agl-display);font-style:italic;font-size:15px;line-height:1.5;color:var(--agl-stone-500);text-align:center}

/* ---- compare: drag-to-wipe ---------------------------------------------- */
/* Portrait-friendly: these installation shots are tall (2:3), so the stage
   matches rather than cover-cropping a landscape frame. Capped + centered so it
   doesn't dominate the column. */
.agl-mod__compare{position:relative;overflow:hidden;aspect-ratio:3/4;max-height:80vh;margin-inline:auto;max-width:600px;background:var(--agl-noir-900);cursor:ew-resize;user-select:none;outline:none}
.agl-mod__compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.agl-mod__c-frontwrap{position:absolute;inset:0;width:50%;overflow:hidden;will-change:width;border-right:1px solid rgba(244,242,237,.25)}
/* the front image fills the FULL stage, so clipping the wrapper reveals/hides
   it without squishing — pin it to the compare box width via 100cqw-style. */
.agl-mod__c-front{position:absolute;top:0;left:0;height:100%;width:auto;max-width:none}
/* labels */
.agl-mod__c-label{position:absolute;bottom:18px;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--agl-ivory);font-variation-settings:"wdth" 112;padding:6px 12px;background:rgba(11,11,10,.55);backdrop-filter:blur(4px);border:1px solid var(--agl-hairline);pointer-events:none}
.agl-mod__c-label--front{left:18px}
.agl-mod__c-label--back{right:18px}
/* handle */
.agl-mod__c-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:rgba(244,242,237,.85);transform:translateX(-1px);pointer-events:none}
.agl-mod__c-grip{position:absolute;top:50%;left:50%;width:42px;height:42px;transform:translate(-50%,-50%);border-radius:50%;background:rgba(11,11,10,.55);border:1px solid var(--agl-gold);backdrop-filter:blur(4px)}
.agl-mod__c-grip::before,.agl-mod__c-grip::after{content:"";position:absolute;top:50%;width:0;height:0;border-block:5px solid transparent}
.agl-mod__c-grip::before{left:11px;border-right:7px solid var(--agl-gold);transform:translateY(-50%)}
.agl-mod__c-grip::after{right:11px;border-left:7px solid var(--agl-gold);transform:translateY(-50%)}
.agl-mod__compare:focus-visible{box-shadow:0 0 0 2px var(--agl-gold)}

/* ---- light toggle ------------------------------------------------------- */
.agl-mod__t-stage{position:relative;aspect-ratio:2/3;max-height:80vh;margin-inline:auto;max-width:560px;overflow:hidden;background:var(--agl-noir-900)}
.agl-mod__t-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .6s var(--agl-ease)}
.agl-mod__t-img.is-active{opacity:1}
.agl-mod__toggle{max-width:560px;margin-inline:auto}
.agl-mod__t-controls{display:flex;gap:0;margin-top:2px;border:1px solid var(--agl-hairline);border-top:0}
.agl-mod__t-btn{flex:1;background:var(--agl-noir-900);color:var(--agl-stone-500);border:0;border-left:1px solid var(--agl-hairline);padding:14px 10px;font-family:var(--agl-body);font-size:11px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;font-variation-settings:"wdth" 112;transition:color var(--agl-t-base) var(--agl-ease),background var(--agl-t-base) var(--agl-ease)}
.agl-mod__t-btn:first-child{border-left:0}
.agl-mod__t-btn:hover{color:var(--agl-stone-300)}
.agl-mod__t-btn.is-active{color:var(--agl-gold);background:var(--agl-noir-850)}

@media (max-width:560px){
	.agl-mod__c-label{display:none}
	.agl-mod__t-btn{padding:12px 6px;letter-spacing:.12em}
}

/* ---- hotspot (reuses .s-scene; editorial-specific framing) -------------- */
.agl-mod--hotspot{max-width:1100px}
.agl-mod__hs-frame{position:relative;overflow:hidden;aspect-ratio:16/10;max-width:none;margin-inline:0}
.agl-mod__hs-frame>img{width:100%;height:100%;object-fit:cover;display:block}
.agl-mod__hs-frame::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,9,.12),transparent 30%,transparent 72%,rgba(10,10,9,.30));pointer-events:none}
.agl-mod__hs-only{margin:0;font-family:var(--agl-display);font-weight:450;font-size:18px;color:var(--agl-ivory)}

/* ---- score bars (single comparison meter) ------------------------------ */
.agl-mod--scorebar{margin:26px auto;max-width:720px}
.agl-sc__bar{display:grid;grid-template-columns:118px 1fr 26px;align-items:center;gap:14px;margin:9px 0}
.agl-sc__bl{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112}
.agl-sc__track{height:3px;background:var(--agl-noir-850);position:relative;overflow:hidden}
.agl-sc__fill{position:absolute;left:0;top:0;height:100%;width:0;transition:width 1s var(--agl-ease)}
.agl-sc__fill--a{background:var(--agl-gold)}
.agl-sc__fill--b{background:var(--agl-stone-500)}
.agl-sc__val{font-family:var(--agl-display);font-size:16px;color:var(--agl-ivory);text-align:right}

/* ---- score total (closing line) ---------------------------------------- */
.agl-mod--scoretotal{display:flex;justify-content:space-between;max-width:720px;margin:40px auto;padding:20px 0;border-top:1px solid var(--agl-hairline);border-bottom:1px solid var(--agl-hairline);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--agl-stone-300);font-variation-settings:"wdth" 112}
.agl-mod--scoretotal strong{color:var(--agl-gold);font-family:var(--agl-display);font-size:18px;letter-spacing:0}

@media (max-width:560px){
	.agl-sc__bar{grid-template-columns:90px 1fr 22px;gap:10px}
}

/* ---- decision panels (When to Specify Each) ---------------------------- */
.agl-mod--decision{max-width:1000px;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.agl-dec__panel{border:1px solid var(--agl-hairline);background:var(--agl-noir-900);padding:32px 32px 36px}
.agl-dec__panel--primary{border-color:rgba(200,183,138,.4);background:linear-gradient(180deg,rgba(200,183,138,.05),transparent 60%),var(--agl-noir-900)}
.agl-dec__phead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--agl-hairline)}
.agl-dec__kicker{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--agl-stone-500);font-variation-settings:"wdth" 112}
.agl-dec__panel--primary .agl-dec__kicker{color:var(--agl-gold)}
.agl-dec__name{font-family:var(--agl-display);font-weight:400;font-size:26px;color:var(--agl-ivory);width:100%}
.agl-dec__when{font-family:var(--agl-display);font-style:italic;font-size:16px;color:var(--agl-stone-500)}
.agl-dec__list{list-style:none;margin:0;padding:0}
.agl-dec__item{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start;padding:11px 0;font-family:var(--agl-body);font-weight:300;font-size:14px;line-height:1.5;color:var(--agl-stone-300);border-bottom:1px solid var(--agl-hairline-soft);opacity:0;transform:translateY(8px);transition:opacity .5s var(--agl-ease),transform .5s var(--agl-ease)}
.agl-dec__item:last-child{border-bottom:0}
.agl-dec__item.is-in{opacity:1;transform:none}
.agl-dec__tick{position:relative;width:14px;height:14px;margin-top:3px;flex:none}
.agl-dec__tick::before,.agl-dec__tick::after{content:"";position:absolute;left:50%;top:50%;background:var(--agl-stone-500)}
.agl-dec__tick::before{width:12px;height:1px;transform:translate(-50%,-50%)}
.agl-dec__tick::after{width:1px;height:12px;transform:translate(-50%,-50%)}
.agl-dec__panel--primary .agl-dec__tick::before,.agl-dec__panel--primary .agl-dec__tick::after{background:var(--agl-gold)}
@media (max-width:760px){
	.agl-mod--decision{grid-template-columns:1fr;gap:18px}
}