/* Blog-only styles.
 *
 * Everything structural (palette, panels, pixel borders, the date chip, the
 * button, the scanlines) comes from /static/tko.css, which the engine serves.
 * This file only adds what a blog needs and a brochure site does not: long
 * form prose, a post header, pagination.
 *
 * Body copy is the one deliberate departure from the rest of the site. Public
 * Pixel is right for a tagline and unreadable for a thousand words, so prose
 * runs in a normal monospace at a comfortable measure. Every heading, chrome
 * element and label stays in the pixel face, which is what carries the brand.
 */

/* ---- nav ---- */
.topnav{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
  margin:22px 0 6px; font-size:11px; line-height:2;
}
.topnav a{color:var(--peri); text-decoration:none; text-transform:uppercase}
.topnav a:hover{color:var(--mint)}
.topnav a.here{color:var(--red)}

.bloghead img{max-width:360px}
.bloghead{margin-bottom:4px}

/* ---- post cards on the list ---- */
.postcard h2{margin:20px 0 4px}
.postcard h2 a{color:var(--peri); text-decoration:none}
.postcard h2 a:hover{color:var(--mint)}
.postcard .cardimg{display:block; margin:0 0 18px}
.postcard .cardimg img{width:100%; height:auto; display:block}

/* ---- a single post ---- */
.postfull{margin-top:8px}

.posthead{
  border-bottom:4px solid var(--navy); padding-bottom:26px; margin-bottom:30px;
}
.posthead h1{
  color:var(--peri); font-size:clamp(17px,4.4vw,30px); line-height:1.5;
  margin:20px 0 0; text-transform:uppercase; letter-spacing:.01em;
}
.posthead .standfirst{
  color:var(--mint); font-size:13px; line-height:2; margin:18px 0 0;
}
.posthead .byline{
  color:#4d5e7a; font-size:10px; line-height:2; margin:16px 0 0;
  text-transform:uppercase; letter-spacing:.04em;
}
.posthead .byline a{color:var(--peri)}

.featureimg{width:100%; height:auto; display:block; margin:0 0 30px}

/* ---- prose ---- */
.postbody{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:15px; line-height:1.85; color:#cfe3da;
  max-width:68ch;
}
.postbody > * + *{margin-top:1.5em}
.postbody p{margin:0}
.postbody a{color:var(--mint); text-decoration:underline; text-underline-offset:3px}
.postbody a:hover{color:var(--yellow)}
.postbody strong{color:#fff}
.postbody em{color:var(--peri); font-style:italic}

.postbody h2, .postbody h3, .postbody h4{
  font-family:"Public Pixel", ui-monospace, monospace;
  color:var(--peri); text-transform:uppercase; line-height:1.6;
  margin-top:2.2em;
}
.postbody h2{font-size:15px}
.postbody h3{font-size:13px}
.postbody h4{font-size:12px; color:var(--mint)}

.postbody ul, .postbody ol{padding-left:1.4em}
.postbody li + li{margin-top:.6em}
.postbody li::marker{color:var(--red)}

.postbody blockquote{
  margin-left:0; padding:4px 0 4px 22px;
  border-left:4px solid var(--red); color:var(--mint);
}

.postbody img, .postbody video, .postbody iframe{
  max-width:100%; height:auto; display:block;
}
.postbody figure{margin:0}
.postbody figcaption{
  font-family:"Public Pixel", monospace; font-size:10px; color:#4d5e7a;
  margin-top:12px; line-height:2;
}

.postbody hr{
  border:0; height:4px; background:var(--navy); margin:2.6em 0;
}

.postbody code{
  font-size:.9em; color:var(--yellow); background:#0d0d0d; padding:2px 6px;
}
.postbody pre{
  background:#0a0a0a; padding:18px; overflow-x:auto; font-size:13px;
  box-shadow:
    0 -2px 0 0 var(--navy), 0 2px 0 0 var(--navy),
    -2px 0 0 0 var(--navy), 2px 0 0 0 var(--navy);
}
.postbody pre code{background:none; padding:0; color:#cfe3da}

/* tables can be wider than the measure, so they scroll on their own */
.postbody table{
  display:block; overflow-x:auto; width:100%; border-collapse:collapse;
  font-size:13px;
}
.postbody th, .postbody td{
  border:2px solid var(--navy); padding:10px 12px; text-align:left;
}
.postbody th{color:var(--peri); text-transform:uppercase; font-weight:normal}

/* Ghost's own cards.
 *
 * The editor offers three widths per image, and the theme has to honour all
 * of them or an author picks "wide" and nothing happens. The prose column is
 * capped at 68ch, so wide and full break out of it rather than growing it. */
.kg-width-regular{max-width:100%}
.kg-width-wide{
  width:100%; max-width:min(112ch, 100%);
  margin-left:50%; transform:translateX(-50%);
}
.kg-width-full{
  width:100vw; max-width:100vw;
  margin-left:50%; transform:translateX(-50%);
}
.kg-width-wide img, .kg-width-full img{width:100%; height:auto}

.kg-card + .kg-card{margin-top:1.5em}
.kg-bookmark-card a{text-decoration:none}
.kg-bookmark-container{
  display:block; padding:18px 20px; color:var(--mint);
  box-shadow:
    0 -2px 0 0 var(--navy), 0 2px 0 0 var(--navy),
    -2px 0 0 0 var(--navy), 2px 0 0 0 var(--navy);
}
.kg-bookmark-title{color:var(--peri); font-family:"Public Pixel",monospace; font-size:12px}
.kg-bookmark-description{font-size:13px; margin-top:10px}
.kg-bookmark-thumbnail img{max-width:100%; height:auto}

/* On a narrow screen the breakout has nothing to break out into, so both
   widths collapse back to the column. */
@media (max-width:760px){
  .kg-width-wide, .kg-width-full{
    width:100%; max-width:100%; margin-left:0; transform:none;
  }
}

/* ---- pagination ---- */
.pagination{
  display:flex; justify-content:space-between; align-items:center; gap:20px;
  margin-top:44px; padding-top:26px; border-top:4px solid var(--navy);
  font-size:11px; text-transform:uppercase;
}
.pagination a{color:var(--peri); text-decoration:none}
.pagination a:hover{color:var(--mint)}
.page-number{color:#4d5e7a}

/* ---- Ghost's members/subscribe UI, dragged into the palette ---- */
.gh-portal-triggerbtn-iframe{display:none !important}
input[type="email"]{
  font-family:"Public Pixel", monospace; font-size:12px;
  color:var(--mint); background:#000; padding:12px; border:0;
  box-shadow:
    0 -2px 0 0 var(--navy), 0 2px 0 0 var(--navy),
    -2px 0 0 0 var(--navy), 2px 0 0 0 var(--navy);
}

@media (max-width:560px){
  .postbody{font-size:14px}
  .topnav{gap:12px; font-size:9px}
  .bloghead img{max-width:260px}
}