/* MariuszK.Net — czysty CSS, semantyczne tokeny.
   Edycja stylów: tylko tutaj. Klasy używane w *.html. */

:root{
  --bg: oklch(0.972 0.018 80);          /* hanji cream */
  --fg: oklch(0.18 0.02 30);
  --muted: oklch(0.93 0.018 75);
  --muted-fg: oklch(0.42 0.03 40);
  --card: oklch(0.985 0.012 80);
  --primary: oklch(0.48 0.18 25);       /* obangsaek crimson */
  --primary-fg: oklch(0.98 0.01 80);
  --secondary: oklch(0.28 0.07 260);    /* deep indigo */
  --secondary-fg: oklch(0.98 0.01 80);
  --gold: oklch(0.78 0.14 80);
  --border: oklch(0.86 0.02 70);
  --shadow-ring: 0 0 0 4px oklch(0.86 0.02 70 / 0.4);
  --radius: 0.5rem;
  --container: 72rem;
  --container-narrow: 56rem;
  --font-display: "Noto Serif KR","Cormorant Garamond",serif;
  --font-sans: "Inter",system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-sans);
  line-height:1.55;
  background-image:
    radial-gradient(circle at 20% 10%, oklch(0.48 0.18 25 / 0.05), transparent 50%),
    radial-gradient(circle at 80% 90%, oklch(0.28 0.07 260 / 0.05), transparent 50%);
  min-height:100vh;
  display:flex;flex-direction:column;
  overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;background:none;border:none;color:inherit}
ul,ol{list-style:none}
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-0.01em;line-height:1.15}

main{flex:1}

/* Layout helpers */
.container{max-width:var(--container);margin:0 auto;padding:0 1.25rem}
.container-narrow{max-width:var(--container-narrow);margin:0 auto;padding:0 1.25rem}
@media(min-width:768px){
  .container,.container-narrow{padding:0 1.5rem}
}

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid color-mix(in oklab, var(--border) 60%, transparent);
}
.nav-bar{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem}
@media(min-width:768px){.nav-bar{padding:1rem 1.5rem}}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-leading{line-height:1.1}
.brand-leading .name{font-family:var(--font-display);font-size:1rem;font-weight:600}
@media(min-width:768px){.brand-leading .name{font-size:1.125rem}}
.brand-leading .kr{font-size:.625rem;text-transform:uppercase;letter-spacing:.2em;color:var(--muted-fg)}

.seal{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:var(--primary-fg);
  font-family:var(--font-display);font-weight:700;
  border-radius:4px;padding:6px 10px;font-size:.875rem;
  box-shadow:0 2px 0 oklch(0.3 0.12 25);
}

.nav-links{display:none}
@media(min-width:768px){
  .nav-links{display:flex;gap:1.5rem;font-size:.875rem;align-items:center}
}
.nav-links a{transition:color .2s}
.nav-links a:hover,.nav-links a.is-active{color:var(--primary)}

.menu-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  height:2.5rem;width:2.5rem;border-radius:.375rem;
  border:1px solid var(--border);background:color-mix(in oklab,var(--bg) 60%, transparent);
}
@media(min-width:768px){.menu-toggle{display:none}}

.mobile-nav{display:none;border-top:1px solid color-mix(in oklab,var(--border) 60%, transparent);background:color-mix(in oklab,var(--bg) 95%, transparent)}
.mobile-nav.is-open{display:block}
.mobile-nav ul{padding:.25rem 1rem;display:flex;flex-direction:column}
.mobile-nav a{display:block;padding:.75rem;border-radius:.375rem;font-size:1rem;transition:background .15s, color .15s}
.mobile-nav a:hover,.mobile-nav a.is-active{background:var(--muted);color:var(--primary)}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--secondary);color:var(--secondary-fg);
}
.footer-row{
  display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:space-between;
  padding:2.5rem 1.5rem;
}
@media(min-width:768px){.footer-row{flex-direction:row}}
.footer-brand{display:flex;align-items:center;gap:.75rem}
.footer-brand .name{font-family:var(--font-display);font-size:1.125rem}
.footer-brand .name .kr{font-size:.82em;letter-spacing:.02em}
.footer-meta{font-size:.75rem;color:color-mix(in oklab,var(--secondary-fg) 60%, transparent)}

