/* Shared styles for the content library pages. The first block is the
   former inline <style> of blog.html, unchanged. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --black: #0A0A0A;
  --white: #ffffff;
  --bg: #ffffff;
  --card: #ffffff;
  --border: rgba(0,0,0,0.08);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--black);
  font-family: "Martian Mono", monospace;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* CURSOR */
* { cursor: none !important; }
#cursor { position: fixed; width: 12px; height: 12px; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); transition: width .18s ease, height .18s ease; }
#cursor::before { content:''; position:absolute; inset:0; border-radius:50%; background:var(--black); box-shadow:0 0 0 1.5px var(--white),0 0 0 3px rgba(0,0,0,.15); transition:transform .18s ease,box-shadow .18s ease; }
#cursor::after { content:''; position:absolute; inset:-10px; border-radius:50%; border:1.5px solid rgba(0,0,0,.25); transition:inset .22s ease,border-color .22s ease,opacity .22s ease; opacity:0; }
#cursor.hover::before { transform:scale(0.4); }
#cursor.hover::after { inset:-16px; border-color:rgba(0,0,0,.5); opacity:1; }

/* BACK BUTTON */
.back-btn { position:fixed; top:2rem; left:2rem; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,0.9); backdrop-filter:blur(8px); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; text-decoration:none; color:var(--black); z-index:200; transition:transform .2s,background .2s; }
.back-btn:hover { transform:translateX(-2px); background:var(--white); }

