/* Filament — the frame around every page on rudimakes.com.
   Night is the room, Bone is the text, Filament (amber) is light,
   Phosphor is signal. The legacy repair pages keep style.css. */

:root {
  --night: #14120F;
  --bone: #EFE7DA;
  --filament: #F0A02B;
  --phosphor: #9FD18B;

  --bg: var(--night);
  --fg: var(--bone);
  --dim: #8D877F;
  --faint: #4A453E;
  --rule: #2A2622;
  --light: var(--filament);      /* links, focus */
  --mark: var(--filament);       /* the f */
  --signal: var(--phosphor);

  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  --measure: 34rem;
  --slow: 1.1s cubic-bezier(.3, 0, .2, 1);
  color-scheme: dark;
}

/* lights on: Bone room, Night text; amber and phosphor a few shades deeper */
:root[data-theme="light"] {
  --bg: var(--bone);
  --fg: var(--night);
  --dim: #5E574D;
  --faint: #9A9081;
  --rule: #D8CEBE;
  --light: #8F5300;
  --mark: #D48A1A;
  --signal: #3A7128;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  transition: background-color .6s ease, color .6s ease;
}
main { flex: 1; }
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .5s ease; }
a:hover, a:focus-visible { color: var(--light); }
:focus-visible { outline: 1px solid var(--light); outline-offset: 4px; }
::selection { background: var(--filament); color: var(--night); }
p { margin: 0 0 1.1em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.mono { font: 400 .75rem/1.4 var(--mono); letter-spacing: .04em; }
.dim { color: var(--dim); }

/* ---------- the mark and wordmark ---------- */
.f { stroke: var(--mark); fill: none; stroke-width: 37; stroke-linecap: round; stroke-linejoin: round; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 36;
  font-size: 1.3rem;
  letter-spacing: -.02em;
  line-height: 1;
}
.wordmark svg { height: 1.55em; width: auto; }
.wordmark:hover { color: var(--fg); }

/* ---------- header ---------- */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 22px var(--gutter);
}
.top nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 28px); font-size: .875rem; }
.top nav a { color: var(--dim); }
.top nav a:hover, .top nav a[aria-current="page"] { color: var(--light); }

/* lights on / lights off */
.lights {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--dim);
  font: 400 .6875rem/1 var(--mono);
  letter-spacing: .04em;
  cursor: pointer;
}
.lights:hover { color: var(--fg); }
.lights .sw {
  position: relative;
  width: 22px;
  height: 12px;
  border: 1px solid currentColor;
  border-radius: 6px;
}
.lights .sw::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--faint);
  transition: transform .4s ease, background-color .4s ease;
}
:root[data-theme="light"] .lights .sw::after { transform: translateX(10px); background: var(--mark); }
.lights .on { display: none; }
:root[data-theme="light"] .lights .on { display: inline; }
:root[data-theme="light"] .lights .off { display: none; }

@media (max-width: 480px) {
  .top nav { gap: 14px; }
  .lights .word { display: none; }
}

/* ---------- footer ---------- */
.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding: 72px var(--gutter) 28px;
  color: var(--dim);
  font-size: .8125rem;
}
.foot .links { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.foot .signoff { width: 100%; color: var(--faint); margin: 0; }

/* ---------- the on-air dot ---------- */
.air {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--signal);
  animation: air 3.2s ease-in-out infinite;
}
@keyframes air { 50% { opacity: .3; } }

/* ---------- home: the doorway ---------- */
.doorway {
  min-height: calc(100svh - 76px);
  display: grid;
  place-items: center;
  padding: 0 var(--gutter) 10vh;
}
.doorway .inner { display: grid; justify-items: center; gap: 2.75rem; }
.doorway svg { height: clamp(120px, 22vh, 190px); width: auto; }
.doorway p {
  margin: 0;
  font: 400 1.0625rem/1.4 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  font-style: italic;
  color: var(--dim);
  text-align: center;
}

/* the mark warms up, the way a bulb comes on */
.warm { animation: warm 1.2s cubic-bezier(.5, 0, .3, 1) both .25s; }
@keyframes warm {
  0% { opacity: 0; }
  35% { opacity: .22; }
  55% { opacity: .14; }
  100% { opacity: 1; }
}

/* ---------- home: the channels, kept like a log ---------- */
.log {
  max-width: 40rem;
  margin: 0 auto;
  padding: 24vh var(--gutter) 0;
}
.log .date { color: var(--dim); margin: 0 0 2.5rem; }
/* resonance: the weekly reading, under the date like the top of a log */
.resonance { margin: -1rem 0 3.5rem; }
.resonance > p.mono { display: flex; align-items: center; gap: .6rem; color: var(--dim); margin: 0 0 1rem; }
.moon { width: 15px; height: 15px; flex: none; }
.moon circle { fill: none; stroke: var(--mark); stroke-width: 1.1; }
.moon path { fill: var(--mark); }
.resonance .reading {
  font: 400 1rem/1.65 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  color: var(--fg);
  max-width: 32rem;
}
.resonance .reading p { margin: 0 0 .9em; }
.resonance .reading p:last-child { margin: 0; }
.resonance .title {
  margin: 0 0 .6rem;
  font: 400 1.5rem/1.1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -.01em;
}
.resonance .title:empty { display: none; }
.resonance .more { display: inline-block; margin-top: 1rem; color: var(--dim); }
.resonance .more:hover { color: var(--light); }

