/* Minyak Klabet — shared blog styles. Same design tokens as the homepage. */
:root{
  --paper:#E7DEC5;
  --paper-2:#F3ECD9;
  --paper-3:#DED2AF;
  --ink:#251F16;
  --ink-soft:#5B5442;
  --forest:#1E3B29;
  --forest-deep:#12281B;
  --gold:#A97A3B;
  --gold-soft:#C9A46A;
  --line: rgba(37,31,22,0.16);
  --shadow: 0 1px 2px rgba(37,31,22,0.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#15201A; --paper-2:#1B2721; --paper-3:#243128;
    --ink:#ECE5D3; --ink-soft:#B3AC98;
    --forest:#93BF9F; --forest-deep:#B9DAC1;
    --gold:#D8AF71; --gold-soft:#EAC98D;
    --line: rgba(236,229,211,0.15); --shadow: 0 1px 2px rgba(0,0,0,0.3);
  }
}
:root[data-theme="dark"]{
  --paper:#15201A; --paper-2:#1B2721; --paper-3:#243128;
  --ink:#ECE5D3; --ink-soft:#B3AC98;
  --forest:#93BF9F; --forest-deep:#B9DAC1;
  --gold:#D8AF71; --gold-soft:#EAC98D;
  --line: rgba(236,229,211,0.15); --shadow: 0 1px 2px rgba(0,0,0,0.3);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *{transition-duration:0.001ms !important;} }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:16px; line-height:1.65; padding-inline:24px;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1120px; margin-inline:auto;}
.narrow{max-width:680px; margin-inline:auto;}

h1,h2,h3{ font-family:"Fraunces", Georgia, serif; font-weight:450; text-wrap:balance; letter-spacing:-0.012em; margin:0; color:var(--ink); }

.eyebrow{
  font-family:"Work Sans", sans-serif; font-size:12px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--gold);
  display:inline-flex; align-items:center; gap:9px;
}
.eyebrow::before{ content:""; display:inline-block; width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex:none; }

/* ---------- Nav (shared with homepage) ---------- */
header.nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(6px); border-bottom:1px solid var(--line); }
.nav-inner{ max-width:1120px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; padding-block:16px; gap:16px; }
.wordmark{ font-family:"Fraunces", serif; font-size:19px; letter-spacing:0.02em; white-space:nowrap; flex:none; text-decoration:none; }
.nav-right{ display:flex; align-items:center; gap:18px; }
.navlinks{ display:none; gap:28px; font-size:13.5px; list-style:none; padding:0; margin:0; }
@media (min-width:900px){ .navlinks{ display:flex; } }
.navlinks a{ text-decoration:none; color:var(--ink-soft); transition:color .25s ease; }
.navlinks a:hover{ color:var(--forest); }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px;
  font-size:13.5px; font-weight:600; letter-spacing:0.015em; text-decoration:none;
  border:1px solid transparent; white-space:nowrap;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s ease;
}
.btn-primary{ background:var(--forest); color:var(--paper-2); }
.btn-primary:hover{ background:var(--forest-deep); transform:translateY(-1px); }
.btn-secondary{ background:transparent; color:var(--forest); border-color:var(--forest); }
.btn-secondary:hover{ background:color-mix(in srgb, var(--forest) 10%, transparent); transform:translateY(-1px); }

@media (max-width:680px){ .nav-right .btn-primary{ display:none; } }

/* ---------- breadcrumb ---------- */
.breadcrumb{ font-size:13px; color:var(--ink-soft); padding-block:22px 0; }
.breadcrumb a{ text-decoration:none; color:var(--ink-soft); border-bottom:1px solid transparent; }
.breadcrumb a:hover{ color:var(--forest); border-bottom-color:var(--gold); }
.breadcrumb .sep{ margin-inline:6px; color:var(--line); }

/* ---------- article header ---------- */
.article-head{ padding-block:22px 40px; border-bottom:1px solid var(--line); margin-bottom:44px; }
.article-head h1{ font-size:clamp(28px,4.2vw,44px); line-height:1.14; margin-block:14px 16px; }
.byline{ font-size:13.5px; color:var(--ink-soft); }
.byline .sep{ margin-inline:8px; color:var(--line); }
.lede{ font-size:18px; color:var(--ink-soft); max-width:62ch; margin-top:16px; }

/* ---------- article body ---------- */
.article-body{ max-width:700px; margin-inline:auto; padding-bottom:70px; }
.article-body h2{ font-size:clamp(21px,2.6vw,27px); margin-top:52px; margin-bottom:16px; }
.article-body h3{ font-size:18px; margin-top:30px; margin-bottom:10px; }
.article-body p{ margin:0 0 16px; }
.article-body ul, .article-body ol{ margin:0 0 20px; padding-left:22px; }
.article-body li{ margin-bottom:8px; }
.article-body a{ color:var(--forest); text-decoration-color:var(--gold-soft); text-underline-offset:3px; }
.article-body a:hover{ color:var(--forest-deep); }
.article-body .btn-primary, .article-body .btn-primary:hover{ color:var(--paper-2); }
.article-body .btn-secondary{ color:var(--forest); }
.article-body .btn-secondary:hover{ color:var(--forest-deep); }
.article-body strong{ color:var(--ink); }

