/* Roux design system */

:root {
  --ink:   #2A2420;
  --cream: #F4EEE1;
  --clay:  #B84A2E;
  --olive: #5F6B42;
  --stone: #B8ADA0;
  --muted: #6B6560;

  --type-display: "Fraunces", Georgia, serif;
  --type-body:    "Source Serif 4", Georgia, serif;
  --type-ui:      "Inter", system-ui, -apple-system, sans-serif;
}

@font-face {
  font-family: "Fraunces";
  src: url("https://fonts.gstatic.com/s/fraunces/v36/6NUh8FyLNQOQZAnv9bYWvDtVjfvUnss.woff2") format("woff2");
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--type-body);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 720px) {
  html, body { font-size: 17px; }
}

/* ===================== Layout ===================== */

.wrap { max-width: 720px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }
.wrap-wide { max-width: 1080px; margin: 0 auto; padding: 4rem 1.5rem 6rem; }

/* ===================== Typography ===================== */

h1, h2, h3, h4 {
  font-family: var(--type-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 0.6rem;
  line-height: 1.15;
}

h1 { font-size: 3.2rem; line-height: 1.05; margin-top: 0; }
h2 { font-size: 1.8rem; margin: 3rem 0 1rem; }
h3 { font-size: 1.3rem; font-style: italic; color: var(--muted); margin: 2rem 0 0.6rem; }
h4 { font-size: 1.05rem; font-family: var(--type-ui); font-weight: 600;
     letter-spacing: 0.04em; text-transform: uppercase; color: var(--clay);
     margin: 2rem 0 0.4rem; }

p { margin: 0 0 1.2rem; }

a {
  color: var(--clay);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--ink); }

em, i { font-style: italic; }
strong, b { font-weight: 600; }

ul, ol { padding-left: 1.4rem; margin: 0 0 1.4rem; }
li { margin-bottom: 0.4rem; }

blockquote {
  font-family: var(--type-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.45;
  margin: 1.6rem 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--clay);
  color: var(--ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--stone);
  margin: 3rem 0;
}

/* ===================== Decoration ===================== */

.kicker {
  font-family: var(--type-ui);
  font-size: 0.78rem;
  color: var(--clay);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}

.subtitle {
  font-family: var(--type-display);
  font-style: italic;
  font-size: 1.6rem;
  color: var(--muted);
  margin: 0 0 3rem;
  line-height: 1.2;
}

.meta {
  font-family: var(--type-ui);
  font-size: 0.85rem;
  color: var(--muted);
}

.dropcap::first-letter {
  font-family: var(--type-display);
  font-size: 4em;
  float: left;
  line-height: 0.85;
  margin: 0.1em 0.1em 0 0;
  color: var(--clay);
}

/* ===================== Components ===================== */

.placeholder-card {
  background: rgba(184, 74, 46, 0.06);
  border: 1px solid rgba(184, 74, 46, 0.25);
  padding: 1.4rem 1.6rem;
  border-radius: 4px;
  margin: 2.5rem 0;
}
.placeholder-card .label {
  font-family: var(--type-ui);
  font-size: 0.72rem;
  color: var(--clay);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin: 0 0 0.4rem;
}

.session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.4rem;
  margin: 2rem 0;
}
.session-card {
  background: rgba(184, 173, 160, 0.15);
  border: 1px solid var(--stone);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  text-decoration: none;
  color: var(--ink);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.session-card:hover {
  border-color: var(--clay);
  transform: translateY(-2px);
}
.session-card .number {
  font-family: var(--type-ui);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay);
}
.session-card .title {
  font-family: var(--type-display);
  font-size: 1.4rem;
  margin: 0.4rem 0 0.6rem;
  display: block;
}
.session-card .ref {
  font-family: var(--type-ui);
  font-size: 0.85rem;
  color: var(--muted);
}

/* ===================== Header & footer ===================== */

