/* Visual language follows codeborne.com: Satoshi, zinc greys, #FF5100 orange, animated diagonal gradient bands */
:root { --cb-orange: #ff5100; }
html { scroll-behavior: smooth; }
body { font-family: Satoshi, ui-sans-serif, system-ui, sans-serif; overflow-x: clip; }
h1, h2 { overflow-wrap: break-word; hyphens: auto; }

.cb-wrapper { margin: 0 auto; max-width: 80rem; padding: 0 1rem; }
@media (min-width: 640px) { .cb-wrapper { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .cb-wrapper { padding: 0 2rem; } }

.display-1 { font-size: 2.5rem; font-weight: 700; line-height: 1.15; }
@media (min-width: 640px) { .display-1 { font-size: 3rem; } }
@media (min-width: 1024px) { .display-1 { font-size: 6rem; line-height: 1; letter-spacing: -.025em; } }

/* Hero background: two rotated bands with a slowly moving orange→green gradient */
.logo-bg { position: absolute; inset: 0 0 auto 0; height: 80vh; overflow: hidden; z-index: -1; pointer-events: none; }
.logo-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, #fff, rgba(255,255,255,0)); }
.dark .logo-bg::after { background: linear-gradient(to top, #27272a, rgba(39,39,42,0)); }
.logo-bands { position: absolute; left: 50%; top: 50%; height: 200vh; display: flex; transform: translate(-50%, -50%) rotate(34deg); }
.logo-band { width: 200px; opacity: .2; background-image: linear-gradient(0deg,#ff5001,#f16e0f,#e08a16,#cba31c,#b5b820,#9cca24,#85d827,#9cca24,#b5b820,#cba31c,#e08a16,#f16e0f,#ff5001); background-size: 400% 400%; animation: band 20s linear infinite; }
.logo-band:first-child { margin-right: 2.5rem; }
@media (min-width: 768px) { .logo-band { width: 360px; } .logo-band:first-child { margin-right: 4rem; } }
@keyframes band { 0% { background-position: 0 0; } 100% { background-position: 0 400%; } }
@media (prefers-reduced-motion: reduce) { .logo-band { animation: none; } }

.nav-link { color: #000; transition: color .3s; white-space: nowrap; }
.nav-link:hover, .nav-link.is-current { color: var(--cb-orange); }
.dark .nav-link { color: #e2e8f0; }
.dark .nav-link:hover, .dark .nav-link.is-current { color: var(--cb-orange); }

.btn { display: inline-flex; align-items: center; gap: .5rem; border-radius: .375rem; font-weight: 600; transition: all .2s; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-md { padding: .5rem 1rem; font-size: .875rem; }
.btn-primary { background: var(--cb-orange); color: #fff; }
.btn-primary:hover { background: #ef470c; box-shadow: 0 8px 24px -8px rgba(255,81,0,.6); }
.btn-secondary { border: 1px solid #d4d4d8; color: inherit; }
.btn-secondary:hover { border-color: var(--cb-orange); color: var(--cb-orange); }
.dark .btn-secondary { border-color: #52525b; }

.cb-focus-ring:focus-visible { outline: 2px solid var(--cb-orange); outline-offset: 2px; }

.post-illustration { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.group:hover .post-illustration { transform: scale(1.1); }
.post-wrapper + .post-wrapper { margin-top: 5rem; }

.chip { display: inline-block; border-radius: 9999px; padding: .125rem .625rem; font-size: .75rem; font-weight: 600; background: rgba(239,71,12,.1); color: #ef470c; }
.filter { border: 1px solid #e4e4e7; border-radius: 9999px; padding: .25rem .875rem; font-size: .875rem; font-weight: 500; transition: all .2s; }
.dark .filter { border-color: #52525b; }
.filter:hover { border-color: var(--cb-orange); color: var(--cb-orange); }
.filter.is-active { background: var(--cb-orange); border-color: var(--cb-orange); color: #fff; }

.legal h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2.5rem; }
.legal p { margin-top: .5rem; font-size: 1.125rem; line-height: 1.75; }

#header-bar.is-scrolled { background: rgba(255,255,255,.85); backdrop-filter: blur(12px); box-shadow: 0 1px 0 #e4e4e7; }
.dark #header-bar.is-scrolled { background: rgba(39,39,42,.85); box-shadow: 0 1px 0 #3f3f46; }