:root {
  --ink: #1a1a1a;
  --paper: #faf8f3;
  --muted: #6b6b6b;
  --rule: #1a1a1a;
  --accent: #1a1a1a;
  --sun-1: #f0d6a8;
  --sun-2: #e9a472;
  --sun-3: #c25a3a;
  --content: 680px;
  --sky-h: 3.5rem;
  --pad: 2rem;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover, a:focus-visible { text-decoration: underline; }
a:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }

.sun {
  margin: 0;
  position: absolute;
  left: 50%;
  bottom: -2px;
  transform: translateX(-50%);
  white-space: pre;
  font-family: inherit;
  font-size: 0.85rem;
  line-height: 1;
  text-align: left;
  background: linear-gradient(180deg, #f0d6a8 0%, #e9a472 55%, #b9532f 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  z-index: 3;
  pointer-events: none;
}
@media (max-width: 540px) { .sun { font-size: 0.7rem; } }

.sky-art {
  background: linear-gradient(
    180deg,
    #4b2a8a 0%,
    #8e2aa8 12%,
    #d62f8a 24%,
    #ee3d6a 36%,
    #f55a3f 48%,
    #ff8a2a 60%,
    #ffc234 72%,
    #ff6a1a 86%,
    #b81810 100%
  );
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent !important;
  opacity: 1 !important;
}

header.top {
  width: 100%;
  padding-top: 0.5rem;
}

nav.top-nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 1.25rem;
  font-size: 0.85rem;
  padding: 1.5rem var(--pad) 0;
}
nav.top-nav a { color: var(--muted); font-weight: 600; }
nav.top-nav a:hover, nav.top-nav a:focus-visible { color: var(--accent); }

.sky {
  position: relative;
  width: 100%;
  height: var(--sky-h);
  overflow: hidden;
  margin-top: 0;
}
.sky span {
  position: absolute;
  white-space: pre;
  will-change: transform;
  font-size: 0.95rem;
  color: var(--ink);
}
.sky span.cloud { color: var(--muted); }

@keyframes undulate {
  0%   { -webkit-mask-position: 0 0;     mask-position: 0 0; }
  100% { -webkit-mask-position: -20px 0; mask-position: -20px 0; }
}

.horizon {
  width: 100%;
  height: 4px;
  background: linear-gradient(
    90deg,
    #1a1a1a 0%, #1a1a1a 28%,
    #6a2418 38%, #b9532f 45%,
    #e8762e 48%, #f1b66b 50%,
    #e8762e 52%, #b9532f 55%,
    #6a2418 62%, #1a1a1a 72%, #1a1a1a 100%
  );
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='4' viewBox='0 0 20 4'%3E%3Cpath d='M0 2 Q 5 4 10 2 T 20 2' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='4' viewBox='0 0 20 4'%3E%3Cpath d='M0 2 Q 5 4 10 2 T 20 2' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
  animation: undulate 2s linear infinite;
}

.ocean {
  position: relative;
  flex: 1 0 auto;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---- the world below the horizon: a character grid (field.js) ---- */
.field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.field pre {
  position: absolute;
  inset: 0;
  margin: 0;
  font-family: inherit;
  font-size: 0.8rem;
  line-height: 1;
  white-space: pre;
  overflow: hidden;
}
.field-faint { color: #7a7a7a; opacity: 0.55; }
.field-ink { color: #5a5a5a; opacity: 0.9; }
/* each glyph gets the sun's own top-to-bottom sunset, one gradient per line */
.field-glow {
  background: repeating-linear-gradient(180deg, #f1b66b 0, #e8762e 0.5em, #b9532f 1em);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

main.center {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex: 1 0 auto;
  padding: 6rem var(--pad);
}

.center-inner {
  width: auto;
  max-width: var(--content);
  position: relative;
}

.wordmark {
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  margin: 0 0 0.75rem;
}

/* ---- what I do ---- */
.what {
  margin: 2.5rem auto 3rem;
  font-size: 0.9rem;
}
.what h2 {
  font-size: 0.9rem;
  font-weight: 500;
  margin: 0 0 0.75rem;
}
.what ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.what li { margin: 0.25rem 0; }
.what strong { font-weight: 600; }
.what a { text-decoration: underline; text-underline-offset: 2px; }

/* ---- contact ---- */
.cta-lead {
  color: var(--muted);
  margin: 0 0 1rem;
  font-size: 0.9rem;
}
.contact {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 auto;
}
.contact a {
  font: inherit;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--ink);
  padding: 0.3rem 1.1rem;
  border-radius: 0;
  text-decoration: none;
}
.contact a:hover, .contact a:focus-visible {
  background: var(--ink);
  color: var(--paper);
  text-decoration: none;
  outline: none;
}

footer.bottom {
  position: relative;
  z-index: 1;
  color: var(--muted);
  font-size: 0.8rem;
  padding: 1.25rem var(--pad) 1.5rem;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.footer-left { text-align: left; }
.footer-center { text-align: center; }
.footer-right { text-align: right; }
footer.bottom a { color: var(--muted); }
footer.bottom a:hover, footer.bottom a:focus-visible { color: var(--accent); }
footer.bottom .sep { padding: 0 0.5em; }

@media (max-width: 768px) {
  footer.bottom {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  .footer-left, .footer-right { text-align: center; }
}

@media (max-width: 540px) {
  :root { --pad: 1.25rem; --sky-h: 3rem; }
  html, body { font-size: 14px; }
  main.center { padding: 4rem var(--pad); }
  .what { margin: 2rem auto 2.25rem; }
}

/* ---- privacy / terms ---- */
.policy-content {
  text-align: left;
  max-width: 600px;
  margin: 2.5rem auto 3rem;
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  color: var(--ink);
}
.policy-content a { text-decoration: underline; text-underline-offset: 2px; }