/* ─── Case profiles page ─── */
/* Two-column shell: sticky index rail + prose column. The rail only exists
   at >=1180px; below that, the Contents list at the top is the navigation. */
.dossier { max-width: 1220px; margin: 0 auto; }
.dossier-grid { display: block; }
@media (min-width: 1180px) {
  .dossier-grid { display: grid; grid-template-columns: 210px minmax(0,1fr); gap: 0 64px; align-items: start; }
}

/* Contents */
.case-toc { margin: 0 0 72px; padding: 0 0 36px; border-bottom: 1px solid rgba(117,38,31,0.20); }
.case-toc > p { font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.42em; text-transform:uppercase; color:var(--crimson); margin:0 0 6px; }
.case-toc ol { list-style:none; margin:0; padding:0; }
.case-toc li { border-top:1px solid rgba(117,38,31,0.12); }
.case-toc li:first-child { border-top:0; }
.case-toc a { display:grid; grid-template-columns:34px minmax(0,1fr); align-items:baseline; gap:0 14px;
              padding:11px 0; text-decoration:none; color:#3a3a3a; transition:color .2s ease; }
.case-toc a:hover, .case-toc a:focus-visible { color:var(--crimson); }
.case-toc .toc-num { font-family:'Cinzel',serif; font-size:12px; color:var(--crimson); letter-spacing:0.08em; }
.case-toc .toc-title { font-family:'Cinzel',serif; font-size:16px; letter-spacing:0.01em; }

/* Sticky rail */
.case-rail { display: none; }
@media (min-width: 1180px) {
  .case-rail { display:block; position:sticky; top:118px; max-height:calc(100vh - 150px); overflow-y:auto; }
  .case-rail p.rail-label { font-family:'Cinzel',serif; font-size:10px; letter-spacing:0.36em;
                            text-transform:uppercase; color:var(--crimson); margin:0 0 14px; }
  .case-rail ol { list-style:none; margin:0; padding:0; border-left:1px solid rgba(117,38,31,0.18); }
  .case-rail li a { display:grid; grid-template-columns:24px minmax(0,1fr); gap:0 8px; align-items:baseline;
                    padding:12px 0 12px 14px; margin-left:-1px; border-left:2px solid transparent;   /* 7px gave a 28px hit area */
                    font-family:'Josefin Sans',sans-serif; font-size:11.5px; letter-spacing:0.10em;
                    text-transform:uppercase; color:#5f5f5f; text-decoration:none;   /* AA; #7a7a7a was 3.69:1 */
                    transition:color .2s ease, border-color .2s ease; }
  .case-rail li a .r-num { font-family:'Cinzel',serif; font-size:10px; color:#6b615b; } /* AA; #b3a9a2 was 1.98:1 */
  .case-rail li a:hover { color:var(--crimson); }
  .case-rail li a.is-active { color:var(--crimson); border-left-color:var(--crimson); }
  .case-rail li a.is-active .r-num { color:var(--crimson); }
  .case-rail .rail-foot { font-family:'Inter',sans-serif; font-style:italic; font-weight:300;
                          font-size:11px; color:#9a9a9a; margin:18px 0 0; padding-left:14px; }
}

/* Sections */
.case-section { margin-bottom: 84px; scroll-margin-top: 118px; }
.case-section:last-of-type { margin-bottom: 0; }
.case-head { margin-bottom: 26px; }
.case-head .sec-num { font-family:'Cinzel',serif; font-size:11px; letter-spacing:0.34em;
                      text-transform:uppercase; color:var(--crimson); margin:0 0 10px; }
.case-head h2 { font-family:'Cinzel',serif; font-weight:500; font-size:clamp(24px,2.6vw,32px);
                color:var(--charcoal); margin:0 0 12px; text-wrap:balance; }

/* Prose */
.case-intro p, .case-body p { font-family:'Inter',sans-serif; font-weight:400; font-size:16px;
                              line-height:1.75; color:#3a3a3a; margin:0 0 16px;
                              max-width:70ch; text-wrap:pretty; }
.case-intro p:last-child, .case-body p:last-child { margin-bottom:0; }
.case-intro { margin-bottom: 30px; }

/* Entries — numbered, hairline-separated */
.case-entries { counter-reset: matter; }
.case-entry { counter-increment: matter; display:grid; grid-template-columns:44px minmax(0,1fr);
              gap:0 16px; padding:24px 0; border-top:1px solid rgba(117,38,31,0.16); }
.case-entry:first-of-type { border-top:0; padding-top:4px; }
.case-entry::before { content: counter(matter, decimal-leading-zero);
                      font-family:'Cinzel',serif; font-size:12px; color:#b3a9a2;
                      letter-spacing:0.06em; padding-top:4px; }
/* the ::before numeral occupies column 1; name and body both sit in column 2 */
.case-entry > .case-name, .case-entry > .case-body { grid-column: 2; }
.case-name { font-family:'Cinzel',serif; font-weight:500; font-size:18px; letter-spacing:0.02em;
             color:var(--charcoal); margin:0 0 9px; text-wrap:balance; }
.case-name cite { font-style:italic; }

/* Foot of each section */
.case-back { margin:26px 0 0; text-align:right; }
.case-back a { font-family:'Josefin Sans',sans-serif; font-size:10px; letter-spacing:0.22em;
               text-transform:uppercase; color:#6b6b6b; text-decoration:none; }  /* #9a9a9a was 2.42:1 */
.case-back a:hover { color:var(--crimson); }

.case-note { max-width:760px; margin:88px auto 0; text-align:center; font-family:'Inter',sans-serif;
             font-style:italic; font-weight:300; font-size:14px; line-height:1.8; color:#6b6b6b; }

@media (max-width: 900px) {
  .case-toc a { grid-template-columns:28px minmax(0,1fr); }
  .case-section { margin-bottom:60px; }

}
@media (max-width: 600px) {
  .case-entry { grid-template-columns:30px minmax(0,1fr); gap:0 12px; padding:20px 0; }
  .case-toc .toc-title { font-size:15px; }
}

/* ─── "Read more" expanders — REMOVED 2026-09-01 ───
   Added 2026-08-29 at the client's request; withdrawn at his request:
   "For the Selected Case Profile, I want it all in – no read more. For some
   of the athletes on what I see, the type fades at the end." The clamp
   (max-height + mask-image) and its button are gone; every profile now
   sets in full, with no fade. */

/* ─── 2026-09-02 POLISH (page-local) ─── */
.case-entry::before { color: #6b615b; }                               /* #b3a9a2 was 1.98:1 on cream */
.case-back { max-width: 766px; }                                      /* right edge of the 70ch measure, not of the column */
.case-back a { display: inline-block; font-size: 11px; padding: 17px 0 17px 20px; margin: -17px 0; }   /* 45px target, same look */
.case-section, .case-toc { scroll-margin-top: 22px; }                 /* scroll-padding (96) + this = the 118px rail top; was 118 + 96 */
.case-toc > p { margin-bottom: 14px; }
.case-toc li { border-top-color: rgba(117,38,31,0.16); }
.case-head h2 { line-height: 1.2; }
@media (min-width: 1180px) {
  .case-rail { overflow: visible; max-height: none; }                 /* the scroll box clipped focus rings */
  .case-rail p.rail-label { font-size: 11px; }
  .case-rail li a:hover .r-num, .case-rail li a:focus-visible .r-num { color: var(--crimson); }
}
@media (max-width: 600px) { .case-toc a { padding: 12px 0; } }

/* ─── 2026-09-24 — the committee still under the Meech Lake entry ───
   A still from 1987 committee footage Tim wants shown with this entry. Kept in
   colour (a colour original), held to a modest width because the source is a
   low-resolution video frame, and captioned like the archival print on About. */
.case-body .case-plate { margin: 22px 0 4px; max-width: 520px; }
.case-plate img {
  display: block; width: 100%; height: auto; border-radius: 2px;
  box-shadow: 0 22px 48px -30px rgba(42,42,42,0.5);
}
.case-plate figcaption {
  font-family: 'Inter', sans-serif; font-style: italic; font-weight: 400;
  font-size: 13px; line-height: 1.6; color: #5c5c5c;
  margin-top: 12px; padding-left: 12px; border-left: 2px solid rgba(117,38,31,0.35);
  text-wrap: pretty;
}
@media print { .case-plate img { box-shadow: none; } }

/* ─── 2026-09-25 — the committee still, restored ───
   The 24 Sept call: Tim asked for the still to be cleaned up with AI, and Kiarash
   told him it would be made "to fit there a little bit more cleanly". The restored
   frame (1288px) can carry the full measure of the entry's text, so the plate now
   ends where the paragraph above it ends (the same 70ch of 16px Inter) instead
   of stopping short of it at 520px. */
.case-body .case-plate { max-width: 70ch; font-family: 'Inter', sans-serif; font-size: 16px; }

/* ══════════════════════════════════════════════════════════════════
   2026-09-26 — LAID OUT FOR ITS LENGTH
   Kiarash: the page is long and the reader must always know where they
   are. Nothing in the prose changes. The ten Parts were barely louder than
   the matters inside them (an 11px label and a 32px heading over 18px case
   names), so on a 21-screen page the chapters did not read as chapters.
   Each Part now opens like one: a full-width rule, more air above it, a
   larger heading, and its numeral set large in the outer margin, where a
   printed folio sits. The numeral is generated from data-num (no new text;
   "Part VII" is still the label) and is the thing the eye catches in a
   fast scroll. The running head, the folio rule and the rail's spine are
   assets/css/folio.css.
   ══════════════════════════════════════════════════════════════════ */

/* Contents: two columns from tablet up, like Testimonials. Every row keeps
   its hairline so both columns start alike; the index no longer needs its
   own closing rule, because every Part now opens with one. */
.case-toc { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 860px) {
  .case-toc ol { columns: 2; column-gap: 56px; }
  .case-toc li { break-inside: avoid; }
  .case-toc li:first-child { border-top: 1px solid rgba(117,38,31,0.16); }
}

/* The chapter opener */
.case-section { margin-bottom: 120px; }
.case-section:last-of-type { margin-bottom: 0; }
.case-head {
  position: relative;
  padding: 40px 148px 0 0;           /* the right margin is the numeral's: "VIII" is 1.83em wide */
  margin-bottom: 34px;
  border-top: 1px solid rgba(117,38,31,0.30);
}
.case-head::after {
  content: attr(data-num);
  position: absolute; right: 0; top: 34px;
  font-family: 'Cinzel', serif; font-weight: 400;
  font-size: 72px; line-height: 1; letter-spacing: 0.02em;
  color: rgba(117,38,31,0.20);
  pointer-events: none;
}
.case-head .sec-num { margin-bottom: 14px; }
.case-head h2 { font-weight: 400; font-size: clamp(30px, 3.2vw, 42px); line-height: 1.16; letter-spacing: 0.01em; margin-bottom: 0; }
.case-intro { margin-bottom: 36px; }

@media (max-width: 900px) {
  .case-section { margin-bottom: 88px; }
  .case-head { padding: 32px 118px 0 0; margin-bottom: 28px; }
  .case-head::after { top: 26px; font-size: 56px; }
}
@media (max-width: 600px) {
  .case-section { margin-bottom: 72px; }
  .case-head { padding: 28px 72px 0 0; }
  .case-head::after { top: 24px; font-size: 34px; }
  .case-head h2 { font-size: 27px; }
}