:root {
  --ink: #0a3458;
  --ink-deep: #052d50;
  --blue: #3f6f99;
  --mist: #b8c9d7;
  --paper: #f8f0e4;
  --cream: #fff8ed;
  --orange: #ff9553;
  --line: rgba(10, 52, 88, .24);
  --sans: "Manrope", sans-serif;
  --serif: "Newsreader", serif;
  --mono: "DM Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--orange); color: var(--ink-deep); }
.shell { width: min(1280px, calc(100% - 96px)); margin-inline: auto; }
.cursor-glow {
  --x: 50vw; --y: 50vh;
  position: fixed; z-index: 20; inset: 0; pointer-events: none;
  background: radial-gradient(260px circle at var(--x) var(--y), rgba(255,149,83,.08), transparent 68%);
  mix-blend-mode: multiply;
}

.site-header {
  position: absolute; z-index: 30; top: 0; left: 0; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: 31px 48px; color: var(--ink-deep);
}
.inner .site-header { position: relative; background: var(--paper); border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: flex-start; gap: 7px; font-weight: 700; letter-spacing: -.055em; font-size: 22px; line-height: 1; }
.wordmark-mark span { color: var(--orange); }
.wordmark-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.site-nav, .nav-pages, .nav-tools, .social-icons, .language-switcher { display: flex; align-items: center; }
.site-nav { gap: clamp(24px, 3vw, 46px); font: 500 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.nav-pages { gap: 28px; }
.nav-tools { gap: 14px; }
.nav-pages a { position: relative; padding-block: 6px; }
.nav-pages a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width .25s ease; }
.nav-pages a:hover::after { width: 100%; }
.social-icons { gap: 5px; }
.social-icons a, .theme-toggle { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%; transition: border-color .2s, background .2s, transform .2s; }
.social-icons a:hover, .theme-toggle:hover { border-color: currentColor; transform: translateY(-2px); }
.social-icons svg { width: 15px; height: 15px; fill: currentColor; }
.theme-toggle { color: inherit; background: transparent; padding: 0; cursor: pointer; }
.theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-moon { display: none; }
[data-theme="dark"] .theme-sun { display: none; }
[data-theme="dark"] .theme-moon { display: block; }
.language-switcher { gap: 2px; padding-left: 12px; border-left: 1px solid currentColor; }
.language-switcher a { padding: 7px 6px; opacity: .42; transition: opacity .2s; }
.language-switcher a:hover, .language-switcher a.active { opacity: 1; }
.menu-toggle { display: none; border: 0; background: none; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 1px; background: var(--ink); margin: 6px; }

.hero { min-height: 780px; height: 100vh; position: relative; overflow: hidden; color: var(--ink-deep); }
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(1.015); animation: settle 1.6s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes settle { to { transform: scale(1); } }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,248,237,.72) 0, rgba(255,248,237,.17) 54%, transparent 75%); }
.hero-gridline { position: absolute; inset: 0; opacity: .26; background-image: linear-gradient(rgba(10,52,88,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(10,52,88,.15) 1px, transparent 1px); background-size: 25vw 100%, 100% 25vh; mask-image: linear-gradient(to bottom, #000, transparent 55%); }
.hero-content { position: absolute; left: 10.5%; top: 49%; transform: translateY(-50%); width: min(760px, 74vw); }
.eyebrow { display: flex; gap: 28px; margin: 0 0 30px; font: 400 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow span:last-child { opacity: .55; }
.hero h1, .section-heading h2, .interest-intro h2, .youtube-copy h2, .page-hero h1, .article-header h1, .about-copy h1 {
  margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.055em;
}
.hero h1 { font-size: clamp(72px, 9.4vw, 150px); line-height: .75; }
.hero h1 em, .section-heading em, .interest-intro em, .youtube-copy em, .page-hero em { font-weight: 400; color: var(--orange); }
.hero-intro { margin: 42px 0 0 7px; padding-left: 17px; border-left: 1px solid var(--ink); font: 500 clamp(14px, 1.15vw, 18px)/1.65 var(--sans); letter-spacing: .01em; }
.hero-scroll { position: absolute; left: 49px; bottom: 43px; display: flex; align-items: center; gap: 17px; font: 400 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); }
.hero-scroll i { font-style: normal; font-size: 17px; }
.hero-coordinate { position: absolute; right: 46px; bottom: 38px; margin: 0; text-align: right; font: 400 9px/1.5 var(--mono); letter-spacing: .14em; opacity: .75; }

.section-index { margin: 0; font: 400 10px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.manifesto { min-height: 580px; display: grid; grid-template-columns: 1fr 2fr .8fr; gap: 50px; align-items: center; border-bottom: 1px solid var(--line); }
.manifesto .section-index { align-self: start; padding-top: 100px; }
.manifesto-copy > p { margin: 0; max-width: 780px; font: 400 clamp(32px, 3.55vw, 56px)/1.12 var(--serif); letter-spacing: -.035em; }
.text-link { display: inline-flex; align-items: center; gap: 28px; margin-top: 46px; padding-bottom: 8px; border-bottom: 1px solid var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.orbit-mark { justify-self: end; position: relative; width: 132px; height: 132px; border: 1px solid var(--line); border-radius: 50%; }
.orbit-mark::before, .orbit-mark::after { content: ""; position: absolute; background: var(--line); }
.orbit-mark::before { width: 180px; height: 1px; top: 50%; left: -24px; transform: rotate(-30deg); }
.orbit-mark::after { width: 1px; height: 180px; top: -24px; left: 50%; transform: rotate(30deg); }
.orbit-mark span { position: absolute; z-index: 2; width: 16px; height: 16px; border-radius: 50%; background: var(--orange); left: 18px; top: 23px; }
.orbit-mark i { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); right: -3px; top: 49%; }

.latest { padding: 134px 0 120px; }
.section-heading { display: grid; grid-template-columns: 1fr 2.8fr; gap: 40px; margin-bottom: 70px; }
.section-heading h2 { font-size: clamp(57px, 7vw, 104px); line-height: .9; }
.post-index { border-top: 1px solid var(--ink); }
.empty-state { margin: 0; padding: 55px 0; border-bottom: 1px solid var(--line); font: 400 clamp(22px, 2.2vw, 34px)/1.3 var(--serif); opacity: .65; }
.post-row { display: grid; grid-template-columns: 60px 1fr 150px 40px; gap: 24px; align-items: center; min-height: 156px; border-bottom: 1px solid var(--line); transition: background .3s ease, padding .3s ease; }
.post-row:hover { background: rgba(255,255,255,.37); padding-inline: 18px; }
.post-number, .post-date, .post-tags { font: 400 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.post-main { display: flex; flex-direction: column; gap: 8px; }
.post-main strong { font: 400 clamp(25px, 2.25vw, 36px)/1.1 var(--serif); letter-spacing: -.025em; }
.post-description { font-size: 13px; opacity: .67; }
.post-date { text-align: right; }
.post-arrow { justify-self: end; font-size: 22px; transition: transform .25s ease; }
.post-row:hover .post-arrow { transform: translate(4px,-4px); }
.all-notes { margin: 45px 0 0 auto; width: 250px; display: flex; align-items: center; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--ink); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.all-notes i { font-style: normal; font-size: 20px; transition: transform .25s; }
.all-notes:hover i { transform: translateX(6px); }

.interests { min-height: 760px; display: grid; grid-template-columns: .84fr 1.16fr; align-items: center; gap: 60px; border-top: 1px solid var(--line); }
.interest-intro h2 { margin-top: 30px; font-size: clamp(52px, 5.5vw, 82px); line-height: .93; }
.interest-intro > p:last-child { max-width: 420px; margin: 43px 0 0; font-size: 14px; line-height: 1.8; opacity: .72; }
.signal-map { position: relative; aspect-ratio: 1.1; border: 1px solid var(--line); border-radius: 50%; }
.signal-map::before, .signal-map::after { content: ""; position: absolute; border: 1px solid var(--line); border-radius: 50%; inset: 12%; }
.signal-map::after { inset: 31%; border-style: dashed; }
.signal-core { position: absolute; z-index: 3; inset: 40%; border-radius: 50%; background: var(--orange); display: grid; place-items: center; text-align: center; font: 500 11px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.signal { position: absolute; z-index: 4; display: flex; align-items: center; gap: 9px; padding: 7px 10px; background: var(--paper); font: 400 10px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.signal i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink); }
.signal small { opacity: .45; }
.signal-a { left: 8%; top: 21%; }.signal-b { right: -3%; top: 33%; }.signal-c { left: -3%; bottom: 23%; }.signal-d { right: 7%; bottom: 14%; }
.signal-line { position: absolute; z-index: 1; height: 1px; background: var(--line); width: 84%; left: 8%; top: 50%; }
.line-one { transform: rotate(32deg); }.line-two { transform: rotate(-32deg); }

.youtube-band { min-height: 720px; display: grid; grid-template-columns: 1fr 1fr; background: var(--ink-deep); color: var(--cream); }
.youtube-art { min-width: 0; overflow: hidden; }
.youtube-art img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.05); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.youtube-band:hover .youtube-art img { transform: scale(1.025); }
.youtube-copy { position: relative; padding: clamp(70px, 8vw, 130px); display: flex; flex-direction: column; justify-content: center; }
.youtube-copy .section-index { position: absolute; top: 60px; }
.play-icon { display: grid; place-items: center; width: 65px; height: 65px; margin-bottom: 34px; border: 1px solid rgba(255,255,255,.45); border-radius: 50%; color: var(--orange); font-size: 16px; padding-left: 3px; }
.youtube-copy h2 { font-size: clamp(54px, 5.3vw, 84px); line-height: .91; }
.youtube-copy p:not(.section-index) { max-width: 440px; margin: 35px 0; font-size: 14px; line-height: 1.8; color: rgba(255,255,255,.7); }
.youtube-button { width: 230px; display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid currentColor; font: 500 11px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.youtube-button span { transition: transform .2s; }.youtube-button:hover span { transform: translate(4px,-4px); }
.youtube-button.dark { margin-top: 35px; }
.about-social { margin-top: 40px; gap: 10px; }
.about-social a { width: 45px; height: 45px; border-color: var(--line); }
.about-social svg { width: 18px; height: 18px; }

.site-footer { display: grid; grid-template-columns: 1.5fr 1fr .7fr; gap: 60px; align-items: end; padding: 85px 48px 45px; background: var(--ink-deep); color: var(--cream); border-top: 1px solid rgba(255,255,255,.18); }
.footer-kicker { margin: 0 0 12px; font: 400 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; opacity: .55; }
.footer-wordmark { font: 500 clamp(43px, 5vw, 75px)/1 var(--serif); letter-spacing: -.05em; }.footer-wordmark span { color: var(--orange); }
.footer-center { display: flex; flex-direction: column; align-items: flex-start; gap: 25px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 17px 30px; font: 400 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.footer-links a:hover { color: var(--orange); }
.footer-social a { color: var(--cream); border-color: rgba(255,255,255,.22); }
.footer-meta { margin: 0; text-align: right; font: 400 9px/1.7 var(--mono); letter-spacing: .07em; opacity: .55; }

.page-hero { min-height: 510px; padding: 110px 0 90px; display: grid; grid-template-columns: 1fr 2.8fr; gap: 40px; border-bottom: 1px solid var(--ink); }
.page-hero h1 { font-size: clamp(74px, 9vw, 140px); line-height: .8; }
.page-hero > p:last-child { grid-column: 2; max-width: 520px; margin: 25px 0 0; font-size: 14px; line-height: 1.7; }
.archive { display: grid; grid-template-columns: repeat(2, 1fr); border-left: 1px solid var(--line); }
.archive-card { min-height: 390px; padding: 30px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; justify-content: space-between; transition: color .3s, background .3s; }
.archive-card:hover { color: var(--cream); background: var(--ink); }
.archive-card-top { display: flex; justify-content: space-between; font: 400 10px/1 var(--mono); letter-spacing: .08em; }
.archive-card p { font: 400 9px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.archive-card h2 { max-width: 520px; margin: 13px 0 18px; font: 400 clamp(34px, 4vw, 58px)/.98 var(--serif); letter-spacing: -.035em; }
.archive-card div > span { font-size: 13px; line-height: 1.6; opacity: .68; }
.pagination { padding: 50px 0 100px; display: flex; justify-content: center; gap: 55px; font: 400 10px/1 var(--mono); text-transform: uppercase; }

.article { padding-top: 100px; padding-bottom: 130px; }
.article-header { width: min(980px, 86%); margin: auto; }
.article-back { display: block; margin-bottom: 90px; font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.article-tags { font: 400 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.article-header h1 { margin-top: 26px; font-size: clamp(68px, 8.2vw, 125px); line-height: .85; }
.article-deck { max-width: 670px; margin: 40px 0 28px; font: 400 20px/1.55 var(--serif); }
.article-meta { display: flex; gap: 35px; font: 400 9px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.article-rule { height: 220px; display: flex; align-items: center; }
.article-rule span { width: 100%; height: 1px; background: var(--line); position: relative; }.article-rule span::after { content: ""; position: absolute; width: 13px; height: 13px; border-radius: 50%; background: var(--orange); left: 25%; top: -6px; }
.article-content { width: min(700px, 86%); margin: auto; font: 400 18px/1.85 var(--serif); color: #173c5c; }
.article-content > *:first-child { margin-top: 0; }
.article-content p { margin: 0 0 1.55em; }
.article-content h2 { margin: 2.2em 0 .7em; font: 500 38px/1.1 var(--serif); letter-spacing: -.025em; color: var(--ink-deep); }
.article-content blockquote { margin: 2.5em 0; padding: 7px 0 7px 30px; border-left: 3px solid var(--orange); font-size: 26px; line-height: 1.45; font-style: italic; }
.article-content strong { color: var(--ink-deep); }
.about-page { min-height: calc(100vh - 80px); display: grid; grid-template-columns: 1fr 1fr; }
.about-visual { min-height: 830px; }.about-visual img { width: 100%; height: 100%; object-fit: cover; }
.about-copy { padding: clamp(70px, 8vw, 135px); align-self: center; }
.about-copy h1 { margin: 25px 0 48px; font-size: clamp(61px, 6.5vw, 98px); line-height: .87; }
.about-copy .article-content { width: auto; margin: 0; font-size: 17px; }
.about-copy .article-content h2 { font-size: 25px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
.post-row:nth-child(2), .archive-card:nth-child(2) { transition-delay: .07s; }
.post-row:nth-child(3), .archive-card:nth-child(3) { transition-delay: .14s; }
.post-row:nth-child(4), .archive-card:nth-child(4) { transition-delay: .21s; }

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #dce9f2;
  --ink-deep: #f8f0e4;
  --paper: #071e33;
  --cream: #f8f0e4;
  --line: rgba(220, 233, 242, .22);
}
[data-theme="dark"] .inner .site-header { background: var(--paper); }
[data-theme="dark"] .home .site-header, [data-theme="dark"] .hero { color: #052d50; }
[data-theme="dark"] .home .menu-toggle span { background: #052d50; }
[data-theme="dark"] .youtube-band, [data-theme="dark"] .site-footer { background: #031421; color: #f8f0e4; }
[data-theme="dark"] .article-content { color: #c8d7e2; }
[data-theme="dark"] .article-content h2, [data-theme="dark"] .article-content strong { color: #f8f0e4; }
[data-theme="dark"] .post-row:hover { background: rgba(255,255,255,.05); }
[data-theme="dark"] .archive-card:hover { background: #123a59; color: #fff8ed; }
[data-theme="dark"] .signal { background: var(--paper); }
[data-theme="dark"] .cursor-glow { mix-blend-mode: screen; }

@media (max-width: 900px) {
  .shell { width: min(100% - 40px, 720px); }
  .site-header { padding: 24px 20px; }
  .menu-toggle { display: block; z-index: 2; }
  .site-nav { position: fixed; z-index: 1; inset: 0; background: var(--paper); flex-direction: column; justify-content: center; gap: 35px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .3s; }
  [data-theme="dark"] .home .site-nav { color: var(--ink); }
  [data-theme="dark"] .home.menu-open .wordmark { color: var(--ink); }
  [data-theme="dark"] .home.menu-open .menu-toggle span { background: var(--ink); }
  .nav-pages { flex-direction: column; gap: 25px; }
  .nav-tools { flex-direction: column; gap: 20px; }
  .social-icons { gap: 12px; }
  .social-icons a, .theme-toggle { width: 42px; height: 42px; border-color: var(--line); }
  .language-switcher { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .menu-open .site-nav { opacity: 1; pointer-events: auto; }
  .menu-open .menu-toggle span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-open .menu-toggle span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero { min-height: 720px; height: 92svh; }
  .hero-image { object-position: 55% center; animation: none; transform: none; }
  .hero-wash { background: linear-gradient(90deg, rgba(255,248,237,.56), transparent 90%); }
  .hero-content { left: 25px; width: calc(100% - 50px); top: 46%; }
  .hero h1 { font-size: clamp(61px, 18vw, 105px); line-height: .81; }
  .hero-intro { margin-top: 34px; }
  .hero-scroll { display: none; }.hero-coordinate { right: 20px; bottom: 20px; }
  .manifesto { min-height: 610px; grid-template-columns: 1fr; gap: 30px; padding-block: 80px; }
  .manifesto .section-index { padding: 0; }.orbit-mark { position: absolute; right: 35px; width: 85px; height: 85px; opacity: .6; }
  .section-heading { grid-template-columns: 1fr; }.latest { padding: 90px 0; }
  .post-row { grid-template-columns: 35px 1fr 25px; min-height: 150px; gap: 12px; }.post-date { display: none; }.post-description { display: none; }
  .interests { min-height: auto; padding: 90px 0; grid-template-columns: 1fr; }.signal-map { width: min(100%, 590px); margin: 30px auto 0; }
  .youtube-band { grid-template-columns: 1fr; }.youtube-art { height: 70vw; max-height: 650px; }.youtube-copy { min-height: 650px; padding: 90px 30px; }.youtube-copy .section-index { top: 35px; }
  .site-footer { grid-template-columns: 1fr; padding: 70px 25px 35px; }.footer-meta { text-align: left; }
  .page-hero { grid-template-columns: 1fr; min-height: 450px; padding: 80px 0; }.page-hero > p:last-child { grid-column: 1; }.page-hero h1 { font-size: clamp(65px, 17vw, 110px); }
  .archive { grid-template-columns: 1fr; }.archive-card { min-height: 320px; }
  .article { padding-top: 60px; }.article-header { width: 100%; }.article-back { margin-bottom: 70px; }.article-header h1 { font-size: clamp(55px, 15vw, 95px); }.article-rule { height: 140px; }.article-content { width: 100%; }
  .about-page { grid-template-columns: 1fr; }.about-visual { min-height: 70vw; max-height: 700px; }.about-copy { padding: 80px 25px 110px; }
}

@media (max-width: 520px) {
  .eyebrow { gap: 16px; font-size: 9px; }.hero h1 { font-size: 18.2vw; }
  .manifesto-copy > p { font-size: 34px; }.section-heading h2, .interest-intro h2, .youtube-copy h2 { font-size: 51px; }
  .post-main strong { font-size: 25px; }.post-tags { font-size: 8px; }
  .signal { font-size: 8px; }.signal-b { right: -2%; }.signal-d { right: 1%; }
  .footer-links { gap: 17px; }.article-content { font-size: 17px; }.article-content blockquote { font-size: 22px; }
}

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