/* ============================================================
   Home page. Loaded after fonts.css and base.css; the case pages, résumé and colophon keep omote.css.
   Colours are base.css's tokens (和紙 墨 薄墨 罫 棚 藍) plus a few values derived from them below.
   Element rules are scoped to the header, main and footer, so the keyboard sheet
   that js/shortcuts.js adds to <body> keeps base.css's look.
   ============================================================ */

/* Metric-matched fallbacks for EB Garamond 500: lines keep their breaks while the web font loads. */
@font-face {
  font-family: "EB Garamond Fallback G";
  src: local("Georgia");
  size-adjust: 89.8%; ascent-override: 112.2%; descent-override: 33.2%; line-gap-override: 0%;
}
@font-face {
  font-family: "EB Garamond Fallback T";
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif");
  size-adjust: 98.3%; ascent-override: 102.4%; descent-override: 30.3%; line-gap-override: 0%;
}
@font-face {
  font-family: "EB Garamond Fallback G"; font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 91.5%; ascent-override: 110%; descent-override: 32.6%; line-gap-override: 0%;
}
@font-face {
  font-family: "EB Garamond Fallback T"; font-style: italic;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic");
  size-adjust: 96%; ascent-override: 104.9%; descent-override: 31%; line-gap-override: 0%;
}

/* These pages print on a whiter paper than base.css's default (same values as omote.css). Light side only; night comes from base.css. */
@layer tokens {
  @media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) body[data-side="omote"] { --washi: #fbfaf6; --tana: #ffffff; --kei: #e2ded4; --usu: #625e56; }
  }
  :root[data-theme="light"] body[data-side="omote"] { --washi: #fbfaf6; --tana: #ffffff; --kei: #e2ded4; --usu: #625e56; }
}

/* Values derived from the tokens for this page: highlight, clipping shadow, the map's backdrop, photos at night. */
:root {
  --hl: rgb(46 104 166 / .22);
  --slip-shadow: 0 1px 0 rgb(80 60 30 / .10), 0 10px 24px -14px rgb(80 60 30 / .45);
  --band: #f0ece2;
  --img-filter: none;

  --step--1: clamp(1.08rem, 1.03rem + 0.15vw, 1.14rem);
  --step-0: clamp(1.15rem, 1.08rem + 0.3vw, 1.32rem);
  --step-1: clamp(1.35rem, 1.18rem + 0.65vw, 1.75rem);
  --step-2: clamp(1.5rem, 1.08rem + 1.4vw, 2.15rem);
  --step-3: clamp(1.85rem, 1.3rem + 2vw, 2.9rem);
  --step-4: clamp(3rem, 1.6rem + 4.6vw, 5.6rem);
  --page: 78rem;
  --edge: clamp(1rem, 4vw, 3.5rem);
  --col-gap: clamp(1.25rem, 2.2vw, 2.25rem);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --hl: rgb(120 170 230 / .34); --slip-shadow: 0 0 0 1px #34312b, 0 12px 28px -14px rgb(0 0 0 / .8); --band: #2a2722; --img-filter: brightness(.78) contrast(1.05) saturate(.9); }
}
:root[data-theme="dark"] { --hl: rgb(120 170 230 / .34); --slip-shadow: 0 0 0 1px #34312b, 0 12px 28px -14px rgb(0 0 0 / .8); --band: #2a2722; --img-filter: brightness(.78) contrast(1.05) saturate(.9); }

/* ---------- Base ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
body[data-side="omote"] {
  --serif: "EB Garamond", "EB Garamond Fallback G", "EB Garamond Fallback T", var(--f-serif);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.55;
  font-kerning: normal;
}
/* One weight of EB Garamond ships (500): no faux bold. */
html[lang="en"] body[data-side="omote"] { font-synthesis-weight: none; }
:lang(ja) { font-family: var(--f-mincho); font-variant-numeric: normal; line-break: strict; }

:where(.site-head, main, .site-foot) a {
  color: inherit; border-bottom: 0;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ai) 55%, transparent);
  text-decoration-thickness: 1px; text-underline-offset: .17em;
}
:where(.site-head, main, .site-foot) a:hover { text-decoration-color: var(--ai); }
:where(main, .site-foot) p { margin: 0 0 .9em; max-width: none; }
:where(main) :where(h1, h2, h3) { font-weight: 500; line-height: 1.12; margin: 0; text-wrap: balance; }
:where(main, .site-foot) :where(p, li, figcaption) { text-wrap: pretty; }
:where(main) cite { font-style: italic; }
:where(main) q { quotes: "\201C" "\201D" "\2018" "\2019"; }
main:focus { outline: none; }
.num { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }
/* With a larger default text size on a narrow screen, the kept-together phrases may break after all (em: follows that setting). */
@media (max-width: 22em) { .hero__status .nowrap { white-space: normal; } }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body[data-page="home"] .wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--edge); }

