/* =========================================================
   Signal | Silence — Publication Policy
   Renner-module typography (constructed, geometric, calm)
   No external dependencies. Print-safe. Platform-agnostic.
   ========================================================= */

:root{
  --paper:#ffffff;
  --ink:#111111;
  --muted:#666666;

  /* disciplined red: punctuation, not decoration */
  --signal:#b30000;

  /* Renner modules */
  --u: 4px;                 /* 1 module */
  --b: calc(var(--u) * 6);  /* baseline step = 24px */

  /* Measure */
  --measure: 64ch;

  /* Page padding (module aligned) */
  --padX: clamp(calc(var(--u)*8), 4vw, calc(var(--u)*14));
  --padY: clamp(calc(var(--u)*10), 6vh, calc(var(--u)*18));

  /* Type scale (module aligned) */
  --fs-body: calc(var(--u) * 4);  /* 16px */
  --fs-h1:   calc(var(--u) * 9);  /* 36px */
  --fs-foot: calc(var(--u) * 3);  /* 12px */

  /* Rules (FIXED) */
  --rule: rgba(0,0,0,.18);

  /* Focus */
  --focus: rgba(179,0,0,.55);
}

/* ---------- Quiet reset ---------- */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
  background:var(--paper);
  color:var(--ink);
}

