/* ══════════════════════════════════════════════
   utility.css — shared styles for utility pages
   privacy.html · 404.html · thanks.html (EN + CS)
   ══════════════════════════════════════════════ */

/* ── Self-hosted fonts ── */
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/bebas-neue-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/bebas-neue-v14-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/instrument-serif-v1-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap;
  src: url('/fonts/instrument-serif-v1-latin-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:300; font-display:swap;
  src: url('/fonts/dm-mono-v14-latin-300.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/dm-mono-v14-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Syne'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/syne-latin-ext-400-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Syne'; font-style:normal; font-weight:400; font-display:swap;
  src: url('/fonts/syne-v22-latin-regular.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Syne'; font-style:normal; font-weight:700; font-display:swap;
  src: url('/fonts/syne-latin-ext-700-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Syne'; font-style:normal; font-weight:700; font-display:swap;
  src: url('/fonts/syne-v22-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:'Syne'; font-style:normal; font-weight:800; font-display:swap;
  src: url('/fonts/syne-latin-ext-800-normal.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Syne'; font-style:normal; font-weight:800; font-display:swap;
  src: url('/fonts/syne-v22-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }


/* ── from privacy.html ── */
:root {
  --bg:#06090F; --panel:#0D1422; --edge:#1C2840;
  --text:#F5EBDA; --dim:#A89A82; --muted:#5C5345;
  --gold:#C8A951; --sand:#E0D4B8; --volt:#d63b3b;
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Syne', sans-serif; font-weight: 400;
  display: flex; flex-direction: column; min-height: 100vh;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 30% 20%, rgba(214,59,59,.08) 0%, transparent 50%);
  z-index: 0;
}

.top-bar { padding: 1.6rem 3rem; position: relative; z-index: 2; }
.top-mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem; letter-spacing: .14em;
  color: var(--text); text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.top-mark .pip { width: 5px; height: 5px; border-radius: 50%; background: var(--volt); }

main {
  flex: 1; padding: 3rem 3rem 5rem; position: relative; z-index: 1;
  max-width: 760px; margin: 0 auto; width: 100%;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--volt); font-weight: 700;
  margin-bottom: 1.5rem;
}
.eyebrow::before { content: ""; display: block; width: 1.5rem; height: 1px; background: var(--volt); }

h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  line-height: 1; letter-spacing: .02em;
  color: var(--text); margin-bottom: 2.5rem;
}
h1 em { font-family: 'Instrument Serif', serif; font-style: italic; font-weight: 400; color: var(--gold); }

h2 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.4rem; letter-spacing: .04em;
  color: var(--text); margin: 2.4rem 0 .8rem;
}

h3 {
  font-size: .9rem; font-weight: 700; letter-spacing: .02em;
  color: var(--text); margin: 1.4rem 0 .4rem;
}

p, li {
  font-size: .92rem; line-height: 1.75;
  color: var(--dim); margin-bottom: 1rem;
}

ul { padding-left: 1.4rem; margin-bottom: 1.2rem; }
li { margin-bottom: .4rem; }

a { color: var(--volt); text-decoration: none; transition: color .2s; }
a:hover { color: var(--text); }

strong { color: var(--text); font-weight: 700; }

.last-updated {
  display: inline-block;
  font-size: .55rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 2rem;
  padding: .35rem .8rem; border: 1px solid var(--edge);
}

.callout {
  background: var(--panel); border-left: 2px solid var(--volt);
  padding: 1.2rem 1.5rem; margin: 1.5rem 0; font-size: .88rem;
}
.callout strong { color: var(--text); }
.callout p:last-child { margin-bottom: 0; }

table.cookies {
  width: 100%; border-collapse: collapse;
  margin: 1rem 0 1.6rem; font-size: .85rem;
}
table.cookies th, table.cookies td {
  text-align: left; padding: .6rem .8rem;
  border-bottom: 1px solid var(--edge);
  vertical-align: top;
}
table.cookies th {
  font-size: .58rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--text); font-weight: 700;
  background: var(--panel);
}
table.cookies td { color: var(--dim); }
table.cookies code {
  font-family: 'DM Mono', monospace; font-size: .8rem;
  color: var(--volt);
}

.back-link {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 3rem;
  padding: .85rem 1.6rem;
  font-family: 'Syne', sans-serif;
  font-size: .65rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700;
  border: 1px solid var(--volt); color: var(--volt);
  transition: background .2s, color .2s;
}
.back-link:hover { background: var(--volt); color: var(--bg); }

footer {
  padding: 1.5rem 3rem; border-top: 1px solid var(--edge);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center;
  position: relative; z-index: 1;
}

@media (max-width: 600px) {
  .top-bar { padding: 1.3rem 1.5rem; }
  main { padding: 2rem 1.5rem 4rem; }
  footer { padding: 1.3rem 1.5rem; }
  p, li { font-size: .88rem; }
  table.cookies { font-size: .8rem; }
  table.cookies th, table.cookies td { padding: .5rem .5rem; }
}

/* ── from 404.html ── */
:root {
  --bg:#06090F;
  --panel:#0D1422;
  --edge:#1C2840;
  --text:#F5EBDA;
  --dim:#A89A82;
  --muted:#5C5345;
  --gold:#C8A951;
  --sand:#E0D4B8;
  --volt:#d63b3b;
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle radial atmosphere — slightly more red leaning than thanks page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(214,59,59,.12) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(200,169,81,.04) 0%, transparent 55%);
  z-index: 0;
}

/* Top mark */
.top-bar {
  padding: 1.6rem 3rem;
  position: relative;
  z-index: 2;
}
.top-mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem;
  letter-spacing: .14em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.top-mark .pip {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--volt);
}

