/* ====================================================================
   Article reading layer.

   Overrides scoped to article#article so nothing here reaches the home
   page or the other layouts. Loaded after post.css.
   ==================================================================== */

/* 1. Left-aligned, not justified.
   The browser justifies without hyphenating, so it can only stretch the
   word spaces, which is what produced the rivers of white running down
   the old paragraphs. Ragged right is the honest option in CSS. */
article#article p,
article#article ul,
article#article ol,
article#article dl {
  text-align: left;
  hyphens: none;
}

/* 4. Measure.
   The column was 840px at 1.05rem, around 100 characters per line.
   Comfortable continuous reading is 60 to 75, so prose is capped at 700
   and centred, while figures and tables keep the full 840 and bleed past
   the text. The width difference is doing work: it separates the argument
   from the illustration of it. */
article#article p,
article#article ul,
article#article ol,
article#article dl,
article#article blockquote,
article#article h1,
article#article h2,
article#article h3,
article#article h4 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

article#article .fig,
article#article .project-img,
article#article table {
  max-width: 840px;
}

/* Headings group with the text they introduce: more space above than
   below, so a section reads as one block rather than as a floating label. */
article#article h2 {
  margin-top: 3rem;
  margin-bottom: 0.75rem;
}

article#article h3 {
  margin-top: 2.25rem;
  margin-bottom: 0.6rem;
}

/* 2 and 3. The title lives in the cover image, so the DOM title is present
   for semantics and search but not painted twice. Posts without a cover
   still show it, since there is nothing else carrying it. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

article#article h1.article-title {
  font-size: 2rem;
  line-height: 1.2;
  margin: 1.5rem auto 0.5rem;
}

/* 5. The description is a lede, not a callout.
   It used to sit in a bordered box in italic, which gave it more weight
   than the article body and left the reader unsure which was the text.
   Now it reads as a first paragraph with slightly more air, and the date
   sits above it next to the title rather than between it and the body. */
article#article .article-meta {
  max-width: 700px;
  margin: 1.25rem auto 0;
  font-family: "Fira Code", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary-text-color, #768c99);
  text-align: left;
}

article#article .article-lede {
  max-width: 700px;
  margin: 0.75rem auto 2.5rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--secondary-color);
  text-align: left;
  background: none;
  border: none;
  padding: 0;
  font-style: normal;
}

@media screen and (max-width: 760px) {
  article#article p,
  article#article ul,
  article#article ol,
  article#article h1,
  article#article h2,
  article#article h3,
  article#article .article-lede,
  article#article .article-meta {
    max-width: 100%;
  }
}

/* ====================================================================
   The panel.

   The article reuses .details-container, the home page card. That card is
   a small unit you take in at a glance: 1.5rem of side padding and a 10%
   shadow read fine at that size. Stretched down three thousand pixels of
   prose it stops working, because you never see two edges at once, so the
   frame does no framing and only the padding is felt.

   So the article panel gets its own proportions: more air, a rounder
   corner to match its size, and a shadow with enough spread to still lift
   the panel off the page when no edge is in view.
   ==================================================================== */

/* The vocabulary comes from the home page cards (portfolio_css/sections/
   stack.css): these are glass, not flat fills. Four parts do the work, and
   dropping any one of them makes the surface read as a plain rectangle:

     1. a diagonal sheen, white at the top-left corner, gone by 45%
     2. a semi-transparent ground via color-mix, so the page shows through
     3. backdrop-filter blur with saturation, which is what makes it glass
        rather than a translucent sheet
     4. an inset highlight along the top edge, the lit rim

   Sheen and rim strength drop in dark mode, where a white overlay at light
   values would blow out instead of catching light. */
body {
  --sheen-strength: 0.35;
  --inset-strength: 0.5;
}

body[theme="dark"] {
  --sheen-strength: 0.06;
  --inset-strength: 0.07;
}

article#article .details-container {
  position: relative;
  padding: 3.5rem 2.5rem 4rem;
  border-radius: 2.5rem;
  margin-bottom: 4rem;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, var(--sheen-strength, 0.35)),
      rgba(255, 255, 255, 0) 45%),
    color-mix(in srgb, var(--primary-color-2) 68%, transparent);
  backdrop-filter: blur(14px) saturate(1.35);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid var(--container-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, var(--inset-strength, 0.5)),
    0 4px 24px rgba(0, 0, 0, 0.08);
}

/* Figures and tables are the nested blocks, the same relationship the home
   card has with its subblocks: same material, one step quieter, so they
   read as sitting inside the panel rather than beside it.

   A figure keeps its opaque light plate underneath, because the SVG ink is
   fixed dark and needs a light ground in both themes. The sheen and the rim
   go on top of that plate. */
article#article .fig {
  position: relative;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, var(--sheen-strength, 0.35)),
      rgba(255, 255, 255, 0) 45%),
    var(--fig-plate, #f2f0e9);
  border: 1px solid var(--container-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--inset-strength, 0.5) * 0.7)),
    0 2px 12px rgba(0, 0, 0, 0.06);
}

article#article table {
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, calc(var(--sheen-strength, 0.35) * 0.6)),
      rgba(255, 255, 255, 0) 45%),
    color-mix(in srgb, var(--tbl-panel) 82%, transparent);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, calc(var(--inset-strength, 0.5) * 0.6)),
    0 2px 12px rgba(0, 0, 0, 0.05);
}

/* The cover sits at the top of the panel, so it needs to breathe against
   the corner rather than press into it. */
article#article .project-img {
  margin-bottom: 2rem;
}

/* The panel is generous at desktop width and would waste the screen on a
   phone, where the frame is invisible anyway. */
@media screen and (max-width: 760px) {
  article#article .details-container {
    padding: 1.75rem 1.25rem 2.5rem;
    border-radius: 1.5rem;
  }
}