/* M/T — the one stylesheet.
   Grammar kept from the 06-projects draft (keymouse.eu metrics: 940 wrapper, 164 rail, 776 content)
   and its house tokens; grey text raised to #767676 for contrast (4.5:1 on white). */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Erode (Indian Type Foundry, Fontshare — free licence, web use allowed), self-hosted, preloaded in layout.html; display: block = wait for Erode rather than flash a fallback font (D36) */
@font-face { font-family: "Erode"; src: url("fonts/Erode-Variable.ttf") format("truetype"); font-weight: 300 700; font-style: normal; font-display: block; }
@font-face { font-family: "Erode"; src: url("fonts/Erode-VariableItalic.ttf") format("truetype"); font-weight: 300 700; font-style: italic; font-display: block; }

:root {
  --bg: #fff;
  --fg: #111;
  --muted: #111; /* all text black (D35) — was #767676 */
  --faint: #b5b5b5;
  --line: #e5e5e5;
  --rule: #7b7b7b;
  --serif: "Erode", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Erode", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: "Erode", Arial, Helvetica, sans-serif;
  --wrap: 940px;
  --list-w: 164px;
  --content-w: 776px;
  --col-gap: 30px;
}

/* bilingual: every text exists twice, the inactive language is hidden */
html[data-lang="fr"] body [lang="en"],
html[data-lang="en"] body [lang="fr"] { display: none !important; }

html, body { background: var(--bg); }
body { font: 17px/1.45 var(--mono); color: var(--fg); padding: 0 16px; }
a { color: inherit; }
/* a link turns bold under the pointer; the page you are on stays bold (D35) */
a:hover, a:focus-visible, a[aria-current="page"] { font-weight: 700 !important; }
i, em { font-style: italic; }

.skip { position: absolute; left: -9999px; top: 8px; background: #111; color: #fff;
  padding: 8px 14px; font-size: 14px; z-index: 10; text-decoration: none; }
.skip:focus { left: 8px; }

