/*
 * Site shell — base reading type, header, footer, flash, and the "sheet":
 * the page grid every public page sits on. A sheet is a letter page with a
 * margin column (numbers, P.-S., labels: the letter's apparatus) beside a
 * reading column, plus free space on the right for the address block.
 */

:root {
  --cj-page:        66rem;
  --cj-measure:     36rem;   /* ~64 characters of Spectral at 19px */
  --cj-margin:      8.5rem;
  --cj-gutter:      clamp(1rem, 4vw, 2.5rem);
  --cj-column-gap:  var(--space-8);

  --cj-body-size:   1.0625rem;
  --cj-small:       0.9375rem;  /* nav, labels, address block, footer */
  --cj-display-sm:  1.75rem;    /* wordmark, margin numerals */
  --cj-salutation:  clamp(3.5rem, 1rem + 11.5vw, 8.25rem);
  --cj-title:       clamp(2.5rem, 1.5rem + 4.5vw, 4.75rem);
  --cj-heading:     clamp(2rem, 1.5rem + 2vw, 3rem);
  --cj-entry-title: 1.3125rem;  /* a listed event's title, in Fell */
  --cj-numeral:     clamp(2.25rem, 1.75rem + 1.5vw, 3rem);  /* agenda day numbers in the margin */
  --cj-figure-max:  30rem;      /* tallest an event picture's 4:3 frame may stand */

  --cj-seal:        3.75rem;

  /* "Not yet" surfaces (the closed signup): a faint ink wash that reads as
     inactive on paper in both colour schemes. */
  --cj-closed-bg:   color-mix(in srgb, var(--ink) 6%, var(--paper));
  --cj-closed-line: color-mix(in srgb, var(--ink) 12%, var(--paper));
}

@media (min-width: 48em) {
  :root { --cj-body-size: 1.1875rem; }
}

html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--cj-body-size);
  line-height: var(--line-height-relaxed);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-tight);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-width-1);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
  transition: color var(--transition-fast);
}
a:hover { color: var(--accent); }

:focus-visible {
  outline: var(--border-width-2) solid var(--accent);
  outline-offset: var(--border-width-3);
}

::selection {
  background: var(--accent-tint);
  color: var(--ink);
}

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--ink);
  color: var(--paper);
  translate: 0 -200%;
  z-index: var(--z-toast);
}
.skip-link:focus { translate: 0 0; }

/* Read by screen readers, not shown: what a link's hreflang says silently
   (the English footer's "the form is in French"). */
.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.site-main:focus { outline: none; }

/* ==========================================
 * FORMS — input edges sit at ink-faint (brand tokens); hover steps up.
 * ========================================== */

.form-input:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled),
.form-textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--ink-muted);
}

/* The core drops the outline on focus; restore the same gules ring every
   other control gets from :focus-visible. */
.form-input:focus-visible,
.form-select:focus-visible,
.form-textarea:focus-visible {
  outline: var(--border-width-2) solid var(--accent);
  outline-offset: var(--border-width-2);
}

/* The public forms' honeypot (shared/_bot_trap): moved off-screen rather
   than display:none, which bots detect. */
.bot-trap {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================
 * HEADER
 * ========================================== */

.site-header {
  border-bottom: var(--border-width-1) solid var(--line);
}

.site-header-inner {
  max-width: var(--cj-page);
  margin-inline: auto;
  padding: var(--space-4) var(--cj-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2) var(--space-8);
}

.site-wordmark {
  font-size: var(--cj-display-sm);
  line-height: 1;
}
.site-wordmark:hover { color: var(--ink); }

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
  font-size: var(--cj-small);
}

.site-nav a,
.site-footer-nav a {
  color: var(--ink-secondary);
  text-decoration-color: transparent;
  padding-block: var(--space-1);
}
.site-nav a:hover,
.site-footer-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

/* On a phone the nav keeps to one line: « Cette semaine », a section of the
   home page the wordmark already leads to, gives way, and the gaps tighten. */
@media (max-width: 30em) {
  .site-nav { column-gap: var(--space-5); }
  .site-nav-wide { display: none; }
}

/* FR · EN: the page's language in ink, the other one a quiet link, set off
   from the nav by a rule. */
.site-nav { margin-inline-start: auto; }

.site-lang {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  padding-inline-start: var(--space-4);
  border-inline-start: var(--border-width-1) solid var(--line);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
}

.site-lang-code {
  padding: var(--space-1) var(--space-1);
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-thickness: var(--border-width-1);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.2em;
}

.site-lang-link {
  color: var(--ink-muted);
  text-decoration-color: transparent;
}
.site-lang-link:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}

/* Below the width where all three fit on one line, the switch stays beside
   the wordmark and the nav takes the second line. */
@media (max-width: 47.99em) {
  .site-lang { order: 2; padding-inline-start: 0; border-inline-start: 0; }
  .site-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; }
}

/* The narrowest phones (320px): a smaller wordmark and tighter gaps keep the
   header to those two lines. */
@media (max-width: 22em) {
  .site-header-inner { column-gap: var(--space-4); }
  .site-wordmark { font-size: var(--font-size-2xl); }
  .site-nav { column-gap: var(--space-3); font-size: var(--font-size-sm); }
}

/* ==========================================
 * SHEET — the page grid
 * ========================================== */

.sheet {
  max-width: var(--cj-page);
  margin-inline: auto;
  padding-inline: var(--cj-gutter);
  display: grid;
  grid-template-columns:
    [full-start margin-start] minmax(0, var(--cj-margin))
    [margin-end text-start] minmax(0, var(--cj-measure))
    [text-end] minmax(0, 1fr) [full-end];
  column-gap: var(--cj-column-gap);
  align-content: start;
}
/* Zero specificity: page stylesheets load before this file (propshaft orders
   alphabetically) and must be able to place children with a single class. */
