:root {
  color-scheme: dark;

  /* Palette "Tábortűz-este" (campfire evening): every colour on the site comes from here. */
  --palette-night: #2a1f1a;       /* deepest night: header, footer */
  --palette-bark: #3d2b22;        /* band gradient, form fields */
  --palette-walnut: #4a3529;      /* cards */
  --palette-cedar: #5e4434;       /* borders, timeline line, muted text on beige */
  --palette-clay: #8a6450;        /* past timeline dots, placeholder */
  --palette-sand: #c9b39a;        /* secondary text on dark */
  --palette-cream: #f3e6d3;       /* main text on dark */
  --palette-parchment: #f6eee3;   /* beige content background */
  --palette-ember: #b0532a;       /* deep ember glow */
  --palette-amber: #e8954a;       /* firelight accent */
  --palette-amber-light: #f2ab68; /* accent hover */
  --palette-rosehip: #f0948a;     /* errors */

  --color-night: var(--palette-night);
  --color-night-2: var(--palette-bark);
  --color-on-night: var(--palette-cream);
  --color-on-night-muted: var(--palette-sand);
  --color-glow: var(--palette-amber);
  --color-glow-hover: var(--palette-amber-light);
  --color-ember: var(--palette-ember);
  --color-bg: var(--palette-parchment);
  --color-on-bg: var(--palette-night);
  --color-on-bg-muted: var(--palette-cedar);
  --color-heading: var(--palette-amber);
  --color-surface: var(--palette-walnut);
  --color-field: var(--palette-bark);
  --color-text: var(--palette-cream);
  --color-muted: var(--palette-sand);
  --color-border: var(--palette-cedar);
  --color-quiet: var(--palette-clay);
  --color-error: var(--palette-rosehip);

  /* Firelight layers shared by the top band and the booking form card. */
  --glow-light:
    radial-gradient(ellipse 60% 70% at 22% 60%, color-mix(in srgb, var(--color-glow) 30%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 60% at 85% 0%, color-mix(in srgb, var(--color-ember) 22%, transparent), transparent 70%);

  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;

  --radius: 14px;
  --gutter: 16px;
  --max-width: 960px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  margin: 0;
  background: var(--color-bg);
  color: var(--color-on-bg);
  font: 1rem/1.65 var(--font-body);
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 6vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.8rem); color: var(--color-heading); }
a { color: var(--color-glow); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--color-glow); outline-offset: 2px; }

.container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding-inline: var(--gutter); }
main { flex: 1; }

/* Header & footer: the dark "night" around the fire */
.site-header { background: var(--color-night); color: var(--color-on-night); border-bottom: 1px solid color-mix(in srgb, var(--palette-cream) 6%, transparent); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-block: .9rem; }
.brand { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; color: inherit; }
.brand-name { font-family: var(--font-heading); font-size: 1.25rem; }
.brand-tagline { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-glow); }
.site-nav { display: flex; gap: 1.25rem; }
.site-nav a { color: var(--color-on-night-muted); text-decoration: none; padding-block: .25rem; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-on-night); border-bottom-color: var(--color-glow); }

.site-footer { background: var(--color-night); color: var(--color-on-night-muted); padding-block: 2rem; font-size: .95rem; }
.site-footer p { margin: .25rem 0; }
.site-footer a { color: var(--color-on-night); }

/* Firelit band: dark base with soft ember light, no literal fire */
.glow-band {
  color: var(--color-on-night);
  background: var(--glow-light), linear-gradient(165deg, var(--color-night-2), var(--color-night));
}

.page { padding-block: 3rem; }
.page > section + section { margin-top: 3rem; }

/* Intro page */
.hero { display: grid; gap: 2rem; align-items: center; padding-block: 3rem 3.5rem; }
.portrait {
  width: 100%; max-width: 320px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-glow) 25%, transparent), 0 24px 60px -12px color-mix(in srgb, var(--color-glow) 45%, transparent);
}
.roles { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; }
.roles li {
  padding: .3rem .85rem; border-radius: 999px; font-size: .95rem;
  border: 1px solid color-mix(in srgb, var(--color-glow) 45%, transparent); background: color-mix(in srgb, var(--palette-cream) 5%, transparent);
}
.experience-badge { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1rem; color: var(--color-on-night-muted); }
.experience-badge strong { font-family: var(--font-heading); font-size: 2.2rem; line-height: 1; color: var(--color-glow); }

@media (min-width: 720px) {
  .hero { grid-template-columns: 320px 1fr; gap: 3rem; padding-block: 4rem 4.5rem; }
}

/* Yoda: a small wink under the intro text. Out of flow (never grows the band), right edge on the text's right edge,
   edges faded into the band. Desktop only; range files may opt in. */
.hero-actions { position: relative; }
.yoda { display: none; }
@media (min-width: 1024px) {
  .yoda {
    display: block; position: absolute; top: 0; right: 0; width: auto; height: 110px;
    mask-image: radial-gradient(closest-side, var(--color-night) 62%, transparent);
  }
}