/* Przycisk powrotu do góry — same strzałki, hover na czerwono */
.back-to-top{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.25rem;height:2.25rem;padding:0;
  background:transparent;border:0;cursor:pointer;
  color:color-mix(in oklab,var(--secondary-fg) 55%, transparent);
  transition:color .2s, transform .2s;
}
.back-to-top svg{width:22px;height:22px}
.back-to-top:hover{color:var(--primary);transform:translateY(-3px)}

/* ---------- Hero (home) ---------- */
.hero{position:relative;overflow:hidden}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.hero-overlay{position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(to right, rgba(15,10,8,.55) 0%, rgba(15,10,8,.30) 40%, rgba(15,10,8,.05) 70%, transparent 100%),
    linear-gradient(to bottom, rgba(15,10,8,.15) 0%, transparent 35%, rgba(15,10,8,.45) 100%);
}
.hero-content{padding:3rem 1.25rem;max-width:var(--container);margin:0 auto;position:relative;z-index:1;display:flex;align-items:center;min-height:inherit}
@media(min-width:768px){.hero-content{padding:4rem 1.5rem}}
.hero-inner{max-width:42rem;animation:fade-up .7s ease-out both}
.hero-badge{
  display:inline-flex;align-items:center;gap:.75rem;border-radius:9999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(15,10,8,.45);
  padding:.3rem .9rem;backdrop-filter:blur(8px);margin-bottom:1.25rem;
}
.hero-badge .kicker{color:#f3e9dd}
.dot{width:.5rem;height:.5rem;border-radius:9999px;background:var(--primary)}
.kicker{font-size:.625rem;text-transform:uppercase;letter-spacing:.25em;color:var(--muted-fg)}
.hero h1{
  font-family:var(--font-display);font-size:2.5rem;line-height:1.05;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.7), 0 0 1px rgba(0,0,0,.5);
}
@media(min-width:640px){.hero h1{font-size:3rem}}
@media(min-width:768px){.hero h1{font-size:4.25rem}}
.hero h1 .accent{color:#ffb38a;text-shadow:0 2px 18px rgba(0,0,0,.65)}
.hero p{
  margin-top:1.25rem;max-width:36rem;font-weight:500;
  color:#f5e9dd;text-shadow:0 2px 12px rgba(0,0,0,.85), 0 0 1px rgba(0,0,0,.4);
}
@media(min-width:768px){.hero p{font-size:1.125rem;margin-top:1.5rem}}
.hero-actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}

.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.75rem 1.5rem;border-radius:9999px;font-size:.875rem;font-weight:500;
  transition:transform .2s, background .2s, border-color .2s;
}
.btn-primary{background:var(--primary);color:var(--primary-fg);box-shadow:0 10px 30px -10px color-mix(in oklab,var(--primary) 50%, transparent)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--border);background:color-mix(in oklab,var(--bg) 85%, transparent);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:var(--bg)}

/* ---------- Marquee / dictionary ticker ---------- */
.ticker{
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
  background:var(--secondary);color:var(--secondary-fg);
}
.ticker-row{display:flex;align-items:center;gap:1.5rem;overflow:hidden;padding:.5rem 0}
.ticker-label{flex-shrink:0;padding-left:1.5rem;font-size:.625rem;text-transform:uppercase;letter-spacing:.3em;color:var(--gold)}
.ticker-track{flex:1;overflow:hidden;position:relative}
.ticker-content{display:flex;width:max-content;gap:2.5rem;white-space:nowrap;animation:marquee 75s linear infinite}
.ticker-item{display:inline-flex;align-items:baseline;gap:.5rem;font-size:.875rem;line-height:1.2;margin:0;padding:0}
.ticker-item > *{margin:0;padding:0;line-height:1.2}
.ticker-kr{font-family:var(--font-display);font-size:1rem;color:var(--gold)}
.ticker-rom{color:color-mix(in oklab,var(--secondary-fg) 60%, transparent)}
.ticker-sep{color:color-mix(in oklab,var(--secondary-fg) 40%, transparent)}
.ticker-item.ticker-quote .ticker-pl{font-style:italic}

@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}

.fade-up{animation:fade-up .7s ease-out both}

