/* mademelloware.com — shared layer
   Every page links this. Nothing here loads from anyone else: the fonts are
   self-hosted (Instrument Serif, SIL OFL; Source Serif 4, SIL OFL — the same
   file melloThought ships), so the privacy page can say so and mean it. */

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/instrument-serif.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/source-serif-4.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  color-scheme: dark;

  /* the studio — studio doc, BRAND (settled 10 Sep 2026) */
  --ground: #0a0a0a;
  --amber: #b5601f;          /* the mark's own mid-tone: rules, marks */
  --amber-accent: #d98a3d;   /* links, accents on dark */
  --amber-emph: #e8a656;     /* emphasis on dark */
  --warm: #d4cdc4;
  --muted: #857d76;          /* 4.9:1 on --ground */

  /* melloThought — its own amber and ink, from the app */
  --mt-ground: #0b0b0b;
  --mt-amber: #c8820a;
  --mt-ink: #e8dfd1;
  --mt-mute: rgba(232, 223, 209, .62);
  --mt-faint: rgba(232, 223, 209, .52);   /* ≥4.5:1 on the weave */

  --serif-studio: "Instrument Serif", Georgia, serif;
  --serif-app: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* the app's easing: eio, and the keyboard's bezier */
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-kb: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--warm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img, svg { display: block; }
a { color: inherit; }
::selection { background: rgba(181, 96, 31, .55); color: #f4ede4; }
:focus-visible { outline: 1px solid var(--amber-accent); outline-offset: 4px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── navigation is motion ─────────────────────────────────────────────
   Between pages the studio's mark and melloThought's Des are one element:
   the site performs the app's own handover (the splash's mark descending
   into Des, session 034) on the way in, and its reverse on the way out.
   Progressive: where cross-document transitions don't exist, pages cut. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
::view-transition-group(root) { animation-duration: .7s; animation-timing-function: var(--ease-io); }
::view-transition-group(mark) {
  animation-duration: 1.1s;
  animation-timing-function: var(--ease-io);
}
/* the mark fades through the middle of the travel; Des arrives inside it —
   handover(): fl = seg(p, .45, .65) */
::view-transition-old(mark) { animation: 1.1s var(--ease-io) both vt-mark-out; }
::view-transition-new(mark) { animation: 1.1s var(--ease-io) both vt-mark-in; }
::view-transition-old(mark), ::view-transition-new(mark) { height: 100%; object-fit: contain; }
@keyframes vt-mark-out { 0%, 45% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes vt-mark-in  { 0%, 45% { opacity: 0; } 65%, 100% { opacity: 1; } }