/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --navy: #2a4254;            /* the logo's own ground */
  --pink: #f7f3ee;            /* the SG monogram */
  --paper: #f7f3ee;           /* the logo's white */
  /* the wood-table hero: its sunlit slats average rgb(122 80 52); the splash
     draws on a deeper cut of the same wood so the white logo reads */
  --wood: #2a4254;

  /* the logo on wood: its own colours, white line work and the pink monogram */
  --ink-line: var(--paper);
  --ink-insert: var(--paper);
  --ink-pink: var(--pink);

  /* the site palette (his pick, 2026-10-28, from his butterfly reference): two
     inks only, now his moodboard palette (2026-11-02): navy #2a4254 and cream #f7f3ee, with black #181818,
     taupe #7a5034 and oxblood #2a4254 (was crimson #2a4254 and cream #f7f3ee); the old names (navy, blush,
     ivory, surface) all point at one of the two so every rule follows */
  --ivory: #f7f3ee;
  --blush-card: #f7f3ee;
  --blush: #f7f3ee;
  --navy-ink: #2a4254;
  /* the ONE table colour: hero, collection table and menu (tools/build_table.py SURFACE) */
  --surface: #f7f3ee;
  /* older names kept so every rule reads the new palette */
  --white: var(--ivory);
  --ink: var(--navy-ink);
  --kraft-light: var(--blush-card);
  --stone: var(--blush);

  --gutter: 50px;            /* ONE page edge for every section (the unify rules, 2026-10-28) */
  --f-head: "Herbik", Georgia, serif;             /* the three faces he chose, 2026-11-02 */
  --f-body: "EB Garamond", Georgia, serif;
  --f-script: "1871 Dreamer", cursive;
  --ease: cubic-bezier(.625, .05, 0, 1);   /* the one motion curve (Ravi's "klaassens") */
  --gap: 80px;               /* between every two sections (was 120: "too much empty page", his call) */
  --logo-h: clamp(74px, 11vh, 118px);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ivory); }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--f-body); font-synthesis: none; }

