/* ===================== SIGNUM — stil i përbashkët =====================
   TIPOGRAFIA
   Montserrat ......... zëri i Signum — titujt
   Inter .............. fonti i leximit — tekstet
   Cormorant Garamond . nënshkrimi editorial — fjali, shprehje, theks
======================================================================= */
:root{
  --display:"Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --body:"Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ed:"Cormorant Garamond", Georgia, "Times New Roman", serif;

  --pad:clamp(26px, 7.5vw, 132px);
  --section-y:clamp(84px, 13vh, 168px);
  --s1:14px; --s2:26px; --s3:44px; --s4:72px; --s5:clamp(64px,10vh,120px);
  --ease:cubic-bezier(.22,.68,.28,1);
}
html[data-theme="light"]{
  --bg:#FFFEF1; --surface:#F8F5E6; --text:#231F20; --text-soft:#514B45;
  --muted:#948D82; --wine:#792A32; --wine-soft:rgba(121,42,50,.16);
  --rule:rgba(35,31,32,.13); --invert:#171514; --invert-text:#FFFEF1;
  --shadow:0 1px 2px rgba(35,31,32,.04), 0 12px 34px rgba(35,31,32,.06);
  --shadow-lift:0 2px 4px rgba(35,31,32,.05), 0 22px 54px rgba(35,31,32,.10);
  --ghost:.055; --lines:.5;
}
html[data-theme="dark"]{
  --bg:#171514; --surface:#1F1C1A; --text:#FFFEF1; --text-soft:rgba(255,254,241,.72);
  --muted:rgba(255,254,241,.44); --wine:#B2515C; --wine-soft:rgba(178,81,92,.22);
  --rule:rgba(255,254,241,.13); --invert:#FFFEF1; --invert-text:#171514;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 38px rgba(0,0,0,.34);
  --shadow-lift:0 2px 6px rgba(0,0,0,.34), 0 26px 62px rgba(0,0,0,.46);
  --ghost:.07; --lines:.6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--body); font-weight:300; font-size:16.5px; line-height:1.78;
  -webkit-font-smoothing:antialiased;
  transition:background .5s var(--ease), color .5s var(--ease);
}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:1px solid var(--wine); outline-offset:5px}
.wrap{max-width:1240px; margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); position:relative; z-index:2}

html[data-theme="dark"] .on-light{display:none}
html[data-theme="light"] .on-dark{display:none}

/* ---------- TITUJT — Montserrat ---------- */
h1,h2,h3{margin:0; font-family:var(--display)}
h1{font-weight:300; font-size:clamp(30px,4.8vw,62px); line-height:1.14; letter-spacing:-.025em}
h2{font-weight:300; font-size:clamp(24px,3vw,39px); line-height:1.24; letter-spacing:-.02em}
h3{font-weight:600; font-size:11px; letter-spacing:.18em; text-transform:uppercase}

/* ---------- THEKSI EDITORIAL — Cormorant ---------- */
.ed{font-family:var(--ed); font-weight:400; letter-spacing:.01em}
.ed-i{font-family:var(--ed); font-style:italic; font-weight:400}
h1 .ed, h2 .ed, .statement .ed{
  font-family:var(--ed); font-style:italic; font-weight:400;
  letter-spacing:.005em; color:var(--wine); font-size:1.12em;
}

/* ---------- ETIKETA & TRUPI — Inter ---------- */
.eyebrow{font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s1)}
p{margin:0}
.measure{max-width:58ch}
.soft{color:var(--text-soft)}
.stack > * + *{margin-top:var(--s2)}
.center{text-align:center}

/* ---------- shenja diagonale ---------- */
.slash{width:58px; height:20px; position:relative; margin-bottom:var(--s3)}
.slash::before{content:""; position:absolute; left:0; top:50%; width:58px; height:1px; background:var(--wine); transform:rotate(-38deg) scaleX(0); transform-origin:left center; transition:transform .9s var(--ease)}
.in .slash::before{transform:rotate(-38deg) scaleX(1)}
.slash.center{margin-left:auto; margin-right:auto}

