/* src/theme-tokens.css */
/*
  UXPIN THEME TOKENS - integrated with the Wire theme editor.
  This file is the single source of truth for the design: every color, font,
  radius and shadow lives here as a CSS variable.
  KEEP THE STRUCTURE: exactly one "html:root:not(.dark)" block (light scheme)
  and one "html:root.dark" block (dark scheme), one "--token: value;" per line.
  Change VALUES or add/remove token lines - never rename or merge the blocks.
  Tailwind utilities read these through tailwind.config.js (bg-bg, text-text,
  bg-primary, font-display, ...), so editing a token restyles the whole page.
*/
html:root:not(.dark) {
  --color-bg: #f7f0e4;
  --color-surface: #efe4d2;
  --color-text: #2b1d13;
  --color-muted: #7b6553;
  --color-primary: #a3421b;
  --color-primary-contrast: #fbf5ea;
  --color-accent: #b8801f;
  --color-danger: #a51f13;
  --color-border: #dccfb7;
  --display-font: "Fraunces", Georgia, "Times New Roman", serif;
  --body-font: "Source Serif 4", Georgia, serif;
  --mono-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0px 1px 2px 0px rgba(43, 29, 19, 0.08);
  --shadow-md: 0px 18px 40px -24px rgba(43, 29, 19, 0.35);
  --shadow-press: 4px 4px 0px 0px rgba(43, 29, 19, 0.9);
  --color-scrim: rgb(23 17 13 / 0.66);
  --color-ink-soft: rgb(43 29 19 / 0.07);
  --color-ink-rule: rgb(43 29 19 / 0.16);
  --color-accent-soft: rgb(184 128 31 / 0.16);
  --color-paper-veil: rgb(247 240 228 / 0.94);
  --grain-strength: 0.07;
  --color-film: #17110d;
  --color-film-ink: #f7f0e4;
  --color-film-muted: #b6a48f;
  --color-film-accent: #dda04a;
  --color-film-veil: rgb(17 12 8 / 0.95);
  --color-film-veil-mid: rgb(17 12 8 / 0.62);
  --color-film-rule: rgb(247 240 228 / 0.16);
  --color-film-rule-strong: rgb(247 240 228 / 0.45);
}
html:root.dark {
  --color-bg: #14100c;
  --color-surface: #1e1813;
  --color-text: #f3e9db;
  --color-muted: #a89479;
  --color-primary: #e08a4d;
  --color-primary-contrast: #14100c;
  --color-accent: #d9a24a;
  --color-danger: #f0897c;
  --color-border: #342a20;
  --display-font: "Fraunces", Georgia, "Times New Roman", serif;
  --body-font: "Source Serif 4", Georgia, serif;
  --mono-font: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 10px;
  --shadow-sm: 0px 1px 2px 0px rgba(0, 0, 0, 0.45);
  --shadow-md: 0px 18px 40px -24px rgba(0, 0, 0, 0.7);
  --shadow-press: 4px 4px 0px 0px rgba(0, 0, 0, 0.7);
  --color-scrim: rgb(8 6 4 / 0.72);
  --color-ink-soft: rgb(243 233 219 / 0.06);
  --color-ink-rule: rgb(243 233 219 / 0.18);
  --color-accent-soft: rgb(217 162 74 / 0.18);
  --color-paper-veil: rgb(20 16 12 / 0.94);
  --grain-strength: 0.06;
  --color-film: #17110d;
  --color-film-ink: #f7f0e4;
  --color-film-muted: #b6a48f;
  --color-film-accent: #dda04a;
  --color-film-veil: rgb(17 12 8 / 0.95);
  --color-film-veil-mid: rgb(17 12 8 / 0.62);
  --color-film-rule: rgb(247 240 228 / 0.16);
  --color-film-rule-strong: rgb(247 240 228 / 0.45);
}


