/* Наталка Муркіт — авторський сайт. Дизайн-проба: Головна + сторінка твору.
   Токени спочатку, компоненти потім (skill_build_beautiful_site). */

:root{
  --bg:            oklch(97.2% 0.014 78);
  --bg-alt:        oklch(94.5% 0.020 70);
  --bg-card:       oklch(99% 0.006 78);
  --ink:           oklch(24% 0.024 50);
  --ink-soft:      oklch(46% 0.020 50);
  --ink-faint:     oklch(62% 0.016 55);
  --line:          oklch(87% 0.018 60);
  --line-soft:     oklch(91% 0.014 65);
  --accent:        oklch(40% 0.115 22);   /* глибоке вино, не indigo */
  --accent-ink:    oklch(97% 0.01 22);
  --accent-soft:   oklch(90% 0.045 20);
  --accent-soft-2: oklch(95% 0.03 20);
  --gold:          oklch(72% 0.10 75);
  --gold-ink:      oklch(30% 0.05 75);
  --sage:          oklch(72% 0.06 150);
  --sage-ink:      oklch(30% 0.05 150);
  --dust:          oklch(78% 0.04 300);
  --dust-ink:      oklch(32% 0.04 300);
  --shadow-1: 0 1px 2px oklch(30% 0.03 50 / 0.06), 0 4px 16px oklch(30% 0.03 50 / 0.05);
  --shadow-2: 0 2px 4px oklch(30% 0.03 50 / 0.08), 0 12px 32px oklch(30% 0.03 50 / 0.10);
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --measure: 66ch;
  --container: 1180px;
  --font-script: "Caveat", cursive;
  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-serif: "Literata", Georgia, "Times New Roman", serif;
  --font-sans: "Work Sans", "Segoe UI", Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ color-scheme:light; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:600; letter-spacing:-0.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

.wrap{ max-width:var(--container); margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }

/* texture: тонке паперове зерно замість фото/градієнту */
.grain{ position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:radial-gradient(oklch(20% 0 0) 0.6px, transparent 0.6px);
  background-size:3px 3px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:oklch(97.2% 0.014 78 / 0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-header .wrap{ display:flex; align-items:center; gap:24px; padding-block:14px; }
.brand{ display:flex; flex-direction:column; line-height:1; margin-right:auto; }
.brand .name{ font-family:var(--font-script); font-size:30px; color:var(--accent); }
.brand .tag{ font-family:var(--font-sans); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-top:2px; }
.nav{ display:flex; align-items:center; gap:4px; }
.nav > li{ position:relative; }
.nav a.top{
  display:flex; align-items:center; gap:6px;
  padding:10px 14px; border-radius:999px; font-size:14.5px; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.nav a.top:hover, .nav li.open a.top{ background:var(--accent-soft-2); color:var(--accent); }
.caret{ width:9px; height:9px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .15s; }
.nav li.open .caret{ transform:translateY(1px) rotate(225deg); }
.dropdown{
  position:absolute; top:calc(100% + 6px); left:0; min-width:200px;
  background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius-m);
  box-shadow:var(--shadow-2); padding:8px; display:none; flex-direction:column; gap:2px;
}
.nav li.open .dropdown{ display:flex; }
.dropdown a{ padding:9px 12px; border-radius:var(--radius-s); font-size:14px; color:var(--ink-soft); }
.dropdown a:hover{ background:var(--accent-soft-2); color:var(--accent); }
.btn{
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  padding:11px 20px; border-radius:999px; font-size:14.5px; font-weight:600;
  border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-primary{ background:var(--accent); color:var(--accent-ink); box-shadow:var(--shadow-1); }
.btn-primary:hover{ box-shadow:var(--shadow-2); transform:translateY(-1px); }
.btn-ghost{ border-color:var(--line); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.header-cta{ display:flex; }
.burger{ display:none; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:none; align-items:center; justify-content:center; }
.burger span, .burger::before, .burger::after{ content:""; display:block; width:18px; height:1.5px; background:var(--ink); position:relative; }
.burger::before{ position:absolute; transform:translateY(-6px); }
.burger::after{ position:absolute; transform:translateY(6px); }

/* mobile nav sheet */
.mobile-nav{ display:none; }

/* ---------- breadcrumb ---------- */
.crumbs{ padding-block:18px 6px; font-size:13px; color:var(--ink-faint); display:flex; gap:6px; flex-wrap:wrap; }
.crumbs a:hover{ color:var(--accent); }
.crumbs .sep{ opacity:.5; }
.crumbs .current{ color:var(--ink-soft); }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding-block:clamp(56px,9vw,108px) clamp(48px,7vw,84px); }
.hero::before{
  content:""; position:absolute; inset:-20% -10% auto -10%; height:70%;
  background:radial-gradient(60% 60% at 30% 20%, var(--gold) 0%, transparent 70%);
  opacity:.16; filter:blur(10px); z-index:0;
}
.hero .wrap{ position:relative; z-index:1; display:grid; gap:28px; max-width:840px; }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.eyebrow .dot{ width:6px; height:6px; border-radius:50%; background:var(--gold); }
.hero h1{ font-size:clamp(38px,6vw,68px); line-height:1.05; }
.hero h1 em{ font-style:italic; color:var(--accent); }
.hero p.lead{ font-family:var(--font-serif); font-size:clamp(17px,2vw,20px); color:var(--ink-soft); max-width:56ch; line-height:1.6; }
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:6px; }
.hero-quote{
  margin-top:28px; padding-top:22px; border-top:1px dashed var(--line);
  display:flex; align-items:flex-start; gap:12px; max-width:60ch;
}
.hero-quote svg{ flex:none; margin-top:4px; color:var(--gold-ink); }
.hero-quote p{ font-family:var(--font-display); font-style:italic; font-size:16.5px; color:var(--ink-soft); line-height:1.55; }

/* ---------- section shell ---------- */
section{ position:relative; z-index:1; }
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; flex-wrap:wrap; }
.section-head h2{ font-size:clamp(24px,3vw,32px); }
.section-head .see-all{ font-size:14px; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.icon-heart{ width:14px; height:14px; }

/* ---------- творчість grid (асиметрична, не 3 однакові картки) ---------- */
.creativity{ padding-block:8px clamp(56px,7vw,96px); }
.creativity-grid{
  display:grid; gap:18px;
  grid-template-columns:repeat(6,1fr);
}
.tile{
  border-radius:var(--radius-l); padding:28px; background:var(--bg-card);
  border:1px solid var(--line-soft); box-shadow:var(--shadow-1);
  display:flex; flex-direction:column; gap:16px; transition:box-shadow .18s ease, transform .18s ease;
}
.tile:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.tile.tile-lg{ grid-column:span 3; min-height:236px; justify-content:space-between; }
.tile.tile-sm{ grid-column:span 3; }
.tile-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; }
.tile.child .tile-icon{ background:var(--accent-soft-2); color:var(--accent); }
.tile.adult .tile-icon{ background:var(--dust); color:var(--dust-ink); }
.tile.order .tile-icon{ background:var(--gold); color:var(--gold-ink); }
.tile.contact .tile-icon{ background:var(--sage); color:var(--sage-ink); }
.tile h3{ font-size:22px; }
.tile p{ color:var(--ink-soft); font-size:14.5px; line-height:1.55; }
.chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{ font-size:12.5px; padding:5px 11px; border-radius:999px; background:var(--bg-alt); color:var(--ink-soft); border:1px solid var(--line-soft); }
.tile .go{ font-size:14px; font-weight:600; color:var(--accent); display:inline-flex; align-items:center; gap:6px; margin-top:auto; }
.tile .go svg{ transition:transform .15s; }
.tile:hover .go svg{ transform:translateX(3px); }

/* ---------- latest works ---------- */
.latest{ padding-block:8px clamp(56px,7vw,96px); }
.latest-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.work-card{
  background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius-m);
  padding:20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-1);
  transition:box-shadow .18s ease, transform .18s ease;
}
.work-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); }
.tag{ align-self:flex-start; font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; font-weight:700; padding:4px 10px; border-radius:999px; }
.tag-book{ background:var(--accent-soft); color:var(--accent); }
.tag-poem{ background:var(--dust); color:var(--dust-ink); }
.tag-song{ background:var(--gold); color:var(--gold-ink); }
.tag-anim{ background:var(--sage); color:var(--sage-ink); }
.work-card h4{ font-size:18px; line-height:1.3; }
.work-card p{ font-size:13.5px; color:var(--ink-soft); line-height:1.5; }
.work-card .go{ font-size:13.5px; font-weight:600; color:var(--accent); margin-top:auto; display:inline-flex; gap:6px; align-items:center; }

