/* ============================================================================
   OSO blog.

   Two ideas borrowed and made to fit the brand:
     - a full-bleed photographic hero that curves off at the bottom, so the
       index opens like a magazine rather than a list of links;
     - topic grouping and per-card category labels, so a reader arriving cold
       can see the shape of what's here instead of scrolling a firehose.

   Type stays on the house scale (13/15/18/22/30, display 34/40/54) and keeps
   the wide-tracked uppercase signature for labels. Switzer throughout; Outfit
   only ever for the wordmark.
   ========================================================================= */

:root{
  --canvas:#F4F5F7; --surface:#FFFFFF; --ink:#191C22; --ink-2:#434955;
  --muted:#565C66; --faint:#6B717C;
  --line:#E6E8ED; --line-2:#F0F1F4; --inset:#F6F7F9; --wash:#F1F1F1;
  --accent:#FF1744;
  --ink-deep:#0F1216;

  --sans:"Switzer",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --logo:"obviously","Switzer",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --track-caps:.1em; --track-btn:.07em; --track-head:-.025em;

  --wrap:1120px;      /* index / wide sections */
  --read:680px;       /* article measure - ~68 characters at 18px */
  --radius:20px;
  --shadow:0 1px 2px rgba(25,28,34,.05);
  --shadow-pop:0 8px 30px rgba(25,28,34,.10), 0 2px 6px rgba(25,28,34,.06);
  color-scheme:light;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--canvas); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* Shared label treatment: the wide-tracked uppercase signature. */
.eyebrow{
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:var(--track-caps); color:var(--muted); margin:0;
}