/* ===================== NAV ===================== */
.nav{position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(14px); border-bottom:1px solid var(--rule)}
.nav-in{max-width:1240px; margin:0 auto; padding:18px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:22px; transition:padding .4s var(--ease)}
.nav.shrunk .nav-in{padding-top:11px; padding-bottom:11px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand img{height:30px; width:auto}
.brand span{font-family:var(--ed); font-weight:400; font-size:19px; letter-spacing:.26em; padding-left:3px}
.nav-right{display:flex; align-items:center; gap:clamp(14px,2.6vw,34px)}
.nav-links{display:flex; align-items:center; gap:clamp(16px,2.2vw,32px)}
.nav-links a{font-family:var(--body); font-weight:400; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--muted); padding:6px 0; position:relative; transition:color .3s; white-space:nowrap}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--wine); transition:width .35s var(--ease)}
.nav-links a:hover::after,.nav-links a[aria-current="page"]::after{width:100%}
.burger{font-family:var(--body); font-weight:500; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); background:transparent; border:1px solid var(--rule); padding:9px 15px; cursor:pointer; transition:color .3s,border-color .3s}
.burger:hover{color:var(--text); border-color:var(--wine)}
.burger{display:none}
@media (max-width:1000px){ .nav-links{display:none} .burger{display:block} }
.mobile-menu{display:none; border-top:1px solid var(--rule); background:var(--bg)}
.mobile-menu.open{display:block}
.mobile-menu a{display:block; padding:16px var(--pad); text-decoration:none; font-size:10.5px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border-bottom:1px solid var(--rule)}
.mobile-menu a:hover{color:var(--text)}

