/* ===== BLOG COVERS + CARDS (shared by the Home teaser and the Blog pages) =====
     A post's cover is generated from its title: the title in type over a
     tinted brand pattern. One of four tints is picked from the post's
     topic, so a topic always looks the same. She can upload her own image
     for any post instead; this is the default. */
  .cover{ --cv-bg:var(--c-950); --cv-fg:var(--c-100); --cv-pat:url(../img/pattern-tile.png); position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:16px; aspect-ratio:16/10; padding:22px 24px; border-radius:var(--radius-md); overflow:hidden; background:var(--cv-bg); color:var(--cv-fg); }

.cover::before{ content:''; position:absolute; inset:0; z-index:-1; background:var(--cv-pat) center top / 360px auto repeat; }

.cover--mid{ --cv-bg:var(--c-900); }

.cover--sand{ --cv-bg:var(--c-200); --cv-fg:var(--c-950); --cv-pat:url(../img/pattern-tile-dark.png); box-shadow:inset 0 0 0 1px var(--c-300); }

.cover--mist{ --cv-bg:var(--c-300); --cv-fg:var(--c-950); --cv-pat:url(../img/pattern-tile-dark.png); }

.cover-mark{ width:12px; height:12px; display:block; opacity:.85; filter:brightness(0) invert(1); }

.cover--sand .cover-mark, .cover--mist .cover-mark{ filter:none; opacity:.7; }

.cover-title{ font-family:var(--font-display); font-size:clamp(1.15rem,.5vw + 1rem,1.5rem); line-height:1.25; font-weight:500; text-wrap:balance; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }

.post-card{ position:relative; display:flex; flex-direction:column; gap:18px; }

.post-card .cover{ transition:transform .6s var(--ease), box-shadow .6s var(--ease); }

@media (hover:hover) and (pointer:fine){
    .post-card:hover .cover{ transform:translateY(-6px); box-shadow:0 28px 46px -28px rgba(37,48,40,.45); }
  }

.post-line{ display:flex; flex-wrap:wrap; gap:4px 10px; font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--c-600); }

.post-line span + span::before{ content:'\00B7'; margin-right:10px; }

.post-card h3{ font-size:1.375rem; line-height:1.3; text-wrap:balance; }

.post-card h3 a{ color:inherit; }

.post-card h3 a::after{ content:''; position:absolute; inset:0; z-index:2; }

.post-excerpt{ font-size:1rem; line-height:1.7; color:var(--c-600); }

.post-more{ display:inline-flex; align-items:center; gap:8px; margin-top:2px; font-size:.8125rem; font-weight:500; letter-spacing:.03em; color:var(--c-950); }

.post-more svg{ width:14px; height:14px; transition:transform .5s var(--ease); }

@media (hover:hover) and (pointer:fine){ .post-card:hover .post-more svg{ transform:translateX(4px); } }

/* ===== end blog covers + cards ===== */

  [hidden]{ display:none !important; }

.primary-nav a[aria-current="page"]::after{ transform:scaleX(1); }

.mobile-nav-links a[aria-current="page"]{ color:var(--c-600); }

.ph{ color:var(--c-950); }

.sample-note{ display:inline-block; padding:10px 16px; border:1px dashed var(--c-600); border-radius:12px; font-size:.875rem; line-height:1.5; color:var(--c-600); }

/* ===================================================================
     BLOG (public pages). Everything here is sample content for design:
     the real posts come from the admin portal.
     =================================================================== */
  .bl-hero{ background:var(--c-100); padding-top:clamp(56px,8vw,112px); padding-bottom:clamp(32px,4vw,56px); }

.bl-eyebrow{ margin-bottom:26px; }

.bl-hero h1{ font-size:clamp(2.1rem, 2vw + 1.3rem, 3.25rem); line-height:1.15; letter-spacing:-.01em; }

.bl-lead{ margin-top:22px; max-width:none; font-size:1.125rem; line-height:1.8; color:var(--c-600); }