/* ---------- Base typography ---------- */
body{
  font-family:
    "Futura",
    "TeX Gyre Adventor",
    "Avenir Next",
    "Helvetica Neue",
    Arial,
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;

  font-size: var(--fs-body);
  line-height: calc(var(--b) / var(--fs-body));
  letter-spacing: 0.01em;

  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Layout ---------- */
main{
  max-width: var(--measure);
  padding: var(--padY) var(--padX);
  margin: 0 auto;
  min-height: 100vh;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* ---------- Headings ---------- */
h1{
  margin: 0 0 calc(var(--u)*6) 0;
  font-size: var(--fs-h1);
  line-height: calc((var(--u)*10) / var(--fs-h1));
  font-weight: 500;
  letter-spacing: 0.03em;
}

h1 .bar{
  color: var(--signal);
}

/* ---------- Paragraph rhythm ---------- */
p{
  margin: 0 0 calc(var(--u)*6) 0;
  max-width: var(--measure);
}

strong{
  font-weight: 650;
}

/* ---------- Lists (for Architektur) ---------- */
ul{
  margin: 0 0 calc(var(--u)*6) 0;
  padding-left: calc(var(--u)*6);
}

li{
  margin: 0 0 calc(var(--u)*2) 0;
}

/* ---------- Links (structural, not decorative) ---------- */
a{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: calc(var(--u)*0.5);
}

a:hover{
  color: var(--signal);
  border-bottom-color: var(--signal);
}

a:focus-visible{
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* ---------- Active/current state ---------- */
a[aria-current="page"],
a.is-active{
  color: var(--signal);
  border-bottom-color: var(--signal);
  border-bottom-width: 2px;
}

/* ---------- Orientation (structural navigation) ---------- */
.orientation{
  margin-top: calc(var(--u)*10);
  padding-top: calc(var(--u)*6);
  border-top: 1px solid var(--rule);
}

.orientation p{
  margin-bottom: calc(var(--u)*4);
}

.orientation p:last-child{
  line-height: 1.35;
}

/* ---------- Call to action ---------- */
.cta{
  margin-top: calc(var(--u)*8);
}

.cta a{
  display:inline-block;
  border-bottom-width: 2px;
  padding-bottom: calc(var(--u)*1);
  letter-spacing: 0.02em;
}

/* ---------- Footer ---------- */
footer{
  margin-top: calc(var(--u)*12);
  font-size: var(--fs-foot);
  line-height: calc((var(--u)*4) / var(--fs-foot));
  color: var(--muted);
  letter-spacing: 0.02em;
}

footer a{
  border-bottom-color: rgba(0,0,0,.28);
}
footer a:hover{
  border-bottom-color: var(--signal);
}

/* ---------- Silence page emphasis (quiet, not alarm) ---------- */
.page-silence main{
  justify-content:center;
}

.page-silence main p{
  font-size: 1.05em;
  line-height: 1.4;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ink);
  margin-bottom: calc(var(--u)*4);
}

.page-silence .silence-word{
  font-weight: 700;
  color: var(--signal);
  letter-spacing: 0.08em;
}


/* ---------- PDF list ---------- */

.pdf-list{
  list-style:none;
  padding-left:0;
  margin-top: calc(var(--u)*6);
}

.pdf-list li{
  margin-bottom: calc(var(--u)*6);
}

.pdf-list small{
  display:block;
  color: var(--muted);
  font-size: var(--fs-foot);
  margin-top: calc(var(--u)*1.5);
}

/* ---------- Essay list ---------- */

.essay-list{
  list-style:none;
  padding-left:0;
  margin-top: calc(var(--u)*6);
}

.essay-list li{
  margin-bottom: calc(var(--u)*6);
}

.essay-list small{
  display:block;
  color: var(--muted);
  font-size: var(--fs-foot);
  margin-top: calc(var(--u)*1.5);
}

.pdf-disabled {
  color: #888;
  cursor: not-allowed;
  text-decoration: none;
}




/* ---------- Colophon (hidden on screen) ---------- */
.colophon{
  display: none;
}

/* ---------- Print layout ---------- */
@media print{

  :root{
    --paper:#ffffff;
    --ink:#000000;
    --muted:#444444;
    --rule: rgba(0,0,0,.25);
  }

  body{
    font-size: 12pt;
    line-height: 1.45;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  main{
    min-height:auto;
    padding: 24mm 20mm;
    justify-content:flex-start;
  }

  a{
    border-bottom:none;
    text-decoration: underline;
  }

  a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-size: 10pt;
    color: var(--muted);
  }

  .orientation{
    border-top: 1px solid rgba(0,0,0,.25);
    padding-top: calc(var(--u)*4);
    margin-top: calc(var(--u)*8);
  }

  .colophon{
    display: block;
    break-before: page;
    page-break-before: always;

    margin-top: calc(var(--u)*24);
    padding-top: calc(var(--u)*6);
    border-top: 1px solid var(--rule);

    font-size: var(--fs-foot);
    line-height: calc((var(--u)*4) / var(--fs-foot));
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  .colophon p{
    margin: 0 0 calc(var(--u)*3) 0;
  }

  .colophon p:last-child{
    margin-bottom: 0;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{
    scroll-behavior:auto !important;
  }
}
/* ====== Minimal interactive layer (quiet) ====== */

.tools {
  margin-top: calc(var(--u)*8);
  padding-top: calc(var(--u)*6);
  border-top: 1px solid var(--rule);
}

.input {
  width: 100%;
  max-width: var(--measure);
  font: inherit;
  padding: calc(var(--u)*3) calc(var(--u)*3);
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u)*2);
  margin-top: calc(var(--u)*4);
}

.chip {
  font: inherit;
  font-size: var(--fs-foot);
  color: var(--muted);
  border: 1px solid rgba(0,0,0,.22);
  padding: calc(var(--u)*1.5) calc(var(--u)*2.5);
  background: transparent;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  color: var(--signal);
  border-color: var(--signal);
}

.meta {
  color: var(--muted);
  font-size: var(--fs-foot);
  margin-top: calc(var(--u)*2);
}

.mini {
  color: var(--muted);
  font-size: var(--fs-foot);
}

.network {
  margin-top: calc(var(--u)*8);
  padding-top: calc(var(--u)*6);
  border-top: 1px solid var(--rule);
}
.network svg{
  width: 100%;
  max-width: 760px;
  height: clamp(240px, 34vh, 360px);
  display:block;
  margin: calc(var(--u)*6) auto;
  border: 1px solid rgba(0,0,0,.12);
}

/* stronger but still quiet */
.edge{
  stroke: rgba(0,0,0,.32);
  stroke-width: 2.4;
}

.node-dot{
  fill: var(--paper);
  stroke: rgba(0,0,0,.55);
  stroke-width: 2;
}

.node-dot.is-active{
  stroke: var(--signal);
  stroke-width: 2.6;
}

.node-label{
  font-size: 14px;
  fill: var(--ink);
}


.edge.is-active {
  stroke: rgba(179,0,0,.35);
  stroke-width: 2;
}

.diagram {
  margin-top: calc(var(--u)*8);
  padding-top: calc(var(--u)*6);
  border-top: 1px solid var(--rule);
}

.panel {
  margin-top: calc(var(--u)*6);
  padding: calc(var(--u)*5);
  border: 1px solid rgba(0,0,0,.12);
}

.panel h3 {
  margin: 0 0 calc(var(--u)*3) 0;
  font-size: calc(var(--u) * 5);
  font-weight: 650;
}

.panel p {
  margin-bottom: calc(var(--u)*4);
}

/* --- Animated rule for orientation --- */
.page-silence .orientation{
  position: relative;
  border-top: none; /* replaces the static border */
}

.page-silence .orientation::before{
  content:"";
  position:absolute;
  top:0; left:0;
  height:1px;
  width:0%;
  background: var(--rule);
  transition: width 1200ms ease;
}

.page-silence .orientation.is-visible::before{
  width:100%;
}

@media (prefers-reduced-motion: reduce){
  .page-silence .orientation::before{
    width:100%;
    transition:none;
  }
}

/* --- Headline rule: first word in red --- */

h1 .headline-first{
  color: var(--signal);
  font-weight: 650;
  letter-spacing: 0.02em;
}

/* ensure the separator keeps normal color */
h1 .headline-separator{
  color: var(--signal);
  font-weight: 400;
}

.bar{
  color: var(--signal);
  margin: 0 0.15em;
  font-weight: 300;
}


/* ===== Intro words (quiet, editorial) ===== */

.intro-words{
  position: relative;
  height: 220px;
  margin: calc(var(--u)*8) 0 calc(var(--u)*8) 0;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid transparent;
}

.intro-word{
  position: absolute;
  color: var(--muted);
  font-size: 14px;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 1600ms ease,
    transform 2200ms ease,
    left 3200ms ease,
    top 3200ms ease;
  white-space: nowrap;
  pointer-events: none;
}

.intro-word.is-visible{
  opacity: 0.82;
  transform: translateY(0);
}

.intro-word.is-fading{
  opacity: 0;
}

.intro-word.is-accent{
  color: var(--signal);
}

@media (prefers-reduced-motion: reduce){
  .intro-words{
    display: none;
  }

  .intro-word{
    transition: none;
  }
}
/* ---------- content fade after intro ---------- */

.content-fade{
  opacity: 0.15;
  transform: translateY(8px);
  transition:
    opacity 1800ms ease,
    transform 1800ms ease;
}

.content-fade.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .content-fade{
    opacity:1;
    transform:none;
    transition:none;
  }
}