@layer reset, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body, h1, h2, h3, p, ol { margin: 0; }
  img, svg { display: block; max-width: 100%; }
  button, a { font: inherit; }
}

@layer base {
  :root {
    --ink: #071015;
    --deep: #0a171c;
    --storm: #10232a;
    --slate: #294047;
    --mist: #d4ddd9;
    --paper: #e9ece5;
    --signal: #67d8c4;
    --signal-hot: #a7ffe7;
    --bronze: #b47a46;
    --bronze-light: #d4a06c;
    --rule: rgba(212, 221, 217, .17);
    --muted: #91a29f;
    --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
    --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --pad: clamp(1.25rem, 4vw, 4.5rem);
  }

  html { background: var(--ink); overflow-x: clip; }
  body {
    min-width: 320px;
    color: var(--mist);
    background:
      radial-gradient(circle at 74% 4%, rgba(44, 112, 106, .12), transparent 28rem),
      linear-gradient(180deg, #081216 0%, #0a151a 45%, #071015 100%);
    font-family: var(--sans);
    line-height: 1.55;
    overflow-x: clip;
  }
  a { color: inherit; text-underline-offset: .22em; text-decoration-color: rgba(103, 216, 196, .45); }
  a:hover { color: var(--signal-hot); }
  ::selection { color: var(--ink); background: var(--signal); }
  :focus-visible { outline: 2px solid var(--signal-hot); outline-offset: 5px; }
  main:focus { outline: none; }
  h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
  h1 { font-size: clamp(3.4rem, 9vw, 9.6rem); }
  h2 { font-size: clamp(2.7rem, 6.3vw, 6.5rem); }
  h3 { font-size: 1.1rem; line-height: 1.25; }
  .eyebrow, .kicker {
    color: var(--signal);
    font: 600 .69rem/1.4 var(--mono);
    letter-spacing: .17em;
    text-transform: uppercase;
  }
  .skip-link {
    position: fixed; z-index: 100; left: 1rem; top: 1rem;
    padding: .75rem 1rem; color: var(--ink); background: var(--signal-hot);
    transform: translateY(-200%);
  }
  .skip-link:focus { transform: none; }
}

@layer layout {
  .masthead {
    position: absolute; z-index: 10; top: 0; left: 0; width: 100%;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    padding: 1.15rem var(--pad); border-bottom: 1px solid var(--rule);
    font: 600 .66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  }
  .masthead nav { display: flex; gap: clamp(1rem, 3vw, 2.4rem); }
  .masthead nav a { text-decoration: none; color: var(--muted); }
  .masthead nav a:hover { color: var(--paper); }
  .sigil { display: inline-flex; align-items: center; gap: .7rem; width: max-content; text-decoration: none; color: var(--paper); }
  .sigil svg { width: 26px; height: 26px; stroke: var(--bronze-light); fill: none; stroke-width: 1.7; }
  .status { justify-self: end; color: var(--muted); }
  .status i { display: inline-block; width: 6px; height: 6px; margin-right: .45rem; border-radius: 50%; background: var(--signal); box-shadow: 0 0 14px var(--signal); }

  .hero {
    position: relative; min-height: min(960px, 100svh); padding: clamp(8.2rem, 14vh, 11rem) var(--pad) 4rem;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); align-items: center;
    border-bottom: 1px solid var(--rule); isolation: isolate; overflow: hidden;
  }
  .hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px);
    background-size: 9vw 9vw; opacity: .18;
    mask-image: linear-gradient(to bottom, black, transparent 86%);
  }
  .hero__copy { position: relative; z-index: 2; max-width: 1000px; }
  .hero h1 { max-width: 1050px; margin: 1.2rem 0 2rem; color: var(--paper); }
  .hero h1 em { color: var(--bronze-light); font-weight: 400; }
  .lede { max-width: 650px; color: #b9c5c1; font: 400 clamp(1.15rem, 2vw, 1.55rem)/1.55 var(--serif); }
  .hero__actions { display: flex; align-items: center; gap: 2rem; margin-top: 2.3rem; }
  .action {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 2rem; min-width: 230px;
    padding: .95rem 1.15rem; color: var(--paper); border: 1px solid rgba(103, 216, 196, .42);
    background: rgba(8, 18, 22, .38); text-decoration: none; font: 600 .73rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase;
  }
  .action:hover { color: var(--ink); background: var(--signal-hot); border-color: var(--signal-hot); }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font: .72rem/1 var(--mono); }
  .hero__coordinates { position: absolute; top: 7rem; right: var(--pad); color: #718481; text-align: right; font: .61rem/1.65 var(--mono); letter-spacing: .1em; }
  .hero__caption { position: absolute; right: var(--pad); bottom: 2rem; width: min(28rem, 38vw); color: #718481; font: .66rem/1.55 var(--mono); }

  .staff { position: relative; align-self: stretch; min-height: 600px; opacity: .82; }
  .staff svg { position: absolute; width: min(42vw, 520px); height: 86%; left: 50%; top: 50%; transform: translate(-50%, -46%); overflow: visible; }
  .staff__spine, .staff__wing, .staff__ticks { fill: none; stroke: url(#bronze); stroke-width: 4; stroke-linecap: round; }
  .staff__wing { stroke-width: 3; }
  .staff__serpents { fill: none; stroke-linecap: round; }
  .serpent { stroke-width: 5; stroke-dasharray: 10 8; }
  .serpent--a { stroke: var(--signal); }
  .serpent--b { stroke: var(--bronze-light); }
  .staff__signal { fill: var(--signal-hot); }
  .staff__ping { fill: none; stroke: var(--signal); stroke-width: 1; opacity: .4; transform-origin: 260px 83px; }
  .staff__harbor { fill: none; stroke: #38565a; stroke-width: 1; opacity: .48; }

  .ruled {
    display: grid; grid-template-columns: minmax(120px, 17vw) 1fr; gap: clamp(2rem, 7vw, 8rem);
    padding: clamp(5rem, 12vw, 10rem) var(--pad); border-bottom: 1px solid var(--rule);
  }
  .section-mark { color: #718481; font: .64rem/1.55 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
  .section-mark span { display: block; margin-bottom: 1rem; color: var(--bronze-light); font-size: 1.8rem; letter-spacing: 0; }
  .manifesto__body, .doctrine__body, .traces__body, .kin__body { max-width: 1180px; }
  .manifesto h2 { margin: .8rem 0 3.5rem; color: var(--paper); }
  .prose-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem clamp(2rem, 6vw, 6rem); }
  .prose-grid p { max-width: 620px; color: #aebdb9; font-size: 1.02rem; }
  .prose-grid .pullquote { color: var(--paper); font: 400 clamp(1.7rem, 3vw, 2.7rem)/1.22 var(--serif); letter-spacing: -.02em; }

  .doctrine h2, .traces h2, .kin h2 { max-width: 900px; margin: .8rem 0 4rem; color: var(--paper); }
  .laws { list-style: none; padding: 0; border-top: 1px solid var(--rule); }
  .laws li { display: grid; grid-template-columns: 70px 1fr; gap: 1.5rem; padding: 1.8rem 0; border-bottom: 1px solid var(--rule); }
  .laws li > span { color: var(--bronze-light); font: .68rem/1 var(--mono); }
  .laws li div { display: grid; grid-template-columns: minmax(210px, .7fr) 1fr; gap: 2rem; }
  .laws h3 { color: var(--paper); font: 400 clamp(1.35rem, 2vw, 1.8rem)/1.2 var(--serif); }
  .laws p { max-width: 650px; color: #9cafab; }

  .trace-list { border-top: 1px solid var(--rule); }
  .trace { position: relative; display: grid; grid-template-columns: 1fr .75fr 36px; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: 2rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; }
  .trace:hover { color: inherit; }
  .trace::before { content: ""; position: absolute; inset: 0 calc(var(--pad) * -1); z-index: -1; background: rgba(103, 216, 196, .05); transform: scaleY(0); transform-origin: bottom; transition: transform .25s ease; }
  .trace:hover::before { transform: scaleY(1); }
  .trace__type { color: var(--signal); font: .62rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .trace h3 { margin-top: .65rem; color: var(--paper); font: 400 clamp(1.35rem, 2vw, 1.8rem)/1.2 var(--serif); }
  .trace p { color: #95a7a4; font-size: .88rem; }
  .trace__arrow { color: var(--bronze-light); font-size: 1.6rem; }
  .trace-note { max-width: 700px; margin-top: 2rem; color: #778b88; font: .68rem/1.6 var(--mono); }

  .constellation { position: relative; min-height: 420px; }
  .constellation__lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: rgba(103, 216, 196, .25); stroke-width: 1; stroke-dasharray: 4 6; }
  .node { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; width: 150px; height: 70px; padding: .8rem; border: 1px solid #344b4d; background: var(--deep); text-align: center; text-decoration: none; }
  .node span { color: var(--paper); font: 600 .68rem/1.2 var(--mono); letter-spacing: .1em; }
  .node small { margin-top: .45rem; color: #738885; font: .59rem/1 var(--mono); }
  .node--cad { left: 50%; top: 50%; width: 210px; height: 100px; transform: translate(-50%, -50%); border-color: var(--signal); box-shadow: 0 0 40px rgba(103, 216, 196, .08); }
  .node--cad span { color: var(--signal-hot); font-size: 1rem; }
  .node:nth-of-type(2) { left: 5%; top: 5%; }
  .node:nth-of-type(3) { right: 5%; top: 5%; }
  .node:nth-of-type(4) { left: 5%; bottom: 5%; }
  .node:nth-of-type(5) { right: 5%; bottom: 5%; }
  .custody { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(2rem, 5vw, 5rem); padding-top: 2.5rem; border-top: 1px solid var(--rule); }
  .custody p { color: #96aaa6; }
  .custody strong { display: block; margin-bottom: .65rem; color: var(--paper); font-family: var(--serif); font-size: 1.3rem; font-weight: 400; }

  .signal { padding: clamp(6rem, 15vw, 12rem) var(--pad); text-align: center; background: var(--paper); color: var(--ink); }
  .signal .eyebrow { color: #1c6a62; }
  .signal h2 { max-width: 1000px; margin: 1rem auto 2rem; }
  .signal > p:not(.eyebrow, .transmission__output) { max-width: 720px; margin: 0 auto; color: #34484b; font: 400 clamp(1.15rem, 2vw, 1.4rem)/1.5 var(--serif); }
  .signal__actions { display: flex; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
  .signal :focus-visible { outline-color: var(--ink); }
  .action--light { color: var(--paper); background: var(--ink); border-color: var(--ink); }
  .action--light:hover { color: var(--ink); background: var(--signal); border-color: var(--signal); }
  .transmission { padding: .95rem 1.15rem; border: 1px solid #9aa9a5; color: var(--ink); background: transparent; font: 600 .73rem/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
  .transmission:hover { border-color: var(--ink); background: #d7ded9; }
  .transmission__output { min-height: 1.6em; margin-top: 1.4rem; color: #546765; font: .68rem/1.5 var(--mono); }

  footer { display: grid; grid-template-columns: 1fr auto; gap: 2rem; padding: 2.4rem var(--pad); color: #758986; border-top: 1px solid var(--rule); font: .64rem/1.5 var(--mono); }
  footer > div:first-child { display: flex; gap: 1.2rem; }
  footer strong { color: var(--paper); }
  footer p { grid-column: 1 / -1; }
  .footer__links { display: flex; gap: 1.4rem; }
  .footer__links a { display: inline-flex; align-items: center; min-height: 44px; }

  .weather { position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; opacity: .45; mix-blend-mode: screen; }
  .weather__grain { position: absolute; inset: -100%; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E"); animation: grain .2s steps(2) infinite; }
  .weather__sweep { position: absolute; top: 0; left: -40%; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, rgba(103,216,196,.035), transparent); transform: skewX(-12deg); animation: sweep 14s ease-in-out infinite; }
}

@layer components {
  body::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 1px; z-index: 60; background: var(--signal); opacity: .28; box-shadow: 0 0 12px var(--signal); }
}

@layer motion {
  @keyframes grain { 0% { transform: translate(2%, -3%); } 25% { transform: translate(-4%, 2%); } 50% { transform: translate(3%, 4%); } 75% { transform: translate(-2%, -4%); } 100% { transform: translate(2%, -3%); } }
  @keyframes sweep { 0%, 60% { transform: translateX(-20vw) skewX(-12deg); opacity: 0; } 70% { opacity: 1; } 100% { transform: translateX(180vw) skewX(-12deg); opacity: 0; } }
  @keyframes pulse { 0%, 100% { transform: scale(.85); opacity: .18; } 50% { transform: scale(1.12); opacity: .55; } }
  @keyframes crawl { to { stroke-dashoffset: -36; } }
  .staff__ping--one { animation: pulse 4s ease-in-out infinite; }
  .staff__ping--two { animation: pulse 4s 1.2s ease-in-out infinite; }
  .serpent { animation: crawl 4s linear infinite; }
  .motion-paused .weather__grain,
  .motion-paused .weather__sweep,
  .motion-paused .staff__ping,
  .motion-paused .serpent { animation-play-state: paused; }
}

@media (max-width: 860px) {
  .masthead { grid-template-columns: 1fr 1fr; }
  .masthead nav { display: none; }
  .hero { min-height: 900px; grid-template-columns: 1fr; align-items: start; padding-top: 8rem; }
  .hero__copy { z-index: 3; }
  .hero h1 { font-size: clamp(3.7rem, 15vw, 6rem); }
  .hero__coordinates { top: auto; bottom: 2rem; }
  .hero__caption { display: none; }
  .staff { position: absolute; z-index: -1; right: -6rem; bottom: 0; width: 85%; height: 70%; min-height: 0; opacity: .35; }
  .staff svg { width: 100%; }
  .ruled { grid-template-columns: 1fr; gap: 2.2rem; }
  .section-mark { display: flex; gap: 1.2rem; align-items: center; }
  .section-mark span { margin: 0; }
  .prose-grid { grid-template-columns: 1fr; }
  .laws li div { grid-template-columns: 1fr; gap: .6rem; }
  .trace { grid-template-columns: 1fr 32px; }
  .trace > p { grid-column: 1; }
  .trace__arrow { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .constellation { min-height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .constellation__lines { display: none; }
  .node, .node--cad, .node:nth-of-type(n) { position: static; width: 100%; height: 90px; transform: none; }
  .node--cad { grid-column: 1 / -1; }
  .custody { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .weather { display: none; }
  .masthead { padding-top: .9rem; padding-bottom: .9rem; }
  .status { font-size: 0; }
  .status i { margin: 0; }
  .hero { min-height: 820px; }
  .hero h1 { font-size: clamp(3.3rem, 17vw, 5.1rem); }
  .hero__actions { align-items: stretch; flex-direction: column; gap: 1.2rem; }
  .action { width: 100%; }
  .hero__coordinates { left: var(--pad); right: auto; text-align: left; }
  .ruled { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .manifesto h2, .doctrine h2, .traces h2, .kin h2 { margin-bottom: 2.8rem; }
  .laws li { grid-template-columns: 36px 1fr; gap: .6rem; }
  .trace { gap: .8rem; }
  .constellation { grid-template-columns: 1fr; }
  .node--cad { grid-column: auto; }
  .signal__actions { flex-direction: column; }
  .transmission { min-height: 48px; }
  footer { grid-template-columns: 1fr; }
  footer > div:first-child { flex-direction: column; gap: .3rem; }
  .footer__links { flex-wrap: wrap; }
  footer p { grid-column: 1; }
}

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