/* the © line sits at the foot of the window on every page, and stays there while a longer page scrolls under it */
.wrapper { max-width: var(--wrap); margin: 0 auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.wrapper > .middle { flex: 1 0 auto; }

/* ---------- header ---------- */
.header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 58px 0 38px; }
.nav { display: flex; gap: 13px; flex-wrap: wrap; align-items: baseline; }
.nav a { font: 16px var(--mono); color: var(--muted); text-decoration: none; text-transform: lowercase; }
.nav a[aria-current="page"], .nav a:hover { color: var(--fg); }
.lang-switch { all: unset; cursor: pointer; font: 13px var(--mono); color: var(--muted); margin-left: 10px; letter-spacing: .04em; }
.lang-switch b { color: var(--fg); font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.lang-switch:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
.logo a { font: 18px var(--sans); letter-spacing: .04em; color: var(--fg); text-decoration: none; }

/* ---------- rail + content ---------- */
.middle { display: flex; column-gap: var(--col-gap); }
.l-col { flex: 0 0 var(--list-w); align-self: flex-start; position: sticky; top: 24px; }
.content { flex: 1 1 auto; max-width: var(--content-w); min-width: 0; }
.l-col ul { list-style: none; margin-top: -3px; }
.l-col a { display: block; font: 14px/17px var(--mono); color: var(--fg); text-decoration: none; padding: 3px 0; }
.l-col a b { font-weight: 700; }
.l-col a:hover, .l-col a[aria-current="page"] { color: var(--fg); }
.l-col .foreign { font-style: italic; }
.l-col .rail-sep { border-top: 1px solid var(--line); margin: 9px 0 6px; width: 24px; }

/* ---------- type ---------- */
.lede { font: 400 28px/1.3 var(--serif); margin: 0 0 30px; }
.lede .sub { display: block; font: 15px/1.5 var(--sans); color: var(--muted); margin-top: 10px; max-width: 52ch; }
h2 { font: 400 22px/1.3 var(--serif); margin: 36px 0 10px; }
.prose { font: 14px/1.45 var(--sans); }
.prose p { max-width: 62ch; }
.prose p + p { margin-top: 14px; }
.prose a { text-underline-offset: 3px; text-decoration-color: var(--faint); }
.prose a:hover { text-decoration-color: var(--fg); }
.small { font: 14px/1.5 var(--sans); color: var(--muted); }
/* the special edition page: the same size and face as the text on the book pages (.book-text), upright */
.es-text { font: 14px/1.45 var(--sans); }
.es-text p + p { margin-top: .6em; }
.info-legal { margin-top: 40px; }
.info-legal a { color: var(--muted); }
.foreign { font-style: italic; }

/* ---------- index: book grid ---------- */
/* covers at true relative scale: each card's flex-grow = the book's width in cm (set by build.py),
   so every cover gets the same px-per-cm; heights follow from each cover's own proportions.
   Bottom-aligned, like books standing on a shelf. */
.shelf { display: flex; align-items: flex-end; gap: 30px; }
.shelf a { flex: 0 1 0; min-width: 0; text-decoration: none; display: block; }
.shelf img { display: block; width: 100%; height: auto; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.shelf .num { font: 13px var(--sans); color: var(--muted); letter-spacing: .1em; }
.shelf a:hover .num { color: var(--fg); }

/* page-to-page morph (index ⇄ book): browsers that support cross-document view transitions
   keep the clicked cover in place and dissolve the other cover into the text panel. Others: plain navigation. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: cubic-bezier(.4,.1,.2,1); }

/* ---------- book page ---------- */
.book-shelf { margin-bottom: 40px; }
.slot { flex: 0 1 0; min-width: 0; }
.cover-slot img { display: block; width: 100%; height: auto; margin-bottom: 12px; box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.cover-slot .num a { color: var(--muted); text-decoration: none; }
.flip-nav { align-items: center; gap: 12px; color: var(--muted); }
.flip-nav button { all: unset; cursor: pointer; font: 20px/20px var(--sans); color: var(--fg); padding: 0 4px; }
.flip-nav button:disabled { color: var(--faint); cursor: default; }
.flip-nav button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.flip-count { min-width: 9.5em; text-align: center; white-space: nowrap; }
.flip-nav a { margin-left: 14px; flex: none; white-space: nowrap; }
.cover-slot .num a:hover, .cover-slot .num a:focus-visible { color: var(--fg); }
/* the special edition, next to "see inside": in the book's own tint (config.json → accent), underlined */
.cover-slot .num a.when-closed { display: inline; }
.is-open .cover-slot .num a.when-closed { display: none; }
.cover-slot .num a.special { margin-left: 18px; color: var(--accent, var(--fg)); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.when-open { display: none; }
.is-open .when-open { display: inline-flex; }
.is-open .when-closed { display: none; }

/* see inside: cover + text fade out, the flipbook fades in over the cover, then opens */
.book-shelf { position: relative; }
.flip-inline { position: absolute; left: 0; top: 0; width: 0; height: 0; border: 0; opacity: 0; pointer-events: none;
  transition: opacity .35s ease; }
.is-open .flip-inline { opacity: 1; pointer-events: auto; }
.cover-slot img, .panel-text { transition: opacity .35s ease; }
.is-open .cover-slot img, .is-open .panel-text { opacity: 0; pointer-events: none; }
.panel { font: 15px/1.5 var(--sans); display: grid; }
.panel > .ghost, .panel > .panel-text { grid-area: 1 / 1; }
.panel > .panel-text { align-self: end; }
.panel > .ghost { visibility: hidden; }
.panel > .ghost > div { margin-bottom: 12px; }
/* the line under the block mirrors the n° line under a cover: same font, same gap, so the button's
   bottom lands exactly on the covers' bottom line */
.shelf .num, .panel .added { line-height: 17px; }
.panel .add button { display: block; }
.panel .added { margin-top: 12px; min-height: 15px; letter-spacing: 0; }
/* book page: the line under the covers (see inside / arrows / basket note) sits further away, in a
   readable size — same metrics in every slot so both books stay on one bottom line */
.book-shelf img, .panel > .ghost > div { margin-bottom: 22px; }
.book-shelf .num, .book-shelf .panel .added { font-size: 15px; line-height: 20px; letter-spacing: .02em; }
.book-shelf .panel .added { margin-top: 22px; min-height: 18px; }
.panel .author { font: 15px var(--sans); color: var(--muted); }
.panel .details { margin: 6px 0 14px; }
.panel .add { border-top: 1px solid var(--rule); padding-top: 12px; }
/* price on the left, button on the right, one line — the button's bottom stays on the covers' line */
.panel .add { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.panel .price { font: 17px var(--sans); margin: 0; }
.panel .price .left { font-size: 14px; color: var(--muted); margin-left: 8px; }
.add button { min-width: 10.5em; font: 16px var(--sans); background: var(--fg); color: #fff; border: 0; padding: 10px 18px; cursor: pointer; border-radius: 2px; }
.add button:disabled { background: var(--faint); cursor: default; }
.add button .done, .add button.just-added .label { display: none; }
.add button.just-added .done { display: inline; }
.add button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
/* sold out: "waiting list" in outline (not a purchase) where the dead button was; the form opens under
   the price, the block grows upward and its button lands on the covers' line */
.panel .add button[hidden] { display: none; }
.add .wait-open { background: var(--bg); color: var(--fg); border: 1px solid var(--fg); padding: 9px 17px; }
.panel .wait { margin-top: 12px; }
.panel .wait-note { color: var(--muted); margin-bottom: 10px; }
.panel .wait-note a { display: inline; color: var(--muted); text-underline-offset: 3px; text-decoration-color: var(--faint); }
.panel .wait-note a:hover { color: var(--fg); }
.panel .wait.done .wait-note { color: var(--fg); margin-bottom: 0; }
.panel .wait .field { display: flex; gap: 8px; }
.panel .wait input[type="email"] { flex: 1; min-width: 0; font: 16px var(--sans); padding: 9px 10px; border: 1px solid var(--rule); border-radius: 2px; }
.panel .wait button { font: 16px var(--sans); background: var(--fg); color: #fff; border: 0; padding: 10px 18px; cursor: pointer; border-radius: 2px; }
.panel .wait button:disabled { background: var(--faint); cursor: default; }
.panel .wait input:focus-visible, .panel .wait button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.panel .wait .hp { position: absolute; left: -9999px; }

/* basket page */
#basket { max-width: 520px; }
#basket .lines { border-top: 1px solid var(--rule); font: 15px/1.5 var(--sans); }
#basket .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
#basket .row label { flex: 1; }
#basket .line a { text-decoration: none; }
#basket .line a:hover { text-decoration: underline; text-underline-offset: 3px; }
#basket .qty { display: flex; align-items: center; gap: 10px; }
#basket .remove { all: unset; cursor: pointer; font-size: 14px; color: var(--muted); }
#basket .remove:hover, #basket .remove:focus-visible { color: var(--fg); text-decoration: underline; }
#basket .empty { padding: 14px 0; }
#basket .buy { margin-top: 0; border-top: 0; padding-top: 0; }
.flip { display: block; width: 100%; border: 0; margin-bottom: 14px; }
.details { margin: 10px 0 18px; font: 15px/1.6 var(--sans); max-width: 60ch; }
.book-text { font: italic 14px/1.45 var(--sans); margin-bottom: 16px; }
.book-text p + p { margin-top: .6em; }
.book-text i { font-style: normal; }   /* titles inside the italic text stand upright */

/* buy block */
.buy { margin-top: 30px; border-top: 1px solid var(--rule); padding-top: 18px; max-width: 520px; font: 15px/1.5 var(--sans); }
.buy h2 { margin-top: 0; }
.buy .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.buy .row label { flex: 1; }
.buy select { font: 15px var(--sans); padding: 4px 6px; border: 1px solid var(--line); background: #fff; color: var(--fg); border-radius: 2px; }
.buy select:focus-visible, .buy input:focus-visible, .buy button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.buy .left { color: var(--muted); font-size: 14px; }
.buy .sum { padding: 12px 0 4px; }
.buy .sum div { display: flex; justify-content: space-between; }
.buy .sum .total { font-weight: 700; margin-top: 4px; }
.buy button[type="submit"] { margin-top: 14px; font: 16px var(--sans); background: var(--fg); color: #fff; border: 0;
  padding: 11px 20px; cursor: pointer; border-radius: 2px; }
.buy button[type="submit"]:disabled { background: var(--faint); cursor: default; }
.buy .msg { margin-top: 10px; color: var(--muted); font-size: 14px; min-height: 1.5em; }
.buy .fine { margin-top: 14px; color: var(--muted); font-size: 14px; }
.sold-out { font: 16px var(--sans); color: var(--muted); }

/* ---------- news ---------- */
.news { list-style: none; }
.news li { display: grid; grid-template-columns: 170px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.news p a { text-underline-offset: 3px; text-decoration-color: var(--faint); }
.news p a:hover { text-decoration-color: var(--fg); }
.news time { font: 14px var(--sans); color: var(--muted); padding-top: 2px; }

/* ---------- forms (newsletter) ---------- */
.subscribe { max-width: 440px; margin-top: 8px; font: 15px/1.5 var(--sans); }
.subscribe .field { display: flex; gap: 8px; }
.subscribe input[type="email"] { flex: 1; font: 16px var(--sans); padding: 9px 10px; border: 1px solid var(--rule); border-radius: 2px; min-width: 0; }
.subscribe button { font: 16px var(--sans); background: var(--fg); color: #fff; border: 0; padding: 9px 16px; cursor: pointer; border-radius: 2px; }
.subscribe button:disabled { background: var(--faint); cursor: default; }
.subscribe .consent { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px; color: var(--muted); font-size: 14px; }
.subscribe .consent input { margin-top: 3px; }

/* ---------- special edition: the prints, one at a time (mt.js) ---------- */
.es { margin-top: 28px; max-width: 560px; }
.es-tabs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; font: 14px var(--mono); }
.es-tabs button { all: unset; cursor: pointer; color: var(--muted); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.es-tabs button[aria-selected="true"] { color: var(--accent); border-color: var(--accent); }
.es-tabs button:focus-visible { outline: 1px solid var(--fg); outline-offset: 3px; }
.es-frame { position: relative; height: 420px; display: flex; align-items: center; justify-content: center; background: #f6f6f4; }
.es-frame img { width: auto; height: auto; max-width: 86%; max-height: 86%; box-shadow: 0 1px 3px rgba(0,0,0,.18); transition: opacity .2s; }
.es-frame img[hidden] { display: none; }
.es-frame.is-taken img { opacity: .28; }
.es-taken { display: none; position: absolute; font: 14px var(--mono); color: var(--fg); background: var(--bg); padding: 4px 9px; }
.es-frame.is-taken .es-taken { display: block; }
.es-bar { display: flex; align-items: center; gap: 12px; margin-top: 10px; font: 14px var(--mono); color: var(--muted); }
.es-bar > button { all: unset; cursor: pointer; font: 20px/20px var(--sans); color: var(--fg); padding: 0 4px; }
.es-bar > button:disabled { color: var(--faint); cursor: default; }
.es-bar > button:focus-visible { outline: 1px solid var(--fg); outline-offset: 2px; }
.es-count { min-width: 3.5em; text-align: center; }
.es-dots { margin-left: auto; display: flex; gap: 7px; }
.es-dots button { all: unset; cursor: pointer; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.es-dots button.taken { background: transparent; box-shadow: inset 0 0 0 1px var(--faint); }
.es-dots button.mine { background: var(--fg); }
.es-dots button[aria-current="true"] { outline: 1px solid var(--fg); outline-offset: 2px; }
.es-buy { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }
.es-price { font: 16px var(--sans); }
.es-price .small { margin-left: 6px; }
.es-choose { font: 16px var(--sans); background: var(--fg); color: #fff; border: 0; padding: 10px 18px; cursor: pointer; border-radius: 2px; }
.es-choose:disabled { background: var(--faint); cursor: default; }
.es-added { margin-top: 10px; min-height: 1.5em; }
.es-added a { color: var(--fg); }
.ship-note { margin: 12px 0; font: 15px/1.5 var(--sans); color: var(--fg); }
.ship-note[hidden] { display: none; }

/* ---------- footer ---------- */
.footer { margin-top: 40px; padding: 12px 0 16px; position: sticky; bottom: 0; z-index: 5; background: var(--bg);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 14px var(--sans); color: var(--fg); }
.footer a { color: var(--fg); text-decoration: none; }
.footer a:hover { color: var(--fg); }

/* ---------- mobile: the book list comes first, as a row under the header ---------- */
@media (max-width: 880px) {
  .book-shelf { flex-direction: column; align-items: stretch; gap: 24px; }
  .book-shelf .slot { flex: none !important; }
  .book-shelf .cover-slot { order: -1; width: 62%; }
  .panel > .ghost { display: none; }
  .header { padding: 28px 0 22px; }
  .middle { flex-direction: column; }
  .l-col { position: static; flex: none; width: 100%; margin-bottom: 26px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .l-col ul { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .es-frame { height: 340px; }
  .l-col .rail-sep { border-top: 0; border-left: 1px solid var(--line); width: 0; margin: 3px 0; }
  .content { max-width: none; }
  .news li { grid-template-columns: 1fr; gap: 4px; }
  .shelf { gap: 16px; }
}
@media (max-width: 420px) {
  .lede { font-size: 24px; }
}