/* ═══════════════════════════════════════════════════════════
   accessibility.css — /accessibility/
   Design C (ink bands) with design B's boxed contents list.
   Mockups: accessibility/designs/ (not deployed).
   ═══════════════════════════════════════════════════════════ */

/* ── Script fonts (same self-hosted files as the artist pages) ── */
@font-face {
  font-family: 'Miriam Libre';
  src: url('/fonts/Miriam_Libre/MiriamLibre-VariableFont_wght.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
  unicode-range: U+0590-05FF, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Kawkab Mono';
  src: url('/fonts/Kawkab_Mono/KawkabMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}
@font-face {
  font-family: 'Kawkab Mono';
  src: url('/fonts/Kawkab_Mono/KawkabMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF;
}

/* ── Colors and column ───────────────────────────────────── */
:root {
  --green: #81BB52;              /* menu background */
  --ink:   #18100D;              /* menu text (8.2 : 1 on green) */
  --g:     clamp(16px, 5vw, 56px);   /* side gutter */
  --col:   48rem;                /* text column, about 80 characters */
}

*, *::before, *::after { box-sizing: border-box; }

html { background: var(--green); }
body {
  margin: 0;
  padding: 0 0 4em;
  background: var(--green);
  color: var(--ink);
  font-family: monospace;
  font-size: 1rem;               /* 16px, follows the reader's browser setting */
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* ── Links: ink chip, green letters, no underline ────────── */
a {
  background: var(--ink);
  color: var(--green);
  text-decoration: none;
  padding: 0.05em 0.25em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  overflow-wrap: anywhere;
}
a:hover { opacity: 0.8; }
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

/* Skip link: off-screen until focused */
.skip {
  position: absolute;
  left: var(--g);
  top: -100px;
  z-index: 10;
}
.skip:focus { top: 1rem; }
main:focus { outline: none; }

/* ── Layout: one column; ink bands run full width ────────── */
.masthead,
main > .block > :not(h2),
main > .loading {
  width: calc(100% - 2 * var(--g));
  max-width: var(--col);
  margin-left: auto;
  margin-right: auto;
}
.masthead { padding-top: var(--g); }

h1, h2, h3, h4, h5 { font-weight: 800; line-height: 1.15; }
h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: 0 0 0.3em; }

/* Section opener: ink band, green title, aligned to the column */
main > .block > h2 {
  background: var(--ink);
  color: var(--green);
  margin: 2.5em 0 1em;
  padding: 0.35em max(var(--g), calc((100% - var(--col)) / 2));
  font-size: clamp(1.6rem, 5vw, 2.8rem);
}
h3 { font-size: clamp(1.3rem, 3.2vw, 1.9rem); margin: 1.6em 0 0.4em; }
h4 { font-size: 1.15rem; margin: 1.5em 0 0.3em; }
h5 { font-size: 1rem;    margin: 1.2em 0 0.3em; }

.intro { margin: 0 0 1em; }
.back-row { margin: 0 0 1.5em; }

/* ── Contents (design B): boxed, nested list ─────────────── */
.toc {
  padding: 1em 1.2em;
  border: 2px solid var(--ink);
}
.toc h2 {
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.5em;
}
.toc ul { margin: 0; padding-left: 1.2em; }
.toc li { margin: 0.25em 0; }
.toc ul ul { list-style: circle; margin-top: 0.25em; }

/* ── Artists ─────────────────────────────────────────────── */
.artist { border-top: 6px solid var(--ink); margin-top: 2.5em; }
.caption { opacity: 0.8; }

.works .work + .work { margin-top: 0.8em; }
.works p { margin: 0; }
.works .work-title { font-weight: 700; font-style: italic; }

/* Images: description beside the picture on wide screens, below on phones */
img { max-width: 100%; max-height: 70vh; width: auto; height: auto; display: block; }
.fig { margin: 1.5em 0; display: grid; gap: 0.6em 1.4em; }
@media (min-width: 760px) {
  .fig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}
.fig-splat { display: block; border: 3px solid var(--ink); padding: 1em; }
.splat-label { font-weight: 800; margin: 0 0 0.4em; }

/* Seed grid in the MyFi Studio section: same shapes as the MyFi page (seeds.js), still */
.seed-grid {
  list-style: none;
  margin: 1.2em 0 0.6em;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 16px);
  max-width: 36rem;
}
.seed-cell .bean-svg { width: 100%; height: auto; aspect-ratio: 1; overflow: visible; display: block; }
.bean-outline { fill: none; stroke: #1C0F0C; stroke-linecap: round; stroke-linejoin: round; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Essay blocks (appendRichBlock, shared with the About page) */
.rich-quote { margin: 0 0 1em; padding-left: 1.2em; border-left: 3px solid var(--ink); }
.rich-cite { opacity: 0.85; }
.rich-rtl { text-align: right; }
.rich-rtl p { margin: 0.2em 0; }
.rich-figure { margin: 1.6em 0; }
.rich-figure-row { display: flex; gap: 12px; align-items: flex-start; }
.rich-figure-row img { flex: 1 1 0; min-width: 0; max-height: 70vh; object-fit: contain; }
.rich-figure-row img:only-child { flex: 0 1 auto; max-width: min(100%, 32rem); }
.rich-figure figcaption { font-style: italic; margin-top: 0.6em; }
.rich-figure figcaption em { font-style: normal; }
.rich-note { font-style: italic; }

/* Description box: alt text for a visual that has no single image (the seed grid) */
.alt-box {
  border: 2px solid var(--ink);
  padding: 0.6em 0.8em;
  margin: 0.4em 0 1.2em;
  max-width: 36rem;
}

/* Placeholders to fill in (missing alt text, stubs) */
.xxx {
  font-weight: 700;
  border: 2px dashed var(--ink);
  padding: 0.3em 0.5em;
}

/* Hebrew / Arabic (spans come from appendInline in artist.js) */
.script-he { font-family: 'Miriam Libre', monospace; }
.script-ar { font-family: 'Kawkab Mono', monospace; font-style: normal; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}