/* ===== Ink n Tea – publikus oldal =====
   Lágy, íves formák; Asena kékje és Kitsune vöröse. */
:root {
  --paper: #faf6ef;
  --paper-2: #f3ece1;
  --card: #fffcf7;
  --ink: #26211f;
  --ink-2: #5b524e;
  --ink-3: #8f8580;
  --line: #e8dfd2;
  --wolf: #33557a;
  --wolf-soft: #dfe7f0;
  --fox: #c4553a;
  --fox-soft: #f6e1d9;
  --serif: 'Source Serif 4', Charter, Georgia, serif;
  --display: 'Fraunces', 'Source Serif 4', Georgia, serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --round: 28px;
  --shadow: 0 1px 2px rgba(60, 40, 30, .05), 0 12px 32px -12px rgba(60, 40, 30, .16);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17151a; --paper-2: #201d23; --card: #1e1b21; --ink: #efe9e3; --ink-2: #c2b9b4; --ink-3: #8b8287; --line: #322d34;
    --wolf: #94b5d8; --wolf-soft: #23303e; --fox: #ec9a80; --fox-soft: #3a2621;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px -12px rgba(0, 0, 0, .55);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  color: var(--ink); font: 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(48rem 30rem at -8% -6%, color-mix(in srgb, var(--wolf) 13%, transparent), transparent 70%),
    radial-gradient(44rem 28rem at 108% 4%, color-mix(in srgb, var(--fox) 12%, transparent), transparent 70%),
    var(--paper);
  background-repeat: no-repeat;
}
a { color: inherit; }
img { max-width: 100%; }
.muted { color: var(--ink-3); }
.ic { width: 18px; height: 18px; flex: none; }
.ic.flip { transform: scaleX(-1); }
.mark { width: 1em; height: 1em; flex: none; }
.by-wolf { --me: var(--wolf); --me-soft: var(--wolf-soft); }
.by-fox { --me: var(--fox); --me-soft: var(--fox-soft); }

/* ----- fejléc ----- */
header.site {
  width: 100%; max-width: 1120px; margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: italic 500 25px/1 var(--display); letter-spacing: -.01em; }
.brand-duo { width: 58px; height: 34px; color: var(--ink-3); }
.site-nav { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--line); }
.site-nav a { padding: 7px 16px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 500; font-size: 15px; transition: background .2s, color .2s; }
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current] { background: var(--ink); color: var(--paper); }
/* ----- nyelvválasztó tabletta (földgömb, HU | EN, csúszó kiemelés) ----- */
.lang-pill { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 3px 3px 3px 10px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-3); font: 600 12px/1 var(--sans); letter-spacing: .06em; flex: none; }
.lang-pill .ic { width: 15px; height: 15px; flex: none; }
.lang-pill .ic-g { display: inline-flex; }
.lang-pill .opts { position: relative; display: grid; grid-template-columns: 1fr 1fr; }
.lang-pill .thumb { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; border-radius: 999px; background: linear-gradient(135deg, var(--wolf), var(--fox)); box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .28s cubic-bezier(.4, 1.35, .5, 1); }
.lang-pill[data-active="en"] .thumb { transform: translateX(100%); }
.lang-pill .opt { position: relative; z-index: 1; min-width: 38px; padding: 7px 11px; text-align: center; border: 0; background: none; color: var(--ink-2); font: inherit; letter-spacing: inherit; text-decoration: none; cursor: pointer; border-radius: 999px; transition: color .2s; }
.lang-pill .opt:hover { color: var(--ink); }
.lang-pill .opt[aria-checked="true"], .lang-pill .opt[aria-current] { color: var(--on, #fff); cursor: default; }
.lang-pill .dot { display: inline-block; width: 5px; height: 5px; margin-left: 5px; border-radius: 50%; background: currentColor; vertical-align: middle; opacity: .75; }
.lang-pill .dot[hidden] { display: none; }

/* ----- nyitó rész ----- */
.list { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px 40px; flex: 1; }
.hero { position: relative; text-align: center; padding: 56px 0 46px; }
.hero-swirl { position: absolute; inset: 10px 0 auto; width: 100%; height: 170px; z-index: -1; }
.hero-duo { width: 104px; height: 60px; color: var(--ink-3); margin-bottom: 8px; }
.hero h1 { font: italic 500 clamp(44px, 7vw, 76px)/1.02 var(--display); letter-spacing: -.025em; margin: 0 0 14px; }
.tagline { font: 400 clamp(18px, 2.4vw, 22px)/1.45 var(--serif); color: var(--ink-2); margin: 0; }

/* ----- kártyák ----- */
.kind-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--me-soft, var(--paper-2)); color: var(--me, var(--ink-2)); font: 600 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.kind-pill.small { height: 22px; padding: 0 10px; font-size: 11px; }
.post a { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--card); border-radius: var(--round); overflow: hidden; box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.post a:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(60, 40, 30, .06), 0 22px 44px -16px rgba(60, 40, 30, .28); }
.post-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--me-soft); border-radius: 0 0 50% 50% / 0 0 14% 14%; }
.post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.post a:hover .post-img img { transform: scale(1.04); }
.post-img.placeholder {
  display: grid; place-items: center; color: var(--me);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='60' viewBox='0 0 240 60'%3E%3Cpath d='M0 30c30-22 60-22 90 0s60 22 90 0 45-22 60-11' fill='none' stroke='%238f8580' stroke-opacity='.22' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / 240px 34px repeat,
    radial-gradient(circle at 30% 30%, var(--card), var(--me-soft) 70%);
}
.post-img.placeholder .mark { width: 64px; height: 64px; opacity: .8; stroke-width: 1.1; }
.post-body { padding: 20px 24px 22px; display: flex; flex-direction: column; flex: 1; }
.post-meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.post h2 { font: 500 24px/1.22 var(--display); letter-spacing: -.012em; margin: 0 0 8px; }
.post p { margin: 0 0 16px; color: var(--ink-2); font: 17px/1.5 var(--serif); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-size: 14px; }
.who { display: inline-flex; align-items: center; gap: 7px; color: var(--me); font-weight: 600; }
.who .mark { width: 22px; height: 22px; }
.read { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); transition: color .2s, gap .2s; }
.post a:hover .read { color: var(--me); gap: 8px; }

