/* borderline.miami — the page renders splitting.
   Black on white everywhere. Color lives ONLY inside media frames. */

:root{
  --bg:#ffffff;
  --ink:#111111;
  --ink-strong:#000000;
  --hair:#e0e0e0;
  --measure:660px;
  --hero-max:880px;        /* breakout width of the color video hero — tune here */
  --display:"Space Grotesk", system-ui, sans-serif;
  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --gutter:24px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);font-size:20px;line-height:1.7;
  font-weight:400;-webkit-font-smoothing:antialiased;
}
img,iframe{max-width:100%;}
a{color:inherit;}

.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--gutter);}

/* ---- header / footer ---------------------------------------------------- */
.site-header{border-bottom:1px solid var(--hair);}
.site-header-inner,.site-footer-inner{
  display:flex;align-items:baseline;justify-content:space-between;
  padding-top:22px;padding-bottom:22px;gap:16px;
}
.wordmark{
  font-family:var(--serif);font-weight:600;font-size:1.05rem;
  letter-spacing:.01em;text-decoration:none;color:var(--ink-strong);
}
.site-nav{display:flex;gap:26px;}
.site-nav a{
  font-family:var(--display);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink-strong);
}
.site-nav a:hover{text-decoration:underline;text-underline-offset:5px;}
.site-footer{border-top:1px solid var(--hair);margin-top:96px;}
.site-footer-inner{align-items:flex-start;}
.tagline{
  margin:0;text-align:right;font-style:italic;font-size:.9rem;
  line-height:1.5;color:var(--ink);
}

/* ---- main measure ------------------------------------------------------- */
main.wrap{padding-top:56px;padding-bottom:24px;}
.single,.index-head,.missive-list,.signal-hub-head,.haiku,.signal-framing,.arc{
  max-width:var(--measure);margin-left:auto;margin-right:auto;
}

/* ---- titles ------------------------------------------------------------- */
.post-title{
  font-family:var(--display);font-weight:700;
  letter-spacing:-.02em;line-height:1.02;
  font-size:clamp(2.2rem,6vw,3.4rem);margin:0 0 .5em;color:var(--ink-strong);
}
.post-title.center{text-align:center;}
.post-title.left{text-align:left;}

.epigraph{
  font-style:italic;font-size:1.1rem;color:var(--ink);
  margin:0 0 1.4em;
}
.byline{
  font-family:var(--serif);font-size:.9rem;color:var(--ink);
  margin:0 0 2.2em;padding-bottom:1.2em;border-bottom:1px solid var(--hair);
}

/* ---- prose -------------------------------------------------------------- */
.gh-content{font-size:1.15rem;}
.gh-content > *{margin:0 0 1.25em;}
.gh-content h2,.gh-content h3{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  line-height:1.1;color:var(--ink-strong);margin:2em 0 .6em;
}
.gh-content h2{font-size:1.7rem;}
.gh-content h3{font-size:1.3rem;}
.gh-content strong{font-weight:600;}
.gh-content em{font-style:italic;}
.gh-content a{text-decoration:underline;text-underline-offset:3px;}
.gh-content hr{
  border:0;height:1px;background:var(--hair);
  width:100%;margin:2.4em 0;
}
.gh-content blockquote{
  margin:1.6em 0;padding-left:1.1em;border-left:2px solid var(--ink-strong);
  font-style:italic;
}

/* =======================================================================
   THE COLOR VIDEO HERO — the live half. The ONLY color on the page.
   Two ways in, one identical frame:
   (A) the hub pulls its video from the Design setting (.video-hero)
   (B) every missive / Signal part: paste a YouTube link as the FIRST
       card in the body; the theme lifts that first embed into the frame.
   ===================================================================== */

/* the shared frame: a black surround so the color sits in a bounded window.
   It BREAKS OUT wider than the 660px text column — narrow prose, wide media —
   centered on the viewport, capped at --hero-max, fluid below that. */
.video-hero,
.gh-content > figure.kg-embed-card:first-child,
.gh-content > figure.kg-video-card:first-child{
  width:min(92vw, var(--hero-max));
  margin-left:50%;
  transform:translateX(-50%);
  margin-top:0;
  margin-bottom:2.8em;
  padding:8px;
  border:1px solid var(--ink-strong);
  background:#000;
}
.video-hero iframe,
.gh-content > figure.kg-embed-card:first-child iframe,
.gh-content > figure.kg-video-card:first-child video{
  display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;max-width:100%;
}
/* the lifted embed card shouldn't carry its own default figure spacing/caption */
.gh-content > figure.kg-embed-card:first-child{width:100%;}
.gh-content > figure.kg-embed-card:first-child figcaption,
.gh-content > figure.kg-video-card:first-child figcaption{
  display:none;
}

/* any OTHER embed lower in the body stays a normal responsive embed (no frame) */
.gh-content .kg-embed-card iframe,
.gh-content figure iframe{
  display:block;width:100%;aspect-ratio:16/9;height:auto;border:0;
}
.gh-content img{display:block;height:auto;}

