/* An article in the homepage's plain style: parchment, ink, Gilda Display.
   Loaded after /styles.css. It swaps the palette and the type and flattens the
   page to one column; the article's figure and table components are untouched. */

html.plain {
  --sans: "Gilda Display", Georgia, "Times New Roman", serif;
  --mono: var(--sans);
  --code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --readw: 41rem;
  --radius: 3px;
  --radius-sm: 2px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  font-size: 112.5%;
  /* Gilda Display has one weight and no italic. A slanted italic reads well;
     a synthesized bold does not, so emphasis is drawn with a stroke below. */
  font-synthesis: style;
}
html.plain,
html.plain[data-theme="light"] {
  --bg: #f2e8d5;
  --bg-tint: #ebe0c9;
  --surface: #f7f0e1;
  --surface-2: #eee3cd;
  --text: #2b2319;
  --text-soft: #3f3528;
  --muted: #75674f;
  --faint: #a39679;
  --border: #d9cbae;
  --border-2: #c7b792;
  --accent: #2b2319;
  --accent-2: #2b2319;
  --accent-soft: rgb(43 35 25 / 0.07);
  --accent-line: rgb(43 35 25 / 0.4);
  --on-accent: #f2e8d5;
  --code-bg: #ebe0c9;
}
html.plain[data-theme="dark"] {
  --bg: #1c1813;
  --bg-tint: #231e17;
  --surface: #26211a;
  --surface-2: #2d271f;
  --text: #e9dfc9;
  --text-soft: #d8ceb8;
  --muted: #a39679;
  --faint: #75674f;
  --border: #3d3529;
  --border-2: #53493a;
  --accent: #e9dfc9;
  --accent-2: #e9dfc9;
  --accent-soft: rgb(233 223 201 / 0.08);
  --accent-line: rgb(233 223 201 / 0.42);
  --on-accent: #1c1813;
  --code-bg: #231e17;
}

html.plain body { transition: none; }
html.plain ::selection { background: var(--text); color: var(--bg); }
html.plain h1, html.plain h2, html.plain h3, html.plain h4 { font-weight: 400; letter-spacing: 0; }
html.plain strong, html.plain b, html.plain th {
  font-weight: 400;
  -webkit-text-stroke: 0.035em currentColor;
}
html.plain sup { line-height: 0; }
html.plain a:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }

/* One centered column. */
html.plain .article-main {
  box-sizing: border-box;
  max-width: calc(var(--readw) + 2.7rem);
  margin: 0 auto;
  padding: 3.5rem 1.35rem 4.5rem;
}
html.plain .back-link { font-size: 0.95rem; margin-bottom: 2rem; }
html.plain .back-link:hover { color: var(--text); gap: 0.4rem; }

html.plain .article-head { margin-bottom: 1.6rem; }
html.plain .article-head h1 { font-size: 2.1rem; line-height: 1.2; margin: 0 0 0.9rem; max-width: none; }
html.plain .article-meta { font-size: 0.95rem; }
html.plain .article-after-title { font-size: 1rem; line-height: 1.6; color: var(--text); }
html.plain .article-after-title small { color: var(--muted); font-size: 0.88em; }

html.plain .style-note { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 2.2rem; }
/* Links are underlined as on the homepage. The underline is a text decoration,
   so a hover thickens the same line and never moves the text around it. */
html.plain .style-note a,
html.plain .article-after-title a,
html.plain .article-abstract__body a,
html.plain .prose a {
  color: inherit; border-bottom: 0;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
  text-decoration-color: var(--accent-line);
}
html.plain .style-note a:hover,
html.plain .article-after-title a:hover,
html.plain .article-abstract__body a:hover,
html.plain .prose a:hover { text-decoration-color: currentColor; text-decoration-thickness: 2px; }

/* Abstract and contents share one quiet label. */
html.plain .article-abstract { margin: 0 0 1.8rem; padding: 1.3rem 0 1.4rem; }
html.plain .article-abstract__label,
html.plain .contents__label {
  display: block; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.6rem;
}
html.plain .article-abstract__label::before { content: none; }
html.plain .article-abstract__body {
  font-family: var(--sans); font-style: normal; font-size: 1.02rem; line-height: 1.65;
  color: var(--text); max-width: none;
}
html.plain .article-abstract__body strong { font-style: normal; }

/* The contents list each section by its full heading. A heading that wraps is set
   with tight leading and the entries stand apart, so it still reads as one entry. */