/* ===================== SFONDET ===================== */
.section{padding:var(--section-y) 0; position:relative; overflow:hidden}
.section--surface{background:var(--surface)}
.section + .section:not(.section--surface):not(.band){border-top:1px solid var(--rule)}
.bg{position:absolute; inset:0; pointer-events:none; z-index:1}
.bg--lines{background-image:repeating-linear-gradient(142deg, var(--rule) 0 1px, transparent 1px 46px); opacity:var(--lines);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 78% 30%, #000, transparent 72%);
  mask-image:radial-gradient(ellipse 70% 60% at 78% 30%, #000, transparent 72%)}
.bg--lines-left{background-image:repeating-linear-gradient(142deg, var(--rule) 0 1px, transparent 1px 46px); opacity:var(--lines);
  -webkit-mask-image:radial-gradient(ellipse 60% 55% at 12% 70%, #000, transparent 72%);
  mask-image:radial-gradient(ellipse 60% 55% at 12% 70%, #000, transparent 72%)}
.bg--dots{background-image:radial-gradient(var(--rule) 1px, transparent 1px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 85% 75%, #000, transparent 70%);
  mask-image:radial-gradient(ellipse 65% 60% at 85% 75%, #000, transparent 70%)}
.bg--glow{background:radial-gradient(ellipse 60% 50% at 70% 20%, var(--wine-soft), transparent 68%)}
.bg--glow-c{background:radial-gradient(ellipse 70% 55% at 50% 8%, var(--wine-soft), transparent 66%)}
.bg-ghost{position:absolute; width:min(78vw,620px); opacity:var(--ghost); pointer-events:none; z-index:1}
.bg-ghost--r{right:-12%; top:50%; transform:translateY(-50%)}
.bg-ghost--l{left:-14%; bottom:-16%}
.bg-ghost--c{left:50%; top:46%; transform:translate(-50%,-50%); width:min(120vw,980px)}
.bg-num{position:absolute; right:clamp(10px,4vw,60px); top:clamp(10px,4vh,50px); font-family:var(--ed); font-weight:300; font-size:clamp(140px,22vw,300px); line-height:.8; color:var(--wine); opacity:.07; pointer-events:none; z-index:1}

/* ===================== KOKA E FAQES ===================== */
.pagehead{position:relative; overflow:hidden; padding:clamp(64px,11vh,130px) 0 clamp(56px,9vh,104px); border-bottom:1px solid var(--rule)}
.pagehead h1{max-width:18ch; margin-top:var(--s1)}
.pagehead .measure{margin-top:var(--s2)}

/* ===================== HERO ===================== */
.hero{position:relative; overflow:hidden; padding:clamp(96px,19vh,210px) 0 clamp(84px,14vh,170px); text-align:center}
.hero h1{max-width:15ch; margin:0 auto; font-size:clamp(40px,7.4vw,102px); line-height:1.08; letter-spacing:-.035em}
.hero h1 .ed{font-size:1.06em; letter-spacing:-.005em}
.hero .eyebrow{margin:clamp(40px,6vh,68px) 0 0}
.hero-desc{margin:var(--s2) auto 0; max-width:58ch; font-size:17.5px; line-height:1.78; color:var(--text-soft)}
.belief{margin:clamp(52px,8vh,92px) auto 0; max-width:52ch; font-family:var(--ed); font-weight:400; font-size:clamp(22px,2.6vw,31px); line-height:1.5}
.belief span{display:block}
.belief span + span{color:var(--wine); margin-top:var(--s1)}
.enter{opacity:0; transform:translateY(22px); animation:rise 1.05s var(--ease) forwards}
@keyframes rise{to{opacity:1; transform:none}}
.d1{animation-delay:.05s}.d2{animation-delay:.24s}.d3{animation-delay:.42s}.d4{animation-delay:.58s}.d5{animation-delay:.74s}

/* ===================== MARQUEE ===================== */
.marquee{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); overflow:hidden; padding:24px 0; background:var(--surface)}
.marquee-track{display:flex; width:max-content; animation:slide 42s linear infinite}
.marquee-track span{font-family:var(--ed); font-weight:400; font-size:clamp(21px,2.4vw,31px); letter-spacing:.06em; padding:0 clamp(24px,3.4vw,52px); white-space:nowrap; color:var(--text-soft)}
.marquee-track span i{color:var(--wine); font-style:normal}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ===================== HEAD GRID ===================== */
.head{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(32px,7vw,120px); align-items:start}
.head > div:last-child{padding-top:clamp(0px,1.4vw,22px)}
.head h2{max-width:16ch}
@media (max-width:900px){ .head{grid-template-columns:1fr; gap:var(--s3)} .head > div:last-child{padding-top:0} }

/* ===================== IKONAT ===================== */
.icon{width:44px; height:44px; display:block; color:var(--wine); margin-bottom:var(--s2)}
.icon svg{width:100%; height:100%; display:block}
.icon svg *{vector-effect:non-scaling-stroke}
.card:hover .icon{animation:nudge .6s var(--ease)}
@keyframes nudge{50%{transform:translateY(-5px)}}

/* ===================== KARTA ===================== */
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:var(--s5)}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:var(--s5)}
@media (max-width:980px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .grid-3,.grid-2{grid-template-columns:1fr} }
.card{position:relative; overflow:hidden; background:var(--bg); border:1px solid var(--rule); padding:clamp(30px,3.4vw,46px); box-shadow:var(--shadow); transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease)}
html[data-theme="dark"] .card{background:var(--surface)}
html[data-theme="dark"] .section--surface .card{background:#242120}
.card::after{content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:linear-gradient(90deg,var(--wine),transparent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--wine-soft)}
.card:hover::after{transform:scaleX(1)}
.card .n{font-family:var(--body); font-weight:500; font-size:10.5px; letter-spacing:.2em; color:var(--wine); display:block; margin-bottom:var(--s1)}
.card .title{font-family:var(--display); font-weight:400; font-size:clamp(19px,1.9vw,23px); line-height:1.35; letter-spacing:-.012em}
.card p{margin-top:var(--s1); color:var(--text-soft); font-size:15.5px; line-height:1.78}
.card p + p{margin-top:10px}
.card h3{color:var(--wine); margin-bottom:var(--s2)}

/* ===================== NUMRA ===================== */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--rule); border:1px solid var(--rule)}
.stat{background:var(--bg); padding:clamp(30px,4vw,52px) clamp(18px,2.4vw,32px); text-align:center}
.section--surface .stat{background:var(--surface)}
.stat .num{font-family:var(--display); font-weight:200; font-size:clamp(36px,5vw,62px); line-height:1; color:var(--wine); letter-spacing:-.03em}
.stat .lbl{font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-top:var(--s1); line-height:1.7}
@media (max-width:760px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ===================== BREZ ===================== */
.band{background:var(--invert); color:var(--invert-text); padding:clamp(84px,14vh,170px) 0; text-align:center; position:relative; overflow:hidden}
.band img.mark{width:60px; margin:0 auto clamp(34px,5vh,56px)}
.band .eyebrow{color:color-mix(in srgb,var(--invert-text) 46%,transparent)}
.band h2{max-width:16ch; margin:0 auto; font-size:clamp(25px,3.7vw,46px)}
.band .after{margin:var(--s3) auto 0; max-width:46ch; font-family:var(--ed); font-style:italic; font-weight:400; font-size:clamp(21px,2.4vw,29px); line-height:1.55; color:color-mix(in srgb,var(--invert-text) 80%,transparent)}

/* ===================== ETIMOLOGJI ===================== */
.etym{margin-top:var(--s5); padding:var(--s4) 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); text-align:center}
.etym .word{font-family:var(--ed); font-style:italic; font-size:clamp(20px,2vw,24px); color:var(--muted)}
.etym .defs{font-family:var(--ed); font-weight:400; font-size:clamp(24px,3.4vw,44px); line-height:1.45; margin-top:var(--s2); letter-spacing:.015em}
.etym .defs i{color:var(--wine); font-style:normal; padding:0 clamp(10px,1.6vw,22px)}
.closer{font-family:var(--ed); font-weight:400; font-size:clamp(23px,2.9vw,34px); color:var(--wine); line-height:1.4; letter-spacing:.01em}

/* ===================== PARIMET / PYETJET ===================== */
.statement{font-family:var(--display); font-weight:300; font-size:clamp(27px,4.1vw,52px); line-height:1.18; max-width:14ch; letter-spacing:-.025em}
.contrasts p{font-family:var(--ed); font-weight:400; font-size:clamp(21px,2.3vw,28px); line-height:1.55; max-width:44ch}
.contrasts p + p{margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--rule)}
.principles{margin-top:var(--s5); border-top:1px solid var(--rule)}
.principle{display:grid; grid-template-columns:70px minmax(0,4fr) minmax(0,6fr); gap:clamp(18px,5vw,72px); padding:var(--s3) 0; border-bottom:1px solid var(--rule); align-items:baseline; transition:background .4s var(--ease)}
.principle:hover{background:color-mix(in srgb,var(--wine) 5%,transparent)}
.principle .n{font-family:var(--display); font-weight:300; font-size:17px; color:var(--wine)}
.principle .en{font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); line-height:2.2}
.principle .sq{font-family:var(--ed); font-weight:400; font-size:clamp(21px,2.4vw,29px); line-height:1.35}
.principle .sq small{display:block; font-family:var(--body); font-weight:300; font-size:15px; color:var(--text-soft); margin-top:var(--s1); line-height:1.78; max-width:46ch}
@media (max-width:900px){ .principle{grid-template-columns:44px minmax(0,1fr); row-gap:10px} .principle .sq{grid-column:2} }
.qgroup{border-left:1px solid var(--rule); padding-left:clamp(22px,3vw,44px)}
.qgroup + .qgroup{margin-top:var(--s3)}
.qgroup p{font-family:var(--ed); font-weight:400; font-size:clamp(21px,2.3vw,29px); line-height:1.5; max-width:40ch}
.qgroup p + p{margin-top:var(--s1)}

/* ===================== TAGS ===================== */
.tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--s3)}
.tags span{font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); border:1px solid var(--rule); padding:10px 18px; line-height:1; transition:color .3s,border-color .3s}
.tags span:hover{color:var(--text); border-color:var(--wine)}
.soon{margin-top:var(--s3); color:var(--muted); font-size:14.5px}

