@font-face {
      font-family: 'Fraunces';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url(/fonts-variants/Fraunces-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }
@font-face {
      font-family: 'Fraunces';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url(/fonts-variants/Fraunces-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }
@font-face {
      font-family: 'Karla';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url(/fonts-variants/Karla-latin-ext.woff2) format('woff2');
      unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
      font-display: swap;
    }
@font-face {
      font-family: 'Karla';
      font-style: normal;
      font-weight: 300 700;
      font-display: swap;
      src: url(/fonts-variants/Karla-latin.woff2) format('woff2');
      unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
      font-display: swap;
    }

/* ─── SMILE.STUDIO BLOG ────────────────────────────────────────────
   Egy közös stíluslap az összes blogbejegyzéshez. Új cikk írásakor
   ehhez a fájlhoz NEM kell hozzányúlni, csak a cikk <body> részéhez.
   ------------------------------------------------------------------ */

:root {
  color-scheme: light dark;
  --bg:#F9F8F6; --surface:#FFFFFF; --fg:#1A2B35; --muted:#6C7E8A;
  --border:#DDE5E3; --accent:#2A7C6F; --accent-lt:#EAF3F1; --accent-dark:#1D5C53;
  --gold:#C9A86C; --gold-lt:#FAF3E7;
  --radius:10px;
  --shadow-sm:0 1px 2px rgba(26,43,53,.04), 0 3px 10px rgba(26,43,53,.05);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Karla',-apple-system,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0F171B; --surface:#162126; --fg:#E7EDEA; --muted:#94A6AE;
    --border:#27353C; --accent:#56B8A5; --accent-lt:#16302C; --accent-dark:#7FD1C0;
    --gold:#D8BC88; --gold-lt:#241F14;
    --shadow-sm:0 1px 2px rgba(0,0,0,.34), 0 3px 10px rgba(0,0,0,.26);
  }
}
:root[data-theme="dark"] {
  --bg:#0F171B; --surface:#162126; --fg:#E7EDEA; --muted:#94A6AE;
  --border:#27353C; --accent:#56B8A5; --accent-lt:#16302C; --accent-dark:#7FD1C0;
  --gold:#D8BC88; --gold-lt:#241F14;
  --shadow-sm:0 1px 2px rgba(0,0,0,.34), 0 3px 10px rgba(0,0,0,.26);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:17px; line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--accent) }

/* ── fejléc / lábléc ─────────────────────────────────────────
   Ugyanaz a sticky sáv és lebegő mobil-vezérlés, mint a főoldalon. */
.wrap { max-width:720px; margin:0 auto; padding:0 40px }
.wrap-wide { max-width:1120px; margin:0 auto; padding:0 40px }

/* The chrome is shared with the landing page, which runs line-height 1.6.
   The blog body runs 1.72 for prose, so pin it here or every element in the
   header, menu and bar renders a couple of px taller than it does there. */
.nav-wrap, .nav-inner, .m-header, .m-menu, .m-bar { line-height:1.6 }

.nav-wrap {
  position:sticky; top:0; z-index:100;
  background:rgba(249,248,246,0.92);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; padding:18px 0 }
.nav-logo {
  font-family:var(--font-display); font-size:22px; font-weight:500;
  color:var(--fg); letter-spacing:-0.01em; text-decoration:none;
}
.nav-logo span { color:var(--accent) }
.nav-links { display:flex; align-items:center; gap:4px }
.nav-links a {
  font-size:13.5px; font-weight:400; color:var(--muted);
  padding:6px 10px; border-radius:6px; white-space:nowrap;
  text-decoration:none; transition:color .15s;
}
.nav-links a:hover { color:var(--fg); text-decoration:none }
.nav-links a[aria-current="page"] { color:var(--fg) }

.m-header, .m-menu, .m-backdrop, .m-bar, .m-bar-scrim { display:none }

