:root {
  --font-geist-sans: Arial, Helvetica, sans-serif;
  --font-geist-mono: Consolas, "Courier New", monospace;
  --saffron: #f36a16;
  --saffron-deep: #dd4f08;
  --green: #087443;
  --ink: #17130f;
  --paper: #fff8eb;
  --white: #fffdf8;
  --line: rgba(23, 19, 15, 0.18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 100; background: var(--ink); color: var(--paper); padding: 12px 16px; font-size: 12px; font-weight: 800; transform: translateY(-160%); transition: transform .2s; }
.skip-link:focus { transform: translateY(0); }

.site-header {
  height: 88px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(23,19,15,.28);
  background: rgba(255,248,235,.94);
  backdrop-filter: blur(14px);
  position: relative;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand-mark {
  width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--ink); color: var(--paper); border-radius: 50%;
  font-size: 12px; font-weight: 900; letter-spacing: -.05em;
}
.brand strong { display: block; font-size: 15px; letter-spacing: -.02em; }
.brand small { display: block; color: var(--saffron-deep); font-size: 11px; font-weight: 700; margin-top: 2px; }
nav { display: flex; gap: 34px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
nav a { padding: 10px 0; border-bottom: 2px solid transparent; }
nav a:hover { border-color: var(--saffron); }
.header-cta { background: var(--saffron); color: #fff; padding: 13px 18px; text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .05em; }
.header-cta span { margin-left: 10px; }

.hero {
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: 58% 42%;
  background: var(--saffron);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
}
.hero-noise { position: absolute; inset: 0; opacity: .16; pointer-events: none; background-image: radial-gradient(rgba(50,20,0,.8) .6px, transparent .6px); background-size: 5px 5px; mix-blend-mode: multiply; }
.hero-copy { padding: 7vh 5vw 10vh; z-index: 2; }
.eyebrow, .overline { font-family: var(--font-geist-mono); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 4vh; }
.eyebrow span { width: 32px; height: 2px; background: var(--ink); }
.hero h1, .section h2, .join h2 {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.035em; margin: 0;
}
.hero h1 { font-size: clamp(64px, 8.4vw, 138px); }
.hero h1 em, .section h2 em, .join h2 em { font-family: Georgia, serif; font-weight: 400; text-transform: none; letter-spacing: -.06em; }
.hero h1 em { color: var(--paper); }
.hero-deck { max-width: 600px; font-family: Georgia, serif; font-size: clamp(17px, 1.45vw, 23px); line-height: 1.48; margin: 4vh 0 0 18%; }
.hero-actions { margin: 3.5vh 0 0 18%; display: flex; align-items: center; gap: 34px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 30px; padding: 17px 20px; min-width: 224px; text-transform: uppercase; font-size: 11px; font-weight: 900; letter-spacing: .05em; transition: transform .2s, background .2s; }
.button:hover { transform: translateY(-3px); }
.button-dark { background: var(--ink); color: var(--paper); }
.text-link { font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid currentColor; padding: 8px 0; }
.text-link span { margin-left: 12px; }
.hero-art { background: var(--paper); position: relative; overflow: hidden; border-left: 1px solid var(--ink); }
.rings { width: min(34vw, 520px); aspect-ratio: 1; border: 1px solid rgba(23,19,15,.35); border-radius: 50%; position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%); display: grid; place-items: center; }
.sunburst { width: 66%; aspect-ratio: 1; border-radius: 50%; background: repeating-conic-gradient(var(--saffron) 0 6deg, transparent 6deg 12deg); mask: radial-gradient(circle, transparent 0 26%, #000 27% 100%); }
.orbit { position: absolute; border: 1px dashed rgba(23,19,15,.35); border-radius: 50%; }
.orbit-one { inset: 8%; }.orbit-two { inset: 18%; }
.crosshair { position: absolute; background: rgba(23,19,15,.25); }
.crosshair-x { width: 120%; height: 1px; }.crosshair-y { width: 1px; height: 120%; }
.hero-stamp { position: absolute; bottom: 11%; left: 10%; background: var(--green); color: var(--white); padding: 18px 22px; transform: rotate(-2deg); box-shadow: 8px 8px 0 var(--ink); }
.hero-stamp span, .hero-stamp strong { display: inline; margin-right: 5px; }
.hero-stamp span { font-family: var(--font-geist-mono); font-size: 10px; }.hero-stamp strong { font-family: Impact, sans-serif; font-size: 26px; letter-spacing: .02em; }
.art-note { position: absolute; right: 22px; bottom: 22px; writing-mode: vertical-rl; font-family: var(--font-geist-mono); font-size: 9px; letter-spacing: .18em; }
.scroll-cue { position: absolute; bottom: 20px; left: 5vw; font-family: var(--font-geist-mono); font-size: 9px; font-weight: 800; letter-spacing: .15em; }
.scroll-cue span { margin-left: 8px; }

.section { display: grid; grid-template-columns: 12% 88%; }
.section-kicker { border-right: 1px solid var(--line); padding: 90px 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.section-kicker span { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-geist-mono); font-size: 10px; }
.section-kicker p { writing-mode: vertical-rl; margin: 0; font-family: var(--font-geist-mono); font-size: 9px; letter-spacing: .18em; }
.meaning-content, .principles-content, .journal-content { padding: 10vh 8vw; }
.overline { color: var(--saffron-deep); margin: 0 0 22px; }
.section h2 { font-size: clamp(52px, 7vw, 110px); }
.section h2 em { color: var(--saffron-deep); }
.definition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; border-top: 1px solid var(--line); margin-top: 7vh; padding-top: 5vh; }
.lead-definition { font-family: Georgia, serif; font-size: clamp(24px, 2.4vw, 38px); line-height: 1.2; margin: 0; }
.body-copy { font-family: Georgia, serif; font-size: 17px; line-height: 1.65; max-width: 650px; }
.body-copy p:first-child { margin-top: 0; }

.principles { background: var(--ink); color: var(--paper); }
.section-kicker.light { border-color: rgba(255,248,235,.2); }
.light-text { color: #ff9b58; }
.principles h2 em { color: var(--saffron); }
.principle-list { margin-top: 7vh; border-top: 1px solid rgba(255,248,235,.22); }
.principle { display: grid; grid-template-columns: 9% 35% 1fr; gap: 3vw; align-items: start; padding: 34px 0; border-bottom: 1px solid rgba(255,248,235,.22); }
.principle-number { font-family: var(--font-geist-mono); color: var(--saffron); font-size: 12px; }
.principle h3 { margin: 0; font-family: Georgia, serif; font-size: clamp(24px, 2.2vw, 34px); font-weight: 400; }
.principle p { margin: 0; color: rgba(255,248,235,.72); line-height: 1.6; max-width: 560px; }

.section-heading-row { display: flex; justify-content: space-between; align-items: end; }
.all-articles { border: 1px solid var(--ink); padding: 13px 16px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.all-articles span { margin-left: 24px; }
.article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 7vh; }
.article-card { border: 1px solid var(--ink); background: var(--white); display: flex; flex-direction: column; min-height: 510px; transition: transform .2s, box-shadow .2s; }
.article-card:hover { transform: translateY(-6px); box-shadow: 8px 8px 0 var(--saffron); }
.card-art { height: 180px; border-bottom: 1px solid var(--ink); display: grid; place-items: center; overflow: hidden; position: relative; }
.card-art span { font-family: Impact, sans-serif; font-size: 110px; letter-spacing: -.06em; }
.art-1 { background: var(--saffron); }.art-1 span { color: var(--paper); text-shadow: 4px 4px 0 var(--ink); }
.art-2 { background: repeating-linear-gradient(45deg, var(--paper) 0 8px, var(--ink) 8px 10px); }.art-2 span { background: var(--paper); padding: 0 20px; }
.art-3 { background: var(--green); }.art-3 span { color: var(--paper); }
.card-copy { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.card-tag { font-family: var(--font-geist-mono); font-size: 9px; letter-spacing: .14em; color: var(--saffron-deep); font-weight: 800; }
.card-copy h3 { font-family: Georgia, serif; font-size: 28px; line-height: 1.08; font-weight: 500; margin: 16px 0; }
.card-copy > p:not(.card-tag) { font-size: 14px; line-height: 1.55; color: #5b534b; }
.card-meta { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; font-family: var(--font-geist-mono); font-size: 9px; font-weight: 800; letter-spacing: .08em; }

.join { background: var(--green); color: var(--white); min-height: 72vh; padding: 12vh 15vw; position: relative; overflow: hidden; }
.join h2 { font-size: clamp(60px, 8vw, 128px); position: relative; z-index: 2; }
.join h2 em { color: #ffb27e; }
.join > p:not(.overline) { font-family: Georgia, serif; font-size: 20px; max-width: 650px; line-height: 1.5; position: relative; z-index: 2; }
.button-light { background: var(--paper); color: var(--ink); margin-top: 22px; position: relative; z-index: 2; }
.join-orbit { width: 48vw; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; position: absolute; right: -12vw; top: -10vw; }
.join-orbit::before, .join-orbit::after { content: ""; position: absolute; border: 1px dashed rgba(255,255,255,.25); border-radius: 50%; }
.join-orbit::before { inset: 14%; }.join-orbit::after { inset: 30%; }

footer { background: var(--ink); color: var(--paper); padding: 48px 5vw 24px; display: grid; grid-template-columns: 1fr auto; gap: 50px; align-items: start; }
.footer-brand strong { display: block; font-size: 24px; }.footer-brand span { color: var(--saffron); font-family: Georgia, serif; font-style: italic; }
.footer-links { display: flex; gap: 28px; text-transform: uppercase; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
footer > p { grid-column: 1 / -1; padding-top: 22px; margin: 0; border-top: 1px solid rgba(255,255,255,.15); font-family: var(--font-geist-mono); font-size: 8px; letter-spacing: .12em; color: rgba(255,255,255,.48); }

@media (max-width: 900px) {
  .site-header { height: 72px; padding: 0 20px; }
  nav { display: none; }.header-cta { padding: 11px 12px; }.header-cta span { display: none; }
  .hero { min-height: auto; grid-template-columns: 1fr; }
  .hero-copy { padding: 60px 22px 80px; }
  .hero h1 { font-size: clamp(55px, 17vw, 100px); }
  .hero-deck, .hero-actions { margin-left: 0; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 14px; }
  .hero-art { min-height: 520px; border-left: 0; border-top: 1px solid var(--ink); }
  .rings { width: 80vw; max-width: 440px; }
  .scroll-cue { display: none; }
  .section { grid-template-columns: 1fr; }
  .section-kicker { display: none; }
  .meaning-content, .principles-content, .journal-content { padding: 80px 22px; }
  .definition-grid { grid-template-columns: 1fr; gap: 28px; }
  .principle { grid-template-columns: 40px 1fr; }
  .principle p { grid-column: 2; }
  .article-grid { grid-template-columns: 1fr; }
  .article-card { min-height: 480px; }
  .section-heading-row { align-items: flex-start; flex-direction: column; gap: 30px; }
  .join { padding: 90px 22px; min-height: auto; }
  footer { grid-template-columns: 1fr; gap: 28px; }
  .footer-links { flex-wrap: wrap; }
}

@media (max-width: 420px) {
  .brand small { display: none; }
  .header-cta { font-size: 9px; }
  .hero h1 { font-size: 16vw; }
  .button { min-width: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}


.menu-toggle { display: none; border: 0; background: transparent; color: var(--ink); font: 800 10px/1 var(--font-geist-mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.menu-toggle i, .menu-toggle i::before, .menu-toggle i::after { display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform .2s; }
.menu-toggle i::before, .menu-toggle i::after { content: ""; position: absolute; left: 0; }
.menu-toggle i::before { top: -6px; }.menu-toggle i::after { top: 6px; }
.menu-toggle[aria-expanded="true"] i { background: transparent; }
.menu-toggle[aria-expanded="true"] i::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] i::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 900px) {
  .menu-toggle { display: flex; align-items: center; gap: 10px; margin-left: auto; margin-right: 14px; }
  .site-header nav { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--ink); padding: 24px 22px; flex-direction: column; gap: 8px; }
  .site-header nav.is-open { display: flex; }
  .site-header nav a { padding: 12px 0; }
}