/* ==========================================================================
   Shared base. Reset, accessibility floor, and the few defaults every
   template agrees on. Templates append their own style.css after this;
   nothing here expresses a look.
   ========================================================================== */

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

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

body {
  margin: 0;
  background: var(--c-stock);
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  line-height: var(--lh-head);
  margin: 0 0 var(--s-3);
  font-weight: 400;
  text-wrap: balance;
}
h1 { font-size: var(--t-3xl); line-height: var(--lh-tight); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl); }

p, li { max-width: var(--w-text); }
p { margin: 0 0 var(--s-3); text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.18em; }

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

/* Photos sit open. No frames, no decorative borders, no boxed images.
   A photo slot is a labelled area, not a bordered card. */
.shot { position: relative; overflow: hidden; background: var(--c-stock-warm); }
.shot::after {
  content: attr(data-slot);
  position: absolute; left: var(--s-3); bottom: var(--s-2);
  font: 400 var(--t-xs)/1 var(--f-mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-ink-soft); opacity: 0.65;
}
.shot--bleed { margin-inline: calc(var(--pad-x) * -1); }

.wrap { max-width: var(--w-page); margin-inline: auto; padding-inline: var(--pad-x); }

/* Keyboard focus must stay visible. Never remove without a replacement. */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--c-ink); color: var(--c-stock);
  padding: var(--s-2) var(--s-3); z-index: 100;
}
.skip:focus { left: var(--s-3); top: var(--s-3); }

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

/* One reveal pattern per site, and it always yields to the OS setting. */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.rise.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rise { opacity: 1; transform: none; }
}