html.plain .contents { margin: 0 0 2.6rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
html.plain .toc { border: 0; padding: 0; list-style: none; counter-reset: section; }
html.plain .toc li { counter-increment: section; display: flex; gap: 0.75rem; align-items: baseline; padding: 0.24rem 0; }
html.plain .toc li::before { content: counter(section, decimal-leading-zero); color: var(--muted); font-size: 0.85rem; }
html.plain .toc li a {
  display: inline; margin: 0; padding: 0; border: 0; font-size: 1rem; line-height: 1.4;
  color: var(--text); font-weight: 400; text-wrap: pretty;
}
html.plain .toc li a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* Running text. */
html.plain .prose { font-size: 1.04rem; line-height: 1.66; color: var(--text); }
html.plain .prose h2 { font-size: 1.62rem; line-height: 1.25; margin-top: 2.5em; margin-bottom: 0.2em; scroll-margin-top: 1.5rem; }
html.plain .prose h2 .hn { font-size: 0.72em; color: var(--muted); font-weight: 400; margin-right: 0.75rem; }
html.plain .prose h3 { font-size: 1.26rem; line-height: 1.3; scroll-margin-top: 1.5rem; }
html.plain .prose li::marker { color: var(--muted); }
html.plain .prose blockquote { background: none; border-left: 2px solid var(--border-2); border-radius: 0; }
html.plain .prose figcaption { font-size: 0.86rem; line-height: 1.55; }
html.plain .prose [id] { scroll-margin-top: 1.5rem; }

/* Code keeps a real monospace, in ink only. */
html.plain .prose pre, html.plain .prose pre code, html.plain .prose :not(pre) > code { font-family: var(--code); }
html.plain .prose pre { font-size: 0.78rem; }
html.plain .prose :not(pre) > code { color: var(--text); font-size: 0.8em; }
html.plain .prose pre code span { color: inherit; font-style: normal; }

html.plain .article-foot { display: block; margin-top: 3.5rem; padding-top: 1.6rem; }
html.plain .article-foot .back-link { margin-bottom: 0; }

/* With room beside the column, the contents leave the page and stand in the left
   margin, starting level with the title. They are set at about three quarters of the
   running text. The section being read is drawn in ink, behind a short rule. */
@media screen and (min-width: 80em) and (min-height: 36em) {
  html.plain .contents {
    position: fixed; top: 7.5rem; right: calc(50% + var(--readw) / 2 + 2.75rem);
    width: min(15.5rem, calc(50% - var(--readw) / 2 - 4.25rem));
    max-height: calc(100vh - 9.5rem); overflow-y: auto; scrollbar-width: none;
    margin: 0; padding: 0; border: 0;
  }
  html.plain .contents__label { display: none; }
  html.plain .toc li { display: block; padding: 0; }
  html.plain .toc li::before { content: none; }
  html.plain .toc li a {
    display: block; position: relative; padding: 0.5rem 0 0.5rem 1.45rem;
    font-size: 0.8rem; line-height: 1.35; color: var(--muted); text-wrap: balance;
    transition: color 0.25s ease;
  }
  html.plain .toc li a::before {
    content: ""; position: absolute; left: 0; top: calc(0.5rem + 0.675em); width: 0.95rem; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left center;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  html.plain .toc li a:hover { color: var(--text); text-decoration: none; }
  html.plain .toc li a.active { color: var(--text); }
  html.plain .toc li a.active::before { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  html.plain .toc li a, html.plain .toc li a::before { transition: none; }
}

/* The gallery: a wall of square plates. Selecting one opens it beside its prompt. */
html.plain .plates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.55rem; }
html.plain .plate { display: block; cursor: zoom-in; border-radius: var(--radius-sm); }
html.plain .plate img {
  display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--radius-sm); background: var(--bg-tint); transition: opacity 0.2s ease;
}
html.plain .plate:hover img { opacity: 0.86; }

html.plain .viewer {
  box-sizing: border-box; width: min(60rem, calc(100vw - 2rem)); max-width: none; max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; overflow: auto;
  background: var(--bg); color: var(--text); border: 1px solid var(--border-2); border-radius: var(--radius);
}
html.plain .viewer::backdrop { background: rgb(20 16 11 / 0.62); }
html.plain .viewer__sheet { display: grid; grid-template-columns: minmax(0, 512px) minmax(0, 1fr); outline: 0; }
html.plain .viewer__image { display: block; width: 100%; height: auto; aspect-ratio: 1; background: var(--bg-tint); }
html.plain .viewer__text { display: flex; flex-direction: column; min-height: 0; padding: 1.5rem 1.7rem 1.6rem; }
html.plain .viewer__nav {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1.1rem;
  margin-bottom: 1.6rem; font-size: 0.86rem; color: var(--muted);
}
html.plain .viewer__nav button {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer;
}
html.plain .viewer__nav button:hover { color: var(--text); }
html.plain .viewer__nav button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 2px; }
html.plain .viewer__count { font-variant-numeric: tabular-nums; }
html.plain .viewer__close { margin-left: auto !important; }
html.plain .viewer__label { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem; }
html.plain .viewer__prompt { margin: 0; font-size: 1rem; line-height: 1.62; overflow-wrap: anywhere; }
@media (max-width: 52rem) {
  html.plain .viewer { width: min(512px, calc(100vw - 2rem)); }
  html.plain .viewer__sheet { grid-template-columns: minmax(0, 1fr); }
  html.plain .viewer__text { padding: 1.1rem 1.2rem 1.3rem; }
  html.plain .viewer__nav { margin-bottom: 1.1rem; }
}

/* On phones the figure and table components keep their original scale, which is
   already fitted to a narrow screen; only the running text is enlarged. */
@media (max-width: 40rem) {
  html.plain { font-size: 100%; }
  html.plain .article-main { padding: 2.5rem 1.15rem 3.5rem; }
  html.plain .article-head h1 { font-size: 1.9rem; }
  html.plain .article-after-title, html.plain .toc li a { font-size: 1.06rem; }
  html.plain .article-abstract__body { font-size: 1.08rem; }
  html.plain .prose { font-size: 1.1rem; }
  html.plain .prose figcaption { font-size: 0.9rem; }
  html.plain .plates { grid-template-columns: repeat(2, 1fr); }
}