/* PAGE HEADER */
.blog-header { padding:5rem 5rem 3rem; display:flex; justify-content:space-between; align-items:flex-end; }
.blog-label { font-family:"Martian Mono",monospace; font-size:0.58rem; letter-spacing:0.18em; text-transform:uppercase; color:rgba(0,0,0,.35); margin-bottom:0.75rem; }
.blog-title { font-family:"HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:clamp(2.2rem,4.4vw,4rem); line-height:1; letter-spacing:-0.03em; color:var(--black); font-weight:900; }
.blog-title em { font-style:normal; color:rgba(0,0,0,.22); }
.blog-header-right { font-weight:300; font-family:"Martian Mono",monospace; font-size:0.6rem; letter-spacing:0.1em; color:rgba(0,0,0,.3); text-align:right; }

/* BLOG BODY */
.blog-body { padding:3rem 5rem 6rem; display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }


@media(max-width:1200px){ .blog-body{grid-template-columns:1fr 1fr;} }
@media(max-width:900px){
  .blog-header{padding:4rem 2rem 2rem;flex-direction:column;align-items:flex-start;gap:1rem;}
  .blog-body{padding:2rem 2rem 4rem;grid-template-columns:1fr;}
}

/* ═══ Library sections ═══════════════════════════════════════════════
   Used by /writing, /case-studies, /research and /products. Every value
   below is copied from styles.css (eyebrow, section-h, section-sub,
   steady-line, buttons, waitlist) or from the card rules above. */
.lib-section { padding:4.5rem 5rem; }
.lib-section:last-of-type { border-bottom:none; }
.lib-section-inner { max-width:1100px; }
.lib-eyebrow { font-family:"Martian Mono",monospace; font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:#888; display:flex; align-items:center; gap:1rem; margin-bottom:1.2rem; }
.lib-eyebrow::before { content:""; display:block; width:24px; height:1px; background:#ccc; }
.lib-h { font-family:"HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900; font-size:clamp(2.2rem,4.4vw,4rem); line-height:1; letter-spacing:-0.03em; color:var(--black); margin-bottom:1.4rem; }
.lib-h em { font-style:normal; color:rgba(0,0,0,.22); }
.lib-h--sm { font-size:clamp(1.5rem,2.1vw,2.1rem); line-height:1.1; letter-spacing:-0.025em; }
.lib-sub { font-size:0.78rem; color:#555; max-width:560px; line-height:1.9; }
.lib-sub + .lib-sub { margin-top:1rem; }
.lib-sub strong { font-weight:400; color:var(--black); }
.lib-sub a { color:var(--black); }
.lib-header { padding:7rem 5rem 3.5rem; }
/* Centre the content column on wide screens: the side padding grows so the
   1100px column sits in the middle, while text stays left-aligned within it.
   Mobile rules further down override this padding. */
.lib-header, .lib-section { padding-left:max(5rem, calc((100% - 1100px) / 2)); padding-right:max(5rem, calc((100% - 1100px) / 2)); }
.blog-body { padding-left:max(5rem, calc((100% - 1100px) / 2)); padding-right:max(5rem, calc((100% - 1100px) / 2)); }
.lib-section-inner { max-width:none; }
.lib-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }

/* numbered rows: the homepage .steady-line pattern */
.lib-lines { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(0,0,0,.08); margin-top:2.5rem; }
.lib-lines--2 { grid-template-columns:repeat(2,1fr); }
.lib-lines--1 { grid-template-columns:1fr; }
.lib-lines--1 .lib-line { border-right:none; }
.lib-line strong:not(.lib-line-title) { font-weight:500; color:var(--black); }
.lib-lines--4 { grid-template-columns:repeat(4,1fr); }
.lib-lines--5 { grid-template-columns:repeat(5,1fr); }
.lib-line { padding:1.6rem 1.4rem; border-right:1px solid rgba(0,0,0,.08); border-bottom:1px solid rgba(0,0,0,.08); margin-bottom:-1px; font-size:0.62rem; line-height:1.8; color:#555; transition:background .35s,color .35s; }
.lib-lines .lib-line:nth-child(3n) { border-right:none; }
.lib-lines--2 .lib-line:nth-child(3n) { border-right:1px solid rgba(0,0,0,.08); }
.lib-lines--2 .lib-line:nth-child(2n) { border-right:none; }
.lib-lines--4 .lib-line:nth-child(3n) { border-right:1px solid rgba(0,0,0,.08); }
.lib-lines--4 .lib-line:nth-child(4n) { border-right:none; }
.lib-lines--5 .lib-line:nth-child(3n) { border-right:1px solid rgba(0,0,0,.08); }
.lib-lines--5 .lib-line:nth-child(5n) { border-right:none; }
.lib-line:hover { background:var(--black); color:rgba(255,255,255,.85); }
.lib-line:hover .lib-line-title, .lib-line:hover a { color:#fff; }
.lib-line > span { display:block; margin-bottom:0.7rem; font-size:0.5rem; letter-spacing:0.2em; text-transform:uppercase; color:#888; }
.lib-line-title { display:block; font-family:"HelveticaNeue-Bold","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:900; font-size:1.05rem; line-height:1.2; letter-spacing:-0.02em; color:var(--black); margin-bottom:0.7rem; transition:color .35s; }
.lib-line p + p { margin-top:0.7rem; }
.lib-line a { color:var(--black); }

/* tag list (plain text pills, the .card-tag style) */
.lib-tags { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:1.5rem; }
.lib-tags .card-tag { margin-bottom:0; }
.lib-filter { display:flex; flex-wrap:wrap; gap:0.5rem; margin-top:2rem; }
.lib-filter button { font-family:"Martian Mono",monospace; font-size:0.5rem; letter-spacing:0.14em; text-transform:uppercase; color:rgba(0,0,0,.5); background:transparent; border:1px solid rgba(0,0,0,.15); border-radius:100px; padding:0.45rem 0.9rem; transition:background .2s,color .2s,border-color .2s; }
.lib-filter button[aria-pressed="true"], .lib-filter button:hover { background:var(--black); border-color:var(--black); color:var(--white); }
.lib-grid [hidden] { display:none; }

/* status pill: the .card-featured-badge style */
.lib-status { display:inline-block; background:#b8f0c8; font-family:"Martian Mono",monospace; font-size:0.52rem; font-weight:500; letter-spacing:0.1em; padding:0.3rem 0.8rem; border-radius:100px; color:var(--black); }

/* buttons: copied from styles.css .btn-solid / .btn-line */
.lib-ctas { display:flex; flex-wrap:wrap; gap:0.9rem; margin-top:2.2rem; }
.btn-solid, .btn-line { display:inline-block; font-family:"Martian Mono",monospace; font-size:0.62rem; letter-spacing:0.12em; text-transform:uppercase; text-decoration:none; padding:0.95rem 2rem; border-radius:100px; transition:opacity .2s,background .25s,color .25s,border-color .25s; }
.btn-solid { background:var(--black); color:var(--white); border:1px solid var(--black); }
.btn-solid:hover { opacity:0.75; }
.btn-line { background:transparent; color:var(--black); border:1px solid rgba(0,0,0,.2); }
.btn-line:hover { border-color:var(--black); background:var(--black); color:var(--white); }

/* reading list: the .post-next style from post.css */
.lib-list { list-style:none; margin-top:2rem; border-top:1px solid var(--border); max-width:760px; }
.lib-list li { border-bottom:1px solid var(--border); }
.lib-list a { display:flex; justify-content:space-between; gap:1.5rem; padding:1.2rem 0; text-decoration:none; color:var(--black); font-size:0.72rem; line-height:1.7; }
.lib-list a span:last-child { color:rgba(0,0,0,.35); white-space:nowrap; transition:transform .2s,color .2s; }
.lib-list a:hover span:last-child { color:var(--black); transform:translateX(3px); }

@media(max-width:1200px){
  .lib-lines--4,.lib-lines--5{grid-template-columns:repeat(2,1fr);}
  .lib-lines--4 .lib-line,.lib-lines--5 .lib-line{border-right:1px solid rgba(0,0,0,.08) !important;}
  .lib-lines--4 .lib-line:nth-child(2n),.lib-lines--5 .lib-line:nth-child(2n){border-right:none !important;}
}
@media(max-width:900px){
  .lib-header{padding:6rem 2rem 2.5rem;}
  .lib-section{padding:3.5rem 2rem;}
  .lib-grid{grid-template-columns:1fr;}
  .lib-lines,.lib-lines--2,.lib-lines--4,.lib-lines--5{grid-template-columns:1fr;}
  .lib-lines .lib-line,.lib-lines--2 .lib-line,.lib-lines--4 .lib-line,.lib-lines--5 .lib-line{border-right:none !important;}
}

.lib-themes { margin: 1.6rem 0 2.4rem; }

/* Full-width library pages (Writing): edge-to-edge with a fixed gutter. */
.lib-full .lib-header, .lib-full .lib-section, .lib-full .blog-body { padding-left:5rem; padding-right:5rem; }
.lib-full .lib-section-inner { max-width:none; }
@media(max-width:900px){ .lib-full .lib-header, .lib-full .lib-section, .lib-full .blog-body { padding-left:2rem; padding-right:2rem; } }