/* Centre panel */
.nf-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  z-index: 1;
}
.nf {
  max-width: 620px;
  text-align: center;
}

/* Big 404 with strike effect */
.code {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(7rem, 22vw, 14rem);
  line-height: .85;
  letter-spacing: .02em;
  color: var(--volt);
  margin-bottom: .8rem;
  position: relative;
  display: inline-block;
}
.code::after {
  content: "";
  position: absolute;
  left: -8%; right: -8%;
  top: 50%;
  height: 1px;
  background: var(--volt);
  opacity: .35;
  transform: translateY(-50%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--dim); font-weight: 700;
  margin-bottom: 2rem;
}
.eyebrow::before, .eyebrow::after {
  content: ""; display: block;
  width: 1.4rem; height: 1px; background: var(--dim);
}

h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: .6rem;
}
h1 em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.lead {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--dim);
  max-width: 480px;
  margin: 1.4rem auto 0;
}

/* Buttons */
.actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: 2.5rem;
}
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem;
  font-family: 'Syne', sans-serif;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--volt);
  color: var(--volt);
  background: transparent;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--volt); color: var(--bg); }
.btn-secondary {
  border-color: var(--edge);
  color: var(--dim);
}
.btn-secondary:hover {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
}

/* Quick links — mini nav inside the 404 */
.quick-links {
  margin-top: 2.5rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--edge);
  display: flex; gap: 1.8rem; justify-content: center; flex-wrap: wrap;
}
.quick-links a {
  font-size: .58rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--dim); text-decoration: none; font-weight: 700;
  transition: color .2s;
}
.quick-links a:hover { color: var(--volt); }

/* Footer */
footer {
  padding: 1.5rem 3rem;
  border-top: 1px solid var(--edge);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .top-bar { padding: 1.3rem 1.5rem; }
  footer { padding: 1.3rem 1.5rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .quick-links { gap: 1.2rem; }
}

/* ── from thanks.html ── */
:root {
  --bg:#06090F;
  --panel:#0D1422;
  --edge:#1C2840;
  --text:#F5EBDA;
  --dim:#A89A82;
  --muted:#5C5345;
  --gold:#C8A951;
  --sand:#E0D4B8;
  --volt:#d63b3b;
}
*, *::before, *::after { box-sizing: border-box; margin:0; padding:0; }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Syne', sans-serif;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

/* Subtle grain background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(214,59,59,.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(200,169,81,.05) 0%, transparent 50%);
  z-index: 0;
}

/* Top mark */
.top-bar {
  padding: 1.6rem 3rem;
  position: relative;
  z-index: 2;
}
.top-mark {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 1.35rem;
  letter-spacing: .14em;
  color: var(--text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.top-mark .pip {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--volt);
}

/* Centre panel */
.thanks-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  position: relative;
  z-index: 1;
}
.thanks {
  max-width: 600px;
  text-align: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .65rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--volt); font-weight: 700;
  margin-bottom: 2rem;
}
.eyebrow::before, .eyebrow::after {
  content: ""; display: block;
  width: 1.5rem; height: 1px; background: var(--volt);
}

h1 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: 1;
  letter-spacing: .02em;
  color: var(--text);
  margin-bottom: .6rem;
}
h1 em {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--dim);
  max-width: 520px;
  margin: 1.5rem auto 0;
}

/* Status row */
.status-row {
  margin: 2.5rem 0 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .65rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.status-row .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4caf7d;
  box-shadow: 0 0 0 0 rgba(76,175,125,.6);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,175,125,.5); }
  70%  { box-shadow: 0 0 0 10px rgba(76,175,125,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,175,125,0); }
}
.status-row .sep { color: var(--edge); }

/* Buttons */
.actions {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
  margin-top: .6rem;
}
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .85rem 1.6rem;
  font-family: 'Syne', sans-serif;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--volt);
  color: var(--volt);
  background: transparent;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--volt); color: var(--bg); }
.btn-secondary {
  border-color: var(--edge);
  color: var(--dim);
}
.btn-secondary:hover {
  border-color: var(--text);
  color: var(--text);
  background: transparent;
}

/* Footer */
footer {
  padding: 1.5rem 3rem;
  border-top: 1px solid var(--edge);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  position: relative;
  z-index: 1;
}

@media (max-width: 600px) {
  .top-bar { padding: 1.3rem 1.5rem; }
  footer { padding: 1.3rem 1.5rem; }
  .actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}

/* ── Cookie consent panel (privacy.html) ── */
.cp-panel { background:var(--panel); border:1px solid var(--edge); margin:1.2rem 0 1.6rem; overflow:hidden; }
.cp-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.2rem; border-bottom:1px solid var(--edge); }
.cp-row:last-child { border-bottom:none; }
.cp-cat-name { font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--text); margin-bottom:.25rem; }
.cp-cat-desc { font-size:.8rem; color:var(--dim); line-height:1.5; }
.cp-status { flex-shrink:0; font-size:.6rem; letter-spacing:.15em; text-transform:uppercase; color:var(--gold); font-weight:700; white-space:nowrap; }
.cp-toggle { flex-shrink:0; width:2.6rem; height:1.4rem; border-radius:1rem; border:none; cursor:pointer; position:relative; transition:background .2s; background:var(--edge); }
.cp-toggle-knob { position:absolute; top:3px; left:3px; width:calc(1.4rem - 6px); height:calc(1.4rem - 6px); border-radius:50%; background:#fff; transition:transform .2s; display:block; }
.cp-actions { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.cp-save-btn { padding:.7rem 1.4rem; background:var(--volt); color:#fff; border:none; cursor:pointer; font-family:'Syne',sans-serif; font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; transition:opacity .2s; }
.cp-save-btn:hover { opacity:.8; }
.cp-confirm { font-size:.75rem; color:var(--gold); display:none; }