/* Brand guide page */
.bg-hero { padding: 72px 0 80px; }
.bg-hero .display { margin-top: 6px; }
.bg-sec { padding: 72px 0; }
.bg-alt { background: var(--cream-2); }
.bg-sec .h2 { margin-bottom: 4px; }

.logo-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 36px; }
.tile { margin: 0; border-radius: var(--r-md); padding: 44px 28px 18px; display: grid; gap: 28px; justify-items: center; }
.tile img { width: min(100%, 240px); height: auto; }
.tile figcaption { font-size: .85rem; font-weight: 600; }
.tile-light { background: #FFFBF4; border: 1px solid var(--line-light); color: var(--muted-on-light); }
.tile-dark { background: var(--ink); color: var(--muted-on-dark); }

.rules { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-top: 32px; }
.rules > div { background: #FFFBF4; border: 1px solid var(--line-light); border-radius: var(--r-md); padding: 22px; }
.rules h3 { margin: 0 0 6px; font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-size: 1.25rem; }
.rules p { margin: 0; color: var(--muted-on-light); }
.rules-dark > div { background: var(--ink-2); border-color: var(--line-dark); }
.rules-dark p { color: var(--muted-on-dark); }
code { font-family: ui-monospace, "Cascadia Code", Menlo, monospace; font-size: .88em; background: rgba(15, 22, 38, .07); padding: 1px 6px; border-radius: 6px; }
.dark code { background: rgba(247, 241, 230, .1); }

.motion-stage { margin-top: 32px; border-radius: var(--r-lg); background: radial-gradient(60% 80% at 50% 40%, var(--ink-3), var(--ink-2)); border: 1px solid var(--line-dark); min-height: 300px; display: grid; place-items: center; gap: 12px; padding: 40px 20px; }
.anim-mark .am-bubble { transform-box: fill-box; transform-origin: 30% 100%; }
.anim-mark .am-bolt { transform-box: fill-box; transform-origin: 50% 0%; }
.anim-mark .am-waves path { opacity: 0; transform-box: fill-box; transform-origin: 0% 50%; }
@keyframes am-pop { from { opacity: 0; transform: scale(.9) translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes am-strike { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes am-wave { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; } 100% { opacity: 0; transform: scale(1.2); } }
.anim-mark.is-playing .am-bubble { animation: am-pop 520ms var(--ease-out) both; }
.anim-mark.is-playing .am-bolt { animation: am-strike 380ms var(--ease-out) 300ms both; }
.anim-mark.is-playing .am-w1 { animation: am-wave 900ms var(--ease-out) 700ms both; }
.anim-mark.is-playing .am-w2 { animation: am-wave 900ms var(--ease-out) 820ms both; }
.anim-mark.is-playing .am-w3 { animation: am-wave 900ms var(--ease-out) 940ms both; }
@media (prefers-reduced-motion: reduce) {
  .anim-mark.is-playing .am-bubble, .anim-mark.is-playing .am-bolt { animation: none; }
  .anim-mark.is-playing .am-waves path { animation: none; opacity: .8; }
}

.swatches { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.swatches li { display: grid; gap: 2px; background: #FFFBF4; border: 1px solid var(--line-light); border-radius: var(--r-md); padding: 12px 12px 16px; }
.sw { height: 84px; border-radius: 12px; margin-bottom: 10px; }
.swatches b { font-size: 1rem; }
.swatches small { color: var(--muted-on-light); }

.type-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); margin-top: 28px; }
.type-card { background: #FFFBF4; border: 1px solid var(--line-light); border-radius: var(--r-md); padding: 28px; }
.type-name { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--amber-text); }
.type-sample { margin: 14px 0; }
.display-sample { font-family: var(--font-display); font-variation-settings: "SOFT" 100; font-weight: 600; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); line-height: 1.02; letter-spacing: -.02em; }
.body-sample { font-size: 1.2rem; }
.type-note { margin: 0; color: var(--muted-on-light); }

.downloads { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.downloads a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #FFFBF4; border: 1px solid var(--line-light); text-decoration: none; font-weight: 600; transition: border-color 200ms ease, box-shadow 200ms ease; }
.downloads a::after { content: "↓"; color: var(--amber-text); }
@media (hover: hover) and (pointer: fine) { .downloads a:hover { border-color: rgba(15, 22, 38, .25); box-shadow: 0 14px 30px -22px rgba(15, 22, 38, .45); } }