/* =========================================================
   THE TWELVE PROJECT
   World palette: ash / orange / gray-blue / green
   Two themes; per-elemental accent + tint on story pages.
   ========================================================= */

:root {
  --ash:       #8a8578;
  --orange:    #d9722e;
  --gray-blue: #6b8494;
  --green:     #4a7a5c;

  /* The twelve elemental colors — used by page themes AND the hive map */
  --c-igna:   #f26a2e;  --c-igna-d:   #8f3512;
  --c-aqua:   #4a90c4;  --c-aqua-d:   #1f5480;
  --c-aerial: #a9c9d8;  --c-aerial-d: #4d7688;
  --c-terra:  #c08a4a;  --c-terra-d:  #6f4a22;
  --c-clara:  #3fae9f;  --c-clara-d:  #14605a;
  --c-saluta: #d9614c;  --c-saluta-d: #8a2f22;
  --c-corra:  #e0648e;  --c-corra-d:  #8d2f52;
  --c-aera:   #98a0c0;  --c-aera-d:   #4d5474;
  --c-anima:  #d9ac3c;  --c-anima-d:  #86651a;
  --c-caeca:  #9a6bc4;  --c-caeca-d:  #533078;
  --c-intera: #7f6a94;  --c-intera-d: #3a2b4c;
  --c-viriba: #c26b45;  --c-viriba-d: #79361f;

  --font-display: "Anton", Impact, sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --max-width: 780px;
  --grain-opacity: 0.06;
}

/* ---------- Themes ---------- */

[data-theme="dark"] {
  --bg: #17191b;
  --bg-solid: #17191b;
  --ink: #e8e6e0;
  --line: #34383c;
  --muted: rgba(232,230,224,0.62);
  --hover-wash: rgba(232,230,224,0.05);
  --grain-ink: 232,230,224;
  --accent: var(--orange);
  --accent-2: var(--gray-blue);
  --tint: var(--bg-solid);
}

[data-theme="light"] {
  --bg: #e9e6df;
  --bg-solid: #e9e6df;
  --ink: #1b1d1f;
  --line: #c8c3b8;
  --muted: rgba(27,29,31,0.66);
  --hover-wash: rgba(27,29,31,0.05);
  --grain-ink: 27,29,31;
  --accent: #b45a1c;
  --accent-2: #4f6674;
  --tint: var(--bg-solid);
}

/* ---------- The twelve elemental palettes ----------
   Each defines a bright and a deep tone; the theme
   rules below choose which one becomes the accent. */

[data-element="igna"]   { --el-bright: var(--c-igna);   --el-deep: var(--c-igna-d); }
[data-element="aqua"]   { --el-bright: var(--c-aqua);   --el-deep: var(--c-aqua-d); }
[data-element="aerial"] { --el-bright: var(--c-aerial); --el-deep: var(--c-aerial-d); }
[data-element="terra"]  { --el-bright: var(--c-terra);  --el-deep: var(--c-terra-d); }
[data-element="clara"]  { --el-bright: var(--c-clara);  --el-deep: var(--c-clara-d); }
[data-element="saluta"] { --el-bright: var(--c-saluta); --el-deep: var(--c-saluta-d); }
[data-element="corra"]  { --el-bright: var(--c-corra);  --el-deep: var(--c-corra-d); }
[data-element="aera"]   { --el-bright: var(--c-aera);   --el-deep: var(--c-aera-d); }
[data-element="anima"]  { --el-bright: var(--c-anima);  --el-deep: var(--c-anima-d); }
[data-element="caeca"]  { --el-bright: var(--c-caeca);  --el-deep: var(--c-caeca-d); }
[data-element="intera"] { --el-bright: var(--c-intera); --el-deep: var(--c-intera-d); }
[data-element="viriba"] { --el-bright: var(--c-viriba); --el-deep: var(--c-viriba-d); }

