:root {
  --paper: #f7f5f0;
  --ink: #181816;
  --ink-dim: #6b6d70;
  --line: #dedad2;
  --accent: #8a3b2f;
  --m0: #8a6512;
  --m1: #c9992a;
  --m2: #6b4a0d;
  --m3: #b8912f;
  --sig-glow: rgba(184, 145, 47, 0.3);
  --serif: Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", "Menlo", "Cascadia Mono", monospace;
  --measure: 640px;
  /* spacing scale — every gap on the page is one of these */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 48px;
  --s6: 72px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #131311;
    --ink: #e9e6de;
    --ink-dim: #8a8b85;
    --line: #2c2c28;
    --accent: #c9806c;
    --m0: #a8801f;
    --m1: #ffd977;
    --m2: #d9a52e;
    --m3: #fff3c4;
    --sig-glow: rgba(255, 217, 119, 0.4);
  }
}

:root[data-theme="dark"] {
  --paper: #131311;
  --ink: #e9e6de;
  --ink-dim: #8a8b85;
  --line: #2c2c28;
  --accent: #c9806c;
  --m0: #a8801f;
  --m1: #ffd977;
  --m2: #d9a52e;
  --m3: #fff3c4;
  --sig-glow: rgba(255, 217, 119, 0.4);
}

:root[data-theme="light"] {
  --paper: #f7f5f0;
  --ink: #181816;
  --ink-dim: #6b6d70;
  --line: #dedad2;
  --accent: #8a3b2f;
  --m0: #8a6512;
  --m1: #c9992a;
  --m2: #6b4a0d;
  --m3: #b8912f;
  --sig-glow: rgba(184, 145, 47, 0.3);
}

* { box-sizing: border-box; }

::selection {
  background: var(--accent);
  color: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.08rem;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

/* Links — underline wipes in from the left */
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-dim);
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
              color 0.25s ease;
}

a:hover,
a:focus-visible {
  color: var(--accent);
  background-size: 100% 1px;
}

@media (prefers-reduced-motion: reduce) {
  a { transition: none; }
}

.name { color: var(--ink); }

.accent { color: var(--accent); position: relative; }

.accent-bleed {
  transition: text-shadow 0.5s ease;
}

.accent-bleed:hover {
  text-shadow: 0 0 18px var(--accent), 0 0 36px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .accent-bleed { transition: none; }
  .accent-bleed:hover { text-shadow: none; }
}

/* Ambient ink-bleed cursor */
.ink-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(calc(var(--x, 50vw) - 50%), calc(var(--y, 50vh) - 50%));
  background: radial-gradient(circle closest-side, var(--accent), transparent 70%);
  opacity: 0;
  filter: blur(10px);
  mix-blend-mode: var(--ink-blend, multiply);
  z-index: 1;
  transition: opacity 0.4s ease;
}

.ink-cursor.visible { opacity: 0.16; }

:root[data-theme="dark"] { --ink-blend: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink-blend: screen; }
}

@media (hover: none), (pointer: coarse) {
  .ink-cursor { display: none; }
}

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

/* Mark / header */
.mark {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s3) var(--s4);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  z-index: 10;
  opacity: 0;
  animation: fadeIn 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  /* solid bar so text never scrolls through it */
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

#theme-toggle {
  pointer-events: auto;
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#theme-toggle .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
}

#theme-toggle:hover { border-color: var(--accent); }

#theme-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Layout — flowing paragraphs, no section dividers */
main {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin: 0 auto;
  padding: calc(var(--s6) + var(--s5)) var(--s4) var(--s6);
}

/* Time-aware greeting */
.greeting {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
  margin: 0 0 var(--s4) !important;
  text-align: left !important;
  hyphens: none !important;
  min-height: 1.2em;
}

.greeting .hour { color: var(--accent); }

/* Signature — copperplate: hairline upstrokes, shaded downstrokes */
.signature {
  margin: 0;
  line-height: 0;
}

.signature svg {
  width: min(186px, 52vw);
  height: auto;
  overflow: visible;
  transform: rotate(-1.5deg);
  transform-origin: left center;
  filter: drop-shadow(0 0 5px var(--sig-glow));
}

/* struck metal: light catches the stroke unevenly across its length */
.signature .m0 { stop-color: var(--m0); }
.signature .m1 { stop-color: var(--m1); }
.signature .m2 { stop-color: var(--m2); }
.signature .m3 { stop-color: var(--m3); }