/* ---------- quote band ---------- */
.quote-band{ padding-block:clamp(48px,7vw,80px); background:var(--bg-alt); border-block:1px solid var(--line-soft); }
.quote-band .wrap{ max-width:760px; text-align:center; display:grid; gap:18px; justify-items:center; }
.quote-band blockquote{ font-family:var(--font-display); font-style:italic; font-size:clamp(20px,3vw,30px); line-height:1.5; }
.quote-band cite{ font-family:var(--font-script); font-style:normal; font-size:22px; color:var(--accent); }

/* ---------- footer ---------- */
footer{ padding-block:clamp(48px,6vw,72px) 28px; }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:32px; padding-bottom:32px; border-bottom:1px solid var(--line-soft); }
.footer-grid h5{ font-family:var(--font-sans); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:14px; }
.footer-grid .brand .name{ font-size:28px; }
.footer-grid p{ color:var(--ink-soft); font-size:14px; line-height:1.6; margin-top:8px; }
.footer-links{ display:flex; flex-direction:column; gap:9px; }
.footer-links a{ font-size:14px; color:var(--ink-soft); }
.footer-links a:hover{ color:var(--accent); }
.social-row{ display:flex; gap:10px; margin-top:14px; }
.social-row a{ width:36px; height:36px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.social-row a:hover{ border-color:var(--accent); color:var(--accent); }
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; color:var(--ink-faint); flex-wrap:wrap; gap:10px; }

