/*
Theme Name: Blockbase Child
Template: blockbase
*/

.wp-block-template-part .has-text-align-center:last-child,
.site-info,
footer .wp-block-site-title + p,
footer p:has(a[href*='wordpress.org']) {
    display: none !important;
}

/* ---- Margin sidenotes + letterpress callouts ---- */
.mm-sidenote-ref{
  color:#8c3b2e; font-weight:700; vertical-align:super; font-size:.72em;
  margin-left:1px; text-decoration:none; font-family:Georgia,serif; cursor:pointer;
}
/* Toggle checkbox: never occupies layout space; drives the mobile footnote reveal */
.mm-sidenote-check{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.mm-sidenote{
  display:block; float:right; clear:right; width:185px; margin:6px -210px 16px 0;
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  font-style:italic; font-size:14.5px; line-height:1.5; color:#4a4038;
  border-top:1px solid #8c3b2e; padding-top:7px;
}
.mm-sidenote-label{
  display:block; font-style:normal; font-variant:small-caps; letter-spacing:.1em;
  font-size:10.5px; color:#8c3b2e; margin-bottom:3px;
}
.mm-callout{
  margin:30px -34px; padding:16px 28px;
  border-top:2px solid #1c1a17; border-bottom:2px solid #1c1a17;
  background:#f7f3ea;
  font-family:"Iowan Old Style",Palatino,Georgia,serif;
  font-size:16px; line-height:1.6; color:#2a2620;
}
.mm-callout-label{
  display:block; font-variant:small-caps; letter-spacing:.14em; font-size:11.5px;
  color:#8c3b2e; margin-bottom:7px; font-weight:600;
}
/* Narrow screens: no gutter — the mark becomes a tappable footnote indicator;
   the note is hidden until the reader taps it, then expands inline. */
@media (max-width:1100px){
  /* footnote indicator: small oxblood superscript chip, comfortable tap target */
  .mm-sidenote-ref{
    display:inline-block; vertical-align:super; font-size:.7em; line-height:1;
    min-width:16px; padding:1px 4px; margin:0 1px; border-radius:3px;
    background:rgba(140,59,46,.10); color:#8c3b2e; text-align:center;
  }
  /* hide the note by default; reveal when its toggle is checked */
  .mm-sidenote{ display:none; }
  .mm-sidenote-check:checked ~ .mm-sidenote{
    display:block; float:none; width:auto; margin:10px 0 14px;
    padding:8px 0 0 14px; border-top:none; border-left:2px solid #8c3b2e;
  }
  /* tapped-open state: fill the chip so the reader sees what's expanded (progressive; toggle still works without :has) */
  .mm-sidenote-ref:has(+ .mm-sidenote-check:checked){ background:#8c3b2e; color:#f7f3ea; }
  .mm-callout{ margin-left:0; margin-right:0; }
}

/* ---- Publication look: Space Grotesk display + oxblood spot (D3) ---- */
@font-face{
  font-family:'Space Grotesk';
  src:url('fonts/space-grotesk.woff2') format('woff2');
  font-weight:300 700; font-style:normal; font-display:swap;
}

/* Masthead */
.wp-block-site-title, .wp-block-site-title a{
  font-family:'Space Grotesk',sans-serif !important; font-weight:700 !important;
  font-size:26px !important; letter-spacing:-.02em !important; color:#1c1a17 !important;
}

/* Headlines: page title, feed post titles, section headings */
.wp-block-post-title, .wp-block-post-title a,
.entry-content h1, .entry-content h2{
  font-family:'Space Grotesk',sans-serif !important; font-weight:700 !important;
  letter-spacing:-.025em !important; color:#1c1a17 !important; text-decoration:none !important;
}
.wp-block-post-template .wp-block-post-title{
  font-size:31px !important; line-height:1.08 !important; margin-bottom:5px !important;
}

/* Feed: oxblood mono date kicker + bold rule between posts */
.wp-block-post-date, .wp-block-post-date a{
  font-family:'Space Grotesk',monospace !important; font-size:12px !important;
  text-transform:uppercase !important; letter-spacing:.1em !important;
  color:#8c3b2e !important; text-decoration:none !important;
}
.wp-block-post-template li{
  border-top:2px solid #1c1a17 !important; padding-top:18px !important;
  margin-top:18px !important; list-style:none !important;
}

/* Oxblood spot color: content links + read-more + nav hover */
.entry-content p a, .wp-block-post-content p a,
.wp-block-post-excerpt__more-link{ color:#8c3b2e !important; }
.wp-block-post-excerpt__more-link{
  font-family:'Space Grotesk',sans-serif !important; font-weight:500 !important;
}
.wp-block-navigation a:hover, .wp-block-navigation .current-menu-item a{ color:#8c3b2e !important; }

/* ---- Writing publication feed ---- */
html{ scroll-behavior:smooth; }
.mm-writing{ position:relative; }
.mm-feed > article{ border-top:2px solid #1c1a17; padding-top:20px; margin-top:30px; }
.mm-feed > article:first-child{ margin-top:8px; border-top:none; padding-top:0; }

/* Essays */
.mm-essay-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.025em; font-size:31px; line-height:1.08; margin:0 0 4px; }
.mm-essay-title a{ color:#1c1a17; text-decoration:none; }
.mm-essay-date{ font-family:'Space Grotesk',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#8c3b2e; margin-bottom:14px; }
.mm-essay-content{ color:#2a2620; }

/* Clippings */
.mm-clip .clip-head{ font-family:'Space Grotesk',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.12em; color:#8c3b2e; padding-bottom:9px; margin-bottom:13px; border-bottom:1px solid #e3d9c7; }
.mm-clip .clip-row{ display:flex; gap:20px; align-items:flex-start; }
.mm-clip .clip-body{ flex:1 1 auto; min-width:0; }
.mm-clip .clip-title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; line-height:1.25; display:inline; margin:0; }
.mm-clip .clip-title a{ color:#1c1a17; text-decoration:none; }
.mm-clip .clip-title a::after{ content:" \2197"; color:#8c3b2e; font-weight:700; }
.mm-clip .clip-content{ font-size:15px; color:#2a2620; line-height:1.5; margin-top:6px; }

/* Clipping live video (left media column) */
.mm-clip .clip-video{ flex:0 0 340px; max-width:340px; }
.mm-clip .clip-video iframe,
.mm-clip .clip-video .wp-block-embed__wrapper{ width:100%; }
.mm-clip .clip-video iframe{ width:100%; height:auto; aspect-ratio:16/9; display:block; border:0; }

/* Clipping fallback still (no video) */
.mm-clip .clip-thumb{ flex:0 0 168px; aspect-ratio:16/9; background:#26221d; position:relative; overflow:hidden; }
.mm-clip .clip-thumb img{ width:100%; height:100%; object-fit:cover; }
.mm-clip .clip-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:0;height:0; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #f7f3ea; }

/* Left rail: identity block + scroll-spy TOC (fixed gutter; collapses inline when narrow) */
/* Rail spans the full height of the river in the left gutter (scrolls with the page);
   the TOC inside it is sticky, so the photo/info scroll away and the TOC stays pinned. */
.mm-rail{ position:absolute; top:0; bottom:0; left:-210px; width:176px; font-family:'Space Grotesk',sans-serif; z-index:40; }

/* Identity block */
.mm-ident{ margin-bottom:26px; }
.mm-ident-photo{ display:block; width:124px; height:248px; object-fit:cover; object-position:50% 22%; margin-bottom:12px; }
.mm-ident-name{ display:block; font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-.02em; font-size:18px; line-height:1.1; color:#1c1a17; text-decoration:none; margin-bottom:12px; }
.mm-ident-name:hover{ color:#8c3b2e; }
.mm-ident-about{ font-family:inherit; font-size:12px; line-height:1.5; color:#2a2620; margin:0 0 12px; }
.mm-ident-about a{ color:#8c3b2e; }
.mm-ident-links{ line-height:1.5; }
.mm-ident-links a{ font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:#1c1a17; text-decoration:none; }
.mm-ident-links a:hover{ color:#8c3b2e; }
.mm-ident-links > *:not(:first-child)::before{ content:"*"; margin:0 7px; color:#8c3b2e; font-weight:400; }

/* Scroll-spy TOC — sticky inside the rail (pins once the identity scrolls past) */
.mm-toc{ position:sticky; top:24px; max-height:calc(100vh - 48px); overflow-y:auto; }
.mm-toc-h{ font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:#8c3b2e; margin-bottom:12px; }
.mm-toc a{ display:block; font-size:12.5px; line-height:1.28; color:#1c1a17; text-decoration:none; margin-bottom:11px; padding-left:11px; border-left:2px solid #e3d9c7; }
.mm-toc a:hover{ color:#8c3b2e; border-left-color:#8c3b2e; }
.mm-toc a.is-clip::after{ content:" (link)"; color:#8c3b2e; font-size:.85em; }
.mm-toc a.is-active{ color:#8c3b2e; border-left-color:#8c3b2e; }

/* Narrow screens: rail falls inline above the river — identity stays, TOC hides */
@media (max-width:1200px){
  .mm-rail{ position:static; width:auto; max-height:none; overflow:visible; margin-bottom:34px; }
  .mm-toc{ display:none; }
  .mm-ident{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 18px; margin-bottom:0; }
  .mm-ident-photo{ margin-bottom:0; width:64px; height:128px; }
  .mm-ident-links{ flex:1 1 auto; }
  .mm-ident-about{ font-size:13px; flex:0 0 100%; }
}

/* Mobile: clippings stack */
@media (max-width:640px){
  .mm-clip .clip-row{ flex-direction:column; }
  .mm-clip .clip-video{ flex-basis:auto; max-width:100%; width:100%; }
}

/* Clipping panel: subtle cream background to set clippings apart from essays */
.mm-feed > article.mm-clip{ background:#f7f3ea; padding:22px 24px; margin-left:-24px; margin-right:-24px; border-top:none; }
.mm-feed > article.mm-clip .clip-head{ margin-top:0; }
@media (max-width:640px){ .mm-feed > article.mm-clip{ margin-left:0; margin-right:0; padding:18px 16px; } }

/* Rail primary nav (site sections, now living in the rail) */
.mm-ident-nav{ margin-bottom:13px; line-height:1.5; }
.mm-ident-nav a{ font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-weight:700; letter-spacing:-.01em; color:#1c1a17; text-decoration:none; }
.mm-ident-nav a:hover{ color:#8c3b2e; }
.mm-ident-nav a:not(:first-child)::before{ content:"*"; margin:0 7px; color:#8c3b2e; font-weight:400; }

/* Home (writing river): drop the masthead + page title, pull content & rail to the top */
.home header.wp-block-template-part{ display:none; }
.home .wp-block-post-title{ display:none; }
.home main{ margin-top:0; }
.home .wp-site-blocks{ padding-top:30px; }
@media (max-width:1200px){
  .mm-ident-nav{ flex:0 0 100%; margin-bottom:6px; }
  .home .wp-site-blocks{ padding-top:22px; }
}