/* ============================ NAV ============================ */
.bl-nav{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.bl-nav-in{
  max-width:var(--wrap); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:26px;
}
.bl-brand{
  font-family:var(--logo); font-style:italic; letter-spacing:-.08em;
  font-weight:600; font-size:28px; color:var(--ink);
}
/* Matches landing.css exactly, so the wordmark doesn't resize when you cross
   from the homepage into the blog. */
@media(max-width:480px){ .bl-brand{ font-size:18px; letter-spacing:-.08em; } }
.bl-nav-links{ display:flex; gap:22px; align-items:center; }
.bl-nav-links a{
  font-size:15px; font-weight:600; color:var(--muted);
  transition:color .15s ease;
}
.bl-nav-links a:hover,.bl-nav-links a[aria-current="page"]{ color:var(--ink); }
.bl-app{
  margin-left:auto; font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:var(--track-btn); color:#fff; background:var(--ink);
  padding:10px 18px; border-radius:999px; white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.bl-app:hover{ background:var(--accent); transform:translateY(-1px); }
@media(max-width:720px){ .bl-nav-links{ display:none; } }

/* ============================ HERO ============================ */
/* Full-bleed photograph, dark scrim, curved off at the bottom so the card
   grid below feels like it slides under it. */
.bl-hero{
  position:relative; overflow:hidden; background:var(--ink-deep);
  isolation:isolate; min-height:540px; display:grid; place-items:center;
}
.bl-hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 38%; opacity:.78; filter:grayscale(.15);
}
/* Enough scrim to keep white type legible over a busy photo, and no more.
   Weighted to the bottom, where the subhead sits over the brightest part. */
.bl-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,18,22,.46) 0%, rgba(15,18,22,.26) 42%, rgba(15,18,22,.62) 100%);
}
.bl-hero-in{
  position:relative; z-index:1; max-width:1320px; margin:0 auto;
  padding:104px 24px 96px; text-align:center; color:#fff;
}
.bl-hero .eyebrow{ color:#fff; margin-bottom:18px; }
.bl-hero h1{
  font-size:54px; line-height:1.03; letter-spacing:var(--track-head);
  font-weight:800; margin:0 0 18px;
}
.bl-hero p{
  font-size:18px; line-height:1.55; color:#fff;
  margin:0 auto; max-width:560px;
}
/* The standfirst is meant to land as a single line. At 15px (the nearest size
   on the house scale) the line measures ~1000px, so it needs roughly a 1050px
   viewport; below 1080 it wraps rather than overflow. Nothing narrower can hold
   160 characters on one line at a readable size. */
/* Qualified with .bl-hero so it outranks `.bl-hero p` above. The measure is
   chosen so the standfirst breaks as two even lines at 18px. */
.bl-hero p.bl-hero-sub{ max-width:660px; }
@media(max-width:820px){
  .bl-hero{ min-height:440px; }
  .bl-hero-in{ padding:72px 22px 64px; }
  .bl-hero h1{ font-size:40px; }
  .bl-hero p{ font-size:15px; }
}
@media(max-width:480px){ .bl-hero h1{ font-size:34px; } }

/* ============================ LAYOUT ============================ */
.bl-wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.bl-section{ padding:56px 0 0; }
.bl-section-head{
  display:flex; align-items:baseline; gap:16px; margin:0 0 22px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.bl-section-head h2{
  font-size:22px; font-weight:800; letter-spacing:-.02em; margin:0;
}
.bl-section-head .count{ font-size:13px; color:var(--faint); margin-left:auto; }

/* ============================ CARDS ============================ */
.bl-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:34px 26px;
  margin:0; padding:0; list-style:none;
}
@media(max-width:940px){ .bl-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:620px){ .bl-grid{ grid-template-columns:1fr; gap:28px; } }

.card{ display:flex; flex-direction:column; height:100%; }
.card-media{
  position:relative; display:block; border-radius:var(--radius); overflow:hidden;
  background:var(--inset); border:1px solid var(--line);
  aspect-ratio:8/5; margin-bottom:15px;
}
.card-media img,.card-media .cover-art{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-media img,.card:hover .card-media .cover-art{ transform:scale(1.035); }
.card-cat{
  position:absolute; left:12px; top:12px; z-index:2;
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:var(--track-btn); color:var(--ink);
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  padding:6px 11px; border-radius:999px; box-shadow:var(--shadow);
}
.card-meta{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-size:13px; color:var(--faint); margin-bottom:7px;
}
.card-meta .dot,.bl-byline .dot{ width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; flex:none; }
.card h3{
  font-size:22px; line-height:1.22; letter-spacing:-.02em; font-weight:800;
  margin:0 0 8px; color:var(--ink);
  transition:color .15s ease;
}
.card:hover h3{ color:var(--accent); }
.card p{ font-size:15px; line-height:1.55; color:var(--muted); margin:0; }

/* Lead post: the same card at feature size, media and text side by side.
   The grid lives on the card itself - .bl-lead is only the panel around it, and
   putting the columns there would leave the card stacked in column one with an
   empty column two beside it. */
.bl-lead{
  background:var(--surface); border:1px solid var(--line); border-radius:26px;
  padding:22px; box-shadow:var(--shadow); margin-bottom:8px;
}
.card.is-lead{
  display:grid; grid-template-columns:1.1fr .9fr; gap:34px;
  align-items:center; height:auto;
}
.card.is-lead .card-media{ aspect-ratio:16/10; margin-bottom:0; }
.card.is-lead h3{ font-size:34px; line-height:1.1; margin-bottom:12px; }
.card.is-lead p{ font-size:18px; line-height:1.55; }
.card.is-lead .card-body{ padding:8px 16px 8px 4px; }
@media(max-width:860px){
  .bl-lead{ padding:16px; }
  .card.is-lead{ grid-template-columns:1fr; gap:18px; }
  .card.is-lead h3{ font-size:28px; }
  .card.is-lead p{ font-size:15px; }
  .card.is-lead .card-body{ padding:0 6px 6px; }
}

.bl-empty{
  text-align:center; padding:60px 20px; color:var(--muted);
  border:1px dashed var(--line); border-radius:var(--radius); background:var(--surface);
}

/* ============================ ARTICLE ============================ */
/* Headline block sits on the wash; the article body below it is white, so the
   reading column is the brightest thing on the page. */
.bl-article-hero{ background:var(--wash); border-bottom:1px solid var(--line); }
.bl-article-hero-in{ max-width:var(--read); margin:0 auto; padding:40px 24px 34px; }
.bl-crumb{
  display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600;
  color:var(--muted); margin-bottom:22px; transition:color .15s ease;
}
.bl-crumb:hover{ color:var(--accent); }
.bl-article-hero h1{
  font-size:40px; line-height:1.1; letter-spacing:var(--track-head);
  font-weight:800; margin:14px 0 16px;
}
.bl-standfirst{ font-size:18px; line-height:1.6; color:var(--ink-2); margin:0 0 24px; }
.bl-byline{
  display:flex; align-items:center; gap:11px; flex-wrap:wrap;
  font-size:13px; color:var(--faint); padding-top:18px; border-top:1px solid var(--line-2);
}
.bl-avatar{
  width:32px; height:32px; border-radius:50%; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-size:13px; font-weight:700; flex:none;
  letter-spacing:.02em;
}
.bl-byline b{ color:var(--ink); font-weight:700; }
@media(max-width:820px){
  .bl-article-hero h1{ font-size:30px; }
  .bl-standfirst{ font-size:15px; }
}
}

/* Reading progress: a hairline that fills as you scroll the article. */
.bl-progress{
  position:fixed; left:0; top:0; height:2px; width:0; z-index:60;
  background:var(--accent); transition:width .08s linear;
}

.bl-body{ background:var(--surface); max-width:none; margin:0; padding:48px 0 44px; }
/* Same box as .bl-article-hero-in (680px outer, 24px side padding), so the
   prose left-aligns exactly with the standfirst above it. */
.bl-body .post{ max-width:var(--read); margin:0 auto; padding:0 24px; }
.post{ font-size:18px; line-height:1.72; color:var(--ink-2); }
.post > *:first-child{ margin-top:0; }
.post h2{
  font-size:30px; line-height:1.18; letter-spacing:-.022em; font-weight:800;
  color:var(--ink); margin:46px 0 14px;
}
.post h3{
  font-size:22px; line-height:1.25; font-weight:700; color:var(--ink);
  margin:34px 0 10px;
}
.post p{ margin:0 0 22px; }
.post ul,.post ol{ margin:0 0 22px; padding-left:24px; }
.post li{ margin:0 0 10px; }
.post li::marker{ color:var(--accent); }
.post strong{ color:var(--ink); font-weight:700; }
.post a{
  color:var(--ink); text-decoration:underline;
  text-decoration-color:var(--accent); text-underline-offset:3px;
  text-decoration-thickness:2px; transition:color .15s ease;
}
.post a:hover{ color:var(--accent); }
.post img{ border-radius:var(--radius); margin:30px 0; border:1px solid var(--line); }
.post hr{ border:0; border-top:1px solid var(--line); margin:40px 0; }
.post blockquote{
  margin:30px 0; padding:4px 0 4px 24px; border-left:3px solid var(--accent);
  font-size:22px; line-height:1.45; font-weight:600; color:var(--ink);
  letter-spacing:-.015em;
}
.post blockquote p{ margin:0; }
.post code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:15px;
  background:var(--inset); border:1px solid var(--line); padding:2px 6px; border-radius:6px;
}
.post pre{
  background:var(--ink-deep); color:#E8EAEE; padding:18px 20px; border-radius:14px;
  overflow-x:auto; font-size:13px; line-height:1.6; margin:26px 0;
}
.post pre code{ background:none; border:0; padding:0; font-size:13px; color:inherit; }
.post table{ width:100%; border-collapse:collapse; margin:26px 0; font-size:15px; }
.post th,.post td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--line); }
.post th{
  font-size:13px; text-transform:uppercase; letter-spacing:var(--track-caps);
  color:var(--muted); font-weight:700;
}
@media(max-width:820px){
  .post{ font-size:15px; }
  .post h2{ font-size:22px; }
  .post h3{ font-size:18px; }
  .post blockquote{ font-size:18px; }
}