/* src/styles.css */
/*
  Custom CSS beyond Tailwind utilities: keyframes, pseudo-elements, complex
  selectors. Plain CSS only - @apply/@tailwind are not processed here.
  Colors and fonts must reference the tokens: var(--color-primary), etc.
*/

/* Native controls (the date input's calendar icon) follow the scheme. */
html:root:not(.dark) { color-scheme: light; }
html:root.dark { color-scheme: dark; }

/* No CSS scroll-behavior here on purpose: Lenis animates anchor jumps itself,
   and native smooth scrolling on top of it fights for the same scroll. */
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }

/* Fraunces reads better with its optical-size axis wound up on display sizes. */
.font-display { font-variation-settings: "SOFT" 40, "WONK" 1; }

/* ------------------------------------------------------------------ *
 * grain-paper: turbulence noise over the paper ground, drifting slowly on
 * transform only. Sits on the first paper section under the film hero.
 * ------------------------------------------------------------------ */
.grain-layer {
  position: absolute;
  inset: -25%;
  pointer-events: none;
  opacity: var(--grain-strength);
  mix-blend-mode: multiply;
  background-image: 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='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
  animation: grain-drift 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes grain-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(3%, 2.5%, 0); }
}
@media (prefers-reduced-motion: reduce) { .grain-layer { animation: none; } }

/* Hairline halftone rule used to close chapters. */
.rule-dotted {
  height: 1px;
  background-image: radial-gradient(var(--color-ink-rule) 1px, transparent 1px);
  background-size: 6px 1px;
}

/* ------------------------------------------------------------------ *
 * Header: NO background at all while it floats over the film hero, only
 * light type straight on the footage. The paper layer fades in once the
 * hero has scrolled past.
 * .is-over-hero ships in the markup so there is nothing to flash: the bar
 * is transparent from the first painted frame, before JS runs.
 *
 * FIXED, not sticky: a sticky bar occupies a row of its own at the top of
 * the flow, which pushed the hero down and left the paper body background
 * showing through the transparent bar. Fixed takes it out of flow so the
 * footage runs underneath it, edge to edge, from the first pixel.
 * ------------------------------------------------------------------ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

/* The bar no longer occupies space, so anchor jumps have to clear it. */
main [id] { scroll-margin-top: 5.5rem; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--color-paper-veil);
  border-bottom: 1px solid var(--color-ink-rule);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.site-header { color: var(--color-text); }
.nav-link { color: var(--color-muted); }
.nav-link:hover, .nav-link:focus-visible { color: var(--color-text); }
.wordmark-note { color: var(--color-muted); }

.site-header.is-over-hero::before { opacity: 0; }
/* An open mobile panel puts paper back behind the bar, so the bar comes back
   to ink even while it is over the hero. */
.site-header.is-over-hero.is-menu-open::before { opacity: 1; }

.site-header.is-over-hero:not(.is-menu-open) { color: var(--color-film-ink); }
.site-header.is-over-hero:not(.is-menu-open) .nav-link,
.site-header.is-over-hero:not(.is-menu-open) .wordmark-note { color: var(--color-film-muted); }
.site-header.is-over-hero:not(.is-menu-open) .nav-link:hover,
.site-header.is-over-hero:not(.is-menu-open) .nav-link:focus-visible { color: var(--color-film-ink); }
.site-header.is-over-hero:not(.is-menu-open) .nav-link::after { background-color: var(--color-film-accent); }
.site-header.is-over-hero:not(.is-menu-open) .btn-ghost {
  color: var(--color-film-ink);
  border-color: var(--color-film-rule-strong);
}
.site-header.is-over-hero:not(.is-menu-open) .btn-ghost:hover { background-color: transparent; }
.site-header.is-over-hero:not(.is-menu-open) .btn-primary { box-shadow: none; }

.nav-menu { display: none; }
/* The panel hangs off the container's padding box, so negative insets of the
   container gutter make it bleed to the viewport edges while its own padding
   keeps the links lined up with the page content. */
