/* The text pages (tools/pages.mjs, 7 October 2026): a service in words, for people and for search engines.
   On top of canvas.css: its colours, fonts and header; here the article, its pictures, the questions and the footer. */
body.page #nav { background: var(--ground); border-bottom: 1px solid var(--hair); }
body.page #nav .lang { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; padding: 8px 0; }
body.page #nav .lang:hover { color: var(--ink); }

.article { max-width: 760px; margin: 0 auto; padding: 132px var(--side) 40px; }
.article .crumbs { font: 400 11px/1 var(--mono); letter-spacing: .08em; color: var(--ink-3); margin: 0 0 30px; }
.article .crumbs a { color: var(--ink-3); text-decoration: none; }
.article .crumbs span { margin: 0 6px; }
.article .k { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 18px; }
.article h1 { font: 400 clamp(42px, 6vw, 72px)/1 var(--serif); letter-spacing: -.015em; margin: 0 0 26px; text-wrap: balance; }
.article h1 em { font-style: italic; }
.article .lead { font: 400 19px/1.55 var(--sans); color: var(--ink); margin: 0 0 40px; text-wrap: pretty; }
.article h2 { font: 400 32px/1.1 var(--serif); letter-spacing: -.01em; margin: 56px 0 16px; }
.article p, .article li { font-size: 16px; line-height: 1.65; color: var(--ink-2); text-wrap: pretty; }
.article li { margin: 0 0 8px; }
.article li strong { color: var(--ink); font-weight: 500; }
.article ul, .article ol { padding-left: 20px; }

.article figure { margin: 36px 0; }
.article figure img { display: block; width: 100%; height: auto; background: var(--card); }
.article figure.hero { margin: 0 calc(50% - min(550px, 50vw - var(--side))) 8px; }
.article figure.pair > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.article figure.pair img { aspect-ratio: 4 / 3; object-fit: cover; }
.article figcaption { font: 400 11.5px/1.45 var(--mono); letter-spacing: .02em; color: var(--ink-3); margin-top: 10px; }

.article .faq { margin: 64px 0 0; border-top: 1px solid var(--hair); }
.article .faq h2 { margin-top: 32px; }
.article details { border-bottom: 1px solid var(--hair); }
.article summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative; font: 450 16.5px/1.4 var(--sans); color: var(--ink); }
.article summary::-webkit-details-marker { display: none; }
.article summary::after { content: '+'; position: absolute; right: 2px; top: 16px; font: 300 22px/1 var(--sans); color: var(--ink-3); transition: transform .25s; }
.article details[open] summary::after { transform: rotate(45deg); }
.article details p { margin: 0 0 18px; }

.article .cta { margin: 64px 0 24px; padding: 34px 36px; background: var(--ink); color: var(--ground); }
.article .cta p { color: var(--ground); opacity: .7; margin: 0 0 22px; }
.article .cta .t { font: 400 34px/1.1 var(--serif); opacity: 1; margin-bottom: 10px; }
.article .cta .links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; opacity: 1; }
.article .cta .links a { font: 400 22px/1.2 var(--serif); color: var(--ground); }
.article .more { font: 400 13px/1.5 var(--mono); margin: 8px 0; }
.article .more a { color: var(--ink); }
.article .more span { color: var(--ink-3); }

.foot { max-width: 760px; margin: 40px auto 0; padding: 26px var(--side) 60px; border-top: 1px solid var(--hair); }
.foot p { font: 400 12.5px/1.7 var(--sans); color: var(--ink-3); margin: 0 0 4px; }
.foot a { color: var(--ink-2); }

@media (max-width: 760px) {
  body.page #nav .lang { display: none; }
  .article { padding-top: 96px; }
  .article .lead { font-size: 17px; }
  .article h2 { font-size: 27px; margin-top: 44px; }
  .article figure.hero { margin: 0 calc(-1 * var(--side)) 8px; }
  .article figure.pair > div { grid-template-columns: 1fr; }
  .article .cta { padding: 26px 22px; margin-left: calc(-1 * var(--side)); margin-right: calc(-1 * var(--side)); }
  .article .cta .t { font-size: 28px; }
}