/* ============================================================
   BASE - fonts, reset, canvas texture.
   ============================================================ */

/* --- Self-hosted fonts (docs/assets/fonts/) --- */
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-v40-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/playfair-display-v40-latin-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/playfair-display-v40-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "Playfair Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/playfair-display-v40-latin-600.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-v12-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-v12-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/hanken-grotesk-v12-latin-600.woff2") format("woff2");
}

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

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

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-text);
  font-weight: 300;
  font-size: var(--type-body);
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* The linen grain - one subtle noise layer over everything.
   pointer-events: none keeps the film grain purely atmospheric. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

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

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

::selection {
  background: var(--champagne);
  color: var(--navy);
}

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

/* The hidden attribute always wins, even over display: grid/flex classes */
[hidden] {
  display: none !important;
}

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

.t-center {
  text-align: center;
}

/* Skip link - invisible concierge, but always reachable */
.skip-link {
  position: fixed;
  top: 1rem;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--ivory);
  font-size: var(--type-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transform: translateY(-300%);
}
.skip-link:focus {
  transform: none;
}