/* =============================================================================
   Detail pages — /projects/{key} and /news/{key}.

   Loaded AFTER site.css and depends on it: --void, --mist, --accent, .display,
   .lede, .micro and .btn all come from there, so a change to the site's type
   scale or palette reaches these pages without being restated.

   Every class here is prefixed d- or scoped under .detail-page. site.css is
   one flat unscoped file and already owns bare names like .card and .rail;
   these pages must not add more.
   ========================================================================== */

/* The shell — background, grid, min-height, column — moved to page.css's .pg,
   which every standalone page now carries. Detail pages have both classes;
   this file is only about what is inside the article. */

/* --- bar ------------------------------------------------------------------ */

.dbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px;
    padding: 16px var(--gutter);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 10;
    background: color-mix(in srgb, var(--void) 86%, transparent);
    backdrop-filter: blur(10px);
}
.dbar__home { display: flex; align-items: center; gap: 10px; }
.dbar__home b { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; }
.dbar__back { font-size: 13px; color: var(--mist-3, rgba(242,242,243,.55)); }
.dbar__back:hover { color: var(--mist); }

/* --- body ----------------------------------------------------------------- */

.detail {
    flex: 1;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 56px var(--gutter) 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 56px;
    align-items: start;
}

/* A measure, not the full width. Long-form prose at 1440px is unreadable. */
.detail__body { max-width: 68ch; }

.detail__eyebrow { margin: 0 0 14px; opacity: 0.72; }
.detail__body h1 { margin: 0 0 18px; }

.detail__chips {
    margin: 0 0 26px;
    font-size: 13px;
    color: var(--accent-hi, #5b8def);
}

.detail__figure { margin: 0 0 32px; }
.detail__figure img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-card, 18px);
}

.detail__p { margin: 0 0 20px; }
.detail__p:last-child { margin-bottom: 0; }

/* --- more ----------------------------------------------------------------- */

.detail__more h2 {
    margin: 0 0 14px;
    opacity: 0.6;
}
.detail__more ul { list-style: none; margin: 0; padding: 0; }
.detail__more li { border-top: 1px solid var(--line); }
.detail__more a { display: block; padding: 14px 0; }
.detail__more b {
    display: block; margin-bottom: 3px;
    font-size: 13.5px; font-weight: 500;
}
.detail__more span { font-size: 11.5px; opacity: 0.5; }
.detail__more a:hover b { color: var(--accent-hi, #5b8def); }

/* The way out to the full archive. Deliberately not styled as one of the
   suggestion rows above — it is a different kind of destination, and it is
   rendered even when there are no suggestions at all. */
.detail__all {
    display: inline-block;
    margin-top: 22px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-hi, #5b8def);
}
.detail__all:hover { color: var(--mist); }

/* --- foot ----------------------------------------------------------------- */

.dfoot {
    display: flex; gap: 24px;
    padding: 22px var(--gutter);
    border-top: 1px solid var(--line);
    font-size: 13px;
}
.dfoot a { opacity: 0.6; }
.dfoot a:hover { opacity: 1; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
    .detail {
        grid-template-columns: 1fr;
        gap: 40px;
        padding-top: 36px;
    }
    .detail__more { border-top: 1px solid var(--line); padding-top: 24px; }
}

/* --- block layouts -------------------------------------------------------- */

/* Each block picks its own width. The article is a measure (68ch) by default;
   these opt individual blocks out of it, which is what makes a wide image
   possible without the prose losing its line length. */

.detail__body > .is-wide {
  /* Breaks out of the measure, up to the column the article sits in. */
  width: 100%;
  max-width: none;
}

.detail__body > .is-inset {
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
}

.detail__h2 {
  margin: 38px 0 14px;
}
.detail__h2:first-child { margin-top: 0; }

.detail__figure figcaption {
  margin-top: 9px;
  opacity: 0.6;
}

.detail__quote {
  margin: 28px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
}
.detail__quote p {
  margin: 0 0 8px;
  font-size: 1.06em;
}
.detail__quote cite { font-style: normal; opacity: 0.6; }

/* Image beside text. Only meaningful when a figure is followed by prose, so
   it is a float rather than a grid — a grid would need the two blocks to be
   siblings inside one wrapper, and blocks are a flat list by design. */
@media (min-width: 760px) {
  .detail__body > .is-side-left {
    float: left;
    width: 46%;
    margin: 6px 26px 18px 0;
  }
  .detail__body > .is-side-right {
    float: right;
    width: 46%;
    margin: 6px 0 18px 26px;
  }
  /* Stop the float leaking past the article. */
  .detail__body::after { content: ""; display: block; clear: both; }
}

/* --- rich text bodies ------------------------------------------------------ */

/* Elements the editor can now produce. Without these the rendered HTML falls
   back to browser defaults — serif headings, blue underlined links, tight
   list indents — which is what "jumbled" looks like. */

.detail__rich > :first-child { margin-top: 0; }
.detail__rich > :last-child { margin-bottom: 0; }

.detail__rich p { margin: 0 0 20px; }

.detail__rich h2,
.detail__rich h3 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--mist);
  margin: 38px 0 14px;
}
.detail__rich h2 { font-size: clamp(21px, 2.4vw, 27px); }
.detail__rich h3 { font-size: clamp(17px, 1.9vw, 21px); }

.detail__rich ul,
.detail__rich ol { margin: 0 0 20px; padding-left: 1.35em; }
.detail__rich li { margin-bottom: 8px; }
.detail__rich li::marker { color: var(--accent-hi); }

.detail__rich a {
  color: var(--accent-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.detail__rich a:hover { color: var(--mist); }

.detail__rich strong { font-weight: 600; color: var(--mist); }
.detail__rich em { font-style: italic; }

.detail__rich blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--accent);
}

.detail__rich code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--glass);
}

/* Quill's alignment helpers, which the sanitiser deliberately preserves. */
.detail__rich .ql-align-center { text-align: center; }
.detail__rich .ql-align-right { text-align: right; }
.detail__rich .ql-align-justify { text-align: justify; }

/* --- breadcrumb ------------------------------------------------------------ */

.crumbs { margin: 0 0 22px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12.5px;
}
.crumbs li { display: flex; align-items: center; gap: 8px; color: var(--mist-3, rgba(242,242,243,.55)); }

/* The separator is generated, not typed into the markup — a literal "/" in the
   HTML would be read aloud by a screen reader between every crumb. */
.crumbs li + li::before {
  content: "/";
  opacity: 0.35;
}

.crumbs a { color: var(--mist-3, rgba(242,242,243,.55)); }
.crumbs a:hover { color: var(--accent-hi); }

/* The current page: not a link, and truncated so a long title cannot push the
   trail onto three lines. */
.crumbs [aria-current="page"] {
  color: var(--mist);
  max-width: 42ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- the dock is fixed, so the page needs headroom ------------------------- */

/* .dock sits at top: 20px with a ~54px control height. Without this the
   breadcrumb starts underneath it. */
.detail-page .detail { padding-top: 124px; }

@media (max-width: 900px) {
  .detail-page .detail { padding-top: 104px; }
}

/* The reveal moved to page.css, where it is shared with the four other
   standalone pages — and where the reduced-motion case became a plain
   cross-fade rather than nothing at all. See the comment there. */