/* Gideion Labs: the forge. One stylesheet and the sigil; no external requests, no scripts, no trackers.
   A deliberately single, dark look, matched to the Crimson Mechanica sigil: black field, machined iron plates with
   rivets, engraved capitals, a crimson ember and the optic's blue. */

:root {
  --void: #060607;
  --iron: #121214;
  --iron-hi: #1d1d21;
  --edge: #2e2e34;
  --steel: #7d8189;
  --steel-hi: #c7cad0;
  --bone: #e6dfd2;
  --muted: #a39d92;
  --crimson: #c21f37;
  --ember: rgba(194, 31, 55, 0.32);
  --optic: #7cc0ff;
  --optic-glow: rgba(124, 192, 255, 0.55);
  --brass: #b9955c;
  --brass-dk: #6e5631;
  --confirm: rgba(214, 160, 60, 0.18);
  --engraved: "Trajan Pro", "Cinzel", Optima, "Palatino Linotype", "Book Antiqua", Palatino, "Noto Serif", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--void); }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--bone);
  font: 1.0625rem/1.7 system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(ellipse 70% 42rem at 50% 18rem, rgba(124, 192, 255, 0.07), transparent 70%),
    radial-gradient(ellipse 90% 50rem at 50% 30rem, var(--ember), transparent 72%),
    var(--void);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}

a { color: var(--optic); text-decoration-color: rgba(124, 192, 255, 0.4); text-underline-offset: 0.2em; }
a[href^="tel:"] { white-space: nowrap; }
a:hover, a:focus-visible { color: #fff; text-decoration-color: var(--optic); text-shadow: 0 0 12px var(--optic-glow); }

/* ---- the sigil ------------------------------------------------------------------------------------------------- */

.hero { display: grid; justify-items: center; text-align: center; gap: 0.6rem; padding-block: 2.5rem 1rem; }
.sigil { position: relative; width: min(86vw, 34rem); aspect-ratio: 1; max-width: 100%; }
.sigil img {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  filter: drop-shadow(0 0 2.5rem rgba(194, 31, 55, 0.28)) drop-shadow(0 1.5rem 3rem rgba(0, 0, 0, 0.9));
}
/* The optic's light, over the sigil's cybernetic eye, breathing slowly. */
.sigil .optic {
  position: absolute; left: 58.8%; top: 48.1%; width: 14%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(170, 215, 255, 0.85) 0 8%, rgba(124, 192, 255, 0.35) 22%, transparent 66%);
  animation: optic 4.8s ease-in-out infinite;
}
@keyframes optic { 0%, 100% { opacity: 0.25; scale: 0.85; } 50% { opacity: 1; scale: 1.1; } }
@media (prefers-reduced-motion: reduce) { .sigil .optic { animation: none; opacity: 0.6; } }

