/* ==========================================================================
   Maimonis Law LLC - base.css
   ONE stylesheet for every inner page of the black site.

   Sections 1-6 and 17-18 are copied from the homepage's own CSS
   (site/index.html) so inner pages match it exactly: same tokens, same
   header, same buttons, same eyebrow, same section rhythm, same footer,
   same breakpoints (1200 / 800 / 540).
   Sections 7-16 are the blocks the homepage does not have, drawn in the
   same language: black ground, #111113 panels, 1px #353538 rules, white
   Instrument Serif headings with light-blue italic <em>, Inter body,
   light-blue small labels, square corners everywhere.

   Rules of the house: no border-radius, no gold, no icons, no emojis.
   ========================================================================== */

/* 1. TOKENS (homepage values; --ink, --band, --line-strong, --measure added) */
:root{
  --black:#000;
  --surface:#111113;        /* panels */
  --band:#101012;           /* contact strip + footer ground (homepage footer) */
  --white:#fff;
  --silver:#c4c7cb;         /* short body text, eyebrows */
  --muted:#b1b5bb;          /* notes, captions */
  --ink:#d5d8dc;            /* LONG reading paragraphs */
  --blue:#a9dfff;           /* accents, small labels, buttons */
  --line:#353538;           /* 1px rules and panel borders */
  --line-strong:#414146;    /* rules between rows of a list */
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;
  --sans:Inter,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --measure:35.5rem;        /* about 68 characters of 17px Inter */
  color-scheme:dark;
}

/* 2. BASE (homepage) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:7rem;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--black);color:var(--white);font:400 1rem/1.65 var(--sans);-webkit-font-smoothing:antialiased}
button,a,summary{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote{margin:0}
h1,h2,h3,h4{text-wrap:balance;font-weight:400;overflow-wrap:break-word}
p,li,figcaption{text-wrap:pretty}
em{font-weight:400}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--blue);outline-offset:5px}
[hidden]{display:none!important}

/* 3. LAYOUT PRIMITIVES (homepage) */
.shell{width:min(100% - 7rem,1440px);margin-inline:auto}
.section{padding-block:6.5rem}
.eyebrow{font-size:.8125rem;font-weight:600;line-height:1.5;letter-spacing:.11em;text-transform:uppercase;color:var(--silver)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-8rem;left:1rem;z-index:100;padding:.8rem 1.25rem;background:white;color:black}
.skip-link:focus{top:1rem}
main:focus{outline:0}

/* A 1px rule separates every block section from whatever sits above it. */
main > * + .section{border-top:1px solid var(--line)}

