/* ============================================================
   YIZZOO - Base layer
   Reset, typography, page shell, paper grain, accessibility.
   ============================================================ */

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

html{
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  background: var(--color-parchment);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Paper grain (blueprint 74) -------------------------------
   A fixed, non-interactive overlay so large parchment areas do not
   read as flat beige rectangles. SVG noise, so no image request. */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  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.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Headings -------------------------------------------------
   Display face for headings, body face for everything else. */
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--color-midnight);
  font-weight: 600;
  margin: 0;
  /* Fraunces is a variable font; keep the optical size sane and the
     "wonk"/softness dialled back so it reads editorial, not novelty. */
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
  letter-spacing: -0.01em;
}
h1{ font-size: var(--fs-page); line-height: var(--lh-page); }
h2{ font-size: var(--fs-h2);   line-height: var(--lh-h2); }
h3{ font-size: var(--fs-h3);   line-height: var(--lh-h3); }
h4{ font-size: var(--fs-h4);   line-height: var(--lh-h4); }

p{ margin: 0 0 var(--sp-4); }
p:last-child{ margin-bottom: 0; }

a{ color: var(--color-teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover{ color: var(--color-midnight); }

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

/* --- Focus states (blueprint 44): clear, and never suppressed --- */
:focus-visible{
  outline: 3px solid var(--color-teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Layout helpers ------------------------------------------- */
.yz-wrap{
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--page-pad);
}
.yz-wrap--wide{ max-width: var(--wide-max); }
.yz-wrap--reading{ max-width: var(--reading-max); }

.yz-section{ padding-block: var(--section-y); }
.yz-section--tight{ padding-block: var(--sp-9); }

/* Alternating band, so sections separate without hard rules. */
.yz-section--banded{ background: var(--color-parchment-deep); }
.yz-section--paper{ background: var(--color-paper); }

/* --- Section heading pattern -----------------------------------
   Centered display title, optional lead, optional gold hairline. */
.yz-section-head{
  text-align: center;
  max-width: 660px;
  margin: 0 auto var(--sp-8);
}
.yz-section-head h2{ margin-bottom: var(--sp-3); }
.yz-section-head p{
  font-size: var(--fs-intro);
  line-height: var(--lh-intro);
  color: var(--color-soft-ink);
  margin: 0;
}
/* Tiny compass star rule under a section title (blueprint 75:
   one or two decorative ideas per section, no more). */
.yz-rule{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: 0 auto var(--sp-4);
  width: 180px;
  color: var(--color-gold);
}
.yz-rule::before,
.yz-rule::after{
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--color-gold-30));
}
.yz-rule::after{ background: linear-gradient(270deg, transparent, var(--color-gold-30)); }

/* --- Eyebrow / kicker ----------------------------------------- */
.yz-eyebrow{
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-teal);
  margin: 0 0 var(--sp-3);
}

/* --- Screen-reader only -------------------------------------- */
.yz-sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link, visible only on keyboard focus. */
.yz-skip{
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: 10000;
  background: var(--color-midnight);
  color: var(--color-paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-button);
  font-weight: 700;
  text-decoration: none;
  transition: top var(--t-base) var(--ease);
}
.yz-skip:focus{ top: var(--sp-4); color: var(--color-paper); }

/* Honour reduced motion globally for the decorative layer. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}