/* Blog pages: shares the homepage's Kasbah design tokens */
:root {
  --yaz: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="50 -714 661 714"%3E%3Cpath transform="scale%281,-1%29" d="M50 0Q68 122 143.0 200.0Q218 278 336 291V423Q218 436 143.0 514.0Q68 592 50 714H140Q155 626 202.5 570.0Q250 514 336 503V714H425V503Q511 515 558.5 570.5Q606 626 621 714H711Q693 592 617.5 514.5Q542 437 425 423V291Q542 277 617.5 199.5Q693 122 711 0H621Q606 88 558.5 143.5Q511 199 425 211V0H336V211Q250 200 202.5 144.0Q155 88 140 0Z"/%3E%3C/svg%3E");
  --sand: #EFE3CC;
  --paper: #F8F1E3;
  --kraft: #E4CFA9;
  --ochre: #B97A3A;
  --henna: #A8392B;
  --henna-deep: #8C2E22;
  --indigo: #1F2A44;
  --brass: #C9A266;
  --charcoal: #241C16;
  --ink-soft: #5E4D3F;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --tif: "Noto Sans Tifinagh", "Ebrima", sans-serif;
  --m-point: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 400' preserveAspectRatio='none'%3E%3Cpath d='M0 400V200A190 190 0 0 1 150 14.3A190 190 0 0 1 300 200V400Z'/%3E%3C/svg%3E");
  --merlon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cpath d='M0 24V18H8V12H12V6H16V0H32V6H36V12H40V18H48V24Z'/%3E%3C/svg%3E");
  --star: polygon(50% 0, 64.64% 14.64%, 85.36% 14.64%, 85.36% 35.36%, 100% 50%, 85.36% 64.64%, 85.36% 85.36%, 64.64% 85.36%, 50% 100%, 35.36% 85.36%, 14.64% 85.36%, 14.64% 64.64%, 0 50%, 14.64% 35.36%, 14.64% 14.64%, 35.36% 14.64%);
  --rug: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Crect width='44' height='44' fill='%23241C16'/%3E%3Cpath d='M0 0h44L22 14z' fill='%23A8392B'/%3E%3Cpath d='M0 44h44L22 30z' fill='%23B97A3A'/%3E%3Cpath d='M22 14l8 8-8 8-8-8z' fill='%23EFE3CC'/%3E%3Cpath d='M22 19l3 3-3 3-3-3z' fill='%23A8392B'/%3E%3Cpath d='M0 14l8 8-8 8zM44 14l-8 8 8 8z' fill='%23C9A266'/%3E%3Ccircle cx='22' cy='5' r='1.8' fill='%23EFE3CC'/%3E%3Ccircle cx='22' cy='39' r='1.8' fill='%23241C16'/%3E%3C/svg%3E");
  --loz-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='72'%3E%3Cg fill='none' stroke='%23241C16' stroke-opacity='.06' stroke-width='1.4'%3E%3Cpath d='M28 0L56 36L28 72L0 36Z'/%3E%3Cpath d='M28 27l7 9-7 9-7-9z'/%3E%3C/g%3E%3C/svg%3E");
  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .2 0 0 0 0 .12 0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --plaster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .007' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .44 0 0 0 0 .26 0 0 0 .55 -.16'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--sand); color: var(--charcoal); font-family: var(--body); font-size: 17px; line-height: 1.65; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--henna); outline-offset: 3px; }
.wrap { position: relative; width: min(1200px, 100% - 32px); margin-inline: auto; }
.tex::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--loz-dark), var(--grain-dark), var(--plaster); }
.rug { height: clamp(24px, 2.8vw, 34px); background: var(--rug) left center / auto 100% repeat-x; }
.kasbah { position: relative; height: 24px; background: var(--from, var(--sand)); }
.kasbah::after { content: ""; position: absolute; inset: 0; background: var(--to, var(--charcoal)); -webkit-mask: var(--merlon) 0 100% / 48px 24px space no-repeat; mask: var(--merlon) 0 100% / 48px 24px space no-repeat; }
.label { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--henna); text-decoration: none; }
.label::before { content: ""; width: 12px; height: 12px; background: currentColor; clip-path: var(--star); flex: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; line-height: 1.08; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 16px; line-height: 1.15; padding: 15px 26px; border: 1px solid var(--henna-deep); border-radius: 999px; background: var(--henna); color: var(--paper); text-decoration: none; box-shadow: inset 0 0 0 3px var(--henna), inset 0 0 0 4px rgba(239,227,204,.35), 0 10px 22px -12px rgba(36,28,22,.6); transition: background .2s, translate .2s; }
.btn:hover { background: var(--henna-deep); box-shadow: inset 0 0 0 3px var(--henna-deep), inset 0 0 0 4px rgba(239,227,204,.35), 0 12px 24px -12px rgba(36,28,22,.65); translate: 0 -1px; }
.btn svg { width: 21px; height: 21px; fill: currentColor; flex: none; }
.btn-line { background: transparent; color: var(--sand); border-color: rgba(239,227,204,.6); box-shadow: none; }
.btn-line:hover { background: rgba(239,227,204,.08); box-shadow: none; }
.btn-sm { padding: 11px 20px; font-size: 15px; }