@media (max-width:1024px) {
  .nav-wrap { display:none }

  .m-header {
    display:flex; position:fixed; top:0; left:0; right:0; z-index:50;
    align-items:center; justify-content:space-between;
    padding:14px 20px; box-sizing:border-box;
  }
  .m-header-scrim {
    position:absolute; inset:0 0 auto 0; height:78px; z-index:-1; pointer-events:none;
    background:linear-gradient(to bottom, rgba(249,248,246,0.94) 0%, rgba(249,248,246,0.6) 55%, rgba(249,248,246,0) 100%);
  }
  .m-logo {
    font-family:var(--font-display); font-size:18px; font-weight:500;
    color:var(--fg); padding:9px 17px; border-radius:999px; text-decoration:none;
    background:rgba(255,255,255,0.72);
    backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4);
    border:1px solid rgba(26,43,53,0.08); box-shadow:0 4px 16px rgba(26,43,53,0.10);
  }
  .m-logo span { color:var(--accent) }
  .m-logo:hover { text-decoration:none }
  .m-menu-btn {
    position:relative; width:44px; height:44px; flex:none; padding:0; cursor:pointer;
    border-radius:999px; background:rgba(255,255,255,0.72);
    backdrop-filter:blur(12px) saturate(1.4); -webkit-backdrop-filter:blur(12px) saturate(1.4);
    border:1px solid rgba(26,43,53,0.08); box-shadow:0 4px 16px rgba(26,43,53,0.10);
  }
  .m-menu-btn:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
  .m-menu-bar {
    position:absolute; left:13px; right:13px; top:18px; height:2px;
    background:var(--fg); border-radius:2px;
    transition:transform .3s cubic-bezier(0.22,1,0.36,1);
  }
  .m-menu-bar:nth-child(2) { top:24px }
  .m-menu-btn[aria-expanded="true"] .m-menu-bar:nth-child(1) { transform:translateY(3px) rotate(45deg) }
  .m-menu-btn[aria-expanded="true"] .m-menu-bar:nth-child(2) { transform:translateY(-3px) rotate(-45deg) }

  .m-backdrop {
    display:block; position:fixed; inset:0; z-index:47;
    background:rgba(26,43,53,0.38); opacity:0; pointer-events:none;
    transition:opacity .35s ease;
  }
  .m-backdrop.is-in { opacity:1; pointer-events:auto }

  .m-menu {
    display:block; position:fixed; top:0; left:0; right:0; z-index:48;
    background:rgba(255,255,255,0.98);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:80px 20px 24px; box-sizing:border-box;
    max-height:100vh; overflow-y:auto;
    transform:translateY(-100%); opacity:0; pointer-events:none;
    transition:transform .45s cubic-bezier(0.22,1,0.36,1), opacity .35s ease;
  }
  .m-menu.is-in { transform:translateY(0); opacity:1; pointer-events:auto }
  .m-menu-list { display:flex; flex-direction:column; margin-bottom:20px }
  .m-menu-link {
    padding:13px 4px; font-size:16px; font-weight:500; color:var(--fg);
    border-bottom:1px solid var(--border); text-decoration:none;
  }
  .m-menu-link:hover { text-decoration:none }
  .m-menu-cta { width:100%; justify-content:center }

  .m-bar {
    display:block; position:fixed; z-index:60;
    left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    transform:translateY(160%); opacity:0;
    transition:transform .5s cubic-bezier(0.22,1,0.36,1), opacity .35s ease;
  }
  .m-bar.is-in { transform:translateY(0); opacity:1 }
  .m-bar-cta {
    width:100%; justify-content:center; box-shadow:0 10px 26px rgba(26,43,53,0.24);
    position:relative; overflow:hidden; isolation:isolate;
  }
  .m-bar-scrim {
    display:block; position:fixed; left:0; right:0; bottom:0; height:132px; z-index:59;
    pointer-events:none; opacity:0; transition:opacity .35s ease;
    background:linear-gradient(to top, rgba(249,248,246,0.96) 0%, rgba(249,248,246,0.6) 55%, rgba(249,248,246,0) 100%);
  }
  .m-bar.is-in ~ .m-bar-scrim { opacity:1 }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav-wrap { background:rgba(15,23,27,0.90) }
  :root:not([data-theme="light"]) .m-logo,
  :root:not([data-theme="light"]) .m-menu-btn {
    background:rgba(22,33,38,0.78); border-color:rgba(231,237,234,0.10);
    box-shadow:0 4px 16px rgba(0,0,0,0.38);
  }
  :root:not([data-theme="light"]) .m-menu { background:rgba(19,29,34,0.98) }
  :root:not([data-theme="light"]) .m-backdrop { background:rgba(0,0,0,0.58) }
  :root:not([data-theme="light"]) .m-header-scrim {
    background:linear-gradient(to bottom, rgba(15,23,27,0.94) 0%, rgba(15,23,27,0.6) 55%, rgba(15,23,27,0) 100%);
  }
  :root:not([data-theme="light"]) .m-bar-scrim {
    background:linear-gradient(to top, rgba(15,23,27,0.96) 0%, rgba(15,23,27,0.6) 55%, rgba(15,23,27,0) 100%);
  }
}