.nav-menu.is-open {
  display: block;
  position: absolute;
  left: -1.5rem;
  right: -1.5rem;
  top: 100%;
  padding: 0.5rem 1.5rem 1.5rem;
  background-color: var(--color-paper-veil);
  border-bottom: 1px solid var(--color-ink-rule);
}
@media (min-width: 768px) {
  .nav-menu, .nav-menu.is-open {
    display: flex;
    align-items: center;
    gap: 2rem;
    position: static;
    inset: auto;
    padding: 0;
    background: none;
    border: 0;
  }
}
.nav-link { position: relative; display: flex; align-items: center; min-height: 44px; }
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.55rem;
  width: 100%;
  height: 1px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}
.nav-link:hover::after, .nav-link:focus-visible::after { transform: scaleX(1); }

/* ------------------------------------------------------------------ *
 * Buttons: letterpress blocks that press into their own shadow.
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 1.6rem;
  font-family: var(--mono-font);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid var(--color-text);
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary {
  color: var(--color-primary-contrast);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-press);
}
.btn-ghost { color: var(--color-text); background-color: transparent; }
.btn-ghost:hover { background-color: var(--color-ink-soft); }
.btn-primary:hover, .btn-primary:focus-visible {
  transform: translate3d(4px, 4px, 0);
  box-shadow: none;
}
.btn:disabled { opacity: 0.45; box-shadow: none; transform: none; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }

/* ------------------------------------------------------------------ *
 * The hero: the scroll-driven grinder scrub.
 * DEFAULT (no JS, reduced motion): a plain 16:9 figure with the headline
 * and all four captions readable one under another. main.js adds
 * .is-scrubbing to switch into the pinned, scroll-driven mode.
 * ------------------------------------------------------------------ */
.scrub-viewport { position: relative; }
.scrub-video { display: block; width: 100%; height: auto; background-color: var(--color-film); border-radius: var(--radius-md); }
.scrub-veil, .scrub-meter { display: none; }
.scrub-content { padding-top: 2.5rem; padding-bottom: 4rem; }
.scrub-captions { display: grid; gap: 2.25rem; }
/* Two columns only in the JS-off fallback. Under prefers-reduced-motion the
   captions stay in one stack, one under another, next to the static frame. */
@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .scrub-captions { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 3rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .scrub-stage.is-scrubbing { height: 340vh; height: 340svh; }
  .scrub-stage.is-scrubbing .scrub-viewport {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .scrub-stage.is-scrubbing .scrub-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 0;
  }
  /* Contrast comes from a gradient on the text side, not from dimming the
     whole frame: the footage stays as bright as it was shot. */
  .scrub-stage.is-scrubbing .scrub-veil {
    display: block;
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
      to right,
      var(--color-film-veil) 0%,
      var(--color-film-veil-mid) 40%,
      transparent 74%
    );
  }
  .scrub-stage.is-scrubbing .scrub-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 4.5rem;
  }
  .scrub-stage.is-scrubbing .scrub-captions {
    display: block;
    position: relative;
    min-height: 11.5rem;
  }
  .scrub-stage.is-scrubbing .scrub-caption {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: none;
  }
  .scrub-stage.is-scrubbing .scrub-caption.is-active {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .scrub-stage.is-scrubbing .scrub-meter { display: flex; }

  /* Narrow viewports: the empty side of the frame is gone, so the same
     contrast gradient runs bottom to top instead. */
  @media (max-width: 767px) {
    .scrub-stage.is-scrubbing .scrub-veil {
      background-image: linear-gradient(
        to top,
        var(--color-film-veil) 0%,
        var(--color-film-veil-mid) 55%,
        transparent 92%
      );
    }
    .scrub-stage.is-scrubbing .scrub-content { justify-content: flex-end; }
    .scrub-stage.is-scrubbing .scrub-captions { min-height: 10rem; }
  }
}

