/* ============ Surf journal (blog) ============ */
.scv-inner{ background:var(--bg); }
.skip-link:focus{ position:fixed; left:1rem; top:1rem; z-index:100; width:auto; height:auto; clip:auto; padding:0.6rem 1rem; background:var(--surface); border-radius:var(--radius-s); }
.inner-main{ padding-top:calc(78px + env(safe-area-inset-top,0px)); }
.admin-bar .inner-main{ padding-top:calc(110px + env(safe-area-inset-top,0px)); }
.wrap.narrow{ max-width:820px; }
nav.links a[aria-current="page"]{ color:var(--terracotta-deep); }

/* breadcrumbs */
.crumbs ol{ list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-wrap:wrap; gap:0.3rem 0.5rem; font-size:0.84rem; color:var(--ink-faint); }
.crumbs li + li::before{ content:"/"; margin-right:0.5rem; color:var(--line); }
.crumbs a{ color:var(--ink-soft); text-decoration:none; }
.crumbs a:hover{ color:var(--terracotta-deep); text-decoration:underline; }
.crumbs [aria-current]{ color:var(--ink-faint); display:inline-block; max-width:38ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom; }

/* hero */
.blog-hero{ padding:clamp(2.4rem,6vw,4.2rem) 0 clamp(1.6rem,4vw,2.4rem); }
.blog-hero h1{ font-size:clamp(2.3rem,5.4vw,3.8rem); line-height:1.05; margin-top:0.5rem; max-width:18ch; }
.blog-lede{ color:var(--ink-soft); font-size:1.12rem; margin-top:1rem; max-width:58ch; }
.cat-chips{ display:flex; flex-wrap:wrap; gap:0.45rem; margin-top:1.6rem; }
.cat-chips a{ font-family:'Cairo',sans-serif; font-weight:700; font-size:0.84rem; text-decoration:none; color:var(--ink-soft); padding:0.45rem 0.95rem; border-radius:999px; border:1.5px solid var(--line-soft); background:var(--surface); transition:border-color .2s, color .2s; }
.cat-chips a:hover{ border-color:var(--terracotta); color:var(--terracotta-deep); }
.cat-chips a[aria-current="page"]{ background:var(--terracotta); border-color:var(--terracotta); color:#FFF8EF; }
.empty-actions{ display:flex; flex-wrap:wrap; gap:0.6rem; margin-top:1.6rem; }

/* cards */
.blog-list{ padding-bottom:clamp(3rem,7vw,5rem); }
.post-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.post-card{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; box-shadow:0 18px 34px -24px rgba(var(--shadow)/0.4); transition:transform .35s ease, box-shadow .35s ease; position:relative; }
.post-card:hover{ transform:translateY(-5px); box-shadow:0 26px 44px -22px rgba(var(--shadow)/0.45); }
.post-card-media{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--surface-3); }
.post-card-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.post-card:hover .post-card-media img{ transform:scale(1.05); }
.post-card-body{ padding:1.25rem 1.35rem 1.4rem; display:flex; flex-direction:column; gap:0.6rem; flex:1; }
.post-card-meta{ display:flex; gap:0.8rem; align-items:center; font-family:'Cairo',sans-serif; font-size:0.78rem; font-weight:600; color:var(--ink-faint); }
.post-cat{ font-family:'Cairo',sans-serif; font-weight:700; font-size:0.78rem; color:var(--terracotta-deep); background:var(--terracotta-tint); padding:0.2rem 0.65rem; border-radius:999px; text-decoration:none; display:inline-block; }
.post-card h3{ font-size:1.28rem; line-height:1.22; }
.post-card h3 a{ text-decoration:none; }
.post-card h3 a::after{ content:""; position:absolute; inset:0; }
.post-card h3 a:focus-visible{ outline:none; }
.post-card:focus-within{ outline:3px solid var(--turquoise); outline-offset:3px; }
.post-card p{ color:var(--ink-soft); font-size:0.94rem; flex:1; }
.post-card-more{ font-family:'Cairo',sans-serif; font-weight:700; font-size:0.86rem; color:var(--terracotta-deep); text-decoration:none; position:relative; z-index:1; }
.post-card.featured{ grid-column:1 / -1; display:grid; grid-template-columns:1.25fr 1fr; }
.post-card.featured .post-card-media{ aspect-ratio:auto; min-height:340px; }
.post-card.featured .post-card-body{ padding:clamp(1.5rem,4vw,2.6rem); justify-content:center; }
.post-card.featured h3{ font-size:clamp(1.7rem,3.4vw,2.4rem); }
.post-card.featured p{ flex:0; font-size:1.02rem; }
@media (max-width:1020px){ .post-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .post-grid{ grid-template-columns:1fr; } .post-card.featured{ grid-template-columns:1fr; } .post-card.featured .post-card-media{ min-height:0; aspect-ratio:16/10; } }
.journal{ background:var(--bg); }

