:root {
  --text: #000;
  --bg: #fff;
  --muted: #666;
  --rule: #e6e6e6;
  --max: 720px;
  --lh: 1.5;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  color: var(--text);
  /* whiter backdrop so the paper pops */
  background: #ffffff;
  font: 18.4px/1.25 "Courier Prime", Courier, "Courier New", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image:
    radial-gradient(100% 50% at 0% 0%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(100% 50% at 100% 0%, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 70%),
    radial-gradient(100% 50% at 0% 100%, rgba(0,0,0,0.03) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(100% 50% at 100% 100%, rgba(0,0,0,0.025) 0%, rgba(0,0,0,0) 70%);
}

.container {
  max-width: var(--max);
  margin: 96px auto;
  padding: 24px 24px 33px 24px;
  position: relative;
  /* warm, yellowish archival paper tone */
  background: #fff3cf;
  /* layered tone, warm tint, light direction, and stronger diagonal fibers */
  background-image:
    linear-gradient(0deg, rgba(255,222,130,0.18), rgba(255,230,160,0.12)), /* warm tint */
    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.10) 100%), /* upper-left light, lower-right shade */
    radial-gradient(120% 100% at 40% 10%, rgba(255,255,255,0.70) 0%, rgba(255,255,255,0) 60%), /* uneven highlight */
    radial-gradient(140% 120% at 70% 100%, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0) 70%), /* soft falloff */
    repeating-linear-gradient(135deg, rgba(0,0,0,0.055) 0 1px, transparent 1px 6px), /* fiber ripples */
    repeating-linear-gradient(135deg, rgba(0,0,0,0.035) 0 1px, transparent 1px 10px);
  background-blend-mode: soft-light, soft-light, normal, normal, multiply, multiply;
  border-radius: 6px;
  /* subtle edge and lift from background */
  box-shadow:
    0 28px 64px rgba(0,0,0,0.18),
    0 12px 28px rgba(0,0,0,0.14),
    0 0 0 1px rgba(0,0,0,0.06) inset,
    0 1px 0 rgba(255,255,255,0.85) inset;
}

.container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* multi-scale grain + speckles (SVG noise + threshold) */
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='520' height='520' viewBox='0 0 520 520'><filter id='g1'><feTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g1)' opacity='0.65'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><filter id='g2'><feTurbulence type='fractalNoise' baseFrequency='1.25' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='discrete' tableValues='0 0 0 0 .12 0 0 .28 0 0 .46 0 0 .64 0 0 .82 1'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23g2)' opacity='0.58'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'><filter id='g3'><feTurbulence type='fractalNoise' baseFrequency='1.75' numOctaves='5' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g3)' opacity='0.40'/></svg>");
  background-size: 520px 520px, 300px 300px, 160px 160px;
  background-blend-mode: soft-light, multiply, multiply;
  mix-blend-mode: multiply;
  opacity: .65;
  border-radius: 6px;
}

/* soft deckled-edge shadow around the paper */
.container::before {
  content: "";
  position: absolute;
  inset: -10px;
  pointer-events: none;
  background:
    radial-gradient(90% 80% at 50% 50%, transparent 55%, rgba(0,0,0,0.08) 100%), /* overall vignette */
    radial-gradient(120% 100% at 0% 50%, rgba(0,0,0,0.10) 0 50%, transparent 70%),
    radial-gradient(120% 100% at 100% 50%, rgba(0,0,0,0.10) 0 50%, transparent 70%),
    radial-gradient(100% 120% at 50% 0%, rgba(0,0,0,0.09) 0 50%, transparent 70%),
    radial-gradient(100% 120% at 50% 100%, rgba(0,0,0,0.09) 0 50%, transparent 70%);
  filter: blur(4px);
  z-index: -1;
}

.site-title {
  font-size: 23px;
  font-weight: 600;
  margin: 0 0 4px 0;
  color: #555;
}

.tagline {
  color: var(--muted);
  margin: .3rem 0 0 0;
}

section { margin-top: 21px; }
section:first-of-type { margin-top: 45px; }

/* faint dividers between sections */
.container section + section {
  border-top: 1px solid var(--rule);
  padding-top: 10.5px;
}

.slug {
  font-size: 25.3px;
  font-weight: 700;
  margin: 0 0 16px 0;
  font-family: "Caveat", "Segoe Script", cursive;
  color: #0D2B73;
}