/* 4. HEADER (homepage; tuned for the eight inner-page menu items) */
.site-header{position:relative;z-index:10;background:#000;border-bottom:1px solid #303033}
.header-inner{min-height:96px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem}
.brand{display:flex;align-items:center;gap:1rem;font-size:.875rem;letter-spacing:.06em;font-weight:600;white-space:nowrap}
.brand img{width:52px;height:52px}
.brand-llc{font-weight:400}
.site-menu{display:flex;flex-wrap:wrap;align-items:center;gap:2rem;font-size:.875rem;font-weight:500}
.site-menu a{padding:.7rem 0;border-bottom:1px solid transparent;white-space:nowrap;transition:color .18s}
.site-menu a:hover{color:var(--blue)}
.site-menu a[aria-current="page"]{color:var(--blue);border-bottom-color:var(--blue)}
.site-menu .nav-contact{border-bottom-color:var(--silver)}
.nav-contact span{margin-left:.7rem;color:var(--blue)}
.menu-toggle{display:none;min-height:44px;background:transparent;border:0;padding:.5rem 0;gap:1rem}

/* 5. BUTTONS AND LINKS (homepage) */
.primary-link{display:inline-flex;justify-content:space-between;align-items:center;gap:2rem;margin-top:1.8rem;padding:.85rem 1.2rem;background:var(--blue);color:#000;font-size:.875rem;font-weight:600;min-height:48px;max-width:100%;overflow-wrap:anywhere;transition:background .18s}
.primary-link:hover{background:white}
.primary-link span{font-size:1.45rem;font-weight:400;line-height:1}
.text-link{display:inline-flex;align-items:center;gap:2rem;border-bottom:1px solid var(--silver);font-size:.875rem;font-weight:600;padding:.6rem 0;margin-top:1.5rem;transition:color .18s,border-color .18s}
.text-link span{color:var(--blue);font-size:1.4rem;line-height:1}
.text-link:hover{color:var(--blue);border-color:var(--blue)}

/* 6. SECTION HEADING ROW (homepage) */
.section-top{display:flex;justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:2.7rem}
.section-top > div{min-width:0}
.section-top h2{font:400 clamp(3.1rem,5.2vw,5.3rem)/1.03 var(--serif);letter-spacing:-.02em;margin-top:.8rem}
.section-top h2 em{color:var(--blue)}
.section-deck{flex:0 1 auto;max-width:36ch;color:var(--silver);font-size:1.0625rem;line-height:1.7;padding-bottom:.3rem}

/* 7. PAGE HERO - eyebrow, big serif h1, one-paragraph lede */
.page-hero{padding-block:clamp(4.5rem,8vw,7.5rem) clamp(4rem,6.5vw,6rem)}
.page-hero .eyebrow{margin-bottom:1.6rem}
.page-hero h1{font:400 clamp(3.5rem,1.5rem + 5.3vw,7rem)/.98 var(--serif);letter-spacing:-.025em;max-width:11.5em}
.page-hero h1 em{color:var(--blue)}
.page-hero-sub{font:400 clamp(1.5rem,2.4vw,2.25rem)/1.25 var(--serif);color:var(--white);margin-top:1.4rem;max-width:32em}
.lede{font-size:clamp(1.125rem,1.45vw,1.3125rem);line-height:1.6;color:var(--ink);max-width:60ch;margin-top:2rem}
.lede + .lede{margin-top:1.1rem}
.page-hero .tiles{margin-top:clamp(3rem,5vw,4.5rem)}

/* 8. TILES - a row of 3: label, value, small line */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem clamp(1.5rem,3.5vw,3.5rem)}
.tile{min-width:0;padding-top:1.4rem;border-top:2px solid var(--blue)}
.tile-label{font:600 .75rem/1.5 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--blue)}
.tile-value{font:400 clamp(1.7rem,2.3vw,2.2rem)/1.12 var(--serif);letter-spacing:-.01em;color:var(--white);margin-top:.65rem}
.tile-note{font-size:.9375rem;line-height:1.6;color:var(--silver);margin-top:.7rem;max-width:44ch}

