/* Linen themes and type variants. Loaded last on every Linen page; linen-head.js sets
   html[data-theme] (dark by default), html[data-type] and html[lang] before the first frame. */

:root {
  --latin: "Fraunces", serif; --latin-vs: "opsz" 144, "SOFT" 0, "WONK" 1; --latin-ivs: "opsz" 144, "SOFT" 100, "WONK" 1; --latin-w: 900; --latin-iw: 300;
  --page: #f4efe7; --curtain: #f1ebe1;
  --ink-rgb: 11 11 10; --white-rgb: 251 250 247; --hi-rgb: 255 255 255; --shadow-rgb: 60 40 20;
  --before-bg: #e7e2da; --before-ink: #b9b2a6; --before-ink2: #9d968a;
  --display: "Fraunces", serif; --dvs: "opsz" 144, "SOFT" 0, "WONK" 1; --dvs-it: "opsz" 144, "SOFT" 100, "WONK" 1;
  --dw: 900; --diw: 300; --dis: italic;
  --read-on: var(--ink); --read-off: rgb(var(--ink-rgb) / 0.16);
  color-scheme: light;
}

/* dark, the default: warm near-black with the same beige light, the ink becomes the light colour */
html[data-theme="dark"] {
  --page: #0d0c0a; --curtain: #12110e;
  --white: #0e0d0b; --beige: #2a241d; --sand: #3a3127; --ink: #efe8dc;
  --ink-rgb: 239 232 220; --white-rgb: 14 13 11; --hi-rgb: 52 47 41; --shadow-rgb: 0 0 0;
  --soft: rgb(239 232 220 / 0.6); --faint: rgb(239 232 220 / 0.12);
  --glass: rgb(30 27 23 / 0.55); --edge: rgb(255 255 255 / 0.08);
  --before-bg: #1d1b18; --before-ink: #3c3832; --before-ink2: #55504a;
  color-scheme: dark;
}
html[data-theme="dark"] .bg-fallback { background: radial-gradient(80% 60% at 20% 20%, #1a1713, transparent), radial-gradient(70% 60% at 80% 70%, #241e17, transparent), #0d0c0a; }
html[data-theme="dark"] .glass { border-color: rgb(255 255 255 / 0.08); }
html[data-theme="dark"] .screen { box-shadow: 0 40px 100px -40px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.06); }
html[data-theme="dark"] .float img, html[data-theme="dark"] .thumbs button img { filter: none; }

/* Russian: Fraunces, Bodoni and Newsreader have no Cyrillic, so the display face becomes Playfair Display;
   the Latin brand words (the name, 4T, the wordmark) keep the variant face */

html[lang="ru"] { --display: "Playfair Display", serif; --dvs: normal; --dvs-it: normal; --dw: 900; --diw: 400; }


/* cookies */
.cookie { position: fixed; z-index: 66; left: 14px; bottom: 14px; width: min(380px, calc(100vw - 28px)); border-radius: 24px; padding: 22px; transform: translateY(30px); opacity: 0; visibility: hidden; }
.cookie h4 { font-family: var(--display); font-weight: var(--dw); font-variation-settings: var(--dvs); letter-spacing: -0.03em; font-size: 26px; line-height: 1; }
.cookie p { font-size: 14px; color: var(--soft); margin-top: 10px; line-height: 1.45; }
.cookie .row { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cookie .pill, .cookie .ghost { height: 42px; padding: 0 18px; font-size: 14px; }
.theme-btn { height: 36px; padding: 0 14px; border-radius: 36px; color: var(--soft); transition: color 0.3s; }
.theme-btn:hover { color: var(--ink); }
.lang-btn { height: 36px; padding: 0 12px; border-radius: 36px; color: var(--soft); font-size: 13px; transition: color 0.3s; }
.lang-btn:hover { color: var(--ink); }
.langs { position: fixed; z-index: 75; top: 74px; right: 24px; display: grid; grid-template-columns: repeat(2, auto); gap: 2px; padding: 8px; border-radius: 22px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.35s, transform 0.5s var(--ease), visibility 0.35s; }
.langs.open { opacity: 1; visibility: visible; transform: none; }
.langs button { height: 36px; padding: 0 14px; border-radius: 36px; text-align: left; font-size: 14px; transition: background-color 0.3s, color 0.3s; }
.langs button.on, .langs button:hover { background: var(--ink); color: var(--white); }
@media (max-width: 820px) { .theme-btn, .lang-btn { padding: 0 9px; } .langs { top: 70px; right: 12px; } }

/* the folded menu keeps only the mark and the main button */
@media (min-width: 821px) { .nav.small .lang-btn, .nav.small .theme-btn { display: none; } }

/* Bodoni Moda (the Atelier face) for the brand marks and the big numerals; Fraunces stays the main display face */
.nav .logo, .curtain .mk, .loader .mk, .word, .stat .v, .proc-num .digit, .step .num, .step .big, .weeks .v, .item .n, .card .tag b { font-family: "Bodoni Moda", serif !important; font-style: normal !important; font-variation-settings: "opsz" 16 !important; font-weight: 600 !important; letter-spacing: -0.02em !important; }
.nav .logo .status { font-family: "Geist", system-ui, sans-serif; font-weight: 400 !important; letter-spacing: -0.01em !important; white-space: nowrap; flex: none; }
@media (max-width: 1280px) { .nav .logo .status { display: none !important; } }

/* the cursor inverts what is under it: black on light, white on black (dark tiles, black letters, buttons) */
.cur { mix-blend-mode: difference; }
.cur-dot { background: #fff !important; }
.cur-lab { background: #fff !important; color: #000 !important; }

/* Lenis 1.3 base styles (from node_modules/lenis/dist/lenis.css) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}