[data-theme="dark"] [data-element] {
  --accent: var(--el-bright);
  --accent-2: var(--el-deep);
  --tint: #1a1c1e;
  --tint: color-mix(in srgb, var(--el-bright) 7%, #17191b);
}
[data-theme="light"] [data-element] {
  --accent: var(--el-deep);
  --accent-2: var(--el-bright);
  --tint: #e6e2da;
  --tint: color-mix(in srgb, var(--el-bright) 12%, #e9e6df);
}

/* ---------- Base ---------- */

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  transition: background-color .25s ease, color .25s ease;
}
a { color: inherit; text-decoration: none; }

.grain {
  background-image: radial-gradient(circle at 1px 1px, rgba(var(--grain-ink), var(--grain-opacity)) 1px, transparent 0);
  background-size: 4px 4px;
}

/* ---------- Header ---------- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding: 1.1rem 2rem;
  border-bottom: 4px solid var(--orange);
  box-shadow: 0 4px 0 var(--gray-blue);
  margin-bottom: 4px;
}
.brand { display: flex; align-items: center; gap: 0.65rem; }
.brand-mark {
  font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.02em;
  color: var(--bg-solid); background: var(--orange); padding: 0.25rem 0.5rem;
}
.brand-name { font-family: var(--font-display); font-size: 1.15rem; text-transform: uppercase; }
.header-right { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.site-nav { display: flex; gap: 1.4rem; flex-wrap: wrap; font-family: var(--font-mono); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; }
.site-nav a { color: var(--ink); border-bottom: 2px solid transparent; padding-bottom: 3px; transition: border-color .15s, color .15s; }
.site-nav a:hover { border-color: var(--orange); color: var(--orange); }

.theme-toggle {
  font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 2px solid var(--line);
  padding: 0.4rem 0.7rem; cursor: pointer; transition: border-color .15s, color .15s;
  display: flex; align-items: center; gap: 0.45rem;
}
.theme-toggle:hover { border-color: var(--orange); color: var(--orange); }
.theme-toggle .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ink); flex-shrink: 0; }
[data-theme="light"] .theme-toggle .dot { background: transparent; box-shadow: inset 0 0 0 2px var(--ink); }

/* ---------- Page bands ---------- */

.page { background-color: var(--tint); border-top: 4px solid var(--accent); transition: background-color .25s ease; }
.page-inner { max-width: var(--max-width); margin: 0 auto; padding: 3.5rem 1.5rem 3rem; }
.page-neutral { background-color: var(--bg-solid); border-top: none; }
.page-neutral .page-inner {
  padding-top: 3rem;
  padding-bottom: 9rem;
  min-height: 82vh;   /* homepage fills most of the screen */
}

.eyebrow {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 0.8rem;
}
h1 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.4rem, 7vw, 4rem); line-height: 0.95; margin: 0 0 1.2rem; }

/* ---------- Hero with hive-network map ---------- */

.hero { position: relative; text-align: center; padding: 0 0 2.5rem; }
.hive-map {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 1180px; max-width: 170%; height: auto; pointer-events: none; z-index: 0;
}
.grat  { fill: none; stroke: var(--ash); stroke-width: 0.6; opacity: 0.16; }
.topo { fill: none; stroke: var(--ash); stroke-width: 0.6; stroke-linejoin: round; }
.link-live { fill: none; stroke: var(--orange); stroke-width: 1.2; opacity: 0.85; }
.node-ring { fill: var(--bg-solid); }
.node-halo { fill: none; stroke: var(--orange); stroke-width: 1; opacity: 0.5; }

@keyframes breathe {
  0%, 100% { r: 11; opacity: .5; }
  50%      { r: 19; opacity: 0; }
}
.node-halo { animation: breathe 4.5s ease-out infinite; }
.halo-b { animation-delay: 1.5s; }
.halo-c { animation-delay: 3s; }