/* pager */
.pager{ display:flex; justify-content:center; gap:0.4rem; flex-wrap:wrap; margin-top:2.6rem; }
.pager .page-numbers{ min-width:42px; height:42px; padding:0 0.8rem; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1.5px solid var(--line-soft); background:var(--surface); text-decoration:none; font-weight:700; font-family:'Cairo',sans-serif; }
.pager .page-numbers.current{ background:var(--terracotta); border-color:var(--terracotta); color:#FFF8EF; }
.pager a.page-numbers:hover{ border-color:var(--terracotta); }
.empty-state{ text-align:center; padding:3rem 1rem; }
.empty-state p{ color:var(--ink-soft); margin-top:0.8rem; }

/* single */
.post-head{ padding:clamp(2.2rem,5vw,3.6rem) 0 0; }
.post-head h1{ font-size:clamp(2.1rem,5vw,3.4rem); line-height:1.08; margin-top:0.9rem; }
.post-lede{ font-size:1.18rem; color:var(--ink-soft); margin-top:1rem; line-height:1.6; }
.post-meta{ display:flex; flex-wrap:wrap; gap:0.3rem 1.2rem; margin-top:1.2rem; font-size:0.86rem; color:var(--ink-faint); }
.post-meta span + span::before{ content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:var(--line); margin-right:1.2rem; vertical-align:middle; }
.post-cover{ margin:clamp(1.8rem,4vw,2.6rem) auto 0; }
.post-cover img{ width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:var(--radius-l); }
@media (max-width:680px){ .post-cover img{ aspect-ratio:16/10; border-radius:var(--radius-m); } }

.post-layout{ display:grid; grid-template-columns:260px minmax(0,720px); gap:clamp(2rem,5vw,4rem); justify-content:center; padding-top:clamp(2rem,5vw,3rem); padding-bottom:clamp(3rem,7vw,4.5rem); }
.post-aside{ order:0; }
.post-aside > *{ position:sticky; top:100px; }
.post-aside .aside-cta{ position:static; margin-top:1.4rem; }
.toc{ background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-m); padding:1.1rem 1.2rem; }
.toc-title{ font-family:'Cairo',sans-serif; font-weight:700; font-size:0.8rem; color:var(--ink-faint); margin-bottom:0.6rem; }
.toc ol{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:0.45rem; font-size:0.9rem; }
.toc a{ color:var(--ink-soft); text-decoration:none; }
.toc a:hover, .toc a.on{ color:var(--terracotta-deep); }
.toc a.on{ font-weight:700; }
.aside-cta{ border-radius:var(--radius-m); padding:1.2rem; color:#E3F4F0; background-color:var(--turquoise-deep); background-image:var(--zellige-dark), linear-gradient(150deg,#136155,#1F7E73 70%,#2CA698); display:flex; flex-direction:column; gap:0.6rem; font-size:0.9rem; }
.aside-cta .eyebrow{ color:var(--gold); }
.aside-cta-t{ font-family:'Fraunces',serif; font-size:1.2rem; color:#FFF8EF; line-height:1.2; }
.aside-cta .btn{ background:#FFF8EF; color:var(--turquoise-deep); align-self:flex-start; }
.aside-link{ color:#FFF8EF; font-weight:600; font-size:0.86rem; }
@media (max-width:980px){
  .post-layout{ grid-template-columns:minmax(0,720px); }
  .post-aside > *{ position:static; }
  .post-aside .aside-cta{ display:none; }
}

/* article typography */
.prose{ font-size:1.08rem; line-height:1.75; color:var(--ink); min-width:0; }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ font-size:clamp(1.55rem,3vw,2rem); line-height:1.2; margin-top:2.2em; scroll-margin-top:100px; }
.prose h3{ font-size:1.3rem; line-height:1.3; margin-top:1.7em; }
.prose h2 + p, .prose h3 + p, .prose h2 + ul, .prose h3 + ul{ margin-top:0.6em; }
.prose p, .prose li{ color:var(--ink); }
.prose a{ color:var(--terracotta-deep); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.prose a:hover{ color:var(--turquoise-deep); }
.prose ul, .prose ol{ padding-left:1.3em; }
.prose li + li{ margin-top:0.45em; }
.prose ul li::marker{ color:var(--terracotta); }
.prose strong{ font-weight:700; }
.prose blockquote{ margin:1.6em 0; padding:0.4em 0 0.4em 1.2em; border-left:3px solid var(--terracotta); font-family:'Fraunces',serif; font-style:italic; font-size:1.2rem; color:var(--ink-soft); }
.prose img{ border-radius:var(--radius-m); height:auto; }
.prose figure{ margin:1.6em 0; }
.prose figcaption{ font-size:0.86rem; color:var(--ink-faint); margin-top:0.5rem; }
.prose table{ width:100%; border-collapse:collapse; font-size:0.95rem; display:block; overflow-x:auto; }
.prose thead th{ text-align:left; font-family:'Cairo',sans-serif; font-size:0.8rem; color:var(--ink-faint); border-bottom:1.5px solid var(--line); padding:0.6rem 0.7rem; white-space:nowrap; }
.prose td{ padding:0.7rem; border-bottom:1px solid var(--line-soft); vertical-align:top; }
.prose tbody tr:nth-child(odd){ background:var(--surface); }
.prose > h2:first-child{ margin-top:0; }

/* FAQ */
.faq{ margin-top:3rem !important; }
.faq details{ border-bottom:1px solid var(--line-soft); }
.faq details:first-of-type{ border-top:1px solid var(--line-soft); margin-top:1rem; }
.faq summary{ cursor:pointer; list-style:none; padding:1.05rem 2.4rem 1.05rem 0; font-weight:700; position:relative; font-size:1.02rem; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:0.3rem; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--terracotta-tint); color:var(--terracotta-deep); display:flex; align-items:center; justify-content:center; font-size:1.2rem; transition:transform .25s; }
.faq details[open] summary::after{ content:"−"; }
.faq summary:focus-visible{ outline:3px solid var(--turquoise); outline-offset:2px; border-radius:4px; }
.faq details p{ padding:0 0 1.1rem; color:var(--ink-soft); margin:0; }

.post-end-cta{ margin-top:3rem !important; padding:clamp(1.4rem,4vw,2rem); border-radius:var(--radius-l); background:var(--surface-2); display:flex; flex-direction:column; gap:1.2rem; }
.post-end-cta h2{ margin-top:0.4rem; font-size:clamp(1.4rem,3vw,1.8rem); }
.post-end-cta p{ color:var(--ink-soft); font-size:1rem; margin-top:0.5rem; }
.post-end-btns{ display:flex; flex-wrap:wrap; gap:0.6rem; }
.post-tags{ display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:2rem !important; }
.post-tags a{ font-size:0.86rem; color:var(--ink-soft); text-decoration:none; padding:0.3rem 0.75rem; border-radius:999px; background:var(--surface); border:1px solid var(--line-soft); }
.post-tags a:hover{ color:var(--terracotta-deep); border-color:var(--terracotta); }

.related{ padding:clamp(3rem,6vw,4.5rem) 0; background:var(--surface-2); }
.related h2{ font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:1.6rem; }
.blog-cta{ padding:clamp(2.5rem,6vw,4rem) 0 clamp(3.5rem,7vw,5rem); }
.blog-cta .vip-band{ margin-top:0; }