/* v1 - Signal. One peach accent on near-black. The type carries it. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #101010;
  --raised: #161616;
  --line: #232323;
  --text: #FFFFFF;
  --muted: #A0A0A0;
  --faint: #7E7E7E;
  --accent: #FFC799;
  --accent-hover: #FFCFA8;
  --underline: #232323;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FBF7F2;
  --raised: #F4EFE8;
  --line: #E9E2D8;
  --text: #1A1714;
  --muted: #6B6560;
  --faint: #9A938B;
  --accent: #B4661F;
  --accent-hover: #9A5518;
  --underline: #D9D0C3;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { height: 100%; }

body {
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "iA Writer Quattro", ui-monospace, monospace;
  font-size: 17px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 28px 56px;
  transition: background-color .2s ease, color .2s ease;
}

/* ---------- shell ---------- */

.top, main, footer {
  width: 100%;
  max-width: 34rem;
}

.top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

main {
  margin-top: clamp(72px, 16vh, 168px);
  flex: 1;
}

footer {
  margin-top: clamp(88px, 14vh, 152px);
}

/* ---------- mono voice ---------- */

.wordmark,
.theme-toggle,
.label,
.handle,
.bakeoff {
  font-family: "iA Writer Mono", monospace;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wordmark { color: var(--faint); }

.theme-toggle {
  background: none;
  border: 0;
  color: var(--faint);
  cursor: pointer;
  padding: 8px 0 8px 16px;
  margin: -8px 0;
  transition: color .15s ease;
}
.theme-toggle:hover { color: var(--accent); }

:root[data-theme="dark"] .theme-toggle [data-when="light"] { display: none; }
:root[data-theme="light"] .theme-toggle [data-when="dark"] { display: none; }

/* Light paper needs darker ink: faint mono text fails AA on #FBF7F2,
   so functional mono elements step up to muted there. The aside keeps
   its whisper. */
:root[data-theme="light"] .wordmark,
:root[data-theme="light"] .theme-toggle,
:root[data-theme="light"] .label,
:root[data-theme="light"] .handle,
:root[data-theme="light"] .bakeoff {
  color: var(--muted);
}
:root[data-theme="light"] .theme-toggle:hover { color: var(--accent); }
:root[data-theme="light"] .bakeoff:hover { color: var(--accent-hover); }
:root[data-theme="light"] .links a:hover .handle { color: var(--text); }

/* ---------- headings ---------- */

h1 {
  font-family: "iA Writer Quattro Var", "iA Writer Quattro", monospace;
  font-weight: 650;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

h1 .dot { color: var(--accent); }

.label {
  font-weight: 400;
  color: var(--faint);
  margin-bottom: 1.1rem;
}

/* ---------- prose ---------- */

.intro { margin-top: 2.2rem; }

p { max-width: 62ch; color: var(--text); }

p + p { margin-top: 1.05rem; }

.block p { color: var(--muted); }

.aside {
  color: var(--faint);
  font-size: 15px;
  margin-top: 1.5rem;
}

.block { margin-top: 4.25rem; }

/* ---------- links ---------- */

a {
  color: inherit;
  text-decoration: none;
}

.bakeoff {
  background:
    linear-gradient(var(--accent), var(--accent)) no-repeat left calc(100% - 1px) / 0% 1px,
    linear-gradient(var(--underline), var(--underline)) no-repeat left calc(100% - 1px) / 100% 1px;
  transition: color .15s ease, background-size .2s ease;
}
.bakeoff:hover {
  color: var(--accent-hover);
  background-size: 100% 1px, 100% 1px;
}

.links {
  list-style: none;
  max-width: 26rem;
}

.links a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: .45rem 0;
  border-bottom: 1px solid var(--line);
  transition: border-color .15s ease;
}

.links li:first-child a { border-top: 1px solid var(--line); }

.links .site { transition: color .15s ease; }

.links .handle {
  color: var(--faint);
  text-transform: none;
  letter-spacing: .02em;
  transition: color .15s ease;
}

.links a:hover { border-bottom-color: var(--accent); }
.links a:hover .site { color: var(--accent); }
.links a:hover .handle { color: var(--muted); }

/* ---------- footer ---------- */

.bakeoff { color: var(--faint); }

/* ---------- selection ---------- */

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

/* ---------- focus ---------- */

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}

/* ---------- reveal ---------- */

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    animation: rise .5s cubic-bezier(.2, .6, .2, 1) forwards;
    animation-delay: calc(var(--i) * 70ms);
  }
  @keyframes rise {
    to { opacity: 1; transform: none; }
  }
}

/* ---------- short viewports ---------- */
/* One composed screen: on laptop-height windows the rhythm tightens
   so the whole page, bakeoff included, fits without a scroll. */

@media (min-width: 481px) and (max-height: 960px) {
  body { padding: 32px 28px 40px; }
  main { margin-top: clamp(56px, 9vh, 112px); }
  footer { margin-top: clamp(48px, 7vh, 88px); }
  .intro { margin-top: 1.8rem; }
  .aside { margin-top: 1.2rem; }
  .block { margin-top: 3.25rem; }
  .label { margin-bottom: .9rem; }
  .links a { padding: .35rem 0; }
}

/* ---------- mobile ---------- */

@media (max-width: 480px) {
  body { padding: 28px 22px 44px; }
  main { margin-top: 64px; }
  footer { margin-top: 80px; }
  h1 { font-size: 1.55rem; }
  .block { margin-top: 3.4rem; }
}