/* ==========================================================================
   BASE — reset, the three typographic voices, links, focus, form primitives
   Mobile-first throughout: every @media query is min-width.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--color-ivory);
  color: var(--color-plum);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* --- Voice 1: the serif explains -----------------------------------------
   Editorial headlines and long-form body. Weight 500 rather than 400: on a
   warm ground the extra stem weight keeps plum text from looking washed. */
h1, h2, h3 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.008em;
  line-height: var(--leading-display);
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }

/* --- Voice 2: the sans tells you ---------------------------------------- */
button, input, select, textarea,
.nav__link, .btn, .kicker, .byline, .card__meta {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: var(--tracking-normal);
}

/* --- Voice 3: the hand whispers ----------------------------------------
   Caveat runs optically small, so it is always set larger than the sans it
   sits beside. Never used for a fact, a figure or a navigational label. */
.hand {
  font-family: var(--font-hand);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.005em;
}

/* Caveat runs optically small and has thin strokes, so the smallest step still
   sits clearly above body size. At --text-lg it rendered at 19px against 17px
   body text, which is not "larger than the sans" in any useful sense. */
.hand--sm  { font-size: var(--text-xl); }
.hand--md  { font-size: var(--text-2xl); }
.hand--lg  { font-size: var(--text-3xl); }

.hand--coral      { color: var(--color-coral-ink); }
.hand--orchid     { color: var(--color-orchid-ink); }
.hand--jade       { color: var(--color-jade); }
.hand--on-dark    { color: var(--color-coral-light); }
.hand--on-solid   { color: var(--color-ivory); }

/* --- Links -------------------------------------------------------------- */
a { color: inherit; }

a:not([class]) {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: var(--color-coral);
  transition: color var(--motion-fast) var(--motion-ease);
}

a:not([class]):hover { color: var(--color-coral-ink); }

/* Every .link-arrow on this site is a standalone control: it is the only content of
   its own block, never a link inside a sentence. Its visible type has to stay at
   --text-xs to keep its editorial weight, which leaves a 22px text box - so the
   pointer target is grown to --target-min by an invisible ::before instead, which is
   what `position: relative` is here for. This changes no layout, no spacing and no
   visual weight; only the hit area. Vertical only, so it cannot reach sideways into
   neighbouring text.

   Inline links inside prose are deliberately untouched - see CLAUDE.md 12. */
.link-arrow {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-coral-ink);
}

.link-arrow::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--target-grow)) 0;
}

.link-arrow::after {
  content: "\2192";
  transition: transform var(--motion-base) var(--motion-ease);
}

.link-arrow:hover::after { transform: translateX(0.25em); }

/* --- Focus -------------------------------------------------------------
   A single visible ring everywhere, in a colour taken deliberately from
   outside the editorial palette so it can never be mistaken for decoration. */
:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Dark grounds get a light ring instead, to stay visible. */
.band--plum :focus-visible,
.site-footer :focus-visible,
.letter :focus-visible,
.card--solid :focus-visible,
.rare-event :focus-visible,
.pull-quote :focus-visible {
  outline-color: var(--color-ivory);
}

.skip-link {
  position: absolute;
  left: var(--space-sm);
  top: var(--space-sm);
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--color-plum);
  color: var(--color-ivory);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tracking-kicker);
  text-decoration: none;
  transform: translateY(-200%);
}

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

/* --- Buttons ------------------------------------------------------------
   Tap targets stay at 44px minimum height on every variant. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0.7rem 1.35rem;
  border: 0;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease);
}

.btn--sm { min-height: 40px; padding: 0.5rem 1rem; font-size: var(--text-2xs); }

.btn--plum  { background: var(--color-plum); color: var(--color-ivory); }
.btn--plum:hover { background: var(--color-plum-deep); }

/* `.btn--coral` lived here and had exactly one caller: the newsletter's "Iscrivimi".
   With the form gone (D-LAUNCH-NEWSLETTER-01) nothing renders it, and the no-dead-CSS
   rule is not optional. `coral-strong` itself stays in use - the format badge, the solid
   card and the evidence chip all ground on it - so the tested ivory/coral-strong pair is
   still earning its place. */

.btn--on-collision {
  background: var(--color-ivory);
  color: var(--color-plum);
}
.btn--on-collision:hover { background: var(--color-ivory-raised); }

/* --- Fields ------------------------------------------------------------ */
.field { display: grid; gap: var(--space-3xs); }

.field__label {
  font-size: var(--text-2xs);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.field__input {
  min-height: var(--target-min);
  padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-sm);
  background: var(--color-ivory-raised);
  color: var(--color-plum);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: 400;
}

.field__input::placeholder { color: var(--color-plum-soft); opacity: 0.65; }
.field__input:hover { border-color: var(--color-plum-soft); }

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

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

/* --- Print ------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .letter, .rare-event, .band--related { display: none; }
  /* Paper is white, not ivory: this one literal is deliberate. */
  body { background: #fff; }
}