/* ===================== CTA / BUTONA ===================== */
.cta{text-align:center; padding:clamp(80px,13vh,150px) 0; background:var(--surface); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); position:relative; overflow:hidden}
.cta h2{max-width:21ch; margin:0 auto; font-size:clamp(26px,3.9vw,49px)}
.cta p{margin:var(--s2) auto 0; max-width:46ch; color:var(--text-soft)}
.btn{display:inline-block; margin-top:var(--s3); font-family:var(--body); font-weight:500; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; background:var(--invert); color:var(--invert-text); border:1px solid var(--invert); padding:19px 46px; cursor:pointer; transition:background .35s var(--ease),color .35s var(--ease),letter-spacing .35s var(--ease)}
.btn:hover{background:transparent; color:var(--text); letter-spacing:.26em}
.btn--ghost{background:transparent; color:var(--text); border-color:var(--rule)}
.btn--ghost:hover{border-color:var(--wine); background:transparent}

/* ===================== KONTAKT ===================== */
.contact-grid{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(48px,8vw,130px); margin-top:var(--s5)}
@media (max-width:900px){ .contact-grid{grid-template-columns:1fr; gap:var(--s4)} }
.field + .field{margin-top:var(--s3)}
.field label{display:block; margin-bottom:12px; font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted)}
.field input,.field textarea{width:100%; font-family:var(--body); font-weight:300; font-size:16.5px; color:var(--text); background:transparent; border:0; border-bottom:1px solid var(--rule); padding:12px 0; transition:border-color .3s}
.field textarea{resize:vertical; min-height:120px}
.field input:focus,.field textarea:focus{outline:0; border-bottom-color:var(--wine)}
.form-msg{font-size:14px; color:var(--wine); margin-top:var(--s2); min-height:22px}
.detail{display:block; text-decoration:none; font-family:var(--display); font-weight:300; font-size:clamp(20px,2.1vw,26px); letter-spacing:-.015em; transition:color .3s}
.detail + .detail{margin-top:var(--s1)}
.detail:hover{color:var(--wine)}
.quote{margin-top:var(--s4); padding-top:var(--s3); border-top:1px solid var(--rule); font-family:var(--ed); font-style:italic; font-weight:400; font-size:clamp(20px,2.2vw,26px); line-height:1.55; color:var(--text-soft); max-width:40ch}

