/* ─────────────────────────────────────────────────────────────────────────
   OMMU Journal — blog styles.

   Extends the warm editorial system used on the marketing page: cream paper,
   warm ink, a single ember accent, Fraunces for display and Hanken Grotesk
   for body. Kept in an external file (rather than inlined like index.html)
   because every generated post page shares it, so it caches once.
   ───────────────────────────────────────────────────────────────────────── */

:root{
  --paper:#f7f2e8; --paper-2:#f1e8d7; --panel:#fffdf8; --panel-2:#faf4e9;
  --ink:#221c14; --ink-2:#463c2e; --muted:#6d6152; --faint:#93866e;
  --line:#e4d9c4; --line-2:#d4c6a9;
  --ember:#bf5426; --ember-2:#a4441c; --ember-3:#8f3a16;
  --ember-ink:#fdf6ec; --ember-soft:rgba(191,84,38,.09);
  --good:#3f7355; --bad:#a5392a;
  --maxw:1120px; --readw:720px;
  --r:14px; --r-sm:9px;
  --shadow:0 24px 48px -30px rgba(61,42,20,.55);
  --shadow-sm:0 10px 26px -18px rgba(61,42,20,.5);
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Hanken Grotesk",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  font-synthesis:none;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-size:clamp(15.5px,1.05vw,17px);
}

/* Same atmosphere as the marketing page: a warm wash and a faint paper grain. */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(1100px 620px at 8% -10%, rgba(191,84,38,.07), transparent 60%),
    radial-gradient(900px 640px at 100% 0%, rgba(63,115,85,.06), transparent 62%),
    linear-gradient(180deg,#faf5ec,#f7f2e8 55%,#f4eee1);
}
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--serif);line-height:1.14;margin:0;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
p{margin:0 0 1em}
strong,b{font-weight:700}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px;border-radius:8px}

.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap-reading{max-width:calc(var(--readw) + 48px)}
.muted{color:var(--muted)}
.lead{color:var(--muted);font-size:clamp(16px,1.5vw,19px);line-height:1.6;max-width:62ch}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:700;
  font-size:15px;padding:13px 24px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ember);color:var(--ember-ink);box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--ember-2);box-shadow:0 16px 30px -16px rgba(164,68,28,.7)}
.btn-ghost{background:transparent;border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ember);color:var(--ember);background:var(--ember-soft)}
.cta-row{display:flex;gap:14px;flex-wrap:wrap}

/* ── Section label ───────────────────────────────────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:11px;font-family:var(--sans);
  font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ember);margin-bottom:18px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ember);border-radius:2px}

/* ── Nav & footer ────────────────────────────────────────────────────────── */
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(247,242,232,.82);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;height:64px}
.brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--serif);
  font-weight:600;letter-spacing:.01em;font-size:23px;color:var(--ink)}
.brand .dot{width:11px;height:11px;border-radius:50%;background:var(--ember);box-shadow:0 0 0 4px var(--ember-soft)}
/* Gap and button padding match the homepage header so the bar is identical
   across the site — the blog's shorter link row has room to spare either way. */
.nav-links{display:flex;gap:14px;align-items:center}
.nav-links a{color:var(--muted);font-weight:600;font-size:14px;white-space:nowrap;transition:color .15s ease}
.nav-links a:hover{color:var(--ink)}
.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-cta .btn{font-size:14px;padding:10px 14px}

