/* "The Notebook" — single-essay reading experience.
   Loaded only on single posts (functions.php::bmhud_assets(), is_single(),
   PLAT-006). Never move any of this into global.css — that file loads on
   every page and would leak the article layout everywhere. */

.bmhud-notebook{
  --ink:#080B08; --obsidian:#0A0F0B; --surface:#121A13; --elevated:#1A241B;
  --pine:#0C3A0D; --forest:#104911; --emerald:#1E7A2C;
  --gold-deep:#B9842A; --gold:#E2A837; --gold-light:#EFC35C;
  --heading:#F4EFE3; --body:#CFC9BB; --muted:#8E8B7E;
  --border:rgba(244,239,227,0.10); --border-gold:rgba(226,168,55,0.30);
  --nav-bg:rgba(10,15,11,0.72);
  --pill-fill:#0C3A0D; --pill-text:#F4EFE3; --pill-hover-fill:#104911;
  --reply-border:rgba(226,168,55,0.30);
  --card-shadow:none; --card-hover-shadow:none;
  --monogram-fill:#104911; --monogram-text:#E2A837; --monogram-shadow:none;
  --serif:"Fraunces",Georgia,serif; --sans:"Inter",system-ui,sans-serif; --mono:"JetBrains Mono",monospace;
}

/* Light edition — daylight paper, not an inversion. The explicit choice and
   Auto/OS path intentionally carry the same values; dark remains the default. */
:root[data-theme="light"] .bmhud-notebook{
  --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
  --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
  --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
  --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
  --bm-hover-from-gold:var(--bm-gold-ink-hover);
  --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
  --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
  --nav-bg:rgba(231,224,206,0.78);
  --pill-fill:#154C17; --pill-text:#EFE9DA; --pill-hover-fill:#104911;
  --reply-border:rgba(42,40,32,0.14);
  --card-shadow:0 1px 0 rgba(244,239,227,0.55), 0 10px 26px -20px rgba(42,40,32,0.52);
  --card-hover-shadow:0 1px 0 rgba(244,239,227,0.60), 0 14px 30px -18px rgba(42,40,32,0.52);
  --monogram-fill:#DFD7C3; --monogram-text:var(--bm-gold-ink);
  --monogram-shadow:inset 0 0 0 1px rgba(185,132,42,0.36);
  --comment-input-border:var(--muted); --comment-input-focus:var(--bm-focus);
  --comment-submit-text:var(--bm-on-gold); --comment-submit-hover:var(--gold-deep);
  --comment-submit-hover-text:#E7E0CE;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]) .bmhud-notebook{
    --ink:#DED6C1; --obsidian:#E7E0CE; --surface:#DFD7C3; --elevated:#D7CEB7;
    --gold-deep:#7A5511; --gold:#B9842A; --gold-light:#946815;
    --heading:#2A2820; --body:#3E3A2D; --muted:#544E38;
    --bm-gold-ink:#664914; --bm-gold-ink-hover:#5B4010;
    --bm-hover-from-gold:var(--bm-gold-ink-hover);
    --bm-on-gold:#1A1712; --bm-focus:var(--bm-gold-ink);
    --border:rgba(42,40,32,0.14); --border-gold:rgba(185,132,42,0.36);
    --nav-bg:rgba(231,224,206,0.78);
    --pill-fill:#154C17; --pill-text:#EFE9DA; --pill-hover-fill:#104911;
    --reply-border:rgba(42,40,32,0.14);
    --card-shadow:0 1px 0 rgba(244,239,227,0.55), 0 10px 26px -20px rgba(42,40,32,0.52);
    --card-hover-shadow:0 1px 0 rgba(244,239,227,0.60), 0 14px 30px -18px rgba(42,40,32,0.52);
    --monogram-fill:#DFD7C3; --monogram-text:var(--bm-gold-ink);
    --monogram-shadow:inset 0 0 0 1px rgba(185,132,42,0.36);
    --comment-input-border:var(--muted); --comment-input-focus:var(--bm-focus);
    --comment-submit-text:var(--bm-on-gold); --comment-submit-hover:var(--gold-deep);
    --comment-submit-hover-text:#E7E0CE;
  }
}

/* Standard visually-hidden-but-focusable utility (WP core ships this via
   block-library CSS, but that isn't guaranteed to be enqueued on every
   request, so the article's own label — e.g. the comment textarea's —
   doesn't depend on it). */
.bmhud-notebook .screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal;
}
.bmhud-notebook .screen-reader-text:focus{
  background:var(--surface);color:var(--heading);display:block;height:auto;
  left:6px;top:6px;clip:auto;clip-path:none;width:auto;padding:12px 16px;
  z-index:100000;text-decoration:none;border-radius:10px;
}

