/* ==================================================================
   SINAYE TONI — GLOBAL STYLES
   Everything that is the SAME on every page lives here:
     nav, type sizes/fonts, base reset, paper texture,
     and the floral corner-motif SYSTEM (rules only — not currently
     placed on any page, see note below).
   Anything specific to ONE page's layout belongs in that page's own
   css file (home.css / cv.css / projects.css / contact.css), not here.
================================================================== */

:root {
  /* ---------- COLOUR ---------- */
  --bg: #f7f0e2;              /* the ONLY background colour, site-wide — champagne, not pink */
  --ink: #34131B;             /* primary text — deep wine-black */
  --muted: #7C5257;           /* muted text / metadata */
  --burgundy: #631627;        /* primary accent */
  --burgundy-deep: #400E1A;   /* hover / pressed states */
  --rose: #C96C82;
  --line: rgba(52, 19, 27, 0.18);

  /* ---------- TYPE (two families only) ---------- */
  --font-script: 'Ballet', cursive;
  --font-serif: 'Cormorant Garamond', 'Times New Roman', serif;

  /* ---------- LAYOUT ---------- */
  --content-width: 1180px;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --nav-height: 45px;                        /* ← nav bar height. Was 84px — turn this down/up to taste */

  /* ---------- MOTION ---------- */
  --ease-editorial: cubic-bezier(.22, .61, .36, 1);
  --dur-med: .6s;
  --dur-slow: 1.1s;

  /* ---------- TUNABLE: paper grain & floral motif ----------
     --texture-opacity : strength of the paper grain overlay (0–1)
     --corner-rest      : corner-motif opacity when NOT embossed (flat)
     --corner-active     : corner-motif opacity when embossed (pressed in) */
  --texture-opacity: 0.5;
  --corner-rest: 0.45;
  --corner-active: 1;
}

/* ==================================================================
   RESET / BASE
================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-weight: 500; margin: 0; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { list-style: none; margin: 0; padding: 0; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  background: var(--ink);
  color: var(--bg);
  padding: 0.75em 1.25em;
  z-index: 300;
  font-family: var(--font-serif);
  font-size: 0.85rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

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

/* Paper grain — the BOTTOM layer of the page. No flat body colour sits
   under it anymore, so this multiplies against plain white and shows
   its own natural, untinted tone rather than being dyed --bg. Negative
   z-index keeps it below every normal-flow element (nav, hero,
   sections). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url('../assets/img/paper-texture.jpg');
  background-size: 480px;
  opacity: var(--texture-opacity);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: -1;
}

/* The nav is a fixed overlay, not part of the document flow — it sits
   ON TOP of whatever is underneath it rather than pushing it down.
   That means .page-content itself has NO top padding: the home page's
   hero deliberately starts at y:0 and runs under the nav. Pages that
   DON'T want their content hidden behind the nav (the stub pages
   below) add their own clearance via .stub's padding-top. */


/* Shared page wrapper — every page uses this so corner motifs (when
   present) anchor to the page rather than the viewport. */
.page-frame { position: relative; }

/* ==================================================================
   PAGE-CONTENT TRANSITION — router.js toggles these on #main during
   a route swap: brief fade-out, fragment swap, fade-in.
================================================================== */
.page-content { opacity: 1; transition: opacity .15s ease; }
.page-content.is-leaving { opacity: 0; }
.page-content.is-entering { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .page-content { transition: none; }
}

/* Placeholder-page helper — used by CV / Projects / Contact / 404
   until they get real content. Clears the fixed nav itself (padding,
   not the page wrapper), since — unlike the home page's hero — these
   shouldn't run under the nav. */
.stub {
  min-height: 100svh;
  padding-top: var(--nav-height);
  box-sizing: border-box;
}

/* ==================================================================
   TYPE UTILITIES
================================================================== */
.section__eyebrow {
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--burgundy);
  margin: 0 0 1.25rem;
}
.section__title {
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 500;
  line-height: 1.15;
  max-width: 18ch;
  margin-bottom: 1.75rem;
  letter-spacing: -0.01em;
}
.section__title em { font-style: italic; color: var(--burgundy); }

/* ==================================================================
   NAVIGATION — fixed, opaque, present at all times on every page.
================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-height);
  background-color: #fff;   /* neutral backing only, so the texture below reads untinted but the nav stays opaque while scrolling */
  border-bottom: 1px solid var(--line);
}
/* Nav grain lives on its own layer (not blended straight onto
   .site-header) so its strength follows --texture-opacity exactly
   like the page grain does, instead of being locked at full force. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url('../assets/img/paper-texture.jpg');
  background-size: 480px;
  background-blend-mode: multiply;
  opacity: var(--texture-opacity);
  pointer-events: none;
}
.nav {
  max-width: none;
  width: 100%;
  height: var(--nav-height);
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.nav__cluster { display: flex; gap: 2rem; }
.nav__cluster--left { justify-self: start; }
.nav__cluster--right { justify-self: end; }
.nav__link {
  font-size: 0.8rem;              /* ← CV / Projects / Interests / Contact text size. Was 0.85rem */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  padding-bottom: 3px;
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--burgundy);
  transition: right var(--dur-med) var(--ease-editorial);
}
.nav__link:hover::after, .nav__link:focus-visible::after { right: 0; }
.nav__link.active::after { right: 0; }
.mobile-nav__link.active { color: var(--burgundy); }
.nav__mark {
  justify-self: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.nav__toggle {
  display: none;
  justify-self: end;
  background: none;
  border: 0;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  padding: 0.5rem;
}
.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--bg);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.mobile-nav[data-open="true"] { display: flex; }
.mobile-nav__link {
  font-size: 1.4rem;
  padding: 1rem var(--gutter);
  border-bottom: 1px solid var(--line);
}
@media (max-width: 780px) {
  .nav { grid-template-columns: auto 1fr auto; }
  .nav__cluster { display: none; }
  .nav__mark { justify-self: start; font-size: 1.1rem; letter-spacing: 0.1em; }
  .nav__toggle { display: block; }
}

/* ==================================================================
   FLORAL CORNER-MOTIF SYSTEM
   Rules only — NOT currently placed on any page. The markup (the
   .corner-motif divs + the per-page emboss <svg> filter defs) has
   been pulled out of every page for now, so nothing renders. Once
   the stroke-colour approach is sorted, drop the markup back into a
   page and this still knows how to style it. --corner-rest /
   --corner-active above control opacity; the relief itself comes
   from the #embossHighlight / #embossShadow SVG filters that used
   to live at the bottom of each page's <body>.
================================================================== */
.corner-motif {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  width: clamp(150px, 20vw, 260px);
  height: clamp(150px, 20vw, 260px);
}
.corner-motif--tl { top: 1rem; left: 0; }
.corner-motif--br {
  right: 0; bottom: 0;
  transform: scaleX(-1) scaleY(-1); /* reuse the sprig, flipped both ways */
}
.corner-motif img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: var(--corner-rest);
  transition: opacity var(--dur-slow) var(--ease-editorial);
}
.corner-motif img:nth-child(1) {
  filter: url(#embossHighlight);
  mix-blend-mode: screen;
}
.corner-motif img:nth-child(2) {
  filter: url(#embossShadow);
  mix-blend-mode: multiply;
}
.corner-motif.is-embossed img { opacity: var(--corner-active); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .nav__link::after, .corner-motif img { transition: none !important; }
  .corner-motif img { opacity: var(--corner-active); }
}