/* lindquell teaser. Linden palette, dark by default and light on request; Outfit and Inter
   self-hosted, no external requests. */

@font-face {
  font-family: Outfit;
  src: url(outfit.woff2) format('woff2');
  font-weight: 485 545;
  font-display: swap;
}

@font-face {
  font-family: Inter;
  src: url(inter.woff2) format('woff2');
  font-weight: 400 600;
  font-display: swap;
}

:root {
  --ground: #111111;
  --text: #f7f7f7;
  --muted: #a8a8a8;
  --border: #3a3a3a;
  --focus: #d9ec42;                  /* citron: the focus ring on dark, never on light */
  --pattern: #202020;                /* quiet step behind copy */
  --pattern-lit: #3a3a3a;            /* the step a layer brightens to as the wave passes */
  --rest: 0.42;                      /* opacity of --pattern-lit that reads as --pattern */
  --divider: #2d2d2d;                /* medium step */
  color-scheme: dark;
  --gutter: clamp(16px, 5vw, 120px);
  --inset: max(var(--gutter), calc((100vw - 1600px) / 2));   /* centre the frame on wide screens */
  --copy: min(560px, 44vw);
  --display: Outfit, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --text-face: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* Light: the palette's light side only, no citron at all */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #ffffff;
    --text: #1b1b1b;
    --muted: #6f6f6f;
    --border: #dddddd;
    --focus: #1b1b1b;
    --pattern: #ededed;
    --pattern-lit: #d1d1d1;
    --rest: 0.40;
    --divider: #dddddd;
    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --ground: #ffffff;
  --text: #1b1b1b;
  --muted: #6f6f6f;
  --border: #dddddd;
  --focus: #1b1b1b;
  --pattern: #ededed;
  --pattern-lit: #d1d1d1;
  --rest: 0.40;
  --divider: #dddddd;
  color-scheme: light;
}

* { box-sizing: border-box; }

html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  background: var(--ground);
  color: var(--text);
  font: 400 16px/24px var(--text-face);
  font-feature-settings: 'cv05' 1, 'cv08' 1;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover { text-decoration-color: var(--text); }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
  border-radius: 2px;
}

.header,
.main,
.footer {
  position: relative;
  z-index: 1;
  padding-right: var(--gutter);
  padding-left: var(--inset);
}

.header { padding-top: 40px; }

.lockup {
  display: block;
  width: auto;
  height: 32px;                      /* above the 28 px minimum; clear space kept by the padding */
}

/* Both lockup files ship inline; the theme shows one: citron mark and white word on dark, ink
   on light */
.lockup-light { display: none; }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .lockup-dark { display: none; }
  :root:not([data-theme="dark"]) .lockup-light { display: block; }
}

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

.main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding-top: 80px;
  padding-bottom: 80px;
}

.main > * { width: var(--copy); }

h1 {
  margin: 0;
  font: 485 56px/60px var(--display);
  letter-spacing: -0.02em;
}

/* 20 Settling line: settles once on load and stays */
.divider {
  display: block;
  max-width: 510px;                  /* 1.5 px per u */
  height: auto;
  margin: 40px 0 32px;
}

.status {
  margin: 0;
  font-size: 20px;
  line-height: 28px;
}

.contact {
  margin: 8px 0 0;
  color: var(--muted);
}

.footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: center;
  padding-bottom: 32px;
  color: var(--muted);
  font-size: 14px;
  line-height: 20px;
}

.footer p { margin: 0; }

.controls {
  display: flex;
  gap: 8px;
}

.toggle {
  padding: 5px 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

.toggle:hover { color: var(--text); }
.toggle[hidden] { display: none; }

/* 34 Crown layers: the whole mark in layers, cropped by the right and bottom edges of the
   screen, starting clear of the copy; 1 to 4 px per u (the art is 333.4 by 405.3 u) */
.field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.field-art {
  position: absolute;
  top: 10vh;
  left: max(calc(var(--inset) + var(--copy) + 96px), calc(100% - min(125vh, 1620px) * 0.66));
  width: auto;
  height: min(125vh, 1620px);
  aspect-ratio: 333.4 / 405.3;
}

.field-art > g { stroke: var(--pattern); }
.divider > g { stroke: var(--divider); }

.field-art .row {
  transform-box: fill-box;
  transform-origin: center;
}

.divider path { stroke-dasharray: 1 2; }

/* Motion, from the Moves lines of 34 and 20. A band of light rises through the crown's layers,
   foot to stem tip, then the crown rests: 8 s loop, no seam. Each layer is drawn in the lit grey
   and rests at an opacity that reads as the quiet step, so the band only brightens toward the
   lit step. The divider settles once. Nothing moves when reduced motion is asked for. */
@media (prefers-reduced-motion: no-preference) {
  .field-art > g { stroke: var(--pattern-lit); }

  .field-art .row {
    opacity: var(--rest);
    animation: rise 8s cubic-bezier(0.45, 0, 0.55, 1) calc(var(--d, 0s) * 0.45) infinite;
  }

  .divider path {
    animation: settle 1.2s ease-out calc(600ms + var(--i) * 70ms) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-toggle { display: none; }
}

.motion-paused .field-art .row { animation-play-state: paused; }

@keyframes rise {
  0%, 30%, 100% { opacity: var(--rest); transform: scaleX(0.97); }
  15% { opacity: 1; transform: scaleX(1); }
}

@keyframes settle {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

/* Narrow screens: the crown sits below the copy and fills the space down to the footer */
@media (max-width: 899px) {
  :root { --copy: 100%; }

  .main {
    flex: 0 0 auto;
    padding-top: 72px;
    padding-bottom: 48px;
  }

  .field {
    position: relative;
    inset: auto;
    flex: 1 0 300px;
    margin-bottom: 24px;
  }

  .field-art {
    top: 8px;
    left: calc(var(--gutter) + 8vw);
    width: max(110vw, 420px);        /* at least 1.26 px per u */
    height: auto;
  }
}

@media (max-width: 599px) {
  .header { padding-top: 24px; }

  .main { padding-top: 56px; }

  h1 {
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.015em;
  }

  .divider { margin: 32px 0 24px; }
}