/* The blog (/blog, /blog/ugc-radar, /blog/brand-watch, /blog/<story>): the site's palette and faces, set for reading. */

.bl{background:var(--cream)}
.nb{white-space:nowrap}
.bl-page .accent{font-family:var(--display);font-style:italic;position:relative;font-weight:400;isolation:isolate;white-space:nowrap}
.bl-page .accent::after{content:"";position:absolute;left:-6px;right:-6px;top:.12em;bottom:.06em;background:var(--gold);opacity:.42;border-radius:6px;z-index:-1;transform:skew(-3deg)}

/* ---------- list pages */
.bl-head{padding:26px 0 44px;background:radial-gradient(55% 90% at 90% 10%,rgba(212,197,232,.32),transparent 70%),radial-gradient(50% 80% at 8% 100%,rgba(245,197,192,.26),transparent 70%),var(--cream);border-bottom:1px solid var(--border)}
.bl-head h1{margin-top:30px;font-size:clamp(44px,6vw,84px);line-height:1.08;max-width:17ch}
.bl-line{margin:20px 0 0;font-size:clamp(17px,1.45vw,20px);line-height:1.55;color:var(--ink-2);max-width:58ch}
.bl-filters{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.bl-filters a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;border:1px solid var(--border);background:#fff;font-size:15px;font-weight:500;color:var(--ink-2);transition:border-color .25s ease,color .25s ease}
.bl-filters a:hover{border-color:rgba(176,138,85,.6);color:var(--ink)}
.bl-filters a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.bl-stories{padding:52px 0 96px}
.bl-stories.more{padding-top:64px;border-top:1px solid var(--border)}
.bl-section{font-family:var(--display);font-weight:400;font-size:clamp(28px,2.6vw,36px);line-height:1.1;margin-bottom:26px}
.bl-empty{font-size:17px;color:var(--ink-2)}

/* ---------- cards */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 26px}
.bl-card{min-width:0}
.bl-card-link{display:block;color:inherit;text-decoration:none}
.bl-cover{overflow:hidden;border-radius:18px;box-shadow:0 0 0 1px var(--border);background:var(--cream-2);aspect-ratio:16/9}
.bl-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:scale .5s cubic-bezier(.2,.7,.2,1)}
.bl-card-link:hover .bl-cover img{scale:1.02}
.bl-card-body{padding-top:16px}
.bl-card h3{font-family:var(--display);font-weight:400;font-size:clamp(23px,1.9vw,27px);line-height:1.14;letter-spacing:-.012em;margin-top:10px}
.bl-card-link:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--gold)}
.bl-card p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.bl-card time{display:block;margin-top:12px;font-size:13.5px;color:#6B645C}
.bl-card.lead{margin-bottom:48px}
.bl-card.lead .bl-card-link{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:center}
.bl-card.lead .bl-card-body{padding-top:0}
.bl-card.lead h3{font-size:clamp(30px,3.3vw,46px);line-height:1.06}
.bl-card.lead p{font-size:17.5px;margin-top:16px}
.bl-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#8A6A3B}
.bl-tag.brand-watch{color:#A0566A}

/* ---------- a story */
.bl-narrow{max-width:calc(740px + 56px)}
.bl-wide{max-width:calc(980px + 56px)}
.bl-post-head{padding:26px 0 34px}
.bl-post-head .bl-tag{margin-top:30px;text-decoration:none}
.bl-post-head h1{margin-top:12px;font-size:clamp(38px,5vw,62px);line-height:1.05}
.bl-dek{margin:20px 0 0;font-size:clamp(18px,1.6vw,21px);line-height:1.5;color:var(--ink-2)}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:20px 0 0;font-size:14px;color:#6B645C}
.bl-meta .dot-sep{display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--ink-4)}
.bl-post-cover{margin:0}
.bl-post-cover img{display:block;width:100%;height:auto;border-radius:22px;box-shadow:0 0 0 1px var(--border)}
.bl-why{margin:38px 0 0;padding:26px 28px 28px;border-radius:20px;background:var(--gold-soft)}
.bl-why h2{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7D5F33;line-height:1.4}
.bl-why p{margin:10px 0 0;font-size:18px;line-height:1.6;color:var(--ink)}
.bl-body{padding-top:14px}
.bl-body h2{margin-top:44px;font-size:clamp(28px,3vw,38px);line-height:1.12}
.bl-body p{margin:18px 0 0;font-size:18px;line-height:1.7;color:var(--ink-2)}
.bl-body strong{color:var(--ink);font-weight:600}
.bl-body ul,.bl-body ol{margin:18px 0 0;padding-left:24px;display:grid;gap:12px}
.bl-body li{font-size:17.5px;line-height:1.62;color:var(--ink-2);padding-left:4px}
.bl-body li::marker{color:var(--gold-deep);font-weight:600}
.bl-body a,.bl-why a,.bl-sources a{color:#8A6A3B;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(176,138,85,.5);overflow-wrap:anywhere}
.bl-body a:hover,.bl-why a:hover,.bl-sources a:hover{color:var(--ink);text-decoration-color:var(--ink)}
.bl-body .doc-table{margin-top:24px}
.bl-body .doc-table th[scope="col"]{white-space:nowrap}
.bl-sources{margin-top:52px;padding-top:30px;border-top:1px solid var(--border)}
.bl-sources h2{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.4}
.bl-sources ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.bl-sources li{font-size:15px;line-height:1.5;color:#6B645C}
.bl-sources li span{color:var(--ink);font-weight:500}
.bl-principle{margin:30px 0 0;font-family:var(--display);font-style:italic;font-size:22px;line-height:1.3;color:var(--ink)}
.bl-cta{margin-top:64px;padding:56px 0 60px;background:var(--cream-2);border-top:1px solid var(--border)}
.bl-cta h2{font-size:clamp(30px,3.2vw,42px);line-height:1.08}
.bl-cta p{margin:14px 0 0;font-size:17px;line-height:1.6;color:var(--ink-2);max-width:56ch}
.bl-cta .store-row{margin-top:24px}

@media (max-width:1040px){
  .bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .bl-card.lead .bl-card-link{grid-template-columns:1fr;gap:18px}
}
@media (max-width:640px){
  .bl-grid{grid-template-columns:1fr;gap:34px}
  .bl-head h1{margin-top:22px}
  .bl-stories{padding:40px 0 72px}
  .bl-post-cover img{border-radius:16px}
  .bl-why{padding:22px 20px 24px;border-radius:16px}
  .bl-why p,.bl-body p{font-size:17px}
  .bl-body li{font-size:16.5px}
  .bl-page .accent{white-space:normal}
  /* tables become one card per row: a fourth column off the edge of a phone would never be read */
  .bl-body .doc-table{border:0;border-radius:0;background:none;overflow:visible}
  .bl-body .doc-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .bl-body .doc-table table,.bl-body .doc-table tbody,.bl-body .doc-table tr,.bl-body .doc-table th,.bl-body .doc-table td{display:block;width:100%}
  .bl-body .doc-table tr{padding:16px 18px;margin-top:12px;border:1px solid var(--border);border-radius:16px;background:#fff}
  .bl-body .doc-table tbody tr:nth-child(even){background:#fff}
  .bl-body .doc-table th,.bl-body .doc-table td{padding:0;border:0}
  .bl-body .doc-table td{margin-top:12px;font-size:15.5px;line-height:1.5}
  .bl-body .doc-table td::before{content:attr(data-label);display:block;margin-bottom:2px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#6B645C}
}
@media (prefers-reduced-motion:reduce){
  .bl-cover img,.bl-filters a{transition:none}
}