.bmhud-notebook{
  background:var(--obsidian); color:var(--body); font-family:var(--sans);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.bmhud-notebook *{ box-sizing:border-box; }
.bmhud-notebook a{ color:var(--bm-gold-ink,var(--gold)); text-decoration:none; transition:color .18s ease; }
.bmhud-notebook a:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }
.bmhud-notebook a:focus-visible{ outline:2px solid var(--bm-focus,var(--gold)); outline-offset:2px; border-radius:2px; }

.notebook-stage{ max-width:1240px; margin:0 auto; padding:0 28px; }

/* ---- Sticky blurred nav (direction §2 — "identical to the homepage
   design" in spirit: same brand wordmark/grammar; made sticky + blurred
   here since the article is a long scroll where that matters most). ---- */
.notebook-nav{
  position:sticky; top:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:18px 28px;
  font-family:var(--mono); font-size:12px; letter-spacing:.08em;
  background:var(--nav-bg);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.notebook-nav .brand{ color:var(--heading); font-family:var(--serif); font-weight:600; font-size:18px; line-height:1; letter-spacing:0; }
.notebook-nav .brand b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }
.notebook-nav .back{ color:var(--muted); font-size:12px; letter-spacing:.05em; white-space:nowrap; }
.notebook-nav .back:hover{ color:var(--bm-hover-from-gold,var(--gold)); }

/* ---- Article column (direction §2 — measure ~680-720px) ---- */
.notebook-article{ max-width:720px; margin:0 auto; padding:64px 20px 8px; }

.notebook-masthead{ margin-bottom:40px; }

/* Category pill — homepage/BRAND "category tag" token: deep-pine fill,
   warm-white text, pill shape. */
.notebook-pill{
  display:inline-block; background:var(--pill-fill); color:var(--pill-text);
  font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.04em;
  padding:5px 14px; border-radius:999px; margin-bottom:20px;
}
/* The linked masthead pill is an <a>, so the article-wide `.bmhud-notebook a`
   link rule (0,1,1) out-specifies the unqualified `.notebook-pill` (0,1,0)
   above and would paint the resting text in the link colour (muddy
   `--bm-gold-ink` in the light edition). Re-assert `--pill-text` at (0,2,1)
   so it wins in every edition. The static `<span>` pill isn't an <a>, so it
   keeps `--pill-text` from the base rule above. */
.bmhud-notebook a.notebook-pill{ color:var(--pill-text); }
a.notebook-pill:hover{ background:var(--pill-hover-fill); color:var(--pill-text); }
.notebook-pill--static{ cursor:default; }

.notebook-title{
  font-family:var(--serif); color:var(--heading); font-weight:500;
  font-size:clamp(2rem,5vw,3rem); line-height:1.15; letter-spacing:-0.02em;
  margin:0 0 18px;
}