.featured-wrap { margin-bottom: 36px; }
.post.featured a { display: grid; grid-template-columns: 1.25fr 1fr; align-items: stretch; }
.post.featured .post-img { aspect-ratio: auto; min-height: 380px; border-radius: 0 46% 46% 0 / 0 50% 50% 0; }
.post.featured .post-body { padding: 40px 44px; justify-content: center; }
.post.featured h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.12; margin-bottom: 14px; }
.post.featured p { font-size: 19px; -webkit-line-clamp: 4; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; }
.pager { display: flex; justify-content: space-between; margin-top: 42px; }
.pill { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); text-decoration: none; font-weight: 500; }
.pill:hover { border-color: var(--ink-3); }
.empty { text-align: center; color: var(--ink-3); font: 19px var(--serif); padding: 40px 0; }

/* ----- egy írás ----- */
.article { width: 100%; max-width: 760px; margin: 0 auto; padding: 30px 24px 30px; flex: 1; }
.art-head { text-align: center; margin: 20px 0 36px; }
.art-head h1 { font: 500 clamp(36px, 5.6vw, 56px)/1.08 var(--display); letter-spacing: -.022em; margin: 18px 0 14px; }
.subtitle { font: italic 400 clamp(19px, 2.4vw, 23px)/1.45 var(--serif); color: var(--ink-2); margin: 0 auto 26px; max-width: 34em; }
.byline { display: inline-flex; align-items: center; gap: 12px; text-align: left; padding: 6px 18px 6px 6px; border-radius: 999px; background: color-mix(in srgb, var(--card) 80%, transparent); border: 1px solid var(--line); }
.avatar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--me-soft); color: var(--me); }
.avatar .mark { width: 28px; height: 28px; }
.by-text { display: flex; flex-direction: column; line-height: 1.25; font-size: 14px; }
.by-text strong { color: var(--me); }
.by-text span { color: var(--ink-3); font-size: 13px; }
.cover { margin: 0 -40px 44px; }
.cover img { width: 100%; max-height: 560px; object-fit: cover; display: block; border-radius: 40px 40px 40px 40px / 40px 40px 40px 40px; box-shadow: var(--shadow); }
.cover figcaption, .body figcaption { text-align: center; font-size: 14px; color: var(--ink-3); margin-top: 12px; }
.cover figcaption a, .body figcaption a { color: inherit; }

