:root { color-scheme: dark; --bg: #10171c; --ink: #ecebe5; --muted: #a5acae; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
.page { position: relative; z-index: 1; width: min(100%, 1600px); margin: auto; min-height: 100vh; min-height: 100svh; padding: 54px clamp(28px, 7.1vw, 114px) 32px; display: flex; flex-direction: column; }
.wordmark { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: .26em; }
main { flex: 1; display: flex; align-items: center; padding: 96px 0 100px; }
.intro { max-width: 760px; }
.eyebrow { margin: 0 0 30px; color: var(--muted); font-size: 11px; line-height: 1.6; letter-spacing: .19em; text-transform: uppercase; }
h1 { margin: 0; max-width: 740px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(32px, 3.45vw, 53px); font-weight: 400; line-height: 1.23; letter-spacing: -.025em; text-wrap: pretty; }
.principles { margin: 36px 0 0; color: var(--muted); font-size: 13px; line-height: 1.85; letter-spacing: .015em; }
footer { border-top: 1px solid #30383d; padding-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
footer a { color: var(--ink); font-size: 12px; letter-spacing: .04em; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; gap: 35px; }
footer a span { color: var(--muted); font-size: 17px; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 7px; }
.footer-mark { font-family: Georgia, serif; color: #a5acae; font-size: 20px; }
.geometry { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.geometry span { position: absolute; width: 620px; height: 620px; border: 1px solid #d0d9dc; opacity: .045; transform: rotate(34deg); top: 10%; left: 74%; }
.geometry span:nth-child(2) { margin: 45px 0 0 45px; }
.geometry span:nth-child(3) { margin: 90px 0 0 90px; }
::selection { color: var(--bg); background: var(--ink); }
@media (min-width: 1700px) { .page { padding-top: 70px; padding-bottom: 44px; } }
@media (max-width: 600px) {
  .page { padding-top: 32px; padding-bottom: 22px; }
  .wordmark { font-size: 19px; }
  main { padding: 76px 0 72px; }
  .eyebrow { font-size: 9px; letter-spacing: .13em; margin-bottom: 24px; }
  h1 { font-size: clamp(30px, 8.4vw, 44px); line-height: 1.25; }
  .principles { margin-top: 30px; font-size: 12px; }
  .geometry span { left: 85%; top: 18%; }
  footer { padding-top: 16px; }
}
@media (prefers-contrast: more) { :root { --muted: #d0d4d5; } }
@media print { :root { --bg: #fff; --ink: #111; --muted: #444; } .geometry { display: none; } .page { min-height: auto; } }