.signature path {
  stroke: url(#sig-metal);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 400);
  stroke-dashoffset: var(--len, 400);
}

/* one flowing weight for the hand, lighter for ornament */
.signature .flow  { stroke-width: 2.6; }
.signature .cross { stroke-width: 2.0; }
.signature .flour { stroke-width: 1.5; opacity: 0.85; }

.signature.signed path {
  animation: sign var(--dur, 900ms) cubic-bezier(0.4, 0.05, 0.25, 1) var(--delay, 0ms) forwards;
}

@keyframes sign {
  to { stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .signature path { stroke-dashoffset: 0; animation: none !important; }
  .adaptive { transition: none; }
}

/* Inline institution marks, sitting on the text baseline */
.ico {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 3px;
  vertical-align: -0.13em;
  margin-right: 0.34em;
  object-fit: contain;
}

/* brylo's own mark, drawn in the site palette */
.ico-brylo {
  border-radius: 3.5px;
}

/* Intro — the helix assembles, then hands off to the page */
.intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: var(--paper);
  transition: opacity 0.7s ease, visibility 0.7s;
}

.intro.done {
  opacity: 0;
  visibility: hidden;
}

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

/* Bullets */
.points {
  list-style: none;
  margin: var(--s4) 0 0;
  padding: 0;
}

.points li {
  position: relative;
  padding-left: var(--s3);
  margin-bottom: var(--s2);
  font-size: 1.2rem;
  text-wrap: pretty;
}

.points li:last-child { margin-bottom: 0; }

.points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

/* Fun-fact ticker — rotating, dynamic */
.fact-line {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--ink-dim);
  margin: var(--s5) 0 0;
  min-height: 2.8em;
  text-align: left !important;
  hyphens: none !important;
}

.fact-label {
  flex-shrink: 0;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.fact-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 9px;
  vertical-align: middle;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.fact-text {
  position: relative;
}

.fact-text .caret {
  display: inline-block;
  width: 0.5em;
  margin-left: 1px;
  background: var(--accent);
  color: transparent;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .fact-label::before { animation: none; }
  .fact-text .caret { animation: none; opacity: 0; }
}

main p {
  font-size: 1.2rem;
  margin: 0;
  text-wrap: pretty;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* short lines with inline marks shouldn't break mid-word */
main p:has(.ico) {
  hyphens: none;
  -webkit-hyphens: none;
}

main p + p,
main .points + p {
  margin-top: var(--s4);
}


.lede .name {
  font-size: 1.3em;
}

/* Collapsible notes section at the bottom */
@keyframes drawRule {
  to { transform: scaleX(1); }
}

/* Fade-in on load — ink resolving */
.fade-line {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(7px);
  animation: fadeIn 1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes fadeIn {
  60% { filter: blur(0); }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .fade-line {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
  .mark { animation: none; opacity: 1; }
  .notes::before { animation: none; transform: scaleX(1); }
}

/* Helix — quiet double strand along the right margin */
#helix {
  position: fixed;
  top: 0;
  right: 36px;
  height: 100vh;
  width: 90px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

@media (max-width: 860px) {
  #helix { display: none; }
}

/* Terminal */
.term-open {
  background: none;
  border: none;
  padding: 0;
  margin-left: 14px;
  font: inherit;
  color: var(--ink-dim);
  cursor: pointer;
  transition: color 0.2s ease;
}

.term-open:hover { color: var(--accent); }

.term-open:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 3px;
}

.term-caret { color: var(--accent); }

.term {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(6px);
  animation: termIn 0.22s ease;
}

.term[hidden] { display: none; }

@keyframes termIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.term-panel {
  width: min(760px, 100%);
  max-height: min(560px, 86vh);
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 22%, transparent);
  overflow: hidden;
}

.term-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}

.term-close {
  background: none;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 7px;
  font: inherit;
  color: var(--ink-dim);
  cursor: pointer;
}

.term-close:hover { border-color: var(--accent); color: var(--accent); }

.term-out {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 4px;
  font-family: var(--mono);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
}

.term-out .echo { color: var(--ink-dim); }
.term-out .echo b { color: var(--accent); font-weight: normal; }
.term-out .err { color: var(--accent); }
.term-out .key { color: var(--accent); }
.term-out .row { margin: 0; }
.term-out .blk { margin: 0 0 14px; }
.term-out a { border-bottom-color: var(--accent); }

.term-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 16px;
  font-family: var(--mono);
  font-size: 0.8rem;
}

.term-prompt { color: var(--accent); }

.term-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font: inherit;
  color: var(--ink);
  caret-color: var(--accent);
}

@media (max-width: 640px) {
  .term { padding: 12px; align-items: flex-start; padding-top: 60px; }
  .term-panel { max-height: 78vh; }
  .term-out { font-size: 0.74rem; }
}

@media (prefers-reduced-motion: reduce) {
  .term { animation: none; }
}

footer {
  position: relative;
  z-index: 2;
  max-width: var(--measure);
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s6);
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-dim);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

footer .term-open { margin-left: 0; }

@media (max-width: 640px) {
  main { padding: calc(var(--s6) + var(--s3)) var(--s3) var(--s5); }
  .mark { padding: var(--s3); }
  .lede { font-size: 1.12rem; }
  main p { text-align: left; hyphens: none; -webkit-hyphens: none; }

  /* Stack the ticker and reserve height so typing doesn't shift the page */
  .fact-line {
    flex-direction: column;
    gap: 6px;
    min-height: 5.2em;
    align-items: flex-start;
  }
}