/* ============================ ARTICLE FOOTER ============================ */
.bl-endnote{
  background:var(--surface); margin:0; padding:0 24px 36px;
  font-size:13px; color:var(--faint);
}
.bl-endnote span{ display:block; max-width:var(--read); margin:0 auto; }
.bl-pager{
  max-width:var(--wrap); margin:44px auto 0; padding:0 24px;
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.bl-pager a{
  border:1px solid var(--line); border-radius:18px; background:var(--surface);
  padding:18px 20px; transition:border-color .15s ease, transform .15s ease;
}
.bl-pager a:hover{ border-color:#D3D7DE; transform:translateY(-2px); }
.bl-pager .eyebrow{ margin-bottom:7px; font-size:13px; }
.bl-pager strong{ font-size:18px; font-weight:700; line-height:1.3; color:var(--ink); }
.bl-pager .next{ text-align:right; }
@media(max-width:620px){ .bl-pager{ grid-template-columns:1fr; } .bl-pager .next{ text-align:left; } }

/* ============================ CTA BAND ============================ */
.bl-cta{
  margin:80px 0 0; background:var(--ink-deep); color:#fff;
  overflow:hidden;
}
.bl-cta-in{
  max-width:var(--wrap); margin:0 auto; padding:64px 24px 68px; text-align:center;
}
.bl-cta h2{
  font-size:40px; line-height:1.08; letter-spacing:var(--track-head);
  font-weight:800; margin:0 0 14px;
}
.bl-cta p{ font-size:18px; color:#fff; margin:0 auto 28px; max-width:480px; }
.bl-cta .eyebrow{ color:#fff; margin-bottom:16px; }
.bl-cta-btn{
  display:inline-block; background:var(--accent); color:#fff;
  font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:var(--track-btn);
  padding:15px 30px; border-radius:999px;
  transition:transform .15s ease, box-shadow .15s ease;
}
.bl-cta-btn:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(255,23,68,.35); }
.bl-cta small{ display:block; margin-top:16px; font-size:13px; color:#fff; }
@media(max-width:620px){ .bl-cta h2{ font-size:28px; } .bl-cta p{ font-size:15px; } }

/* ============================ FOOTER ============================ */
.bl-foot{ background:var(--ink-deep); color:#fff; }
.bl-foot-in{
  max-width:var(--wrap); margin:0 auto; padding:36px 24px 44px;
  display:flex; gap:18px; flex-wrap:wrap; align-items:center;
  border-top:1px solid rgba(255,255,255,.09); font-size:13px;
}
.bl-foot a{ color:#fff; transition:opacity .15s ease; }
.bl-foot a:hover{ opacity:.7; }
/* The Instagram icon starts the right-hand cluster; the copyright follows it. */
.bl-foot-ig{ margin-left:auto; display:inline-flex; align-items:center; }
.bl-foot-ig svg{ width:18px; height:18px; display:block; }
.bl-foot .sp{ margin-left:14px; }

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