/* Controls that only work with scripts stay out of the way without them; key help is for keyboards. */
html:not(.js) .themer, html:not(.js) .site-foot__keys { display: none; }
/* The theme button ships hidden and theme.js reveals it once it works. Keep its box meanwhile, so nothing shifts. */
@layer reset { html.js .themer[hidden] { display: grid !important; } }
.themer[hidden] { visibility: hidden; }
/* The same for the footer's "Keyboard shortcuts", which shortcuts.js reveals. */
@layer reset { html.js .site-foot__keys [hidden] { display: inline-block !important; } }
html.js .site-foot__keys [hidden] { visibility: hidden; }
@media (hover: none) { .site-foot__keys { display: none; } }

/* ---------- Masthead ---------- */
.masthead { border-bottom: 1px solid var(--kei); }
.masthead__row { display: flex; flex-wrap: wrap; align-items: center; column-gap: clamp(1rem, 3vw, 2.5rem); min-height: 4rem; }
.site-head .sitename { display: inline-flex; align-items: baseline; gap: .55em; text-decoration: none; margin-right: auto; line-height: 1; }
.sitename [lang="ja"] { font-size: 1.15rem; letter-spacing: .08em; }
.sitename__latin { font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--usu); font-size: 1.05rem; }
.nav { display: flex; gap: clamp(.9rem, 2.4vw, 2rem); align-items: baseline; }
.site-head .nav a { text-decoration: none; padding: .55rem 0; white-space: nowrap; }
.site-head .nav a:hover { text-decoration: underline; text-decoration-color: var(--ai); }
.themer { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-right: -.6rem; padding: 0; background: none; border: 0; color: var(--sumi); cursor: pointer; border-radius: 50%; }
.themer:hover { background: color-mix(in srgb, var(--ai) 9%, transparent); }
.themer svg { transition: rotate var(--t-state) var(--ease); }
:root[data-theme="dark"] .themer svg { rotate: 180deg; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .themer svg { rotate: 180deg; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--col-gap);
  align-items: center;
  padding-top: clamp(2.5rem, 6vh, 5rem);
  padding-bottom: clamp(3rem, 8vh, 6rem);
}
.hero__copy { grid-column: 1 / span 7; }
.hero__name { display: flex; flex-wrap: wrap; align-items: flex-end; column-gap: 1.1rem; row-gap: .35rem; margin-bottom: .45em; }
.hero__fullname { font-size: var(--step-4); letter-spacing: -.012em; line-height: .9; }
.hero__role { font-size: var(--step-0); line-height: 1.22; color: var(--sumi); padding-bottom: .45em; border-left: 1px solid var(--kei); padding-left: 1rem; }
.hero__lede { font-size: var(--step-2); line-height: 1.3; max-width: 21em; margin-bottom: 1.2em; }
.hero .claim {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: .05em;
  text-underline-offset: .22em;
  border-radius: 2px;
  transition: background-color .2s var(--ease-out), text-decoration-color .2s;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.claim::after {
  content: attr(data-mark);
  content: attr(data-mark) / "";
  font-style: italic; font-size: .6em; vertical-align: .7em; line-height: 0; color: var(--ai); margin-left: .1em;
}
.hero .claim:hover, .hero .claim:focus-visible, .hero .claim.is-on { background: color-mix(in srgb, var(--ai) 9%, transparent); text-decoration-color: var(--ai); }
.hero__status { font-size: var(--step--1); line-height: 1.45; color: var(--usu); max-width: 33em; }
.hero__status strong { color: var(--sumi); font-weight: 500; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem 1.6rem; align-items: center; margin-top: 1.5rem; }

.textlink {
  font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, var(--ai) 55%, transparent);
}
.textlink:hover { text-decoration-color: var(--ai); }