.body { font: 400 21px/1.68 var(--serif); letter-spacing: -.003em; word-wrap: break-word; }
.body > p:first-child::first-letter { float: left; font: 500 4.1em/.82 var(--display); padding: .06em .1em 0 0; color: var(--me); }
.body p { margin: 0 0 1.15em; }
.body h2 { font: 500 32px/1.2 var(--display); margin: 1.6em 0 .5em; letter-spacing: -.015em; }
.body h3 { font: 600 24px/1.3 var(--display); margin: 1.4em 0 .4em; }
.body blockquote { margin: 1.6em 0; padding: 20px 28px; border-radius: 6px 26px 26px 6px; border-left: 4px solid var(--me); background: var(--me-soft); font-style: italic; }
.body pre { font: 15px/1.55 ui-monospace, Menlo, Consolas, monospace; background: var(--paper-2); padding: 18px 20px; border-radius: 18px; overflow-x: auto; white-space: pre-wrap; }
.body code { font: .85em ui-monospace, Menlo, Consolas, monospace; background: var(--paper-2); padding: 2px 6px; border-radius: 6px; }
.body pre code { background: none; padding: 0; }
.body figure { margin: 2.2em 0; }
.body figure img { display: block; margin: 0 auto; border-radius: 22px; }
.body ul, .body ol { padding-left: 1.3em; }
.body li { margin: .3em 0; }
.body li::marker { color: var(--me); }
.body a { text-decoration-color: color-mix(in srgb, var(--me) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.body a:hover { color: var(--me); }
.body hr {
  border: 0; height: 22px; margin: 2.4em auto; width: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 22'%3E%3Cpath d='M2 11c18-12 36-12 54 0s36 12 54 0 36-12 54 0' fill='none' stroke='%238f8580' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; }
.extra { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.extra.wide { grid-column: 1 / -1; }
.extra-label { display: flex; align-items: center; gap: 7px; font: 600 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--me); }
.extra-title { font: 600 18px/1.35 var(--serif); margin: 9px 0 2px; }
.extra-title a { text-underline-offset: 3px; }
.extra-meta { font-size: 14px; color: var(--ink-2); }
.stars { color: #d39434; letter-spacing: 2px; font-size: 15px; }
.stars .off { opacity: .25; }
.book-row { display: flex; gap: 16px; align-items: flex-start; }
.book-cover { width: 70px; border-radius: 6px 10px 10px 6px; box-shadow: 0 4px 12px rgba(0, 0, 0, .15); margin-top: 8px; }
.embed { width: 100%; border: 0; border-radius: 18px; margin-top: 14px; display: block; background: var(--paper-2); }
.embed.youtube { aspect-ratio: 16 / 9; }
.embed.spotify { height: 152px; }
.embed.spotify.tall { height: 352px; }
.embed.map { height: 240px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.tags span { padding: 5px 14px; border-radius: 999px; background: var(--paper-2); color: var(--ink-2); font-size: 14px; }
.fin { display: flex; justify-content: center; margin: 54px 0 10px; color: var(--me); }
.fin .mark { width: 36px; height: 36px; opacity: .8; }
.back { text-align: center; margin: 18px 0 0; }
.back a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--ink-2); padding: 10px 18px; border-radius: 999px; }
.back a:hover { background: var(--paper-2); color: var(--ink); }

/* ----- lábléc ----- */
footer.site { margin-top: 70px; position: relative; color: var(--ink-2); }
.wave { display: block; width: 100%; height: 70px; fill: var(--paper-2); }
.foot { background: var(--paper-2); text-align: center; padding: 10px 24px 46px; }
.foot-duo { width: 84px; height: 48px; color: var(--ink-3); }
.foot-name { font: italic 500 24px/1.2 var(--display); color: var(--ink); margin: 6px 0 4px; }
.foot-tag { font: 17px var(--serif); margin: 0 0 14px; }
.foot-links { display: flex; justify-content: center; gap: 10px; font-size: 14px; margin: 0; color: var(--ink-3); }
.foot-links a { text-decoration: none; color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; }

@media (max-width: 860px) {
  .post.featured a { grid-template-columns: 1fr; }
  .post.featured .post-img { min-height: 0; aspect-ratio: 16 / 10; border-radius: 0 0 50% 50% / 0 0 14% 14%; }
  .post.featured .post-body { padding: 24px 26px 26px; }
  .cover { margin: 0 0 36px; }
  .cover img { border-radius: 26px; }
}
@media (max-width: 600px) {
  header.site { padding: 16px; justify-content: center; }
  .brand { font-size: 22px; }
  .list, .article { padding-left: 16px; padding-right: 16px; }
  .hero { padding: 34px 0 30px; }
  .posts { gap: 20px; }
  .body { font-size: 18.5px; }
  .extras { grid-template-columns: 1fr; }
  .site-nav a { padding: 6px 12px; }
}

@media (prefers-color-scheme: dark) { .lang-pill { --on: #1a1618; } }

.facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; color: var(--ink-3); font: 500 14px/1.3 var(--sans); }
.facts .fact { display: inline-flex; align-items: center; gap: 6px; }
.facts .ic { width: 16px; height: 16px; }
.also-pub { margin: 26px 0 0; padding: 12px 18px; border-radius: 18px; background: var(--paper-2); color: var(--ink-2); font: 500 14px var(--sans); }

/* ----- polc, zene, pillanatok ----- */
.hero.small { padding: 34px 0 26px; }
.hero.small h1 { font-size: clamp(36px, 5vw, 56px); }
.shelf { margin: 0 0 40px; }
.shelf h2 { font: italic 500 28px var(--display); margin: 0 0 18px; }
.shelf-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 20px; }
.shelf-item { display: grid; gap: 8px; align-content: start; }
.shelf-cover { aspect-ratio: 2 / 3; border-radius: 6px 16px 16px 6px; overflow: hidden; background: var(--paper-2); box-shadow: var(--shadow); }
.shelf-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-ph { display: grid; place-content: center; justify-items: center; gap: 10px; width: 100%; height: 100%; padding: 14px; text-align: center; color: var(--me); background: var(--me-soft); font: 600 15px/1.2 var(--display); }
.cover-ph .ic { width: 30px; height: 30px; }
.shelf-info { display: grid; gap: 3px; }
.shelf-info strong { font: 600 16px/1.25 var(--display); }
.shelf-info a { text-decoration: none; }
.shelf-info a:hover { text-decoration: underline; }
.shelf-sub { color: var(--ink-3); font: 400 14px var(--sans); }
.shelf-who { display: flex; gap: 5px; }
.shelf-who .mark { width: 16px; height: 16px; color: var(--me); }
.year-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0 0 24px; }
.year-nav a { padding: 6px 16px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; font: 600 14px var(--sans); color: var(--ink-2); }
.year-nav a:hover { background: var(--card); }
.music-year { max-width: 760px; margin: 0 auto 36px; }
.music-year h2 { font: italic 500 40px var(--display); margin: 0 0 6px; }
.music-year h3 { margin: 22px 0 8px; font: 600 13px var(--sans); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.track-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.track-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 9px 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); }
.track-mark { color: var(--me); display: inline-flex; }
.track-mark .mark { width: 18px; height: 18px; }
.track-text { display: flex; align-items: center; gap: 8px; min-width: 0; }
.track-text .ic { width: 16px; height: 16px; flex: none; color: var(--ink-3); }
.track-text a { text-decoration: none; }
.track-text a:hover { text-decoration: underline; }
.track-date { color: var(--ink-3); font: 500 13px var(--sans); }
.track-post { display: inline-flex; color: var(--ink-3); }
.track-post .ic { width: 16px; height: 16px; }
.list.with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 270px; column-gap: 34px; align-items: start; }
.list.with-aside > * { grid-column: 1; }
.list.with-aside > .hero { grid-column: 1 / -1; }
.list.with-aside > .moments { grid-column: 2; grid-row: 2 / span 5; }
.moments { position: sticky; top: 20px; display: grid; gap: 12px; }
.moments h2 { margin: 0 0 2px 4px; font: italic 500 24px var(--display); }
.moment { position: relative; display: grid; align-content: end; min-height: 170px; overflow: hidden; border-radius: 24px; background: var(--me-soft); text-decoration: none; color: inherit; isolation: isolate; box-shadow: var(--shadow); }
.moment img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.moment:has(img) { color: #fff; }
.moment:has(img)::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 8, 12, .72), rgba(10, 8, 12, 0) 62%); }
.moment-text { padding: 14px 18px 4px; font: 400 16px/1.35 var(--serif); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.moment-meta { display: flex; align-items: center; gap: 6px; padding: 4px 18px 14px; font: 600 12px var(--sans); opacity: .92; }
.moment-meta .mark { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .list.with-aside { display: block; }
  .moments { position: static; display: flex; overflow-x: auto; margin-top: 28px; padding-bottom: 8px; }
  .moments h2 { display: none; }
  .moment { flex: 0 0 200px; }
}
@media (max-width: 680px) { .site-nav { flex-wrap: wrap; justify-content: center; border-radius: 26px; } }