@font-face {
  font-family: "IBM Plex Mono";
  src: url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root { color-scheme: dark; --paper: #000; --ink: #fff; --muted: #aaa; background: var(--paper); }
:root[data-theme="light"] { color-scheme: light; --paper: #fff; --ink: #000; --muted: #666; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Mono", monospace;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:hover, button:hover { text-decoration: underline; text-underline-offset: .3em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
button, input { font: inherit; color: inherit; }
button { border: 0; padding: 0; background: none; cursor: pointer; }
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.site-header { padding: clamp(1.25rem, 4vw, 3.5rem); font-size: 1rem; }
.identity { gap: clamp(.875rem, 1.5vw, 1.5rem); letter-spacing: .025em; white-space: nowrap; }
/* Keep the existing 44px header row so the observation stays in place. */
.identity-symbol { display: block; font-size: clamp(3rem, 4.4vw, 4rem); line-height: .68; letter-spacing: 0; }
.identity-copy { display: flex; flex-direction: column; gap: .25rem; }
.identity-name { line-height: 1.25; }
.identity-subtitle { color: var(--muted); font-size: .625rem; line-height: 1.25; letter-spacing: .08em; }
.identity:hover { text-decoration: none; }
.identity:hover .identity-name { text-decoration: underline; text-underline-offset: .3em; }
#theme-toggle, .site-footer { font-size: .8125rem; letter-spacing: .04em; }
.site-header a, .site-header button, .site-footer a, .site-footer button { display: inline-flex; align-items: center; min-height: 44px; }
.wall { width: min(100%, 56rem); margin: auto; padding: 4rem clamp(1.5rem, 5vw, 4rem) 5rem; }
#main { margin: 0 auto auto; padding-top: clamp(1rem, 2vh, 1.5rem); }
@media (min-width: 768px) {
  #main { width: min(90%, 56rem); margin-left: clamp(0rem, 10vw, 10rem); }
}
article { font-size: clamp(1.125rem, 2.2vw, 1.625rem); line-height: 1.65; overflow-wrap: anywhere; }
h1 { font: inherit; margin: 0 0 2rem; }
#salutation { margin-bottom: 1.5rem; }
article p { margin: 0 0 1.5em; white-space: pre-wrap; }
.signature { margin-top: 1.75rem; margin-bottom: 0; font-size: .875em; color: var(--muted); }
#observation-text p:last-child { margin-bottom: 0; }
.site-footer { padding: 1rem clamp(1.25rem, 4vw, 3.5rem) 1.75rem; color: var(--muted); flex-wrap: wrap; }
.observation-controls, .site-links, nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); flex-wrap: wrap; }
.observation-controls nav a, #copy-link { color: var(--ink); font-size: .9375rem; letter-spacing: .025em; min-width: 44px; padding-inline: .25rem; }
#observation-number { font-size: .875rem; white-space: nowrap; }
.about { max-width: 54rem; }
.about article { font-size: clamp(1rem, 1.8vw, 1.25rem); }
.aside { color: var(--muted); font-size: .8125rem; line-height: 1.8; margin-top: 3rem; }
.status { color: var(--muted); font-size: .75rem; margin: 0; padding: 0 1.5rem; text-align: center; }
.status:not(:empty) { padding-bottom: 1rem; }
.copy-fallback { padding: 1rem 1.5rem 2rem; font-size: .8125rem; }
.copy-fallback label { display: block; margin-bottom: .75rem; }
.copy-fallback input { background: var(--paper); border: 1px solid var(--muted); padding: .75rem; width: min(100%, 40rem); }
.copy-fallback button { min-height: 44px; margin: .5rem; }
@media (max-width: 480px) {
  .site-header { gap: .75rem; }
  .identity { gap: .75rem; }
  .identity-symbol { font-size: clamp(2rem, 9vw, 2.5rem); }
  .identity-name { font-size: .875rem; }
  .identity-subtitle { font-size: .5625rem; letter-spacing: .04em; }
  .wall { padding-top: 3rem; padding-bottom: 4rem; }
  .site-footer { align-items: flex-start; gap: .5rem; }
  .observation-controls { width: 100%; gap: .5rem 1.25rem; }
  #observation-number { flex-basis: 100%; }
  .site-links { width: 100%; justify-content: space-between; }
}