.bl-hero .sample-note{ margin-top:26px; }

.bl-tools{ background:var(--c-100); padding-bottom:clamp(28px,3vw,40px); }

.bl-tools-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding-bottom:6px; border-bottom:1px solid var(--c-300); }

.bl-tabs{ display:flex; gap:28px; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; margin-bottom:-7px; scrollbar-width:none; -ms-overflow-style:none; min-width:0; }

.bl-tabs::-webkit-scrollbar{ display:none; }

.bl-tab{ flex:none; padding:12px 0 21px; font:inherit; font-size:.9375rem; color:var(--c-600); background:none; border:0; border-bottom:1.5px solid transparent; cursor:pointer; white-space:nowrap; transition:color .3s var(--ease), border-color .3s var(--ease); }

.bl-tab:hover{ color:var(--c-950); }

.bl-tab[aria-pressed="true"]{ color:var(--c-950); font-weight:600; border-bottom-color:var(--c-950); }

.bl-tab:focus-visible, .bl-search input:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(37,48,40,.14); border-radius:8px; }

.bl-search{ position:relative; flex:none; width:min(280px,100%); }

.bl-search svg{ position:absolute; left:14px; top:50%; width:16px; height:16px; margin-top:-8px; color:var(--c-600); pointer-events:none; }

.bl-search input{ width:100%; font:inherit; font-size:.9375rem; color:var(--c-950); background:var(--c-200); border:1px solid var(--c-300); border-radius:999px; padding:11px 16px 11px 40px; -webkit-appearance:none; appearance:none; transition:border-color .3s var(--ease); }

.bl-search input::placeholder{ color:rgba(74,86,80,.65); }

.bl-search input:hover{ border-color:var(--c-600); }

.bl-search input:focus-visible{ border-color:var(--c-950); border-radius:999px; }

.bl-list{ background:var(--c-100); padding-bottom:clamp(72px,9vw,128px); }

.bl-feature{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,4vw,64px); align-items:center; margin-bottom:clamp(44px,5vw,72px); }

.bl-feature .cover{ aspect-ratio:16/10; }

.bl-feature .cover-title{ display:none; }

.bl-feature .cover{ justify-content:flex-start; }

.bl-feature .post-tag-feat{ font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-600); margin-bottom:-4px; }

.bl-feature h2{ font-size:clamp(1.6rem,1.4vw + 1.1rem,2.25rem); line-height:1.2; text-wrap:balance; }

.bl-feature h2 a{ color:inherit; }

.bl-feature h2 a::after{ content:''; position:absolute; inset:0; z-index:2; }

.bl-feature .post-excerpt{ font-size:1.0625rem; }

.bl-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(36px,4vw,56px) 24px; }

.bl-more{ margin-top:clamp(40px,5vw,64px); display:flex; flex-direction:column; align-items:center; gap:16px; }

.bl-count{ margin-top:clamp(28px,3vw,40px); text-align:center; font-size:.875rem; color:var(--c-600); }

.bl-more + .bl-count, .bl-count + .bl-more{ margin-top:16px; }

.bl-none{ padding:clamp(40px,6vw,80px) 0; text-align:center; display:flex; flex-direction:column; align-items:center; }

.bl-none h2{ font-size:clamp(1.5rem,1vw + 1.2rem,1.9rem); line-height:1.25; }

.bl-none p{ margin-top:12px; max-width:480px; font-size:1.0625rem; line-height:1.75; color:var(--c-600); }

.bl-none .btn{ margin-top:26px; }

/* "coming soon": shown until the first post is published */
  .bl-soon{ background:var(--c-100); padding-block:clamp(32px,4vw,56px) clamp(88px,11vw,144px); }

.bl-soon-card{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:clamp(40px,6vw,80px) clamp(24px,5vw,64px); background:var(--c-200); border:1px solid var(--c-300); border-radius:var(--radius-lg); }

