@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree/Figtree-Regular.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2661, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree/Figtree-Regular-ext.woff") format("woff");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+02B0-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2100-2121, U+2123-214F, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree/Figtree-SemiBold.woff") format("woff");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2661, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree/Figtree-SemiBold-ext.woff") format("woff");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+02B0-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2100-2121, U+2123-214F, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree/Figtree-Bold.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2661, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree/Figtree-Bold-ext.woff") format("woff");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+02B0-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2100-2121, U+2123-214F, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
  font-family: "Gochi Hand";
  src: url("fonts/gochi_hand/GochiHand-Regular.woff") format("woff");
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2661, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Gochi Hand";
  src: url("fonts/gochi_hand/GochiHand-Regular-ext.woff") format("woff");
  font-display: swap;
  unicode-range: U+0100-0130, U+0132-0151, U+0154-024F, U+0259, U+02B0-02BA, U+02BD-02C5, U+02C7-02D9, U+02DB, U+02DD-02FF, U+0300-0303, U+0305-0307, U+0309-0328, U+032A-036F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2100-2121, U+2123-214F, U+2C60-2C7F, U+A720-A7FF, U+FB01-FB02;
}

@font-face {
  font-family: "Pangolin";
  src: url("fonts/pangolin/Pangolin-Regular.woff") format("woff");
  size-adjust: 90%;
  font-display: swap;
  unicode-range: U+0100-017F, U+0400-04FF;
}

@font-face {
  font-family: "DSEG7";
  src: url("fonts/dseg7/DSEG7Classic-Bold.woff") format("woff");
  font-weight: 700;
  font-display: block;
}

:root {
  --room-top: #4a4037;
  --room-mid: #2b2621;
  --room-bottom: #181513;
  --cream: #f1ebe0;
  --muted: #a29a8f;
  --chip: #24211e;
  --paper: #f7f3ec;
  --cream-bright: #f4efe6;
  --table-ink: #2b2622;
  --ink-soft: #4f463e;
  --label: #8a7f72;
  --print-white: #fbf8f2;
  --invite-paper: #f1eadd;
  --hand-ink: #262a3d;
  --developing: #b8c6c2;
  --ui: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Gochi Hand", "Pangolin", cursive;
  --digits: "DSEG7", ui-monospace, monospace;
  color-scheme: dark;

  --wall: linear-gradient(180deg, var(--room-top) 0%, var(--room-mid) 45%, var(--room-bottom) 100%);
  --mood-day: #f3e3c4;
  --mood-evening: #3e3b55;
  --mood-golden: #e0a15a;
  --muted-lit: #bdb4a8;
  --raised: #2b2824;
  --hairline-dark: rgba(241, 235, 224, 0.14);
  --sheet-chip: #e8e0d2;
  --tag: #f3ecdf;
  --index-card: #fbf6ea;
  --note-cream: #f7f1e3;
  --note-blush: #f3d9d9;
  --note-sky: #dce6ee;
  --kraft: #c29c72;
  --ink-muted: #6a5f53;
  --stamp-navy: #2b3a6e;
  --brick: #a8432c;
  --unexposed: #24292a;
  --develop-dark: #2d3327;
  --develop-tint: #5fa6bd;
  --orange: #f2793a;
  --led: #ff8a3d;
  --led-glow: rgba(255, 138, 61, 0.6);
  --tape-masking: rgba(239, 226, 196, 0.92);
  --label-tape-black: #1c1c1e;
  --label-tape-red: #b3342b;
  --label-tape-blue: #244f8f;
  --label-tape-ink: #f4f1ea;

  --fs-display: clamp(40px, 23.7px + 4.19vw, 84px);
  --fs-h1: clamp(32px, 23.1px + 2.29vw, 56px);
  --fs-h2: clamp(26px, 20.8px + 1.33vw, 40px);
  --fs-h3: clamp(20px, 18.5px + 0.38vw, 24px);
  --fs-lede: clamp(18px, 16.9px + 0.29vw, 21px);
  --fs-body: clamp(16px, 15.6px + 0.1vw, 17px);
  --fs-small: 14px;
  --fs-label: 12px;
  --fs-hand-l: clamp(28px, 23.5px + 1.14vw, 40px);
  --fs-hand-m: clamp(22px, 20.5px + 0.38vw, 26px);
  --fs-hand-s: 19px;
  --tracking-label: 1.6px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gutter: clamp(20px, 6.6px + 3.43vw, 56px);
  --section: clamp(64px, 40px + 6.1vw, 128px);
  --measure: 34ch;

  --r-print: 2px;
  --r-paper: 3px;
  --r-sheet: 10px;
  --r-button: 14px;
  --r-pill: 999px;
  --r-phone: 40px;

  --shadow-flat: 0 1px 1px rgba(30, 18, 8, 0.3), 0 3px 6px rgba(20, 12, 4, 0.22);
  --shadow-print: 0 1px 1.3px rgba(30, 18, 8, 0.32), 0 9px 16px rgba(20, 12, 4, 0.32);
  --shadow-lift: 0 2px 2px rgba(30, 18, 8, 0.24), 0 34px 46px rgba(20, 12, 4, 0.46), 0 8px 14px rgba(20, 12, 4, 0.22);
  --shadow-sheet: 0 4px 14px rgba(30, 18, 8, 0.4);
  --shadow-board: 0 18px 34px rgba(0, 0, 0, 0.55), 0 3px 6px rgba(0, 0, 0, 0.4);
  --shadow-hold: 0 3px 3px rgba(20, 10, 0, 0.45);

  --focus-wall: 0 0 0 2px var(--room-bottom), 0 0 0 4px var(--cream);
  --focus-paper: 0 0 0 2px var(--paper), 0 0 0 4px var(--hand-ink);

  --z-wall: 0;
  --z-board: 1;
  --z-item: 2;
  --z-hold: 3;
  --z-lifted: 4;
  --z-bar: 50;
  --z-sticky: 60;
  --z-menu: 80;
  --z-overlay: 90;

  --dur-press: 90ms;
  --dur-hover: 180ms;
  --dur-lift: 280ms;
  --dur-card: 420ms;
  --dur-roll: 480ms;
  --dur-land: 640ms;
  --dur-led: 700ms;
  --dur-mood: 900ms;
  --dur-swing: 2600ms;
  --dur-develop: 4000ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-land: cubic-bezier(0.22, 1.25, 0.36, 1);
  --ease-develop: cubic-bezier(0.3, 0, 0.2, 1);
  --press-scale: 0.95;
  --press-scale-shutter: 0.93;
  --lift-scale: 1.04;
  --swing-deg: 1.2deg;

  --tex-grain: url("/textures/grain-dark.webp");
  --tex-plaster: url("/textures/plaster-12.webp");
  --tex-tooth: url("/textures/tooth-10.webp");
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 0ms;
    --dur-lift: 0ms;
    --dur-card: 0ms;
    --dur-roll: 0ms;
    --dur-land: 0ms;
    --dur-led: 0ms;
    --dur-mood: 0ms;
    --dur-develop: 0ms;
    --swing-deg: 0deg;
    --lift-scale: 1;
  }
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.5;
  color: var(--cream);
  background: linear-gradient(180deg, var(--room-top) 0%, var(--room-mid) 45%, var(--room-bottom) 100%) fixed;
  background-color: var(--room-bottom);
}