/* header */
.hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--sand) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(36,28,22,.16); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 72px; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--charcoal); }
.logo .mark { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--henna); color: var(--sand); clip-path: var(--star); font-family: var(--tif); font-size: 19px; line-height: 1; }
.logo b { display: block; font-family: var(--display); font-weight: 600; font-size: 23px; line-height: 1; white-space: nowrap; }
.logo b i { font-style: normal; color: var(--brass); margin: 0 .16em; }
.logo b em { font-style: italic; color: var(--henna); }
.logo small { display: block; font-family: var(--hand); font-weight: 700; font-size: 17px; color: var(--ink-soft); line-height: 1; margin-top: 3px; }
.nav-links { display: flex; gap: 30px; list-style: none; font-weight: 500; font-size: 15.5px; }
.nav-links a { text-decoration: none; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--henna); }
.m-only { display: none; }
.burger { display: none; width: 46px; height: 46px; place-items: center; align-content: center; gap: 5px; background: transparent; border: 1px solid rgba(36,28,22,.4); border-radius: 999px; cursor: pointer; }
.burger span { display: block; width: 18px; height: 2px; background: var(--charcoal); border-radius: 2px; transition: rotate .25s, translate .25s, opacity .2s; }
.hdr.open .burger span:nth-child(1) { translate: 0 7px; rotate: 45deg; }
.hdr.open .burger span:nth-child(2) { opacity: 0; }
.hdr.open .burger span:nth-child(3) { translate: 0 -7px; rotate: -45deg; }
.nav-r { display: flex; align-items: center; gap: 12px; }
@media (max-width: 900px) {
  .burger { display: grid; }
  .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--sand); border-bottom: 1px solid rgba(36,28,22,.2); padding: 6px 16px 22px; }
  .hdr.open .nav-links { display: flex; }
  .nav-links li:not(.m-only) a { display: block; font-family: var(--display); font-weight: 600; font-size: 26px; padding: 12px 0; border-bottom: 1px solid rgba(36,28,22,.14); }
  .m-only { display: block; padding-top: 18px; }
}
@media (max-width: 480px) { .nav-cta { display: none; } .logo b { font-size: 19px; } .logo .mark { width: 36px; height: 36px; font-size: 16px; } .logo small { font-size: 15px; } }

/* article hero */
.a-hero { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 72px) 0 clamp(44px, 5vw, 76px); }
.a-hero-grid { position: relative; display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; color: var(--ink-soft); margin-bottom: 22px; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--henna); }
.crumbs span[aria-hidden] { color: var(--brass); }
.a-hero h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.04; margin: 16px 0 20px; }
.a-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--ink-soft); font-size: 15px; }
.a-meta .by { display: inline-flex; align-items: center; gap: 10px; }
.a-meta .av { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; box-shadow: 0 0 0 2px var(--brass); }
.a-meta b { color: var(--charcoal); font-weight: 700; }
.a-lede { font-size: clamp(18px, 1.5vw, 20px); color: var(--ink-soft); max-width: 58ch; margin-top: 20px; }
.arch-img { filter: drop-shadow(0 18px 22px rgba(36,28,22,.25)); }
.arch-img > div { aspect-ratio: 3 / 4; padding: 7px; background: var(--paper); -webkit-mask: var(--m-point) center / 100% 100% no-repeat; mask: var(--m-point) center / 100% 100% no-repeat; }
.arch-img img { width: 100%; height: 100%; object-fit: cover; -webkit-mask: var(--m-point) center / 100% 100% no-repeat; mask: var(--m-point) center / 100% 100% no-repeat; }
.a-hero .arch-img { width: min(100%, 360px); margin-left: auto; }
@media (max-width: 860px) {
  .a-hero-grid { grid-template-columns: 1fr; }
  .a-hero .arch-img { width: min(70%, 300px); margin: 0 auto; order: -1; }
}

