/* Typography stays on explicit steps. Only image-only artwork scales to fit. */
:root{--text-small:10px;--text-label:12px;--text-body:16px;--text-intro:18px;--text-title:38px;--text-subtitle:24px;--example-display:112px;--example-heading:64px;--example-subheading:32px;--sample-padding:40px;--mobile-bar:calc(64px + env(safe-area-inset-top))}
main{container-type:inline-size}
[data-section-header]{overflow:visible}
[data-section-header] h2{font-size:var(--text-title);line-height:1.12;text-wrap:balance}
[data-section-header] h3,.guideline-section>div>h3{font-size:var(--text-subtitle);line-height:1.2}
[data-section-header] p{font-size:var(--text-body)!important;line-height:1.5!important;max-width:68ch}
[data-section-header]:has(h2) p{font-size:var(--text-intro)!important}
[data-section-header] li{font-size:var(--text-body);line-height:1.5}
.mobile-header{display:none}
/* The cover's photo and wordmark resize; its small metadata doesn't. */
.cover>[data-node-id]{width:100%;height:100%;transform:none!important}
.cover .d594{width:100%;height:100%!important;padding:32px 36px}
.cover .d597{font-size:12px;line-height:1.4;gap:24px}
.cover .d598{width:auto;gap:64px}
.cover .d599,.cover .d601{width:auto;height:auto}
.cover .d602{left:36px;right:36px;bottom:36px!important;top:auto!important;width:auto;height:auto;aspect-ratio:1368/138.445}
.cover .d602 img{width:100%!important;height:auto!important}
/* Readable examples occupy natural height instead of shrinking a 1098px canvas. */
.artwork-viewport[data-reading-viewport]{aspect-ratio:auto!important;overflow:visible}
.artwork-viewport>[data-reading-layout]{position:relative;width:100%!important;height:auto!important;transform:none!important;min-height:0;padding:var(--sample-padding);overflow:hidden}
.artwork-viewport>[data-reading-layout] :is(p,span){text-box-trim:none}
[data-reading-layout] .d474{flex-wrap:wrap;gap:8px 20px;white-space:normal;font-size:12px;line-height:1.4}
[data-reading-layout] .d472{gap:48px}
[data-reading-layout] :is(.d473,.d479){width:100%}
[data-reading-layout] .d476{font-size:var(--example-heading);width:100%;min-width:0;line-height:1.1}
[data-reading-layout] .d478{font-size:18px;line-height:1.5;width:100%;min-width:0;max-width:65ch}
[data-reading-layout] .d480{font-size:14px;width:100%;min-width:0}
[data-reading-layout] :is(.d467,.d470){font-size:var(--example-display);letter-spacing:-.03em;line-height:1.1}
[data-reading-layout].d466{min-height:360px}
[data-reading-layout].d462{min-height:420px;padding:0}
[data-reading-layout].d462 :is(.d463,.d465){width:calc(100% - 64px);height:auto;font-size:var(--example-display);line-height:1.05;letter-spacing:-.03em}
[data-reading-layout] .motion-control{font-size:12px;padding:12px;min-height:44px;right:16px;bottom:16px}
[data-reading-layout] .d456{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:16px}
[data-reading-layout] .d481{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:baseline;gap:20px;min-width:0}
[data-reading-layout] :is(.d484,.d485,.d486,.d488,.d489,.d490){white-space:normal;min-width:0;flex-shrink:1}
[data-reading-layout] .d484{font-size:var(--example-heading)}
[data-reading-layout] .d485{font-size:var(--example-subheading)}
[data-reading-layout] .d486{font-size:28px}
[data-reading-layout] .d488{font-size:24px}
[data-reading-layout] :is(.d483,.d487){font-size:12px;line-height:1.4}
/* Gradient examples: consistent reading sizes, with cards that can form one column. */
[data-reading-layout] .d659{width:100%;gap:24px;padding:24px 0}
[data-reading-layout] .d660{font-size:var(--example-heading);width:100%;max-width:680px;line-height:1.1}
[data-reading-layout] .d664{font-size:16px;width:100%;max-width:390px;line-height:1.5}
[data-reading-layout] .d661{height:140px}
[data-reading-layout] :is(.d667,.d670){font-size:12px}
[data-reading-layout] .d671{width:100%}
[data-reading-layout] .d672{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:18px}
[data-reading-layout] :is(.d673,.d678,.d687){width:100%;height:auto;min-height:400px;padding:24px;min-width:0}
[data-reading-layout] .d674{font-size:24px;max-width:100%;width:220px}
[data-reading-layout] :is(.d677,.d685){font-size:10px;line-height:1.4;max-width:100%}
[data-reading-layout] .d676{min-height:140px}
[data-reading-layout] .d679{font-size:14px;line-height:1.2}
[data-reading-layout] .d678 .sample-stat-ring{color:#fffef8}
[data-reading-layout] .d687{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;min-height:460px}
[data-reading-layout] .d688{font-size:20px;width:auto;justify-content:flex-start;line-height:1.2}
[data-reading-layout] .d689{height:auto;display:block;border-left:3px solid transparent;border-image:linear-gradient(#ce3a14,#e9ccd9,#224a7b) 1;padding-left:16px}
[data-reading-layout] .d690{display:none}
[data-reading-layout] .d694{width:100%;height:100%;gap:32px}
[data-reading-layout] .d695{gap:24px}
[data-reading-layout] :is(.d696,.d699){width:100%;gap:8px}
[data-reading-layout] .d697{font-size:16px;line-height:1.2}
[data-reading-layout] .d698{font-size:10px;line-height:1.5}
[data-reading-layout] .d700{height:auto;width:100%}
[data-reading-layout] .d700>div{display:none}
[data-reading-layout] .d701{position:static;font:500 10px/1.2 'Die Grotesk A',Arial,sans-serif;letter-spacing:0;white-space:normal}
/* Palette labels and downloads never inherit artwork transforms. */
[data-reading-layout].d236{padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
[data-reading-layout].d236>button,[data-reading-layout].d236>div{position:relative;inset:auto;width:100%;height:200px;min-width:0;grid-area:auto;flex:none}
[data-reading-layout].d236>.gradient-swatch{grid-column:auto}
[data-reading-layout].d236 :is(.d238,.d249,.d245){font-size:12px;line-height:1.4;max-width:100%}
[data-reading-layout].d236 .d243{width:auto;font-size:12px}
[data-reading-layout].d236 .d242{width:100%;height:100%}
[data-reading-layout].d236 .gradient-swatch>img{width:100%;height:100%;object-fit:cover}
.color-swatch{min-width:0}
/* Original vectors, with independent captions. */
.illustration-gallery{width:100%;border-radius:8px;background:#fbfaf8;color:#1b1414;padding:40px}
.illustration-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px 24px}
.illustration-tile{margin:0;display:flex;flex-direction:column;align-items:center;gap:16px;min-width:0}
.illustration-tile figcaption{font:500 12px/1.4 Inter,Arial,sans-serif;text-align:center}
.illustration-graphic{position:relative!important;width:100%!important;height:150px!important;margin:0!important;display:grid;place-items:center}
.illustration-graphic>div{position:relative!important;inset:auto!important;margin:0!important;max-width:100%;max-height:150px}
.illustration-graphic img{max-width:100%!important;max-height:140px!important;object-fit:contain}
/* Diagram dimensions are labels, so hold the 10px floor after the image transform. */
[data-node-id='55:634'] p{font-size:max(12px,calc(10px / var(--art-scale,1)))!important}
@container(max-width:1000px){
 .artwork-viewport>[data-reading-layout]{--example-display:80px;--example-heading:48px;}
 [data-reading-layout] .d672{grid-template-columns:1fr}
 [data-reading-layout] :is(.d673,.d678,.d687){max-width:440px;margin-inline:auto;min-height:400px}
 [data-reading-layout] .d687{min-height:460px}
}
@container(max-width:700px){
 .artwork-viewport>[data-reading-layout]{--sample-padding:24px;--example-display:48px;--example-heading:36px;--example-subheading:30px}
 [data-reading-layout].d466{min-height:280px}
 [data-reading-layout].d462{min-height:320px}
 [data-reading-layout] .d456{grid-template-columns:1fr;gap:8px}
 [data-reading-layout] .d456>.d46{padding-left:74px}
 [data-reading-layout].d236{grid-template-columns:repeat(2,minmax(0,1fr))}
 [data-reading-layout].d236>button,[data-reading-layout].d236>div{height:180px}
 [data-reading-layout].d236>.color-swatch:first-child{grid-column:1/-1}
 .illustration-gallery{padding:24px}
 .illustration-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
 .illustration-graphic{height:130px!important}
 .illustration-graphic img{max-height:120px!important}
}
@container(max-width:380px){
 .artwork-viewport>[data-reading-layout]{--sample-padding:20px;--example-display:36px;--example-heading:30px;--example-subheading:26px}
 [data-reading-layout] .d481{grid-template-columns:42px minmax(0,1fr);gap:12px}
 [data-reading-layout] .d456>.d46{padding-left:54px}
 [data-reading-layout] .d486{font-size:24px}
 .illustration-tile figcaption{font-size:10px}
}
@media(max-width:900px){
 :root{--text-title:32px;--text-subtitle:22px;--text-intro:16px}
 html{scroll-padding-top:calc(var(--mobile-bar) + 24px)}
 body{padding-top:var(--mobile-bar)}
 body.menu-open{overflow:hidden}
 .mobile-header{display:flex;position:fixed;inset:0 0 auto;z-index:60;height:var(--mobile-bar);padding:env(safe-area-inset-top) 20px 0;align-items:center;justify-content:space-between;background:var(--paper);border-bottom:1px solid var(--line)}
 .mobile-brand{display:flex;align-items:center;min-height:44px}
 .menu-toggle{display:flex;gap:12px;align-items:center;min-height:44px;min-width:80px;justify-content:flex-end;font-size:14px}
 .menu-icon{width:18px;height:18px;position:relative}
 .menu-icon:before,.menu-icon:after{content:'';position:absolute;left:0;top:6px;width:18px;height:1px;background:currentColor}
 .menu-icon:after{top:12px}
 .menu-toggle[aria-expanded=true] .menu-icon:before{top:9px;transform:rotate(45deg)}
 .menu-toggle[aria-expanded=true] .menu-icon:after{top:9px;transform:rotate(-45deg)}
 .sidebar{position:fixed;top:var(--mobile-bar);left:0;right:0;padding:0;border:0;z-index:55}
 .sidebar-inner{display:block;min-height:0;height:0;padding:0;position:static}
 .sidebar .brand-home{display:none}
 .sidebar-body{position:absolute;inset:0 0 auto;height:calc(100dvh - var(--mobile-bar));max-height:none;padding:24px 20px max(24px,env(safe-area-inset-bottom));overflow-y:auto;box-shadow:none}
 .sidebar-inner.is-open .sidebar-body{display:flex;gap:32px}
 .section-nav{overflow:visible;flex-shrink:0;padding:0;margin:0;gap:0}
 .section-nav a{font-size:18px;line-height:24px;min-height:44px;padding:10px 0}
 .sidebar-actions{padding-top:24px;gap:8px}
 .sidebar-actions button{font-size:14px;min-height:44px}
 .guideline-section{scroll-margin-top:0}
 .guideline-section>div{gap:64px}
 .cover{aspect-ratio:auto;height:500px;max-height:calc(100svh - var(--mobile-bar))}
 .cover .d594{padding:24px 20px}
 .cover .d597{font-size:10px;align-items:flex-start;gap:20px}
 .cover .d598{flex-direction:column;align-items:flex-start;gap:8px}
 .cover .d602{left:20px;right:20px;bottom:24px!important}
 [data-theme='dark'] .mobile-brand img{filter:invert(1)}
 [data-reading-layout] .copy-hint{font-size:10px;padding:8px;min-height:32px;display:flex;align-items:center}
 [data-reading-layout] .gradient-download{top:auto;bottom:10px;right:10px}
 [data-reading-layout].d236 .copy-hint{bottom:10px;top:auto;right:10px}
 [data-reading-layout] .d664{font-size:14px}
}
/* Dense compositions become real cards, with 10px metadata and 14px reading copy. */
.responsive-example{width:100%;min-width:0;container-type:inline-size}
.example-stage{padding:40px;background:#fbfaf8;color:#1b1414;border-radius:8px;width:100%;overflow:hidden}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.sample-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.sample-card{position:relative;isolation:isolate;min-height:400px;padding:24px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;overflow:hidden}
.sample-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.sample-backdrop img{width:100%;height:100%;object-fit:cover}
.sample-dark{background:#1b1414;color:#fffef8}
.sample-small{font:400 10px/1.5 'Die Grotesk A',Arial,sans-serif}
.sample-label{font:500 12px/1.4 Inter,Arial,sans-serif}
.sample-body{font:400 14px/1.5 'Die Grotesk A',Arial,sans-serif;max-width:55ch}
.sample-heading{font:400 28px/1.15 'Caslon Ionic',Georgia,serif;letter-spacing:-.02em;text-wrap:balance}
.sample-display{font:400 44px/1.05 'Caslon Ionic',Georgia,serif;letter-spacing:-.02em}
.sample-subhead{font:400 18px/1.2 'Caslon Ionic',Georgia,serif}
.sample-ready{color:#fffef8}
.sample-ready .sample-small{max-width:24ch}
.sample-ready>div{display:flex;flex-direction:column;gap:24px}
.sample-intelligence{background:#fffef8;text-align:center;justify-content:center}
.sample-intelligence>img{width:100%;max-width:230px;margin:auto}
.sample-stat{align-items:center;text-align:center}
.sample-stat>.sample-small{max-width:24ch}
.sample-stat-ring{position:relative;width:200px;aspect-ratio:1;max-width:100%;flex-shrink:0;display:grid;place-items:center}
.sample-stat-ring>img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}
.sample-stat-ring>img+img{width:50%;height:auto;object-fit:contain}
.sample-stat-ring>p{font:400 64px/1 'Caslon Ionic',Georgia,serif;letter-spacing:-.04em;z-index:1}
.sample-foundation{align-items:center;text-align:center;justify-content:center}
.sample-foundation>img{width:140px;max-width:100%}
.sample-editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px}
.sample-editorial .sample-heading{font-size:24px}
.sample-editorial-copy{border-left:3px solid transparent;border-image:linear-gradient(#ce3a14,#e9ccd9,#224a7b) 1;padding-left:16px;display:flex;flex-direction:column;gap:24px}
.sample-editorial-copy>div{display:flex;flex-direction:column;gap:8px}
.sample-editorial-copy>.sample-small{margin-top:auto}
.sample-compact{padding:24px;background:#fffef8;display:flex;flex-direction:column;gap:40px;position:relative;isolation:isolate}
.sample-compact-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.sample-wordmark{width:160px;max-width:100%;height:auto}
.sample-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.sample-modules>div{display:flex;flex-direction:column;gap:12px}
.sample-modules img{width:64px;height:64px;max-width:100%;object-fit:contain;margin-bottom:16px}
.sample-grid-overlay:before{content:'';position:absolute;inset:12px;z-index:-1;opacity:.18;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(16.666% - 1px),#fa5c36 calc(16.666% - 1px),#fa5c36 16.666%);border:1px solid #fa5c36;pointer-events:none}
.wide-stage{display:flex;flex-direction:column;gap:24px}
.sample-conference{position:relative;isolation:isolate;min-height:300px;display:flex;flex-direction:column;justify-content:space-between;gap:64px;padding:32px;background-color:#fffef8;overflow:hidden}
.sample-conference.sample-dark{background:#1b1414}
.sample-conference-head{font:500 40px/1.05 'Die Grotesk A',Arial,sans-serif;letter-spacing:-.03em;max-width:19ch;text-wrap:balance}
.sample-conference-footer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:end}
.sample-conference-footer .sample-wordmark{grid-column:3;width:140px}
.conference-stage{padding:0}
.conference-stage .sample-conference{background:transparent;min-height:420px}
.sample-social{padding:16px;background:#fff;display:flex;flex-direction:column;gap:16px;min-width:0}
.sample-social-post{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:space-between;align-items:center;text-align:center;padding:24px;min-height:380px;background:#1b1414;color:#fffef8;overflow:hidden}
.sample-social-post>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.sample-social-post .sample-heading{font-size:32px}
.sample-social-photo{text-align:left;align-items:flex-start;justify-content:center}
.sample-social-photo .sample-heading{font:500 18px/1.2 'Die Grotesk A',Arial,sans-serif;max-width:17ch}
.sample-social-photo .sample-small{position:absolute;bottom:24px}
.sample-social-photo:after{content:'';position:absolute;inset:0;background:#1b14142b;z-index:-1}
.sample-social-govern>img{position:relative;width:150px;height:150px;max-width:100%;object-fit:contain;margin:auto;inset:auto}
.sample-social-govern .sample-heading{order:-1}
.sample-button{display:inline-flex;justify-content:center;align-items:center;min-height:44px;padding:12px 20px;border-radius:50px;background:#1b1414;color:#fffef8;font:500 14px/1.2 'Die Grotesk A',Arial,sans-serif;width:fit-content}
.sample-button-outline{background:transparent;border:1px solid #cfccc7;color:#1b1414}
.sample-button-light{background:#fffef8;color:#1b1414}
.sample-button-glow{box-shadow:0 0 24px 7px #b9d2dac0,0 0 8px 3px #e39d5590}
.sample-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:64px 48px;padding:48px 0}
.sample-buttons figure{display:flex;flex-direction:column;align-items:center;gap:28px;margin:0}
.sample-buttons figcaption,.incorrect-grid figcaption{font:500 12px/1.4 Inter,Arial,sans-serif;color:#847e7f}
.sample-phone{position:relative;max-width:300px;min-height:560px;border:7px solid #1b1414;border-radius:44px;margin:auto;background:#fffef8;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:20px 20px 36px}
.sample-phone-status{display:flex;justify-content:space-between;align-self:stretch;font:500 12px/1 Inter,Arial,sans-serif}
.sample-phone-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px;margin:70px 0 48px}
.sample-phone-content .sample-small{font-size:12px}
.sample-loading-ring{width:160px;max-width:100%;margin-top:24px}
.sample-phone-mark{width:52px;height:auto;margin-top:auto}
.sample-service{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:32px;max-width:480px;margin:auto;padding:32px;background:#1b1414;color:#fffef8;overflow:hidden;border-radius:12px}
.sample-service .sample-backdrop{opacity:.65}
.sample-service-art{height:200px;display:grid;place-items:center}
.sample-service-art img{width:160px;height:160px;object-fit:contain;max-width:100%}
.sample-service-copy{display:flex;flex-direction:column;gap:16px}
.sample-image-block{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.sample-photo{width:100%;min-width:0;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px}
.sample-image-block>div{display:flex;flex-direction:column;gap:24px}
.sample-testimonial{background:#fffef8;border-radius:12px;padding:40px;display:flex;flex-direction:column;gap:40px}
.sample-testimonial blockquote{margin:0;font:400 32px/1.25 'Caslon Ionic',Georgia,serif;text-wrap:pretty;max-width:36ch}
.incorrect-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.incorrect-grid figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:24px}
.incorrect-grid img{width:auto;max-width:100%;height:60px;object-fit:contain}
@container(max-width:900px){.sample-grid{grid-template-columns:1fr}.sample-card,.sample-social{width:100%;max-width:440px;margin-inline:auto}.sample-pair{grid-template-columns:1fr}.sample-conference-head{font-size:32px}.sample-image-block{grid-template-columns:1fr}.sample-testimonial blockquote{font-size:28px}}
@container(max-width:500px){
 .example-stage{padding:20px}
 .conference-stage{padding:0}
 .sample-card{padding:24px;min-height:400px}
 .sample-editorial{grid-template-columns:1fr 1.25fr}
 .sample-compact{padding:20px;gap:32px}
 .sample-compact .sample-heading{font-size:24px}
 .sample-modules{grid-template-columns:1fr;gap:28px}
 .sample-modules>div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:8px 16px}
 .sample-modules img{grid-row:1/3;width:52px;height:52px;margin:0}
 .sample-modules .sample-small{grid-column:2}
 .sample-conference{padding:24px;gap:48px;min-height:380px}
 .sample-conference-head{font-size:28px}
 .sample-conference-footer{grid-template-columns:1fr 1fr;gap:24px 16px}
 .sample-conference-footer .sample-wordmark{grid-column:auto;width:120px}
 .sample-testimonial{padding:24px;gap:32px}
 .sample-testimonial blockquote{font-size:24px}
 .sample-service{padding:24px}
 .incorrect-grid{grid-template-columns:1fr;gap:48px}
}
/* Keep the four method paragraphs readable at every content width. */
[data-reading-layout].d614{display:grid;grid-template-columns:1fr;gap:24px;padding:0;background:transparent}
[data-reading-layout].d614>div{grid-column:1;grid-row:auto}
[data-reading-layout].d614 p{font-size:16px;line-height:1.5}
[data-node-id='157:3502'] :is(.d205,.d212){font-size:max(32px,calc(10px / var(--art-scale,1)))}
@media(max-width:900px){.sample-phone{min-height:500px}.sample-phone-content{margin-top:56px}.sample-conference-head{font-size:28px}}

.illustration-graphic>img{position:static!important;transform:none!important;width:auto;height:auto}
/* Figma's fill-height flex bases must become content height in a reading layout. */
[data-reading-layout].d471>:is(.d472,.d221){flex:none;width:100%}
@media(max-width:900px){[data-reading-layout] .gradient-download{min-height:44px}}
[data-reading-layout].d471>.d221{gap:28px}