.bl-soon-card .soon-icon{ width:64px; height:64px; border-radius:50%; border:1px solid var(--c-300); background:var(--c-100); display:flex; align-items:center; justify-content:center; }

.bl-soon-card .soon-icon img{ width:28px; height:auto; }

.bl-soon-card h2{ margin-top:24px; font-size:clamp(1.6rem,1.2vw + 1.2rem,2.2rem); line-height:1.2; }

.bl-soon-card p{ margin-top:14px; max-width:520px; font-size:1.0625rem; line-height:1.8; color:var(--c-600); }

.bl-soon-actions{ margin-top:30px; display:flex; flex-wrap:wrap; justify-content:center; gap:14px; }

/* ---------------- a single post ---------------- */
  .bp-head{ background:var(--c-100); padding-top:clamp(40px,5vw,72px); padding-bottom:clamp(28px,3.5vw,48px); }

.bp-head .container{ max-width:1500px; }

.bp-head h1{ margin-top:14px; font-size:clamp(2.1rem, 2vw + 1.3rem, 3.25rem); line-height:1.15; letter-spacing:-.01em; text-wrap:balance; }

.bp-meta{ margin-top:26px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; font-size:.9375rem; color:var(--c-600); }

.bp-by{ display:flex; align-items:center; gap:12px; color:var(--c-950); font-weight:500; }

.bp-by .av{ width:40px; height:40px; border-radius:50%; background:var(--c-200); border:1px solid var(--c-300); display:flex; align-items:center; justify-content:center; flex:none; }

.bp-by .av img{ width:15px; height:auto; opacity:.55; }

.bp-by small{ display:block; font-size:.75rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--c-600); margin-top:2px; }

.bp-head .sample-note{ margin-top:26px; }

.bp-cover{ background:var(--c-100); padding-bottom:clamp(36px,5vw,64px); }

.bp-cover .container{ max-width:1500px; }

.cover--banner{ aspect-ratio:21/8; }

.cover--banner .cover-title{ display:none; }

.cover--banner{ justify-content:flex-start; }

.bp-body{ background:var(--c-100); padding-bottom:clamp(56px,7vw,96px); }

.prose{ max-width:1500px; margin-inline:auto; padding-inline:var(--pad-inline); }

.prose > * + *{ margin-top:22px; }

.prose p, .prose li{ font-size:1.1875rem; line-height:1.85; color:var(--c-600); }

.prose strong{ color:var(--c-950); font-weight:600; }

.prose a{ color:var(--c-950); text-decoration:underline; text-decoration-color:var(--c-300); text-underline-offset:4px; transition:text-decoration-color .3s var(--ease); }

.prose a:hover{ text-decoration-color:var(--c-950); }

.prose h2{ margin-top:52px; font-size:clamp(1.5rem,1vw + 1.2rem,1.9rem); line-height:1.3; }

.prose h3{ margin-top:40px; font-size:1.3125rem; line-height:1.35; }

.prose ul, .prose ol{ padding:0; }

.prose ul{ list-style:none; }

.prose ul li{ position:relative; padding-left:28px; margin-top:10px; }

.prose ul li::before{ content:''; position:absolute; left:2px; top:.8em; width:10px; height:10px; background:url(../img/icon-mark-dark.png) center / contain no-repeat; opacity:.5; }

.prose ol{ list-style:none; counter-reset:n; }

.prose ol li{ counter-increment:n; position:relative; padding-left:34px; margin-top:10px; }

.prose ol li::before{ content:counter(n) "."; position:absolute; left:0; top:0; font-family:var(--font-body); font-weight:600; color:var(--c-600); }

.prose blockquote{ margin-block:40px; padding:4px 0 4px 28px; border-left:2px solid var(--c-950); font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.4rem,1vw + 1.1rem,1.8rem); line-height:1.4; color:var(--c-950); }

