/* ---------- blog ---------- */
.blog-head{position:relative;padding:calc(var(--sec-y-top) + 14px) 0 var(--sec-y-bot);overflow:hidden;}
.blog-head .wash{position:absolute;inset:0;width:100%;height:100%;opacity:.55;}
.blog-head .wrap{position:relative;text-align:center;}
.blog-head h1{font-size:clamp(30px,4.4vw,44px);margin:0 0 8px;}
.blog-head p{color:var(--ink-soft);font-size:16.5px;max-width:560px;margin:0 auto;}

.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--grid-gap);}
@media(max-width:900px){.post-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.post-grid{grid-template-columns:1fr;}}

.post-card{display:flex;flex-direction:column;background:var(--cream-2);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;}
.post-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);}
.post-card .thumb{aspect-ratio:16/10;background:linear-gradient(135deg,rgba(111,160,43,.16),rgba(197,139,43,.16));
  position:relative;overflow:hidden;}
.post-card .thumb svg{position:absolute;inset:0;width:100%;height:100%;}
.post-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.post-card .body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1;}
.post-meta{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink-soft);
  font-weight:600;margin-bottom:8px;flex-wrap:wrap;}
.lang-chip{background:rgba(111,160,43,.14);color:var(--teal-dark);font-size:11.5px;font-weight:700;
  padding:3px 9px;border-radius:999px;letter-spacing:.02em;}
.post-card h3{font-family:'Fraunces',serif;font-size:20px;line-height:1.25;margin:0 0 8px;}
.post-card h3 a{color:var(--ink);}
.post-card h3 a:hover{color:var(--teal-dark);}
.post-card p{color:var(--ink-soft);font-size:14.5px;margin:0 0 14px;}
.post-card .more{margin-top:auto;font-weight:700;font-size:14px;color:var(--teal-dark);
  display:inline-flex;align-items:center;gap:6px;}
.post-card:hover .more{gap:10px;}

/* ---------- single post ---------- */
.post-hero{position:relative;padding:calc(var(--sec-y-top) + 18px) 0 6px;overflow:hidden;}
.post-hero .wash{position:absolute;inset:0;width:100%;height:100%;opacity:.5;}
.post-wrap{max-width:720px;margin:0 auto;padding:0 24px;position:relative;}
.post-hero .back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;
  color:var(--teal-dark);margin-bottom:14px;}
.post-hero h1{font-size:clamp(28px,4.2vw,42px);line-height:1.14;margin:0 0 12px;}
.post-cover{max-width:840px;margin:22px auto 0;padding:0 24px;}
.post-cover img{width:100%;border-radius:var(--radius);border:1px solid var(--line);display:block;}

.prose{padding:26px 0 var(--sec-y-bot);font-size:17px;line-height:1.72;color:var(--ink);}
.prose > * + *{margin-top:1.05em;}
.prose h2{font-family:'Fraunces',serif;font-size:26px;line-height:1.25;margin-top:1.7em;}
.prose h3{font-family:'Fraunces',serif;font-size:21px;margin-top:1.5em;}
.prose p{color:#2A3B2F;}
.prose a{color:var(--teal-dark);text-decoration:underline;text-underline-offset:3px;}
.prose ul,.prose ol{padding-left:1.25em;color:#2A3B2F;}
.prose li + li{margin-top:.4em;}
.prose blockquote{border-left:3px solid var(--teal);background:var(--cream-2);margin:1.4em 0;
  padding:14px 20px;border-radius:0 12px 12px 0;font-size:17px;color:var(--ink-soft);}
.prose img{width:100%;border-radius:14px;border:1px solid var(--line);}
.prose code{background:rgba(27,42,31,.06);padding:2px 6px;border-radius:6px;font-size:.9em;}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0;}

.post-cta{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 26px;text-align:center;margin:8px 0 6px;}
.post-cta h3{font-family:'Fraunces',serif;font-size:22px;margin:0 0 6px;}
.post-cta p{color:var(--ink-soft);font-size:15px;margin:0 0 16px;}

.post-nav{display:flex;justify-content:space-between;gap:14px;padding:18px 0 var(--sec-y-bot);
  font-size:14.5px;font-weight:700;}
.post-nav a{color:var(--teal-dark);}
.post-nav span{color:#9AAA9C;}

.empty{text-align:center;color:var(--ink-soft);padding:40px 0;}
.nav-links a.active{color:var(--teal-dark);position:relative;}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;
  background:var(--teal);border-radius:2px;}
.post-cover img{aspect-ratio:16/9;object-fit:cover;}

/* ==========================================================================
   Article shell — shared by both layout variants
   ========================================================================== */
.back{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--teal-dark);}
.eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--teal-dark);
  text-transform:uppercase;margin:16px 0 14px;}