footer{border-top:1px solid var(--line);padding:44px 0;color:var(--muted);font-size:14px;margin-top:clamp(56px,7vw,104px)}
.foot-row{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.foot-links{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
footer a{color:var(--ember)}
footer a:hover{text-decoration:underline}

/* ── Listing header ──────────────────────────────────────────────────────── */
.blog-main{padding:clamp(34px,5vw,64px) 0 0}
.blog-head{max-width:66ch;margin-bottom:36px}
.blog-head h1{font-size:clamp(38px,6vw,64px);letter-spacing:-.025em;margin-bottom:16px}
.head-meta{margin:20px 0 0;font-size:14px}
.rss{color:var(--ember);font-weight:700;border-bottom:1.5px solid transparent;transition:border-color .2s ease}
.rss:hover{border-color:var(--ember)}

/* ── Tag chips & filters ─────────────────────────────────────────────────── */
.filters{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 32px;padding-bottom:26px;border-bottom:1px solid var(--line)}
.chip{display:inline-flex;align-items:center;font-family:var(--sans);font-size:12.5px;font-weight:700;
  letter-spacing:.04em;color:var(--muted);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:7px 15px;cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background .18s ease}
.chip:hover{color:var(--ember);border-color:var(--ember);background:var(--ember-soft)}
.chip-filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--ember-ink)}
.linklike{background:none;border:0;color:var(--ember);font:inherit;font-weight:700;cursor:pointer;padding:0;text-decoration:underline}

/* ── Post cards ──────────────────────────────────────────────────────────── */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-top:22px}

.post-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .2s ease,transform .2s ease,box-shadow .25s ease}
.post-card:hover{border-color:var(--line-2);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.post-card[hidden]{display:none}
.card-media{background:var(--paper-2);border-bottom:1px solid var(--line)}
.card-media img{width:100%;aspect-ratio:1200/630;object-fit:cover}
.card-body{padding:26px 28px 28px;display:flex;flex-direction:column;flex:1}
.card-meta{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
/* `contentType` front matter — the shape of the piece, e.g. "One-page PDF". */
.post-format{display:inline-flex;align-items:center;font-family:var(--sans);font-size:11.5px;font-weight:800;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ember);background:var(--ember-soft);
  border-radius:999px;padding:5px 11px;margin:0 0 12px}
.card-title{font-size:clamp(21px,2.2vw,26px);margin:0 0 10px}
.card-title a{background-image:linear-gradient(var(--ember),var(--ember));background-size:0 1.5px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .25s ease}
.post-card:hover .card-title a{background-size:100% 1.5px}
.card-desc{color:var(--muted);font-size:15.5px;margin:0 0 16px}
.card-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 18px}
.card-tags .chip{font-size:11.5px;padding:5px 12px}
.card-more{margin-top:auto;color:var(--ember);font-weight:700;font-size:14.5px;display:inline-flex;gap:.4em;align-items:center}
.card-more span{transition:transform .2s ease}
.post-card:hover .card-more span{transform:translateX(3px)}

/* The newest post gets a wider, more editorial treatment. */
.post-card-featured{flex-direction:row;align-items:stretch}
.post-card-featured .card-media{flex:0 0 44%;border-bottom:0;border-right:1px solid var(--line)}
.post-card-featured .card-media img{height:100%;aspect-ratio:auto;min-height:300px}
.post-card-featured .card-body{padding:clamp(28px,3.4vw,46px);justify-content:center}
.post-card-featured .card-title{font-size:clamp(27px,3.4vw,40px);letter-spacing:-.02em}
.post-card-featured .card-desc{font-size:17px;max-width:52ch}

.empty{color:var(--muted);padding:44px 0;font-size:17px}
.empty a{color:var(--ember);font-weight:700}

/* ── Draft / scheduled badges (deploy previews only) ─────────────────────── */
.badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:6px 13px;margin:0 0 14px}
.badge-draft{background:rgba(165,57,42,.1);color:var(--bad);border:1px solid rgba(165,57,42,.25)}
.badge-scheduled{background:rgba(63,115,85,.1);color:var(--good);border:1px solid rgba(63,115,85,.25)}

/* ── Post page ───────────────────────────────────────────────────────────── */
.crumbs{font-size:14px;font-weight:600;margin:0 0 26px}
.crumbs a{color:var(--ember)}
.crumbs a:hover{text-decoration:underline}

.post-head{margin-bottom:34px}
.post-head h1{font-size:clamp(32px,4.6vw,50px);letter-spacing:-.025em;margin:0 0 16px}
.post-tags{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.post-meta{font-size:13.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--faint);margin:20px 0 0;padding-top:18px;border-top:1px solid var(--line)}

.post-cover{margin:0 0 36px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);box-shadow:var(--shadow)}
.post-cover img{width:100%;height:auto}