.notebook-meta{
  font-size:14px; color:var(--muted); margin:0;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.notebook-meta span[aria-hidden]{ color:var(--border-gold); }

/* ---- Body copy ---- */
.notebook-content{ font-size:17px; line-height:1.7; color:var(--body); }
.notebook-content > p{ margin:0 0 26px; }

/* Lead paragraph — the opening paragraph reads slightly larger. */
.notebook-content > p:first-of-type{ font-size:20px; line-height:1.75; color:var(--heading); }

.notebook-content h2{
  font-family:var(--serif); color:var(--heading); font-weight:500;
  font-size:clamp(1.5rem,3vw,1.9rem); line-height:1.25; letter-spacing:-0.015em;
  margin:48px 0 20px;
}
.notebook-content h3{
  font-family:var(--serif); color:var(--heading); font-weight:500;
  font-size:1.3rem; line-height:1.3; margin:36px 0 16px;
}
.notebook-content ul,
.notebook-content ol{ margin:0 0 26px; padding-left:1.4em; }
.notebook-content li{ margin-bottom:8px; }
.notebook-content a{ text-decoration:underline; text-decoration-color:var(--border-gold); text-underline-offset:3px; }
.notebook-content a:hover{ text-decoration-color:var(--gold); }
.notebook-content strong{ color:var(--heading); font-weight:600; }
.notebook-content hr{ border:0; border-top:1px solid var(--border); margin:48px 0; }

/* ---- Move 1: inline figures — thin gold-hairline frame, muted
   serif-italic caption, never overflow the column. ---- */
.notebook-content img{ max-width:100%; height:auto; display:block; }
.notebook-content figure{ margin:40px 0; }
.notebook-content figure img,
.notebook-content > img{
  border:1px solid var(--border-gold); border-radius:4px;
  padding:6px; background:var(--surface);
}
.notebook-content figcaption{
  font-family:var(--serif); font-style:italic; color:var(--muted);
  font-size:14px; line-height:1.5; text-align:center; margin-top:12px;
}

/* ---- Move 2: gold serif pull-quotes ----
   `.bmhud-notebook` is repeated in these selectors so they reliably beat
   global.css's `.wp-block-quote p:first-child` rule (an About-page-only
   RTL/Arabic-quote treatment that is, unfortunately, not scoped to the
   About page and so also loads on single posts — see FE-003 handoff notes
   for the flag). Without the extra qualifier that rule's higher specificity
   would win and pull-quotes would render right-to-left. */
.bmhud-notebook .notebook-content blockquote{
  border:0; border-left:3px solid var(--gold);
  margin:44px 0; padding:4px 0 4px 28px;
}
.bmhud-notebook .notebook-content blockquote,
.bmhud-notebook .notebook-content blockquote p{
  direction:ltr; font-family:var(--serif); font-style:normal; font-weight:500;
  font-size:clamp(1.3rem,3vw,1.7rem); line-height:1.4; color:var(--bm-gold-ink,var(--gold)); margin:0;
}
.bmhud-notebook .notebook-content blockquote p + p{ margin-top:16px; }
.bmhud-notebook .notebook-content blockquote cite{
  display:block; margin-top:14px; font-family:var(--sans); font-style:normal;
  font-size:13px; font-weight:400; color:var(--muted);
}

/* ---- Move 3: sign-off coda ----
   Convention: when the LAST block in the post is a blockquote, treat it as
   Basel's closing personal disclaimer and style it as a small framed,
   muted sign-off instead of a gold pull-quote (see handoff notes — a post
   that instead ends on a plain paragraph just renders as normal body copy,
   no coda styling is forced onto it). */
.bmhud-notebook .notebook-content > blockquote:last-child{
  border:1px solid var(--border); border-left:1px solid var(--border-gold);
  background:var(--surface); border-radius:12px; padding:22px 26px; margin:56px 0 0;
  box-shadow:var(--card-shadow);
}
.bmhud-notebook .notebook-content > blockquote:last-child,
.bmhud-notebook .notebook-content > blockquote:last-child p{
  direction:ltr; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:15px; line-height:1.7; color:var(--muted);
}
.bmhud-notebook .notebook-content > blockquote:last-child cite{
  color:var(--muted);
}

/* ---- Move 4: "Read next →" card ---- */
.notebook-next{
  display:block; margin:64px 0 0; padding:28px;
  border:1px solid var(--border); border-radius:16px; background:var(--surface);
  box-shadow:var(--card-shadow);
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.notebook-next:hover{ background:var(--elevated); border-color:var(--border-gold); box-shadow:var(--card-hover-shadow); }
.notebook-next-kicker{
  display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--bm-gold-ink,var(--gold)); margin-bottom:12px;
}
.notebook-next .notebook-pill{ margin:0 0 10px; }
.notebook-next-title{
  display:block; font-family:var(--serif); color:var(--heading);
  font-size:1.4rem; line-height:1.3; font-weight:500;
}

/* ---- Footer (matches the homepage grammar) ---- */
.bm-footer{
  font-family:var(--mono); font-size:12px; color:var(--muted);
  padding:26px 0 46px; margin-top:64px; border-top:1px solid var(--border);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.bm-footer b{ color:var(--bm-gold-ink,var(--gold)); }
.bm-footer-name{ font-family:var(--serif); font-weight:500; font-size:14px; letter-spacing:0; color:var(--heading); }
.bm-footer-name b{ color:var(--bm-gold-ink,var(--gold)); font-weight:inherit; }

/* =====================================================================
   Comments — "The Margin"
   ===================================================================== */
.notebook-margin{ max-width:720px; margin:0 auto; padding:56px 20px 0; }
.notebook-margin-locked{ max-width:720px; margin:56px auto 0; padding:0 20px; color:var(--muted); }

.notebook-margin-header{ margin-bottom:28px; padding-bottom:20px; border-bottom:1px solid var(--border-gold); }
.bmhud-notebook .notebook-margin-header .bm-kicker{ display:block; margin-bottom:6px; color:var(--bm-gold-ink,var(--gold)); }
.notebook-margin-count{ font-family:var(--serif); font-weight:500; color:var(--heading); font-size:1.4rem; margin:0; }

.notebook-margin-list{ list-style:none; margin:0; padding:0; }
.notebook-margin-row{ border-top:1px solid var(--border); padding:24px 0; }
.notebook-margin-list > .notebook-margin-row:first-child{ border-top:0; padding-top:0; }

.notebook-margin-row-inner{ display:flex; gap:14px; align-items:flex-start; }

.notebook-monogram{
  flex:0 0 auto; width:34px; height:34px; border-radius:50%;
  background:var(--monogram-fill); color:var(--monogram-text); box-shadow:var(--monogram-shadow);
  font-family:var(--serif); font-weight:600; font-size:14px;
  display:flex; align-items:center; justify-content:center;
}

.notebook-margin-body{ flex:1 1 auto; min-width:0; }
.notebook-margin-meta{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:6px; }
.notebook-margin-name{ color:var(--heading); font-size:15px; font-weight:500; }
.notebook-margin-date a{ color:var(--muted); font-size:13px; }
.notebook-margin-date a:hover{ color:var(--bm-hover-from-gold,var(--gold)); }
.notebook-margin-text{ font-size:15px; line-height:1.7; color:var(--body); }
.notebook-margin-text p{ margin:0 0 12px; }
.notebook-margin-text p:last-child{ margin-bottom:0; }
.notebook-margin-pending{ color:var(--muted); font-size:13px; margin:0 0 8px; }

.notebook-margin-reply{ margin-top:10px; }
.notebook-margin-reply a{ color:var(--bm-gold-ink,var(--gold)); font-size:13px; font-weight:500; }
.notebook-margin-reply a:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }

/* Replies — a single gold vertical hairline, margin-note feel. */
.notebook-margin-list .children{
  list-style:none; margin:18px 0 0; padding:0 0 0 20px;
  border-left:1px solid var(--reply-border);
}
.notebook-margin-list .children .notebook-margin-row{ padding:18px 0; }
.notebook-margin-list .children .notebook-margin-row:first-child{ border-top:0; padding-top:0; }

.notebook-margin-nav{ display:flex; justify-content:space-between; gap:16px; margin-top:24px; font-size:13px; color:var(--muted); }
.notebook-margin-closed{ color:var(--muted); font-size:14px; margin-top:20px; }

/* ---- Form ---- */
.bmhud-notebook .notebook-margin-gate{
  margin:40px 0 64px; padding:28px;
  border:1px solid var(--border); border-top-color:var(--border-gold);
  border-radius:12px; background:var(--surface); box-shadow:var(--card-shadow);
  text-align:center;
}
.bmhud-notebook .notebook-margin-gate-lock{
  width:34px; height:34px; margin:0 auto 14px; border-radius:50%;
  background:var(--monogram-fill); color:var(--monogram-text); box-shadow:var(--monogram-shadow);
  display:flex; align-items:center; justify-content:center;
}
.bmhud-notebook .notebook-margin-gate-lock svg{
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.bmhud-notebook .notebook-margin-gate-title{
  font-family:var(--serif); color:var(--heading); font-weight:500;
  font-size:1.3rem; line-height:1.3; margin:0 0 8px;
}
.bmhud-notebook .notebook-margin-gate-copy{
  max-width:440px; margin:0 auto 20px; color:var(--body);
  font-size:14px; line-height:1.6;
}
.bmhud-notebook .notebook-margin-gate-actions{
  display:flex; justify-content:center; gap:10px; flex-wrap:wrap;
}
.bmhud-notebook .notebook-margin-gate-button{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; padding:10px 18px; border-radius:10px;
  font-size:14px; font-weight:600; line-height:1.2;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.bmhud-notebook .notebook-margin-gate-login{
  background:var(--gold); color:var(--comment-submit-text,var(--obsidian));
  border:1px solid var(--gold);
}
.bmhud-notebook .notebook-margin-gate-login:hover{
  background:var(--comment-submit-hover,var(--gold-light));
  border-color:var(--comment-submit-hover,var(--gold-light));
  color:var(--comment-submit-hover-text,var(--obsidian));
}
.bmhud-notebook .notebook-margin-gate-register{
  background:transparent; color:var(--bm-gold-ink,var(--gold));
  border:1px solid var(--bm-gold-ink,var(--gold));
}
.bmhud-notebook .notebook-margin-gate-register:hover{
  background:var(--elevated); color:var(--bm-gold-ink-hover,var(--gold-light));
  border-color:var(--bm-gold-ink-hover,var(--gold-light));
}
.bmhud-notebook .notebook-margin-gate-button:focus-visible{
  outline:2px solid var(--bm-focus,var(--gold)); outline-offset:2px;
}

.bmhud-notebook .notebook-margin-as{
  width:100%; margin:0 0 18px; padding:12px 0 16px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:10px; color:var(--body);
}
.bmhud-notebook .notebook-margin-as-text{
  min-width:0; font-size:14px; line-height:1.4;
}
.bmhud-notebook .notebook-margin-as-text strong{
  color:var(--heading); font-weight:500;
}
.bmhud-notebook .notebook-margin-as-logout{
  margin-left:auto; color:var(--muted); font-size:13px; white-space:nowrap;
}
.bmhud-notebook .notebook-margin-as-logout:hover{ color:var(--bm-gold-ink-hover,var(--gold-light)); }

.notebook-margin-prompt{
  font-family:var(--serif); color:var(--heading); font-weight:500;
  font-size:1.3rem; margin:48px 0 16px;
}
.notebook-margin-note{ color:var(--muted); font-size:13px; margin:0 0 18px; }

.notebook-margin-form{ max-width:100%; margin:0 0 64px; }
.notebook-margin-form p{ margin:0 0 16px; }
.notebook-margin-form label{ display:block; color:var(--body); font-size:13px; margin-bottom:6px; }
.notebook-margin-form label span[aria-hidden]{ color:var(--bm-gold-ink,var(--gold)); }

.notebook-margin-form textarea,
.notebook-margin-form input[type="text"],
.notebook-margin-form input[type="email"]{
  width:100%; background:var(--obsidian); color:var(--heading);
  border:1px solid var(--comment-input-border,var(--border)); border-radius:10px; padding:12px 14px;
  font-family:var(--sans); font-size:15px; line-height:1.6;
  transition:border-color .18s ease;
}
.notebook-margin-form textarea::placeholder,
.notebook-margin-form input::placeholder{ color:var(--muted); }
.notebook-margin-form textarea:focus,
.notebook-margin-form input:focus{ outline:none; border-color:var(--comment-input-focus,var(--gold)); }
.notebook-margin-form .comment-form-comment textarea{ resize:vertical; min-height:96px; }

.notebook-margin-form .comment-form-cookies-consent{
  display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted);
}
.notebook-margin-form .comment-form-cookies-consent label{ margin:0; font-size:13px; color:var(--muted); }
.notebook-margin-form .comment-form-cookies-consent input{ width:auto; }

.notebook-margin-submit{
  display:inline-block; background:var(--gold); color:var(--comment-submit-text,var(--obsidian));
  font-family:var(--sans); font-weight:600; font-size:14px;
  border:0; border-radius:10px; padding:11px 24px; cursor:pointer;
  transition:background .18s ease;
}
.notebook-margin-submit:hover{
  background:var(--comment-submit-hover,var(--gold-light));
  color:var(--comment-submit-hover-text,var(--obsidian));
}
.notebook-margin-submit:focus-visible{ outline:2px solid var(--gold-light); outline-offset:2px; }

.notebook-margin-form .form-submit{ margin-top:6px; }

/* Name + Email as one tight two-column row. */
@media(min-width:560px){
  .notebook-margin-form{ display:flex; flex-wrap:wrap; gap:0 16px; }
  .notebook-margin-form .comment-form-comment,
  .notebook-margin-form .comment-form-cookies-consent,
  .bmhud-notebook .notebook-margin-form .notebook-margin-as,
  .notebook-margin-form .form-submit{ flex:0 0 100%; }
  .notebook-margin-form .comment-form-author,
  .notebook-margin-form .comment-form-email{ flex:1 1 240px; }
}

/* ---- Responsive ---- */
@media(max-width:640px){
  .notebook-nav{ padding:16px 18px; flex-wrap:wrap; }
  .notebook-article{ padding:44px 18px 8px; }
  .notebook-title{ font-size:1.9rem; }
  .bmhud-notebook .notebook-content blockquote{ padding-left:18px; }
  .notebook-margin{ padding:44px 18px 0; }
  .notebook-margin-locked{ padding:0 18px; }
  .bmhud-notebook .notebook-margin-gate{ padding:24px 18px; }
  .bmhud-notebook .notebook-margin-gate-actions{ flex-direction:column; }
  .bmhud-notebook .notebook-margin-gate-button{ width:100%; }
  .bmhud-notebook .notebook-margin-as{ align-items:flex-start; flex-wrap:wrap; }
  .bmhud-notebook .notebook-margin-as-logout{ flex:0 0 100%; margin-left:44px; }
}

@media(prefers-reduced-motion:reduce){
  .bmhud-notebook *{ transition:none !important; }
}