.note{ padding:22px 26px; background:var(--c-200); border:1px solid var(--c-300); border-radius:var(--radius-md); }

.note-label{ display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-600); }

.note-label img{ width:11px; height:11px; }

.note p{ font-size:1.0625rem; line-height:1.75; }

.prose figure{ margin-block:40px; }

.prose .img{ aspect-ratio:16/9; border-radius:var(--radius-md); position:relative; isolation:isolate; overflow:hidden; background:var(--c-200); box-shadow:inset 0 0 0 1px var(--c-300); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--c-600); }

.prose .img::before{ content:''; position:absolute; inset:0; z-index:-1; background:url(../img/pattern-tile-dark.png) center / 320px auto repeat; }

.prose figcaption{ margin-top:12px; font-size:.875rem; line-height:1.6; color:var(--c-600); text-align:center; }

.ar{ font-family:'Noto Naskh Arabic',serif; font-size:1.2em; line-height:1; color:var(--c-950); }

.prose .ar-block{ font-family:'Noto Naskh Arabic',serif; font-size:2rem; line-height:2; color:var(--c-950); text-align:center; }

.bp-end{ background:var(--c-100); padding-bottom:clamp(56px,7vw,96px); }

.bp-end .container{ max-width:1500px; display:flex; flex-direction:column; gap:28px; }

.bp-author{ display:flex; align-items:center; gap:16px; padding-top:28px; border-top:1px solid var(--c-300); }

.bp-author .av{ width:56px; height:56px; border-radius:50%; background:var(--c-200); border:1px solid var(--c-300); display:flex; align-items:center; justify-content:center; flex:none; }

.bp-author .av img{ width:20px; height:auto; opacity:.55; }

.bp-author p:first-child{ font-family:var(--font-display); font-size:1.25rem; font-weight:500; color:var(--c-950); }

.bp-author p:last-child{ margin-top:4px; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--c-600); }

.bp-cta{ padding:clamp(32px,4.5vw,52px) clamp(24px,5vw,64px); background:var(--c-200); border:1px solid var(--c-300); border-radius:var(--radius-lg); text-align:center; display:flex; flex-direction:column; align-items:center; }

.bp-cta h2{ font-size:clamp(1.5rem,1.2vw + 1.2rem,2rem); line-height:1.25; }

.bp-cta p{ margin-top:12px; font-size:1.0625rem; line-height:1.7; color:var(--c-600); }

.bp-cta .btn{ margin-top:24px; }

.bp-related{ background:var(--c-200); padding-block:clamp(64px,8vw,112px); }

.bp-related-head{ margin-bottom:clamp(32px,4vw,48px); }

.bp-related-head .eyebrow{ margin-bottom:16px; }

.bp-related-head h2{ font-size:clamp(1.6rem,1.2vw + 1.2rem,2.2rem); line-height:1.2; }

.bp-related .cover--sand{ --cv-bg:var(--c-100); }

@media (max-width:960px){
    .bl-feature{ grid-template-columns:1fr; }
    .bl-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
    .bl-tools-row{ flex-direction:column-reverse; align-items:stretch; gap:14px; border-bottom:none; padding-bottom:0; }
    .bl-tabs{ border-bottom:1px solid var(--c-300); padding-bottom:0; }
    .bl-tabs{ margin-bottom:-1px; }
    .bl-tab{ padding-bottom:13px; }
    .bl-search{ width:100%; }
  }

@media (max-width:640px){
    .bl-grid{ grid-template-columns:1fr; }
    .cover--banner{ aspect-ratio:16/8; }
    .bl-more .btn{ width:auto; }
  }

