/* Purpose: reset, document defaults, typographic roles, ambience and a11y primitives. */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Native smooth scrolling is left to Lenis, which is doing the easing. With
     both on, an anchor jump is eased twice and arrives late. Kept as the
     fallback for anyone Lenis does not run for - reduced motion, or no JS. */
  scroll-behavior: auto;
  /* Stops the page handing overscroll to the browser at its ends, which is a
     large part of what reads as bounce on a trackpad and on iOS. */
  overscroll-behavior-y: none;
  background: var(--c-obsidian);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--c-paper);
  font-family: var(--font-body);
  font-size: var(--step-body);
  font-weight: var(--wght-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color var(--dur-slower) linear;
}

img, picture, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* Outbound links inside prose: brass underline, never a default blue. */
.link-out {
  color: var(--c-brass);
  text-decoration: none;
  border-bottom: 1px solid rgba(198, 151, 73, 0.4);
  transition: color var(--dur-fast) var(--ease-ui), border-color var(--dur-fast) var(--ease-ui);
}

.link-out:hover { color: var(--c-brass-hi); border-bottom-color: var(--c-brass-hi); }

.application .link-out,
.sheet .link-out,
.document .link-out { color: var(--c-brass-ink); border-bottom-color: rgba(138, 108, 49, 0.45); }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
p { margin: 0 0 var(--space-20); }
p:last-child { margin-bottom: 0; }
strong, b { font-weight: var(--wght-body-strong); color: var(--c-white); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display), 'wght' var(--wght-display);
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-heading);
  color: var(--c-white);
}

/* ---------------------------------------------------------------
   Type roles
   --------------------------------------------------------------- */

.t-display {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-display), 'wght' var(--wght-black);
  font-size: var(--step-h2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--c-white);
  text-transform: uppercase;
}

.t-headline {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' 96, 'wght' var(--wght-display);
  font-size: var(--step-h2-tight);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--c-white);
  text-wrap: balance;
}

.t-pull {
  font-family: var(--font-body);
  font-size: var(--step-pull);
  font-weight: 300;
  line-height: 1.22;
  color: var(--c-white);
  text-wrap: balance;
}

.t-lead {
  font-size: var(--step-lead);
  line-height: 1.42;
  color: var(--c-white);
  font-weight: var(--wght-body);
}

.t-body { max-width: var(--measure); opacity: 0.86; }

.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  line-height: var(--lh-normal);
}

.t-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  color: var(--c-dim);
  line-height: var(--lh-normal);
}

.t-numeral {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-numeral), 'wght' 800;
  letter-spacing: var(--tracking-heading);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  color: var(--c-white);
}

/* Environmental type: enormous, cropped, behind the content plane. */
.t-environmental {
  font-family: var(--font-display);
  font-variation-settings: 'wdth' var(--wdth-condensed), 'wght' var(--wght-black);
  font-size: var(--step-environmental);
  line-height: var(--lh-crush);
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(198, 151, 73, 0.16);
  user-select: none;
  pointer-events: none;
}

/* Chapter marker: index, label and a brass rule, set at the section edge. */
.chapter-mark {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent);
}

.chapter-mark::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, currentColor, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-editorial) var(--ease-editorial);
}

.is-inview .chapter-mark::after,
.chapter-mark.is-inview::after { transform: scaleX(1); }

.chapter-mark__index { opacity: 0.6; }

/* ---------------------------------------------------------------
   Ambience: tungsten light and a very fine grain over the whole page
   --------------------------------------------------------------- */

.ambience {
  position: fixed;
  inset: 0;
  z-index: var(--z-below);
  pointer-events: none;
}

.ambience__light {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 18% 12%, var(--c-tungsten), transparent 68%),
    radial-gradient(50% 40% at 88% 74%, rgba(198, 151, 73, 0.09), transparent 72%);
  opacity: 0.9;
  transition: opacity var(--dur-slower) linear;
}

.ambience__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.is-calm .ambience__light { opacity: 0; }
body.is-calm .ambience__grain { opacity: 0.02; }

/* ---------------------------------------------------------------
   Icons
   --------------------------------------------------------------- */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
  /* A whisper of depth so line icons sit in the light, not on the surface. */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.45));
}

/* Not the brand marks. That shadow is tuned for a thin stroke on a dark
   ground; under a solid shape on pale paper it reads as a smudge. */
.icon-brand { filter: none; }

.application .icon,
.sheet .icon,
.dispatch-sheet .icon { filter: none; }
.icon--stroke-draw path,
.icon--stroke-draw circle,
.icon--stroke-draw rect { stroke-dasharray: 1; stroke-dashoffset: 1; }

/* ---------------------------------------------------------------
   Accessibility
   --------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: var(--space-16);
  top: var(--space-16);
  z-index: var(--z-door);
  padding: var(--space-12) var(--space-16);
  background: var(--c-brass);
  color: var(--c-obsidian);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(calc(-1 * var(--space-96)));
  transition: transform var(--dur-fast) var(--ease-ui);
}

.skip-link:focus { transform: translateY(0); }

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

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

[hidden] { display: none !important; }

::selection { background: var(--c-brass); color: var(--c-obsidian); }

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