/* the full reading, on its own page */
.resonance.full { margin: 0; }
.resonance.full > p.mono { margin-bottom: 2rem; }
.resonance.full .title { font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 300; margin: 0 0 2.5rem; }
.resonance.full .reading { font-size: 1.0625rem; }
.resonance.full .reading p { margin: 0 0 1.25em; }

.channels { list-style: none; margin: 0; padding: 0; }
.channels li { border-top: 1px solid var(--rule); }
.channels li:last-child { border-bottom: 1px solid var(--rule); }
.ch { display: block; padding: 2rem 0 2.25rem; }
/* a channel's picture keeps its own shape: no forced crop */
.ch .pic { background: #000; margin-bottom: 1.25rem; }
.ch .pic img { width: 100%; height: auto; opacity: .82; transition: opacity var(--slow); }
.ch .pic.tall { max-width: 24rem; }
.ch:hover .pic img { opacity: 1; }
.ch .row { display: flex; align-items: baseline; gap: 1rem; }
.ch .num { color: var(--dim); min-width: 1.6rem; }
.ch .name {
  font: 400 1.5rem/1.1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0;
  letter-spacing: -.01em;
}
.ch .line { color: var(--dim); font-size: .9375rem; margin: .5rem 0 0 2.6rem; }
.ch .row .air { margin-left: auto; align-self: center; }
.ch.off { color: var(--faint); padding: 1.1rem 0; }
.ch.off .num, .ch.off .name { color: var(--faint); }
.ch.off .line { color: var(--faint); margin-top: .35rem; }
/* a channel whose name is not ours to say yet */
.withheld { display: inline-block; height: .8em; background: var(--rule); vertical-align: -.05em; }

/* the on-screen channel number, when someone tunes with the keyboard */
.osd {
  position: fixed;
  top: 72px;
  right: var(--gutter);
  z-index: 60;
  color: var(--signal);
  font: 400 2rem/1 var(--mono);
  letter-spacing: .06em;
  text-align: right;
  pointer-events: none;
}
.osd small { display: block; margin-top: .5rem; font-size: .6875rem; color: var(--dim); }

/* a black frame where a picture has not come in yet */
.nopic { display: grid; place-items: center; aspect-ratio: 16 / 9; color: var(--faint); background: #000; }

/* photographs: each keeps its own aspect ratio.
   .wide breaks out past the text column, .tall sits narrow, .bleed runs edge to edge */
.photo { margin: 4rem 0; }
.photo img { width: 100%; height: auto; }
.photo figcaption { margin-top: .75rem; color: var(--dim); }
.photo.wide { width: min(64rem, 100vw - 2 * var(--gutter)); margin-left: 50%; transform: translateX(-50%); }
.photo.tall { max-width: 22rem; }
.photo.bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* channels come in one at a time */
.reveal { opacity: 0; transition: opacity 1.6s ease; }
.reveal.in { opacity: 1; }

/* ---------- interior pages ---------- */
.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 14vh var(--gutter) 0;
}
.page h1 {
  margin: 0 0 2rem;
  font: 300 clamp(2.25rem, 7vw, 3.5rem)/1.05 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 0, "opsz" 144;
  letter-spacing: -.02em;
}
.page .label { color: var(--dim); margin: 0 0 1.25rem; }
.page a.u { color: var(--light); }
.page a.u:hover { text-decoration: underline; text-underline-offset: 3px; }

/* hyperworld: almost nothing, on purpose */
.still {
  min-height: calc(100svh - 76px);
  display: grid;
  place-items: center;
  padding: 0 var(--gutter) 12vh;
  text-align: center;
}
.still h1 {
  margin: 0 0 1rem;
  font: 300 clamp(3rem, 12vw, 7rem)/1 var(--serif);
  font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144;
  letter-spacing: -.03em;
}
.still .label { color: var(--dim); margin: 0; }

/* ---------- a breath of static between pages ---------- */
.static::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .94 0 0 0 0 .9 0 0 0 0 .85 0 0 0 1.4 -.3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: static .26s steps(3) both;
}
@keyframes static {
  0% { opacity: .16; background-position: 0 0; }
  50% { opacity: .1; background-position: 37px 61px; }
  100% { opacity: 0; background-position: 80px 20px; }
}

/* calm settings: everything appears still */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; }
}