/* Styles for dated posts and series landing pages. Loaded by note.html,
   series.html, and blog.html on top of style.css (and book.css on post
   pages, which supplies the long-form prose styling).

   Careful with class names here: style.css still defines .notes-panel as a
   two-column grid left over from an earlier home-page design, so any panel
   that borrows that name silently inherits the grid. */

/* ---- post page ---------------------------------------------------- */

/* --note-width is the single width everything on a post shares: prose, code
   blocks, images, tables, the case card. There used to be a narrower reading
   column with code and images breaking out past it, which left the text
   looking boxed in next to them. One width instead, so nothing steps out of
   line.

   100% means the full layout content box, 1132px at the 1180px --max-width
   minus the padding below. Lower it to a rem value to bring everything in. */
.note-layout {
  --note-width: 100%;

  display: block;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.note-content {
  max-width: var(--note-width);
  margin: 0 auto;
}

.note-content > p:has(> img:only-child) {
  text-align: center;
}

.note-header {
  margin-bottom: 2.5rem;
}

.post-eyebrow a {
  color: inherit;
}

.post-eyebrow a:hover {
  color: var(--accent);
}

.note-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  color: var(--faint);
  font-size: 0.82rem;
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  padding: 0.15rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-family: var(--font-code);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}

.note-outro {
  margin-top: 3rem;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.note-outro p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 0.92rem;
  line-height: 1.6;
}

.note-outro a {
  color: var(--accent);
}

/* ---- image zoom ---------------------------------------------------- */

/* image-zoom.js wraps each post image in this button at runtime. It has to
   look like nothing so the image sits exactly where it did before. */
.zoom-trigger {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.zoom-trigger img {
  display: block;
}

/* Locking the page behind the overlay, so a scroll gesture moves the zoomed
   image and not the article underneath it. */
html.lightbox-open {
  overflow: hidden;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  background: rgba(0, 0, 0, 0.92);
}

.lightbox[hidden] {
  display: none;
}

.lightbox-stage {
  display: flex;
  flex: 1;
  padding: 1.5rem;
  overflow: auto;
  cursor: zoom-in;
}

/* margin:auto rather than justify-content, which would cut off the left edge
   of an image wider than the stage instead of letting it scroll. */
.lightbox-stage img {
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

.lightbox.is-actual .lightbox-stage,
.lightbox.is-actual .lightbox-stage img {
  cursor: zoom-out;
}

.lightbox.is-actual .lightbox-stage img {
  max-width: none;
  max-height: none;
}

.lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-family: var(--font-main);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---- quoted post --------------------------------------------------- */

/* Mount point for the X widget, written by the renderer from a standalone
   status link. The widget is injected into this element by tweet-embed.js and
   caps itself at 550px, so the container only has to centre it. */
.tweet-embed {
  display: flex;
  justify-content: center;
  margin: 1.8rem 0;
}

/* The embedded document is a JS app that paints its own card, so in the
   corners the card's radius leaves uncovered, what shows through is the
   browser's default iframe canvas rather than anything X drew.

   color-scheme decides what that canvas is: white by default, which is what
   put white corners on a dark page. Switching it to dark turns them a dark
   grey instead, closer but still not the card's own black, so the radius below
   has to clip them away completely.

   16px is X's xLarge token. Their radius scale in the embed bundle is
   none/xSmall/small/medium/large/xLarge = 0/2/4/8/12/16, and 12px still left a
   visible edge, so 16 is the next and last stop. Clipping slightly too much
   would only shave the card's own corner, which is invisible against a dark
   page; clipping too little is what shows. */
.tweet-embed iframe {
  border-radius: 16px;
  color-scheme: light;
}

html[data-theme="dark"] .tweet-embed iframe {
  color-scheme: dark;
}

/* The link that ships in the HTML. It stays until the widget confirms it
   rendered, which is what the reader sees if the script never runs. */
.tweet-fallback {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--faint);
  font-family: var(--font-main);
  font-size: 0.82rem;
  text-decoration: none;
}

.tweet-fallback:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.tweet-embed.is-loaded .tweet-fallback {
  display: none;
}

.tweet-mark {
  flex: none;
}

/* ---- series blurb -------------------------------------------------- */

/* The opening hook of a series blurb, set on its own line above the summary.
   A block span rather than a <br> so the gap is tunable here, and rather than
   a nested <p> because the blurb renders inside one. */
.blurb-hook {
  display: block;
  margin-bottom: 0.7rem;
}

/* ---- home-page "Latest" panel -------------------------------------- */

/* It sits beside the series panel in a stretched grid row, so the entry list
   is allowed to grow and the "All stories" link settles into the bottom-right
   corner rather than floating under a short list. */
.notes-latest {
  display: flex;
  flex-direction: column;
}

.notes-latest .note-list {
  flex-grow: 1;
}

.notes-latest .text-link {
  align-self: flex-end;
}

/* ---- series landing ------------------------------------------------ */

.series-hero,
.series-list {
  margin-bottom: 1.5rem;
  padding: 2rem;
}

/* Match .about-intro: the first panel on a page needs the same breathing room
   below the sticky header that the about page gives its intro block. */
.series-hero {
  margin-top: 1.5rem;
}

.series-hero .section-title h2 {
  color: var(--accent);
}

/* The intro runs the full width of the hero panel rather than being capped at
   a reading measure, so a longer introduction fills the block instead of
   leaving the right half empty. */
.series-lead {
  color: var(--muted);
}

.series-lead p {
  margin-bottom: 1.1rem;
}

.series-lead p:last-child {
  margin-bottom: 0;
}

.series-lead a {
  color: var(--accent);
}

/* ---- entry lists (series page, blog index, home panel) ------------- */

.note-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.note-list li + li {
  border-top: 1px solid var(--border);
}

.note-list a {
  display: block;
  padding: 1rem 0.85rem;
  border-radius: 6px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.note-list a:hover {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent-edge);
}

.note-list-label {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--accent);
  font-family: var(--font-code);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.note-list strong {
  display: block;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}

.note-list-summary {
  display: block;
  margin-top: 0.35rem;
  color: var(--muted);
  font-family: var(--font-text);
  font-size: 0.9rem;
  line-height: 1.55;
}

.note-list time {
  display: block;
  margin-top: 0.45rem;
  color: var(--faint);
  font-family: var(--font-code);
  font-size: 0.72rem;
}

.note-list-compact a {
  padding: 0.75rem 0.85rem;
}

.note-list-compact time {
  margin-top: 0.3rem;
}

@media (max-width: 860px) {
  .series-hero,
  .series-list {
    padding: 1.5rem;
  }

  .note-layout {
    padding: 1.5rem 1rem 3rem;
  }
}