.eyebrow .sep{color:#A9BCA9;margin:0 4px;}
.art-meta{font-size:14px;color:var(--ink-soft);font-weight:600;margin:14px 0 0;}

nav.toc{display:block;max-width:none;padding:18px 22px 20px;margin:26px 0 4px;}
.toc{border:1px solid var(--line);background:var(--cream-2);border-radius:16px;
  padding:18px 22px 20px;margin:26px 0 4px;}
.toc-title{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 10px;}
.toc ul{list-style:none;margin:0;padding:0;color:var(--teal-dark);font-weight:600;font-size:15.5px;}
.toc li+li{margin-top:7px;border-top:1px solid var(--line);padding-top:7px;}
.toc a{color:var(--teal-dark);}
.toc a:hover{text-decoration:underline;}

figure.ph{margin:30px 0;}
figure.ph img{width:100%;display:block;border-radius:14px;border:1px solid var(--line);}
figure.ph figcaption{font-size:14px;color:var(--ink-soft);margin-top:10px;}
.photo-row{display:grid;gap:12px;margin:30px 0;}
.photo-row.up-2{grid-template-columns:1fr 1fr;}
.photo-row.up-3{grid-template-columns:repeat(3,1fr);}
.photo-row figure.ph{margin:0;}
.photo-row img{aspect-ratio:4/3;object-fit:cover;}
@media(max-width:640px){.photo-row.up-3{grid-template-columns:1fr 1fr;}}

/* ==========================================================================
   Variant A — single wide column, no sidebar
   ========================================================================== */
.art-a .wide{max-width:760px;margin:0 auto;padding:0 24px;}
.art-a > nav.toc{max-width:760px;margin:26px auto 0;}
header.art-head{position:static;background:transparent;box-shadow:none;backdrop-filter:none;}
.art-head{padding:38px 0 0;text-align:center;}
.art-head .back{margin-bottom:4px;}
.art-head h1{font-size:clamp(32px,5vw,52px);line-height:1.08;margin:0;letter-spacing:-.01em;}
.cover-wrap{max-width:1060px;margin:30px auto 0;padding:0 24px;}
.cover-wrap figure.ph{margin:0;}
.prose-a{max-width:1060px;margin:0 auto;padding:30px 24px var(--sec-y-bot);font-size:18.5px;line-height:1.78;}
.prose-a > *{max-width:760px;margin-left:auto;margin-right:auto;}
.prose-a > figure.ph,.prose-a > .photo-row{max-width:1060px;}
.prose-a > p:first-child{font-size:19.5px;font-weight:600;color:var(--ink);}
.prose-a h2{font-size:30px;margin-top:1.9em;}
.art-a .post-cta{margin-top:0;}

/* ==========================================================================
   Variant B — article + persistent sidebar
   ========================================================================== */
.art-b{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:46px;
  align-items:start;padding:34px 24px var(--sec-y-bot);}
.art-b h1{font-size:clamp(30px,3.9vw,42px);line-height:1.12;margin:0;}
.art-b .prose{padding-top:20px;}
.side{position:sticky;top:88px;display:grid;gap:18px;}
.side-card{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 20px;text-align:center;}
.side-photo{width:88px;height:88px;border-radius:50%;object-fit:cover;object-position:50% 22%;
  border:3px solid #fff;box-shadow:0 8px 20px -10px rgba(27,42,31,.5);}
.side-name{font-family:'Fraunces',serif;font-size:19px;margin:12px 0 6px;}
.side-bio{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0 0 16px;}
.side-btn{width:100%;justify-content:center;}
.side-block{background:var(--cream-2);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;}
.side-block h4{font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 12px;}
.side-post{display:block;font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;padding:9px 0;
  border-top:1px solid var(--line);}
.side-block .side-post:first-of-type{border-top:0;padding-top:0;}
.side-post:hover{color:var(--teal-dark);}
.side-post-date{display:block;font-size:12px;color:var(--ink-soft);font-weight:600;margin-bottom:3px;}
.side-link{display:block;font-size:14.5px;font-weight:600;color:var(--teal-dark);padding:5px 0;}
@media(max-width:980px){
  .art-b{grid-template-columns:1fr;gap:28px;}
  .side{position:static;}
}

/* ---- B: photo rows break out past the article column -------------------- */
/* Available room to the left = the page gutter outside .wrap plus its padding.
   Clamped so it can never push the page into a horizontal scroll.            */
/* keeps at least a 40px margin to the viewport edge, and never bleeds below 1120px */
.art-b{--bleed:max(0px, min(160px, calc((100vw - 1120px)/2 - 16px)));}
.art-b .prose > figure.ph,
.art-b .prose > .photo-row,
.art-b > article > figure.ph{
  width:calc(100% + var(--bleed));
  margin-left:calc(-1 * var(--bleed));
}
@media(max-width:980px){ .art-b{--bleed:0px;} }

/* ---- blog index hero: smaller, quieter -------------------------------- */
.blog-head{padding:26px 0 22px;}
.blog-head .wash{opacity:.22;
  -webkit-mask-image:linear-gradient(to bottom, #000 45%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 45%, transparent 100%);}
.blog-head .eyebrow{margin:0 auto 6px;max-width:none;}
.blog-head h1{font-size:clamp(23px,2.4vw,29px);margin:0 0 5px;letter-spacing:-.005em;}
.blog-head p:not(.eyebrow){font-size:15px;max-width:480px;margin-left:auto;margin-right:auto;}
@media(max-width:600px){
  .blog-head{padding:20px 0 16px;}
  .blog-head p:not(.eyebrow){font-size:14.5px;}
}

/* ==========================================================================
   Phone refinements (≤600px)
   ========================================================================== */
@media(max-width:600px){
  /* One photo per row. Two 160px thumbs side by side read as clip-art;
     full width gives each picture the space it was taken for. */
  .photo-row,.photo-row.up-2,.photo-row.up-3{grid-template-columns:1fr;gap:18px;}
  .photo-row img{aspect-ratio:16/10;}

  /* Contents links need a real tap target */
  .toc{padding:16px 18px;}
  .toc li+li{margin-top:0;padding-top:0;}
  .toc li{border-top:1px solid var(--line);}
  .toc li:first-child{border-top:0;}
  .toc a{display:block;padding:11px 0;min-height:44px;box-sizing:border-box;}

  /* Older/newer stack instead of squeezing into two cramped columns */
  .post-nav{flex-direction:column;gap:10px;padding-top:14px;}
  .post-nav a,.post-nav span{padding:6px 0;}

  figure.ph{margin:22px 0;}
  .prose h2{font-size:23px;}
}

/* Sidebar once it has dropped below the article: the end-of-post CTA has
   already asked for the booking, so this becomes a plain "who wrote this". */
@media(max-width:980px){
  .side-card{display:flex;align-items:center;gap:14px;text-align:left;padding:16px 18px;}
  .side-photo{width:62px;height:62px;flex-shrink:0;}
  .side-name{margin:0 0 3px;font-size:17px;}
  .side-bio{margin:0;font-size:13.5px;}
  .side-btn{display:none;}
}

/* Author card, once stacked: photo beside a name/bio block rather than three
   flex columns (which squeezed "Suci Amalia" onto two lines). */
@media(max-width:980px){
  .side-card{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;
    align-items:center;text-align:left;padding:16px 18px;}
  .side-photo{grid-row:1 / span 2;align-self:center;}
  .side-name{grid-column:2;align-self:end;margin:0 0 2px;}
  .side-bio{grid-column:2;align-self:start;margin:0;}
  /* sidebar links get a real tap target too */
  .side-link{padding:10px 0;min-height:44px;display:flex;align-items:center;}
  .side-post{padding:12px 0;}
  .side-block .side-post:first-of-type{padding-top:2px;}
}
@media(max-width:600px){
  .post-nav a,.post-nav span{text-align:left;align-self:flex-start;}
}

/* Contents links are touch targets on tablets too, not just phones */
@media(max-width:980px){
  .toc{padding:16px 18px;}
  .toc li+li{margin-top:0;padding-top:0;}
  .toc li{border-top:1px solid var(--line);}
  .toc li:first-child{border-top:0;}
  .toc a{display:block;padding:11px 0;min-height:44px;box-sizing:border-box;}
}

@media(max-width:600px){
  /* a dead "nothing newer yet" row is not worth a full line on a phone */
  .post-nav span{display:none;}
  .post-nav a{padding:9px 0;min-height:44px;display:flex;align-items:center;}
  .post-nav:empty{display:none;}
}

@media(max-width:980px){
  .post-nav a,.post-nav span{padding:9px 0;min-height:44px;display:flex;align-items:center;}
}

/* ---- sidebar offer cards ------------------------------------------------ */
.side-offer p{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin:0 0 14px;}
.side-offer .side-btn{width:100%;justify-content:center;font-size:14px;padding:11px 14px;}
.side-empty{font-size:13.5px;color:var(--ink-soft);margin:0;}
.side-btn{white-space:normal;text-align:center;line-height:1.25;}
@media(max-width:980px){ .side-offer .side-btn{display:inline-flex;width:auto;} }
.post-cta .cta-alt{font-size:14px;color:var(--ink-soft);margin:14px 0 0;}
.post-cta .cta-alt a{color:var(--teal-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.empty{max-width:460px;margin:0 auto;}
.empty-lead{font-family:'Fraunces',serif;font-size:21px;color:var(--ink);margin:0 0 8px;}
.empty p{font-size:15.5px;line-height:1.6;}
.empty a{color:var(--teal-dark);font-weight:700;text-decoration:underline;text-underline-offset:3px;}