.scrub-meter {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
}
.scrub-track { position: relative; flex: 1; height: 2px; background-color: var(--color-film-rule); }
.scrub-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left center;
  background-color: var(--color-film-accent);
}
.scrub-tick { position: absolute; top: -3px; width: 1px; height: 8px; background-color: var(--color-film-rule-strong); }

/* ------------------------------------------------------------------ *
 * Editorial furniture
 * ------------------------------------------------------------------ */
.pull-quote::before {
  content: "\201E";
  display: block;
  font-family: var(--display-font);
  font-size: 5rem;
  line-height: 0.6;
  color: var(--color-accent);
}
.spec-row { border-top: 1px solid var(--color-border); }
.spec-row:last-child { border-bottom: 1px solid var(--color-border); }

.faq-item { border-top: 1px solid var(--color-border); }
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--mono-font);
  color: var(--color-primary);
}
.faq-item[open] summary::after { content: "\2013"; }

/* ------------------------------------------------------------------ *
 * Subscription form
 * ------------------------------------------------------------------ */
.field-input {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--body-font);
  font-size: 1rem;
}
.field-input:focus-visible { border-color: var(--color-primary); }
.field-input[aria-invalid="true"] { border-color: var(--color-danger); }
.field-message { color: var(--color-danger); }

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

*,
::before,
::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

::before,
::after {
  --tw-content: '';
}

html,
:host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

