@import url('./css/tokens.css');
@import url('./css/base.css');

.masthead { display:flex; align-items:center; justify-content:space-between; min-height:96px; gap:var(--space-lg); }
.identity { display:flex; align-items:center; gap:var(--space-sm); text-decoration:none; font-weight:700; font-size:20px; }
.identity img { flex-shrink:0; }
.identity-caption { font-weight:400; font-size:14px; margin-left:var(--space-lg); color:var(--color-muted); }
.document-actions { display:flex; gap:var(--space-lg); }
button { border:0; background:none; color:var(--color-ink); cursor:pointer; }
button:disabled { opacity:.55; cursor:not-allowed; }
button:active, .download-primary:active { transform:translateY(1px); }
.theme-toggle,.print-action { display:flex; align-items:center; gap:var(--space-xs); min-height:44px; padding:0; font-size:14px; white-space:nowrap; }
.theme-symbol { font-size:24px; }
.theme-toggle:hover,.print-action:hover { color:var(--color-link); }
.skip { position:absolute; transform:translateY(-160%); padding:var(--space-sm) var(--space-md); background:var(--color-ink); color:var(--color-paper); z-index:var(--z-modal); }
.skip:focus-visible { transform:none; }
.hero { padding-top:var(--space-xl); }
.hero-heading { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); align-items:end; gap:var(--gap-columns); margin-bottom:var(--space-xl); }
h1 { font-size:var(--text-display); font-weight:700; line-height:1.02; letter-spacing:-.045em; }
.hero-intro { display:grid; justify-items:start; gap:var(--space-lg); padding-bottom:var(--space-xs); }
.hero-intro p { font-size:18px; color:var(--color-muted); max-width:28ch; }
.download-primary { display:inline-flex; gap:var(--space-lg); align-items:center; min-height:48px; padding:0 var(--space-lg); background:var(--color-accent); color:var(--color-accent-ink); border-radius:var(--radius-input); text-decoration:none; font-size:15px; font-weight:700; white-space:nowrap; }
.download-primary:hover { background:var(--orange-pressed); }
.brand-stage { height:340px; background:var(--orange-field); color:var(--graphite); position:relative; overflow:clip; display:flex; align-items:center; justify-content:center; }
.hero-mark { width:320px; height:320px; position:relative; z-index:var(--z-raised); }
.stage-circle { position:absolute; width:690px; height:690px; border:1px solid color-mix(in srgb,var(--graphite) 25%,transparent); border-radius:50%; transform:translate(76%,-12%); }
.stage-name { position:absolute; bottom:var(--space-lg); left:var(--space-lg); font-size:16px; font-weight:700; color:var(--logo-white); }
.chapter-nav { display:flex; justify-content:space-between; gap:var(--space-lg); padding:var(--space-lg) 0; border-bottom:1px solid var(--color-rule); }
.chapter-nav a { font-size:14px; text-decoration:none; white-space:nowrap; color:var(--color-muted); }
.chapter-nav a:hover { color:var(--color-link); }
.footer { display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg); padding-block:var(--space-xl); border-top:1px solid var(--color-rule); margin-top:var(--section-gap); font-size:14px; color:var(--color-muted); }
.footer > span { color:var(--color-ink); font-weight:700; }
.chapter { padding-top:var(--section-gap); scroll-margin-top:var(--space-lg); }
h2 { font-size:var(--text-section); line-height:1.1; font-weight:700; letter-spacing:-.035em; max-width:24ch; }
.section-intro { margin-top:var(--space-lg); color:var(--color-muted); max-width:58ch; font-size:18px; }
.palette { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:0; margin-top:var(--space-2xl); }
.swatch { min-height:340px; padding:var(--space-lg); display:flex; flex-direction:column; justify-content:end; }
.swatch h3 { font-size:28px; font-weight:700; letter-spacing:-.025em; }
.swatch p { font-size:14px; margin-top:var(--space-2xs); }
.swatch > span { font-size:13px; margin-top:var(--space-md); }
.swatch-orange { background:var(--flayronge); color:var(--graphite); }
.swatch-dark { background:var(--graphite); color:var(--chalk); outline:1px solid var(--color-rule); outline-offset:-1px; }
.swatch-light { background:var(--chalk); color:var(--graphite); }
.swatch-value { display:flex; align-items:center; justify-content:space-between; gap:var(--space-xs); margin-top:var(--space-xl); }
code { font-family:var(--font-code); font-size:.875em; }
.swatch-value code { font-size:20px; }
.swatch-value button { color:inherit; font-size:13px; min-height:44px; text-decoration:underline; text-underline-offset:4px; padding:0; }
.swatch-value button:hover { text-decoration-thickness:2px; }
.swatch-orange button:focus-visible,.swatch-light button:focus-visible { outline-color:var(--graphite); }
.swatch-dark button:focus-visible { outline-color:var(--chalk); }
.contrast-reference { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:var(--gap-columns); margin-top:var(--space-2xl); align-items:start; }
.contrast-reference h3 { font-size:24px; font-weight:500; line-height:1.3; max-width:18ch; }
.contrast-reference dl { margin:0; }
.contrast-reference dl > div { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-sm); padding-block:var(--space-md); border-bottom:1px solid var(--color-rule); }
.contrast-reference dl > div:first-child { padding-top:0; }
.contrast-reference dt { font-size:15px; }
.contrast-reference dd { margin:0; font-size:15px; font-variant-numeric:tabular-nums; }
.contrast-reference dd span { display:inline-block; min-width:100px; text-align:right; margin-left:var(--space-md); color:var(--color-muted); font-size:13px; }
.guidance { margin-top:var(--space-xl); border-top:1px solid var(--color-rule); }
.guidance summary { display:list-item; padding:var(--space-lg) 0; cursor:pointer; color:var(--color-muted); font-size:14px; }
.guidance summary:hover { color:var(--color-link); }
.guidance > div { display:grid; gap:var(--space-lg); padding-bottom:var(--space-lg); }
.guidance p { max-width:70ch; line-height:1.75; color:var(--color-muted); font-size:16px; }
.guidance a { color:var(--color-link); }
.logo-system { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:var(--gap-columns); margin-top:var(--space-2xl); }
.logo-diagram { background:var(--color-paper-2); margin:0; display:grid; justify-items:center; align-content:center; gap:var(--space-lg); padding:var(--space-xl); }
.diagram-title { font-size:14px; text-align:center; color:var(--color-muted); }
.logo-measure { width:min(100%,360px); aspect-ratio:1; position:relative; margin-bottom:var(--space-xl); outline:1px solid var(--color-muted); background-image:linear-gradient(to right,var(--color-rule) 1px,transparent 1px),linear-gradient(to bottom,var(--color-rule) 1px,transparent 1px); background-size:calc(100% / 12) calc(100% / 12); }
.logo-measure::after { content:''; position:absolute; inset:24.987238% 16.666667%; outline:1px dashed var(--flayronge); pointer-events:none; }
.logo-measure img { width:100%; height:100%; }
.measure-top,.measure-side,.measure-bottom,.measure-width { position:absolute; font-family:var(--font-code); font-size:12px; text-align:center; color:var(--color-ink); }
.measure-top { top:8.333333%; left:calc(50% - 24px); padding:0 var(--space-2xs); background:var(--color-paper-2); }
.measure-side { top:calc(50% - 9px); left:0; width:16.666667%; background:var(--color-paper-2); }
.measure-side-right { left:auto; right:0; }
.measure-bottom { bottom:8.333333%; left:calc(50% - 24px); padding:0 var(--space-2xs); background:var(--color-paper-2); }
.measure-width { bottom:-32px; left:16.666667%; right:16.666667%; padding-top:var(--space-2xs); border-top:1px solid var(--color-muted); }
figcaption { font-size:13px; color:var(--color-muted); line-height:1.6; }
.logo-diagram > figcaption { text-align:center; }
.logo-variants { display:grid; grid-template-columns:minmax(0,1fr); gap:var(--gap-columns); }
.variant { margin:0; padding:var(--space-md) var(--space-lg); display:flex; align-items:center; justify-content:space-around; gap:var(--space-md); }
.variant img { width:112px; height:112px; flex-shrink:0; }
.variant-orange { background:var(--flayronge); }
.variant-orange figcaption { color:var(--graphite); }
.variant-graphite { background:var(--graphite); color:var(--chalk); outline:1px solid var(--color-rule); outline-offset:-1px; }
.variant-graphite figcaption { color:var(--dark-muted); }
.variant-chalk { background:var(--chalk); color:var(--graphite); }
.variant-chalk figcaption { color:var(--light-muted); }
.variant code { font-size:12px; }
.logo-principles { display:flex; justify-content:space-between; gap:var(--space-lg); margin-top:var(--space-lg); color:var(--color-muted); font-size:14px; }
.logo-sizing { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.8fr); gap:var(--gap-columns); border-top:1px solid var(--color-rule); padding-top:var(--space-lg); margin-top:var(--space-xl); }
.logo-sizing h3 { font-size:22px; font-weight:500; line-height:1.3; max-width:20ch; }
.logo-sizing p { color:var(--color-muted); font-size:16px; max-width:60ch; }
.logo-nogos { margin-top:var(--space-2xl); }
.logo-nogos h3 { font-size:28px; font-weight:500; line-height:1.2; }
.nogos-intro { margin-top:var(--space-sm); font-size:16px; color:var(--color-muted); }
.nogo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-xl) var(--gap-columns); margin-top:var(--space-lg); }
.nogo { margin:0; min-width:0; }
.nogo-stage { height:180px; display:flex; align-items:center; justify-content:center; overflow:hidden; background:var(--color-paper-2); outline:1px solid var(--color-rule); outline-offset:-1px; }
.nogo-stage img { width:160px; height:160px; flex-shrink:0; }
.nogo figcaption { margin-top:var(--space-md); max-width:34ch; }
.nogo strong { display:block; color:var(--color-ink); font-size:15px; font-weight:500; margin-bottom:var(--space-2xs); }
.nogo-color { background:var(--flayronge); }
.nogo-stretch img { transform:scale(.7,1.28); }
.nogo-crop img { transform:scale(1.9); }
.nogo-rotate img { transform:rotate(-20deg); }
.nogo-effects img { filter:drop-shadow(8px 8px 0 var(--color-muted)); }
.nogo-busy { background:repeating-linear-gradient(45deg,var(--color-paper-2),var(--color-paper-2) 12px,var(--color-rule) 12px,var(--color-rule) 24px); }
.type-specimen { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:var(--gap-columns); padding-block:var(--space-xl); margin-top:var(--space-xl); }
.type-letters { font-size:clamp(9rem,18vw,16rem); line-height:1; letter-spacing:-.065em; font-weight:500; }
.type-sentence { font-size:clamp(2rem,4vw,4rem); font-weight:500; line-height:1.08; letter-spacing:-.035em; }
.type-copy > p:last-child { font-size:14px; color:var(--color-muted); line-height:1.7; margin-top:var(--space-xl); }
.type-scale { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); border-top:1px solid var(--color-rule); padding-top:var(--space-lg); gap:var(--gap-columns); }
.type-scale div { display:grid; gap:var(--space-sm); }
.type-scale span { color:var(--color-muted); font-size:14px; }
.type-scale strong { font-weight:500; font-size:24px; font-variant-numeric:tabular-nums; }
.mono-specimen { margin-top:var(--space-2xl); background:var(--color-paper-2); padding:var(--space-lg); display:flex; justify-content:space-between; align-items:center; gap:var(--space-lg); }
.mono-specimen h3 { font-size:18px; font-weight:500; }
.mono-specimen p { font-size:14px; color:var(--color-muted); margin-top:var(--space-xs); }
.mono-specimen code { font-size:16px; color:var(--color-link); }
.banner-example { margin:var(--space-2xl) 0 0; }
.banner-example img { width:100%; height:auto; }
.banner-example figcaption,.forms-example figcaption { margin-top:var(--space-sm); }
.composition-rules { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) minmax(0,1.2fr); gap:var(--gap-columns); margin-top:var(--space-xl); }
.composition-rules h3 { font-size:18px; font-weight:500; line-height:1.4; }
.composition-rules p { font-size:14px; color:var(--color-muted); margin-top:var(--space-sm); max-width:32ch; }
.forms-example { margin:var(--space-2xl) 0 0; }
.forms-example img { width:100%; height:auto; }
.download-list { margin-top:var(--space-2xl); }
.download-list > a { display:grid; grid-template-columns:minmax(0,1fr) 64px 24px; gap:var(--gap-columns); align-items:center; padding:var(--space-lg) 0; border-bottom:1px solid var(--color-rule); text-decoration:none; }
.download-list > a:hover { color:var(--color-link); }
.download-list small { display:block; color:var(--color-muted); font-size:13px; margin-top:var(--space-2xs); }
.download-list code { color:var(--color-muted); }
.download-list > a > span:last-child { font-size:24px; }
.kit-link { display:inline-flex; align-items:center; gap:var(--space-lg); margin-top:var(--space-xl); min-height:48px; color:var(--color-link); font-weight:700; }
.provenance { margin-top:var(--space-2xl); }
@media(max-width:60rem){.swatch{min-height:300px}.swatch-value{align-items:start;flex-direction:column;gap:var(--space-xs)}.logo-diagram{padding:var(--space-lg)}.variant{justify-content:center}.variant img{width:88px;height:88px}.mono-specimen{align-items:start;flex-direction:column}.logo-principles{font-size:13px}.contrast-reference{grid-template-columns:minmax(0,1fr)}.contrast-reference h3{max-width:none}.nogo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:40rem){.section-intro{font-size:16px}.palette{grid-template-columns:minmax(0,1fr);margin-top:var(--space-xl)}.swatch{min-height:240px}.swatch-value{flex-direction:row;align-items:center;margin-top:var(--space-lg)}.contrast-reference{margin-top:var(--space-xl)}.contrast-reference dd span{min-width:auto}.logo-system{grid-template-columns:minmax(0,1fr);margin-top:var(--space-xl)}.logo-diagram{padding:var(--space-lg) var(--space-md)}.logo-variants{grid-template-columns:minmax(0,1fr)}.variant{justify-content:start;padding:var(--space-sm) var(--space-md)}.variant img{width:88px;height:88px}.variant figcaption{font-size:13px}.logo-principles{flex-direction:column;gap:var(--space-sm)}.logo-sizing{grid-template-columns:minmax(0,1fr);gap:var(--space-md)}.logo-nogos{margin-top:var(--space-xl)}.nogo-stage{height:160px}.nogo-stage img{width:144px;height:144px}.nogo strong{font-size:14px}.type-specimen{grid-template-columns:minmax(0,1fr);gap:var(--space-xl)}.type-letters{font-size:9rem}.type-copy>p:last-child{margin-top:var(--space-lg)}.type-scale{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--space-xl)}.mono-specimen code{font-size:12px;white-space:normal;overflow-wrap:anywhere}.composition-rules{grid-template-columns:minmax(0,1fr);gap:var(--space-lg)}.composition-rules p{max-width:45ch}.download-list > a{grid-template-columns:minmax(0,1fr) 40px 20px;gap:var(--space-sm)}.banner-example,.forms-example,.download-list{margin-top:var(--space-xl)}.guidance summary{line-height:1.5}}
@media(max-width:24rem){.nogo-grid{grid-template-columns:minmax(0,1fr)}}
@media print{html,body{overflow:visible;background:var(--chalk);color:var(--graphite);--color-paper:var(--chalk);--color-paper-2:var(--light-raised);--color-ink:var(--graphite);--color-muted:var(--light-muted);--color-rule:var(--light-rule);--color-link:var(--light-link)}.document-actions,.chapter-nav,.skip,.download-primary,.kit-link,.swatch button{display:none}.container{max-width:none;padding-inline:0}.masthead{min-height:64px}.hero{padding-top:var(--space-md)}.hero-heading{display:block}.hero-intro{margin-top:var(--space-lg)}.brand-stage{height:220px;print-color-adjust:exact}.chapter{padding-top:var(--space-xl);break-inside:avoid-page}h1{font-size:48px}h2{font-size:32px}.palette,.logo-system,.type-specimen{margin-top:var(--space-lg)}.swatch{min-height:220px;print-color-adjust:exact}.guidance>div{display:grid!important}.guidance{break-inside:auto}.footer{margin-top:var(--space-xl)}a{color:var(--graphite)}.logo-diagram,.variant,.swatch{print-color-adjust:exact}}
@media(max-width:60rem){.masthead{min-height:80px}.identity-caption{margin-left:var(--space-xs)}.hero-heading{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.brand-stage{height:300px}}
@media(max-width:40rem){.masthead{gap:var(--space-sm)}.identity{font-size:17px}.identity-caption,.print-action{display:none}.document-actions{gap:var(--space-sm)}.hero{padding-top:var(--space-lg)}.hero-heading{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);margin-bottom:var(--space-lg)}.hero-intro{gap:var(--space-md)}.hero-intro p{font-size:16px;max-width:34ch}.brand-stage{height:260px}.hero-mark{width:220px;height:220px}.stage-circle{width:420px;height:420px}.chapter-nav{overflow:auto;justify-content:start;gap:var(--space-lg);scrollbar-width:thin}.footer{flex-wrap:wrap}.footer p{flex-basis:100%;order:3}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}button,.download-primary{transform:none!important;transition:none!important}}