@charset "utf-8";
/* ==========================================================================
   Nolatis
   One stylesheet, two themes. Light is warm (amber on paper), dark is cool
   (amber on ink). Every colour is a token declared in the bare :root block
   first, so nothing depends on a media query having matched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typeface. Served from this machine, never from a font CDN, because a
      request to a third party would contradict what the site says about
      itself. One variable file covers weights 400 to 800.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --bg:            #FFFFFF;
  --bg-sunk:       #F8F5F0;
  --bg-raise:      #FFFFFF;
  --bg-inverse:    #211A12;

  --text:          #1A1613;
  --text-2:        #6E6458;
  --text-3:        #9A8F81;
  --text-inv:      #F6F1E9;
  --text-inv-2:    #B5A894;

  --accent:        #A2650A;
  --accent-bright: #DE9A2E;
  --accent-on:     #241C12;

  --line:          #E9E1D6;
  --line-soft:     #F1ECE4;
  --field:         #FFFFFF;
  --field-line:    #DED5C7;

  --positive:      #2F7147;
  --positive-dot:  #3E8E5A;

  /* Ambient hero glow, as raw channels so opacity can vary per stop. */
  --glow-1: 232, 163, 61;
  --glow-2: 214, 138, 40;
  --glow-3: 244, 206, 150;
  --glow-strength: 1;

  --shadow-card: 0 1px 3px rgba(26, 22, 19, .05), 0 10px 30px -18px rgba(26, 22, 19, .22);
  --shadow-panel: 0 2px 8px rgba(26, 22, 19, .06), 0 30px 60px -40px rgba(26, 22, 19, .40);

  --radius-card:  20px;
  --radius-panel: 26px;
  --radius-field: 13px;

  --measure: 62ch;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --font: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          Helvetica, Arial, "Helvetica Neue", sans-serif;
}

/* Dark by system preference, unless the visitor explicitly chose light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:            #08090B;
    --bg-sunk:       #101216;
    --bg-raise:      #14171C;
    --bg-inverse:    #F2F4F6;

    --text:          #F2F4F6;
    --text-2:        #9AA3AD;
    --text-3:        #69727C;
    --text-inv:      #14171C;
    --text-inv-2:    #525A65;

    --accent:        #E8A33D;
    --accent-bright: #F3C271;
    --accent-on:     #241C12;

    --line:          #1C2028;
    --line-soft:     #15181E;
    --field:         rgba(255, 255, 255, .05);
    --field-line:    #262C35;

    --positive:      #6FD3BE;
    --positive-dot:  #6FD3BE;

    --glow-1: 224, 154, 43;
    --glow-2: 111, 211, 190;
    --glow-3: 127, 168, 240;
    --glow-strength: .78;

    --shadow-card:  0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -22px rgba(0, 0, 0, .8);
    --shadow-panel: 0 2px 8px rgba(0, 0, 0, .5), 0 34px 70px -44px rgba(0, 0, 0, .9);
  }
}

/* And dark by explicit choice, whatever the system says. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:            #08090B;
  --bg-sunk:       #101216;
  --bg-raise:      #14171C;
  --bg-inverse:    #F2F4F6;

  --text:          #F2F4F6;
  --text-2:        #9AA3AD;
  --text-3:        #69727C;
  --text-inv:      #14171C;
  --text-inv-2:    #525A65;

  --accent:        #E8A33D;
  --accent-bright: #F3C271;
  --accent-on:     #241C12;

  --line:          #1C2028;
  --line-soft:     #15181E;
  --field:         rgba(255, 255, 255, .05);
  --field-line:    #262C35;

  --positive:      #6FD3BE;
  --positive-dot:  #6FD3BE;

  --glow-1: 224, 154, 43;
  --glow-2: 111, 211, 190;
  --glow-3: 127, 168, 240;
  --glow-strength: .78;

  --shadow-card:  0 1px 2px rgba(0, 0, 0, .5), 0 14px 34px -22px rgba(0, 0, 0, .8);
  --shadow-panel: 0 2px 8px rgba(0, 0, 0, .5), 0 34px 70px -44px rgba(0, 0, 0, .9);
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: -.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

a { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--accent-on);
  padding: 11px 18px;
  border-radius: 0 0 10px 0;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap {
  max-width: 1020px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.wrap--narrow { max-width: 740px; }

.section { padding-block: clamp(56px, 8.5vw, 100px); }
.section--sunk { background: var(--bg-sunk); }
.section--tight { padding-block: clamp(40px, 6vw, 68px); }

/* --------------------------------------------------------------------------
   5. Masthead
   -------------------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  /* Fallback first: color-mix needs Safari 16.2, and an unsupported value
     would leave the bar transparent with text scrolling under it. */
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line-soft);
}
.masthead__inner {
  display: flex;
  align-items: center;
  gap: 12px 26px;
  flex-wrap: wrap;
  padding-block: 12px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 800;
  font-size: 17.5px;
  letter-spacing: -.04em;
  margin-right: auto;
}
.brand__mark { width: 22px; height: 22px; flex: none; }

