/* blog2.css — JM Visuals Blog (matched to main site theme)
   Notes:
   - Forces the same dark theme as the rest of the site (no light/dark mode switching).
   - Keeps blog-specific layout, but uses the main site's design tokens via styles.css.
*/

:root{
  /* Book2 color system (dark default) */
  --bg:#0f0f0f;
  --bg2:#0b0b0b;
  --surface:#141414;
  --surface2:#0f0f0f;
  --text:#f5f5f5;
  --muted:#b5b5b5;
  --gold:#b89357;
  --gold2:#caa76b;
  --border:#2a2a2a;
  --radius:18px;
  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --max: 1280px;

  /* Map to main site tokens so the shared header/footer inherits the blog2 theme */
  --bg-color: var(--bg);
  --primary-color: var(--gold2);
  --text-color: var(--text);
  --secondary-text-color: var(--muted);
  --card-bg: var(--surface);
  --border-radius: 18px;
  --transition-speed: 0.3s;
}

:root[data-theme="light"]{
  --bg:#f6f4ef;
  --bg2:#efe9df;
  --surface:#ffffff;
  --surface2:#fbf9f5;
  --text:#141414;
  --muted:#4b4b4b;
  --gold:#b89357;
  --gold2:#9a7a44;
  --border:rgba(20,20,20,.18);
  --shadow: 0 18px 50px rgba(20,20,20,.12);

  --bg-color: var(--bg);
  --primary-color: var(--gold);
  --text-color: var(--text);
  --secondary-text-color: var(--muted);
  --card-bg: var(--surface);
}

/* Auto light mode unless user has chosen a theme */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#f6f4ef;
    --bg2:#efe9df;
    --surface:#ffffff;
    --surface2:#fbf9f5;
    --text:#141414;
    --muted:#4b4b4b;
    --gold:#b89357;
    --gold2:#9a7a44;
    --border:rgba(20,20,20,.18);
    --shadow: 0 18px 50px rgba(20,20,20,.12);

    --bg-color: var(--bg);
    --primary-color: var(--gold);
    --text-color: var(--text);
    --secondary-text-color: var(--muted);
    --card-bg: var(--surface);
  }
}

*{box-sizing:border-box}

/* A11y helper: visually hidden text */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

html{background:var(--bg2);color-scheme: light dark;-webkit-text-size-adjust:100%;text-size-adjust:100%}

body{
  margin:0;
  font-family:"Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  color:var(--text);
}

/* Footer: override main site hard-coded footer colors so it follows theme */
.blog2-page footer{
  background: var(--bg2) !important;
  border-top: 1px solid color-mix(in oklab, var(--gold) 20%, transparent);
}
.blog2-page footer .footer-content p,
.blog2-page footer .footer-nav a{
  color: var(--muted) !important;
}
.blog2-page footer .footer-nav a:hover{
  color: var(--gold2) !important;
}

/* Site header is fixed. Ensure blog2 content clears it on desktop too. */
main.blog2{padding-top: 128px}
a{color:inherit}

/* Blog container */
.container{max-width:var(--max);margin:0 auto;padding:26px 16px 54px}

/* Blog2-only fix: iPhone Safari menu panel wasn't reaching the top.
   The main site sets the mobile menu to `top: 60px;`.
   On blog2, we make the panel start at 0 and add safe-area padding so
   content still clears the notch/status bar.
*/
@media (max-width: 768px){
  /* Keep the close (X) reachable: keep header above the slide-in menu */
  .blog2-page header{position: fixed; top: 0; left: 0; right: 0; z-index: 1002;}

  /* Make the hamburger align with the logo by positioning it INSIDE the header */
  .blog2-page .hamburger{
    position: absolute;
    top: 50%;
    right: 16px;
    z-index: 1003;
    transform: translateY(-50%) scale(1.18);
    transform-origin: center;
  }

  .blog2-page header .nav-menu{
    top: 0 !important;
    padding-top: calc(env(safe-area-inset-top, 0px) + 60px) !important;
    height: 100vh;
    z-index: 1001;
  }
}

/* If any cached HTML still includes the old blog2 topbar, hide it */
@media (max-width:860px){
  .topbar{display:none !important;}
}