/* Evidence clipping: the source of the opening claim, with the matching words highlighted */
.hero > .slip { grid-column: 8 / span 5; }
.slip:focus { outline: none; }
.slip:focus-visible .slip__paper { outline: 2px solid var(--ai); outline-offset: 4px; }
.slip { margin: 0; transition: transform .35s var(--ease-out), opacity .35s var(--ease-out); }
.slip__paper {
  position: relative; background: var(--tana); box-shadow: var(--slip-shadow);
  padding: .55rem .7rem; border-radius: 1px;
}
.slip__paper img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
:root[data-theme="dark"] .slip__paper img { filter: invert(.88) hue-rotate(180deg); mix-blend-mode: normal; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .slip__paper img { filter: invert(.88) hue-rotate(180deg); mix-blend-mode: normal; } }
:root[data-theme="dark"] .hl { mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl { mix-blend-mode: screen; } }
.hl {
  --px: .7rem; --py: .55rem;
  position: absolute;
  left: calc(var(--px) + (100% - 2 * var(--px)) * var(--x) / 100%);
  top: calc(var(--py) + (100% - 2 * var(--py)) * var(--y) / 100%);
  width: calc((100% - 2 * var(--px)) * var(--w) / 100%);
  height: calc((100% - 2 * var(--py)) * var(--h) / 100%);
  background: var(--hl); mix-blend-mode: multiply; border-radius: 2px;
  transform-origin: left center;
}
.slip figcaption { font-size: var(--step--1); line-height: 1.42; color: var(--usu); margin-top: .65rem; }
.slip__mark { font-style: italic; color: var(--ai); margin-right: .4em; }
.slip.is-on figcaption { color: var(--sumi); }