/* Footer, same structure as the landing page, so the two match. */
footer {
  margin-top:72px;
  /* The wordmark's glyphs are wider than the padded content box and spill into
     the padding by design. The browser still counts that spill as document
     overflow, which made the page scroll sideways. Clip it at the footer, which
     spans the full viewport, so nothing visible is cut, clipping .footer-mark
     itself would chop the last letter. overflow-x:clip, not hidden, so this
     does not become a scroll container. */
  overflow-x:clip;
}
footer a { color:var(--muted); text-decoration:none }
footer a:hover { color:var(--fg) }
.footer-inner {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:48px;
  padding:64px 0 40px;
}
.footer-brand h3 { font-family:var(--font-display); font-size:22px; font-weight:500; margin-bottom:12px }
.footer-brand h3 span { color:var(--accent) }
.footer-brand p { font-size:14px; color:var(--muted); line-height:1.7 }
.footer-col h4 { font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg); margin-bottom:16px }
.footer-col ul { list-style:none; margin:0; padding:0 }
/* grid/flex children default to min-width:auto and refuse to shrink below
   their content, which pushes the page sideways on a narrow phone */
.footer-col, .footer-brand, .footer-col ul li { min-width:0 }
.footer-col ul li { margin-bottom:10px }
.footer-col ul li a { font-size:14px; color:var(--muted) }
/* the contact rows are inline-flex with an icon; without a cap they size to
   max-content and push the page sideways on a narrow phone */
.footer-col ul li a { max-width:100%; flex-wrap:nowrap; align-items:flex-start; overflow-wrap:anywhere }
.footer-col ul li a > svg { margin-top:4px }
.footer-col ul li a > svg { flex:0 0 auto }
.footer-col ul li span { max-width:100%; overflow-wrap:anywhere }
.footer-bottom {
  border-top:1px solid var(--border); padding:20px 0;
  display:flex; justify-content:space-between; align-items:center;
  font-size:13px; color:var(--muted);
}
.footer-mark { display:none }