abbr:where([title]) {
  text-decoration: underline dotted;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp,
pre {
  font-family: var(--mono-font);
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:-moz-focusring {
  outline: auto;
}

:-moz-ui-invalid {
  box-shadow: none;
}

progress {
  vertical-align: baseline;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

summary {
  display: list-item;
}

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
dialog {
  padding: 0;
}

textarea {
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

button,
[role="button"] {
  cursor: pointer;
}
:disabled {
  cursor: default;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}
@media (min-width: 1200px) {

  .container {
    max-width: 1200px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.invisible {
  visibility: hidden;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.left-\[20\%\] {
  left: 20%;
}
.left-\[45\%\] {
  left: 45%;
}
.left-\[72\%\] {
  left: 72%;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-7 {
  margin-top: 1.75rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.block {
  display: block;
}
.flex {
  display: flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.hidden {
  display: none;
}
.\!min-h-\[44px\] {
  min-height: 44px !important;
}
.\!w-11 {
  width: 2.75rem !important;
}
.w-16 {
  width: 4rem;
}
.w-full {
  width: 100%;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-\[22ch\] {
  max-width: 22ch;
}
.max-w-\[24ch\] {
  max-width: 24ch;
}
.max-w-\[26ch\] {
  max-width: 26ch;
}
.max-w-prose {
  max-width: 65ch;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize {
  resize: both;
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-center {
  align-items: center;
}
.items-baseline {
  align-items: baseline;
}
.justify-between {
  justify-content: space-between;
}
.gap-10 {
  gap: 2.5rem;
}
.gap-12 {
  gap: 3rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-6 {
  gap: 1.5rem;
}
.gap-x-5 {
  column-gap: 1.25rem;
}
.gap-x-6 {
  column-gap: 1.5rem;
}
.gap-y-1 {
  row-gap: 0.25rem;
}
.gap-y-3 {
  row-gap: 0.75rem;
}
.gap-y-8 {
  row-gap: 2rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.overflow-hidden {
  overflow: hidden;
}
.border {
  border-width: 1px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.\!border-bg {
  border-color: var(--color-bg) !important;
}
.border-border {
  border-color: var(--color-border);
}
.border-ink-rule {
  border-color: var(--color-ink-rule);
}
.border-text {
  border-color: var(--color-text);
}
.bg-bg {
  background-color: var(--color-bg);
}
.bg-film {
  background-color: var(--color-film);
}
.bg-surface {
  background-color: var(--color-surface);
}
.bg-text {
  background-color: var(--color-text);
}
.p-7 {
  padding: 1.75rem;
}
.\!px-0 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.\!px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-14 {
  padding-top: 3.5rem;
  padding-bottom: 3.5rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pt-14 {
  padding-top: 3.5rem;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.font-body {
  font-family: var(--body-font);
}
.font-display {
  font-family: var(--display-font);
}
.font-mono {
  font-family: var(--mono-font);
}
.\!text-\[0\.6875rem\] {
  font-size: 0.6875rem !important;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl {
  font-size: 3rem;
  line-height: 1;
}
.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}
.text-\[0\.625rem\] {
  font-size: 0.625rem;
}
.text-\[0\.6875rem\] {
  font-size: 0.6875rem;
}
.text-\[clamp\(1\.5rem\2c 3vw\2c 2\.25rem\)\] {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
}
.text-\[clamp\(1\.75rem\2c 3\.5vw\2c 2\.5rem\)\] {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}
.text-\[clamp\(2rem\2c 4\.5vw\2c 3\.25rem\)\] {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
}
.text-\[clamp\(2rem\2c 6vw\2c 4\.5rem\)\] {
  font-size: clamp(2rem, 6vw, 4.5rem);
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.leading-\[0\.96\] {
  line-height: 0.96;
}
.leading-\[1\.05\] {
  line-height: 1.05;
}
.leading-\[1\.25\] {
  line-height: 1.25;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.tracking-\[-0\.015em\] {
  letter-spacing: -0.015em;
}
.tracking-\[-0\.02em\] {
  letter-spacing: -0.02em;
}
.tracking-\[0\.12em\] {
  letter-spacing: 0.12em;
}
.tracking-\[0\.14em\] {
  letter-spacing: 0.14em;
}
.tracking-\[0\.16em\] {
  letter-spacing: 0.16em;
}
.tracking-\[0\.18em\] {
  letter-spacing: 0.18em;
}
.tracking-\[0\.22em\] {
  letter-spacing: 0.22em;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.\!text-bg {
  color: var(--color-bg) !important;
}
.text-accent-soft {
  color: var(--color-accent-soft);
}
.text-bg {
  color: var(--color-bg);
}
.text-film-accent {
  color: var(--color-film-accent);
}
.text-film-ink {
  color: var(--color-film-ink);
}
.text-film-muted {
  color: var(--color-film-muted);
}
.text-muted {
  color: var(--color-muted);
}
.text-primary {
  color: var(--color-primary);
}
.text-text {
  color: var(--color-text);
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-70 {
  opacity: 0.7;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-token-press {
  --tw-shadow: var(--shadow-press);
  --tw-shadow-colored: var(--shadow-press);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
  outline-style: solid;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.hover\:\!bg-bg:hover {
  background-color: var(--color-bg) !important;
}
.hover\:\!text-text:hover {
  color: var(--color-text) !important;
}
.hover\:text-primary:hover {
  color: var(--color-primary);
}
@media (min-width: 640px) {

  .sm\:block {
    display: block;
  }

  .sm\:inline {
    display: inline;
  }

  .sm\:w-auto {
    width: auto;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}
@media (min-width: 768px) {

  .md\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .md\:col-span-4 {
    grid-column: span 4 / span 4;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .md\:col-span-8 {
    grid-column: span 8 / span 8;
  }

  .md\:mt-20 {
    margin-top: 5rem;
  }

  .md\:mt-24 {
    margin-top: 6rem;
  }

  .md\:hidden {
    display: none;
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .md\:gap-10 {
    gap: 2.5rem;
  }

  .md\:gap-12 {
    gap: 3rem;
  }

  .md\:gap-14 {
    gap: 3.5rem;
  }

  .md\:gap-16 {
    gap: 4rem;
  }

  .md\:py-12 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .md\:py-28 {
    padding-top: 7rem;
    padding-bottom: 7rem;
  }

  .md\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}