.site-header {
  border-bottom: 1px solid var(--stone);
  padding: 1.6rem 1.5rem;
  background: var(--cream);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-header-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
}
.site-header .brand {
  font-family: var(--type-display);
  font-size: 1.2rem;
  color: var(--ink);
  text-decoration: none;
}
.site-header .brand .accent { color: var(--clay); }
.site-header nav a {
  font-family: var(--type-ui);
  font-size: 0.9rem;
  color: var(--muted);
  text-decoration: none;
  margin-left: 1.4rem;
}
.site-header nav a:hover { color: var(--clay); }
.site-header nav a.active { color: var(--ink); }

.site-footer {
  border-top: 1px solid var(--stone);
  padding: 2rem 1.5rem;
  margin-top: 4rem;
  font-family: var(--type-ui);
  font-size: 0.85rem;
  color: var(--muted);
  text-align: center;
}
.site-footer p { margin: 0.4rem 0; }

/* ===================== Session-page specifics ===================== */

.session-header {
  margin-bottom: 3rem;
}
.session-nav {
  font-family: var(--type-ui);
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  margin-top: 4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--stone);
}
.session-nav a { text-decoration: none; }
.session-nav .prev::before { content: "← "; }
.session-nav .next::after { content: " →"; }

/* ===================== Sidebar-page specifics ===================== */

.sidebar-article {
  max-width: 720px;
}
.sidebar-header {
  margin-bottom: 3rem;
}
.sidebar-applies {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--stone);
  font-family: var(--type-ui);
  font-size: 0.9rem;
  color: var(--muted);
}
.sidebar-applies h2 {
  font-family: var(--type-display);
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 0.8rem;
  font-weight: 400;
}
.sidebar-applies ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar-applies li {
  margin: 0.4rem 0;
}
.sidebar-applies li a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
}
.sidebar-applies li a:hover { color: var(--clay); border-bottom-color: var(--clay); }

/* Per-session "Sidebars for this session" block */
.related-sidebars {
  margin-top: 3rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  font-family: var(--type-ui);
  font-size: 0.9rem;
}
.related-sidebars h2 {
  font-family: var(--type-display);
  font-size: 1.1rem;
  color: var(--clay);
  margin: 0 0 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.related-sidebars ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.related-sidebars li {
  margin: 0.4rem 0;
  color: var(--ink);
}
.related-sidebars li a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--stone);
}
.related-sidebars li a:hover { color: var(--clay); border-bottom-color: var(--clay); }
.related-sidebars .meta { color: var(--muted); }