/* 9. CARDS - a grid of 2-4: small label, short title, one sentence */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.cards.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{display:block;min-width:0;padding:1.5rem 1.5rem 1.7rem;background:var(--surface);border:1px solid var(--line);color:var(--white)}
.card-label{font:600 .75rem/1.5 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.card-title{font:400 clamp(1.75rem,2.25vw,2.35rem)/1.08 var(--serif);letter-spacing:-.012em;margin-top:.8rem}
.card-text{font-size:1.0625rem;line-height:1.65;color:var(--silver);margin-top:.9rem;max-width:52ch}
a.card{transition:border-color .18s}
a.card:hover{border-color:var(--blue)}

/* 10. TIMELINE - stops with a title, a row of tag pills, one sentence */
.timeline{list-style:none;margin:0 0 0 4px;padding:0;max-width:46rem;border-left:1px solid var(--line-strong)}
.stop{position:relative;padding:0 0 2.75rem 2rem}
.stop:last-child{padding-bottom:0}
.stop::before{content:"";position:absolute;left:-5px;top:.7rem;width:9px;height:9px;background:var(--blue)}
.stop-title{font:400 clamp(1.7rem,2.1vw,2rem)/1.2 var(--serif);letter-spacing:-.01em}
.pills{display:flex;flex-wrap:wrap;gap:.45rem;list-style:none;margin:.9rem 0 0;padding:0}
.pill{display:inline-block;max-width:100%;padding:.3rem .7rem;border:1px solid #48484e;font-size:.8125rem;line-height:1.45;color:var(--silver)}
.stop > p{font-size:1.0625rem;line-height:1.7;color:var(--ink);margin-top:1rem;max-width:var(--measure)}

/* 11. RECORD CARDS - role label, case name, paragraph, bold result, optional link */
.records{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));gap:1rem}
.records.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.record{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.5rem 1.5rem 1.7rem;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--blue)}
.record-role{font:600 .75rem/1.5 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--blue)}
.record-name{font:400 clamp(1.7rem,2.1vw,2.1rem)/1.12 var(--serif);letter-spacing:-.012em;margin-top:.8rem}
.record > p{font-size:1.0625rem;line-height:1.7;color:var(--ink);margin-top:1rem}
.record > p strong{color:var(--white);font-weight:600}
.record > .record-role{margin-top:0;color:var(--blue);font-size:.75rem;line-height:1.5}
.record > .record-result{align-self:stretch;margin-top:auto;color:var(--white);font-weight:600;line-height:1.55}
.record > .record-result::before{content:"";display:block;height:1px;background:var(--line-strong);margin:1.4rem 0 1.1rem}
.record > .text-link{margin-top:auto;padding-top:1.9rem}
.record > .record-result + .text-link{margin-top:0}