@media (max-width:960px) { .footer-inner { grid-template-columns:1fr 1fr } }
@media (max-width:640px) {
  .footer-inner { grid-template-columns:1fr 1fr; gap:26px 22px; padding:44px 0 26px }
  .footer-brand { grid-column:1 / -1 }
  .footer-brand h3 { font-size:20px; margin-bottom:8px }
  .footer-col h4 { margin-bottom:10px; font-size:12px }
  .footer-col ul li { margin-bottom:7px }
  /* one full-width row each: two columns squeezed the email into breaking
     mid-word and stranded the last icon on its own line */
  .footer-col:last-child { grid-column:1 / -1 }
  .footer-col:last-child ul { display:block }
  .footer-col:last-child ul li { margin-bottom:9px }
  .footer-mark {
    display:block; text-align:center; font-family:var(--font-display); font-weight:500;
    font-size:clamp(48px,16vw,92px); line-height:1; letter-spacing:-.03em;
    color:var(--fg); opacity:.09; padding:12px 0 4px; user-select:none;
    /* Same as the landing page: the glyphs are wider than the 40px-padded
       content box and deliberately spill into that padding, which is what
       makes it read as full-bleed. Do not clip it, that cuts the final
       letter off, and do not shrink it, or it stops matching the homepage. */
  }
  .footer-mark span { color:var(--accent) }
  .footer-bottom { flex-direction:column; align-items:center; gap:10px; text-align:center; padding:18px 0 4px }
}

/* ── cikk tipográfia ───────────────────────────────────────── */
article { padding:56px 0 0 }
.crumbs { font-size:13.5px; color:var(--muted); margin-bottom:22px }
.crumbs a { color:var(--muted); text-decoration:none }
.crumbs a:hover { color:var(--accent) }
h1 {
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(31px,5vw,44px); line-height:1.14; letter-spacing:-.015em;
  text-wrap:balance; margin-bottom:18px;
}
.post-lede { font-size:19.5px; line-height:1.62; color:var(--muted); margin-bottom:28px }
.byline {
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
  padding:14px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  font-size:13.5px; color:var(--muted); margin-bottom:36px;
}
.byline-av {
  width:52px; height:52px; border-radius:50%; object-fit:cover;
  border:1px solid var(--border); flex:0 0 auto;
}
.byline b { color:var(--fg); font-weight:600; display:block; font-size:14.5px; line-height:1.3 }
.byline-meta { min-width:0; line-height:1.45 }

article h2 {
  font-family:var(--font-display); font-weight:500; font-size:27px; line-height:1.24;
  letter-spacing:-.01em; text-wrap:balance; margin:44px 0 14px;
}
article h3 { font-size:19px; font-weight:600; margin:30px 0 10px }
article p { margin-bottom:19px }
article ul, article ol { margin:0 0 22px 24px }
article li { margin-bottom:9px }
article strong { font-weight:600; color:var(--fg) }
article a { text-decoration:underline; text-underline-offset:2px }
article img { max-width:100%; height:auto; border-radius:var(--radius); display:block; margin:28px 0 }
figure { margin:28px 0 }
figcaption { font-size:13.5px; color:var(--muted); margin-top:9px; text-align:center }

blockquote {
  border-left:3px solid var(--accent); padding:4px 0 4px 20px; margin:26px 0;
  font-family:var(--font-display); font-size:20px; line-height:1.5; color:var(--fg);
}

.tablewrap { overflow-x:auto; margin:26px 0; border:1px solid var(--border); border-radius:var(--radius) }
table { width:100%; border-collapse:collapse; font-size:15px; min-width:460px; background:var(--surface) }
th,td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--border); vertical-align:top }
th { background:var(--accent-lt); font-weight:600; font-size:14px }
tbody tr:last-child td { border-bottom:0 }

/* kiemelt doboz a cikkben */
.callout {
  background:var(--accent-lt); border:1px solid var(--border); border-left:3px solid var(--accent);
  border-radius:var(--radius); padding:18px 22px; margin:28px 0;
}
.callout p:last-child { margin-bottom:0 }
.callout strong:first-child { display:block; margin-bottom:6px }

