/* Napkin Proofs — main.css : tokens, base, layout, typography */

:root {
  /* palette — the channel's own ink-on-navy, carried verbatim */
  --bg: #131A24;
  --bg-deep: #0F151D;
  --panel: #18202C;
  --panel-2: #1D2735;
  --line: #242F3F;
  --ink: #F4F1EA;
  --muted: #939DAD;      /* nudged lighter than the app's #8A93A3 for 4.5:1 on --bg */
  --dim: #5A6472;
  --amber: #E1925A;
  --amber-bright: #EDA470;
  --amber-soft: rgba(225, 146, 90, .13);
  --sky: #7FA9C9;
  --green: #8FBF7F;

  --serif: "STIX Two Text", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", -apple-system, "Helvetica Neue", sans-serif;

  --maxw: 1080px;
  --gutter: clamp(1.2rem, 5vw, 3rem);
  --ease: cubic-bezier(.16, 1, .3, 1);   /* ease-out-expo-ish */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* the table under the napkin: a very slow radial + a faint paper grain */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% -10%, #182231 0%, var(--bg) 55%, var(--bg-deep) 100%);
}
body::after {   /* paper grain */
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--amber); text-decoration: none; }
a:hover { color: var(--amber-bright); }

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

/* -- typography ------------------------------------------------------- */

h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.12;
  letter-spacing: -.01em; text-wrap: balance; }

.display {
  font-size: clamp(2.9rem, 8vw, 5.4rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.display em { font-style: italic; color: var(--amber); }

h2.section-title {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  margin-bottom: .4rem;
}

.lede { font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: var(--ink);
  max-width: 60ch; text-wrap: pretty; }

.muted { color: var(--muted); }
p { text-wrap: pretty; }

/* mono-flavoured math label, set in the serif italic (no costume mono) */
.tag {
  font-family: var(--serif);
  font-style: italic;
  font-size: .95rem;
  color: var(--amber);
  letter-spacing: .01em;
}

/* -- layout ----------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto;
  padding-inline: var(--gutter); }

section { padding-block: clamp(4rem, 11vw, 8.5rem); position: relative; }
section + section { border-top: 1px solid var(--line); }

.hairline { color: var(--dim); }

/* accessible focus */
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px;
  border-radius: 3px; }

/* skip link */
.skip { position: absolute; left: -999px; top: .5rem;
  background: var(--amber); color: #11161d; padding: .5rem .9rem;
  border-radius: 8px; z-index: 100; font-weight: 600; }
.skip:focus { left: .8rem; }