/* 12. PROSE - h2 on the left, reading column on the right */
.prose{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:1.75rem clamp(2rem,6vw,6rem);align-items:start}
.prose > h2{font:400 clamp(2.3rem,3.3vw,3.25rem)/1.06 var(--serif);letter-spacing:-.018em}
.prose > h2 em{color:var(--blue)}
.prose > :only-child{grid-column:2}
.prose-body{min-width:0;max-width:var(--measure);font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.prose-body > * + *{margin-top:1.15rem}
.prose-body h3{font:400 clamp(1.6rem,2vw,1.9rem)/1.2 var(--serif);color:var(--white)}
.prose-body > * + h3{margin-top:2.4rem}
.prose-body h3 + *{margin-top:.6rem}
.prose-body > * + .pull,.prose-body > .pull + *{margin-top:2.25rem}
.prose-body > * + .timeline,.prose-body > * + .name-list{margin-top:1.75rem}
.prose-body > * + .primary-link{margin-top:1.8rem}
.prose-body > * + .text-link{margin-top:1.5rem}
.prose-body strong{color:var(--white);font-weight:600}
.prose-body a:not([class]){color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
.prose-body a:not([class]):hover{color:var(--white)}
.prose-body ul:not([class]){list-style:square;margin-bottom:0;padding-left:1.2rem}
.prose-body ul:not([class]) li{padding-left:.35rem}
.prose-body ul:not([class]) li + li{margin-top:.55rem}
.prose-body ul:not([class]) li::marker{color:var(--blue)}
.prose-body > .timeline,.prose-body > .name-list{max-width:none}
/* A reading column placed under another block (tiles, cards, records...). */
.section > * + .prose-body,.shell > * + .prose-body{margin-top:2.5rem}
.prose > .prose-body{margin-top:0}

/* 13. NAME LIST - each item begins with a bold name */
.name-list{list-style:none;margin:0;padding:0;max-width:var(--measure);border-top:1px solid var(--line-strong)}
.name-list li{position:relative;padding:1.05rem 0 1.05rem 1.6rem;border-bottom:1px solid var(--line-strong);font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.name-list li::before{content:"";position:absolute;left:0;top:calc(1.05rem + .85em - 3px);width:6px;height:6px;background:var(--blue)}
.name-list strong{color:var(--white);font-weight:600}

/* 14. SPLIT - text beside an image */
.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,6vw,6.5rem);align-items:center}
.split.media-first{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.split.top{align-items:start}
.split-copy{min-width:0}
.split-copy > h2{font:400 clamp(2.3rem,3.3vw,3.25rem)/1.06 var(--serif);letter-spacing:-.018em;margin:.8rem 0 1.5rem}
.split-copy > h2 em{color:var(--blue)}
.split-copy > .eyebrow + .prose-body{margin-top:1.2rem}
.split-media{min-width:0;margin:0}
.split-media img{width:100%;height:auto;border:1px solid #48484e;background:#080808}
.split-media.portrait img{aspect-ratio:4/5;object-fit:cover;object-position:50% 18%}
.split-media figcaption{font-size:.8125rem;line-height:1.5;color:var(--silver);padding-top:.9rem}

/* 15. PULL - a quote or pull-line */
.pull{max-width:62rem;margin:0;padding:.4rem 0 .4rem 1.5rem;border-left:2px solid var(--blue)}
.pull p{font:400 clamp(1.6rem,2.5vw,2.35rem)/1.4 var(--serif);color:#f1f2f4;text-wrap:pretty}
.pull p em{color:var(--blue)}
.pull-cite{display:block;margin-top:1.25rem;font:500 .9375rem/1.6 var(--sans);font-style:normal;color:var(--blue)}
.pull-cite span{display:block;color:var(--silver);font-weight:400;font-size:.8125rem}
.section > * + .pull,.shell > * + .pull{margin-top:3rem}

/* 16. SMALL PARTS - related-page links, notes */
.related{display:block}
.section > * + .related,.shell > * + .related{margin-top:3rem}
.related ul{display:flex;flex-wrap:wrap;gap:.25rem 2.75rem;list-style:none;margin:.6rem 0 0;padding:0}
.related .text-link{margin-top:.5rem}
.results-note{font-size:.8125rem;line-height:1.6;color:var(--muted);margin-top:1.5rem;max-width:92ch}

/* 17. CONTACT STRIP + FOOTER (homepage footer, split in two) */
.contact-strip{padding-block:5rem 4rem;background:var(--band);border-top:1px solid var(--line)}
.contact-strip .eyebrow{margin-bottom:.4rem}
.contact-email{display:inline-flex;align-items:center;gap:2rem;font:400 clamp(1.5rem,3vw,2.7rem)/1.4 var(--serif);border-bottom:1px solid var(--silver);padding:.7rem 0;max-width:100%;overflow-wrap:anywhere;transition:color .18s,border-color .18s}
.contact-email span{flex-shrink:0;color:var(--blue);font-family:var(--sans);font-weight:300}
.contact-email:hover{color:var(--blue);border-color:var(--blue)}
/* Related links and small print that follow the address in the source sit inside the strip. */
.contact-strip .related{margin-top:3.5rem}
.contact-strip .results-note{margin-top:2.25rem}
.site-footer{padding:0 0 2.5rem;background:var(--band)}
.footer-bottom{display:grid;grid-template-columns:1fr 2fr;gap:4rem;border-top:1px solid var(--line);padding-top:2rem;color:var(--silver);font-size:.8125rem;line-height:1.7}
.footer-bottom strong{font-weight:600;color:#fff}
.footer-bottom > div p{margin-top:.5rem}
.legal{max-width:85ch}
/* A page with no contact strip: the footer draws its own top edge. */
main:not(:has(> .contact-strip:last-child)) + .site-footer{padding-top:3rem;border-top:1px solid var(--line)}
main:not(:has(> .contact-strip:last-child)) + .site-footer .footer-bottom{border-top:0;padding-top:0}

/* 18. BREAKPOINTS (homepage: 1200 / 800 / 540; menu switches earlier because
       the inner pages carry eight items instead of six) */
@media(max-width:1499px){
  .site-menu{gap:1.5rem}
}
@media(max-width:1439px){
  .site-menu{gap:1.25rem;font-size:.8125rem}
}
@media(max-width:1360px){
  .header-inner{gap:0;padding-block:1rem}
  .js .menu-toggle{display:flex;align-items:center}
  .site-menu{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr));gap:0 1.5rem;margin-top:1rem;padding-top:.5rem;border-top:1px solid #303033;font-size:.875rem}
  .js .site-menu{display:none}
  .js .site-menu.is-open{display:grid}
  .site-menu > a{padding:.8rem 0;justify-self:start}
}
@media(max-width:1200px){
  .shell{width:calc(100% - 4rem)}
  .brand{gap:.75rem;font-size:.8125rem}
  .cards.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .cards.cols-3{grid-template-columns:minmax(0,1fr)}
  .prose{grid-template-columns:minmax(0,1fr)}
  .prose > :only-child{grid-column:auto}
  .split,.split.media-first{grid-template-columns:minmax(0,1fr);gap:2.5rem}
  .split-media{max-width:34rem}
}
@media(max-width:800px){
  html{scroll-padding-top:2rem}
  .records.cols-2{grid-template-columns:minmax(0,1fr)}
  .header-inner{min-height:84px}
  .brand img{width:46px;height:46px}
  .section{padding-block:4.5rem}
  .section-top{align-items:flex-start;gap:1.5rem}
  .section-deck{max-width:28ch}
  .section-top h2{font-size:3rem}
  .tiles{grid-template-columns:minmax(0,1fr);gap:2.25rem}
  .contact-strip{padding-block:4rem 3.25rem}
  .footer-bottom{gap:2rem}
}
@media(max-width:650px){
  .cards,.cards.cols-4{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:540px){
  .shell{width:calc(100% - 2.5rem)}
  .brand-llc{display:none}
  .section{padding-block:3.75rem}
  .section-top{display:block;margin-bottom:2rem}
  .section-top h2{font-size:clamp(2.4rem,11.5vw,2.9rem)}
  .section-deck{max-width:40ch;margin-top:1.25rem}
  .page-hero{padding-block:3.5rem 3.25rem}
  .page-hero .eyebrow{font-size:.75rem;margin-bottom:1.2rem}
  .page-hero h1{font-size:clamp(2.75rem,14.4vw,3.5rem);line-height:1}
  .page-hero-sub{font-size:1.4rem}
  .lede{margin-top:1.5rem}
  .card,.record{padding:1.4rem 1.3rem 1.55rem}
  .card-title{font-size:2rem}
  .stop{padding-left:1.4rem}
  .prose > h2,.split-copy > h2{font-size:2.3rem}
  .pull{padding-left:1.1rem}
  .pull p{font-size:1.5rem}
  .name-list li{padding-left:1.35rem}
  .related ul{gap:.25rem 2rem}
  .contact-strip{padding-block:3.5rem 2.75rem}
  .contact-email{gap:1rem;font-size:1.7rem}
  .footer-bottom{grid-template-columns:1fr;gap:1.5rem}
}
@media(max-width:360px){
  .contact-email{font-size:1.45rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}

/* ==========================================================================
   19-21. BLOCKS ADDED BY THE SUPERVISOR (Sept 17, 2026) for the two text-heavy
   pages, so they read as cards like the rest of the site. They change no words:
   each box holds source text exactly as written, in source order.
   ========================================================================== */

/* 19. POINTS - one source sentence per box */
.points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;list-style:none;margin:0;padding:0}
.point{min-width:0;padding:1.5rem 1.5rem 1.7rem;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--blue);font:400 clamp(1.4rem,1.55vw,1.65rem)/1.22 var(--serif);letter-spacing:-.005em;color:var(--white)}

/* 20. TOPICS - a heading and its paragraph(s) in one card */
.topics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.topics.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.topic{min-width:0;padding:1.75rem 1.75rem 1.95rem;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--blue)}
.topic > h2,.topic > h3{font:400 clamp(1.9rem,2.35vw,2.4rem)/1.08 var(--serif);letter-spacing:-.012em;color:var(--white)}
.topic > p{font-size:1.0625rem;line-height:1.7;color:var(--ink);margin-top:1rem;max-width:var(--measure)}
.topic > p + p{margin-top:.9rem}
.topic > p:first-child{margin-top:0}
.topic ul:not([class]){list-style:square;margin:1rem 0 0;padding-left:1.2rem;font-size:1.0625rem;line-height:1.65;color:var(--ink)}
.topic ul:not([class]) li{padding-left:.35rem}
.topic ul:not([class]) li + li{margin-top:.55rem}
.topic ul:not([class]) li::marker{color:var(--blue)}
.topic strong{color:var(--white);font-weight:600}
.topic > h3{font-size:clamp(1.7rem,2vw,2.05rem)}
.topic-lead{display:block;font:400 clamp(1.5rem,1.75vw,1.8rem)/1.2 var(--serif);letter-spacing:-.008em;color:var(--white);margin-bottom:.85rem}
.topic a:not([class]),.closing a:not([class]),.matters a:not([class]){color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
.topic a:not([class]):hover,.closing a:not([class]):hover,.matters a:not([class]):hover{color:var(--white)}

/* 21. MATTERS - rows that each begin with a case name; CLOSING - the page's last line */
.matters{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-strong)}
.matters li{position:relative;padding:1.2rem 0 1.2rem 1.6rem;border-bottom:1px solid var(--line-strong);font-size:1.0625rem;line-height:1.7;color:var(--ink)}
.matters li::before{content:"";position:absolute;left:0;top:calc(1.2rem + .95em - 3px);width:6px;height:6px;background:var(--blue)}
.matters .matter-name{font:400 clamp(1.45rem,1.7vw,1.7rem)/1.2 var(--serif);color:var(--white)}
.matters a.matter-name{color:var(--white);text-decoration:underline;text-decoration-color:var(--blue);text-decoration-thickness:1px;text-underline-offset:5px}
.matters a.matter-name:hover{color:var(--blue)}
.section > * + .closing,.shell > * + .closing{margin-top:2.5rem}
.closing{font:400 clamp(1.5rem,2.1vw,2rem)/1.35 var(--serif);color:#f1f2f4;max-width:48rem;padding-left:1.5rem;border-left:2px solid var(--blue)}
.closing a:not([class]){font-family:var(--serif)}

@media(max-width:1100px){
  .points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .topics.cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .points,.topics,.topics.cols-3{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:540px){
  .point{padding:1.3rem 1.25rem 1.45rem;font-size:1.4rem}
  .topic{padding:1.45rem 1.3rem 1.6rem}
  .topic > h2,.topic > h3{font-size:1.9rem}
  .matters li{padding-left:1.35rem}
  .closing{padding-left:1.1rem;font-size:1.45rem}
}

/* 22. FOOTER LINK - the live footer's Privacy link, carried into the black footer */
.footer-link{color:var(--silver);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.footer-link:hover{color:var(--blue)}

/* 23. ROOMS - a grid of boxes, each beginning with a name set in serif (In the Room) */
.rooms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;list-style:none;margin:0;padding:0}
.rooms li{min-width:0;padding:1.5rem 1.5rem 1.7rem;background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--blue);font-size:1.0625rem;line-height:1.65;color:var(--ink)}
.rooms li strong{font:400 clamp(1.5rem,1.75vw,1.8rem)/1.2 var(--serif);letter-spacing:-.008em;color:var(--white)}
/* A small source photo is never shown larger than it really is. */
.split-media.native img{width:auto;max-width:100%}
@media(max-width:1100px){.rooms{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.rooms{grid-template-columns:minmax(0,1fr)}}
@media(max-width:540px){.rooms li{padding:1.3rem 1.25rem 1.45rem}}
/* A lone paragraph beside a picture is set larger so it holds its side of the page. */
.split-copy.lead .prose-body{font-size:clamp(1.2rem,1.45vw,1.375rem);line-height:1.6;max-width:36em;color:var(--ink)}

/* 24. CASE PAGES (Pope, Harrell, Halters) - facts row, headed reading sections, result panel */
.tiles.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.tiles.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.tile-value.fact{font-size:clamp(1.35rem,1.7vw,1.7rem);line-height:1.2}
.tile-value.stat{font-size:clamp(3.4rem,6vw,5.6rem);line-height:1;color:var(--blue);letter-spacing:-.02em}
.prose-head{min-width:0}
.prose-head .eyebrow{margin-bottom:.9rem;color:var(--blue)}
.prose-head h2{font:400 clamp(2.3rem,3.3vw,3.25rem)/1.06 var(--serif);letter-spacing:-.018em}
.prose-head h2 em{color:var(--blue)}
.prose-body:has(> ul.cols-list){max-width:54rem}
.prose-body:has(> ul.cols-list) > p{max-width:var(--measure)}
.prose-body ul.cols-list{columns:2;column-gap:3rem}
.prose-body ul.cols-list li{break-inside:avoid}
.result-panel{padding:clamp(1.75rem,3.2vw,3rem);background:var(--surface);border:1px solid var(--line);border-top:2px solid var(--blue)}
.result-panel .eyebrow{color:var(--blue);margin-bottom:.9rem}
.result-panel h2{font:400 clamp(2.3rem,3.3vw,3.25rem)/1.06 var(--serif);letter-spacing:-.018em;margin-bottom:1.5rem}
.result-panel h2 em{color:var(--blue)}
.result-panel .prose-body{max-width:46rem;font-size:clamp(1.0625rem,1.25vw,1.1875rem)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2.5rem}
.actions .primary-link,.actions .text-link{margin-top:0}
.section > * + .actions,.shell > * + .actions{margin-top:2.75rem}
.actions + .results-note{margin-top:2rem}
@media(max-width:1100px){.tiles.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.tiles.cols-4,.tiles.cols-2{grid-template-columns:minmax(0,1fr)}.prose-body ul.cols-list{columns:1}}

/* 25. A link inside a page's opening paragraph reads as a link */
.lede a{color:var(--blue);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;overflow-wrap:anywhere}
.lede a:hover{color:var(--white)}

/* 26. WIDE FIGURE and ROLLING PHOTO STRIP (In the Room) */
.wide-figure{margin:0}
.wide-figure img{width:100%;height:auto;border:1px solid #48484e;background:#080808}
.reel{overflow:hidden;padding-block:1rem;border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.section > * + .reel,.shell > * + .reel{margin-top:3.5rem}
.reel-track{display:flex;gap:1rem;width:max-content;animation:reel-roll var(--reel-seconds,48s) linear infinite;will-change:transform}
.reel:hover .reel-track,.reel.is-paused .reel-track{animation-play-state:paused}
.reel img{display:block;height:clamp(240px,33vw,460px);width:auto;max-width:none;border:1px solid #48484e;background:#080808}
@keyframes reel-roll{to{transform:translateX(calc(-50% - .5rem))}}
.reel-toggle{background:transparent;border:0;border-bottom:1px solid var(--silver);color:var(--white);padding:.6rem 0;margin-top:1rem;font:600 .875rem/1.4 var(--sans)}
.reel-toggle:hover{color:var(--blue);border-color:var(--blue)}
.reel + .reel-toggle + .prose-body{margin-top:2rem}

/* 27. HERO WITH PORTRAIT (In the Room) - words on the left, her portrait on the right */
.hero-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(2rem,5vw,5.5rem);align-items:center}
.hero-split .hero-copy{min-width:0}
.hero-note{font-size:1.0625rem;line-height:1.7;color:var(--silver);max-width:62ch;margin-top:1.4rem}
.hero-portrait{margin:0;min-width:0}
.hero-portrait img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%;border:1px solid #48484e;background:#080808}
.hero-portrait figcaption{font-size:.8125rem;line-height:1.5;color:var(--silver);padding-top:.9rem}
@media(max-width:900px){.hero-split{grid-template-columns:minmax(0,1fr)}.hero-portrait{max-width:30rem}}