/* ================= сторінка твору ================= */
.work-hero{ padding-block:18px clamp(28px,4vw,40px); }
.work-hero .tag{ margin-bottom:14px; }
.work-hero h1{ font-size:clamp(32px,5vw,50px); line-height:1.08; max-width:16ch; }
.work-meta{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:13.5px; color:var(--ink-faint); }
.work-meta span{ display:inline-flex; align-items:center; gap:6px; }

.work-layout{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; padding-block:8px clamp(48px,6vw,72px); align-items:start; }

/* audio player */
.player{
  background:var(--accent); color:var(--accent-ink); border-radius:var(--radius-l);
  padding:22px; display:grid; gap:16px; box-shadow:var(--shadow-2); position:sticky; top:96px;
}
.player .p-title{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; opacity:.7; }
.player .p-name{ font-family:var(--font-display); font-size:20px; margin-top:2px; }
.player-controls{ display:flex; align-items:center; gap:14px; }
.play-btn{
  width:52px; height:52px; border-radius:50%; background:var(--accent-ink); color:var(--accent);
  border:none; display:flex; align-items:center; justify-content:center; flex:none; transition:transform .15s;
}
.play-btn:hover{ transform:scale(1.06); }
.play-btn .icon-pause{ display:none; }
.player.playing .play-btn .icon-play{ display:none; }
.player.playing .play-btn .icon-pause{ display:block; }
.wave{ flex:1; display:flex; align-items:center; gap:2px; height:32px; overflow:hidden; }
.wave i{ display:block; flex:1; min-width:2px; background:oklch(97% 0.01 22 / .35); border-radius:2px; }
.player.playing .wave i{ background:oklch(97% 0.01 22 / .8); }
.time-row{ display:flex; justify-content:space-between; font-size:12.5px; opacity:.8; font-variant-numeric:tabular-nums; }
.progress{ height:4px; border-radius:99px; background:oklch(97% 0.01 22 / .25); overflow:hidden; }
.progress i{ display:block; height:100%; width:28%; background:var(--accent-ink); border-radius:99px; }
.player-actions{ display:flex; gap:10px; }
.player-actions button{ flex:1; background:oklch(97% 0.01 22 / .12); border:1px solid oklch(97% 0.01 22 / .25); color:var(--accent-ink); border-radius:999px; padding:9px; font-size:13px; }
.player-actions button:hover{ background:oklch(97% 0.01 22 / .2); }
.player-note{ font-size:12px; opacity:.7; line-height:1.5; }

