/* ============================================================
   MUTĖ MILLINERY — reset, typography, atmosphere
   The floor everything else is built on: the reset, element
   defaults, the shared type classes, and the two overlays that
   stop a dark page reading as flat CSS.

   Loads second (tokens → base → layout → components → motion).
   Everything here is a default the later sheets may legitimately
   override; nothing here fights them.
   ============================================================ */


/* ==== RESET ================================================ */

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

* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The nav is fixed. Without this, an in-page jump parks the
     target's first line underneath it. 1.5rem of air on top. */
  scroll-padding-top: calc(var(--nav-h) + 1.5rem);
}

body {
  background: var(--pitch);
  color: var(--parchment);
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

ul, ol { list-style: none; }

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

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
}

button { cursor: pointer; }

/* Vertical only — a user-dragged textarea must never be able to
   push the form wider than the page. */
textarea { resize: vertical; }

::placeholder { color: var(--parchment-faint); opacity: 1; }

/* Jost 300 is the body weight, so "bold" is 500. Anything heavier
   reads as shouting against Cormorant. */
strong, b { font-weight: 500; color: var(--parchment); }

::selection { background: var(--gilt); color: var(--pitch); }


/* ---- Focus: gilt, offset, always visible -------------------
   The outline is removed from :focus only so mouse users do not
   see a ring on click, and it is immediately replaced on
   :focus-visible. Never remove one without replacing it.
   ------------------------------------------------------------ */

:focus { outline: none; }

:focus-visible {
  outline: 1px solid var(--gilt);
  outline-offset: 4px;
}


/* ---- Skip link ---------------------------------------------
   Parked above the viewport and slid down on keyboard focus.
   z-index 999 — above the grain (900), the vignette (899) and
   the ivory interlude (901), which is the whole point.
   ------------------------------------------------------------ */

.skip {
  position: fixed;
  top: 0; left: 50%;
  transform: translate(-50%, -110%);
  z-index: 999;
  padding: 0.85rem 1.75rem;
  background: var(--parchment);
  color: var(--pitch);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  transition: transform var(--dur-fast) var(--ease-out);
}

.skip:focus-visible { transform: translate(-50%, 0); outline-offset: -4px; }


/* ---- Screen-reader-only ------------------------------------
   The clip/clip-path technique, NOT display:none and NOT
   visibility:hidden. The buy/hire radios wear this class and
   must stay in the tab order — the whole CSS-only mode switch
   depends on them being focusable and checkable.
   ------------------------------------------------------------ */

.sr-only {
  position: absolute;
  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;
}

/* The inline <symbol> sprite. It must remain rendered — the
   <use> references resolve against it — but occupy nothing. */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}


/* ============================================================
   TYPOGRAPHY
   Cormorant Garamond for display, Jost for everything else.
   The sans is what keeps the period styling reading as design
   rather than costume, so it does the work everywhere the eye
   actually reads.
   ============================================================ */

/* ---- Eyebrow: engraved small caps with a gilt hairline ----- */

.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--t-micro);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--parchment-dim);
}

/* Used where the eyebrow is flanked by two dashes rather than
   led by one — Baroque wants an axis to hang things on. The
   flex container centres the dash/text/dash run; text-align
   handles the case where the label itself wraps to two lines. */
.eyebrow--centred {
  justify-content: center;
  text-align: center;
}

.eyebrow__dash {
  flex: none;
  width: 2.5rem;
  height: 1px;
  background: var(--gilt-dim);
}

/* ---- Deck: the paragraph under a title -------------------- */

.deck {
  max-width: var(--measure);
  font-size: var(--t-deck);
  font-weight: 300;
  line-height: 1.75;
  color: var(--parchment-dim);
}

.deck--centred {
  margin-inline: auto;
  text-align: center;
}

/* ---- Section title ----------------------------------------
   Cormorant is a high-contrast garalde: its cap height is tall
   and its stroke contrast reads as air, so display type takes a
   tighter line-height than a sans of the same size would.
   ------------------------------------------------------------ */

.section__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: var(--track-tight);
  color: var(--parchment);
}


/* ---- The gild ----------------------------------------------
   The signature move: gold as LIGHT, not as fill. A 300%-wide
   ramp is clipped to the letterforms and parked at 100% 0, so
   the visible third is the flat parchment tail and the type
   rests as ordinary text. motion.css slides the position to
   0% 0 and the leaf sweeps across the word once.

   Every stop before 62% is therefore off-stage at rest. The
   crest is a warm near-white mixed off --gilt-hot rather than a
   flat white, so the specular highlight stays inside the
   palette instead of punching a hole in it.
   ------------------------------------------------------------ */

