/* Article pages (vision §E16): legacy posts from blog/*.html, wrapped in the site at the edge by
   functions/blog/_middleware.js. The post's own markup is never edited, so everything here styles
   plain HTML (p, h2–h4, lists, tables, figures, links) plus the few classes the posts carry
   (.pro-tip, .checklist-item, .cta-section, .cta-box, .key-takeaways, …).

   Reading: Fraunces roman 19/1.65 (--article) at 66ch, set right of centre; the eyebrow and the H1
   at --step-5 start at the page margin and overhang the text's axis, on which the hero, the figures
   and the text all hang (vision §B3 asymmetry). The first painting in the post is hung as the hero
   under the CSS lamp; later paintings are linked figures with museum labels; "Paintings in this
   article" closes the piece. */
/* Fallbacks for the H1 (see .post__title): Georgia scaled to Fraunces' width at --step-5, one face per
   viewport band because Fraunces narrows as its optical size grows with the fluid size (measured
   against the self-hosted Fraunces at weight 360: 0.96 of the text-size fallback at 47 px, 0.81 at
   96 px). Ascent/descent keep Fraunces Fallback's absolute metrics (fonts.css). */
@font-face {
  font-family: "Fraunces Display Fallback 1";
  font-style: normal;
  src: local("Georgia"), local("Gelasio");
  size-adjust: 99.7%;
  ascent-override: 98.09%;
  descent-override: 25.58%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Display Fallback 2";
  font-style: normal;
  src: local("Georgia"), local("Gelasio");
  size-adjust: 96.9%;
  ascent-override: 100.93%;
  descent-override: 26.32%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Display Fallback 3";
  font-style: normal;
  src: local("Georgia"), local("Gelasio");
  size-adjust: 94.1%;
  ascent-override: 103.93%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Display Fallback 4";
  font-style: normal;
  src: local("Georgia"), local("Gelasio");
  size-adjust: 91.4%;
  ascent-override: 107.0%;
  descent-override: 27.9%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Display Fallback 5";
  font-style: normal;
  src: local("Georgia"), local("Gelasio");
  size-adjust: 88.6%;
  ascent-override: 110.38%;
  descent-override: 28.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Fraunces Display Fallback 6";
  font-style: normal;
  src: local("Georgia"), local("Gelasio");
  size-adjust: 85.8%;
  ascent-override: 113.99%;
  descent-override: 29.72%;
  line-gap-override: 0%;
}
@layer pages {
  .post {
    display: block;
    padding-block-start: clamp(var(--space-6), 5vw, var(--space-8));
  }

  /* ------------------------------------------------------------------------- the reading grid */
  /* Tracks: margin | wide space | the measure | a narrower space | margin. The measure is filled
     first, the two flexible tracks share what is left 1 : 0.6. Fraunces' figures are wide, so 66ch
     of it holds about 85 characters of running text; 35em keeps lines near the 66–70 characters the
     measure stands for. */
  .legacy-post__body {
    display: grid;
    grid-template-columns:
      [full-start] var(--margin)
      [wide-start] minmax(0, 1fr)
      [text-start] minmax(0, min(var(--measure-article), 35em))
      [text-end] minmax(0, 0.6fr)
      [wide-end] var(--margin)
      [full-end];
    max-inline-size: calc(var(--content-max) + 2 * var(--margin));
    margin-inline: auto;
    font-family: var(--font-display);
    font-size: var(--article);
    font-weight: 380;
    line-height: 1.65;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-optical-sizing: auto;
    color: var(--ink);
    hanging-punctuation: first allow-end last;
  }
  /* The hero's lamp pool reaches well past the painting; on narrow screens it is clipped here, at the
     viewport's edges, as well as by the body (WebKit measures painted overflow for full-page captures). */
  @media (max-width: 1023.98px) {
    .legacy-post__body, .post-art { overflow-x: clip; }
  }
  /* Grid items never collapse margins, so the rhythm only ever uses the space above an item. */
  .legacy-post__body > * {
    grid-column: text;
    min-inline-size: 0;
    margin: 0;
  }
  .legacy-post__body > * + * { margin-block-start: 1.05em; }
  .legacy-post__body > p:empty,
  .legacy-post__body > br { display: none; }

  /* ------------------------------------------------------------------------------- the head */
  .legacy-post__body > :is(.post__eyebrow, .post__title, .post__meta, .post__notes) { grid-column: wide; }
  /* The hero hangs on the text's axis (the H1 overhangs it to the left), wider than the measure. */
  .legacy-post__body > .post__hero { grid-column: text-start / wide-end; }

  .post__eyebrow { font-family: var(--font-ui); }
  .post__eyebrow a {
    display: inline-flex;
    align-items: center;
    min-block-size: 24px;
    color: inherit;
    text-decoration: none;
  }
  .post__eyebrow a:is(:hover, :focus-visible) { color: var(--ink); }

  /* No layout shift when Fraunces arrives (CLS): "Fraunces Fallback" (fonts.css) is matched to the
     text sizes, where Fraunces' optical size is wide; at the H1's display size it is narrower, so the
     fallback would wrap the title onto an extra line and push the hero down ~one line on swap. This
     H1 falls back to Georgia scaled to Fraunces' display width (the faces above, picked per band
     below), and the measure is in em, not ch (a ch of Georgia is not a ch of Fraunces). The page also
     preloads fraunces-roman.woff2 (functions/blog/_middleware.js), so the swap is usually before paint. */
  .legacy-post__body > .post__title {
    margin-block-start: var(--space-4);
    --title-fallback: "Fraunces Display Fallback 1";
    max-inline-size: 12.3em;
    font-family: "Fraunces", var(--title-fallback), Georgia, serif;
    font-size: var(--step-5);
    font-weight: 360;
    line-height: 0.98;
    letter-spacing: -0.015em;
    text-wrap: balance;
  }
  @media (min-width: 540px) { .legacy-post__body > .post__title { --title-fallback: "Fraunces Display Fallback 2"; } }
  @media (min-width: 720px) { .legacy-post__body > .post__title { --title-fallback: "Fraunces Display Fallback 3"; } }
  @media (min-width: 900px) { .legacy-post__body > .post__title { --title-fallback: "Fraunces Display Fallback 4"; } }
  @media (min-width: 1080px) { .legacy-post__body > .post__title { --title-fallback: "Fraunces Display Fallback 5"; } }
  @media (min-width: 1260px) { .legacy-post__body > .post__title { --title-fallback: "Fraunces Display Fallback 6"; } }

  .legacy-post__body > .post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-block-start: var(--space-5);
    font: 450 var(--step--2)/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
  }
  .post__meta > * + *::before {
    content: "·";
    margin-inline-end: var(--space-3);
  }
  /* Without a hero, the text still starts a clear step below the head. */
  .legacy-post__body > :is(.post__meta, .post__notes) + :not(.post__notes, .post__hero) { margin-block-start: clamp(var(--space-7), 5vw, var(--space-8)); }
  .legacy-post__body > .post__notes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
    line-height: 1.2;
  }

  /* --------------------------------------------------------------- the hero: the first painting */
  .legacy-post__body > .post__hero {
    margin-block: clamp(var(--space-7), 6vw, var(--space-9)) clamp(var(--space-6), 4vw, var(--space-7));
  }
  /* The link is the hang (components/hang.css: the pool and the cast shadow sit on the wall behind
     the painting, never on it) with its museum label in the second row, left-aligned to the canvas.
     Its height is capped so the first lines of the text are never far below. */
  .post__hero-link {
    --hang-max: min(56svh, 480px);
    color: inherit;
    text-decoration: none;
  }
  @media (min-width: 1024px) {
    .post__hero-link { --hang-max: min(64svh, 680px); }
  }
  .post__hero-link > img {
    background-color: var(--dom, var(--sunken));
  }
  .post__hero-label { grid-row: 2; }
  .post__hero-more {
    margin-block-start: var(--space-2);
    font: 600 var(--step--1)/1.4 var(--font-ui);
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: text-decoration-color var(--dur-quick) var(--ease-set);
  }
  .post__hero-more > [aria-hidden="true"] {
    display: inline-block;
    margin-inline-start: 0.35em;
    font-weight: 400;
    transition: translate var(--dur-quick) var(--ease-set);
  }
  .post__hero-link:is(:hover, :focus-visible) .post__hero-more { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
  .post__hero-link:hover .post__hero-more > [aria-hidden="true"] { translate: 0.22em 0; }
  .post__hero-link:focus-visible { outline-offset: 8px; }

  /* ---------------------------------------------------------------------------------- prose */
  .legacy-post__body > h2 {
    margin-block-start: 2.6em;
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 420;
    line-height: 1.12;
    letter-spacing: -0.005em;
    text-wrap: balance;
  }
  .legacy-post__body > h3,
  .legacy-post__body :is(.checklist-item, .artwork-card, .style-card, .era-section, .numbered-section) > h3 {
    margin-block-start: 2em;
    font-family: var(--font-ui);
    font-size: var(--step-1);
    font-weight: 600;
    font-stretch: 92%;
    line-height: 1.25;
    letter-spacing: -0.005em;
  }
  .legacy-post__body h4 {
    margin-block-start: 1.9em;
    font-family: var(--font-ui);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
  }
  .legacy-post__body > :is(h2, h3, h4) + *,
  .legacy-post__body :is(h3, h4) + * { margin-block-start: 0.55em; }
  .legacy-post__body > h2 + :is(h3, h4) { margin-block-start: 1em; }
  /* In-page anchors land below the top edge, not under it. */
  .legacy-post__body :is(h2, h3, h4)[id] { scroll-margin-block-start: var(--space-6); }

  .legacy-post__body p { text-wrap: pretty; }
  .legacy-post__body strong,
  .legacy-post__body b { font-weight: 600; }

  .legacy-post__body :is(ul, ol) { padding-inline-start: 1.35em; }
  .legacy-post__body ul { list-style-type: "–  "; }
  .legacy-post__body li + li { margin-block-start: 0.45em; }
  .legacy-post__body li::marker { color: var(--ink-3); }
  .legacy-post__body ol > li::marker {
    font-family: var(--font-mono);
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    color: var(--ink-2);
  }
  .legacy-post__body li > :is(ul, ol) { margin-block-start: 0.45em; }

  /* The posts' own table of contents: in-page links, set small in two columns on wide screens. */
  .legacy-post__body > h2[id="table-of-contents"] + :is(ul, ol) {
    padding-inline-start: 0;
    list-style: none;
    font-family: var(--font-ui);
    font-size: var(--step--1);
    line-height: 1.45;
  }
  @media (min-width: 760px) {
    .legacy-post__body > h2[id="table-of-contents"] + :is(ul, ol) { columns: 2; column-gap: var(--space-6); }
  }
  .legacy-post__body > h2[id="table-of-contents"] + :is(ul, ol) > li {
    margin: 0;
    padding-block: 0.3em;
    break-inside: avoid;
  }
  .legacy-post__body > h2[id="table-of-contents"] + :is(ul, ol) a { text-decoration-color: color-mix(in oklab, var(--accent) 55%, transparent); }

  .legacy-post__body blockquote {
    position: relative;
    margin-inline: 0;
    padding-inline-start: 1.4em;
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-style: italic;
    line-height: 1.45;
  }
  .legacy-post__body blockquote::before {
    content: "“";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: -0.05em;
    font-size: 1.6em;
    line-height: 1;
    color: var(--ink-3);
  }
  .legacy-post__body hr { margin-block: 2.5em; }
  .legacy-post__body code { font-size: 0.85em; }
  .legacy-post__body pre {
    overflow-x: auto;
    padding: var(--space-4);
    background: var(--sunken);
  }

  /* Asides the posts mark up (tips, takeaways, calls to action): a quiet panel, no border. */
  .legacy-post__body :is(.pro-tip, .display-tip, .view-tip, .warning-box, .significance-box, .key-takeaways, .cta-section, .cta-box) {
    padding: var(--space-4) var(--space-5);
    background: color-mix(in oklab, var(--ink) 4.5%, transparent);
  }
  .legacy-post__body :is(.pro-tip, .display-tip, .view-tip, .warning-box) {
    margin-block: 1.4em 0;
    font-family: var(--font-ui);
    font-size: var(--step--1);
    font-weight: 400;
    line-height: 1.6;
    color: var(--ink-2);
  }
  .legacy-post__body :is(.pro-tip, .display-tip, .view-tip, .warning-box) strong { color: var(--ink); }
  .legacy-post__body :is(.cta-section, .cta-box, .significance-box, .key-takeaways) > * + * { margin-block-start: 0.8em; }
  .legacy-post__body :is(.cta-section, .cta-box) {
    padding: var(--space-6) clamp(var(--space-5), 3vw, var(--space-7));
    text-align: start;
  }
  .legacy-post__body :is(.cta-section, .cta-box) > :is(h2, h3) {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 420;
    font-stretch: 100%;
    line-height: 1.15;
  }
  .legacy-post__body :is(.checklist-item, .artwork-card, .style-card, .era-section, .numbered-section) > * + * { margin-block-start: 1.05em; }
  .legacy-post__body :is(.checklist-item, .artwork-card, .style-card, .era-section, .numbered-section) > :first-child { margin-block-start: 0.6em; }
  .legacy-post__body :is(.artwork-meta, .era-badge, .key-artists) {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--ink-2);
  }

  /* -------------------------------------------------------------------------------- tables */
  .legacy-post__body > .post__table,
  .legacy-post__body > div > .post__table { margin-block-start: 1.6em; }
  .legacy-post__body > div > .post__table:first-child { margin-block-start: 0; }
  .legacy-post__body > .post__table { grid-column: text-start / wide-end; }
  .post__table > .table {
    font-family: var(--font-ui);
    font-size: var(--step--1);
    line-height: 1.5;
    min-inline-size: 36rem;
  }
  .post__table > .table :is(th, td) { vertical-align: top; padding-block: var(--space-3); }
  .post__table > .table thead th { vertical-align: bottom; white-space: normal; }
  .post__table > .table td:first-child { color: var(--ink); }
  .post__table > .table td { color: var(--ink-2); }
  .post__table > .table td strong { color: var(--ink); font-weight: 600; }

  /* ------------------------------------------------------------------------ images in the post */
  /* A paragraph that only holds an image reads as a figure. */
  .legacy-post__body p:has(> :is(img, .post-figure):only-child) { margin-block-start: 2.2em; }
  .legacy-post__body p:has(> :is(img, .post-figure):only-child) + * { margin-block-start: 1.9em; }
  /* Images from elsewhere (stock photos, screenshots): flat, never lit, never upscaled. */
  .post-image {
    display: block;
    inline-size: auto;
    max-inline-size: 100%;
    block-size: auto;
    max-block-size: 70svh;
    background: var(--sunken);
    /* If the image cannot load, its alt text reads as a quiet caption. */
    font: 500 var(--step--1)/1.45 var(--font-ui);
    color: var(--ink-2);
  }
  .post-image--lead {
    inline-size: 100%;
    aspect-ratio: 3 / 2;
    object-fit: contain;
  }
  /* Jamal's paintings in the text: the image and its museum label are one link to the painting. */
  /* Its width comes from the true aspect ratio (--ar) and the source width (--w, never upscaled), so
     the box is reserved before the image loads. */
  .post-figure {
    --fig-max: min(70svh, 600px);
    position: relative;
    display: grid;
    justify-items: start;
    gap: var(--space-3);
    inline-size: min(100%, var(--fig-max) * var(--ar, 1), var(--w, 100%));
    color: inherit;
    text-decoration: none;
    --tile-glow: clamp(36px, 1.25rem + 3.6vw, 80px);
  }
  .post-figure__img {
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: var(--ar, auto);
    background-color: var(--sunken);
    box-shadow: 0 1px 2px var(--hang-contact-color);
  }
  /* The wall pool comes up behind the painting on hover and focus (as on a tile). */
  .post-figure::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    block-size: calc(100% - 3.4em);
    z-index: -1;
    border-radius: 18%;
    box-shadow: 0 calc(var(--tile-glow) * -0.18) calc(var(--tile-glow) * 0.8) calc(var(--tile-glow) * 0.38) var(--pool);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-settle) var(--ease-set);
  }
  .post-figure:is(:hover, :focus-visible)::before { opacity: 1; }
  /* As wide as the painting, so the title's wet copy (data-title) has the room it reserves. */
  .post-figure__label { --label-size: var(--step-0); justify-self: stretch; }
  .post-figure:hover .label__title { text-decoration: underline 1px var(--accent); text-underline-offset: 0.2em; }
  .post-figure:focus-visible { outline-offset: 6px; }

  /* ------------------------------------------------------------ "Paintings in this article" */
  .post-art {
    max-inline-size: calc(var(--content-max) + 2 * var(--margin));
    margin: var(--section) auto 0;
    padding-inline: var(--margin);
  }
  .post-art__head {
    display: grid;
    gap: var(--space-3);
    margin-block-end: clamp(var(--space-6), 3vw, var(--space-7));
  }
  @media (min-width: 1024px) {
    .post-art__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; }
    .post-art__title { grid-column: 1 / span 6; }
    .post-art__lede { grid-column: 7 / span 5; }
    .post-art__note { grid-column: 7 / span 5; }
  }
  .post-art__title {
    font-family: var(--font-display);
    font-size: var(--step-4);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.01em;
  }
  .post-art__lede {
    max-inline-size: 44ch;
    font-size: var(--step-0);
    line-height: 1.55;
    color: var(--ink-2);
  }
  .post-art__lede { text-wrap: pretty; }
  /* Justified rows at true aspect ratios (as in the Paintings grid): each item grows from its
     natural width at the row height; the trailing pseudo-item keeps the last row from stretching. */
  .post-art-list {
    --row-h: 168px;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6) var(--gutter);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 600px) { .post-art-list { --row-h: 210px; } }
  @media (min-width: 1024px) { .post-art-list { --row-h: 250px; } }
  .post-art-list::after { content: ""; flex: 999 1 0; }
  .post-art-list__item {
    flex: var(--ar, 1) 1 calc(var(--ar, 1) * var(--row-h));
    min-inline-size: 0;
    max-inline-size: calc(var(--ar, 1) * var(--row-h) * 1.6);
  }
  .post-art-list__tile { inline-size: 100%; }
  .post-art-list__item--text { flex: 0 1 auto; }
  .post-art-list__text {
    display: grid;
    gap: 3px;
    padding-block: var(--space-2);
    color: inherit;
    text-decoration: none;
  }
  .post-art__more { margin-block-start: clamp(var(--space-6), 3vw, var(--space-7)); }

  /* ----------------------------------------------- back to Articles, and the next article */
  .post-back {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-6) var(--gutter);
    max-inline-size: calc(var(--content-max) + 2 * var(--margin));
    margin-inline: auto;
    padding: clamp(var(--space-7), 6vw, var(--space-9)) var(--margin) var(--section);
  }
  .post-back__next {
    display: grid;
    justify-items: end;
    gap: var(--space-2);
    max-inline-size: 34rem;
    margin-inline-start: auto;
    color: inherit;
    text-align: end;
    text-decoration: none;
  }
  .post-back__kicker {
    font: 600 var(--step--2)/1.3 var(--font-ui);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-2);
  }
  .post-back__title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
    line-height: 1.2;
    text-wrap: balance;
    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: text-decoration-color var(--dur-quick) var(--ease-set);
  }
  .post-back__next:is(:hover, :focus-visible) .post-back__title { text-decoration-color: var(--accent); }
  /* Stacked on phones in reading (and tab) order. */
  @media (max-width: 599.98px) {
    .post-back { flex-direction: column; align-items: flex-start; }
    .post-back__next { justify-items: start; margin-inline-start: 0; text-align: start; }
  }
  .post-back__link {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-block-size: 44px;
    font: 600 var(--step-0)/1.3 var(--font-ui);
    letter-spacing: 0.01em;
    color: var(--ink);
    text-decoration-color: transparent;
    text-underline-offset: 0.3em;
  }
  .post-back__link > [aria-hidden="true"] {
    display: inline-block;
    font-weight: 400;
    transition: translate var(--dur-quick) var(--ease-set);
  }
  .post-back__link:is(:hover, :focus-visible) { text-decoration-color: var(--accent); }
  .post-back__link:hover > [aria-hidden="true"] { translate: -0.22em 0; }

  /* ------------------------------------------------------------------------- display states */
  @media (forced-colors: active) {
    .post-figure::before { content: none; }
    .legacy-post__body :is(.pro-tip, .display-tip, .view-tip, .warning-box, .significance-box, .key-takeaways, .cta-section, .cta-box) { border: 1px solid CanvasText; }
  }
  @media print {
    .post-art, .post-back, .post__notes { display: none; }
    .legacy-post__body { display: block; }
    .legacy-post__body > * { max-inline-size: none; }
  }
}