/* Sidebars index list */
.sidebar-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}
.sidebar-card {
  display: block;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--stone);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.15s ease;
}
.sidebar-card:hover { border-color: var(--clay); }
.sidebar-card .title {
  display: block;
  font-family: var(--type-display);
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.4rem;
}
.sidebar-card .subtitle {
  display: block;
  font-family: var(--type-body);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 0.6rem;
  line-height: 1.4;
}
.sidebar-card .meta {
  display: block;
  font-family: var(--type-ui);
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ===================== Audio player ===================== */

.session-audio {
  margin: 2rem 0 2.5rem;
  padding: 1.2rem 1.4rem;
  background: rgba(184, 74, 46, 0.04);
  border: 1px solid rgba(184, 74, 46, 0.18);
  border-radius: 4px;
}
.session-audio h3 {
  font-family: var(--type-display);
  font-size: 1.1rem;
  color: var(--ink);
  margin: 0 0 0.6rem;
  font-weight: 400;
}
.session-audio audio {
  width: 100%;
  margin-top: 0.6rem;
}
.session-audio .meta {
  font-family: var(--type-ui);
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* ===================== Download list ===================== */

.download-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--stone);
}
.download-list li {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--stone);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 1rem;
}
.download-list li a {
  font-family: var(--type-display);
  font-size: 1.15rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--clay);
}
.download-list li a:hover {
  color: var(--clay);
}
.download-list .filemeta {
  font-family: var(--type-ui);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--muted);
  text-transform: uppercase;
  margin-left: auto;
}
@media (max-width: 560px) {
  .download-list .filemeta { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- video */
/* One responsive frame, used by the pre-session video and by the gated
   exegetical key. The sixteen-by-nine box is the padding trick rather than
   aspect-ratio, because the pages that were hand-written used it and there is
   no reason to make the change visible. */
.video-frame {
  position: relative;
  padding-top: 56.25%;
  margin: 1.4rem 0;
  background: var(--ink);
}
.video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.video-part-label {
  font-family: var(--type-ui);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay);
  margin: 1.8rem 0 0;
}
.video-part-note {
  margin-top: -0.6rem;
}

/* ------------------------------------------------------- the code gate */
/* A soft lock on the teaching video. The styling should read as part of the
   page and not as a security barrier: a rule, a label, a field. Nothing
   padlocked, nothing red. */
.exegetical-key {
  margin: 2.6rem 0;
}
.code-gate {
  border-top: 1px solid var(--stone);
  border-bottom: 1px solid var(--stone);
  padding: 1.4rem 0 1.6rem;
  margin: 1.4rem 0;
}
.code-gate label {
  display: block;
  font-family: var(--type-display);
  font-size: 1.1rem;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.code-gate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: stretch;
  margin-top: 0.9rem;
}
.code-gate input {
  flex: 1 1 14rem;
  font-family: var(--type-ui);
  font-size: 1rem;
  padding: 0.6rem 0.75rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--stone);
  border-radius: 0;
}
.code-gate input:focus {
  outline: 2px solid var(--clay);
  outline-offset: 1px;
  border-color: var(--clay);
}
.code-gate button {
  font-family: var(--type-ui);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  padding: 0.6rem 1.2rem;
  color: #fff;
  background: var(--clay);
  border: 1px solid var(--clay);
  border-radius: 0;
  cursor: pointer;
}
.code-gate button:hover {
  background: var(--ink);
  border-color: var(--ink);
}
.code-gate-error {
  font-family: var(--type-ui);
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--clay);
  margin: 0.8rem 0 0;
  max-width: 46ch;
}

/* ===================== Images ===================== */
/* Nothing in this stylesheet constrained an image until 18 August 2026. A bare
   <img> therefore rendered at its own pixel size and pushed the page wider than
   the window: the Session 4 infographic is 2480 by 3507, the structural ones
   around 1536 by 2752, and Sessions 4, 6, 8 and 12 all overflowed horizontally.
   The reading-tools page escaped only because its four images carry inline
   widths, which is why that page looked right and the session pages did not.

   The treatment here is the one already approved on reading-tools: full column
   width, proportional height, and space above and below. Session 9 carries an
   inline max-width of 460px and keeps it, because an inline style wins; that is
   the one page where the infographic is deliberately smaller. */

img {
  max-width: 100%;
  height: auto;
}

.wrap img,
.wrap-wide img,
.wrap figure {
  display: block;
  margin: 2.5rem auto;
}

/* The infographics break out of the reading column.
   Prose reads best at 720px, which is why the column is 720px. An infographic
   is not prose: these are 1536 and 2480 pixels wide and dense with small type,
   and at 666px in the column the labels are barely legible on a laptop. So they
   are allowed the site's wider 1080px measure and stay centred on the page
   rather than on the column.

   No transform, because translateX of an odd width lands on a half pixel and
   softens a picture made of hairlines and 8pt type. The margin arithmetic does
   the same job exactly: half the column, less half the wider measure, clamped by
   the viewport so it never pushes the page sideways. 3rem of gutter is enough to
   clear a scrollbar, since 100vw includes one and the layout viewport does not. */
.wrap img,
.wrap figure {
  width: min(1080px, calc(100vw - 3rem));
  max-width: none;
  margin-left: calc(50% - min(540px, calc(50vw - 1.5rem)));
}

figure img {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

figcaption {
  font-family: var(--type-ui);
  font-size: 0.85rem;
  color: var(--muted);
  margin-top: 0.75rem;
}