.gild {
  background-image: linear-gradient(
    100deg,
    var(--parchment) 0%,
    var(--parchment) 36%,
    var(--gilt)      43%,
    var(--gilt-hot)  47.5%,
    color-mix(in srgb, var(--gilt-hot) 45%, white) 50%,
    var(--gilt-hot)  52.5%,
    var(--gilt)      57%,
    var(--parchment) 64%,
    var(--parchment) 100%
  );
  background-size: 300% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}


/* ============================================================
   ORNAMENT
   Two families, and they are opposites. Filigree is DRAWN —
   stroked, never filled, so motion.css can run a dash-offset
   along it. The hat silhouettes are FILLED, never stroked.
   Confusing the two is the fastest way to make this page look
   like clip art.

   Sizing lives here; placement lives in components.css.
   ============================================================ */

.orn {
  fill: none;
  stroke: var(--gilt);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* The corner brackets are scaled hard by their viewBox. Without
     this the hairline thickens with the box and stops reading as
     an engraved line. */
  vector-effect: non-scaling-stroke;
  overflow: visible;
  pointer-events: none;
}

/* The corner <svg> elements in the markup carry no viewBox of
   their own — the symbol supplies it — so they need both
   dimensions stated or they fall back to the 300×150 default. */
/* Both dimensions are set because the outer <svg> takes its
   viewBox from the <symbol> through <use> — it has no intrinsic
   ratio of its own to derive a height from. */
.orn--corner {
  width: 2.25rem;
  height: 2.25rem;
}

/* The fleuron does carry its own 240×40 viewBox, so height:auto
   from the reset gives it the right aspect ratio. */
.orn--fleuron {
  width: 100%;
  max-width: 15rem;
  height: auto;
  stroke: var(--gilt-dim);
}

/* ---- Hat silhouettes: filled, no stroke -------------------- */

.plate__hat {
  width: 100%;
  max-width: 13rem;
  height: auto;
  aspect-ratio: 1;
  fill: var(--parchment-faint);
  stroke: none;
}


/* ============================================================
   ATMOSPHERE — pattern, grain, vignette
   Three fixed overlays, all inert to the pointer, in this
   stacking order back to front: the damask pattern (898), the
   film grain (900) on top of it, the vignette (899) between the
   two darkening the edges. A flat --pitch page under all of it
   would read as a flat rectangle rather than a lit room.

   `body::before` rather than a markup element for the pattern:
   it is pure decoration with nothing to swap or extend later, so
   it doesn't need a place in the document the way `.grain` and
   `.vignette` do (both already existed as elements in index.html
   before this was added, and there was no reason to duplicate
   that approach for one more static layer).
   ============================================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 898;
  pointer-events: none;
  opacity: var(--pattern-opacity);
  /* Plain alpha, not a blend mode. `mix-blend-mode: overlay` was
     tried first, on the same reasoning as .grain below — but
     overlay darkens in proportion to how dark the layer under it
     already is, and this page is dark almost everywhere, so the
     pattern was crushed to invisible under it. Straight opacity
     compositing shows the recoloured gold at a fraction of its
     strength regardless of what's beneath, which is what actually
     reads as texture here. The source tile was recoloured with a
     duotone mapped exactly onto --pitch/--gilt before it was
     saved, so its dark ground already matches the page and only
     the gold filigree shows as a lift. */
  background-image: url("../assets/patterns/damask.png");
  background-repeat: repeat;
  background-size: 230px 266px;
}

.grain {
  position: fixed;
  inset: -50%;              /* oversized so no edge can ever show */
  z-index: 900;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Heavier than a modern vignette on purpose. This is chiaroscuro:
   the corners of a Baroque canvas go almost to nothing and only
   the centre is lit. Mixed off --pitch-deep rather than pure
   black so the shadow stays warm — a blue-cast shadow over a
   warm ground is the single thing that would break the illusion. */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 899;
  pointer-events: none;
  background:
    radial-gradient(
      130% 100% at 50% 34%,
      transparent 20%,
      color-mix(in srgb, var(--pitch-deep) 38%, transparent) 56%,
      color-mix(in srgb, var(--pitch-deep) 78%, transparent) 84%,
      color-mix(in srgb, var(--pitch-deep) 94%, transparent) 100%
    );
}


/* ============================================================
   REDUCED MOTION
   motion.css owns the animations; smooth scrolling is declared
   here, so it is switched off here too.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .skip { transition: none; }
}