.lyrics-card{ background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); padding:clamp(24px,4vw,44px); box-shadow:var(--shadow-1); }
.lyrics{ font-family:var(--font-serif); font-size:18px; line-height:1.85; color:var(--ink); display:grid; gap:26px; max-width:var(--measure); }
.lyrics .verse-label{ font-family:var(--font-sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; display:block; }
.lyrics .fold{ display:grid; gap:26px; }
.lyrics .fold.collapsed{ max-height:220px; overflow:hidden; position:relative; }
.lyrics .fold.collapsed::after{
  content:""; position:absolute; inset:auto 0 0 0; height:90px;
  background:linear-gradient(to bottom, transparent, var(--bg-card));
}
.fold-toggle{ margin-top:18px; background:none; border:1px solid var(--line); border-radius:999px; padding:9px 18px; font-size:13.5px; color:var(--accent); display:inline-flex; align-items:center; gap:6px; }
.fold-toggle:hover{ border-color:var(--accent); background:var(--accent-soft-2); }
.fold-toggle svg{ transition:transform .2s; }
.fold-toggle.open svg{ transform:rotate(180deg); }

.action-row{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }
.action-row button{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; padding:9px 16px; border-radius:999px; border:1px solid var(--line); background:none; color:var(--ink-soft); }
.action-row button:hover{ border-color:var(--accent); color:var(--accent); }
.action-row button.liked{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft-2); }

.about-box{ margin-top:28px; background:var(--bg-alt); border-radius:var(--radius-m); padding:22px 24px; display:grid; gap:8px; }
.about-box h5{ font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); }
.about-box p{ font-family:var(--font-serif); font-size:15.5px; color:var(--ink-soft); line-height:1.65; }

.related{ margin-top:12px; }
.related-list{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.related-item{ background:var(--bg-card); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:16px; display:grid; gap:6px; }
.related-item:hover{ border-color:var(--accent); }
.related-item .name{ font-size:14.5px; font-weight:600; }
.related-item .dur{ font-size:12.5px; color:var(--ink-faint); }

/* ---------- utility ---------- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ================= responsive ================= */
@media (max-width:980px){
  .creativity-grid{ grid-template-columns:repeat(2,1fr); }
  .tile.tile-lg, .tile.tile-sm{ grid-column:span 2; }
  .latest-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .work-layout{ grid-template-columns:1fr; }
  .player{ position:static; }
  .related-list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:720px){
  .nav, .header-cta{ display:none; }
  .burger{ display:flex; }
  .mobile-nav{
    display:block; position:fixed; inset:0; z-index:50; background:oklch(24% 0.024 50 / .35);
    opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .mobile-nav.open{ opacity:1; pointer-events:auto; }
  .mobile-nav .sheet{
    position:absolute; top:0; right:0; height:100%; width:min(320px,84vw); background:var(--bg);
    padding:20px; display:flex; flex-direction:column; gap:4px; transform:translateX(100%); transition:transform .25s ease;
    box-shadow:-8px 0 30px oklch(30% 0.03 50 / 0.18);
  }
  .mobile-nav.open .sheet{ transform:translateX(0); }
  .mobile-nav a{ padding:13px 8px; font-size:16px; border-bottom:1px solid var(--line-soft); color:var(--ink); }
  .mobile-nav .close{ align-self:flex-end; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:none; margin-bottom:10px; }
  .mobile-nav .mgroup-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink-faint); padding:14px 8px 4px; }
  .footer-grid{ grid-template-columns:1fr; gap:24px; }
  .related-list{ grid-template-columns:1fr; }
  .hero-quote{ flex-direction:column; }
}