.card {
  color: var(--color-text);
  border: 1px solid var(--color-border); border-radius: var(--radius); padding: 1.5rem;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--color-glow) 7%, transparent), transparent 45%), var(--color-surface);
  box-shadow: 0 14px 34px -20px var(--color-night);
}

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; display: grid; gap: .1rem; padding: .25rem 0 1.4rem 1.75rem; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; left: 0; top: .55rem; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--color-quiet); box-shadow: 0 0 0 4px var(--color-surface);
}
.timeline li.current::before { background: var(--color-glow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-glow) 22%, transparent); }
.timeline li::after { content: ""; position: absolute; left: calc(.35rem - 1px); top: 1.5rem; bottom: .1rem; width: 2px; background: var(--color-border); }
.timeline li:last-child::after { display: none; }
.timeline .years { color: var(--color-glow); font-size: .9rem; font-weight: 600; }
.timeline li > span:last-child { color: var(--color-muted); }

.award {
  display: flex; gap: 1.25rem; align-items: center;
  border-color: color-mix(in srgb, var(--color-glow) 40%, transparent);
  background: radial-gradient(circle at 2.5rem 50%, color-mix(in srgb, var(--color-glow) 18%, transparent), transparent 55%), var(--color-surface);
}
.award-icon { flex: none; width: 3rem; height: 3rem; color: var(--color-glow); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--color-glow) 50%, transparent)); }
.award .years { display: block; color: var(--color-glow); font-size: .9rem; font-weight: 600; }
.award h3 { font-size: 1.3rem; margin: .1rem 0; }
.award p { margin: 0; color: var(--color-muted); }

/* Buttons */
.button {
  display: inline-block; padding: .8rem 1.5rem; border: 0; border-radius: 999px;
  background: var(--color-glow); color: var(--color-night);
  box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--color-glow) 70%, transparent);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
}
.button:hover { background: var(--color-glow-hover); }
.button:disabled { opacity: .6; cursor: progress; }

/* Booking page */
.booking { max-width: 640px; }
.page-head { padding-block: 2.5rem; }
.page-head p { color: var(--color-on-night-muted); margin: 0; }
.form { display: grid; gap: 1.1rem; }
.form.card { background: var(--glow-light), var(--color-surface); }
.field { display: grid; gap: .35rem; }
.field-row { display: grid; gap: 1.1rem; }
@media (min-width: 480px) { .field-row { grid-template-columns: 1fr 1fr; } }

label { font-weight: 600; color: var(--color-heading); }
.hint { color: var(--color-muted); font-size: .9rem; font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="time"] {
  width: 100%; padding: .7rem .8rem; font: inherit; color: inherit;
  background: var(--color-field); border: 1px solid var(--color-border); border-radius: 10px;
}
input::placeholder { color: var(--color-muted); opacity: .7; }
input:focus-visible { outline: 2px solid var(--color-glow); outline-offset: 1px; }
input[aria-invalid="true"] { border-color: var(--color-error); }
input[type="checkbox"] { accent-color: var(--color-glow); }

.checkbox { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; color: var(--color-text); }
.checkbox input { margin-top: .35rem; }

.field-error { color: var(--color-error); font-size: .9rem; margin: 0; }
.field-error:empty { display: none; }
.field-suggestion { margin: 0; font-size: .9rem; color: var(--color-muted); }
.link-button { padding: 0; border: 0; background: none; font: inherit; color: var(--color-glow); text-decoration: underline; cursor: pointer; }

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.status { border-radius: var(--radius); padding: 1.25rem 1.5rem; background: var(--color-surface); color: var(--color-text); }
.status-success { border-left: 4px solid var(--color-glow); }
.status-error { border: 1px solid var(--color-error); }
.status p { margin: .25rem 0; }


/* Privacy notice page: long-form reading on beige, tables scroll sideways inside their own box on narrow screens */
.legal { max-width: 760px; }
.legal article { color: var(--color-on-bg); }
.legal article h2 { margin-top: 2.25rem; }
.legal article h3 { margin-top: 1.5rem; font-size: 1.15rem; }
.legal article ul { padding-left: 1.25rem; }
.legal article li + li { margin-top: .35rem; }
.table-wrap { overflow-x: auto; margin: 1rem 0; }
.legal table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.legal th, .legal td { padding: .55rem .7rem; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.legal th { color: var(--color-on-bg-muted); }
/* Narrow screens: tables with a header row become stacked, labelled blocks (one block per row). */
@media (max-width: 599.98px) {
  .legal table:has(thead), .legal table:has(thead) :is(tbody, tr, td) { display: block; }
  .legal table:has(thead) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal table:has(thead) tr { padding-block: .6rem; border-bottom: 1px solid var(--color-border); }
  .legal table:has(thead) td { padding: .15rem 0; border: 0; }
  .legal td[data-label]::before { content: attr(data-label); display: block; font-size: .8rem; font-weight: 600; color: var(--color-on-bg-muted); }
}
mark.todo { padding: 0 .2em; border-radius: 4px; background: color-mix(in srgb, var(--color-glow) 35%, transparent); color: inherit; }