/* top nav (legacy blog2) */
.topbar{display:flex;align-items:center;gap:14px;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{width:34px;height:34px;border-radius:10px;border:1px solid var(--border);background:linear-gradient(135deg, color-mix(in oklab, var(--gold) 22%, transparent), rgba(255,255,255,.04));display:grid;place-items:center}
.brand-title{display:flex;flex-direction:column;line-height:1.1}
.brand-title strong{font-weight:950;letter-spacing:.02em}
.brand-title span{font-size:12px;color:var(--muted)}

.navlinks{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.pill{border:1px solid var(--border);background:rgba(255,255,255,.03);padding:10px 12px;border-radius:999px;text-decoration:none;font-weight:850;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.pill.primary{border-color:color-mix(in oklab, var(--gold) 45%, transparent);background:color-mix(in oklab, var(--gold) 16%, transparent);color:var(--gold2)}

/* hero */
/* IMPORTANT: the main site also has a `.hero` class (full-screen video hero).
   Scope/override it here so blog2's hero card isn't vertically centered or padded.
*/
main.blog2 .hero{
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:color-mix(in oklab, var(--surface) 92%, transparent);
  box-shadow:var(--shadow);
  display:block;
  min-height:auto;
  padding:0;
  text-align:left;
}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr}
.hero-copy{padding:22px 20px}
.kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:900}
.h1{margin:10px 0 10px;font-size:28px;line-height:1.1;letter-spacing:-.02em;font-weight:950}
.sub{color:var(--muted);line-height:1.55}
.hero-art{
  min-height:180px;
  background:
    radial-gradient(600px 220px at 30% 30%, color-mix(in oklab, var(--gold) 22%, transparent), transparent 60%),
    radial-gradient(560px 240px at 70% 70%, rgba(255,255,255,.06), transparent 60%);
  border-left:1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.hero-art{padding:0;display:block;line-height:0}
.hero-art img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  max-width: none;
  opacity: .88;
  mix-blend-mode: screen;
}
@media (max-width:860px){
  /* The site header is fixed; ensure the hero card clears it (otherwise the
     rounded top of the card gets hidden under the header on iPhone). */
  main.blog2{padding-top: calc(env(safe-area-inset-top, 0px) + 112px)}

  /* Reduce overall top whitespace inside the blog container */
  .container{padding-top:0px}
  .hero{margin-top:0px}

  /* Mobile hero: image-first so it doesn't feel like a wall of text before the visual */
  .hero-inner{display:flex;flex-direction:column}
  .hero-art{order:1}
  .hero-copy{order:2}

  /* Tighten hero on mobile + make the image feel intentional (1:1) */
  .hero-copy{padding:12px 14px}
  .h1{font-size:26px;margin:8px 0 8px}

  .hero-art{
    border-left:none;
    border-top:none;
    border-bottom:1px solid var(--border);
    min-height:0;
    aspect-ratio: 1 / 1;
    background: none;
  }
  .hero-art img{
    opacity: 1;
    mix-blend-mode: normal;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    /* Crop higher on mobile so the subject sits closer to the top */
    object-position: 50% 15%;
  }
}

/* category rail */
.backlink{display:inline-block;margin-top:12px;color:var(--muted);text-decoration:none;font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:12px}
.backlink:hover{color:var(--text)}

.rail{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);padding:12px 14px}
.rail-label{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:900}
.rail-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
@media (max-width:860px){
  .rail-chips{justify-content:center}
}

.chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid color-mix(in oklab, var(--gold) 35%, transparent);background:color-mix(in oklab, var(--gold) 14%, transparent);color:var(--gold2);text-decoration:none;font-weight:900;font-size:12px;letter-spacing:.10em;text-transform:uppercase}
.chip.ghost{border-color:color-mix(in oklab, var(--gold) 22%, transparent);background:rgba(255,255,255,.03);color:var(--muted)}

.badge.ghost{border-color:color-mix(in oklab, var(--gold) 22%, transparent);background:rgba(255,255,255,.03);color:var(--muted)}

.subfilter{margin:10px 0 12px}