.wordmark, .doc-mark .wordmark {
  margin: 0; font-family: var(--engraved); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.22em; line-height: 1.15; text-wrap: balance;
  font-size: clamp(1.9rem, 7vw, 3.1rem);
  color: var(--steel-hi);
  background: linear-gradient(180deg, #f4f5f7 0%, #b9bcc3 46%, #6d7078 54%, #d7d9de 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.85));
  padding-left: 0.22em;                 /* balance the trailing letter-spacing */
}
.wordmark a { color: inherit; text-decoration: none; -webkit-text-fill-color: transparent; }
.motto {
  margin: 0; font-family: var(--engraved); text-transform: uppercase; letter-spacing: 0.32em;
  font-size: clamp(0.82rem, 2.4vw, 0.95rem); color: var(--brass); padding-left: 0.32em;
}

/* A short row of anchors under the brand, so a phone needn't scroll the whole page to reach contact. */
.jump { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin-top: 0.5rem; }
.jump a {
  font-family: var(--engraved); text-transform: uppercase; letter-spacing: 0.07em; font-size: 0.86rem;
  color: var(--steel-hi); text-decoration: none; padding: 0.45rem 0.55rem;     /* a fingertip's worth of target */
}
.jump a + a::before { content: "·"; color: var(--brass-dk); margin-right: 1.1rem; margin-left: -0.55rem; }
.jump a:hover { color: #fff; text-shadow: none; text-decoration: underline; text-decoration-color: var(--crimson); }
.jump a:focus-visible, .foot a:focus-visible { outline: 2px solid var(--optic); outline-offset: 3px; }

/* ---- the plates ------------------------------------------------------------------------------------------------ */

.page { max-width: 46rem; margin: 0 auto; display: grid; gap: 1.75rem; padding-block: 1.5rem 2.5rem; }

.plate {
  position: relative;
  margin: 0;
  padding: 1.6rem clamp(1.1rem, 4vw, 2rem) 1.7rem;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, var(--iron-hi), var(--iron) 60%, #0d0d0f);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    inset 0 -1px 0 rgba(0, 0, 0, 0.7),
    inset 0 0 0 4px rgba(0, 0, 0, 0.25),
    0 1.25rem 2.5rem -1rem rgba(0, 0, 0, 0.9);
  display: grid; gap: 1rem;
}
/* Four rivets, one in each corner. */
.plate::before {
  content: ""; position: absolute; inset: 9px; pointer-events: none;
  --rivet: radial-gradient(circle at 35% 35%, #d4d6db 0, #8b8e95 1.6px, #3a3b40 3.2px, transparent 4px);
  background: var(--rivet) left top / 9px 9px no-repeat, var(--rivet) right top / 9px 9px no-repeat,
              var(--rivet) left bottom / 9px 9px no-repeat, var(--rivet) right bottom / 9px 9px no-repeat;
}

/* A stamped heading, ruled out to its section's edges. Quiet sections and plates share it. */
.page h2, .doc h1 {
  margin: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.9rem;
  font-family: var(--engraved); font-weight: 600; text-transform: uppercase; letter-spacing: 0.26em;
  font-size: 0.92rem; color: var(--brass); text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 -1px 0 rgba(255, 255, 255, 0.05);
}
.page h2::before, .page h2::after, .doc h1::before, .doc h1::after {
  content: ""; height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dk) 30%, var(--brass-dk));
  mask: linear-gradient(90deg, #000 calc(100% - 9px), transparent calc(100% - 9px));
}
.page h2::after, .doc h1::after { transform: scaleX(-1); }
.page h2 { scroll-margin-top: 1.25rem; }
.doc h1 { font-size: clamp(1.05rem, 4vw, 1.3rem); letter-spacing: 0.2em; color: var(--steel-hi); }

.plate p, .ruled p { margin: 0; }

/* Quieter sections: the heading's rules, open space, no enclosure. The plates are kept for what should weigh most. */
.ruled { display: grid; gap: 1rem; padding: 0.4rem clamp(0.25rem, 2vw, 0.75rem); }

/* The quote, free-standing between two thin crimson rules. */
.quote {
  margin: 0.5rem 0; padding: 1.4rem clamp(0.5rem, 4vw, 2.5rem);
  border-block: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, rgba(194, 31, 55, 0.7), transparent) 1;
}
.quote blockquote {
  margin: 0; text-align: center; font-family: var(--engraved); font-style: italic;
  font-size: clamp(1.15rem, 3.8vw, 1.45rem); line-height: 1.5; color: var(--bone); text-wrap: balance;
}
.quote blockquote p::before, .quote blockquote p::after { color: var(--crimson); font-style: normal; }
.quote blockquote p::before { content: "“"; }
.quote blockquote p::after { content: "”"; }

/* People: brass nameplates. */
.nameplates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.nameplates li {
  display: grid; gap: 0.3rem; align-content: center; text-align: center; padding: 0.95rem 0.9rem 1rem;
  border-radius: 4px; border: 1px solid #5c4828;
  background: linear-gradient(180deg, #2a2216, #1a150e);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}
.nameplates .name { font-family: var(--engraved); font-weight: 600; letter-spacing: 0.08em; color: #ead6ad; line-height: 1.3; }
.nameplates .role { font-size: 0.85rem; color: #b29a72; line-height: 1.35; }

/* Projects: the registry, each with its status light. */
.registry { list-style: none; margin: 0; padding: 0; display: grid; }
.registry li {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1.25rem;
  padding: 0.8rem 0.1rem; border-bottom: 1px solid var(--edge);
}
.registry li:last-child { border-bottom: 0; }
.registry .name { font-family: var(--engraved); font-size: 1.05rem; letter-spacing: 0.06em; color: var(--bone); }
.registry .state {
  display: inline-flex; align-items: center; gap: 0.55rem; white-space: nowrap;
  font-size: 0.84rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
/* An in-progress light: brass, not the optic's "online" blue. The label says the status; the light only decorates. */
.registry .led {
  width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #d9a648;
  box-shadow: 0 0 0.5rem rgba(217, 166, 72, 0.55), 0 0 0.15rem #fff6 inset;
  animation: led 3.2s ease-in-out infinite;
}
.registry li:nth-child(2n) .led { animation-delay: -1.1s; }
.registry li:nth-child(3n) .led { animation-delay: -2.3s; }
@keyframes led { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .registry .led { animation: none; } }

/* Contact. */
.contact { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.55rem 1.4rem; align-items: baseline; }
.contact dt { font-family: var(--engraved); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.84rem; color: var(--steel); }
.contact dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ---- the policy pages ------------------------------------------------------------------------------------------ */

.doc-mark { display: grid; justify-items: center; gap: 0.5rem; padding-block: 2rem 0.5rem; text-align: center; }
.doc-mark .sigil { width: 7.5rem; }
.doc-mark .wordmark { font-size: clamp(1.3rem, 5vw, 1.75rem); }
.doc-mark a.home { text-decoration: none; display: grid; justify-items: center; gap: 0.6rem; }
.effective { margin: 0; text-align: center; color: var(--muted); font-size: 0.85rem; letter-spacing: 0.08em; }
.doc ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.doc li::marker { color: var(--crimson); }
.doc strong { color: #fff; font-weight: 600; }
.doc .key {
  font-family: var(--engraved); font-weight: 700; letter-spacing: 0.12em; color: #fff;
  padding: 0 0.35em; border: 1px solid var(--steel); border-radius: 3px; background: #0b0b0d;
}
.notice {
  border-left: 3px solid var(--crimson); padding: 0.9rem 1.1rem; border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, rgba(194, 31, 55, 0.12), transparent 80%);
}

/* Draft only: wording still to be confirmed against the meeting notes and the campaign's settings. */
.confirm { background: var(--confirm); border-bottom: 1px dashed #d6a03c; color: #f3d9a4; padding: 0 0.15em; }

/* ---- the footer ------------------------------------------------------------------------------------------------ */

.foot {
  max-width: 46rem; margin: 0 auto; padding-block: 1.4rem 2.5rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--edge); color: var(--muted); font-size: 0.85rem;
}
.foot .maxims { font-family: var(--engraved); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.82rem; color: var(--steel); text-wrap: balance; }
.foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a[aria-current] { color: var(--bone); }

@media (max-width: 30rem) {
  .hero { padding-block: 1.5rem 0.5rem; }
  .registry li { flex-direction: column; align-items: flex-start; }
  .contact { grid-template-columns: 1fr; gap: 0.1rem; }
  .contact dd { margin-bottom: 0.7rem; }
}