/* ===================== FOOTER ===================== */
.footer{background:var(--invert); color:var(--invert-text); padding:clamp(66px,10vh,120px) 0 36px; text-align:center}
.footer img{width:154px; margin:0 auto}
.footer .creed{font-family:var(--ed); font-weight:400; font-size:clamp(21px,2.4vw,28px); letter-spacing:.04em; margin-top:clamp(38px,6vh,64px)}
.footer .tagline{font-family:var(--ed); font-style:italic; font-weight:400; color:color-mix(in srgb,var(--invert-text) 58%,transparent); margin-top:var(--s1); font-size:18px}
.footer-nav{margin-top:clamp(40px,6vh,64px); display:flex; justify-content:center; gap:clamp(16px,2.4vw,32px); flex-wrap:wrap}
.footer-nav a{font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:color-mix(in srgb,var(--invert-text) 62%,transparent)}
.footer-nav a:hover{color:var(--invert-text)}
.footer-bar{margin-top:clamp(36px,5vh,58px); padding-top:24px; border-top:1px solid color-mix(in srgb,var(--invert-text) 15%,transparent); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-family:var(--body); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb,var(--invert-text) 45%,transparent)}

/* ===================== REVEAL ===================== */
.rv{opacity:0; transform:translateY(24px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--d,0s)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.enter{opacity:1 !important; transform:none !important; transition:none !important; animation:none !important}
  .marquee-track{animation:none}
  .slash::before{transform:rotate(-38deg) scaleX(1) !important}
  .card:hover .icon{animation:none}
}