:where(.sheet) > * { grid-column: text; }

@media (max-width: 47.99em) {
  .sheet {
    grid-template-columns: [full-start margin-start text-start] minmax(0, 1fr) [margin-end text-end full-end];
  }
}

/* A fold between two sheets of the same page. */
.sheet + .sheet {
  margin-top: var(--space-20);
}
.sheet + .sheet::before {
  content: "";
  grid-column: margin-start / text-end;
  border-top: var(--border-width-1) solid var(--line);
  margin-bottom: var(--space-10);
}

/* ==========================================
 * PROSE PAGES — À propos, legal pages, subscription pages
 * ========================================== */

.prose {
  padding-top: var(--space-16);
}

.prose-title {
  grid-column: margin-start / full-end;
  font-size: var(--cj-title);
  font-style: italic;
  margin-bottom: var(--space-8);
}

.prose-body {
  text-wrap: pretty;
}
.prose-body p + p,
.prose-body ul + p { margin-top: 1em; }

.prose-body h2 {
  font-size: var(--font-size-2xl);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}

.prose-body ul {
  margin: 1em 0 0;
  padding-left: 1.25em;
}
.prose-body li + li { margin-top: 0.4em; }

.prose-body form { margin-top: var(--space-6); }

.prose-lede {
  font-size: var(--font-size-lg);
  font-style: italic;
}

.prose-updated {
  margin-top: var(--space-10);
  font-size: var(--cj-small);
  color: var(--ink-muted);
}

@media (max-width: 47.99em) {
  .prose { padding-top: var(--space-10); }
  .prose-body { hyphens: auto; }
}

/* ==========================================
 * FLASH
 * ========================================== */

.flash-stack {
  max-width: var(--cj-page);
  margin-inline: auto;
  padding-inline: var(--cj-gutter);
}
.flash-stack:empty { display: none; }
.flash-message {
  margin-top: var(--space-6);
  border-radius: var(--radius-sm);
}

/* ==========================================
 * FOOTER
 * ========================================== */

.site-footer {
  margin-top: var(--space-24);
  border-top: var(--border-width-1) solid var(--line);
  font-size: var(--cj-small);
  color: var(--ink-secondary);
}

.site-footer-inner {
  max-width: var(--cj-page);
  margin-inline: auto;
  padding: var(--space-10) var(--cj-gutter) var(--space-12);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-6) var(--space-8);
  align-items: baseline;
}

.site-footer-tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--font-size-2xl);
  line-height: var(--line-height-snug);
  color: var(--ink);
}

.site-footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
}

.site-footer-colophon {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
  font-style: italic;
}

.site-footer-mark {
  width: var(--space-4);
  height: auto;
  color: var(--accent);
}

@media (max-width: 47.99em) {
  .site-footer-inner { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================
 * PRINT — the letter on paper: light whatever the screen's scheme (the dark
 * tokens are screen-only, 00-tokens-brand.css), without what only works on
 * a screen (navigation, signup form, filters, pagers), the links that matter
 * spelled out, and no heading left alone at the foot of a page. Here, last in
 * the load order, so these rules win over the page stylesheets.
 * ========================================== */

@page {
  margin: 16mm 15mm;
}

@media print {
  :root {
    color-scheme: light;
    background: none;
  }

  body {
    background: none;
    font-family: var(--font-sans);
  }

  .skip-link,
  .site-header,
  .site-footer,
  .flash-stack,
  .event-back,
  .agenda-weeks,
  .agenda-filters,
  .agenda-step,
  .pager,
  .letter-nav,
  .postscript:not(.postscript-page),
  #newsletter-signup {
    display: none;
  }

  /* A later section (the week's picks, the exhibitions) starts a page, like
     an enclosure: its fold and heading are never left at the foot of one. */
  .sheet + .sheet { margin-top: 0; break-before: page; }

  /* The home letter (not a published one, .letter-page, whose numbered picks
     hang in the margin) keeps to its first page, seal and signature
     included, even on the wide grid (Chrome lays a print with no page
     margins out at 48em and more): its body takes the page's whole measure,
     as it does on the narrow grid, and the space around the salutation
     tightens. Else the seal and signature would stand alone on a second
     page, before the week's picks start the third. */
  .letter:not(.letter-page),
  .letter:not(.letter-page) .letter-addressee { padding-top: 0; }
  .letter:not(.letter-page) .letter-subject { margin-top: var(--space-6); }
  .letter:not(.letter-page) .letter-salutation {
    margin-top: var(--space-4);
    font-size: min(var(--cj-salutation), 5rem);
  }
  .letter:not(.letter-page) .letter-body { grid-column: margin-start / text-end; }
  .letter:not(.letter-page) .letter-signature { margin-top: var(--space-4); }
  .sheet + .sheet::before { display: none; }
  .agenda-day-heading { position: static; }

  h1, h2, h3,
  .agenda-day-heading,
  .letter-salutation,
  .week-dek,
  .agenda-ongoing-dek {
    break-after: avoid;
  }

  .agenda-day,
  .agenda-item,
  .week-pick,
  .week-slot,
  .letters-item,
  .letter-text ol > li,
  .event-fact,
  .event-figure,
  .letter-signature {
    break-inside: avoid;
  }

  .event-links a::after {
    content: " (" attr(href) ")";
    font-size: var(--font-size-sm);
    color: var(--ink-muted);
    overflow-wrap: anywhere;
  }

  /* The seal is a gules disc: keep it, background and all. */
  .seal { print-color-adjust: exact; }
}