.nav {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.nav a {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  letter-spacing: -.005em;
  transition: color .15s var(--ease);
}
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--accent); font-weight: 600; }

.controls { display: flex; align-items: center; gap: 8px; }

.segmented {
  display: flex;
  gap: 1px;
  background: var(--bg-sunk);
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 2px;
}
.segmented a {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-3);
  text-decoration: none;
  padding: 4px 11px;
  border-radius: 999px;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.segmented a:hover { color: var(--text); }
.segmented a[aria-current="true"] {
  background: var(--bg-raise);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}

.themetoggle {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: var(--bg-sunk);
  color: var(--text-2);
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.themetoggle:hover { color: var(--accent); border-color: var(--line); }
.themetoggle svg { width: 16px; height: 16px; }
.themetoggle__moon { display: none; }
:root[data-theme="dark"] .themetoggle__sun { display: none; }
:root[data-theme="dark"] .themetoggle__moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .themetoggle__sun { display: none; }
  :root:not([data-theme="light"]) .themetoggle__moon { display: block; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(56px, 9vw, 116px) clamp(48px, 7vw, 88px);
  text-align: center;
}
.hero__glow {
  position: absolute;
  left: 50%;
  top: -4%;
  transform: translateX(-50%);
  width: 1400px;
  max-width: 200%;
  height: 112%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--glow-strength);
}
.hero__inner { position: relative; z-index: 1; }

.eyebrow {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}

h1 {
  margin: 0 0 22px;
  font-size: clamp(38px, 7.2vw, 74px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.hero .lead { margin-inline: auto; }

.lead {
  margin: 0 0 32px;
  max-width: 34ch;
  font-size: clamp(18px, 2.3vw, 21px);
  line-height: 1.45;
  letter-spacing: -.015em;
  color: var(--text-2);
  text-wrap: balance;
}

.actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 26px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s var(--ease), color .15s var(--ease), transform .15s var(--ease);
}
.btn--primary { background: var(--text); color: var(--bg); }
.btn--primary:hover { background: var(--accent); color: var(--accent-on); }
.btn--accent,
.panel .btn--accent { background: var(--accent-bright); color: var(--accent-on); font-weight: 700; }
.btn--accent:hover { filter: brightness(1.07); }
.btn--quiet {
  background: none;
  color: var(--accent);
  padding-inline: 10px;
}
.btn--quiet:hover { text-decoration: underline; text-underline-offset: 4px; }
.btn:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   7. Prose and section headings
   -------------------------------------------------------------------------- */
.kicker {
  margin: 0 0 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-3);
}

