/* ===========================================================================
   BASE — reset, document typography, accessibility primitives, utilities
   Depends on tokens.css.
   ========================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor jumps must clear the fixed header. */
  scroll-padding-top: calc(var(--pc-header-h) + 2rem);
}

body {
  margin: 0;
  background-color: var(--pc-surface);
  color: var(--pc-text);
  font-family: var(--pc-font-body);
  font-size: var(--pc-t-body);
  font-weight: var(--pc-weight-regular);
  line-height: var(--pc-lh-relaxed);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Lenis smooth scrolling takes over the scroll position; native smooth
   behaviour would fight it. The class is added by JS only when Lenis starts,
   so a no-JS visitor keeps native smooth scrolling. */
html.lenis {
  scroll-behavior: auto;
}

html.lenis body {
  height: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* Locks scrolling while the mobile menu is open. */
html.pc-scroll-locked,
html.pc-scroll-locked body {
  overflow: hidden;
  touch-action: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

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

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------------------------------------------------------------------------
   TYPOGRAPHY
   ------------------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
  font-family: var(--pc-font-display);
  font-weight: var(--pc-weight-medium);
  line-height: var(--pc-lh-tight);
  letter-spacing: var(--pc-ls-display);
  text-wrap: balance;
}

/* Greek display type sits optically heavier than Latin at the same weight and
   needs a touch more room to breathe. */
:lang(el) h1,
:lang(el) h2,
:lang(el) h3 {
  letter-spacing: -0.01em;
}

.pc-hero-type {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-hero);
  line-height: var(--pc-lh-tight);
  letter-spacing: -0.035em;
  font-weight: var(--pc-weight-regular);
}

.pc-d1 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d1);
  line-height: var(--pc-lh-tight);
  letter-spacing: -0.025em;
  font-weight: var(--pc-weight-regular);
}

.pc-d2 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d2);
  line-height: var(--pc-lh-snug);
  letter-spacing: -0.02em;
  font-weight: var(--pc-weight-regular);
}

.pc-d3 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d3);
  line-height: var(--pc-lh-snug);
  font-weight: var(--pc-weight-medium);
}

.pc-d4 {
  font-family: var(--pc-font-display);
  font-size: var(--pc-t-d4);
  line-height: var(--pc-lh-snug);
  font-weight: var(--pc-weight-medium);
}

.pc-lead {
  font-size: var(--pc-t-lead);
  line-height: var(--pc-lh-normal);
  color: var(--pc-text);
  max-width: var(--pc-measure);
  font-weight: var(--pc-weight-light);
}

.pc-body {
  font-size: var(--pc-t-body);
  line-height: var(--pc-lh-relaxed);
  color: var(--pc-text-muted);
  max-width: var(--pc-measure);
}

.pc-body + .pc-body {
  margin-top: 1.4em;
}

/* Split lines ------------------------------------------------------------
   split-text.js wraps each visual line in .pc-line and masks it with
   `overflow: hidden`; that mask is what makes a line reveal read as type
   rising out of nothing.

   The mask is only as tall as the line box, and the display sizes here run as
   tight as line-height 0.92 — which ends the box above the font's descender
   and shears the tail off a "g" or "y", or a Greek "χ", "ρ", "μ". Measured
   against the *font's* descent box rather than the current copy (so new text
   cannot quietly bring it back), the deepest shortfall on the site is 0.224em,
   on the hero headline.

   The clearance goes on the *inner*, not on the mask. Padding the mask alone
   is the obvious move and it is wrong: it grows the visible box while the
   parked line still only travels its own (unpadded) height, so a reveal that
   should be fully out of frame leaves the tops of its letters showing above
   the mask's new bottom edge. Padding the inner grows both together — the
   mask is as tall as the inner, and `yPercent: 108` of a taller inner still
   clears it.

   The negative margin on the mask gives the extra height back to the layout,
   so line spacing does not move. Keep the two values equal if you change
   them. */
.pc-line {
  margin-bottom: -0.24em;
}

.pc-line__inner {
  padding-bottom: 0.24em;
}

/* The letterspaced small-caps label, lifted from the COMMUNICATIONS lockup. */
.pc-label {
  font-family: var(--pc-font-body);
  font-size: var(--pc-t-label);
  font-weight: var(--pc-weight-medium);
  letter-spacing: var(--pc-ls-label);
  text-transform: uppercase;
  color: var(--pc-gold);
  line-height: 1;
}