.card{border:1px solid var(--border);border-radius:var(--radius);background:var(--card2);box-shadow:var(--shadow)}
.section{padding:16px}
.section h2{margin:0 0 10px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* Newsletter card */
.newsletter .nl-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center}
.newsletter .nl-title{font-weight:950;letter-spacing:-.01em;font-size:18px}
.newsletter .nl-sub{color:var(--muted);line-height:1.5;margin-top:6px}
.newsletter .nl-form{display:flex;flex-direction:column;gap:10px}
.newsletter input{
  width:100%;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--gold) 22%, transparent);
  background:color-mix(in oklab, var(--surface) 80%, transparent);
  color:var(--text);
  font-weight:700;
}
.newsletter input::placeholder{color:color-mix(in oklab, var(--muted) 82%, transparent)}
.newsletter button{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid transparent;
  background:var(--gold);
  color:#141414;
  font-weight:950;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.newsletter button:hover{filter:brightness(1.03)}
.newsletter .nl-success{color:var(--text);font-weight:900;font-size:13px;line-height:1.3;margin-top:8px}
.newsletter .nl-note{color:var(--muted);font-size:12px;line-height:1.3}

@media (max-width:860px){
  .newsletter .nl-grid{grid-template-columns:1fr}
}

.postlist{display:flex;flex-direction:column;gap:12px}

/* Desktop: make lists feel more like a blog site (use the available width) */
@media (min-width: 1000px){
  .postlist{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .post{height:100%}
}

.post{padding:14px;border-radius:16px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);text-decoration:none;display:flex;gap:14px;align-items:flex-start}

.thumb{width:72px;height:72px;border-radius:14px;border:1px solid var(--border);background:linear-gradient(135deg, color-mix(in oklab, var(--gold) 18%, transparent), rgba(255,255,255,.04));flex:0 0 auto;background-size:cover;background-position:center}

/* Featured post */
.feature{display:block;margin-top:14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;text-decoration:none;background:var(--card2);box-shadow:var(--shadow)}
.feature-img{height:190px;background:linear-gradient(135deg, color-mix(in oklab, var(--gold) 16%, transparent), rgba(255,255,255,.04))}
.feature-img img{width:100%;height:100%;object-fit:cover;display:block}
.feature-body{padding:16px}
.feature-title{font-weight:950;letter-spacing:-.02em;font-size:20px;line-height:1.15;margin-top:6px}
.feature-sub{color:var(--muted);line-height:1.5;margin-top:8px}
.feature-meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-top:12px}

.post-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.post-title{font-weight:950;letter-spacing:-.01em}
.post-excerpt{color:var(--muted);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.post-subline{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:12px}
.badge{display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in oklab, var(--gold) 35%, transparent);background:color-mix(in oklab, var(--gold) 14%, transparent);color:var(--gold2);padding:6px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}

.share{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.share-k{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:900}
.share-actions{display:flex;gap:10px;flex-wrap:wrap}

/* single post */
.article{padding:18px}
.article h1{margin:0 0 10px;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.article .meta{display:flex;gap:10px;flex-wrap:wrap;color:var(--muted);font-size:12px;margin-bottom:14px}
.heroimg{width:100%;height:240px;border-radius:16px;border:1px solid var(--border);background:linear-gradient(135deg, color-mix(in oklab, var(--gold) 16%, transparent), rgba(255,255,255,.04));overflow:hidden}
.heroimg img{width:100%;height:100%;object-fit:cover;display:block}
.content{margin-top:14px;color:var(--text);line-height:1.75}
.content h2{margin:22px 0 10px;font-size:18px;letter-spacing:-.01em}
.content p{margin:10px 0}
.content ul{margin:10px 0 10px 20px}
.content blockquote{margin:14px 0;padding:12px 14px;border-left:3px solid color-mix(in oklab, var(--gold) 55%, transparent);background:color-mix(in oklab, var(--gold) 12%, transparent);border-radius:12px;color:var(--text)}
.content figure{margin:14px 0}
.content img{max-width:100%;border-radius:14px;border:1px solid var(--border);display:block}
.content figcaption{margin-top:8px;color:var(--muted);font-size:12px;line-height:1.4}
.content code{background:color-mix(in oklab, var(--gold) 12%, transparent);border:1px solid color-mix(in oklab, var(--gold) 24%, transparent);padding:2px 6px;border-radius:8px;font-size:0.95em}

/* CTA block (Book / Text) */
.cta{margin-top:18px;padding:14px;border-radius:16px;border:1px solid color-mix(in oklab, var(--gold) 28%, transparent);background:color-mix(in oklab, var(--gold) 10%, transparent);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta-title{font-weight:950;letter-spacing:-.01em}
.cta-sub{color:var(--muted);font-size:13px;margin-top:2px;line-height:1.4}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Buttons inside blog posts/CTA. Match main site CTA feel. */
.btn{border:2px solid var(--gold);background:transparent;padding:10px 12px;border-radius:var(--radius);text-decoration:none;font-weight:900;transition:background-color .25s ease,color .25s ease,transform .25s ease}
.btn:hover{background:var(--gold);color:var(--bg);transform:translateY(-1px)}
.btn.primary{background:var(--gold);color:var(--bg)}
.btn.primary:hover{filter:brightness(1.03)}

.postnav{margin-top:14px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.postnav-link{border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.03);border-radius:16px;padding:12px;text-decoration:none}
.postnav-k{font-size:12px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase;font-weight:900}
.postnav-v{margin-top:6px;font-weight:950;line-height:1.2}

.rel{margin-top:14px}
.rel-h{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:900;margin-bottom:10px}

.more{margin-top:14px}

/* Legacy blog2 footer (if present in older generated pages) */
.footer{margin-top:18px;color:var(--muted);font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}