.thread { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.thread path { fill: none; stroke: var(--ai); stroke-width: 1; opacity: .55; stroke-linecap: round; stroke-linejoin: round; transition: opacity .25s var(--ease-out), stroke-width .25s var(--ease-out); }
.thread.is-on path { opacity: 1; stroke-width: 1.5; }
html:not(.js) .thread { display: none; }

/* ---------- Work ---------- */
.work { padding-bottom: clamp(2rem, 6vw, 4rem); }
.work__title { font-size: var(--step-1); font-variant-caps: all-small-caps; letter-spacing: .09em; border-top: 2px solid var(--sumi); padding-top: .7rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.work .entry { margin-bottom: clamp(4.5rem, 11vw, 8.5rem); }
.work .entry h3 { font-size: var(--step-2); letter-spacing: -.005em; }
.entry__links { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.work .cite { font-size: var(--step--1); color: var(--usu); line-height: 1.45; }

/* 1 · study: the participant's words first, then the findings beside the shares */
.opener {
  font-size: clamp(1.25rem, 1.08rem + .55vw, 1.55rem); line-height: 1.34; max-width: 30em; margin: 0 0 clamp(1.8rem, 3.5vw, 2.5rem); font-style: italic;
  color: var(--sumi);
}
.study { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.6rem; }
.study__text { grid-column: 1 / span 7; }
.study__text p:last-child { margin-bottom: 0; }
.study .cite { grid-column: 1 / span 9; margin: 0; }
.entry__cite { font-size: var(--step--1); color: var(--usu); line-height: 1.45; max-width: 46em; margin: .45em 0 1.5em; }
.entry__cite cite { color: var(--sumi); font-style: normal; }

.levels { grid-column: 9 / span 4; margin: .3rem 0 0; align-self: start; max-width: 30rem; }
.levels figcaption { font-size: var(--step--1); color: var(--usu); margin-bottom: .55rem; }
.levels dl { margin: 0; display: grid; gap: .35rem; }
.levels__row { display: grid; grid-template-columns: 8.6rem 1fr; align-items: center; gap: .8rem; }
.levels dt { color: var(--usu); }
.levels dd { margin: 0; display: flex; align-items: center; gap: .6rem; }
.levels__bar { display: block; height: .62rem; width: calc(var(--v) * 1%); background: color-mix(in srgb, var(--usu) 55%, transparent); border-radius: 1px; transform-origin: left center; }
.levels__row--key dt { color: var(--sumi); }
.levels__row--key .levels__bar { background: var(--ai); }
.levels .num { font-size: .95em; color: var(--usu); }
.levels__row--key .num { color: var(--sumi); }

/* 2 · WebMemo: the same columns as the study, with one finding beside the text */
.finding { grid-column: 9 / span 4; margin: .3rem 0 0; align-self: start; max-width: 30rem; }
.finding figcaption { font-size: var(--step--1); color: var(--usu); margin-bottom: .55rem; }
.finding dl { margin: 0; display: grid; gap: .7rem; }
.finding div { border-top: 1px solid var(--kei); padding-top: .5rem; }
.finding dt { font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--usu); }
.finding dd { margin: .1rem 0 0; font-size: var(--step--1); line-height: 1.42; }
.entry--tool > h3 { margin-bottom: .75rem; }
.entry--tool .entry__links { margin-top: 1.1rem; }

/* 3 · atlas: the map first, edge to edge, then one character and two of their places */
.band { margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.band img { display: block; width: 100%; max-width: none; height: clamp(14rem, 33vw, 30rem); object-fit: cover; object-position: 50% 50%; border-block: 1px solid var(--kei); filter: var(--img-filter); background: var(--band); }
.band figcaption { font-size: var(--step--1); color: var(--usu); margin-top: .6rem; }
/* The two numbered marks (js/atlas-map.js): an SVG laid over the picture, so it never changes the layout. */
.band__map { position: relative; }
/* The caption's sentence about the marks keeps its place until the script reveals it, so the text below does not move. */
@layer reset { html.js .band__legend[hidden] { display: inline !important; } }
html.js .band__legend[hidden] { visibility: hidden; }
.band__marks { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.band__marks .mark__disc { fill: var(--ai); stroke: var(--washi); stroke-width: 2; }
.band__marks .mark__num { fill: var(--washi); font: 500 13px/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.band__marks .mark__where { fill: var(--sumi); font: italic 500 13px/1 var(--serif); paint-order: stroke; stroke: var(--washi); stroke-width: 3; stroke-linejoin: round; }
.band__marks .mark__point { fill: var(--ai); stroke: var(--washi); stroke-width: 1.5; stroke-linejoin: round; }
.band__marks .mark__pop { transition: transform var(--t-touch) var(--ease); transform-box: fill-box; transform-origin: center; }
.band__marks .is-hot .mark__pop { transform: scale(1.35); }
.band__marks .is-hot .mark__disc { fill: var(--sumi); }
.atlas__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.atlas__text { grid-column: 1 / span 7; }
.atlas__text h3 { margin-bottom: .75rem; }
.atlas__text > p { max-width: 33em; }
.sample { position: relative; grid-column: 1 / -1; margin-top: 1.4rem; }
/* A small label and the control share one row above the entry, so the control stays put whichever character is showing. */
.sample__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.sample__label { margin: 0; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--usu); font-size: var(--step--1); }
.sample__title { font-size: var(--step--1); color: var(--usu); }
.sample__who { color: var(--sumi); }
.sample__title [lang="ja"] { font-weight: 700; }
.sample__list { list-style: none; counter-reset: place; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--col-gap); }
.sample__list li { position: relative; display: grid; gap: .2rem; align-content: start; padding: .8rem 0 0 1.75rem; border-top: 1px solid var(--kei); }
/* The same numbered disc as on the map; screen readers get the list's own numbering instead. */
.sample__list li::before { counter-increment: place; content: counter(place); content: counter(place) / ""; position: absolute; left: 0; top: .95rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--ai); color: var(--washi); font-size: .74rem; line-height: 1.2rem; text-align: center; font-variant-numeric: lining-nums tabular-nums; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
@media (hover: hover) { .sample__list li:hover::before { background: var(--sumi); } }
.sample__place [lang="ja"] { display: block; font-size: .92em; color: var(--usu); }
.sample__why { font-size: var(--step--1); color: var(--usu); margin-top: .35rem; max-width: 30em; }
.grade { font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: 1.04em; }
.grade--source { color: var(--ai); }
.grade--motif, .grade--inference { color: var(--usu); }
.sample__head .sample__more { margin: 0; font-size: var(--step--1); }
html:not(.js) .sample__more { display: none; }
/* With scripts on, the button row keeps its box until atlas-sample.js reveals it, so nothing below moves. */
@layer reset { html.js .sample__more[hidden] { display: block !important; } }
html.js .sample__more[hidden] { visibility: hidden; }

/* 4 · Deskflow, stacked: heading, what happened and who did what, then the test matrix */
.entry--code { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: .75rem; }
.entry--code .entry__head { grid-column: 1 / -1; }
.entry--code .entry__body { grid-column: 4 / span 7; }
.entry--code .entry__body p { max-width: 33em; }
.review { font-size: var(--step--1); color: var(--usu); border-left: 2px solid var(--kei); padding-left: .9rem; }
.review q { color: var(--sumi); font-style: italic; }
.review__who { white-space: nowrap; }
.matrix { grid-column: 4 / span 8; margin: 1.05rem 0 0; min-width: 0; }
.matrix figcaption { font-size: var(--step--1); color: var(--usu); margin-bottom: .6rem; }
.matrix__scroll { overflow-x: auto; }
.matrix__scroll.is-scrollable { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.matrix__scroll.is-scrollable.is-end, .matrix__scroll.is-scrollable:focus-visible { -webkit-mask-image: none; mask-image: none; }
.matrix table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.matrix th, .matrix td { text-align: left; padding: .5rem .9rem .5rem 0; border-bottom: 1px solid var(--kei); font-weight: 500; }
.matrix :is(th, td):last-child { padding-right: 0; }
.matrix thead th { font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--usu); border-bottom: 1px solid var(--usu); }
.matrix tbody th { color: var(--sumi); }
/* Row names stay on one line ("#8179 fix only") wherever the table still fits without scrolling. */
@media (min-width: 375px) { .matrix tbody th { white-space: nowrap; } }
.matrix code { font-family: var(--f-mono); font-size: .74em; }
.matrix .bad { color: var(--usu); }
.matrix .ok { color: var(--ai); }
.matrix__both th, .matrix__both td { border-bottom: 2px solid var(--sumi); }

/* 5 · zotero-mcp and pharmacy: plain paragraphs; after the last one the résumé line follows closer */
.entry--note p { max-width: 33em; margin-top: .75rem; }
.work .entry--last { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }

.also { max-width: 46em; color: var(--usu); }
/* A short rule closes the list, like the end mark of a printed section. */
.also::before { content: ""; display: block; width: 2.5rem; border-top: 1px solid var(--usu); margin-bottom: .9rem; }

/* ---------- Footer ---------- */
.site-foot { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 2.5rem; padding-top: 1.25rem; padding-bottom: 2.5rem; font-size: var(--step--1); color: var(--usu); }
.site-foot::before { content: ""; position: absolute; top: 0; left: var(--edge); right: var(--edge); border-top: 1px solid var(--kei); }
.site-foot p { margin: 0; }
.site-foot .site-foot__copy { margin-left: auto; }


/* ---------- Motion (only where it says something) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .slip[data-sweep] .hl { animation: sweep .6s var(--ease-out) both; animation-delay: calc(1s + var(--i) * .16s); }
  .js .slip.is-on .hl { animation: sweep .45s var(--ease-out) both; animation-delay: calc(var(--i) * .08s); }
  .sample__body.is-fresh { animation: sample-in .35s var(--ease-out) both; }
  .band__marks .is-fresh .mark__pop { animation: mark-in .45s var(--ease-out) both; transform-box: fill-box; transform-origin: center; }
}
@keyframes sample-in { from { opacity: 0; } }
@keyframes mark-in { from { opacity: 0; transform: scale(.4); } }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Wide screens: the clipping sits level with the claim it supports, and the two sample places sit beside the atlas text
   instead of under it, so the right half is not left empty. */
@media (min-width: 1081px) {
  .atlas__text { grid-column: 1 / span 7; }
  .sample { grid-column: 9 / span 4; margin-top: .3rem; align-self: start; }
  .hero > .slip { margin-top: 6rem; }
  .sample__list { grid-template-columns: 1fr; gap: 1.1rem; }
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1080.98px) {
  .hero { align-items: start; }
  .hero__copy { grid-column: 1 / -1; }
  .hero > .slip { grid-column: 1 / span 9; margin-top: 2.25rem; }
  .thread { display: none; }
}
@media (max-width: 860px) {
  .atlas__text, .sample { grid-column: 1 / -1; }
  .sample { margin-top: 1.5rem; }
  .matrix, .entry--code .entry__head, .entry--code .entry__body, .study__text, .levels, .finding, .study .cite, .atlas__text { grid-column: 1 / -1; }
  .sample__list { grid-template-columns: 1fr; gap: 1.1rem; }
  .levels__row { grid-template-columns: 8.2rem 1fr; }
}
@media (max-width: 360px) {
  .masthead__row { gap: .7rem; }
  .nav { gap: .8rem; }
  .nav__work { display: none; }
}
@media (max-width: 640px) {
  .matrix th, .matrix td { padding: .45rem .5rem .45rem 0; font-size: .92em; }
  .matrix code { font-size: .7em; }
  .hero > .slip { grid-column: 1 / -1; }
  .hero > .slip .slip__paper { margin-inline: calc(var(--edge) * -.5); }
  .slip__paper { padding: .35rem .3rem; }
  .hl { --px: .3rem; --py: .35rem; }
  .sitename__latin { display: none; }
  .hero__fullname { font-size: 3.4rem; }
  .hero__role { padding-bottom: .2em; }
  .band img { height: auto; aspect-ratio: 990 / 576; object-position: 50% 50%; }
  .site-foot .site-foot__copy { margin-left: 0; }
}

/* Touch screens: text links get a finger-sized hit area; the negative margins keep the layout as it is. */
@media (pointer: coarse) {
  .hero__actions a, .entry__links a { padding-block: .55rem; margin-block: -.55rem; }
  .sample__more button { padding-block: .55rem; margin-block: -.55rem; }
  .site-foot { row-gap: 1.1rem; }
  .site-foot a { padding-block: .7rem; }
}

/* ---------- Print ---------- */
@media print {
  .themer, .site-foot__keys, .sample__more { display: none !important; }
  .sample__body { min-height: 0 !important; }
  body[data-side="omote"] { font-size: 11pt; }
  .slip__paper { box-shadow: none; border: 1px solid #ccc; }
  /* Paper is white whatever the screen theme: no inverted clipping, no night filter on the map. */
  .slip__paper img, .band img { filter: none !important; mix-blend-mode: normal !important; }
  .hl { background: none !important; mix-blend-mode: normal !important; box-shadow: inset 0 -2px 0 #000; }
}

/* Forced colours (Windows contrast themes): bars and highlights would vanish into Canvas. */
@media (forced-colors: active) {
  .levels__bar { forced-color-adjust: none; background: CanvasText; }
  .hl { forced-color-adjust: none; background: none; outline: 2px solid Highlight; }
}