.pc-label--muted {
  color: var(--pc-text-dim);
}

/* Section folio number, set in the margin like a magazine. */
.pc-folio {
  font-family: var(--pc-font-body);
  font-size: var(--pc-t-label);
  letter-spacing: var(--pc-ls-wide);
  color: var(--pc-text-dim);
  font-variant-numeric: tabular-nums;
}

.pc-gold-text {
  color: var(--pc-gold);
}

/* Brushed-metal text fill. Falls back to flat gold where unsupported. */
.pc-gold-gradient {
  color: var(--pc-gold);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .pc-gold-gradient {
    background: var(--pc-gradient-gold);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.pc-italic {
  font-style: italic;
}

/* ---------------------------------------------------------------------------
   LINKS
   ------------------------------------------------------------------------ */
a {
  color: inherit;
  text-decoration: none;
}

/* Inline prose links keep a visible underline — colour alone never carries
   meaning (WCAG 1.4.1). */
.pc-body a,
.pc-lead a,
.pc-prose a {
  color: var(--pc-gold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--pc-line-strong);
  transition: text-decoration-color var(--pc-dur-fast) var(--pc-ease),
    color var(--pc-dur-fast) var(--pc-ease);
}

.pc-body a:hover,
.pc-lead a:hover,
.pc-prose a:hover {
  color: var(--pc-gold-light);
  text-decoration-color: currentColor;
}

/* ---------------------------------------------------------------------------
   FOCUS
   A single, always-visible focus treatment. Never remove it — the whole site
   is keyboard-operable and this is the only thing that shows where you are.
   ------------------------------------------------------------------------ */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--pc-focus-width) solid var(--pc-focus);
  outline-offset: var(--pc-focus-offset);
}

/* Elements that receive focus programmatically (page-transition target) must
   not paint a ring — the visitor did not tab there. */
[tabindex='-1']:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------
   ACCESSIBILITY HELPERS
   ------------------------------------------------------------------------ */
.pc-visually-hidden {
  position: absolute !important;
  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;
}

.pc-skip-link {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -110%);
  z-index: var(--pc-z-transition);
  padding: 0.9rem 1.6rem;
  background: var(--pc-cream);
  color: #0a0a0a;
  font-size: var(--pc-t-small);
  letter-spacing: var(--pc-ls-wide);
  text-transform: uppercase;
  transition: transform var(--pc-dur-fast) var(--pc-ease);
}

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

/* ---------------------------------------------------------------------------
   SELECTION
   ------------------------------------------------------------------------ */
::selection {
  background: var(--pc-gold);
  color: #000;
}

/* ---------------------------------------------------------------------------
   SCROLLBAR
   ------------------------------------------------------------------------ */
@supports (scrollbar-color: black black) {
  html {
    scrollbar-color: var(--pc-gold-shadow) var(--pc-black);
    scrollbar-width: thin;
  }
}

/* ---------------------------------------------------------------------------
   FILM GRAIN
   A single fixed overlay gives the whole site its filmic surface. Pointer
   events off so it never intercepts a click.
   ------------------------------------------------------------------------ */
.pc-grain {
  position: fixed;
  inset: -50%;
  z-index: var(--pc-z-sticky);
  pointer-events: none;
  opacity: var(--pc-grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  will-change: transform;
  animation: pc-grain-shift 700ms steps(1) infinite;
}

@keyframes pc-grain-shift {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-3%, 2%); }
  40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -2%); }
  80% { transform: translate(3%, 1%); }
  100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------------------
   UTILITIES
   ------------------------------------------------------------------------ */
.pc-hairline {
  height: var(--pc-hairline);
  border: 0;
  margin: 0;
  background: var(--pc-line);
}

.pc-hairline--gold {
  background: var(--pc-gradient-gold);
  opacity: 0.65;
}

.pc-measure {
  max-width: var(--pc-measure);
}

.pc-measure-tight {
  max-width: var(--pc-measure-tight);
}

.pc-nowrap {
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   REDUCED MOTION
   Everything decorative stops. Scroll-driven video is pinned to its poster
   frame by JS, and GSAP timelines are set to their end state, so no content
   is ever left hidden.
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .pc-grain {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   PRINT
   ------------------------------------------------------------------------ */
@media print {
  .pc-grain,
  .pc-header,
  .pc-footer,
  .pc-cursor,
  .pc-cookie,
  video {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
  }

  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
  }
}