/* ---------- Section grid (home) ---------- */
.section-block{padding:5rem 1.5rem;max-width:var(--container);margin:0 auto}
.section-block .kicker{color:var(--primary);margin-bottom:.5rem}
.section-block h2{font-family:var(--font-display);font-size:2.25rem}
@media(min-width:768px){.section-block h2{font-size:2.75rem}}
.section-block .lead{margin-top:.75rem;max-width:36rem;color:var(--muted-fg)}

.cards{margin-top:3rem;display:grid;gap:1.5rem}
@media(min-width:768px){.cards{grid-template-columns:repeat(2,1fr)}}

/* Karty działów — struktura identyczna z .film-card (sprawdzony, działający wzór) */
.card{
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);background:var(--card);
  border-radius:.75rem;text-align:left;width:100%;
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:0 20px 50px -20px rgba(0,0,0,.25)}
.card-img-wrap{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--muted)}
.card-img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img{transform:scale(1.05)}
.card-img-fade{display:none} /* gradient niepotrzebny — badge ma własne tło */
.card-meta{
  position:absolute;left:1rem;bottom:1rem;z-index:2;
  display:flex;align-items:center;gap:.5rem;
}
.card-meta .kicker{
  color:var(--primary);
  background:color-mix(in oklab,var(--bg) 85%, transparent);
  backdrop-filter:blur(6px);
  padding:.2rem .55rem;border-radius:9999px;
  font-size:.75rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
}
.card-body{padding:1.5rem;display:flex;flex-direction:column;flex:1}
.card-body h3{font-family:var(--font-display);font-size:1.5rem;transition:color .2s}
.card:hover .card-body h3{color:var(--primary)}
.card-body p{margin-top:.5rem;font-size:.875rem;color:var(--muted-fg)}
.card-cta{display:inline-block;margin-top:1rem;font-size:.875rem;font-weight:500;color:var(--primary)}

/* ---------- Page header (sub-pages) ---------- */
.page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--border)}
.page-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero-overlay{position:absolute;inset:0;
  background:
    linear-gradient(to right, color-mix(in oklab,var(--secondary) 95%, transparent), color-mix(in oklab,var(--secondary) 80%, transparent), color-mix(in oklab,var(--secondary) 40%, transparent)),
    linear-gradient(to bottom, transparent, transparent, var(--bg));
}
.page-hero-inner{position:relative;max-width:var(--container);margin:0 auto;padding:3.5rem 1.25rem;color:var(--secondary-fg)}
@media(min-width:768px){.page-hero-inner{padding:7rem 1.5rem}}
.page-hero-inner .kicker{color:var(--gold);margin-bottom:.75rem;font-size:.625rem}
@media(min-width:768px){.page-hero-inner .kicker{font-size:.75rem}}
.page-hero h1{font-size:1.875rem;max-width:42rem}
@media(min-width:640px){.page-hero h1{font-size:2.5rem}}
@media(min-width:768px){.page-hero h1{font-size:3.75rem}}
.page-hero .lead{margin-top:1rem;max-width:42rem;color:color-mix(in oklab,var(--secondary-fg) 85%, transparent)}
@media(min-width:768px){.page-hero .lead{font-size:1rem}}

/* ---------- Timeline (historia) ---------- */
.timeline-section{max-width:var(--container-narrow);margin:0 auto;padding:5rem 1.5rem}
.timeline{position:relative}
.timeline::before{
  content:"";position:absolute;left:1rem;top:0;height:100%;width:1px;
  background:linear-gradient(to bottom,var(--primary),var(--gold),color-mix(in oklab,var(--primary) 20%, transparent));
}
@media(min-width:768px){.timeline::before{left:50%}}
.timeline ol{display:flex;flex-direction:column;gap:3rem}
.timeline li{position:relative}
@media(min-width:768px){.timeline li{display:grid;grid-template-columns:1fr 1fr;gap:3rem}}
.timeline-dot{
  position:absolute;left:1rem;top:.75rem;z-index:1;transform:translateX(-50%);
  width:2.5rem;height:2.5rem;border-radius:9999px;
  background:var(--primary);color:var(--primary-fg);
  border:2px solid var(--bg);
  display:grid;place-items:center;
  box-shadow:0 0 0 4px color-mix(in oklab, var(--primary) 20%, transparent);
}
.timeline-dot svg{width:1.125rem;height:1.125rem;display:block}
@media(min-width:768px){.timeline-dot{left:50%}}
.timeline-card{padding-left:4rem}
@media(min-width:768px){
  .timeline li.left .timeline-card{padding-left:0;padding-right:4rem;text-align:right}
  .timeline li.right .timeline-card{grid-column:2;padding-left:4rem}
}
.timeline-card article{
  border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:1.25rem;
  transition:transform .25s, box-shadow .25s;
}
.timeline-card article:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(0,0,0,.2)}
.timeline-year{font-family:var(--font-display);font-size:1.875rem;color:var(--primary)}
@media(min-width:768px){.timeline-year{font-size:2.25rem}}
.timeline-card h3{margin-top:.5rem;font-family:var(--font-sans);font-size:1.125rem;font-weight:600}
.timeline-card p{margin-top:.5rem;font-size:.875rem;color:var(--muted-fg)}

