/* Inklight product page. Builds on ../style.css and overrides it only under body.inklight.
   The look is a plain 1890s trade announcement, a full page in a magazine or a publisher's list:
   one classical face (Charter, as in the app), display lines of varied size centered on the measure,
   small capitals, thin rules and double rules, a ruled border around the whole announcement,
   a price list with dot leaders, one drop initial, and a printer's ornament between the parts.
   The newspaper pass adds a masthead with an invented name, a folio line with volume, date and
   an advertisement label over a thick-and-thin rule, column rules beside the feature rows, the
   short particulars as a two-column table, and the last four sections set in newspaper columns.
   Color comes from the app: warm paper and brown ink by day, dark paper and gold by night. */

body.inklight {
  --paper: #f4eee3;
  --paper-deep: #ece3d3;
  --ink: #2b2420;
  --ink-soft: #5c4f44;
  /* The second ink, for small capitals and the initial: the app's lamp orange, deepened to read as text. */
  --accent: #a4481c;
  /* Ornaments: the app's gold. */
  --orn: #b0802e;
  --rule: color-mix(in srgb, var(--ink) 24%, var(--paper));
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  --fleuron: "Zapf Dingbats", "Apple Symbols", "Segoe UI Symbol", serif;

  /* The site's own tokens, so the header, links and focus rings take the same paper and ink. */
  --bg: var(--paper);
  --fg: var(--ink);
  --muted: var(--ink-soft);
  --line: var(--rule);
  --band: #1f1915;
  /* The sheet itself (goocy, 2026-10-22): watercolour paper by day, slate by night, made by
     Tools/Website/paper_tiles.py; --sheet is each tile's mean, for flat patches laid on it. */
  --sheet: #f2ebde;
  --sheet-tile: url("img/paper-watercolor.jpg");
}

@media (prefers-color-scheme: dark) {
  body.inklight {
    --paper: #1f1915;
    --paper-deep: #29211c;
    --ink: #eadfcd;
    --ink-soft: #bdae98;
    /* At night the second ink is the gold, as in the app, where the gold catches the light. */
    --accent: #d4a44e;
    --orn: #d4a44e;
    --band: #16120f;
    --sheet: #212227;
    --sheet-tile: url("img/paper-slate.jpg");
  }
}

/* The announcement: the whole of main inside a ruled border, thick rule outside and a hairline inside. */

body.inklight main {
  position: relative;
  width: auto;
  margin: clamp(0.6rem, 2.5vw, 2rem) max(clamp(0.5rem, 2.5vw, 2rem), calc((100% - 68rem) / 2)) clamp(1.5rem, 4vw, 3rem);
  padding: 0 clamp(0rem, 1.5vw, 1.5rem) clamp(1.5rem, 4vw, 2.5rem);
  border: 3px solid var(--ink);
  background: var(--sheet) var(--sheet-tile) 0 0 / 402px 874px repeat;
  font-family: var(--serif);
  font-variant-numeric: oldstyle-nums;
  color: var(--ink);
}
body.inklight main::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
/* A tailpiece closes the announcement. */
body.inklight main::after {
  content: "\2766";
  content: "\2766" / "";
  display: block;
  margin-top: 0.5rem;
  text-align: center;
  color: var(--orn);
  font: 2rem/1 var(--fleuron);
}

body.inklight main h1,
body.inklight main h2,
body.inklight main h3 {
  font-family: var(--serif);
  letter-spacing: 0;
  text-wrap: balance;
}

/* The masthead of the periodical: an invented name, then a folio line with volume, date and the
   advertisement label, closed by a thick-and-thin rule. Its words are decoration, not page content:
   generated content with empty alternative text inside an aria-hidden box, so they reach neither
   screen readers nor the Markdown twin, which is built from the text of main. */
