/* Czech Island — base tokens, reset, typography. "Bohemian paper model" style. */
:root {
  --red: #D7141A;
  --red-d: #A70E13;
  --paper: #F7F3EC;
  --paper-2: #EFE8DC;
  --paper-3: #E5DCCB;
  --ink: #1C1A19;
  --ink-2: #4A4542;
  --ink-3: #7A736D;
  --blue: #11457E;
  --water: #CFDDE6;
  --gold: #C9A227;
  --wine: #7A1E2B;
  --line: 1.5px solid var(--ink);
  --shadow: 4px 4px 0 var(--ink);
  --shadow-sm: 2px 2px 0 var(--ink);
  --radius: 4px;
  --f-display: 'Fraunces', 'Bodoni Moda', Georgia, 'Noto Serif TC', serif;
  --f-body: 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --top-h: 60px;
  --peek: 74px;
  --ease-spring: cubic-bezier(.2, 1.35, .4, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .1 0 0 0 0 .09 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; max-width: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper) var(--paper-grain);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
html.js body { height: 100dvh; overflow: hidden; overscroll-behavior: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--red); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3 { line-height: 1.25; margin: 0; }
p { margin: 0 0 .8em; }
svg { display: block; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 2px; }

.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: var(--radius); }
.skip:focus { top: calc(8px + var(--safe-t)); color: var(--paper); }

html.no-js .js-only { display: none !important; }
.noscript { margin: 0; padding: 10px 16px; background: var(--ink); color: var(--paper); font-size: 14px; text-align: center; }

/* shared buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  background: var(--red); color: var(--paper); border: var(--line); border-radius: 999px;
  box-shadow: var(--shadow-sm); text-decoration: none; font-weight: 700; letter-spacing: .02em;
  transition: transform .18s var(--ease-spring), box-shadow .18s;
}
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { color: var(--paper); transform: translate(-1px, -2px); box-shadow: 3px 4px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.btn-ghost { background: var(--paper); color: var(--ink); }
.btn-ghost:hover { color: var(--red); }

/* Reduced motion: kill animations globally (individual components also check) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}