/* ── nav: logo top-left, wordmark top-right ────────────────────────────────── */
.nav {
  position: absolute; inset: 0 0 auto 0; z-index: 10;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: calc(var(--gutter) * .75) var(--gutter);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-logo { display: block; height: var(--logo-h); }
.logo { display: block; height: 100%; width: auto; overflow: visible;
        filter: drop-shadow(0 1px 6px rgb(24 24 24 / .45)); }   /* white line work over sunlit wood */
.logo #line { fill: var(--ink-line); }
.logo #insert { fill: var(--ink-insert); }
.logo #pink { fill: var(--ink-pink); }

/* the three faces of the whole site (his, from Downloads, 2026-11-02): Herbik for
   the headings, EB Garamond for the text, 1871 Dreamer, a script, for the mark */
@font-face { font-family: "Herbik"; src: url("../fonts/new/herbik-regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Herbik"; font-style: italic; src: url("../fonts/new/herbik-italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("../fonts/new/eb-garamond-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; font-style: italic; src: url("../fonts/new/eb-garamond-400i.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; font-weight: 700; src: url("../fonts/new/eb-garamond-700.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "1871 Dreamer"; src: url("../fonts/new/dreamer-1871.woff2") format("woff2"); font-display: block; }
.wordmark {
  /* centred by its INK (1871 Dreamer, measured at 1920: the ink's centre sits
     .25em right of the box's, so the box moves .25em further left). `translate`,
     not transform: the splash animates transform and must not undo the centring */
  position: absolute; left: 50%; translate: calc(-50% - .25em) 0; top: calc(var(--gutter) * .45 + .76em);
  margin: 0;
  font: 400 clamp(30px, 2.3vw, 46px) / 1.25 var(--f-script);
  color: var(--paper);
  text-shadow: 0 1px 14px rgb(24 24 24 / .35);   /* keeps the hairlines legible over the picture */
  white-space: nowrap;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
/* The hero is exactly the picture's shape, so the picture is never cropped or
   zoomed: it is drawn at 100% of the hero, edge to edge.
     desktop  3840 x 1770   = his browser window, 1920 x 885, at 2x
     phone    1290 x 2796
   On his screen that is the whole screen. On a screen of another shape the
   hero keeps the picture's shape instead of the screen's. */
.hero {
  position: relative; overflow: hidden;
  aspect-ratio: 3840 / 1770;
  background: var(--navy-ink);   /* the logo's own ground: the splash draws on it */
}
.hero picture { display: contents; }
.hero-img { display: block; width: 100%; height: 100%; }
/* the scrollbar takes 15-17 px of his 1920 window, so the picture's own shape
   came out ~8 px short of the screen and a strip of the table colour showed
   under it. When the screen is at most 24 px taller than the picture's shape
   the hero takes the screen's height and the picture fills it (cover, ~1%
   off the sides); on screens of other shapes it keeps the picture's shape
   (his call: "the picture full instead of the line") */
@media (min-width: 768px) { .hero { aspect-ratio: auto; height: clamp(100vw * 1770 / 3840, 100svh, 100vw * 1770 / 3840 + 24px); } }
.hero-img { object-fit: cover; }
/* soft edge into the collection, the duriza trick: the hero's last 16% melts
   into the table colour, so the cut ribbon and magazine fade instead of ending */
.hero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 7%; pointer-events: none;   /* lighter, his call */
  background: linear-gradient(to bottom, rgb(122 80 52 / 0), rgb(122 80 52 / .55) 60%, rgb(247 243 238));   /* SURFACE, ends at exactly the collection's colour */
  transition: opacity .9s;
}
.intro .hero::after { opacity: 0; }
/* phones get their own 1290 / 2796 hero once that picture exists:
@media (max-aspect-ratio: 4/5) { .hero { aspect-ratio: 1290 / 2796; } } */

@media (max-width: 767px) {
  :root { --logo-h: clamp(64px, 9.5vh, 84px); }
  .wordmark { font-size: 31px; top: calc(var(--gutter) + .76em); }
}

/* ── splash (html.intro is set in <head> before first paint) ──────────────── */
.intro .hero-img, .intro .wordmark { opacity: 0; }
.intro .logo { visibility: hidden; }          /* js/splash.js places it, then shows it */
.logo .draw { fill: none; stroke-linecap: round; stroke-linejoin: round; }
/* fade off for now (his call, to judge the join without it) */
.hero::after { display: none; }

/* ── Menu button (top right) and the full-screen menu ───────────────────── */
.menu-btn {
  position: absolute; right: var(--gutter); top: calc(var(--gutter) * .75 + var(--logo-h) * .5); translate: 0 -50%;
  display: flex; align-items: center; gap: 12px; padding: 10px 0; background: none; border: 0; cursor: pointer;
  color: var(--paper); font: 500 14px / 1 var(--f-body); letter-spacing: .26em; text-transform: uppercase;
  text-shadow: 0 1px 12px rgb(24 24 24 / .35);
}
.menu-btn i { display: grid; gap: 6px; width: 26px; }
.menu-btn i::before, .menu-btn i::after { content: ""; height: 1.5px; background: currentColor; box-shadow: 0 1px 6px rgb(24 24 24 / .3); transition: transform .35s; }
.intro .menu-btn { opacity: 0; }
.menu-btn { transition: opacity .8s; }

.site-menu {
  position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr auto;
  padding: calc(var(--gutter) * .75) var(--gutter) var(--gutter);
  background: var(--navy-ink); color: var(--ivory);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), visibility 0s .7s;
}
.site-menu.open { clip-path: inset(0); visibility: visible; transition: clip-path .7s cubic-bezier(.76, 0, .24, 1); }
.site-menu-top { display: flex; justify-content: space-between; align-items: center; min-height: var(--logo-h); }
.site-menu-mark { font: 400 clamp(34px, 2.6vw, 50px) / 1.6 var(--f-script); color: var(--blush); padding: .4em 0 0; }
.site-menu-close { background: none; border: 0; color: inherit; cursor: pointer; font: 500 14px var(--f-body); letter-spacing: .26em; text-transform: uppercase; }
/* five big links, sized so all five always fit the screen's height; the rest small on the right */
.site-menu-body { align-self: center; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; padding-left: clamp(0px, 6vw, 120px); }
.site-menu nav { display: flex; flex-direction: column; }
.site-menu-main { gap: clamp(2px, .6vh, 10px); }
.site-menu-main a {
  width: max-content; color: inherit; text-decoration: none;
  font: 400 clamp(40px, min(6.4vw, (100svh - 400px) / 5.2), 120px) / 1.04 var(--f-head);
}
.site-menu-side { gap: 16px; padding-bottom: .6em; text-align: right; }
.site-menu-side a { color: inherit; text-decoration: none; font: 500 14px / 1 var(--f-body); letter-spacing: .26em; text-transform: uppercase; opacity: .8; }
.site-menu nav a { opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .6s cubic-bezier(.22, 1, .36, 1), color .2s; }
.site-menu nav a em { font-style: italic; }
.site-menu nav a:hover { color: var(--blush); }
.site-menu.open nav a { opacity: 1; transform: none; }
.site-menu.open .site-menu-side a { opacity: .8; }
.site-menu.open nav a:nth-child(1) { transition-delay: .30s; }
.site-menu.open nav a:nth-child(2) { transition-delay: .36s; }
.site-menu.open nav a:nth-child(3) { transition-delay: .42s; }
.site-menu.open nav a:nth-child(4) { transition-delay: .48s; }
.site-menu.open nav a:nth-child(5) { transition-delay: .54s; }
.site-menu-foot { display: flex; justify-content: space-between; gap: 20px; font: 400 15px var(--f-body); opacity: .75; }
.site-menu-foot a { color: inherit; }
body.menu-open { overflow: hidden; }
@media (max-width: 767px) {
  .menu-btn span { display: none; }
  .site-menu-foot { flex-direction: column; }
  .site-menu-body { grid-template-columns: 1fr; gap: 34px; padding-left: 0; }
  .site-menu-main a { font-size: clamp(34px, min(10.5vw, (100svh - 380px) / 5.4), 56px); }
  .site-menu-side { flex-direction: row; flex-wrap: wrap; gap: 14px 24px; text-align: left; padding-bottom: 0; }
  .site-menu-side a { font-size: 12px; letter-spacing: .2em; }
}
.site-menu-close:focus:not(:focus-visible) { outline: none; }

@media (max-width: 767px) { :root { --gutter: 16px; --gap: 48px; } }