ul { margin: 0; padding-left: 1.2em; }
.beliefs { display: none; }
ul.sub { margin-top: 10px; }
li { margin-bottom: 14px; }
ul.beliefs li { margin-bottom: 30px; }
/* match general list/paragraph rhythm for beliefs section */
#what-i-believe { line-height: 1.25; }
ul.beliefs-new li { margin-bottom: 0.825em; }

p { margin: 0 0 0.825em; }

strong { font-weight: 600; }

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-decoration-thickness: 0.06em;
}

a:hover { text-decoration-style: dotted; }

:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

img { max-width: 100%; height: auto; display: block; }

/* limit line length for comfortable reading */
.container :where(p, ul, ol) { max-width: 68ch; }

/* layout for header & headshot */
.site-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.headshot { margin: 0; position: relative; }

.headshot img {
  width: 228px;
  height: 228px;
  object-fit: contain;
  object-position: center;
  background: transparent; /* no background fill */
  border: none;
  border-radius: 10px;
  box-shadow: none; /* avoid lifting off the paper */
  mix-blend-mode: multiply; /* print-like blending with paper */
  opacity: .96;
  /* reduce contrast for a softer, printed look */
  filter: saturate(.92) contrast(.90) brightness(.98);
  /* feather edges slightly so it melts into paper */
  -webkit-mask-image: radial-gradient(closest-side, #000 98%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 98%, transparent 100%);
}

/* apply a subtle paper grain over just the visible pixels of the headshot */
.headshot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.45'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
  opacity: .18;
  -webkit-mask-image: url("assets/headshot.png");
  mask-image: url("assets/headshot.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* signature block */
.signature-block {
  margin-top: 8px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
}

.signature-text { min-width: 0; }

.signature-handwritten { max-width: 100%; }
.signature-handwritten .sig-write { line-height: 1; display:block; width:min(700px, 100%); }
.signature-handwritten .write {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-size: clamp(43.7px, 8.625vw, 98.9px);
  letter-spacing: 0.5px;
  white-space: nowrap; /* keep each line on one line */
  display: block;
  max-width: 100%;
}

/* small spacing between stacked signature lines */
.signature-handwritten .write + .write { margin-top: .1em; }

/* Make 'Theodore' fit on one line on typical widths */
.signature-handwritten .write:nth-of-type(2) {
  font-size: clamp(50.6px, 7.13vw, 89.7px);
  letter-spacing: 0; /* tighter for script */
}

@property --progress {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

/* safety bleed so right edge of each glyph never clips */
:root { --sig-bleed: 0.24em; }

.signature-handwritten .char {
  --progress: 0%;
  color: #111;
  display: inline-block; /* ensure left-to-right layout */
  vertical-align: bottom;
  /* expand element box slightly so mask can extend past glyph */
  padding-right: var(--sig-bleed);
  margin-right: calc(-1 * var(--sig-bleed));
  /* precise left-to-right wipe with zero initial visibility */
  -webkit-mask-image: linear-gradient(#000 0 0);
  mask-image: linear-gradient(#000 0 0);
  -webkit-mask-size: var(--progress) 100%;
  mask-size: var(--progress) 100%;
  -webkit-mask-position: left top;
  mask-position: left top;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  animation: reveal var(--dur, .45s) ease-in forwards;
  animation-delay: calc(var(--offset, 0s) + var(--i) * var(--gap, .12s));
}

@keyframes reveal { to { --progress: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .signature-handwritten .char {
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}

.typed-name {
  font-family: "Courier Prime", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13.8px;
  letter-spacing: 0.18em;
  color: #333;
  margin-top: 2px;
}

.pronunciation {
  font-family: "Caveat", "Segoe Script", cursive;
  color: #0D2B73;
  font-size: 23px;
  margin-top: 2px;
}

/* paperclip in outer top-right corner */
.paperclip {
  position: absolute;
  right: -22px;
  top: -38px;
  filter: drop-shadow(0 6px 6px rgba(0,0,0,0.25));
}

@media (max-width: 480px) {
  .container { margin: 72px auto; padding: 18px 14px 22px; }
  .site-title { font-size: 20.7px; }
  .slug { font-size: 23px; }
  .paperclip { right: -16px; top: -32px; }
  .signature-block { grid-template-columns: 1fr; }
  .headshot img { width: 162px; height: 162px; }
}

.headshot a{ text-decoration:none; display:inline-block; }


/* Handwritten signature font */
.signature-handwritten {
  font-family: 'Mr Dafoe', cursive;
}