/* Curated article photography; images stay within the reading experience. */
.article-figure{position:relative;margin:0;min-width:0}
.article-image-frame{width:100%;overflow:hidden;aspect-ratio:var(--image-ratio,auto)}
.article-image-open{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.article-image-open img{display:block;width:100%;height:auto;max-width:100%}
.article-zoom-mark{position:absolute;right:12px;top:12px;display:grid;place-items:center;width:32px;height:32px;background:var(--paper);color:var(--ink);border:1px solid #20211c26;border-radius:50%;font-size:22px;pointer-events:none;opacity:0;transition:opacity .15s}
.article-figure:hover .article-zoom-mark,.article-figure:focus-within .article-zoom-mark{opacity:1}
.article-figure figcaption{font-size:13px;line-height:1.5;margin:11px 0 0;color:var(--muted);max-width:600px}
.article-figure.is-scrollable .article-image-frame{height:520px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--ink) #deddd3;scrollbar-gutter:stable;background:#e9e7de}
.article-figure.is-scrollable .article-image-open{height:auto}
.article-figure.is-scrollable .article-image-open img{height:auto!important;aspect-ratio:auto!important;object-fit:contain!important}
.article-figure.is-scrollable .article-zoom-mark{opacity:1}
.learn-evidence .article-figure{background:none;padding:0}
.learn-evidence .learn-product-pair,.learn-evidence .learn-evidence-pair{gap:20px}
.learn-product-pair .article-image-frame{aspect-ratio:1.06}
.learn-product-pair .article-image-open img{height:100%}
.learn-evidence-pair .article-figure:not(.is-scrollable) .article-image-frame{height:520px}
.learn-evidence-pair .article-figure:not(.is-scrollable) .article-image-open img{height:100%}
.learn-participation{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.learn-participation .article-image-frame{aspect-ratio:1}

.learn-participation .article-image-open img{height:100%}
.learn-principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin:36px 0 0;padding:0;list-style:none!important}
.learn-prose .learn-principles>li{padding:18px 0 0!important;border-top:1px solid var(--ink);margin:0;color:var(--ink)}
.learn-principles>li::before{display:none!important}
.learn-principles .principle-number{display:block;font:44px/1 'Anton',Impact,sans-serif;color:var(--red);margin:0 0 24px}
.learn-principles h3{font-size:19px;line-height:1.3;letter-spacing:-.4px;margin:0 0 12px}
.learn-prose .learn-principles p{font-size:14px;line-height:1.65;margin:0}
.story-reading .story-media>div>.article-figure{width:100%;min-width:0}
.story-reading .story-media>div>.article-figure img{margin:0}
.story-reading .story-media .article-image-frame{height:100%}
.story-reading .story-media .is-scrollable .article-image-frame{height:520px}
.story-reading .story-media:has(.is-scrollable)>div{align-items:start}
.story-media-standard:has(.is-scrollable){max-width:580px;margin-inline:auto}
html.article-image-expanded{overflow:hidden;scrollbar-gutter:stable}
.article-lightbox{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;padding:64px 48px 36px;border:0;background:transparent;overflow:hidden;color:var(--paper)}
.article-lightbox::backdrop{background:rgb(24 25 22 / .88);backdrop-filter:blur(3px)}
.article-lightbox-scroll{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:auto;overscroll-behavior:contain;outline-offset:4px}
.article-lightbox img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;box-shadow:0 10px 60px #0004}
.article-lightbox.is-tall .article-lightbox-scroll{display:block;max-width:800px;margin:auto;scrollbar-width:thin}
.article-lightbox.is-tall img{max-height:none;width:100%;height:auto}
.article-lightbox-close{position:absolute;right:24px;top:14px;width:40px;height:40px;border:1px solid #fff7;border-radius:50%;font:30px/1 sans-serif;color:var(--paper);background:#23241f;display:grid;place-items:center;z-index:1}
.article-lightbox-close:hover{background:var(--red)}
/* Reference galleries share one aligned control rail. */
.reference-layout{max-width:1280px;margin:0 auto;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:38px;padding:28px 32px 44px}
.reference-visual{padding:0;background:transparent;min-width:0;width:100%}
.reference-info{padding:8px 0 0;min-width:0}
/* The visible creative and its controls share the same measured edges. */
.reference-visual .carousel-stage{min-height:0;max-height:none;background:transparent;grid-template-rows:minmax(0,1fr);margin:0;justify-items:start}
.reference-visual .carousel-stage .creative-image-open{background:transparent;display:block;min-height:0;height:100%;width:100%}
.reference-visual .carousel-stage img,.reference-visual .carousel-stage video{height:100%!important;width:100%!important;min-height:0;object-fit:contain;max-height:100%!important;object-position:left center}
/* Packaging retains its brand-colored square stage across cutouts and photographs. */
.reference-visual.is-packaging .carousel-stage{width:100%;height:auto;aspect-ratio:1;box-sizing:border-box;padding:clamp(20px,3vw,40px);background:var(--card-bg);place-items:center}
.reference-visual.is-packaging .carousel-stage .creative-image-open{display:grid;place-items:center;aspect-ratio:auto;padding:0;background:transparent;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
.reference-visual.is-packaging .carousel-stage img,.reference-visual.is-packaging .carousel-stage .packaging-cutout{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain;object-position:center;display:block}
.reference-visual.is-packaging .reference-controls{width:100%;box-sizing:border-box}
.reference-controls{display:flex;align-items:center;gap:18px;padding:14px 0 0;margin-top:14px;border-top:1px solid var(--line);min-width:0;max-width:100%}
.reference-controls:empty{display:none}
.reference-controls .carousel-thumbnails{flex:1;min-width:0;margin:0;padding:2px;gap:8px}
.reference-controls .carousel-thumbnails button{flex:0 0 44px;height:48px;padding:2px;background:transparent;border:1px solid transparent}
.reference-controls .carousel-thumbnails button[aria-pressed=true]{border:1px solid var(--ink);background:transparent;box-shadow:0 2px 0 var(--red)}
.reference-controls .creative-variants{display:grid;grid-template-columns:44px 46px 44px;gap:4px;padding:0;flex:none}
.reference-controls .creative-variants button{height:44px;min-height:44px;min-width:44px;width:44px;border:1px solid var(--red);background:var(--red);color:var(--paper);border-radius:50%;font:25px/1 sans-serif}
.reference-controls .creative-variants button:not(:disabled):hover{background:var(--ink);border-color:var(--ink)}
.reference-controls .creative-variants button:disabled{background:transparent;border-color:#20211c50;color:#20211c70;opacity:1}
.reference-controls .creative-variants #variant-count{min-width:0;font-size:12px;white-space:nowrap}
@media(max-width:900px){.reference-layout{gap:26px}.reference-controls{gap:12px}}
@media(max-width:700px){
 .reference-layout{padding:22px 18px 32px;gap:22px}.reference-info{padding:0}
 .reference-controls{gap:10px}.reference-controls .carousel-thumbnails button{flex-basis:36px;height:42px}
 .learn-evidence .learn-product-pair{gap:12px}.learn-evidence .learn-evidence-pair{grid-template-columns:1fr;gap:28px}
 .article-figure.is-scrollable .article-image-frame,.story-reading .story-media .is-scrollable .article-image-frame{height:440px}
 .learn-evidence-pair .article-figure:not(.is-scrollable) .article-image-frame{height:auto;aspect-ratio:1088/1440}
 .learn-participation{gap:12px}
 .article-figure figcaption{font-size:12px;line-height:1.5}.article-zoom-mark{opacity:1;width:28px;height:28px;right:8px;top:8px;font-size:20px}
 .learn-principles{grid-template-columns:1fr;gap:22px}.learn-prose .learn-principles>li{display:grid;grid-template-columns:48px 1fr;gap:0 14px}.learn-principles .principle-number{grid-row:1/3;font-size:34px;margin:0}.learn-principles h3{margin:0 0 7px}
 .article-lightbox{padding:64px 16px 24px}.article-lightbox-close{right:14px}.article-lightbox.is-tall .article-lightbox-scroll{max-width:100%}
}
@media(prefers-reduced-motion:reduce){.article-zoom-mark{transition:none}}

.article-zoom-button{position:absolute;right:12px;top:12px;width:40px;height:40px;display:grid;place-items:center;border:1px solid #20211c26;border-radius:50%;background:var(--paper);color:var(--ink);font:24px/1 sans-serif;cursor:zoom-in}
.article-figure.is-scrollable .article-image-frame>img{width:100%;height:auto!important;aspect-ratio:var(--image-ratio,auto)!important;object-fit:contain!important;cursor:zoom-in}

/* Natural image proportions prevent article photography from becoming accidental banners. */
.story-reading .story-media:not(:has(.is-scrollable)) .article-image-frame{height:auto}
.story-reading .story-media .article-image-open{height:auto}
.story-reading .story-media-standard .article-image-open img,.story-reading .story-media-wide .article-image-open img{height:auto;max-height:none;aspect-ratio:auto}
.story-reading .story-media-pair .article-image-frame{aspect-ratio:1}
.story-reading .story-media-pair .article-image-open,.story-reading .story-media-pair .article-image-open img{height:100%;aspect-ratio:auto;object-fit:contain!important}
.story-reading .story-media-trio .article-image-frame{aspect-ratio:3/2}
.story-reading .story-media-trio .article-image-open,.story-reading .story-media-trio .article-image-open img{height:100%;aspect-ratio:auto;object-fit:contain!important}
.learn-participation .article-image-open img{object-fit:cover!important}

/* All browsing introductions use the same position and a two-line measure. */
.browse-hero{grid-template-columns:minmax(0,1fr) minmax(260px,320px)}
.browse-hero-description{width:100%;max-width:none;justify-self:start;text-wrap:initial;margin-bottom:3px}
@media(min-width:701px) and (max-width:850px){.browse-hero{grid-template-columns:minmax(0,1fr) 260px;gap:20px}.browse-hero-title{gap:12px}}
@media(max-width:700px){.browse-hero{grid-template-columns:1fr}.browse-hero-description{margin:0;font-size:14px;line-height:1.65}}

/* A compact anniversary calendar, with the dates as the visual hierarchy. */
.story-reading .story-calendar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;margin:32px 0 38px;padding:0;background:#eee4d2;border-top:4px solid #b44727;color:#37291e}
.story-reading .story-calendar li{padding:22px 22px 24px!important;margin:0;border-left:1px solid #b4472740}
.story-reading .story-calendar li:first-child{border-left:0}
.story-reading .story-calendar li::before{display:none}
.story-calendar time{display:flex;flex-direction:column;margin-bottom:22px;color:#ac3b20}
.story-calendar time span{font:12px/1.3 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase}
.story-calendar time strong{font:64px/1.15 'Anton',Impact,sans-serif;margin-top:4px}
.story-reading .story-calendar p{font-size:14px;line-height:1.65;margin:0}
/* The three prices read as one calculation rather than a colored spreadsheet. */
.story-reading .story-stat-strip,.story-reading .story-stat-strip.is-in-view{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:var(--ink);color:var(--paper);border:0;margin:32px 0 36px;padding:30px 8px;transition:none}
.story-reading .story-stat-strip>div{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:0 24px;border:0;background:transparent;min-width:0}
.story-reading .story-stat-strip>div+div::before{content:'−';position:absolute;left:-10px;top:8px;font:25px/1 sans-serif;color:#aaa99c}
.story-reading .story-stat-strip>div:last-child::before{content:'='}
.story-reading .story-stat-strip strong{font:clamp(32px,3.5vw,46px)/1.2 'Anton',Impact,sans-serif;letter-spacing:0;min-height:0;color:var(--paper)}
.story-reading .story-stat-strip>div:last-child strong{color:#f6967d}
.story-reading .story-stat-strip span{margin:0;font-size:12px;line-height:1.5;max-width:135px;color:#d9d6cc}
.story-reading .story-table-wrap,.story-reading .story-table-wrap.is-in-view{background:transparent;border-top:2px solid var(--ink);transition:none}
.story-reading .story-table-wrap thead{background:#e7e4d9}
@media(max-width:700px){
 .story-reading .story-calendar{grid-template-columns:1fr}
 .story-reading .story-calendar li{display:grid;grid-template-columns:80px 1fr;align-items:center;gap:20px;padding:20px!important;border-left:0;border-top:1px solid #b4472740}
 .story-reading .story-calendar li:first-child{border-top:0}.story-calendar time{margin:0}.story-calendar time strong{font-size:48px}
 .story-reading .story-stat-strip,.story-reading .story-stat-strip.is-in-view{grid-template-columns:1fr;padding:4px 22px}
 .story-reading .story-stat-strip>div{display:grid;grid-template-columns:110px 1fr;gap:20px;align-items:center;padding:22px 0;border:0}
 .story-reading .story-stat-strip>div+div{border-top:1px solid #f5f2e930}
 .story-reading .story-stat-strip>div+div::before{left:auto;right:0;top:-13px;background:var(--ink);padding-left:10px;font-size:22px}
 .story-reading .story-stat-strip strong{font-size:36px}.story-reading .story-stat-strip span{max-width:none}
}

@media(min-width:701px){.learn-evidence-pair .article-image-frame,.learn-evidence-pair .is-scrollable .article-image-frame{height:auto;aspect-ratio:1088/1440}}

/* Related reading uses the existing article cards and stays below the brand library. */
.brand-editorial{max-width:1280px;margin:0 auto;padding:24px 32px 60px;border-top:1px solid var(--line)}
.brand-editorial>h2{font-size:32px;letter-spacing:-1px;margin:18px 0 28px}
.brand-editorial .learn-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.brand-name-fallback{font-size:26px;font-weight:700}
@media(max-width:700px){.brand-editorial{padding:20px 18px 36px}.brand-editorial .learn-grid{grid-template-columns:1fr}.brand-editorial>h2{font-size:28px}}

/* v14: curated Figma articles. Keep this system separate from browse and reference media. */
.cpg-editorial{max-width:1184px;margin:0 auto;padding:30px 32px 72px;color:var(--ink)}
.cpg-editorial .campaign-breadcrumb{margin:0;padding:0;border:0}
.editorial-opening{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:1fr 1fr;gap:20px 48px;min-height:580px;margin:44px 0 56px}
.editorial-heading{grid-column:1;grid-row:1;align-self:end;min-width:0}
.editorial-heading .story-type{display:inline-flex;margin:0 0 20px}
.editorial-heading .editorial-meta{font:12px/1.5 'Space Mono',monospace;margin:0 0 18px}
.editorial-heading h1{font:clamp(42px,4.2vw,60px)/1.04 'Anton',Impact,sans-serif;letter-spacing:-.015em;text-transform:uppercase;margin:0;text-wrap:pretty}
.editorial-lead{grid-column:2;grid-row:1/3;align-self:center;aspect-ratio:1;margin:0;overflow:hidden;min-width:0}
.editorial-lead img{display:block;width:100%;height:100%;object-fit:cover}
.editorial-introduction{grid-column:1;grid-row:2;align-self:start}
.editorial-introduction p{font-size:17px;line-height:1.8;margin:0}
.editorial-introduction .editorial-deck{font-size:24px;line-height:1.45;margin-bottom:20px}
.editorial-facts{display:grid;grid-template-columns:repeat(var(--facts),minmax(0,1fr));gap:24px;border-block:1px solid var(--line);margin:0 0 56px;padding:22px 0}
.editorial-facts dt{font:11px/1.5 'Space Mono',monospace;margin:0 0 8px}
.editorial-facts dd{font-size:14px;line-height:1.5;margin:0}
.editorial-body{display:grid;gap:56px}
.editorial-chapter{min-width:0}
.editorial-prose{max-width:730px;margin-inline:auto}
.editorial-prose h2{font-size:30px;line-height:1.3;letter-spacing:-.5px;margin:0 0 22px;text-wrap:pretty}
.editorial-prose h2::before{content:'';display:block;width:28px;height:3px;background:var(--red);margin:0 0 24px}
.editorial-prose p{font-size:17px;line-height:1.8;margin:0 0 20px}
.editorial-prose p:last-child{margin-bottom:0}
.editorial-prose a{text-decoration:underline;text-underline-offset:3px}
.editorial-photo{position:relative;margin:28px 0 0;overflow:hidden}
.editorial-photo img{display:block;width:100%;height:auto}
.editorial-pool{aspect-ratio:1120/500}
.editorial-pool img{height:100%;object-fit:cover;object-position:center}
.editorial-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:28px}
.editorial-pair .editorial-photo{aspect-ratio:1;margin:0}
.editorial-pair img{height:100%;object-fit:cover}
.editorial-application img{object-position:center 40%}
.editorial-email{width:min(100%,600px);margin:28px auto 0}
.editorial-email>div{height:620px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-gutter:stable;scrollbar-color:var(--ink) var(--paper)}
.editorial-email img{display:block;width:100%;height:auto}
.editorial-archive{max-width:850px;margin-inline:auto}
.editorial-founder{width:min(100%,730px);aspect-ratio:730/360;margin-inline:auto}
.editorial-founder img{position:absolute;max-width:none;width:104.23913%;height:auto;left:-3.47826%;top:0;transform:translateY(-12.99505%)}
.editorial-timeline{max-width:730px;list-style:none;margin:32px auto 0;padding:0;position:relative}
.editorial-timeline li:not(:last-child)::after{content:'';position:absolute;left:3px;top:28px;height:100%;width:1px;background:var(--red)}
.editorial-timeline li{position:relative;display:grid;grid-template-columns:92px 1fr;gap:20px;padding:18px 0 18px 24px}
.editorial-timeline li::before{content:'';position:absolute;top:25px;left:0;width:7px;height:7px;border-radius:50%;background:var(--red)}
.editorial-timeline time{font:13px/1.6 'Space Mono',monospace}
.editorial-timeline h3{font-size:18px;line-height:1.55;margin:0 0 6px}
.editorial-timeline p{font-size:16px;line-height:1.55;margin:0}
.editorial-calendar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;list-style:none;margin:28px 0 0;padding:0}
.editorial-calendar .editorial-photo{margin:0 0 16px;aspect-ratio:357.33/245}
.editorial-calendar img{height:100%;object-fit:cover}
.editorial-calendar time{display:block;border-top:1px solid var(--ink);padding-top:16px;font-size:28px;font-weight:700;line-height:1.4}
.editorial-calendar p{font-size:16px;line-height:1.7;margin:10px 0 0}
.editorial-deal{max-width:730px;margin:28px auto 0;border-top:1px solid var(--ink);padding-top:22px}
.editorial-deal strong,.editorial-deal span{display:block}
.editorial-deal-total strong{font-size:42px;line-height:1.3;letter-spacing:-1.5px}
.editorial-deal span{font-size:13px;line-height:1.5;margin-top:6px}
.editorial-deal-bar{display:flex;height:52px;margin:22px 0}
.editorial-deal-bar span{margin:0;background:var(--ink);flex:165}
.editorial-deal-bar span+span{background:var(--red);flex:30}
.editorial-deal-parts{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.editorial-deal-parts strong{font-size:28px;line-height:1.4;letter-spacing:-.5px}
.editorial-deal-parts>div+div strong{color:var(--red)}
.cpg-editorial .campaign-story-end{margin-top:56px}
.editorial-related{border-top:1px solid var(--line);margin-top:56px;padding-top:36px}
.editorial-related>h2{font-size:32px;letter-spacing:-1px;margin:0 0 28px}
.editorial-related .learn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.editorial-related .campaign-media{aspect-ratio:4/3}
.editorial-related .learn-card h2,.editorial-related .campaign-card h2{font-family:'DM Sans',sans-serif;font-weight:700;font-size:26px;line-height:1.35;letter-spacing:-.5px;text-transform:none}
@media(max-width:1000px){
 .editorial-opening{gap:20px 32px;min-height:0}
 .editorial-introduction .editorial-deck{font-size:21px}
 .editorial-calendar{gap:18px}
}
@media(max-width:700px){
 .cpg-editorial{padding:24px 20px 48px}
 .editorial-opening{display:flex;flex-direction:column;gap:24px;margin:30px 0 40px}
 .editorial-heading,.editorial-introduction{align-self:stretch}
 .editorial-heading .story-type{margin-bottom:16px}
 .editorial-heading .editorial-meta{font-size:11px;margin-bottom:16px}
 .editorial-heading h1{font-size:38px;line-height:1.04}
 .editorial-lead{width:100%}
 .editorial-introduction p,.editorial-prose p{font-size:16px;line-height:1.75}
 .editorial-introduction .editorial-deck{font-size:21px;line-height:1.45;margin-bottom:18px}
 .editorial-facts{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px;margin-bottom:40px}
 .editorial-body{gap:40px}
 .editorial-prose h2{font-size:26px;line-height:1.3;margin-bottom:18px}
 .editorial-prose h2::before{margin-bottom:20px}
 .editorial-photo,.editorial-pair,.editorial-email,.editorial-calendar{margin-top:24px}
 .editorial-pool{aspect-ratio:350/230}
 .editorial-pair{gap:12px}
 .editorial-email>div{height:460px}
 .editorial-founder{aspect-ratio:350/215}
 .editorial-founder img{transform:translateY(-8.04455%)}
 .editorial-timeline li{grid-template-columns:75px 1fr;gap:12px}
 .editorial-timeline time{font-size:12px}.editorial-timeline h3{font-size:17px}.editorial-timeline p{font-size:15px}
 .editorial-calendar{grid-template-columns:1fr;gap:28px}
 .editorial-calendar .editorial-photo{aspect-ratio:350/230}
 .editorial-calendar time{font-size:26px}
 .editorial-deal-parts{gap:18px}.editorial-deal-parts strong{font-size:26px}
 .editorial-related .learn-grid{grid-template-columns:1fr}
 .editorial-related .learn-card h2{font-size:26px}
 .cpg-editorial .campaign-story-end{margin-top:40px}
}