:root {
  --gs-black: #0a0c0b;
  --gs-charcoal: #151817;
  --gs-bone: #f0eee7;
  --gs-muted: #a4aaa5;
  --gs-line: rgba(240, 238, 231, 0.15);
  --gs-green: #c8ff57;
  --gs-coral: #ff7d66;
  --gs-cyan: #67e7e0;
  --gs-shell: 1260px;
}

.gravespeak-page { background: var(--gs-black); color: var(--gs-bone); }
.gravespeak-page h1, .gravespeak-page h2, .gravespeak-page h3 { letter-spacing: 0; }
.gs-shell { width: min(calc(100% - 48px), var(--gs-shell)); margin-inline: auto; }
.gs-header { position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 76px; border-bottom: 1px solid transparent; transition: background 180ms ease, border-color 180ms ease; }
.gs-header.is-scrolled { border-color: var(--gs-line); background: rgba(10, 12, 11, 0.92); backdrop-filter: blur(16px); }
.gs-nav, .gs-footer > .gs-shell { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.gs-wordmark { display: inline-flex; align-items: center; gap: 12px; }
.gs-wordmark-mark { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid var(--gs-green); border-radius: 50%; color: var(--gs-green); font-family: Georgia, serif; font-size: 1.25rem; }
.gs-wordmark > span:last-child { display: grid; line-height: 1.05; }
.gs-wordmark strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.15rem; font-weight: 600; }
.gs-wordmark small { margin-top: 4px; color: var(--gs-muted); font-size: 0.58rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.gs-home-link { padding: 9px 14px; border: 1px solid var(--gs-line); border-radius: 7px; font-size: 0.76rem; font-weight: 800; }
.gs-home-link:hover { border-color: var(--gs-green); color: var(--gs-green); }

.gs-hero { position: relative; min-height: 780px; overflow: hidden; padding: 145px 0 120px; border-bottom: 1px solid var(--gs-line); background: linear-gradient(112deg, rgba(200, 255, 87, 0.07), transparent 35%), linear-gradient(180deg, #111512, var(--gs-black)); }
.gs-grid { position: absolute; inset: 0; opacity: 0.12; background-image: linear-gradient(var(--gs-line) 1px, transparent 1px), linear-gradient(90deg, var(--gs-line) 1px, transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(to bottom, black, transparent 90%); }
.gs-tape { position: absolute; z-index: 2; overflow: hidden; width: 760px; padding: 9px 0; background: var(--gs-green); color: var(--gs-black); font: 900 0.68rem ui-monospace, monospace; letter-spacing: 0.14em; text-align: center; white-space: nowrap; }
.gs-tape-one { top: 105px; right: -255px; transform: rotate(32deg); }
.gs-hero-layout { position: relative; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr); gap: 90px; align-items: center; }
.gs-status, .gs-question-layout > div:first-child > p, .gs-principles-heading > p, .gs-close-layout > div:first-child > p { color: var(--gs-green); font-size: 0.7rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.gs-status { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; }
.gs-status span { width: 8px; height: 8px; border-radius: 50%; background: var(--gs-coral); box-shadow: 0 0 0 5px rgba(255, 125, 102, 0.12); }
.gs-hero h1 { max-width: 690px; margin-bottom: 28px; font-family: Georgia, "Times New Roman", serif; font-size: 5rem; font-weight: 500; line-height: 0.98; }
.gs-hero h1 em, .gs-question h2 em, .gs-principles h2 em, .gs-close h2 em { color: var(--gs-green); font-style: italic; }
.gs-lede { max-width: 610px; color: #c8ccc7; font-size: 1.08rem; line-height: 1.75; }
.gs-actions { display: flex; gap: 24px; align-items: center; margin-top: 38px; }
.gs-primary-link { display: inline-flex; min-height: 50px; align-items: center; gap: 28px; padding: 0 18px; border-radius: 6px; background: var(--gs-green); color: var(--gs-black); font-size: 0.78rem; font-weight: 900; }
.gs-actions > span { max-width: 180px; color: var(--gs-muted); font-size: 0.66rem; }

.gs-build-board { overflow: hidden; border: 1px solid rgba(240, 238, 231, 0.23); border-radius: 7px; background: rgba(20, 24, 22, 0.96); box-shadow: 0 36px 90px rgba(0, 0, 0, 0.45); }
.gs-board-bar, .gs-board-footer { display: flex; min-height: 42px; align-items: center; justify-content: space-between; padding: 0 18px; border-bottom: 1px solid var(--gs-line); font: 800 0.62rem ui-monospace, monospace; letter-spacing: 0.1em; }
.gs-board-bar strong, .gs-board-footer strong { color: var(--gs-cyan); }
.gs-board-body { padding: 28px; }
.gs-waveform { display: flex; height: 110px; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid var(--gs-line); background: #0e110f; }
.gs-waveform i { width: 3px; height: 18%; background: var(--gs-green); box-shadow: 0 0 10px rgba(200, 255, 87, 0.28); }
.gs-waveform i:nth-child(3n) { height: 72%; }
.gs-waveform i:nth-child(4n) { height: 42%; }
.gs-waveform i:nth-child(5n) { height: 90%; }
.gs-waveform i:nth-child(7n) { height: 58%; }
.gs-recording { display: flex; gap: 9px; align-items: center; margin: 11px 0 27px; color: var(--gs-muted); font: 750 0.58rem ui-monospace, monospace; letter-spacing: 0.08em; }
.gs-recording span { width: 7px; height: 7px; border-radius: 50%; background: var(--gs-coral); }
.gs-build-board ol { margin: 0; padding: 0; border-top: 1px solid var(--gs-line); list-style: none; }
.gs-build-board li { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--gs-line); }
.gs-build-board li > span, .gs-build-board li > b { color: var(--gs-coral); font: 850 0.58rem ui-monospace, monospace; }
.gs-build-board li > div { display: grid; }
.gs-build-board li strong { font-size: 0.86rem; }
.gs-build-board li small { color: var(--gs-muted); font-size: 0.64rem; }
.gs-board-footer { margin: 28px -28px -28px; border-top: 1px solid var(--gs-line); border-bottom: 0; }

.gs-question, .gs-principles, .gs-paper, .gs-close { padding: 116px 0; }
.gs-question { background: var(--gs-bone); color: var(--gs-black); }
.gs-question-layout, .gs-close-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 110px; }
.gs-question h2, .gs-principles h2, .gs-close h2 { margin: 16px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 3.8rem; font-weight: 500; line-height: 1; }
.gs-question-copy { max-width: 620px; padding-top: 24px; color: #505752; }
.gs-question-copy strong { display: block; margin-top: 26px; padding: 18px 20px; border-left: 3px solid var(--gs-coral); background: rgba(10, 12, 11, 0.045); color: var(--gs-black); }

.gs-principles { background: var(--gs-charcoal); }
.gs-principles-heading { max-width: 680px; }
.gs-principle-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 70px; border-top: 1px solid var(--gs-line); }
.gs-principle-grid article { min-height: 270px; padding: 26px 30px 30px 0; border-right: 1px solid var(--gs-line); }
.gs-principle-grid article + article { padding-left: 30px; }
.gs-principle-grid article:last-child { border-right: 0; }
.gs-principle-grid span { color: var(--gs-coral); font: 800 0.65rem ui-monospace, monospace; }
.gs-principle-grid h3 { margin: 55px 0 15px; font-family: Georgia, serif; font-size: 1.45rem; font-weight: 500; line-height: 1.15; }
.gs-principle-grid p, .gs-close-layout > div:last-child p { color: var(--gs-muted); font-size: 0.86rem; }

.gs-paper { overflow: hidden; background: var(--gs-bone); color: var(--gs-black); }
.gs-paper-layout { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 110px; align-items: center; }
.gs-paper-preview { position: relative; min-height: 420px; }
.gs-sheet { position: absolute; width: min(370px, 80%); aspect-ratio: 0.77; border: 1px solid rgba(10, 12, 11, 0.22); border-radius: 3px; background: #fffef9; box-shadow: 0 24px 60px rgba(10, 12, 11, 0.16); }
.gs-sheet-back { top: 20px; left: 90px; display: flex; align-items: flex-end; justify-content: space-between; padding: 24px; transform: rotate(7deg); color: #7b817d; font: 800 0.62rem ui-monospace, monospace; letter-spacing: 0.08em; }
.gs-sheet-front { top: 0; left: 15px; padding: 30px; transform: rotate(-4deg); }
.gs-sheet-front > div { display: flex; justify-content: space-between; color: #717772; font: 800 0.58rem ui-monospace, monospace; letter-spacing: 0.1em; }
.gs-sheet-front h3 { margin: 48px 0 2px; font-family: Georgia, serif; font-size: 2rem; font-weight: 500; }
.gs-sheet-front p { color: #6a706c; font-size: 0.76rem; }
.gs-sheet-front i { display: block; height: 1px; margin-top: 35px; background: rgba(10, 12, 11, 0.18); }
.gs-sheet-front small { position: absolute; right: 30px; bottom: 25px; color: #b44939; font: 850 0.56rem ui-monospace, monospace; letter-spacing: 0.1em; }
.gs-paper-copy > p:first-child { color: #b44939; font-size: 0.7rem; font-weight: 850; letter-spacing: 0.16em; text-transform: uppercase; }
.gs-paper-copy h2 { margin: 16px 0 28px; font-family: Georgia, "Times New Roman", serif; font-size: 3.8rem; font-weight: 500; line-height: 1; }
.gs-paper-copy h2 em { color: #52721c; font-style: italic; }
.gs-paper-copy > p:not(:first-child) { max-width: 600px; color: #565d58; }
.gs-paper-note { margin: 28px 0; padding: 16px 18px; border-left: 3px solid var(--gs-coral); background: rgba(10, 12, 11, 0.045); }
.gs-paper-note strong { color: var(--gs-black); }
.gs-paper-copy a { display: inline-flex; gap: 28px; padding-bottom: 7px; border-bottom: 1px solid #52721c; color: #3e5d0d; font-weight: 850; }

.gs-close { position: relative; overflow: hidden; }
.gs-tape-two { right: -300px; bottom: 50px; transform: rotate(-24deg); background: var(--gs-coral); }
.gs-close-layout > div:first-child > p { color: var(--gs-coral); }
.gs-close-layout > div:last-child { align-self: end; }
.gs-close-layout > div:last-child p { max-width: 560px; }
.gs-close-layout a { display: inline-flex; gap: 28px; margin-top: 18px; padding-bottom: 7px; border-bottom: 1px solid var(--gs-green); color: var(--gs-green); font-weight: 850; }
.gs-footer { min-height: 110px; border-top: 1px solid var(--gs-line); color: var(--gs-muted); }
.gs-footer p, .gs-footer small { margin: 0; font-size: 0.68rem; }
.gs-footer > .gs-shell > div { display: flex; gap: 18px; font-size: 0.72rem; }
.gs-footer a:hover { color: var(--gs-green); }

@media (max-width: 980px) {
  .gs-hero-layout { grid-template-columns: 1fr; gap: 60px; }
  .gs-hero-copy { max-width: 720px; }
  .gs-question-layout, .gs-close-layout { grid-template-columns: 1fr; gap: 34px; }
  .gs-paper-layout { grid-template-columns: 0.8fr 1.2fr; gap: 50px; }
}

@media (max-width: 720px) {
  .gs-shell { width: min(calc(100% - 32px), var(--gs-shell)); }
  .gs-wordmark small { display: none; }
  .gs-home-link { padding: 8px 10px; font-size: 0.68rem; }
  .gs-hero { min-height: auto; padding: 118px 0 80px; }
  .gs-tape-one { top: 80px; right: -310px; }
  .gs-hero h1 { font-size: 3.35rem; }
  .gs-lede { font-size: 0.98rem; }
  .gs-actions { display: grid; }
  .gs-primary-link { width: fit-content; }
  .gs-board-body { padding: 18px; }
  .gs-build-board li { grid-template-columns: 28px 1fr; }
  .gs-build-board li > b { display: none; }
  .gs-board-footer { margin: 22px -18px -18px; }
  .gs-question, .gs-principles, .gs-paper, .gs-close { padding: 80px 0; }
  .gs-question h2, .gs-principles h2, .gs-paper-copy h2, .gs-close h2 { font-size: 2.7rem; }
  .gs-principle-grid { grid-template-columns: 1fr; margin-top: 48px; }
  .gs-principle-grid article, .gs-principle-grid article + article { min-height: auto; padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--gs-line); }
  .gs-principle-grid h3 { margin-top: 32px; }
  .gs-paper-layout { grid-template-columns: 1fr; gap: 40px; }
  .gs-paper-preview { min-height: 350px; }
  .gs-sheet { width: 270px; }
  .gs-sheet-back { left: 55px; }
  .gs-sheet-front { left: 5px; padding: 22px; }
  .gs-sheet-front h3 { margin-top: 36px; font-size: 1.55rem; }
  .gs-sheet-front small { right: 22px; bottom: 18px; }
  .gs-footer { padding: 28px 0; }
  .gs-footer > .gs-shell { display: grid; gap: 18px; }
}

@media (prefers-reduced-motion: reduce) { .gs-header { transition: none; } }
