@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens: dark ground (design default) ---------- */

:root {
  --paper: #0B0A09;
  --ink: #F4F1EA;
  --mute: #8D8779;
  --edge: rgba(244, 241, 234, .16);
  --edge-strong: #74726E;
  --ghost: #26231F;
  --accent: #E03A3E;
  --btn-bg: #D9383C;
  --btn-fg: #FFFFFF;
  --btn-dot: #F2B9BB;
  --sun: 0;               /* drives the theme icon: 0 = moon, 1 = sun */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  color-scheme: dark;
}

/* ---------- Tokens: cream ground. Follows the system unless the visitor picked a theme. ---------- */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --paper: #F4F1EA;
    --ink: #16130F;
    --mute: #6E6960;
    --edge: rgba(22, 19, 15, .16);
    --edge-strong: #908D87;
    --ghost: #DED7C6;
    --btn-bg: #BC3336;
    --btn-dot: #E8B8B9;
    --sun: 1;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --paper: #F4F1EA;
  --ink: #16130F;
  --mute: #6E6960;
  --edge: rgba(22, 19, 15, .16);
  --edge-strong: #908D87;
  --ghost: #DED7C6;
  --btn-bg: #BC3336;
  --btn-dot: #E8B8B9;
  --sun: 1;
  color-scheme: light;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 600 15px/1.5 "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

html:not(.js) .js-only { display: none; }

/* ---------- Layout (compact first) ---------- */

.page {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

.ghost {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ghost svg {
  position: absolute;
  right: calc(-41.5px - 12.96vw);
  top: calc(193.2px - 24.93vw);
  width: clamp(620px, 462.1px + 40.49vw, 907.5px);
  height: auto;
  overflow: visible;
  transform: translate3d(var(--gx, 0px), var(--gy, 0px), 0);
}

.ghost path { stroke: var(--ghost); }

.pg {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  max-width: 1600px;
  margin: 0 auto;
  padding:
    clamp(32px, 28.4px + .915vw, 38.5px)
    max(clamp(26px, 13.1px + 3.31vw, 49.5px), env(safe-area-inset-right))
    clamp(30px, 25.3px + 1.197vw, 38.5px)
    max(clamp(26px, 7.05px + 4.859vw, 60.5px), env(safe-area-inset-left));
}

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.lk {
  flex: 0 0 auto;
  margin: 0;
  font-size: clamp(21px, 14.4px + 1.69vw, 33px);
  line-height: 0;
}

.lk svg {
  display: block;
  width: 6.835em;
  height: 1.022em;
  overflow: visible;
}

.lk .wm { fill: var(--ink); }

.btn {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 14px clamp(20px, 18.35px + .42vw, 23px);
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: clamp(13px, 10.8px + .563vw, 17px);
  line-height: 1.5;
  letter-spacing: -.005em;
  white-space: nowrap;
  transition: filter .2s ease, transform .2s ease;
}

.btn:hover { filter: brightness(1.12); }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline-offset: 4px; }

.btn i {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--btn-dot);
}

.mid {
  position: relative;
  display: flex;
  align-items: center;
  padding: 28px 0;   /* breathing room on short screens (landscape phones); symmetric, so the centring is unchanged */
}

h1 {
  position: relative;
  margin: 0;
  max-width: 13ch;
  font-size: clamp(44px, 28.9px + 3.873vw, 71.5px);
  font-weight: inherit;
  line-height: .98;
  letter-spacing: -.042em;
  text-wrap: balance;
}

h1 em { font-style: normal; color: var(--accent); }

/* Word wrappers added by main.js for the intro; the padding keeps descenders and the
   negative tracking inside the clip. */
h1 .w {
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  padding: 0 .06em .14em;
  margin: 0 -.06em -.14em;
}

h1 .w > span { display: inline-block; }

.foot {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.act {
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: clamp(12px, 9.25px + .704vw, 17px);
  font-style: normal;
  line-height: 1.5;
}

.bl { display: block; min-width: 0; margin: 0; }
.bl b { display: block; font-weight: inherit; }
.bl span { display: block; color: var(--mute); }

/* ---------- Theme toggle ---------- */

.theme {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: transparent;
  color: var(--mute);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}

.theme:hover { color: var(--ink); border-color: var(--edge-strong); }

.theme svg {
  display: block;
  width: 20px;
  height: 20px;
  overflow: visible;
}

.theme .core {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(1 - .45 * var(--sun)));
  transition: transform .5s var(--ease-io);
}

.theme .cut {
  transform: translate(calc(var(--sun) * 9px), calc(var(--sun) * -9px));
  transition: transform .5s var(--ease-io);
}

.theme .rays {
  transform-origin: 12px 12px;
  transform: rotate(calc((1 - var(--sun)) * -60deg)) scale(calc(.6 + .4 * var(--sun)));
  opacity: var(--sun);
  transition: opacity .35s ease, transform .5s var(--ease-io);
}

/* ---------- Narrow phones ---------- */