.hero-inner { position: relative; z-index: 1; padding-top: 8rem; }
.hero-eyebrow-wrap { display: flex; justify-content: center; margin-bottom: -0.9rem; }
.hero-eyebrow-wrap svg { width: 100%; max-width: 480px; height: auto; }
.eyebrow-arc { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.13em; fill: var(--orange); text-transform: uppercase; }
.hero-title { font-size: clamp(2.6rem, 8vw, 4.6rem); }
.hero-title .accent { color: var(--gray-blue); }
.hero-sub { color: var(--muted); font-size: 1.05rem; max-width: 44ch; margin: 0 auto 2rem; }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; }
.btn {
  font-family: var(--font-display); font-size: 0.95rem; letter-spacing: 0.03em; text-transform: uppercase;
  padding: 0.9rem 1.7rem; border: 3px solid var(--ink); transition: all .12s; cursor: pointer;
}
.btn-primary { background: var(--orange); color: #17191b; border-color: var(--orange); margin-right: -3px; }
.btn-primary:hover { background: transparent; color: var(--orange); }
.btn-ghost { background: transparent; border-color: var(--ink); }
.btn-ghost:hover { background: var(--green); border-color: var(--green); color: #f2f0ea; }

/* ---------- Act page ---------- */

.act-summary { color: var(--muted); max-width: 60ch; margin-bottom: 2.2rem; }
.dossier { list-style: none; margin: 0; padding: 0; }
.dossier-row { border-bottom: 1px solid var(--line); border-left: 4px solid var(--accent); }
.dossier-row:nth-child(even) { border-left-color: var(--accent-2); }
.dossier-row a { display: flex; align-items: center; gap: 1rem; padding: 1.05rem 1rem; transition: background .12s; }
.dossier-row a:hover { background: var(--hover-wash); }
.case-no { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.05em; color: var(--bg-solid); background: var(--accent); padding: 0.28rem 0.5rem; flex-shrink: 0; }
.case-title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.15rem; flex-grow: 1; }
.case-arrow { color: var(--accent); opacity: 0; transition: opacity .12s, transform .12s; }
.dossier-row a:hover .case-arrow { opacity: 1; transform: translateX(3px); }

/* ---------- Chapter page ---------- */

.chapter-body { font-size: 1.06rem; }
.chapter-body p { margin: 0 0 1.4rem; }
.chapter-nav { display: flex; justify-content: space-between; gap: 1.5rem; margin-top: 3rem; padding-top: 1.8rem; border-top: 1px solid var(--line); }
.chapter-nav-link { display: flex; flex-direction: column; gap: 0.3rem; max-width: 45%; }
.chapter-nav-link.next { text-align: right; margin-left: auto; }
.chapter-nav-link .dir { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.chapter-nav-link .ch-name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.05rem; }
.chapter-nav-link:hover .ch-name { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer {
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: 2rem; border-top: 4px solid var(--gray-blue); color: var(--muted);
  font-family: var(--font-mono); font-size: 0.76rem;
}
.site-footer a:hover { color: var(--orange); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media (max-width: 700px) {
  .site-header { padding: 1rem 1.25rem; }
  .header-right { gap: 1rem; }
  .page-inner { padding: 2.5rem 1.25rem 2.5rem; }
  .page-neutral .page-inner { padding-bottom: 4rem; min-height: 0; }
  .hero-inner { padding-top: 3.5rem; }
  .chapter-nav { flex-direction: column; }
  .chapter-nav-link, .chapter-nav-link.next { max-width: 100%; text-align: left; margin-left: 0; }
}

/* ---------- Simple content pages ---------- */

.simple-page h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 400; font-size: 1.5rem; margin: 2.2rem 0 0.8rem; }
.simple-page h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin: 1.6rem 0 0.4rem; }
.simple-page p { margin: 0 0 1.2rem; }
.simple-page a:not(.btn) { color: var(--accent); border-bottom: 1px solid var(--accent); }
.simple-page ul { padding-left: 1.2rem; }
.simple-page li { margin-bottom: 0.4rem; }
.simple-page img { max-width: 100%; height: auto; }

/* ---------- Italic passages ----------
   For dreams, flashbacks, transmissions — a whole run of paragraphs.
   Usage (the blank lines are required):

     <div class="italic">

     First paragraph.

     Second paragraph.

     </div>

   Use class="aside" instead for italics plus an indent and accent rule. */

.chapter-body .italic,
.simple-page .italic { font-style: italic; }

.chapter-body .aside,
.simple-page .aside {
  font-style: italic;
  border-left: 2px solid var(--accent);
  padding-left: 1.4rem;
  margin: 2rem 0;
  color: var(--muted);
}

.chapter-body .italic em,
.chapter-body .aside em { font-style: normal; }

/* ---------- Images ----------
   Mix one from each group, separated by spaces:

     SIZE      tiny | small | medium | large | wide | full-bleed
     POSITION  left | right | center      (omit = own line, flush left)
     STYLE     round | frame              (optional)

   e.g.  <img src="/images/hannah.png" alt="Hannah" class="medium right frame">

   Floated images never take more than 45% of the column, so text always has
   room, and they drop to full width on phones. */

.simple-page img,
.chapter-body img {
  --img-w: 100%;
  max-width: var(--img-w);
  height: auto;
  display: block;
  margin: 1.6rem 0;
}

/* --- size --- */
.simple-page img.tiny,   .chapter-body img.tiny   { --img-w: 140px; }
.simple-page img.small,  .chapter-body img.small  { --img-w: 220px; }
.simple-page img.medium, .chapter-body img.medium { --img-w: 380px; }
.simple-page img.large,  .chapter-body img.large  { --img-w: 560px; }
.simple-page img.wide,   .chapter-body img.wide   { --img-w: 100%; }

/* --- position --- */
.simple-page img.center, .chapter-body img.center {
  margin-left: auto; margin-right: auto;
}
.simple-page img.left,  .chapter-body img.left {
  float: left;
  margin: 0.4rem 1.6rem 1rem 0;
  max-width: min(var(--img-w), 45%);
}
.simple-page img.right, .chapter-body img.right {
  float: right;
  margin: 0.4rem 0 1rem 1.6rem;
  max-width: min(var(--img-w), 45%);
}

/* --- style --- */
.simple-page img.round, .chapter-body img.round {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.simple-page img.frame, .chapter-body img.frame {
  border: 3px solid var(--accent);
}

/* Edge to edge, breaking out of the text column */
.simple-page img.full-bleed, .chapter-body img.full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Two or three images side by side:
     <div class="image-row">
       <img src="…" alt="…"><img src="…" alt="…">
     </div>                                            */
.image-row {
  display: flex;
  gap: 1rem;
  margin: 1.6rem 0;
  clear: both;
}
.image-row img {
  flex: 1 1 0;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* Stop floats bleeding into the next section */
.simple-page h2, .simple-page h3, .simple-page hr,
.chapter-body h2, .chapter-body h3, .chapter-body hr { clear: both; }

/* Caption: put <p class="caption">…</p> directly under an image */
.caption {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
  margin: -1rem 0 1.6rem;
}
.image-row + .caption { margin-top: -1rem; }

@media (max-width: 640px) {
  .simple-page img.left,  .chapter-body img.left,
  .simple-page img.right, .chapter-body img.right {
    float: none; margin: 1.6rem 0; max-width: 100%;
  }
  .image-row { flex-direction: column; }
}

/* ---------- Contact form ---------- */

.contact-form {
  margin: 2rem 0 0;
  max-width: 34rem;
}
.contact-form .field { margin-bottom: 1.4rem; }
.contact-form label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line);
  padding: 0.7rem 0.85rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0;
  -webkit-appearance: none;
  transition: border-color .15s ease;
}
.contact-form textarea { min-height: 11rem; resize: vertical; }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: var(--muted); }

.contact-form button {
  font-family: var(--font-display);
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.85rem 1.8rem;
  background: var(--accent);
  color: var(--bg-solid);
  border: 3px solid var(--accent);
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.contact-form button:hover { background: transparent; color: var(--accent); }

/* Spam honeypot — hidden from people, visible to bots */
.contact-form .hp { position: absolute; left: -9999px; }

/* ---------- Skip link ---------- */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--accent); color: var(--bg-solid); padding: 0.6rem 1rem;
  font-family: var(--font-mono); font-size: 0.8rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}