.callout{
  background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:20px 22px; margin:24px 0; font-size:14.5px; color:var(--ink-soft);
}
.callout strong{ color:var(--ink); }

.source-note{ font-size:12.5px; color:var(--ink-soft); margin-top:-8px; margin-bottom:20px; }

.table-wrap{ overflow-x:auto; margin:20px 0 28px; -webkit-overflow-scrolling:touch; }
table.compare{ width:100%; min-width:440px; border-collapse:collapse; margin:0; font-size:14.5px; }
table.compare th, table.compare td{ text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
table.compare th{ font-family:"Fraunces",serif; font-weight:600; color:var(--ink); background:var(--paper-2); white-space:nowrap; }
table.compare td{ color:var(--ink-soft); }
@media (max-width:480px){ table.compare{ font-size:13.5px; } table.compare th, table.compare td{ padding:9px 11px; } }

.midlink{ text-align:center; margin-block:36px; }
.midlink a{ font-size:13.5px; color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px; transition:color .25s ease, border-color .25s ease; }
.midlink a:hover{ color:var(--forest); border-bottom-color:var(--gold); }

.cta-box{ background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:32px 28px; text-align:center; margin:48px 0; }
.cta-box h3{ font-size:20px; margin-bottom:10px; }
.cta-box p{ color:var(--ink-soft); font-size:14.5px; max-width:48ch; margin-inline:auto; }
.cta-box .cta-row{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }

/* ---------- FAQ (shared with homepage) ---------- */
.faq details{ border-bottom:1px solid var(--line); padding-block:16px; }
.faq summary{ cursor:pointer; font-size:15.5px; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:12px; font-weight:500; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:"Fraunces",serif; font-size:18px; color:var(--gold); flex:none; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ margin:10px 0 0; color:var(--ink-soft); font-size:14.5px; }

/* ---------- related posts ---------- */
.related{ margin-top:56px; padding-top:40px; border-top:1px solid var(--line); }
.related h2{ font-size:20px; margin-bottom:20px; }
.related-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:600px){ .related-grid{ grid-template-columns:1fr; } }
.related-card{ display:block; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:20px; text-decoration:none; transition:transform .2s ease, border-color .2s ease; }
.related-card:hover{ transform:translateY(-2px); border-color:var(--gold-soft); }
.related-card .pillar{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold); font-weight:600; }
.related-card h3{ font-size:15.5px; margin-top:8px; color:var(--ink); }

/* ---------- blog index ---------- */
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding-block:12px 60px; }
@media (max-width:700px){ .post-grid{ grid-template-columns:1fr; } }
.post-card{ display:block; text-decoration:none; background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:26px 24px; transition:transform .2s ease, border-color .2s ease; }
.post-card:hover{ transform:translateY(-2px); border-color:var(--gold-soft); }
.post-card .pillar{ font-size:11px; text-transform:uppercase; letter-spacing:0.08em; color:var(--gold); font-weight:600; }
.post-card h2{ font-size:20px; margin-top:10px; margin-bottom:10px; }
.post-card p{ font-size:14px; color:var(--ink-soft); margin:0; }
.post-card .meta{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; }

.page-head{ padding-block:48px 8px; max-width:680px; }
.page-head h1{ font-size:clamp(30px,4.4vw,44px); margin-top:14px; }
.page-head p{ color:var(--ink-soft); font-size:16px; margin-top:14px; max-width:56ch; }

/* ---------- footer (shared) ---------- */
footer{ border-top:1px solid var(--line); padding-block:48px 32px; margin-top:24px; }
.foot-grid{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; }
.foot-copy{ color:var(--ink-soft); font-size:13.5px; max-width:32ch; }
.foot-links{ display:flex; flex-wrap:wrap; row-gap:10px; gap:22px; list-style:none; padding:0; margin:0; font-size:14px; }
.foot-links a{ text-decoration:none; color:var(--ink-soft); transition:color .25s ease; }
.foot-links a:hover{ color:var(--forest); }
.fine{ font-size:12px; color:var(--ink-soft); margin-top:28px; }

/* ---------- sticky mobile CTA (shared) ---------- */
.mobile-cta{ display:none; }
@media (max-width:680px){
  .nav-right .btn-primary{ display:none; }
  body{ padding-bottom:74px; }
  .mobile-cta{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:30;
    background:color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter:blur(6px);
    border-top:1px solid var(--line); padding:10px 16px; gap:10px; align-items:center;
  }
  .mobile-cta .btn{ flex:1; justify-content:center; }
  .mobile-cta .icon-link{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border:1px solid var(--line); border-radius:999px; color:var(--forest); }
  .mobile-cta .icon-link svg{ width:20px; height:20px; }
}