/* ---------- Kultura grid + pagination ---------- */
.kultura-section{max-width:var(--container);margin:0 auto;padding:4rem 1.5rem 5rem}
.kultura-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;margin-bottom:1.5rem;flex-wrap:wrap}
.kultura-head .kicker{color:var(--primary)}
.kultura-head h2{margin-top:.5rem;font-family:var(--font-display);font-size:1.875rem}
@media(min-width:768px){.kultura-head h2{font-size:2.25rem}}
.kultura-head .lead{margin-top:.5rem;max-width:36rem;font-size:.875rem;color:var(--muted-fg)}
.pager{display:flex;align-items:center;gap:.75rem}
.pager .count{font-size:.75rem;color:var(--muted-fg)}
.pager-btn{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:9999px;
  border:1px solid var(--border);background:var(--card);transition:transform .15s,border-color .15s,color .15s;
}
.pager-btn:hover{transform:translateY(-2px);border-color:var(--primary);color:var(--primary)}

.kultura-grid{display:grid;gap:1.25rem}
@media(min-width:768px){.kultura-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.kultura-grid{grid-template-columns:repeat(3,1fr)}}

.fact-card{
  display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);
  border-radius:.5rem;padding:1.5rem;transition:transform .25s,border-color .25s;
  animation:fade-up .55s ease-out both;
}
.fact-card:hover{transform:translateY(-4px);border-color:var(--primary)}
.fact-img{margin-bottom:1rem;border:1px solid var(--border);background:var(--muted);border-radius:.375rem;overflow:hidden;height:8rem}
.fact-img img{width:100%;height:100%;object-fit:contain}
.fact-row{display:flex;align-items:baseline;justify-content:space-between}
.fact-kr{font-family:var(--font-display);font-size:1.875rem;color:var(--primary)}
.fact-rom{font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.fact-card h3{margin-top:.5rem;font-family:var(--font-display);font-size:1.25rem}
.fact-card p{margin-top:.75rem;font-size:.875rem;color:var(--muted-fg)}

.dots{margin-top:2rem;display:flex;justify-content:center;gap:.375rem}
.dot-btn{height:.375rem;width:.375rem;border-radius:9999px;background:var(--border);transition:width .25s,background .25s}
.dot-btn:hover{background:var(--muted-fg)}
.dot-btn.is-active{width:2rem;background:var(--primary)}

/* ---------- Filmy ---------- */
.films-section{max-width:var(--container);margin:0 auto;padding:5rem 1.5rem}
.films-grid{display:grid;gap:1.5rem}
@media(min-width:768px){.films-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.films-grid{grid-template-columns:repeat(3,1fr)}}
.film-card{
  display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--border);background:var(--card);
  border-radius:.5rem;text-align:left;transition:transform .25s,border-color .25s;
  width:100%;
}
.film-card:hover{transform:translateY(-4px);border-color:var(--primary)}
.poster-wrap{position:relative;aspect-ratio:2/3;overflow:hidden;background:var(--muted)}
.poster-wrap img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.film-card:hover .poster-wrap img{transform:scale(1.05)}
.poster-tag{
  position:absolute;top:.5rem;right:.5rem;padding:.125rem .5rem;border-radius:9999px;
  background:color-mix(in oklab,var(--bg) 85%, transparent);backdrop-filter:blur(6px);
  font-size:.625rem;text-transform:uppercase;letter-spacing:.15em;
}
.film-body{padding:1.25rem;display:flex;flex-direction:column;flex:1}
.film-body h3{font-family:var(--font-display);font-size:1.25rem;line-height:1.2}
.film-card:hover .film-body h3{color:var(--primary)}
.film-body .director{margin-top:.25rem;font-size:.75rem;color:var(--muted-fg)}
.film-body .note{margin-top:.75rem;font-size:.875rem;color:var(--muted-fg);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.film-body .review-cta{margin-top:1rem;font-size:.75rem;font-weight:500;color:var(--primary)}

.film-detail{animation:fade-up .55s ease-out both}
.film-back{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:2rem;font-size:.875rem;color:var(--muted-fg);transition:color .15s}
.film-back:hover{color:var(--primary)}
.film-detail-grid{display:grid;gap:2.5rem}
@media(min-width:768px){.film-detail-grid{grid-template-columns:1fr 2fr}}
.film-poster-card{border:1px solid var(--border);border-radius:.5rem;overflow:hidden;box-shadow:0 25px 50px -12px rgba(0,0,0,.3)}
.film-aside-meta{margin-top:1rem;border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:1.5rem}
.film-aside-meta dt{font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.film-aside-meta dd{margin-top:.125rem}
.film-aside-meta dd ul{margin-top:.25rem;display:flex;flex-direction:column;gap:.125rem}
.film-aside-meta dd ul li{display:flex;align-items:baseline;gap:.5rem}
.film-aside-meta dd ul li::before{content:"·";color:var(--primary)}
.film-aside-meta .row{margin-top:.75rem}
.film-aside-meta .row:first-child{margin-top:0}

.review-tag{
  display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem;
  padding:.25rem .75rem;border-radius:9999px;border:1px solid var(--border);
  background:color-mix(in oklab,var(--secondary) 10%, transparent);
  font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--primary);
}
.review-card{border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:2rem}
.review-card h2{font-family:var(--font-display);font-size:1.875rem;margin-bottom:1rem}
.review-card .review-text{font-family:var(--font-display);font-size:1.125rem;line-height:1.7;color:color-mix(in oklab,var(--fg) 90%, transparent)}
.review-card .review-foot{margin-top:1.5rem;font-size:.75rem;color:var(--muted-fg)}

/* ---------- Kolekcje ---------- */
.kolekcje-section{
  max-width:var(--container);margin:0 auto;padding:5rem 1.5rem;
  display:grid;gap:3rem;
}
@media(min-width:768px){.kolekcje-section{grid-template-columns:1.1fr 1fr;align-items:start}}
.kolekcje-list{display:flex;flex-direction:column;gap:1rem}
.kolekcje-item{
  display:flex;align-items:flex-start;gap:1.25rem;border:1px solid var(--border);background:var(--card);
  border-radius:.5rem;padding:1.25rem;transition:transform .25s,border-color .25s,box-shadow .25s;
}
.kolekcje-item:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 20px 40px -20px rgba(0,0,0,.2)}
.kolekcje-item .seal{width:3.5rem;height:3.5rem;flex-shrink:0;font-size:1.25rem}
.kolekcje-item .body{flex:1}
.kolekcje-row{display:flex;align-items:center;justify-content:space-between}
.kolekcje-row h3{font-family:var(--font-display);font-size:1.25rem}
.kolekcje-item:hover .kolekcje-row h3{color:var(--primary)}
.kolekcje-row .num{font-size:.75rem;color:var(--muted-fg)}
.kolekcje-item p{margin-top:.25rem;font-size:.875rem;color:var(--muted-fg)}
.kolekcje-cta{margin-top:.75rem;display:inline-flex;align-items:center;gap:.25rem;font-size:.75rem;font-weight:500;color:var(--primary)}
.kolekcje-aside{position:relative}
.kolekcje-aside::before{
  content:"";position:absolute;inset:-1rem;z-index:-1;border-radius:.5rem;
  background:linear-gradient(135deg, color-mix(in oklab,var(--primary) 20%, transparent), color-mix(in oklab,var(--gold) 15%, transparent), color-mix(in oklab,var(--secondary) 20%, transparent));
  filter:blur(40px);
}
.kolekcje-aside img{border:1px solid var(--border);border-radius:.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.3)}
.stats{margin-top:1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;text-align:center}
.stat{border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:1rem}
.stat .n{font-family:var(--font-display);font-size:1.5rem;color:var(--primary)}
.stat .l{font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.note-line{padding-top:.5rem;font-size:.75rem;color:var(--muted-fg)}

/* ---------- Hangul kurs ---------- */
.hangul-section{max-width:var(--container);margin:0 auto;padding:4rem 1.5rem}
.step{padding:3rem 0;border-top:1px solid var(--border)}
.step:first-child{border-top:none;padding-top:0}
.step-grid{display:grid;gap:2rem}
@media(min-width:768px){.step-grid{grid-template-columns:120px 1fr}}
.step-num{font-family:var(--font-display);font-size:3rem;color:var(--primary)}
.step h2{font-family:var(--font-display);font-size:1.5rem}
@media(min-width:768px){.step h2{font-size:1.875rem}}
.step p.intro{margin-top:.75rem;max-width:48rem;color:var(--muted-fg)}

.glyph-grid{margin-top:1.5rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.glyph-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px){.glyph-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:1024px){.glyph-grid{grid-template-columns:repeat(7,1fr)}}
.glyph{
  border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:1rem;text-align:center;
  transition:transform .2s,border-color .2s;
}
.glyph:hover{transform:translateY(-4px);border-color:var(--primary)}
.glyph .kr{font-family:var(--font-display);font-size:2rem;color:var(--primary)}
.glyph .rom{margin-top:.25rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.glyph .tip{margin-top:.5rem;font-size:.6875rem;line-height:1.3;color:color-mix(in oklab,var(--fg) 70%, transparent)}

.syllable-grid{margin-top:1.5rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.syllable-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:768px){.syllable-grid{grid-template-columns:repeat(4,1fr)}}
.syl{border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:1.25rem;text-align:center}
.syl .kr{font-family:var(--font-display);font-size:3rem;color:var(--primary)}
.syl .rom{margin-top:.5rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.syl .pl{margin-top:.25rem;font-size:.75rem;color:color-mix(in oklab,var(--fg) 70%, transparent)}

.word-grid{margin-top:1.5rem;display:grid;gap:.75rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:768px){.word-grid{grid-template-columns:repeat(4,1fr)}}
.word{border:1px solid var(--border);background:var(--card);border-radius:.5rem;padding:1.25rem;transition:transform .2s,border-color .2s}
.word:hover{transform:translateY(-4px);border-color:var(--primary)}
.word .kr{font-family:var(--font-display);font-size:1.875rem;color:var(--primary)}
.word .rom{margin-top:.5rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted-fg)}
.word .pl{margin-top:.25rem;font-size:.875rem}

/* ---------- Utilities ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.hidden{display:none !important}

/* ---------- Muzyka ---------- */
.music-section{max-width:var(--container);margin:0 auto;padding:5rem 1.5rem}
.music-grid{display:grid;gap:1.75rem;margin-top:1.5rem}
@media(min-width:768px){.music-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1200px){.music-grid{grid-template-columns:repeat(3,1fr)}}
.music-card{
  display:flex;flex-direction:column;border:1px solid var(--border);background:var(--card);
  border-radius:.75rem;overflow:hidden;transition:transform .25s,border-color .25s;
  animation:fade-up .55s ease-out both;
}
.music-card:hover{transform:translateY(-4px);border-color:var(--primary)}
.video-embed{position:relative;aspect-ratio:16/9;background:#000}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.music-body{padding:1.25rem 1.25rem 1.5rem;display:flex;flex-direction:column;gap:.5rem}
.music-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.music-year{
  font-size:.6875rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);
  font-weight:600;
}
.music-tag{
  font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-fg);
  padding:.125rem .5rem;border:1px solid var(--border);border-radius:9999px;
}
.music-body h3{font-family:var(--font-display);font-size:1.125rem;line-height:1.3;margin-top:.125rem}
.music-card:hover .music-body h3{color:var(--primary)}
.music-body p{font-size:.875rem;color:var(--muted-fg);line-height:1.6;margin-top:.25rem}