/* Fonts loaded via wp_enqueue_style in functions.php */

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

html { scroll-behavior: smooth; }

body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 0.9; letter-spacing: 0.005em; text-transform: uppercase; }

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--brick); color: var(--bone); }

:focus-visible { outline: 2px solid var(--brick-bright); outline-offset: 3px; }

/* utility: monospaced editorial labels */
.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--silver);
}

/* thin custom scrollbar */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border: 3px solid var(--ink); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--brick-dark); }

/* film grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
}

.u-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Generic page styles */
.pdt-page-main {
  min-height: 60vh;
  padding: calc(var(--section-y) + 4rem) var(--gutter) var(--section-y);
  max-width: var(--maxw);
  margin-inline: auto;
}
.pdt-page-title { font-size: clamp(2rem, 7vw, 5rem); margin-bottom: var(--s-4); }
.pdt-page-content { color: var(--bone-dim); line-height: 1.8; max-width: 68ch; }
.pdt-page-content p + p { margin-top: var(--s-3); }
.pdt-page-content a { color: var(--brick-bright); text-decoration: underline; }
.pdt-page-content a:hover { color: var(--bone); }

/* Generic buttons */
.pdt-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.25s var(--ease-cinema), color 0.25s var(--ease-cinema);
  border: 1px solid var(--bone);
  background: transparent;
  color: var(--bone);
}
.pdt-btn--primary { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.pdt-btn--primary:hover { background: var(--brick); color: var(--bone); border-color: var(--brick); }
.pdt-btn--outline:hover { background: var(--bone); color: var(--ink); }
.pdt-btn--ghost { border-color: var(--rule); color: var(--bone-dim); }
.pdt-btn--ghost:hover { border-color: var(--bone); color: var(--bone); }

/* WC main wrapper */
.pdt-wc-main {
  min-height: 60vh;
  padding-top: clamp(5rem, 10vw, 9rem);
}

/* Breadcrumb */
.pdt-breadcrumb {
  padding: var(--s-2) var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.pdt-breadcrumb a { color: var(--bone-dim); transition: color 0.2s; }
.pdt-breadcrumb a:hover { color: var(--bone); }
.pdt-breadcrumb__sep { margin-inline: 0.5em; opacity: 0.4; }

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