/* cikkvégi visszalépés a főoldalra, minden cikk alján ott van */
.post-more {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin:48px 0 0; padding:26px 30px;
  background:var(--accent-lt); border:1px solid var(--border);
  border-radius:var(--radius); text-decoration:none; color:var(--fg);
  font-family:var(--font-display); font-size:22px; font-weight:500; line-height:1.3;
  transition:border-color .2s, transform .2s;
}
.post-more:hover { border-color:var(--accent); transform:translateY(-2px); text-decoration:none }
.post-more:focus-visible { outline:2px solid var(--accent); outline-offset:3px }
.post-more svg { flex:0 0 auto; color:var(--accent) }
.post-more + .post-cta { margin-top:18px }
@media (max-width:560px) {
  .post-more { font-size:18.5px; padding:22px 24px; gap:14px }
  .post-more svg { width:22px; height:22px }
}

/* cikkvégi CTA */
.post-cta {
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:30px 32px; margin:48px 0 0; text-align:center; box-shadow:var(--shadow-sm);
}
.post-cta h2 { margin-top:0; font-size:24px }
.post-cta .btn { max-width:100%; white-space:normal; text-align:center }
.post-cta p { color:var(--muted); max-width:46ch; margin:0 auto 22px }
.btn {
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:999px;
  font-size:15.5px; font-weight:500; text-decoration:none; border:1.5px solid transparent;
  background:var(--accent); color:#fff; transition:opacity .2s;
  /* pinned, not inherited: the blog body runs a looser 1.72 line-height
     for prose, which otherwise makes every button 2px taller than on
     the landing page */
  line-height:1.6;
}
.btn:hover { opacity:.9; text-decoration:none }

/* Must sit AFTER .btn: same specificity, so whichever is later wins. On the
   landing page .nav-cta follows .btn too, keep them in the same order or the
   header CTA renders a different size here than there. */
.nav-cta { margin-left:10px; font-size:14px; padding:12px 22px; white-space:nowrap }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { color:#08120F }
}
:root[data-theme="dark"] .btn { color:#08120F }

/* ── blogindex ─────────────────────────────────────────────── */
.index-head { padding:56px 0 8px }
.index-head h1 { margin-bottom:12px }
.index-head p { color:var(--muted); font-size:18px; max-width:56ch }
.postlist { list-style:none; margin:40px 0 0; padding:0; display:flex; flex-direction:column; gap:2px }
.postlist li { border-top:1px solid var(--border) }
.postlist li:last-child { border-bottom:1px solid var(--border) }
.postlist a {
  display:block; padding:24px 4px; text-decoration:none; color:inherit;
  transition:background .18s;
}
.postlist a:hover { background:var(--accent-lt) }
.postlist .date { font-size:13px; color:var(--muted); letter-spacing:.02em }
.postlist h2 {
  font-family:var(--font-display); font-weight:500; font-size:23px; line-height:1.28;
  margin:6px 0 7px; letter-spacing:-.01em; color:var(--fg);
}
.postlist p { font-size:15.5px; color:var(--muted); margin:0; max-width:62ch }
.empty {
  border:1px dashed var(--border); border-radius:var(--radius);
  padding:34px; text-align:center; color:var(--muted); font-size:15.5px; margin-top:34px;
}

@media (max-width:640px) {
  .wrap, .wrap-wide { padding:0 20px }
  body { font-size:16px }
  article { padding-top:36px }
  .post-lede { font-size:17.5px }
  .post-cta { padding:26px 22px }
}
@media (prefers-reduced-motion: reduce) { * { transition:none !important } }

/* ── hely a lebegő mobil-vezérlésnek ─────────────────────────
   A fájl végén áll, hogy a későbbi article/footer szabályok
   ne írják felül. */
@media (max-width:1024px) {
  article { padding-top:92px }
  .index-head { padding-top:92px }
  footer { padding-bottom:110px }
}

/* A lebegő sáv egysoros marad a legkeskenyebb telefonon is. */
@media (max-width:1024px) {
  .m-bar-cta { white-space:nowrap; font-size:15px; padding-left:20px; padding-right:20px; gap:7px }
  .m-bar-cta svg { flex:0 0 auto }
}
@media (max-width:340px) {
  .m-bar-cta { font-size:14px; padding-left:14px; padding-right:14px }
}