/* The header (mark and button) needs ~336 px at the 390 px artboard sizes, so on narrower phones
   (320 px) it scales down as one piece (the 340 px values in vw) instead of the wordmark running
   under the button. */
@media (max-width: 339.98px) {
  .pg {
    padding-right: max(7.647vw, env(safe-area-inset-right));
    padding-left: max(7.647vw, env(safe-area-inset-left));
  }

  .top { gap: 3.529vw; }
  .lk { font-size: 6.176vw; }

  .btn {
    gap: 2.353vw;
    padding: 4.118vw 5.882vw;
    font-size: 3.824vw;
  }

  .btn i { width: 2.059vw; height: 2.059vw; }
}

/* ---------- Desktop and wider ---------- */

@media (min-width: 1100px) {
  .pg {
    padding: min(3.5vw, 56px) min(4.5vw, 72px) min(3.5vw, 56px) min(5.5vw, 88px);
  }

  .top { gap: min(1.875vw, 30px); }

  .btn {
    gap: 11px;
    padding: 13px 23px;
    font-size: 17px;
  }

  .btn i { width: 8px; height: 8px; }

  h1 {
    max-width: 15ch;
    font-size: min(6.5vw, 104px);
  }

  .ghost svg {
    right: calc(-1 * max(min(16.75vw, 268px), 24.815vh));
    top: calc(-1 * max(min(7.375vw, 118px), 10.926vh));
    width: max(min(82.5vw, 1320px), 122.222vh);
  }

  .act {
    max-width: min(62.5vw, 1000px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 min(5vw, 80px);
    font-size: 20px;
  }
}

/* ---------- Motion: one intro sequence, plus the theme switch ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Held back until fonts are in (main.js adds .is-ready, at most ~1 s after load). */
  .js:not(.is-ready) .seq { opacity: 0; }

  /* The ghost outline traces itself once. */
  .ghost path { stroke-dasharray: 1; }

  .is-ready .ghost path {
    animation: draw 2.6s var(--ease-io) .15s backwards;
  }

  /* The five colour fields fill the mark from the bottom up. */
  .is-ready .lk .band { animation: band-rise 1s var(--ease-out) backwards; }
  .is-ready .lk .band:nth-child(5) { animation-delay: 0ms; }
  .is-ready .lk .band:nth-child(4) { animation-delay: 70ms; }
  .is-ready .lk .band:nth-child(3) { animation-delay: 140ms; }
  .is-ready .lk .band:nth-child(2) { animation-delay: 210ms; }
  .is-ready .lk .band:nth-child(1) { animation-delay: 280ms; }

  .is-ready .lk .wm { animation: wm-in .8s var(--ease-out) .18s backwards; }

  .is-ready .top .btn { animation: pop-in .8s var(--ease-out) .3s backwards; }

  /* Headline words rise out of their line; the accent words take their colour last. */
  .is-ready h1 .w > span {
    animation: word-up 1.1s var(--ease-out) calc(.34s + var(--i, 0) * 60ms) backwards;
  }

  .is-ready h1 em .w > span {
    animation:
      word-up 1.1s var(--ease-out) calc(.34s + var(--i, 0) * 60ms) backwards,
      accent-in .8s ease calc(.95s + var(--i, 0) * 60ms) backwards;
  }

  .is-ready .foot .bl,
  .is-ready .foot .theme { animation: rise-in .9s var(--ease-out) backwards; }
  .is-ready .foot .bl:nth-child(1) { animation-delay: .62s; }
  .is-ready .foot .bl:nth-child(2) { animation-delay: .7s; }
  .is-ready .foot .theme { animation-delay: .8s; }

  /* "Available" ping on the button dot. */
  .is-ready .btn i::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--btn-dot);
    opacity: 0;
    animation: ping 3.2s cubic-bezier(0, 0, .2, 1) 1.6s infinite backwards;
  }

  /* Theme switch: main.js grows the new theme as a circle out of the toggle. */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
    mix-blend-mode: normal;
  }

  /* Fallback for browsers without view transitions. */
  .theme-anim,
  .theme-anim * {
    transition:
      background-color .45s ease,
      color .45s ease,
      border-color .45s ease,
      stroke .45s ease,
      fill .45s ease,
      opacity .45s ease,
      transform .5s var(--ease-io) !important;
  }
}

@keyframes draw {
  from { stroke-dashoffset: 1; opacity: 0; }
  4% { opacity: 1; }
}

@keyframes band-rise {
  from { opacity: 0; transform: translateY(26px); }
}

/* In the lockup's own units: 35 = .35em at the rendered size. */
@keyframes wm-in {
  from { opacity: 0; transform: translateX(-35px); }
}

@keyframes pop-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
}

@keyframes word-up {
  from { transform: translateY(115%); }
}

@keyframes accent-in {
  from { color: var(--ink); }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(10px); }
}

@keyframes ping {
  0% { opacity: .75; transform: scale(1); }
  45%, 100% { opacity: 0; transform: scale(2.8); }
}