/* Run & Rave — original, asset-free visual system */
:root {
  --ink: #0a0710;
  --ink-soft: #15101d;
  --paper: #f3f0e9;
  --muted: #b7afbd;
  --acid: #d9ff43;
  --violet: #8b5cff;
  --violet-deep: #6f3bdd;
  --pink: #ff4fd8;
  --line: rgba(255, 255, 255, .14);
  --display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  --body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--paper); background: var(--ink); font-family: var(--body); line-height: 1.5; overflow-x: hidden; }
a { color: inherit; }

.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .75rem 1rem; color: var(--ink); background: var(--acid); font-weight: 800; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 4px; }

.site-header { position: absolute; z-index: 10; top: 0; left: 0; display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 1.25rem clamp(1rem, 4vw, 4.5rem); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: .7rem; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.brand-mark { display: block; width: 2.45rem; height: 2.45rem; flex: 0 0 auto; }
.brand-mark span { color: var(--acid); }
.menu-toggle { display: inline-flex; min-width: 5.25rem; min-height: 2.7rem; align-items: center; justify-content: center; gap: .6rem; border: 1px solid var(--line); color: var(--paper); background: rgba(10,7,16,.65); font: 900 .62rem/1 var(--body); letter-spacing: .13em; text-transform: uppercase; cursor: pointer; }
.menu-toggle-icon { display: grid; width: 1rem; gap: .3rem; }
.menu-toggle-icon i { display: block; height: 2px; background: var(--acid); transition: transform .2s ease; }
.menu-open .menu-toggle-icon i:first-child { transform: translateY(.25rem) rotate(45deg); }
.menu-open .menu-toggle-icon i:last-child { transform: translateY(-.25rem) rotate(-45deg); }
nav { display: none; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.menu-open nav { position: absolute; top: calc(100% + 1px); right: 0; left: 0; display: flex; flex-direction: column; gap: 0; padding: 1.1rem; border-bottom: 1px solid var(--line); background: var(--ink); box-shadow: 0 1.25rem 2.5rem rgba(0,0,0,.35); }
nav a { display: flex; min-height: 3.4rem; align-items: center; justify-content: space-between; padding: .75rem .3rem; border-bottom: 1px solid var(--line); text-decoration: none; }
nav a span { color: var(--acid); font-size: 1rem; }
nav a:not(.nav-cta):hover { color: var(--acid); }
.nav-kicker { margin: .35rem .3rem .8rem; color: var(--acid); font-size: .6rem; letter-spacing: .2em; }
.nav-cta { justify-content: center; margin-top: 1rem; padding: .9rem 1rem; border: 0; color: var(--ink); background: var(--acid); }
body.menu-is-open { overflow: hidden; }

.hero { position: relative; min-height: 49rem; height: 100svh; max-height: 70rem; display: grid; align-items: center; padding: 7.5rem 1.1rem 5rem; isolation: isolate; overflow: hidden; }
.hero-grid { position: absolute; z-index: -3; inset: 0; opacity: .55; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: clamp(3.5rem, 8vw, 8rem) clamp(3.5rem, 8vw, 8rem); mask-image: linear-gradient(to bottom, #000 45%, transparent 100%); }
.hero::after { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(110deg, rgba(10,7,16,.2) 20%, rgba(10,7,16,.85) 82%); }
.orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(3px); opacity: .7; }
.orb-one { width: 26rem; height: 26rem; top: 15%; right: -14rem; background: radial-gradient(circle at 35% 35%, var(--pink), #5e26bd 45%, transparent 70%); }
.orb-two { width: 14rem; height: 14rem; bottom: 8%; left: -8rem; background: radial-gradient(circle, var(--violet), transparent 70%); }
.hero-copy { position: relative; z-index: 2; max-width: 52rem; }
.eyebrow, .section-index { font-size: .68rem; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: .65rem; color: var(--acid); }
.eyebrow > span { width: 2.2rem; height: 2px; background: currentColor; }
h1, h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: -.035em; line-height: .85; text-transform: uppercase; }
h1 { margin-top: 1.25rem; font-size: clamp(4.3rem, 18vw, 11rem); }
h1 em, .updates h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 1.5px var(--paper); text-stroke: 1.5px var(--paper); }
.hero-lead { max-width: 37rem; margin: 2rem 0 0; color: #d7d1da; font-size: clamp(1rem, 2vw, 1.2rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { display: inline-flex; min-height: 3.25rem; align-items: center; justify-content: center; gap: 1rem; padding: .85rem 1.2rem; border: 1px solid transparent; font-size: .72rem; font-weight: 900; letter-spacing: .1em; text-decoration: none; text-transform: uppercase; transition: transform .2s ease, background .2s ease, color .2s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { color: var(--ink); background: var(--acid); }
.button-primary:hover { background: #edff9a; }
.button-ghost { border-color: rgba(255,255,255,.45); }
.button-ghost:hover { color: var(--ink); background: var(--paper); }
.hero-visual { position: absolute; z-index: 1; right: -8rem; bottom: -3rem; width: 24rem; height: 24rem; opacity: .35; }
.record { position: absolute; inset: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 14px, rgba(255,255,255,.07) 15px 16px); animation: spin 20s linear infinite; }
.record-ring { position: absolute; border: 1px solid rgba(217,255,67,.55); border-radius: 50%; }
.ring-a { inset: 18%; } .ring-b { inset: 35%; }
.record-center { display: grid; width: 27%; height: 27%; place-items: center; border-radius: 50%; color: var(--ink); background: var(--acid); font-size: .45rem; font-weight: 900; letter-spacing: .12em; }
.record-center strong { font-size: 1.4rem; line-height: .5; }
.pace-card { position: absolute; right: 68%; bottom: 12%; width: 10rem; padding: 1rem; color: var(--ink); background: var(--paper); box-shadow: 8px 8px 0 var(--violet); transform: rotate(-5deg); }
.pace-label { font-size: .5rem; font-weight: 900; letter-spacing: .15em; }
.pace-card strong { display: block; margin: .5rem 0; font-family: var(--display); font-size: 1.75rem; line-height: .85; }
.equalizer { display: flex; height: 1.5rem; align-items: end; gap: 3px; }
.equalizer i { width: 100%; height: 35%; background: var(--violet); animation: equalize .8s ease-in-out infinite alternate; }
.equalizer i:nth-child(2n) { height: 80%; animation-delay: -.5s; } .equalizer i:nth-child(3n) { height: 55%; animation-delay: -.2s; }
.scroll-cue { position: absolute; bottom: 1.6rem; left: 1.1rem; display: flex; align-items: center; gap: .65rem; font-size: .55rem; font-weight: 800; letter-spacing: .16em; }
.scroll-cue span { width: 2.5rem; height: 1px; background: var(--paper); }

.next-event { position: relative; overflow: hidden; color: var(--paper); background: linear-gradient(135deg, #ff2fc9 0%, var(--violet-deep) 44%, #1a0d25 100%); isolation: isolate; }
.next-event::before { content: ""; position: absolute; z-index: -1; width: 34rem; height: 34rem; right: -15rem; bottom: -17rem; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(255,255,255,.04), 0 0 0 8rem rgba(255,255,255,.04); animation: event-breathe 2.2s ease-in-out infinite alternate; }
.event-marquee { overflow: hidden; border-top: 1px solid rgba(255,255,255,.5); border-bottom: 1px solid rgba(255,255,255,.5); color: var(--ink); background: var(--acid); transform: rotate(-1.2deg) scale(1.02); }
.event-marquee-track { display: flex; width: max-content; align-items: center; gap: 1.5rem; padding: .85rem 0; font: 900 clamp(.8rem,2vw,1.15rem) var(--body); letter-spacing: .16em; white-space: nowrap; animation: event-marquee 14s linear infinite; }
.event-marquee-track i { color: var(--violet-deep); font-style: normal; }
.event-shell { display: grid; gap: 4rem; align-items: center; }
.event-poster { position: relative; width: min(100%, 25rem); aspect-ratio: 1; margin-inline: auto; }
.event-poster::before { content: ""; position: absolute; inset: 10%; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; box-shadow: 0 0 0 1.2rem rgba(217,255,67,.08), 0 0 0 2.4rem rgba(255,255,255,.05); }
.event-orbit { position: absolute; inset: 0; border: 2px dashed var(--acid); border-radius: 50%; animation: event-spin 12s linear infinite; }
.event-orbit span { position: absolute; padding: .35rem .55rem; color: var(--ink); background: var(--acid); font-size: .55rem; font-weight: 900; letter-spacing: .12em; }
.event-orbit span:nth-child(1) { top: 5%; left: 12%; transform: rotate(-20deg); }
.event-orbit span:nth-child(2) { top: 40%; right: -5%; transform: rotate(8deg); }
.event-orbit span:nth-child(3) { bottom: 5%; left: 20%; transform: rotate(14deg); }
.event-date { position: absolute; inset: 22%; display: grid; place-content: center; text-align: center; border-radius: 50%; color: var(--paper); background: var(--ink); box-shadow: 0 0 0 .5rem var(--pink); transform: rotate(-4deg); }
.event-date span { font-size: .68rem; font-weight: 900; letter-spacing: .18em; }
.event-date strong { font: 900 clamp(4.5rem,20vw,7.5rem)/.8 var(--display); color: var(--acid); }
.event-burst { position: absolute; z-index: 2; top: 5%; right: 1%; display: grid; width: 5.2rem; height: 5.2rem; place-items: center; clip-path: polygon(50% 0,61% 20%,79% 8%,80% 30%,100% 31%,84% 50%,100% 68%,78% 69%,78% 92%,60% 80%,49% 100%,39% 80%,19% 92%,20% 69%,0 68%,16% 50%,0 31%,20% 30%,20% 8%,39% 20%); color: var(--ink); background: var(--paper); font-size: .64rem; font-weight: 900; line-height: 1.05; text-align: center; transform: rotate(8deg); animation: event-pop .7s ease-in-out infinite alternate; }
.event-copy .section-index { margin-bottom: 2rem; color: rgba(255,255,255,.75); }
.event-copy .kicker { color: var(--acid); }
.event-copy h2 { font-size: clamp(3.8rem,12vw,8.3rem); }
.event-copy h2 span { color: var(--acid); }
.event-copy > p:not(.kicker) { max-width: 37rem; margin: 2rem 0; font-size: clamp(1.1rem,2.5vw,1.45rem); }
.event-facts { display: grid; margin: 2rem 0; border-top: 1px solid rgba(255,255,255,.45); }
.event-facts div { display: grid; grid-template-columns: 4rem 1fr; gap: 1rem; align-items: baseline; padding: 1rem 0; border-bottom: 1px solid rgba(255,255,255,.45); }
.event-facts dt { color: var(--acid); font-size: .65rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.event-facts dd { margin: 0; font: 900 clamp(1.25rem,4vw,2rem) var(--display); letter-spacing: -.01em; text-transform: uppercase; }
.event-facts dd span { display: block; color: #dcd3e2; font: 700 .72rem var(--body); letter-spacing: .08em; }
.event-button { color: var(--ink); background: var(--acid); }
.event-button:hover { background: var(--paper); }
.event-equalizer { display: flex; height: 4rem; align-items: end; gap: 4px; padding-inline: 1rem; opacity: .85; }
.event-equalizer i { width: 100%; height: 20%; background: var(--acid); animation: event-equalize .55s ease-in-out infinite alternate; }
.event-equalizer i:nth-child(2n) { height: 75%; animation-delay: -.25s; }
.event-equalizer i:nth-child(3n) { height: 45%; animation-delay: -.45s; }
.event-equalizer i:nth-child(4n) { height: 100%; animation-delay: -.15s; }

.section { padding: 5.5rem 1.1rem; }
.manifesto { color: var(--ink); background: var(--paper); }
.section-index { margin-bottom: 3rem; color: #6f6875; }
.kicker { color: #68606d; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.manifesto h2, .vibe h2, .updates h2 { font-size: clamp(3.4rem, 12vw, 8.5rem); }
.manifesto h2 span { color: var(--violet); }
.large-copy { max-width: 46rem; margin: 2.25rem 0 4rem; font-size: clamp(1.25rem, 3vw, 1.8rem); line-height: 1.4; }
.principles { border-top: 1px solid #bbb5be; }
.principles article { display: grid; grid-template-columns: 3rem 1fr; gap: .75rem; padding: 1.5rem 0; border-bottom: 1px solid #bbb5be; }
.principle-number { color: var(--violet); font: 900 .68rem var(--body); letter-spacing: .1em; }
.principles h3 { margin: 0 0 .35rem; font: 900 1.65rem var(--display); letter-spacing: -.02em; text-transform: uppercase; }
.principles p { max-width: 25rem; margin: 0; color: #514a56; }

.vibe { position: relative; overflow: hidden; background: var(--violet-deep); }
.vibe::before { content: ""; position: absolute; width: 28rem; height: 28rem; right: -16rem; bottom: -12rem; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.04), 0 0 0 6rem rgba(255,255,255,.04); }
.vibe-wave { display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: .25rem; margin: -1.5rem 0 4rem; opacity: .8; }
.vibe-wave span { width: 100%; height: 20%; background: var(--acid); transform-origin: center; }
.vibe-wave span:nth-child(3n) { height: 85%; } .vibe-wave span:nth-child(2n) { height: 48%; } .vibe-wave span:nth-child(5n) { height: 100%; }
.vibe .section-index { color: var(--paper); }
.vibe h2 span { color: var(--acid); }
.vibe-content > p { max-width: 34rem; margin: 2rem 0 0; font-size: clamp(1.15rem, 2.5vw, 1.55rem); }
.tags { position: relative; display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 4rem; }
.tags span { padding: .65rem .85rem; border: 1px solid rgba(255,255,255,.5); border-radius: 99px; font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }

.sponsors { position: relative; display: grid; gap: 3rem; overflow: hidden; background: var(--ink-soft); }
.sponsors::before { content: ""; position: absolute; width: 30rem; height: 30rem; right: -17rem; top: -14rem; border: 1px solid rgba(217,255,67,.35); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(217,255,67,.04), 0 0 0 6rem rgba(139,92,255,.05); }
.sponsors-copy { position: relative; z-index: 1; max-width: 58rem; }
.sponsors .section-index { color: var(--acid); }
.sponsors .kicker { color: var(--muted); }
.sponsors h2 { font-size: clamp(3.4rem, 11vw, 8rem); }
.sponsors h2 span { color: var(--acid); }
.sponsors-copy > p:not(.kicker) { max-width: 43rem; margin: 1.5rem 0; color: #d7d1da; font-size: clamp(1.05rem, 2.3vw, 1.35rem); }
.sponsor-button { margin-top: .75rem; color: var(--ink); background: var(--acid); }
.sponsor-button:hover { background: var(--paper); }
.sponsors-mark { position: absolute; right: -1rem; bottom: -1rem; color: rgba(255,255,255,.035); font: 900 clamp(6rem, 20vw, 15rem)/.72 var(--display); text-align: right; transform: rotate(-5deg); }

.instagram { position: relative; display: grid; gap: 4rem; overflow: hidden; color: var(--ink); background: var(--acid); }
.instagram::before { content: "@"; position: absolute; right: -4rem; bottom: -9rem; color: rgba(10,7,16,.07); font: 900 30rem/1 var(--display); transform: rotate(-10deg); }
.instagram-copy, .instagram-visual { position: relative; z-index: 1; }
.instagram .section-index { margin-bottom: 2.25rem; color: #4c5426; }
.instagram .kicker { color: #4c5426; }
.instagram h2 { font-size: clamp(3.4rem, 11vw, 8rem); }
.instagram h2 span { color: var(--violet-deep); }
.instagram-copy > p:not(.kicker) { max-width: 39rem; margin: 2rem 0; font-size: clamp(1.1rem, 2.4vw, 1.45rem); line-height: 1.5; }
.instagram-button { border-color: var(--ink); color: var(--paper); background: var(--ink); }
.instagram-button:hover { color: var(--paper); background: var(--violet-deep); }
.instagram-icon { font-size: 1.35rem; line-height: 0; }
.instagram-visual { min-height: 26rem; }
.social-card { position: absolute; display: grid; padding: 1.15rem; }
.social-card-main { inset: 1.5rem 1rem 2rem; grid-template-rows: auto 1fr auto; color: var(--paper); background: linear-gradient(145deg, var(--violet-deep), #351957 55%, var(--ink)); border: 1px solid rgba(10,7,16,.55); box-shadow: 16px 16px 0 var(--pink); transform: rotate(3deg); }
.social-card-top, .social-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .58rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.social-card-top { justify-content: flex-start; }
.social-avatar { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border: 1px solid var(--acid); border-radius: 50%; color: var(--acid); font-size: .6rem; }
.social-pulse { display: flex; align-items: center; justify-content: center; gap: .75rem; font: 900 clamp(2.5rem, 9vw, 5rem)/.85 var(--display); letter-spacing: -.04em; }
.social-pulse strong { color: var(--acid); }
.social-card-bottom { border-top: 1px solid rgba(255,255,255,.3); padding-top: 1rem; }
.social-sticker { position: absolute; z-index: 2; padding: .75rem .85rem; font: 900 .7rem/1.1 var(--body); letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.sticker-one { top: 0; right: 0; color: var(--paper); background: var(--pink); transform: rotate(8deg); }
.sticker-two { bottom: .25rem; left: 0; color: var(--paper); background: var(--ink); transform: rotate(-7deg); }

.updates { display: grid; min-height: 42rem; place-items: center; text-align: center; background: radial-gradient(circle at 50% 40%, #2b1740, var(--ink) 58%); }
.updates-inner { max-width: 61rem; }
.updates .eyebrow { justify-content: center; }
.updates h2 { margin-top: 1.3rem; }
.updates p:not(.eyebrow):not(.contact-note) { max-width: 37rem; margin: 2rem auto; color: var(--muted); font-size: 1.1rem; }
.updates .button { margin-top: .5rem; }
.contact-note { margin: .85rem 0 0; color: #8f8796; font-size: .72rem; }
footer { display: grid; gap: 1rem; padding: 2rem 1.1rem; border-top: 1px solid var(--line); color: #aaa2af; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
footer p { margin: 0; }
.footer-brand { color: var(--paper); }
.footer-instagram { color: var(--acid); font-weight: 900; text-decoration: none; }
.footer-instagram:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.footer-legal a { text-underline-offset: 4px; }
.footer-legal a:hover { color: var(--paper); }

.legal-page { min-height: 100vh; background: var(--ink); }
.legal-header { position: static; }
.legal-header .back-link { color: var(--acid); font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.legal-main { width: min(100% - 2.2rem, 58rem); margin-inline: auto; padding: clamp(4rem, 8vw, 8rem) 0; }
.legal-main .section-index { margin-bottom: 1.5rem; color: var(--acid); }
.legal-main h1 { max-width: 12ch; margin: 0 0 3rem; font-size: clamp(2.5rem, 13vw, 8rem); overflow-wrap: anywhere; }
.legal-main h2 { margin: 3rem 0 1rem; color: var(--acid); font-family: var(--body); font-size: 1rem; letter-spacing: .1em; line-height: 1.3; }
.legal-main p, .legal-main li { color: #d7d1da; }
.legal-main a { color: var(--acid); text-underline-offset: 4px; }
.legal-main ul { padding-left: 1.25rem; }
.legal-note { margin-top: 3rem; padding: 1rem; border: 1px solid var(--line); color: var(--muted); font-size: .82rem; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes equalize { to { height: 100%; } }
@keyframes event-marquee { to { transform: translateX(-50%); } }
@keyframes event-spin { to { transform: rotate(360deg); } }
@keyframes event-pop { to { transform: rotate(-5deg) scale(1.12); } }
@keyframes event-breathe { to { transform: scale(1.12); opacity: .65; } }
@keyframes event-equalize { to { height: 100%; } }

@media (min-width: 48rem) {
  .menu-toggle { display: none; }
  nav { display: flex; align-items: center; gap: 1.75rem; }
  nav a { display: inline; min-height: 0; padding: 0; border: 0; }
  nav a span, .nav-kicker { display: none; }
  .nav-cta { display: inline-flex; padding: .65rem 1rem; }
  .hero { padding-inline: clamp(2rem, 6vw, 7rem); }
  .hero-visual { right: -2rem; bottom: -5rem; width: 38rem; height: 38rem; opacity: .65; }
  .hero-copy { width: 72%; }
  .scroll-cue { left: clamp(2rem, 6vw, 7rem); }
  .section { padding: 8rem clamp(2rem, 8vw, 9rem); }
  .event-shell { grid-template-columns: minmax(20rem,.85fr) minmax(0,1.15fr); gap: clamp(4rem,8vw,9rem); }
  .event-poster { width: min(100%, 31rem); }
  .manifesto-content { display: grid; grid-template-columns: 1.4fr .8fr; gap: 4rem; align-items: end; }
  .manifesto-content .kicker { grid-column: 1 / -1; }
  .large-copy { margin: 0 0 .7rem; }
  .principles { margin-top: 6rem; }
  .principles article { grid-template-columns: 4rem 1fr; }
  .vibe-content { display: grid; grid-template-columns: 1.3fr .7fr; gap: 4rem; align-items: end; }
  .vibe-content > p { margin: 0 0 .7rem; }
  .instagram { grid-template-columns: minmax(0, 1.1fr) minmax(22rem, .9fr); align-items: center; }
  .instagram-visual { min-height: 32rem; }
  footer { grid-template-columns: 1fr auto auto auto; align-items: center; padding-inline: clamp(2rem, 4vw, 4.5rem); }
}

@media (min-width: 70rem) {
  .hero-visual { right: 4vw; bottom: 4%; width: 34rem; height: 34rem; opacity: .95; }
  .hero-copy { width: 60%; }
  .principles { display: grid; grid-template-columns: repeat(3, 1fr); }
  .principles article { grid-template-columns: 2.5rem 1fr; padding-right: 2rem; border-right: 1px solid #bbb5be; }
  .principles article:last-child { padding-left: 2rem; border-right: 0; }
  .principles article:nth-child(2) { padding-left: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}