/*
 * Shared "paper desk" foundations — tokens, textures, and a few
 * stationery primitives (tape, paper, clip, marker). Each variant
 * layers its own layout and motion on top of this.
 */
@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=IBM+Plex+Mono:wght@400;500&family=Shantell+Sans:ital,wght@0,300..800;1,300..800&display=swap");

:root {
  /* desk + paper */
  --desk: #a8c8bb;
  --desk-deep: #8fb3a5;
  --paper: #f6f0e2;
  --paper-warm: #efe5cf;
  --paper-white: #fbf8f1;
  --card: #fdfbf6;

  /* inks */
  --ink: #2a2420;
  --ink-soft: #5b5149;
  --ink-faint: #8d8379;
  --pen-blue: #2f4f9e;
  --marker: #d9714a; /* orange marker */
  --marker-soft: #f2b89b;
  --highlight: #f7df6e;
  --rule: #b7c7e3;  /* ruled-line blue */
  --margin: #e58a8a; /* margin red */
  --leaf: #3f7a4e;

  /* stationery */
  --tape: rgba(240, 236, 214, 0.72);
  --tape-edge: rgba(180, 170, 140, 0.35);

  /* type */
  --font-hand: "Shantell Sans", "Comic Neue", "Bradley Hand", "Kaiti SC", cursive;
  --font-script: "Caveat", "Bradley Hand", "Kaiti SC", cursive;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* depth */
  --shadow-sheet: 0 1px 0 rgba(0,0,0,.04), 0 2px 4px rgba(40,50,45,.10), 0 14px 28px -12px rgba(30,45,40,.35);
  --shadow-lift: 0 2px 4px rgba(40,50,45,.12), 0 28px 50px -18px rgba(30,45,40,.45);

  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);

  /* grain textures (inline SVG turbulence) */
  --tex-paper: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .11 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --tex-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  --tex-linen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Cpath d='M0 0h6v1H0zM0 0v6h1V0z' fill='%23000' fill-opacity='.035'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--desk);
  background-image: var(--tex-paper), var(--tex-linen);
  color: var(--ink);
  font-family: var(--font-hand);
  font-variation-settings: "INFM" 40;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--highlight); color: var(--ink); }

/* ---------- stationery primitives ---------- */
.paper {
  position: relative;
  background-color: var(--paper);
  background-image: var(--tex-paper), var(--tex-fibre);
  box-shadow: var(--shadow-sheet);
  border-radius: 2px;
}
.paper--white { background-color: var(--paper-white); }
.paper--ruled {
  background-image:
    var(--tex-paper),
    linear-gradient(to right, transparent 3.2rem, var(--margin) 3.2rem, var(--margin) calc(3.2rem + 1px), transparent calc(3.2rem + 1px)),
    repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), var(--rule) calc(2rem - 1px) 2rem);
  background-position: 0 0, 0 0, 0 1.2rem;
}
.paper--grid {
  background-image:
    var(--tex-paper),
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}

.tape {
  position: absolute;
  width: 96px; height: 28px;
  background: var(--tape);
  border-left: 1px dashed var(--tape-edge);
  border-right: 1px dashed var(--tape-edge);
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  backdrop-filter: blur(1px);
  z-index: 3;
  pointer-events: none;
}

.marker-underline {
  background-image: linear-gradient(transparent 62%, var(--marker-soft) 62%, var(--marker-soft) 92%, transparent 92%);
  background-repeat: no-repeat;
}

.mono { font-family: var(--font-mono); font-size: .78em; letter-spacing: .02em; }
.script { font-family: var(--font-script); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2.5px dashed var(--pen-blue); outline-offset: 4px; border-radius: 4px; }

/* back-to-picker link shown on every variant */
.variant-back {
  position: fixed; left: 16px; bottom: 16px; z-index: 999;
  font-family: var(--font-mono); font-size: 12px; text-decoration: none;
  background: var(--paper-white); padding: 6px 10px; border-radius: 6px;
  border: 1.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.variant-back:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }

/* Pages add html.reduce when the visitor turns motion off. */
html.reduce *, html.reduce *::before, html.reduce *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }