/* ============================================================================
   ARUM — Fonts, reset, element defaults, shared primitives, a11y prefs
   ========================================================================= */

/* ---- Display face ------------------------------------------------------
   TT Ricordi Allegria (TypeType), licensed web fonts — see fonts/ and the
   Web-font-License. The family ships NO italic and `font-synthesis: none` is
   set globally so the browser cannot fake one — never apply font-style:
   italic to display text.
   Only the three weights the site actually uses are loaded (400/500/600).
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'TT Ricordi Allegria';
  src: url('../fonts/ricordi-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Ricordi Allegria';
  src: url('../fonts/ricordi-medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TT Ricordi Allegria';
  src: url('../fonts/ricordi-demibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

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

html {
  scroll-behavior: smooth;
  /* Anchor targets must clear the fixed header, with a little breathing room. */
  scroll-padding-top: calc(var(--header-h) + 1.5rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--shell);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-synthesis: none;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
img { max-width: 100%; display: block; }

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

input, select, textarea, button { font: inherit; color: inherit; }
::placeholder { color: var(--placeholder); opacity: 1; }

/* ---- Focus -------------------------------------------------------------
   Keyboard focus must be unmistakable — the underlined form fields in
   particular have no box to outline, so they get an offset ring.
   --------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}
.on-plum :focus-visible,
.site-header :focus-visible { outline-color: var(--on-plum-strong); }

.skip-link {
  position: absolute;
  left: var(--page-pad);
  top: 0;
  z-index: 100;
  transform: translateY(-150%);
  background: var(--shell);
  color: var(--plum);
  padding: .75rem 1.25rem;
  font-size: var(--size-nav);
  letter-spacing: var(--track-nav);
  text-transform: uppercase;
  transition: transform .2s var(--ease-reveal);
}
.skip-link:focus-visible { transform: translateY(.5rem); }

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

/* ---- Layout primitives ------------------------------------------------ */
.section { padding: var(--section-y) var(--page-pad); background: var(--surface); }
.shell { max-width: var(--measure); margin-inline: auto; }
.split { display: grid; align-items: start; }

/* ---- Type primitives -------------------------------------------------- */
.eyebrow {
  font-size: var(--size-eyebrow);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--accent);
  margin-bottom: 1.625rem;
}

.micro-label {
  font-size: var(--size-micro);
  letter-spacing: var(--track-micro);
  text-transform: uppercase;
  line-height: 1.6;
  color: var(--micro);
}

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-h2);
  line-height: var(--leading-display);
  color: var(--plum);
  text-wrap: pretty;
}

.lede {
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--muted);
  text-wrap: pretty;
}

.quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--size-quote);
  line-height: 1.2;
  color: var(--plum);
  text-wrap: pretty;
}

/* ---- Button ------------------------------------------------------------
   Feedback lives on pointer-DOWN, not on release: the press scale fires the
   instant the finger lands. Anything that waits for `click` reads as dead.
   --------------------------------------------------------------------- */
.button {
  display: inline-block;
  border: none;
  cursor: pointer;
  color: var(--hanji);
  background: var(--plum);
  font-family: var(--font-body);
  font-size: var(--size-nav);
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  line-height: 1;
  padding: 1rem 2.125rem;
  border-radius: var(--radius);
  transition: background var(--dur-hover) ease, transform var(--dur-hover) ease;
}
.button:hover { background: var(--accent-hover); color: var(--hanji); transform: translateY(-2px); }
.button:active { transform: scale(.97); transition: transform var(--dur-press) ease-out; }
.button:disabled { cursor: progress; opacity: .62; transform: none; }

/* ---- Reveal-on-scroll --------------------------------------------------
   Elements start hidden only once JS confirms it can drive them, so the page
   is never blank if the script fails to load.
   --------------------------------------------------------------------- */
[data-reveal] { will-change: opacity, transform; }
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--dur-reveal) var(--ease-reveal),
    transform var(--dur-reveal) var(--ease-reveal);
}
.js-reveal [data-reveal].is-revealed,
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================================
   Accessibility preferences
   Reduced motion does not mean no feedback — it means a gentler, non-
   vestibular equivalent: cross-fades instead of travel, no overshoot,
   no scroll-driven parallax.
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js-reveal [data-reveal] {
    transform: none;
    transition: opacity .5s ease;
  }

  .button:hover { transform: none; }
  .button:active { transform: none; opacity: .8; }

  .hero__wordmark { transition: opacity 1s ease !important; transform: none !important; }
  .scroll-hint { display: none; }
}

/* Frostier, not see-through, when transparency is reduced. */
@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .nav-drawer { backdrop-filter: none; }
  .nav-scrim { background: rgba(46, 32, 40, .5); }
}

/* Near-solid surfaces with a defined, contrasting border. */
@media (prefers-contrast: more) {
  :root {
    --muted: #4A3A42;
    --micro: #6B5A62;
    --placeholder: #6B5A62;
    --hairline: rgba(71, 42, 62, .45);
    --field-line: rgba(71, 42, 62, .6);
    --on-plum-soft: #F3E9EC;
    --on-plum-quiet: rgba(243, 233, 236, .85);
    --on-plum-faint: rgba(243, 233, 236, .75);
  }
  .nav-drawer { backdrop-filter: none; }
}