/* ===== responsive ===== */
  @media (max-width:960px){
    .primary-nav{ display:none; }
    .header-actions .btn{ display:none; }
    .nav-toggle{ display:inline-flex; }

    .mobile-nav{ position:fixed; inset:0; z-index:200; display:flex; align-items:flex-start; justify-content:center; padding:104px 20px 32px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease), visibility 0s linear .4s; }
    .mobile-nav.is-open{ opacity:1; visibility:visible; transition:opacity .4s var(--ease), visibility 0s; }
    .mobile-nav-backdrop{ position:absolute; inset:0; background:rgba(37,48,40,.45); }
    .mobile-nav-panel{ position:relative; z-index:1; width:100%; max-width:420px; max-height:100%; overflow-y:auto; display:flex; flex-direction:column; background:var(--c-100); border-radius:var(--radius-lg); box-shadow:0 32px 64px -24px rgba(37,48,40,.5); padding:26px 26px 30px; transform:translateY(14px) scale(.98); transition:transform .45s var(--ease); }
    .mobile-nav.is-open .mobile-nav-panel{ transform:translateY(0) scale(1); }
    .mobile-nav-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:26px; }
    .mobile-nav-label{ margin:0; }
    .mobile-nav-close{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; flex:none; border:1px solid var(--c-300); background:none; color:var(--c-950); cursor:pointer; transition:background-color .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), transform .35s var(--ease); }
    .mobile-nav-close svg{ width:14px; height:14px; }
    .mobile-nav-close:hover{ background:var(--c-950); border-color:var(--c-950); color:var(--c-100); }
    .mobile-nav-close:active{ transform:scale(.92); }
    .mobile-nav-links{ display:flex; flex-direction:column; }
    .mobile-nav-links a{ padding:15px 2px; font-family:var(--font-body); font-size:1.3125rem; font-weight:500; color:var(--c-950); border-bottom:1px solid var(--c-300); }
    .mobile-nav-links a:first-child{ padding-top:2px; }
    .mobile-nav-links a:last-child{ border-bottom:none; }
    .mobile-nav-cta{ margin-top:26px; width:100%; }
    body.nav-open{ overflow:hidden; }

    .footer-top{ grid-template-columns:1fr 1fr; row-gap:40px; }
  }

@media (max-width:640px){
    .site-header .container{ height:76px; }
    .site-header .logo-img{ height:32px; }
    .mobile-nav{ padding-top:92px; }
    /* buttons hug their labels (both as wide as the longer one, centred) instead of stretching across the screen */
    .footer-top{ grid-template-columns:1fr; }
    .footer-bottom{ flex-direction:column; align-items:flex-start; }
  }

/* ===== draft preview banner (admin only) ===== */
  .pv-bar{ position:relative; z-index:70; display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; padding:12px 24px; background:var(--c-950); color:var(--c-100); font-size:.875rem; line-height:1.5; text-align:center; }

.pv-bar strong{ font-weight:600; letter-spacing:.14em; text-transform:uppercase; font-size:.75rem; }

.pv-bar a{ display:inline-flex; align-items:center; height:34px; padding:0 16px; border:1px solid rgba(246,244,241,.5); border-radius:999px; font-weight:600; color:var(--c-100); transition:background-color .3s var(--ease), color .3s var(--ease); }

.pv-bar a:hover{ background:var(--c-100); color:var(--c-950); }

.prose figure img{ display:block; width:100%; height:auto; border-radius:var(--radius-md); }

.prose [dir="rtl"]{ font-family:'Noto Naskh Arabic',serif; }

.prose p[dir="rtl"], .prose h2[dir="rtl"], .prose h3[dir="rtl"]{ font-size:2rem; line-height:2; color:var(--c-950); text-align:center; }

.prose blockquote[dir="rtl"]{ border-left:0; border-right:2px solid var(--c-950); padding:4px 28px 4px 0; font-style:normal; }

.prose span[dir="rtl"]{ font-size:1.2em; line-height:1; unicode-bidi:isolate; color:var(--c-950); }

.prose figure{ margin-inline:0; }

/* a cover that is her own photo */
.cover--photo{ padding:0; box-shadow:none; background:var(--c-200); }

.cover--photo::before{ display:none; }

.cover--photo > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }