/* =========================================================================
   Sabon Next LT — self-hosted, subsetted to Latin, Latin Extended and the
   punctuation this site uses. Licensed font software: the files in
   assets/fonts/ are covered by the site owner's Linotype/Monotype licence,
   and must not be redistributed with the source.
   ========================================================================= */
@font-face {
  font-family: 'Sabon Next LT';
  src: url('../assets/fonts/sabon-next-lt-regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sabon Next LT';
  src: url('../assets/fonts/sabon-next-lt-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Sabon Next LT';
  src: url('../assets/fonts/sabon-next-lt-bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Sabon Next LT';
  src: url('../assets/fonts/sabon-next-lt-bolditalic.woff2') format('woff2');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* =========================================================================
   menj — site styles
   Theme tokens, motion, and component styles. Utility classes come from
   Tailwind; everything here is either a design token or a bespoke effect.
   ========================================================================= */

:root,
[data-theme="night"] {
  --c-ink: #0a0a10;
  --c-surface: #13131c;
  --c-line: rgba(255, 255, 255, .10);
  --c-cream: #f4f0e7;
  --c-muted: #9891a6;
  --c-body: rgba(244, 240, 231, .80);   /* body copy on dark */
  --c-body-soft: rgba(244, 240, 231, .70);
  --c-accent: #e2a44e;
  --c-accent2: #8ea2ff;
  --grain: .05;
}

[data-theme="day"] {
  --c-ink: #f6f2ea;
  --c-surface: #ffffff;
  --c-line: rgba(24, 18, 10, .13);
  --c-cream: #17151c;
  --c-muted: #56506a;                   /* darkened for AA on white */
  --c-body: rgba(23, 21, 28, .92);      /* opacity raised: AA at 14–15px */
  --c-body-soft: rgba(23, 21, 28, .84);
  --c-accent: #8a4c0a;
  --c-accent2: #22389f;
  --grain: .035;
}

html { scroll-behavior: smooth; }

body {
  font-size: 17.5px;
  line-height: 1.6;
  font-feature-settings: "kern" 1, "liga" 1, "onum" 1;
  background-color: var(--c-ink);
  color: var(--c-cream);
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s ease, color .5s ease;
}

/* Body copy tokens — replace the former text-cream/75 alpha utilities,
   which fell below AA once the day theme inverted the surface. */
.prose-body { color: var(--c-body); }
.prose-soft { color: var(--c-body-soft); }

/* Film grain */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  opacity: var(--grain);
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Header backdrop — solid fallback first, color-mix second. */
.site-header {
  border-bottom: 1px solid var(--c-line);
  background: var(--c-ink);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .site-header { background: color-mix(in srgb, var(--c-ink) 78%, transparent); }
}

.portrait {
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  object-position: center top;
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .portrait { background: color-mix(in srgb, var(--c-accent) 10%, transparent); }
}

/* Scroll reveal */
/* Contents rail — borrowed from the reference layout. Appears only when the
   viewport is wide enough to hold it outside the centred column, so it never
   competes with the content. */
.contents {
  display: none;
  position: fixed;
  top: 6.5rem;
  left: 2.5rem;
  width: 12.5rem;
  z-index: 40;
}
@media (min-width: 100rem) { .contents { display: block; } }

.contents p {
  margin: 0 0 1rem;
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--c-accent);
}
.contents ul { list-style: none; margin: 0; padding: 0; }
.contents li { margin-bottom: .6rem; }
.contents a {
  color: var(--c-muted);
  text-decoration: none;
  font-size: .95rem;
  transition: color .2s ease;
}
.contents a:hover,
.contents a[aria-current="true"] { color: var(--c-cream); }

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1),
              transform .8s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }

.rule {
  background: linear-gradient(90deg, transparent, var(--c-line) 12%, var(--c-line) 88%, transparent);
  height: 1px;
}

.hairline { border-top: 1px solid var(--c-line); }
.hairline-b { border-bottom: 1px solid var(--c-line); }

.link-u {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .35s ease;
}
.link-u:hover,
.link-u:focus-visible { background-size: 100% 1px; }

.card {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1), border-color .45s ease;
}
.card:hover,
.card:focus-within { transform: translateY(-4px); border-color: var(--c-accent); }

/* Marquee — pauses on hover and on keyboard focus anywhere inside. */
.marquee-wrap { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.marquee { display: flex; width: max-content; animation: slide 42s linear infinite; }
.marquee-wrap:hover .marquee,
.marquee-wrap:focus-within .marquee,
.marquee[data-paused="true"] { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.marquee-toggle {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}


.blob {
  background: radial-gradient(closest-side, var(--c-accent), transparent 70%);
  filter: blur(60px);
  opacity: .16;
}

::selection { background: var(--c-accent); color: var(--c-ink); }

/* Visible keyboard focus across the whole page. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--c-accent);
  color: var(--c-ink);
  font-size: .8rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

@media (prefers-reduced-motion: reduce) {
  .marquee { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .card:focus-within { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Wordmark ----------
   Sabon Next LT outlines, so the logo needs no webfont to render correctly
   and stays crisp at any size. MENJ takes currentColor, the separating point
   takes the accent, BUZZ sits back. */
.wordmark {
  display: block;
  height: 1.05rem;
  width: auto;
}
.wordmark-dot { fill: var(--c-accent); }
.wordmark-soft { fill: currentColor; opacity: .45; }

@media (min-width: 40rem) { .wordmark { height: 1.15rem; } }