/* Themes × schemes. The site is styled with Tailwind utilities, so a theme
   re-maps the utilities in use under html[data-theme][data-scheme].
   - data-theme:  "default" | "editorial"   (?theme=…, remembered)
   - data-scheme: "light" | "dark"      (?scheme=auto|light|dark, remembered; auto = system)
   default/dark is the base stylesheet, so it needs no rules here.
   !important because the Tailwind CDN injects its stylesheet at runtime. */

/* ======================= material: glass | flat (html[data-material]) ======================= */
/* Base tokens so the flat material has colours in every theme (default dark
   is the stylesheet's own look, so it needs them spelled out here). */
:root { --paper: #0b0b0f; --paper-2: #141417; --paper-3: #27272a; --ink: #f4f4f5; --line: rgba(255, 255, 255, 0.08); }
html[data-material="flat"] .glass {
  background: var(--paper-2) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px rgba(0, 0, 0, 0.25) !important;
}
html[data-material="flat"] [data-site-header].glass { background: var(--paper) !important; box-shadow: none !important; }
html[data-material="flat"] [data-sheet].glass { background: var(--paper-2) !important; }

/* ======================= default · light ======================= */
html[data-theme="default"][data-scheme="light"] {
  --dot: #059669; --paper: #f6f6f7; --paper-2: #ffffff; --paper-3: #ececef; --ink: #141417; --line: rgba(0, 0, 0, 0.08);
  --chip: #d1fae5; --chip-fg: #065f46; color-scheme: light; background: #f6f6f7 !important;
}
html[data-theme="default"][data-scheme="light"] body { background: #f6f6f7 !important; color: #141417 !important; }
html[data-theme="default"][data-scheme="light"] .bg-zinc-950, html[data-theme="default"][data-scheme="light"] .bg-zinc-950\/60 { background-color: #f6f6f7 !important; }
html[data-theme="default"][data-scheme="light"] .bg-zinc-900 { background-color: #ffffff !important; }
html[data-theme="default"][data-scheme="light"] .bg-zinc-800, html[data-theme="default"][data-scheme="light"] .bg-zinc-800\/80, html[data-theme="default"][data-scheme="light"] .bg-zinc-800\/90,
html[data-theme="default"][data-scheme="light"] .hover\:bg-zinc-800:hover { background-color: #ececef !important; }
html[data-theme="default"][data-scheme="light"] .bg-zinc-700, html[data-theme="default"][data-scheme="light"] .hover\:bg-zinc-700:hover { background-color: #26262b !important; color: #fff !important; }
html[data-theme="default"][data-scheme="light"] .bg-white\/5 { background-color: rgba(0, 0, 0, 0.045) !important; }
html[data-theme="default"][data-scheme="light"] .bg-white\/10 { background-color: rgba(0, 0, 0, 0.07) !important; }
html[data-theme="default"][data-scheme="light"] .bg-white\/15 { background-color: rgba(0, 0, 0, 0.12) !important; }
html[data-theme="default"][data-scheme="light"] .bg-black\/25 { background-color: rgba(0, 0, 0, 0.035) !important; }
html[data-theme="default"][data-scheme="light"] .bg-black\/70 { background-color: rgba(246, 246, 247, 0.85) !important; }
html[data-theme="default"][data-scheme="light"] .border-zinc-800, html[data-theme="default"][data-scheme="light"] .border-zinc-900, html[data-theme="default"][data-scheme="light"] .border-white\/10 { border-color: rgba(0, 0, 0, 0.12) !important; }
html[data-theme="default"][data-scheme="light"] .text-zinc-100, html[data-theme="default"][data-scheme="light"] .text-zinc-200, html[data-theme="default"][data-scheme="light"] .text-zinc-300 { color: #141417 !important; }
html[data-theme="default"][data-scheme="light"] .text-zinc-400 { color: #55555e !important; }
html[data-theme="default"][data-scheme="light"] .text-zinc-500, html[data-theme="default"][data-scheme="light"] .text-zinc-600 { color: #7c7c86 !important; }
html[data-theme="default"][data-scheme="light"] .placeholder\:text-zinc-500::placeholder { color: #8b8b94 !important; }
html[data-theme="default"][data-scheme="light"] .hover\:text-white:hover { color: #141417 !important; }
html[data-theme="default"][data-scheme="light"] .bg-zinc-700 .text-zinc-300 { color: #fff !important; }
html[data-theme="default"][data-scheme="light"] .text-emerald-400, html[data-theme="default"][data-scheme="light"] .text-emerald-300, html[data-theme="default"][data-scheme="light"] .text-emerald-200,
html[data-theme="default"][data-scheme="light"] .hover\:text-emerald-300:hover { color: #047857 !important; }
html[data-theme="default"][data-scheme="light"] .bg-emerald-900\/60 { background-color: #d1fae5 !important; }
html[data-theme="default"][data-scheme="light"] .bg-amber-900\/60 { background-color: #fef3c7 !important; } html[data-theme="default"][data-scheme="light"] .text-amber-200 { color: #92400e !important; }
html[data-theme="default"][data-scheme="light"] .bg-indigo-900\/60 { background-color: #e0e7ff !important; } html[data-theme="default"][data-scheme="light"] .text-indigo-200 { color: #3730a3 !important; }
html[data-theme="default"][data-scheme="light"] .bg-fuchsia-900\/60 { background-color: #fae8ff !important; } html[data-theme="default"][data-scheme="light"] .text-fuchsia-200 { color: #86198f !important; }
html[data-theme="default"][data-scheme="light"] .bg-pink-900\/60 { background-color: #fce7f3 !important; } html[data-theme="default"][data-scheme="light"] .text-pink-200 { color: #9d174d !important; }
html[data-theme="default"][data-scheme="light"] .bg-purple-900\/60 { background-color: #ede9fe !important; } html[data-theme="default"][data-scheme="light"] .text-purple-200 { color: #5b21b6 !important; }
html[data-theme="default"][data-scheme="light"] [data-tile-id], html[data-theme="default"][data-scheme="light"] [data-event-card] { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.05); }
html[data-theme="default"][data-scheme="light"] .glass { color: #141417 !important; }
html[data-theme="default"][data-scheme="light"] [data-main-nav] a { color: #55555e !important; }
html[data-theme="default"][data-scheme="light"] [data-main-nav] a[data-active] { color: #141417 !important; }
html[data-theme="default"][data-scheme="light"] [data-lens] { background: rgba(0, 0, 0, 0.08) !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08) !important; }
html[data-theme="default"][data-scheme="light"] [data-dock-search], html[data-theme="default"][data-scheme="light"] [data-sheet-done], html[data-theme="default"][data-scheme="light"] [data-update-toast] { color: #141417 !important; }
html[data-theme="default"][data-scheme="light"] [data-sheet-done] { background: rgba(0, 0, 0, 0.08) !important; }
html[data-theme="default"][data-scheme="light"] [data-sheet-head]::before { background: rgba(0, 0, 0, 0.25) !important; }
html[data-theme="default"][data-scheme="light"] .leaflet-container { background: #e9e9ec !important; }
html[data-theme="default"][data-scheme="light"] .heleve-popup .bg-zinc-900 { background: #fff !important; }

/* ======================= editorial: literary magazine / art institution ======================= */
html[data-theme="editorial"], html[data-theme="custom"] {
  /* A text serif with character for titles (Newsreader: optical sizes, made
     for screens), a mono for metadata (dates, venues, tags — the catalogue
     register), a neutral sans for controls. The serif is only used ≥ 18px. */
  --display: "Newsreader", "Tiempos Text", "Georgia", serif;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --paper: #f6f4ee; --paper-2: #edeae2; --paper-3: #e3dfd5; --paper-rgb: 246, 244, 238;
  --ink: #161616; --ink-2: #55524c; --ink-3: #8c887f; --ink-rgb: 22, 22, 22;
  --line: rgba(22, 22, 22, 0.16); --accent: #1d3bd1; --dot: #1d3bd1; --glass-rgb: 255, 255, 255;
  --chip: rgba(22, 22, 22, 0.08); --chip-fg: #161616;
  color-scheme: light;
}
html[data-theme="editorial"][data-scheme="dark"], html[data-theme="custom"][data-scheme="dark"] {
  --paper: #131313; --paper-2: #1c1c1b; --paper-3: #272726; --paper-rgb: 19, 19, 19;
  --ink: #ecece6; --ink-2: #b6b3ab; --ink-3: #7e7b73; --ink-rgb: 236, 236, 230;
  --line: rgba(236, 236, 230, 0.16); --accent: #8fa6ff; --dot: #8fa6ff; --glass-rgb: 26, 26, 25;
  --chip: rgba(236, 236, 230, 0.1); --chip-fg: #ecece6;
  color-scheme: dark;
}
html[data-paper] { background: var(--paper) !important; color: var(--ink); }
html[data-paper] body { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--sans); }
html[data-paper] input, html[data-paper] select, html[data-paper] button { font-family: var(--sans); }

/* surfaces */
html[data-paper] .bg-zinc-950, html[data-paper] .bg-zinc-950\/60 { background-color: var(--paper) !important; }
html[data-paper] .bg-zinc-900 { background-color: var(--paper-2) !important; }
html[data-paper] .bg-zinc-800, html[data-paper] .bg-zinc-800\/80, html[data-paper] .bg-zinc-800\/90,
html[data-paper] .hover\:bg-zinc-800:hover { background-color: var(--paper-3) !important; }
html[data-paper] .bg-zinc-700, html[data-paper] .hover\:bg-zinc-700:hover { background-color: var(--ink) !important; color: var(--paper) !important; }
html[data-paper] .bg-white\/5 { background-color: rgba(var(--ink-rgb), 0.045) !important; }
html[data-paper] .bg-white\/10 { background-color: rgba(var(--ink-rgb), 0.07) !important; }
html[data-paper] .bg-white\/15 { background-color: rgba(var(--ink-rgb), 0.12) !important; }
html[data-paper] .bg-black\/25 { background-color: rgba(var(--ink-rgb), 0.035) !important; }
html[data-paper] .bg-black\/70 { background-color: rgba(var(--paper-rgb), 0.82) !important; }
html[data-paper] .border-zinc-800, html[data-paper] .border-zinc-900, html[data-paper] .border-white\/10 { border-color: var(--line) !important; }

/* text */
html[data-paper] .text-zinc-100, html[data-paper] .text-zinc-200, html[data-paper] .text-zinc-300 { color: var(--ink) !important; }
html[data-paper] .text-zinc-400 { color: var(--ink-2) !important; }
html[data-paper] .text-zinc-500, html[data-paper] .text-zinc-600 { color: var(--ink-3) !important; }
html[data-paper] .placeholder\:text-zinc-500::placeholder { color: var(--ink-3) !important; }
html[data-paper] .text-emerald-200, html[data-paper] .text-emerald-300, html[data-paper] .text-emerald-400,
html[data-paper] .hover\:text-emerald-300:hover { color: var(--accent) !important; }
html[data-paper] .hover\:text-white:hover { color: var(--ink) !important; }
html[data-paper] .bg-zinc-700 .text-zinc-300, html[data-paper] .bg-zinc-700.text-zinc-300, html[data-paper] .bg-zinc-700.text-white { color: var(--paper) !important; }

/* selection & tags: no coloured fills — ink on paper, hairlines, small caps */
html[data-paper] .bg-emerald-700, html[data-paper] .peer:checked ~ .peer-checked\:bg-emerald-700,
html[data-paper] .hover\:bg-emerald-800:hover { background-color: var(--ink) !important; color: var(--paper) !important; }
html[data-paper] .bg-emerald-900\/60 { background-color: transparent !important; color: var(--accent) !important; box-shadow: inset 0 0 0 1px var(--accent); }
html[data-paper] .bg-amber-900\/60, html[data-paper] .bg-indigo-900\/60, html[data-paper] .bg-fuchsia-900\/60,
html[data-paper] .bg-pink-900\/60, html[data-paper] .bg-purple-900\/60 {
  background-color: transparent !important; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2) !important;
}
html[data-paper] .text-amber-200, html[data-paper] .text-indigo-200, html[data-paper] .text-fuchsia-200,
html[data-paper] .text-pink-200, html[data-paper] .text-purple-200 { color: var(--ink-2) !important; }
html[data-paper] .hover\:bg-pink-800:hover { background-color: var(--ink) !important; color: var(--paper) !important; }
html[data-paper] .accent-emerald-500 { accent-color: var(--ink) !important; }
html[data-paper] .ring-emerald-500 { --tw-ring-color: var(--ink) !important; }

/* shape: square. Pills in the chrome (nav, dock, chips) stay round. */
html[data-paper] .rounded, html[data-paper] .rounded-lg, html[data-paper] .rounded-xl,
html[data-paper] .rounded-2xl, html[data-paper] .rounded-md { border-radius: var(--radius, 0px) !important; }
html[data-paper] [data-tile-id], html[data-paper] [data-event-card] {
  background: transparent !important; box-shadow: inset 0 0 0 1px var(--line);
}
html[data-paper] [data-tile-id]:hover { background: rgba(var(--ink-rgb), 0.03) !important; }
html[data-paper] [data-tile-id] .bg-zinc-800 { background-color: var(--paper-2) !important; }  /* image box */

/* type */
html[data-paper] h1 {
  font-family: var(--display) !important; font-optical-sizing: auto; font-style: var(--wordmark-style, italic);
  text-transform: var(--wordmark-transform, none); font-weight: var(--wordmark-weight, 500) !important;
  letter-spacing: var(--wordmark-tracking, 0) !important; font-size: 1.7rem !important; line-height: 1;
}
html[data-paper] [data-tile-id] .font-medium, html[data-paper] [data-event-card] .font-medium,
html[data-paper] #modal .font-medium, html[data-paper] #modal h2, html[data-paper] .heleve-popup .font-medium,
html[data-paper] main h2, html[data-paper] main h3 {
  font-family: var(--display) !important; font-optical-sizing: auto; font-weight: 500 !important;
  font-size: 1.2em; line-height: 1.12 !important; margin-top: 0.3em;
}
html[data-paper] [data-tile-id] .text-\[11px\].text-zinc-400, html[data-paper] [data-tile-id] .text-\[10px\].text-zinc-500,
html[data-paper] [data-event-card] .text-xs.text-zinc-400, html[data-paper] .uppercase {
  font-family: var(--mono) !important; text-transform: var(--meta-transform, uppercase); letter-spacing: 0.08em !important; font-size: 10px !important; font-weight: 500;
}
html[data-paper] [data-tile-id] > div:last-child, html[data-paper] [data-event-card] { padding: 14px !important; }
/* chips and tags square; the view switcher in the page header becomes a hairline box */
html[data-paper] label > span.rounded-full { border-radius: var(--radius, 0px) !important; }
html[data-paper] [data-site-header] [data-main-nav] { border-radius: var(--radius, 0px) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--line); }
html[data-paper] [data-site-header] [data-main-nav] a { border-radius: var(--radius, 0px) !important; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
html[data-paper] summary, html[data-paper] label.uppercase { color: var(--ink-2) !important; }

/* glass → frosted paper; dock ink */
html[data-paper] .glass {
  background: rgba(var(--glass-rgb), 0.7) !important; color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.12), 0 10px 30px rgba(0, 0, 0, 0.12) !important;
}
html[data-paper] [data-main-nav] a { color: var(--ink-2) !important; }
html[data-paper] [data-main-nav] a[data-active] { color: var(--ink) !important; }
html[data-paper] [data-lens] { background: rgba(var(--ink-rgb), 0.08) !important; box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.1) !important; }
html[data-paper] [data-dock-search], html[data-paper] [data-sheet-done], html[data-paper] [data-update-toast] { color: var(--ink) !important; }
html[data-paper] [data-sheet-done] { background: rgba(var(--ink-rgb), 0.08) !important; }
html[data-paper] [data-sheet-head]::before { background: rgba(var(--ink-rgb), 0.25) !important; }
html[data-paper] [data-sheet] input[name="q"]:focus { outline-color: var(--ink) !important; }
html[data-paper] .leaflet-container { background: var(--paper-2) !important; }
html[data-paper] .heleve-popup .bg-zinc-900 { background: var(--paper-2) !important; }

/* editorial chrome: the dock and pills lose the iOS roundness — a flat bar
   with a hairline, mono labels, the selection as an outlined box. Calendar
   cells and the Month/Week switch go square too. */
html[data-paper] [data-main-nav], html[data-paper] [data-dock-search] { border-radius: var(--radius-dock, 12px) !important; }
html[data-paper] [data-main-nav] a { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
html[data-paper] [data-main-nav] a svg { stroke-width: 1.6; }
html[data-paper] [data-lens] { border-radius: calc(var(--radius-dock, 12px) - 4px) !important; background: transparent !important; box-shadow: inset 0 0 0 1px var(--ink) !important; }
html[data-paper] [data-site-header] .rounded-full, html[data-paper] main .rounded-full, html[data-paper] [data-appearance-menu] .rounded-full,
html[data-paper] #lang-toggle, html[data-paper] [data-scheme-toggle] { border-radius: var(--radius, 0px) !important; }
html[data-paper] [data-site-header] .bg-zinc-900 { background: transparent !important; box-shadow: inset 0 0 0 1px var(--line); }
html[data-paper] main .bg-zinc-900.rounded-full, html[data-paper] main .inline-flex.bg-zinc-900 { background: transparent !important; box-shadow: inset 0 0 0 1px var(--line); }
html[data-paper] main .bg-zinc-900 { background-color: transparent !important; box-shadow: inset 0 0 0 1px var(--line); }
html[data-paper] .ring-emerald-500 { --tw-ring-color: var(--accent) !important; }

/* ======================= appearance picker (About) ======================= */
[data-appearance] button[aria-pressed="true"] { background: #047857; color: #fff; }
html[data-paper] [data-appearance] button[aria-pressed="true"] { background: var(--ink) !important; color: var(--paper) !important; }