/* prose */
.a-body { position: relative; background: var(--paper); padding: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 100px); }
.prose { width: min(720px, 100% - 32px); margin-inline: auto; font-size: 18px; line-height: 1.72; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { display: flex; align-items: baseline; gap: 14px; font-size: clamp(28px, 3vw, 38px); margin-top: 2.1em; }
.prose h2::before { content: ""; width: 14px; height: 14px; flex: none; background: var(--brass); clip-path: var(--star); translate: 0 -.12em; }
.prose h3 { font-size: clamp(22px, 2.2vw, 26px); margin-top: 1.8em; }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose a { color: var(--henna); text-decoration-thickness: 1.5px; text-underline-offset: .16em; text-decoration-color: rgba(168,57,43,.45); }
.prose a:hover { text-decoration-color: var(--henna); }
.prose strong { font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: .4em; }
.prose ul li::marker { content: "✦  "; color: var(--brass); font-size: .8em; }
.prose blockquote { position: relative; background: var(--sand); border-radius: 22px 22px 8px 8px; padding: 22px 26px; box-shadow: 0 0 0 1px rgba(201,162,102,.75), 0 0 0 6px var(--paper), 0 0 0 7px rgba(201,162,102,.4); }
.prose blockquote p { font-size: 18.5px; }
.prose blockquote strong:first-child { color: var(--henna); font-family: var(--body); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.prose img { width: 100%; max-height: 640px; object-fit: cover; border-radius: 180px 180px 12px 12px; box-shadow: 0 0 0 6px var(--sand), 0 0 0 7px rgba(201,162,102,.5); margin-block: 1.6em; }
.prose p:has(> img:only-child) { max-width: 480px; margin-inline: auto; }
.prose .table-wrap { overflow-x: auto; border-radius: 12px 12px 0 0; }
.prose table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 15.5px; line-height: 1.5; }
.prose thead th { font-family: var(--display); font-weight: 600; font-size: 16px; text-align: left; background: var(--indigo); color: var(--sand); padding: 12px 14px; white-space: nowrap; }
.prose thead th:first-child { border-radius: 12px 0 0 0; }
.prose thead th:last-child { border-radius: 0 12px 0 0; }
.prose td { padding: 11px 14px; border-bottom: 1px solid rgba(36,28,22,.12); vertical-align: top; }
.prose tbody tr:nth-child(odd) td { background: rgba(239,227,204,.55); }
.prose hr { border: 0; height: 14px; background: var(--brass); clip-path: var(--star); width: 14px; margin: 2.4em auto; }
mark.confirm { background: #FFE9A8; color: #6B4A00; border-radius: 6px; padding: 1px 6px; font-size: .88em; font-weight: 600; box-shadow: inset 0 0 0 1px #E0B84A; }

/* faq inside article */
.faq-block { margin-top: 2.2em; }
.qa { border-bottom: 1px solid rgba(36,28,22,.18); }
.qa:first-of-type { border-top: 1px solid rgba(36,28,22,.18); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 2px; font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1.25; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: var(--brass); color: var(--charcoal); clip-path: var(--star); font-size: 18px; transition: rotate .3s, background .25s, color .25s; }
.qa[open] summary::after { rotate: 45deg; background: var(--henna); color: var(--sand); }
.qa summary:hover { color: var(--henna); }
.qa .ans { padding: 0 2px 20px; color: var(--ink-soft); }
.qa .ans > * + * { margin-top: .8em; }

/* CTA */
.cta { position: relative; overflow: hidden; background: var(--indigo); color: var(--sand); border-radius: 220px 220px 20px 20px; padding: clamp(70px, 8vw, 100px) clamp(22px, 5vw, 60px) clamp(40px, 5vw, 56px); text-align: center; width: min(820px, 100% - 32px); margin: clamp(56px, 7vw, 90px) auto 0; }
.cta::before { content: ""; position: absolute; right: -30px; bottom: -60px; height: 300px; aspect-ratio: 661 / 714; background: var(--brass); opacity: .07; -webkit-mask: var(--yaz) center / contain no-repeat; mask: var(--yaz) center / contain no-repeat; }
.cta .label { color: var(--brass); }
.cta h2 { font-size: clamp(30px, 3.6vw, 46px); margin: 12px auto 12px; max-width: 18ch; }
.cta p { color: rgba(239,227,204,.82); max-width: 50ch; margin: 0 auto 26px; }
.cta .ctas { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta .hand { display: block; margin-top: 20px; font-family: var(--hand); font-weight: 700; font-size: 24px; color: var(--brass); }
@media (max-width: 560px) { .cta { border-radius: 140px 140px 16px 16px; } }

/* cards (related + index) */
.related { position: relative; padding: clamp(64px, 7vw, 100px) 0; }
.related h2 { font-size: clamp(30px, 3.4vw, 44px); margin: 12px 0 34px; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.card { display: flex; flex-direction: column; text-decoration: none; }
.card .pimg { padding: 6px; background: var(--paper); border-radius: 50% 50% 8px 8px / 30% 30% 8px 8px; box-shadow: 0 16px 24px -16px rgba(36,28,22,.5); }
.card img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: 50% 50% 5px 5px / 30% 30% 5px 5px; }
.card .tag { margin: 18px 2px 0; font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--henna); }
.card h3 { font-size: 23px; line-height: 1.12; margin: 8px 2px 8px; }
.card:hover h3 { color: var(--henna); }
.card p { margin: 0 2px; font-size: 15px; color: var(--ink-soft); }
.card .more { margin: 12px 2px 0; font-family: var(--hand); font-weight: 700; font-size: 22px; color: var(--henna); }
@media (max-width: 900px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* blog index */
.b-hero { position: relative; overflow: hidden; background: var(--indigo); color: var(--sand); padding: clamp(56px, 7vw, 100px) 0; }
.b-hero::after { content: ""; position: absolute; right: -2%; top: 50%; translate: 0 -50%; height: clamp(230px, 31vw, 460px); aspect-ratio: 661 / 714; background: var(--brass); opacity: .06; -webkit-mask: var(--yaz) center / contain no-repeat; mask: var(--yaz) center / contain no-repeat; }
.b-hero .label { color: var(--brass); }
.b-hero h1 { font-size: clamp(44px, 6vw, 84px); margin: 14px 0 16px; max-width: 14ch; }
.b-hero h1 em { color: var(--brass); font-weight: 500; }
.b-hero p { color: rgba(239,227,204,.84); max-width: 56ch; font-size: 19px; }
.b-hero .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.b-hero .chips a { text-decoration: none; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(201,162,102,.6); color: var(--sand); }
.b-hero .chips a:hover { background: rgba(201,162,102,.18); }
.cluster { position: relative; padding: clamp(60px, 7vw, 96px) 0 0; scroll-margin-top: 80px; }
.cluster:last-of-type { padding-bottom: clamp(60px, 7vw, 96px); }
.cluster-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 30px; flex-wrap: wrap; margin-bottom: 34px; }
.cluster-head h2 { font-size: clamp(32px, 4vw, 52px); margin-top: 10px; }
.cluster-head p { color: var(--ink-soft); max-width: 46ch; }
.pillar { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; text-decoration: none; background: var(--paper); border-radius: 20px; padding: clamp(18px, 2.4vw, 28px); box-shadow: 0 0 0 1px rgba(201,162,102,.6), 0 20px 34px -24px rgba(36,28,22,.5); margin-bottom: 34px; }
.pillar img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 160px 160px 10px 10px; }
.pillar .tag { font-size: 11.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--henna); }
.pillar h3 { font-size: clamp(28px, 3vw, 40px); margin: 10px 0 12px; }
.pillar:hover h3 { color: var(--henna); }
.pillar p { color: var(--ink-soft); }
.pillar .more { display: inline-block; margin-top: 16px; font-family: var(--hand); font-weight: 700; font-size: 24px; color: var(--henna); }
@media (max-width: 760px) { .pillar { grid-template-columns: 1fr; } }

/* footer */
footer { background: var(--charcoal); color: rgba(239,227,204,.75); font-size: 15px; }
.foot { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 36px; padding: 60px 0 34px; }
footer .logo { color: var(--sand); }
footer .logo small { color: rgba(239,227,204,.7); }
footer .logo b em { color: var(--brass); }
.foot p { margin-top: 16px; max-width: 36ch; }
.foot .fh { font-weight: 700; font-size: 12.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--brass); margin-bottom: 14px; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--brass); }
.foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding: 20px 0 32px; border-top: 1px solid rgba(239,227,204,.14); font-size: 13.5px; }
@media (max-width: 760px) { .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot { grid-template-columns: 1fr; } }

.wa-float { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: 58px; height: 58px; display: grid; place-items: center; border-radius: 50%; background: #25D366; box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.wa-float svg { width: 30px; height: 30px; fill: #fff; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }