/* ===================================================================
   Kiürítve.hu — base.css
   Design tokenek, betűk, reset, tipográfiai rendszer
   Irány: „editorial print / nyugodt elegancia”
   =================================================================== */

/* ---------- Betűtípusok (self-hosted, latin-ext: ő ű) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/fraunces-v38-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/fraunces-v38-latin_latin-ext-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/fraunces-v38-latin_latin-ext-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/newsreader-v26-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/newsreader-v26-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/newsreader-v26-latin_latin-ext-italic.woff2') format('woff2');
}

/* ---------- Tokenek ---------- */
:root {
  /* Papír és tinta */
  --paper:      #F6F1E7;   /* meleg elefántcsont */
  --paper-deep: #EFE8D9;   /* mélyebb papír, szekció-váltáshoz */
  --paper-card: #FCF9F2;   /* világosabb lap (nyugta, kártya) */
  --ink:        #211B12;   /* espresso, közel-fekete */
  --ink-soft:   #5C5240;   /* halványabb tinta */
  --ink-faint:  #8A7F69;   /* legapróbb jegyzetek */
  --hairline:   #D8CDB8;   /* hajszálvonal */
  --brass:      #9A6B1F;   /* sárgaréz akcent — takarékosan! */
  --brass-deep: #7C5518;
  --night:      #14110C;   /* hero alatti sötét réteg */

  /* Betűk */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Newsreader', Georgia, 'Times New Roman', serif;

  /* Folyékony tipográfiai skála — 70+ olvashatóság: nagy alap,
     a display-címek pedig szándékosan óriásiak */
  --size-body:   clamp(1.19rem, 1.05rem + 0.45vw, 1.31rem);  /* ~19–21px */
  --size-small:  clamp(1rem, 0.94rem + 0.2vw, 1.06rem);
  --size-h2:     clamp(2.3rem, 1.35rem + 3.6vw, 4.6rem);
  --size-h3:     clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
  --size-hero:   clamp(2.7rem, 1.35rem + 6vw, 6.9rem);
  --size-eyebrow: clamp(0.82rem, 0.78rem + 0.2vw, 0.95rem);

  --leading-body: 1.62;
  --measure: 38em;          /* olvasási sorhossz */

  --space-section: clamp(6rem, 4rem + 8.5vw, 12.5rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --radius: 3px;

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: inherit; }
img, canvas, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
::selection { background: var(--brass); color: var(--paper); }

/* ---------- Nyomdai szemcse a teljes lapon ---------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Közös tipográfiai elemek ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--size-eyebrow);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--size-h2);
  line-height: 1.02;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.lede {
  font-size: calc(var(--size-body) * 1.12);
  color: var(--ink-soft);
  max-width: var(--measure);
  text-wrap: pretty;
}
.prose { max-width: var(--measure); hyphens: auto; -webkit-hyphens: auto; }

/* Hajszálvonal-elválasztó, nyomdai díszponttal */
.rule {
  border: 0;
  height: 1px;
  background: var(--hairline);
  margin: 0;
  position: relative;
  overflow: visible;
}
.rule::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 22px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7F69' stroke-width='1.2'%3E%3Cpath d='M12 3v18M3 12h18'/%3E%3Cpath d='M12 7.5c1.8 1.6 2.9 3 0 4.5-2.9-1.5-1.8-2.9 0-4.5zM12 16.5c-1.8-1.6-2.9-3 0-4.5 2.9 1.5 1.8 2.9 0 4.5z' stroke-width='0.9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
}

/* ---------- Gombok — nagy tap-target (70+) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 52px;
  padding: 0.7em 1.7em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--size-small);
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius);
  border: 1px solid var(--ink);
  transition: transform 0.35s var(--ease-out), background 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: 0.1s; }
.btn-solid {
  background: var(--ink);
  color: var(--paper);
}
.btn-solid:hover { background: var(--brass-deep); border-color: var(--brass-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--brass); color: var(--brass-deep); }

/* Szövegközi linkek: alulról növekvő vonal (mikro-interakció) */
.letter a,
.contact-meta a,
.cform .privacy a,
.footer a {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left 1.16em;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--ease-out), color 0.25s;
}
.letter a:hover,
.contact-meta a:hover,
.cform .privacy a:hover,
.footer a:hover { background-size: 100% 1px; }

/* Fókusz — jól látható, nem csak halvány glow */
:focus-visible {
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

/* ---------- Elrendezési segédek ---------- */
.wrap {
  width: min(100% - 2 * var(--gutter), 76rem);
  margin-inline: auto;
}
.section { padding-block: var(--space-section); }

/* Scroll-reveal alap (reveal.js kapcsolja) */
.rv {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.rv.rv-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* Kihagyás linkje (a11y) */
.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 0.8em 1.2em;
}
.skip-link:focus { left: 0; }