/* ---- centered "haiku" block -------------------------------------------- */
.haiku{
  text-align:center;font-size:1.25rem;line-height:2;
  margin:2.4em auto;padding:2em 0;
  border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
}
.haiku p{margin:0;}

/* ---- bordered "Opening" box (convention: wrap opening in .opening) ------ */
.gh-content .opening,.opening-box{
  border:1px solid var(--ink-strong);padding:1.4em 1.6em;margin:0 0 2.2em;
}
.gh-content .opening::before,.opening-box::before{
  content:"Opening";display:block;font-style:italic;font-size:.9rem;
  color:var(--ink);margin-bottom:.6em;
}

/* ---- home doors --------------------------------------------------------- */
.doors{
  display:flex;flex-wrap:wrap;gap:14px;margin-top:3em;
  padding-top:2em;border-top:1px solid var(--hair);
}
.door{
  font-family:var(--display);font-weight:500;font-size:.85rem;
  letter-spacing:.02em;text-decoration:none;color:var(--ink-strong);
  border:1px solid var(--ink-strong);padding:.8em 1.1em;
}
.door:hover{background:var(--ink-strong);color:var(--bg);}

/* ---- Signal hub arc ----------------------------------------------------- */
.signal-framing{margin-bottom:2.6em;}
.signal-framing p{margin:0 0 1.1em;}
.read-order{font-style:italic;}
.arc{border:1px solid var(--ink-strong);padding:1.8em 1.8em .4em;}
.arc-title{
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  letter-spacing:.02em;margin:0 0 1.2em;text-transform:none;color:var(--ink-strong);
}
.arc-item{padding-bottom:1.6em;margin-bottom:1.6em;border-bottom:1px solid var(--hair);}
.arc-item:last-child{border-bottom:0;}
.arc-item-title{
  font-family:var(--display);font-weight:700;font-size:1.25rem;
  line-height:1.1;margin:0 0 .35em;color:var(--ink-strong);
}
.arc-item-summary{font-style:italic;margin:0 0 1em;color:var(--ink);}
.btn{
  display:inline-block;background:var(--ink-strong);color:var(--bg);
  font-family:var(--display);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
  padding:.7em 1.1em;
}
.btn:hover{opacity:.85;}

/* ---- part navigation ---------------------------------------------------- */
.partnav{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-family:var(--display);font-weight:500;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;
}
.partnav a{text-decoration:none;color:var(--ink-strong);}
.partnav a:hover{text-decoration:underline;text-underline-offset:4px;}
.partnav-top{margin-bottom:1.6em;}
.partnav-bottom{margin-top:3em;padding-top:1.4em;border-top:1px solid var(--hair);}
.partnav-bottom .pn-prev{justify-self:start;min-width:5em;}
.partnav-bottom .pn-next{justify-self:end;min-width:5em;text-align:right;}

/* ---- missives index ----------------------------------------------------- */
.index-head{margin-bottom:2.4em;}
.missive-item{padding-bottom:2em;margin-bottom:2em;border-bottom:1px solid var(--hair);}
.missive-item:last-child{border-bottom:0;}
.mi-link{text-decoration:none;}
.mi-title{
  font-family:var(--display);font-weight:700;letter-spacing:-.01em;
  font-size:1.9rem;line-height:1.05;margin:0 0 .35em;color:var(--ink-strong);
}
.mi-link:hover .mi-title{text-decoration:underline;text-underline-offset:5px;}
.mi-excerpt{margin:0 0 .6em;color:var(--ink);}
.mi-date{font-size:.85rem;color:var(--ink);margin:0;}
.empty{font-style:italic;color:var(--ink);}

/* ---- signal footer link on every missive -------------------------------- */
.signal-footer-link{
  margin-top:3em;padding-top:1.4em;border-top:1px solid var(--hair);
  font-style:italic;
}
.signal-footer-link a{text-decoration:underline;text-underline-offset:3px;}

/* ---- a11y / motion ------------------------------------------------------ */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--ink-strong);outline-offset:3px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* ---- responsive --------------------------------------------------------- */
@media (max-width:640px){
  body{font-size:18px;}
  .gh-content{font-size:1.08rem;}
  main.wrap{padding-top:36px;}
  .site-footer-inner{flex-direction:column;gap:14px;}
  .tagline{text-align:left;}
  .haiku{font-size:1.1rem;}
  /* video goes near edge-to-edge on phones for impact */
  .video-hero,
  .gh-content > figure.kg-embed-card:first-child,
  .gh-content > figure.kg-video-card:first-child{
    width:96vw;padding:6px;
  }
}

/* ---- Koenig wide / full media (the sanctioned breakout for color media) -- */
.gh-content .kg-width-wide{
  width:min(1040px,94vw);margin-left:50%;transform:translateX(-50%);
}
.gh-content .kg-width-full{
  width:100vw;margin-left:50%;transform:translateX(-50%);
}
.gh-content .kg-width-full img{width:100%;}