/* ===================== BLOG — LISTA ===================== */
.filters{display:flex; flex-wrap:wrap; gap:9px; margin-top:var(--s3)}
.filters button{
  font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); background:transparent;
  border:1px solid var(--rule); padding:10px 18px; line-height:1; cursor:pointer;
  transition:color .3s, border-color .3s, background .3s;
}
.filters button:hover{color:var(--text); border-color:var(--wine)}
.filters button[aria-pressed="true"]{color:var(--invert-text); background:var(--invert); border-color:var(--invert)}

.posts{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); margin-top:var(--s5)}
@media (max-width:980px){ .posts{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .posts{grid-template-columns:1fr} }
.post{
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  background:var(--bg); border:1px solid var(--rule); padding:clamp(28px,3.2vw,42px);
  box-shadow:var(--shadow); text-decoration:none;
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
html[data-theme="dark"] .post{background:var(--surface)}
html[data-theme="dark"] .section--surface .post{background:#242120}
.post::after{content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:linear-gradient(90deg,var(--wine),transparent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease)}
.post:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift); border-color:var(--wine-soft)}
.post:hover::after{transform:scaleX(1)}
.post .meta{font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap}
.post .meta .cat{color:var(--wine)}
.post .title{font-family:var(--display); font-weight:400; font-size:clamp(20px,2vw,25px); line-height:1.3; letter-spacing:-.015em; margin-top:var(--s2)}
.post .excerpt{color:var(--text-soft); font-size:15.5px; line-height:1.78; margin-top:var(--s1)}
.post .more{margin-top:var(--s2); font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--wine)}
.post.hidden{display:none}
.empty{margin-top:var(--s4); color:var(--muted); font-size:15px}

/* ===================== BLOG — ARTIKULLI ===================== */
.article{max-width:68ch; margin:0 auto}
.article-meta{display:flex; gap:14px; flex-wrap:wrap; font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted)}
.article-meta .cat{color:var(--wine)}
.article h1{margin-top:var(--s2); max-width:20ch; font-size:clamp(29px,4.4vw,56px)}
.article-lead{margin-top:var(--s3); font-family:var(--ed); font-weight:400; font-size:clamp(21px,2.3vw,28px); line-height:1.5; color:var(--text)}
.article-body{margin-top:var(--s4)}
.article-body > * + *{margin-top:var(--s2)}
.article-body p{color:var(--text-soft)}
.article-body h2{font-size:clamp(21px,2.3vw,28px); margin-top:var(--s4)}
.article-body ul{padding-left:20px; color:var(--text-soft)}
.article-body li + li{margin-top:8px}
.article-body blockquote{
  margin:var(--s4) 0; padding:var(--s3) 0 var(--s3) clamp(22px,3vw,40px);
  border-left:1px solid var(--wine);
  font-family:var(--ed); font-style:italic; font-weight:400;
  font-size:clamp(21px,2.3vw,29px); line-height:1.5; color:var(--text);
}
.article-foot{margin-top:var(--s5); padding-top:var(--s3); border-top:1px solid var(--rule); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
.article-foot a{font-family:var(--body); font-weight:500; font-size:10px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--muted)}
.article-foot a:hover{color:var(--wine)}