h2 {
  margin: 0 0 18px;
  font-size: clamp(27px, 4.2vw, 42px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
h3 {
  margin: 0 0 9px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.025em;
}

.prose p {
  margin: 0 0 16px;
  max-width: var(--measure);
  font-size: 17.5px;
  color: var(--text-2);
}
.prose p:last-child { margin-bottom: 0; }
.prose p.lead { color: var(--text); max-width: 44ch; }
.prose a { color: var(--accent); text-underline-offset: 3px; }

.prose h2 { margin-top: 0; }
.prose section + section { margin-top: clamp(32px, 4.5vw, 52px); }
.prose section h2 {
  font-size: clamp(21px, 2.6vw, 26px);
  letter-spacing: -.03em;
  margin-bottom: 12px;
}

.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  max-width: var(--measure);
}
.ticks li {
  position: relative;
  padding-left: 26px;
  color: var(--text-2);
  font-size: 17px;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 3px;
  background: var(--accent-bright);
}

.meta-note {
  margin: 0 0 26px;
  font-size: 14px;
  color: var(--text-3);
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 14px;
  margin-top: 38px;
}
@media (min-width: 820px) {
  .cards--three { grid-template-columns: repeat(3, 1fr); }
}
.card {
  background: var(--bg-raise);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-card);
  padding: 28px 26px 30px;
}
.section--sunk .card {
  border-color: transparent;
  box-shadow: var(--shadow-card);
}
.card p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.card__chip {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  margin-bottom: 16px;
  background: linear-gradient(145deg, var(--accent-bright), var(--accent));
}
/* One family, three depths, echoing the gradient in the mark. Previously
   these were a grey and a khaki, which read as three arbitrary squares
   rather than a set. */