.toc{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 26px;margin:0 0 36px}
.toc-title{font-family:var(--sans);font-size:11.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);margin:0 0 10px}
.toc ol{margin:0;padding-left:1.15em;color:var(--muted);font-size:15px}
.toc li{margin:5px 0}
.toc a:hover{color:var(--ember);text-decoration:underline}

/* ── Prose ───────────────────────────────────────────────────────────────── */
.prose{font-size:clamp(16.5px,1.15vw,18.5px);line-height:1.72;color:var(--ink-2);max-width:68ch}
.prose > *:first-child{margin-top:0}
.prose p{margin:0 0 1.15em}
.prose h2{font-size:clamp(24px,2.9vw,32px);margin:2em 0 .55em;letter-spacing:-.015em;scroll-margin-top:88px}
.prose h3{font-size:clamp(19px,2.1vw,23px);margin:1.7em 0 .45em;scroll-margin-top:88px}
.prose h4{font-size:17px;margin:1.5em 0 .4em}
.prose a{color:var(--ember);font-weight:600;border-bottom:1.5px solid rgba(191,84,38,.28);transition:border-color .18s ease}
.prose a:hover{border-color:var(--ember)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.35em}
.prose li{margin:.42em 0}
.prose li::marker{color:var(--ember)}
.prose strong{color:var(--ink)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.6em 0}
.prose img{border-radius:var(--r);border:1px solid var(--line);margin:1.8em 0}
.prose figure{margin:1.8em 0}
.prose figcaption{font-size:14px;color:var(--faint);margin-top:10px;text-align:center}

.prose blockquote{margin:1.8em 0;padding:4px 0 4px 26px;border-left:3px solid var(--ember);
  font-family:var(--serif);font-style:italic;font-size:1.1em;color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}

.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88em;
  background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:.14em .42em;color:var(--ember-3)}
.prose pre{background:var(--ink);color:#f3ead9;border-radius:var(--r);padding:20px 22px;
  overflow-x:auto;margin:1.7em 0;font-size:14.5px;line-height:1.6}
.prose pre code{background:none;border:0;padding:0;color:inherit;font-size:inherit}

.table-scroll{overflow-x:auto;margin:1.8em 0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.prose table{border-collapse:collapse;width:100%;font-size:15.5px}
.prose th,.prose td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line)}
.prose th{font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);background:var(--panel-2)}
.prose tr:last-child td{border-bottom:0}

/* ── End-of-post call to action ──────────────────────────────────────────── */
.post-cta{margin:clamp(48px,6vw,76px) 0 0;padding:clamp(30px,4vw,46px);
  background:var(--panel);border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--shadow-sm)}
.post-cta h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.02em;margin:0 0 14px}
.post-cta .lead{margin-bottom:24px;font-size:16.5px}

/* ── Previous / next ─────────────────────────────────────────────────────── */
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.post-nav-item{display:flex;flex-direction:column;gap:6px;padding:20px 22px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);transition:border-color .2s ease,transform .2s ease}
.post-nav-item:hover{border-color:var(--ember);transform:translateY(-2px)}
.post-nav-item span{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.post-nav-item strong{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.25;color:var(--ink)}
.post-nav-next{text-align:right;align-items:flex-end}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .post-grid{grid-template-columns:1fr}
  .post-card-featured{flex-direction:column}
  .post-card-featured .card-media{flex:none;border-right:0;border-bottom:1px solid var(--line)}
  .post-card-featured .card-media img{aspect-ratio:1200/630;min-height:0}
}
@media (max-width:760px){
  .nav-links{display:none}
  .nav-cta .btn{font-size:13px;padding:9px 15px}
  .post-nav{grid-template-columns:1fr}
  .post-nav-next{text-align:left;align-items:flex-start}
  .foot-row{flex-direction:column;align-items:flex-start;gap:16px}
  .wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}
@media print{
  header.nav,footer,.post-cta,.post-nav,.crumbs,.toc{display:none}
  body::before,body::after{display:none}
  .prose{max-width:none;color:#000}
}