@charset "UTF-8";

/* Optional visual studies. With no data-theme, the original Paper design is unchanged. */

/* Papier · Vert keeps the original ivory ground and Georgia typography. */
html[data-theme="papier-vert"] {
  --paper: #f7f5ee;
  --paper-deep: #edf0e6;
  --ink: #263f32;
  --muted: #596957;
  --rust: #59683b;
  --ochre: #7e865c;
  --line: #cdd3c2;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-header: rgba(247, 245, 238, .96);
  --theme-hover: #354e3a;
  --theme-selection: #dce4cb;
  --theme-play-border: #899a78;
  --theme-shadow: rgba(38, 63, 50, .15);
  --theme-book-shadow: #dfe4d3;
  --theme-book-alternate: #59683b;
}

html[data-theme="clarte"] {
  --paper: #f2f6fb;
  --paper-deep: #e6edf6;
  --ink: #172a4b;
  --muted: #53647c;
  --rust: #2455ad;
  --ochre: #9a7940;
  --line: #c5d0e0;
  --serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --theme-header: rgba(242, 246, 251, .96);
  --theme-hover: #274875;
  --theme-selection: #cbdcf7;
  --theme-play-border: #8a9fbd;
  --theme-shadow: rgba(23, 42, 75, .16);
  --theme-book-shadow: #dbe4ef;
  --theme-book-alternate: #2455ad;
}

html[data-theme="atelier"] {
  --paper: #fbf2e9;
  --paper-deep: #f0e2d8;
  --ink: #442d40;
  --muted: #745e68;
  --rust: #a34637;
  --ochre: #a57a38;
  --line: #ddc9c5;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-header: rgba(251, 242, 233, .96);
  --theme-hover: #634058;
  --theme-selection: #ecc6ba;
  --theme-play-border: #ae8c98;
  --theme-shadow: rgba(68, 45, 64, .16);
  --theme-book-shadow: #e8d5ca;
  --theme-book-alternate: #ae4d3c;
}

html[data-theme="mineral"] {
  --paper: #edf2e9;
  --paper-deep: #dfe7d9;
  --ink: #203e35;
  --muted: #53685c;
  --rust: #77536e;
  --ochre: #98723b;
  --line: #bfcebd;
  --serif: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  --sans: "Avenir Next", Avenir, "Trebuchet MS", sans-serif;
  --theme-header: rgba(237, 242, 233, .96);
  --theme-hover: #35594a;
  --theme-selection: #d3ddc9;
  --theme-play-border: #819b87;
  --theme-shadow: rgba(32, 62, 53, .16);
  --theme-book-shadow: #d5dfd0;
  --theme-book-alternate: #77536e;
}

/* Adapt the few fixed colors in the base stylesheet; all measurements stay intact. */
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) ::selection {
  color: var(--ink);
  background: var(--theme-selection);
}
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .site-header {
  background: var(--theme-header);
  border-bottom-color: var(--line);
}
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .button:hover {
  background: var(--theme-hover);
  border-color: var(--theme-hover);
}
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .play-symbol {
  border-color: var(--theme-play-border);
}
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .book-cover {
  filter: drop-shadow(7px 8px 7px var(--theme-shadow));
}
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .book-jacket {
  box-shadow: inset 5px 0 rgba(255, 255, 255, .11), 6px 8px 0 var(--theme-book-shadow);
}
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .book:nth-child(even) .book-jacket {
  background: var(--theme-book-alternate);
}
html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .hero-art img {
  mix-blend-mode: multiply;
}

/* Olive-toned linework; no tint is added to the original ivory page. */
html[data-theme="papier-vert"] .hero-art img {
  filter: grayscale(1) sepia(.85) hue-rotate(38deg) saturate(.8);
}

/* Clarté: fine ruling and a clear, restrained modernist typography. */
html[data-theme="clarte"] body {
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 63px,
    rgba(36, 85, 173, .027) 63px,
    rgba(36, 85, 173, .027) 64px
  );
}
html[data-theme="clarte"] :is(.hero h1, .section h2, .about-section h2, .contact-section h2) {
  font-weight: 500;
  letter-spacing: -.055em;
}
html[data-theme="clarte"] :is(.publication h3, .book-details h3, .talk h3, .topic h3, .bibliography h3) {
  font-weight: 500;
  letter-spacing: -.035em;
}
html[data-theme="clarte"] :is(.wordmark, .footer-name) { font-weight: 500; }
html[data-theme="clarte"] .about-copy blockquote { font-weight: 500; letter-spacing: -.025em; }
html[data-theme="clarte"] .hero-art img {
  filter: grayscale(1) sepia(.72) hue-rotate(172deg) saturate(1.7);
}

/* Atelier: warm paper, plum ink, and the generous shapes of Palatino. */
html[data-theme="atelier"] body {
  background-image: radial-gradient(ellipse at 92% 4%, rgba(222, 174, 147, .15), transparent 38%);
  background-size: 100% 960px;
  background-repeat: no-repeat;
}
html[data-theme="atelier"] :is(.hero h1, .section h2, .about-section h2, .contact-section h2) {
  font-weight: 400;
  letter-spacing: -.05em;
}
html[data-theme="atelier"] :is(.publication h3, .book-details h3, .talk h3) {
  font-weight: 400;
  letter-spacing: -.025em;
}
html[data-theme="atelier"] .about-copy blockquote { font-style: italic; }
html[data-theme="atelier"] .hero-art img { filter: sepia(.13) saturate(.84); }

/* Minéral: soft sage, forest ink, and a humanist sans serif. */
html[data-theme="mineral"] body {
  background-image: linear-gradient(130deg, rgba(210, 224, 201, .21), transparent 62%);
  background-size: 100% 1040px;
  background-repeat: no-repeat;
}
html[data-theme="mineral"] :is(.hero h1, .section h2, .about-section h2, .contact-section h2) {
  font-weight: 500;
  letter-spacing: -.055em;
}
html[data-theme="mineral"] :is(.publication h3, .book-details h3, .talk h3, .topic h3, .bibliography h3) {
  font-weight: 500;
  letter-spacing: -.035em;
}
html[data-theme="mineral"] :is(.wordmark, .footer-name) { font-weight: 500; }
html[data-theme="mineral"] .about-copy blockquote { font-weight: 500; letter-spacing: -.025em; }
html[data-theme="mineral"] .hero-art img { filter: hue-rotate(-18deg) saturate(.72); }

@media (min-width: 801px) {
  html:is([data-theme="clarte"], [data-theme="mineral"]) .hero h1 {
    font-size: clamp(50px, 5.2vw, 76px);
  }
}

@media (max-width: 600px) {
  html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) .book-jacket {
    box-shadow: inset 4px 0 rgba(255, 255, 255, .11), 4px 6px 0 var(--theme-book-shadow);
  }
}

@media print {
  html:is([data-theme="papier-vert"], [data-theme="clarte"], [data-theme="atelier"], [data-theme="mineral"]) body {
    background: white;
    color: black;
  }
}