body.inklight main > .page { padding-top: 0.9rem; }
.ik-mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "name name name" "vol date label" "rule rule rule";
  align-items: baseline;
  column-gap: 1rem;
  color: var(--ink);
}
.ik-mast-name {
  grid-area: name;
  padding: 0.1rem 0 0.5rem;
  border-bottom: 1px solid var(--ink);
  text-align: center;
  font-size: clamp(1.15rem, 5.1vw, 2.7rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ik-mast-vol,
.ik-mast-date,
.ik-mast-label {
  padding: 0.35rem 0 0.3rem;
  font-size: 1.12rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.ik-mast-vol { grid-area: vol; text-align: left; color: var(--ink-soft); }
.ik-mast-date { grid-area: date; text-align: center; }
.ik-mast-label { grid-area: label; text-align: right; color: var(--ink-soft); }
.ik-mast::after {
  content: "";
  grid-area: rule;
  height: 6px;
  border-top: 3px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.ik-mast-name::before { content: "The Inklight Gazette"; content: "The Inklight Gazette" / ""; }
.ik-mast-vol::before { content: "Vol. I. No. 1."; content: "Vol. I. No. 1." / ""; }
.ik-mast-date::before { content: "Saturday, October 19, 1895."; content: "Saturday, October 19, 1895." / ""; }
.ik-mast-label::before { content: "Advertisement."; content: "Advertisement." / ""; }

/* The breadcrumb becomes the running head of the sheet, under the masthead. */
body.inklight .crumb {
  margin: 0;
  padding: 0.6rem 0 0.7rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.02em;
}
body.inklight .crumb a { text-decoration: none; }
body.inklight .crumb a:hover { color: var(--accent); }

.ik-inner { max-width: 64rem; margin: 0 auto; padding: 0 var(--gutter); }

/* Small capitals between rules: the label device used for the eyebrow and kickers. */
.ik-eyebrow,
.ik-kicker {
  display: flex;
  align-items: center;
  gap: 0.75em;
  color: var(--accent);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.15em;
}
.ik-eyebrow::before,
.ik-eyebrow::after,
.ik-kicker::after {
  content: "";
  flex: 1 1 0;
  border-top: 1px solid var(--rule);
}
/* Brand names (iOS, iPhone) keep their case, so the eyebrow is set in italic rather than small capitals. */
.ik-eyebrow { font-size: 1.15rem; font-style: italic; letter-spacing: 0.02em; }
.ik-kicker { font-variant-caps: all-small-caps; font-size: 1.12rem; }

/* The head of the announcement, its parts spaced a little apart (goocy, 2026-11-03: "a little more whitespace
   between the top few content elements"). */

.ik-hero { text-align: center; padding: clamp(1.75rem, 5vw, 3rem) 0 clamp(2rem, 5vw, 3rem); }
.ik-hero .ik-icon { display: block; margin: 0 auto; width: 88px; height: 88px; border-radius: 20px; }
/* "Apple Watch" is held together by .ik-nowrap (Charter's italic no-break space is twice a space's width),
   inside one span so the flex line keeps a single text item between its rules; balanced, the lines come out even. */
.ik-eyebrow { max-width: 22rem; margin: 1.6rem auto 1rem; text-wrap: balance; }
.ik-nowrap { white-space: nowrap; }

.ik-hero h1 {
  font-size: clamp(2.5rem, 8vw, 4.75rem);
  font-weight: 700;
  line-height: 1.04;
  max-width: 15ch;
  margin: 0 auto;
}
/* A swelled rule under the title: thick in the middle, tapering to points. */
.ik-hero h1::after {
  content: "";
  display: block;
  width: min(11rem, 60%);
  height: 5px;
  margin: 1.8rem auto 0;
  background: var(--ink);
  clip-path: ellipse(50% 50% at 50% 50%);
}

.ik-hero .ik-sub {
  max-width: 36rem;
  margin: 2.2rem auto 2.5rem;
  color: var(--ink);
  font-size: clamp(1.08rem, 2vw, 1.22rem);
  line-height: 1.55;
  text-align: left;
  text-wrap: pretty;
}
/* The one initial on the page. */
.ik-hero .ik-sub::first-letter {
  float: left;
  margin: 0.07em 0.1em 0 0;
  color: var(--accent);
  font-size: 3.3em;
  font-weight: 700;
  line-height: 0.8;
}

/* "Coming to the App Store", set in a double-ruled box. */
.ik-pill {
  display: inline-block;
  padding: 0.4rem 1.2rem 0.5rem;
  border: 3px double var(--ink);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
}

/* The prices, set out as a price list with dot leaders between double rules. */
.ik-price {
  max-width: 30rem;
  margin: 2.4rem auto 0;
  padding: 0.75rem 0 0.85rem;
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.45;
  text-align: left;
}
.ik-line { display: flex; align-items: last baseline; gap: 0.35em; padding: 0.12rem 0; }
.ik-item { flex: 0 1 auto; }
.ik-lead {
  flex: 1 1 1.5rem;
  height: 0.3em;
  background: radial-gradient(circle, var(--ink-soft) 0.06em, transparent 0.08em) 0 100% / 0.5em 0.3em repeat-x;
}
.ik-amt { flex: none; font-weight: 700; }
.ik-note {
  display: block;
  margin-top: 0.5rem;
  color: var(--ink-soft);
  font-size: 0.94rem;
  font-style: italic;
  text-align: center;
  text-wrap: balance;
}

/* "Hear the narrators" (goocy, 2026-10-22: the voices are the main selling point): the ten names in a box ruled
   like the sheet itself, thick outside and a hairline inside, under the App Store notice and before the prices,
   so the goods are heard before they are priced. Each name is a button with the narrator row's round button in
   small beside it; the one reading turns to the second ink, its button to pause (inklight-samples.js). */
.ik-hear {
  position: relative;
  max-width: 36rem;
  margin: 2.5rem auto 0;
  padding: 1rem clamp(0.8rem, 2.5vw, 1.4rem) 1.05rem;
  border: 2px solid var(--ink);
}
.ik-hear::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--ink);
  pointer-events: none;
}
.ik-hear-head {
  display: flex;
  align-items: center;
  gap: 0.7em;
  margin: 0 0 0.55rem;
  color: var(--ink);
  font-size: clamp(1.3rem, 4.2vw, 1.6rem);
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  line-height: 1.2;
}
.ik-hear-head::before,
.ik-hear-head::after {
  content: "";
  flex: 1 1 0;
  border-top: 1px solid var(--rule);
}
.ik-hear-names {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.1rem 0.85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ik-hear-names li { margin: 0; }
.ik-hear-names a,
.ik-hear-name {
  display: inline-flex;
  align-items: center;
  gap: 0.38em;
  min-height: 44px;
  padding: 0.2rem 0.2rem;
  border: 0;
  background: none;
  color: var(--ink);
  font: 1.15rem/1.2 var(--serif);
  cursor: pointer;
}
.ik-hear-name svg { flex: none; width: 1.3em; height: 1.3em; color: var(--ink-soft); }
.ik-hear-name[data-playing] { color: var(--accent); text-decoration: underline 1px; text-underline-offset: 0.2em; }
.ik-hear-name[data-playing] svg { color: var(--accent); }
.ik-hear-name:hover { color: var(--accent); }
.ik-hear-name:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 2px; }
.ik-hear-note {
  margin: 0.45rem 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.45;
  text-wrap: balance;
}

/* The round button, drawn in the manner of the rows' painted one: a ring and a line glyph, play or pause. */
.ik-hear-name svg,
.ik-play svg,
.ik-pace svg {
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ik-disc { fill: var(--ground, none); stroke: none; }
.ik-glyph-pause,
[data-playing] .ik-glyph-play { display: none; }
[data-playing] .ik-glyph-pause { display: inline; }

/* Screenshots bare on the page, with the screen's own rounded corners. */
.ik-phone { margin: 0; }
.ik-phone img { display: block; width: 100%; height: auto; border-radius: 9% / 4.2%; }
/* A screenshot whose edge is too close to the sheet's colour (Tools/Website/edge_borders.py measures it) gets a
   1 px rule on its own rounded edge, no gap (goocy, 2026-10-22); the others stand bare. */
.ik-edge-light img { box-shadow: 0 0 0 1px var(--rule); }
@media (prefers-color-scheme: dark) {
  .ik-edge-light img { box-shadow: none; }
  .ik-edge-dark img { box-shadow: 0 0 0 1px var(--rule); }
}
.ik-duo {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.75rem, 4vw, 2.5rem);
  max-width: 44rem;
  margin: 3.4rem auto 0;
}
.ik-duo .ik-phone { flex: 1 1 0; max-width: 290px; }

/* A double rule closes the head, where the four claims stood between double rules until goocy dropped them
   (2026-11-03: "let's get rid of the horizontal ... bar entirely"). */
.ik-hero + .ik-inner { border-top: 3px double var(--ink); }

/* Feature rows, alternating, divided by a printer's ornament on a hairline. */
.ik-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.ik-feature + .ik-feature { border-top: 1px solid var(--rule); }
.ik-feature + .ik-feature::before {
  content: "\2767";
  content: "\2767" / "";
  position: absolute;
  z-index: 1;
  top: 0;
  left: 50%;
  transform: translate(-50%, -52%);
  padding: 0 0.55em;
  background: var(--sheet);
  color: var(--orn);
  font: 1.9rem/1 var(--fleuron);
}
/* The rows alternate; a screenshot on the left is the light one and on the right the dark one, in either
   colour scheme (goocy, 2026-10-25), so the page shows both looks of the app. */
.ik-feature.flip .ik-text { order: 2; }
.ik-feature .ik-phone { max-width: 300px; width: 100%; justify-self: center; }
/* The iPad screenshot: wider, with the iPad's smaller screen corners. */
.ik-feature .ik-tablet { max-width: 380px; }
.ik-tablet img { border-radius: 2.6% / 1.8%; }
/* The iPhone Duo's inner screen on its side is wider than tall; the watch face is small and round-cornered. */
.ik-feature .ik-tablet:has(img[width="1200"]) { max-width: 460px; }
.ik-tablet img[width="1200"] { border-radius: 2.4% / 3.4%; }
.ik-feature .ik-watch { max-width: 200px; }
.ik-watch img { border-radius: 22% / 18%; }
.ik-kicker { margin: 0 0 0.7rem; }
.ik-feature h2 {
  font-size: clamp(1.5rem, 3vw, 2.05rem);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 1.1rem;
}
.ik-feature p {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* "Your own pace" heard (goocy, 2026-11-01: "four audio samples ... (Edward/Casey, 100%/80%), in a small grid"):
   a small table, narrators down and speeds across, each cell the head box's round button (inklight-samples.js). */
.ik-paces { margin: 0.4rem 0 0; }
.ik-paces table { border-collapse: collapse; }
.ik-paces th {
  padding: 0.15rem 1.1rem 0.15rem 0;
  color: var(--ink);
  font-weight: 400;
  font-size: 1.08rem;
  text-align: left;
}
.ik-paces thead th {
  padding: 0 0.4rem 0.2rem;
  color: var(--ink-soft);
  font-size: 1rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  text-align: center;
}
.ik-paces td { padding: 0 0.4rem; text-align: center; }
.ik-paces a { font-size: 0.98rem; }
.ik-pace {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
}
.ik-pace svg { width: 30px; height: 30px; }
.ik-pace[data-playing],
.ik-pace:hover { color: var(--accent); }
.ik-pace:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 50%; }
.ik-feature p.ik-paces-note {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.45;
}

/* The narrators: the card images carry their own gold frames, so they stand on the paper as they are. */
.ik-narrators { padding: clamp(3rem, 6vw, 4.5rem) 0; text-align: center; border-top: 3px double var(--ink); }
.ik-narrators h2 {
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.ik-narrators .ik-sub {
  max-width: 36rem;
  margin: 0 auto 2.4rem;
  color: var(--ink-soft);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.55;
  text-wrap: pretty;
}
.ik-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; text-align: left; }
.ik-cards img { display: block; width: 100%; height: auto; }

/* Each row's painted round button turns into play and pause: a button laid exactly over it, on the card's own
   colour so the painted arrow beneath does not show. Place and size come from the app's narrators.json (x of the
   picture's width, y and radius of its height; --d is the diameter as a share of the width), by day for the light
   picture and by night for the dark one. The button is at least 44 px to the finger; only its disc is drawn. */
.ik-row { position: relative; align-self: start; container-type: inline-size; --ring: #544c44; }
.ik-play {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: grid;
  place-items: center;
  width: max(44px, var(--d) * 1cqw);
  height: max(44px, var(--d) * 1cqw);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ring);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.ik-play svg { display: block; width: calc(var(--d) * 1cqw); height: calc(var(--d) * 1cqw); border-radius: 50%; }
.ik-play:focus-visible { outline: none; }
.ik-play:focus-visible svg { outline: 2px solid var(--accent); outline-offset: 3px; }
/* narrator_rows.py writes the lines from here */
.ik-row[data-voice="charles"] { --x: 94.31%; --y: 15.37%; --d: 4.149; --ground: #f4efe7; }
.ik-row[data-voice="michael"] { --x: 93.97%; --y: 17.15%; --d: 3.962; --ground: #f4eee6; }
.ik-row[data-voice="paul"] { --x: 94.31%; --y: 15.55%; --d: 4.145; --ground: #f3ede5; }
.ik-row[data-voice="anna"] { --x: 94.70%; --y: 14.72%; --d: 4.202; --ground: #f4eee6; }
.ik-row[data-voice="azelma"] { --x: 94.29%; --y: 15.07%; --d: 4.163; --ground: #f3eee6; }
.ik-row[data-voice="eponine"] { --x: 94.22%; --y: 15.35%; --d: 4.113; --ground: #f3eee5; }
.ik-row[data-voice="vera"] { --x: 94.22%; --y: 15.18%; --d: 4.109; --ground: #f3eee5; }
.ik-row[data-voice="p270"] { --x: 94.33%; --y: 14.96%; --d: 4.034; --ground: #f3ede5; }
@media (prefers-color-scheme: dark) {
  .ik-row { --ring: #b39c84; }
  .ik-row[data-voice="charles"] { --x: 94.65%; --y: 14.16%; --d: 4.186; --ground: #171d16; }
  .ik-row[data-voice="michael"] { --x: 94.68%; --y: 14.15%; --d: 4.355; --ground: #1e1f1e; }
  .ik-row[data-voice="paul"] { --x: 95.00%; --y: 14.21%; --d: 4.285; --ground: #1d1a19; }
  .ik-row[data-voice="anna"] { --x: 94.11%; --y: 13.54%; --d: 4.335; --ground: #1d211b; }
  .ik-row[data-voice="azelma"] { --x: 94.75%; --y: 12.55%; --d: 4.039; --ground: #222027; }
  .ik-row[data-voice="eponine"] { --x: 94.51%; --y: 13.80%; --d: 4.192; --ground: #201e1a; }
  .ik-row[data-voice="vera"] { --x: 94.96%; --y: 12.94%; --d: 4.376; --ground: #1f2327; }
  .ik-row[data-voice="p270"] { --x: 94.76%; --y: 13.52%; --d: 4.349; --ground: #1e201e; }
}
/* narrator_rows.py writes the lines to here */

/* The maker's note */
.ik-maker { padding: clamp(3rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem); text-align: center; border-top: 3px double var(--ink); }
.ik-maker h2.ik-kicker { max-width: 34rem; margin: 0 auto 1.6rem; font-size: 1.15rem; line-height: 1.3; }
.ik-maker h2.ik-kicker::before { content: ""; flex: 1 1 0; border-top: 1px solid var(--rule); }
.ik-maker blockquote {
  max-width: 38rem;
  margin: 0 auto;
  font-size: clamp(1.18rem, 2.4vw, 1.4rem);
  font-style: italic;
  line-height: 1.55;
  text-wrap: pretty;
}
.ik-maker blockquote p { margin: 0 0 1rem; }
.ik-maker .ik-sign {
  margin: 0;
  color: var(--ink-soft);
  font-size: 1.05rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
}

/* The particulars below the announcement: "In short" as a table, then four short articles in newspaper columns. */

body.inklight main > .section {
  display: block;
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--gutter);
  border-top: 1px solid var(--rule);
}
body.inklight main > .ik + .section { border-top: 3px double var(--ink); }
/* Heads in the newspaper manner: bold small capitals, centered, over a short dash rule. */
body.inklight main > .section > h2,
.ik-columns > .section > h2 {
  position: static;
  margin: 0 0 1.4rem;
  text-align: center;
  font-size: clamp(1.45rem, 3.2vw, 1.85rem);
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
body.inklight main > .section > h2::after,
.ik-columns > .section > h2::after {
  content: "";
  display: block;
  width: 3rem;
  margin: 0.55rem auto 0;
  border-top: 1px solid var(--ink);
}

.ik-columns {
  max-width: 64rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 2.75rem) var(--gutter) 0;
  border-top: 1px solid var(--ink);
  columns: 3 17rem;
  column-gap: 2.5rem;
  column-rule: 1px solid var(--rule);
}
.ik-columns > .section {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}
/* A cut-off rule between articles, as between the stories of a column. */
.ik-columns > .section + .section { margin-top: 1.3rem; padding-top: 1.3rem; border-top: 1px solid var(--rule); }
.ik-columns > .section > h2 { margin-bottom: 0.9rem; font-size: 1.3rem; line-height: 1.25; break-after: avoid; }
.ik-columns > .section > h2::after { margin-top: 0.45rem; }
/* The articles run on from one column to the next, as in a newspaper, so the columns come out even (goocy, 2026-11-03:
   "the three columns at the bottom are very different length"); a head stays with its first lines, and no paragraph
   leaves fewer than three lines on either side of a column break. */
.ik-columns .body p { orphans: 3; widows: 3; }
body.inklight .ik-columns .body p { font-size: 1.02rem; line-height: 1.58; }
/* Each article opens with its first line in small capitals. */
.ik-columns .body > p:first-child::first-line { font-variant-caps: small-caps; letter-spacing: 0.02em; }
body.inklight .section .body > * { max-width: none; }
body.inklight .section .body p {
  font-size: 1.06rem;
  line-height: 1.62;
  text-wrap: pretty;
}
body.inklight .section .note { text-align: center; font-style: italic; margin-top: 1.6rem; }

/* The changelog page (goocy, 2026-11-03: "Could we add a changelog page to the website? The 1.0 should just be a
   list of features."): the title as the announcement's, each version under a double rule, its features in short
   ruled groups set in newspaper columns that run on from one column to the next. */
body.inklight main > .ik-log { border-top: 0; }
.ik-log h1 {
  margin: 0 auto;
  text-align: center;
  font-size: clamp(2.3rem, 7vw, 3.8rem);
  font-weight: 700;
  line-height: 1.05;
}
.ik-log h1::after {
  content: "";
  display: block;
  width: min(9rem, 50%);
  height: 4px;
  margin: 1.3rem auto 0;
  background: var(--ink);
  clip-path: ellipse(50% 50% at 50% 50%);
}
body.inklight .ik-log .ik-log-sub {
  margin: 1.4rem auto 0;
  color: var(--ink-soft);
  font-size: 1.1rem;
  font-style: italic;
  text-align: center;
  text-wrap: balance;
}
.ik-version { margin-top: 2.6rem; padding-top: 1.8rem; border-top: 3px double var(--ink); }
.ik-version h2 {
  margin: 0;
  text-align: center;
  font-size: clamp(1.55rem, 3.6vw, 2rem);
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.08em;
  line-height: 1.2;
}
body.inklight .ik-log .ik-version-when {
  margin: 0.35rem 0 0;
  color: var(--accent);
  font-style: italic;
  text-align: center;
}
.ik-log-groups {
  margin-top: 2rem;
  columns: 2 21rem;
  column-gap: 2.75rem;
  column-rule: 1px solid var(--rule);
}
.ik-log-group + .ik-log-group { margin-top: 1.5rem; }
/* Each version before 1.0 moves to the next column whole (goocy, 2026-11-03: "text blocks of each sub-version, in general,
   get broken to the next column as a whole"); Firefox ignores break-after on the heading and left "0.7.2" at the foot of
   one column with its line at the top of the next. The 1.0 groups may still run on, or its columns end ~800 px apart. */
.ik-log-history .ik-log-group { break-inside: avoid; }
.ik-log-group h3 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--rule);
  color: var(--accent);
  font-size: 1.12rem;
  font-weight: 700;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.1em;
  break-after: avoid;
}
.ik-log-group ul { margin: 0; padding: 0; list-style: none; }
.ik-log-group li {
  position: relative;
  margin: 0;
  padding: 0.22rem 0 0.22rem 1.1rem;
  color: var(--ink);
  font-size: 1.04rem;
  line-height: 1.5;
  text-wrap: pretty;
  break-inside: avoid;
}
/* The versions before 1.0: the number in the first ink before the title, the date and builds under it, and each
   change led by its kind (Added, Changed, Fixed, Removed) in bold small capitals. */
.ik-log-group h3 .ik-v { margin-right: 0.35em; color: var(--ink); letter-spacing: 0.04em; }
body.inklight .ik-log .ik-v-when {
  margin: -0.2rem 0 0.35rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.4;
  break-after: avoid;
}
.ik-log-group li strong { font-weight: 700; font-variant-caps: all-small-caps; letter-spacing: 0.04em; }
/* Each feature set off by a small diamond in the second ink, as items in a printed list. */
.ik-log-group li::before {
  content: "\25C6";
  content: "\25C6" / "";
  position: absolute;
  left: 0;
  top: 0.62em;
  color: var(--accent);
  font-size: 0.5em;
}

/* "In short" as a ruled table of particulars, the heads in small capitals. */
/* The label column is as wide as "Accessibility", the longest head, in its small capitals. */
body.inklight dl.rows > div { grid-template-columns: 9.5rem minmax(0, 1fr); padding: 0.6rem 0; }
body.inklight dl.rows > div:first-child { border-top: 1px solid var(--ink); }
body.inklight dl.rows > div:last-child { border-bottom: 1px solid var(--ink); }
body.inklight dl.rows dt {
  color: var(--accent);
  font-family: var(--serif);
  font-size: 1.2rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
}
body.inklight dl.rows dd { font-size: 1.04rem; line-height: 1.55; }

/* At desktop width the nine particulars stand in two columns, five and four, divided by a column rule. */
@media (min-width: 52rem) {
  body.inklight dl.rows {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
  }
  body.inklight dl.rows > div:first-child { border-top: 0; }
  body.inklight dl.rows > div:nth-child(5),
  body.inklight dl.rows > div:last-child { border-bottom: 0; }
  body.inklight dl.rows > div:nth-child(-n + 5) { padding-right: 1.5rem; }
  body.inklight dl.rows > div:nth-child(n + 6) { padding-left: 1.5rem; border-left: 1px solid var(--rule); }
}

/* Beside the feature rows a column rule runs down the middle, from rule to rule, under the ornaments. */
@media (min-width: 901px) {
  .ik-feature::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    border-left: 1px solid var(--rule);
  }
}

/* Justified setting where the measure is wide enough for it. */
@media (min-width: 34rem) {
  .ik-hero .ik-sub,
  .ik-feature p,
  body.inklight .section .body p { text-align: justify; hyphens: auto; }
}

/* Text beside a plate needs room for a justified measure; below that the plate follows the text. */
@media (max-width: 900px) {
  .ik-feature { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .ik-feature.flip .ik-text { order: 0; }
  .ik-feature .ik-text { max-width: 40rem; justify-self: center; }
  .ik-feature .ik-phone { max-width: 260px; }
  .ik-feature .ik-tablet { max-width: 340px; }
}

@media (max-width: 760px) {
  .ik-cards { grid-template-columns: minmax(0, 1fr); }
}

/* On a narrow sheet the date takes a line of its own over the volume and the label. */
@media (max-width: 40rem) {
  .ik-mast {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "name name" "date date" "vol label" "rule rule";
  }
  .ik-mast-date { padding-bottom: 0; }
  .ik-mast-vol,
  .ik-mast-label { padding-top: 0; font-size: 0.92rem; }
}

@media (max-width: 34rem) {
  body.inklight main { --gutter: 14px; border-width: 2px; }
  body.inklight main::before { inset: 3px; }
  body.inklight dl.rows > div { grid-template-columns: minmax(0, 1fr); }
  /* The ten names in two even columns, as a list of narrators, rather than in ragged centered pairs. */
  .ik-hear-names { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; column-gap: 1.6rem; }
}

@media print {
  body.inklight main { margin: 0; }
}