.card:nth-child(2) .card__chip { background: linear-gradient(145deg, #F0C98A, #B5710A); }
.card:nth-child(3) .card__chip { background: linear-gradient(145deg, #F7E3C0, #C9903A); }
:root[data-theme="dark"] .card:nth-child(2) .card__chip { background: linear-gradient(145deg, #7FD8C6, #2C7C6D); }
:root[data-theme="dark"] .card:nth-child(3) .card__chip { background: linear-gradient(145deg, #9BB8ED, #3D5B8C); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card:nth-child(2) .card__chip { background: linear-gradient(145deg, #7FD8C6, #2C7C6D); }
  :root:not([data-theme="light"]) .card:nth-child(3) .card__chip { background: linear-gradient(145deg, #9BB8ED, #3D5B8C); }
}

/* --------------------------------------------------------------------------
   9. Status list
   -------------------------------------------------------------------------- */
.status {
  margin-top: 32px;
  border-top: 1px solid var(--line);
}
.status__row {
  display: flex;
  gap: 6px 18px;
  justify-content: space-between;
  align-items: baseline;
  /* No wrapping. A long label used to push the state onto its own line where
     it left-aligned under the note, so short rows and long rows disagreed
     about where the state lives. The label shrinks and wraps internally
     instead, which keeps every state in the same place. */
  flex-wrap: nowrap;
  padding-block: 19px;
  border-bottom: 1px solid var(--line);
}
.status__label { flex: 1 1 auto; min-width: 0; }
.status__state { flex: 0 0 auto; }
.status__label {
  font-size: 17.5px;
  font-weight: 600;
  letter-spacing: -.025em;
}
.status__note {
  display: block;
  margin-top: 3px;
  font-size: 14.5px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-3);
}
.status__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-3);
}
.status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.status__state--live { color: var(--positive); }
.status__state--live .status__dot {
  background: var(--positive-dot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--positive-dot) 18%, transparent);
}
.status__state--work { color: var(--accent); }
.status__state--work .status__dot { background: var(--accent-bright); }

/* --------------------------------------------------------------------------
   10. Inverse panel
   -------------------------------------------------------------------------- */
.panel {
  background: var(--bg-inverse);
  color: var(--text-inv);
  border-radius: var(--radius-panel);
  padding: clamp(28px, 5vw, 52px);
  box-shadow: var(--shadow-panel);
}
.panel h2 { color: var(--text-inv); }
.panel p { color: var(--text-inv-2); max-width: 46ch; }
.panel .kicker { color: var(--text-inv-2); }
.panel a:not(.btn) { color: var(--accent-bright); }
:root[data-theme="dark"] .panel a:not(.btn) { color: var(--accent); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .panel a:not(.btn) { color: var(--accent); }
}
.panel :focus-visible { outline-color: var(--accent-bright); }
.panel__cta { margin-top: 22px; }

/* --------------------------------------------------------------------------
   11. Forms
   -------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: 18px;
  max-width: 520px;
  margin-top: 8px;
}
.field { display: block; }
.field__label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}
.field__help {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
}
.field input,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  letter-spacing: -.01em;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--field-line);
  border-radius: var(--radius-field);
  padding: 12px 15px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.field input::placeholder,
.field textarea::placeholder { color: var(--text-3); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
.field--invalid input,
.field--invalid textarea { border-color: #C6402B; }
:root[data-theme="dark"] .field--invalid input,
:root[data-theme="dark"] .field--invalid textarea { border-color: #E8705C; }

.field__error {
  display: block;
  margin-top: 7px;
  font-size: 14px;
  color: #A8331F;
}
:root[data-theme="dark"] .field__error { color: #F0907E; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .field__error { color: #F0907E; }
  :root:not([data-theme="light"]) .field--invalid input,
  :root:not([data-theme="light"]) .field--invalid textarea { border-color: #E8705C; }
}

/* The honeypot. Hidden from people in three independent ways, so a bot that
   ignores any one of them still fills it in and gives itself away. */
.trap {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.notice {
  border-radius: var(--radius-field);
  padding: 15px 18px;
  font-size: 15.5px;
  margin: 0 0 24px;
  border: 1px solid;
}
.notice--error {
  background: color-mix(in srgb, #C6402B 8%, var(--bg));
  border-color: color-mix(in srgb, #C6402B 30%, var(--bg));
  color: var(--text);
}
.notice--good {
  background: color-mix(in srgb, var(--positive) 10%, var(--bg));
  border-color: color-mix(in srgb, var(--positive) 32%, var(--bg));
  color: var(--text);
}

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line-soft);
  margin-top: clamp(56px, 8.5vw, 100px);
  padding-block: 30px calc(30px + env(safe-area-inset-bottom, 0px));
}
.footer__inner {
  display: flex;
  gap: 10px 24px;
  flex-wrap: wrap;
  align-items: center;
  font-size: 13.5px;
  color: var(--text-3);
}
.footer a { color: var(--text-2); text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer__end { margin-left: auto; display: flex; gap: 16px; align-items: center; }
.footer__nocookies { color: var(--accent); font-weight: 600; }
.footer__reset {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.footer__reset:hover { color: var(--accent); }
@media (max-width: 720px) {
  .footer__end { margin-left: 0; width: 100%; }
}

/* --------------------------------------------------------------------------
   13. Error pages
   -------------------------------------------------------------------------- */
.errorpage {
  padding-block: clamp(64px, 12vw, 132px);
  text-align: center;
}
.errorpage__code {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.errorpage h1 { font-size: clamp(32px, 5.6vw, 52px); }
.errorpage .lead { margin-inline: auto; max-width: 40ch; }

/* --------------------------------------------------------------------------
   14. Motion and print
   -------------------------------------------------------------------------- */
/* text-wrap: balance equalises line lengths, which on a phone turns a long
   heading into four short ragged lines. pretty keeps the greedy wrap and
   only prevents a lone last word. */
@media (max-width: 620px) {
  h1, h2, .lead { text-wrap: pretty; }
}

/* Masthead on a phone: brand and controls share the top row, navigation gets
   its own row underneath. Previously the controls wrapped to the second row
   and sat orphaned under the logo. */
@media (max-width: 560px) {
  .masthead__inner { gap: 10px 16px; padding-block: 10px; }
  .controls { order: 2; }
  .nav { order: 3; flex-basis: 100%; gap: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .masthead, .hero__glow, .themetoggle, .segmented, .skip { display: none !important; }
  body { background: #fff; color: #000; }
  .panel { background: #fff; color: #000; box-shadow: none; border: 1px solid #ccc; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
}