a {
  color: inherit;
}

.page {
  max-width: 440px;
  margin: 0 auto;
  padding: 28px 20px 40px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.page.wide {
  max-width: 720px;
}

.wordmark {
  font-family: var(--hand);
  font-size: 28px;
  line-height: 1;
  text-decoration: none;
  color: var(--cream);
  align-self: flex-start;
}

.print {
  position: relative;
  width: min(66vw, 260px);
  aspect-ratio: 88 / 107;
  margin: 36px auto 32px;
  background: var(--print-white);
  border-radius: 6px;
  box-shadow: 0 4px 14px rgba(30, 18, 8, 0.45);
  transform: rotate(-3deg);
}

.print .picture {
  position: absolute;
  left: 5.1%;
  top: 5.6%;
  width: 89.8%;
  aspect-ratio: 1;
  background: var(--developing);
}

.print .name {
  position: absolute;
  left: 6.25%;
  top: 79.4%;
  width: 62.8%;
  height: 16.9%;
  display: flex;
  align-items: center;
  font-family: var(--hand);
  font-size: min(5.6vw, 22px);
  line-height: 1;
  color: var(--hand-ink);
  white-space: nowrap;
  overflow: hidden;
  transform: rotate(-1.5deg);
}

.kicker {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
}

h1 {
  margin: 6px 0 10px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.lede {
  margin: 0 0 24px;
  color: var(--cream);
  opacity: 0.86;
}

.buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 18px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--cream);
  background: var(--chip);
  border: 1px solid rgba(241, 235, 224, 0.14);
}

.button.primary {
  color: var(--table-ink);
  background: var(--paper);
  border-color: transparent;
}

.note {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--muted);
}

.sheet {
  margin-top: 28px;
  padding: 28px 24px;
  border-radius: 10px;
  background: var(--cream-bright);
  color: var(--table-ink);
  box-shadow: 0 4px 14px rgba(30, 18, 8, 0.4);
}

.sheet h1 {
  margin-top: 0;
}

.sheet h2 {
  margin: 28px 0 8px;
  font-size: 18px;
  font-weight: 600;
}

.sheet p,
.sheet li {
  color: var(--ink-soft);
}

.sheet .kicker {
  color: var(--label);
}

.sheet ol,
.sheet ul {
  padding-left: 22px;
}

.sheet .rules li {
  margin-bottom: 8px;
  font-family: var(--hand);
  font-size: 21px;
  line-height: 1.3;
  color: var(--hand-ink);
}

footer {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 14px;
  color: var(--muted);
}

footer a {
  color: var(--muted);
}