/* whoisallah.org.uk · refine.css · wave 32 design pass (12 Nov 2026)
   Load AFTER style.css, p1a.css, engage.css and page <style> blocks (i.e. last link in <head>, or append to style.css
   AND keep the !important flags). Scoped to existing classes. No HTML needed for sections 1-9; section 10 styles
   the new Scripture tab bar described in FIXES.md (HTML change H1).
   Sections: 1 tokens · 2 one left edge · 3 square corners · 4 button system · 5 toggles, tags, badges ·
   6 sub-nav row (.hubnav) · 7 grids without orphans · 8 equal cards and rails · 9 page fixes · 10 Scripture tabs */

/* 1 ─ TOKENS ─────────────────────────────────────────────────────────────── */
:root{
  --ink:#111; --paper:#fff; --mute:#555; --line:#e2e2e2; --line-2:#cfcfcf; --wash:#f6f6f6;
  --gut:clamp(16px,4vw,56px);                                   /* same as .pad */
  --edge:max(var(--gut), calc((100% - 1360px) / 2 + var(--gut))); /* left/right edge of every .pad.wrap column */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gap:clamp(16px,2vw,28px);            /* one gutter for every card grid */
  --btn-h:48px; --btn-h-sm:40px;
  --wgr:0px; --r:0px; --rh:0px;          /* kill the Design Lab / engage radius variables at source */
}

/* 2 ─ ONE LEFT EDGE ──────────────────────────────────────────────────────────
   Today the site has three or four left edges at 1280px: heroes and .hubnav at 38px, content at 51px, nested
   .pad at 102px, "In pictures" at 0, Scripture/Prophet heroes full-bleed. Everything now sits on --edge. */
.pad .pad,.pr-sec .pad,.w20 .pad{padding-left:0;padding-right:0}                            /* nested .pad doubled the gutter (names, prophets, bee) */
.hero:not(.gh-hero){margin-left:var(--edge)!important;margin-right:var(--edge)!important}
.hero.scr-full{margin-top:18px!important}                            /* Scripture and Prophet heroes were full-bleed */
.hubnav,.eprail,.theatre{margin-left:var(--edge)!important;margin-right:var(--edge)!important}
.eprail .hd,.eprail .eprow,.hubmore{padding-left:0!important;padding-right:0!important}
.hubfeat{margin-left:0!important;margin-right:0!important}
.inpics{padding-left:var(--edge);padding-right:var(--edge)}
:is(.pad,.wrap,.pr-sec) .inpics{padding-left:0;padding-right:0}
.inpics>h2{font:400 clamp(36px,4.4vw,56px)/1 'Libre Caslon Display',Georgia,serif;margin:0 0 22px}
.g{gap:calc(var(--gap) + 8px) var(--gap)}
.sec{padding-top:var(--s8)}
.sec+.sec{margin-top:var(--s5)}

/* 3 ─ SQUARE CORNERS, EVERYWHERE ─────────────────────────────────────────────
   House rule (wave 26, museum gallery). 99px pills, 10-14px card radii and the --wgr panels all go.
   Only true circles stay round: icon-only play and close buttons, numbered discs. */
body *:not(svg):not(svg *){border-radius:0!important}
.play,.yt-embed .pl,.cs-p,.pl-x,.rset>summary,.hq button,.hsearch,.scr-layer .n,.scr-layer .pm,.vp .vp-x,.rb{border-radius:50%!important}

/* 4 ─ BUTTON SYSTEM ──────────────────────────────────────────────────────────
   primary  = solid ink            .btn, .pron.dark, .scr-play, .crumb-next, .wg-ask button
   secondary= 1.5px outline         .btn.alt, .pron, .pron.alt, .w20-go, .upnext .go, .menu summary
   text     = underlined link + →   .sh .all, .scr-door .go, .show-btns .btn.alt, .mm2-all
   On dark grounds (hero, Scripture doors, theatre, dark panels) the pair inverts. */
.btn,.pron,.scr-play,.crumb-next,.w20-go,.upnext .go,.mstart,.fk-band .go,.vp .vp-b a,.vp .vp-b button{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--btn-h);padding-left:24px;padding-right:24px;
  font:600 15px/1.2 Inter,system-ui,sans-serif;letter-spacing:.01em;text-decoration:none;white-space:normal;text-align:center;max-width:100%;padding-top:10px;padding-bottom:10px;
  border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;
  transition:background-color .15s,color .15s,border-color .15s}
.btn:hover,.pron.dark:hover,.scr-play:hover,.crumb-next:hover{background:#333;border-color:#333;color:#fff}
.btn.alt,.pron,.pron.alt,.w20-go,.upnext .go{background:transparent;color:var(--ink)}
.btn.alt:hover,.pron:hover,.w20-go:hover{background:var(--ink);color:var(--paper)}
.pron.dark,.pron.on{background:var(--ink);color:var(--paper)}
.pron.sm{min-height:32px;padding:0 12px;font-size:12px}
.crumb-next{min-height:var(--btn-h-sm);padding:0 18px;font-size:14px}
/* on dark */
.hero .btn,.hero .pron,.scr-door .btn{background:#fff;color:var(--ink);border-color:#fff}
.hero .btn:hover,.hero .pron:hover{background:#e9e9e9;border-color:#e9e9e9;color:var(--ink)}
.hero .btn.alt,.hero .pron.alt,.hero .pron:not(:first-child),.theatre .w20-go,.upnext .go,.panel.dark .btn.alt,
.w20s .w20-go,.hubfeat .btn.alt{background:transparent;color:#fff;border-color:#fff}  /* museum rule made hero outlines black-on-black */
.hero .btn.alt:hover,.hero .pron.alt:hover,.hero .pron:not(:first-child):hover{background:#fff;color:var(--ink)}
/* text buttons */
.sh .all,.scr-door .go,.show-btns .btn.alt,.mm2-all,.hubfeat .go{
  background:none!important;border:0!important;padding:0!important;min-height:44px;color:inherit!important;
  font:600 15px/1.2 Inter,system-ui,sans-serif;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.sh .all:hover,.scr-door .go:hover,.show-btns .btn.alt:hover{text-decoration-thickness:2px}
.btns,.show-btns{gap:var(--s3)}
/* utility controls on media: small square, not pill */
.herop,.vidctl,.gh-media .herop{min-height:40px;padding:0 14px;font:500 13px Inter,sans-serif;background:rgba(17,17,17,.6);border:1px solid rgba(255,255,255,.7);color:#fff}
/* header bits */
.menu summary{padding:0 16px;min-height:40px;display:inline-flex;align-items:center}
.hq{height:40px;border-color:var(--line-2)}
.mstart{width:100%}

/* 5 ─ TOGGLES, FILTERS, TAGS, BADGES ─────────────────────────────────────────
   Toggles (filter chips, "Read: In order / One at a time", reading settings, tab bars) become square 40px
   segments with a hairline border; the selected one fills ink. Tags are small caps labels, not lozenges. */
.chips button,.tabbar button,.rbtns button,.pbar div a,.wg-chips a,.mq-chip,.qh-chip,.ng-chips button,.kp-h,
.cyq .btns button,.chip,a.chip,.tog button,.seg button{
  min-height:var(--btn-h-sm);padding:0 14px;border:1px solid var(--line-2)!important;background:#fff;color:var(--ink);
  font:500 14px/1.2 Inter,system-ui,sans-serif;display:inline-flex;align-items:center;text-decoration:none}
.chips button:hover,.tabbar button:hover,.qh-chip:hover,.ng-chips button:hover,.wg-chips a:hover,a.chip:hover,.kp-h:hover{border-color:var(--ink)!important}
.chips button[aria-pressed=true],.tabbar button[aria-selected=true],.rbtns button[aria-pressed=true],.pbar div a[aria-current],
.qh-chip[aria-pressed=true],.ng-chips button[aria-pressed=true],.kp-h[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)!important}
.chips,.wg-chips,.ng-chips{gap:6px}
.kp-h{min-height:32px;font-size:12px}
.badge,.status,.chip-pr,.tc,.w20-dp,.prc .soon,.tc-m,.show-meta .badge{
  border-radius:0;padding:3px 7px;font:600 10.5px/1.3 Inter,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.badge{border:1px solid currentColor}
.ng-search input,.wg-ask input,.qh-f input,.qh-ask input{border-color:var(--line-2)}

/* 6 ─ SUB-NAV ROW (.hubnav "Also in …") ─────────────────────────────────────
   Was 10 outlined pills in three ragged rows (desktop) and a squeezed label + one clipped pill (phone).
   Now a quiet ruled index line. When the mega-menu ships, remove .hubnav from pages (FIXES.md H2). */
.hubnav{display:flex!important;flex-wrap:wrap!important;align-items:center;gap:0 28px!important;margin-top:0!important;padding:10px 0;
  border-bottom:1px solid var(--line)}
.hubnav>.kick{flex:0 0 100%;margin:6px 0 0!important;font:600 11px/1.3 Inter,sans-serif;letter-spacing:.14em;color:var(--mute)}
.hubnav a{border:0!important;padding:0!important;min-height:44px;background:none!important;color:var(--ink)!important;
  font:500 15px/1.2 Inter,sans-serif;text-decoration:none;display:inline-flex;align-items:center;border-bottom:2px solid transparent!important}
.hubnav a:hover,.hubnav a[aria-current]{border-bottom-color:var(--ink)!important}
@media(max-width:700px){
  .hubnav{flex-wrap:wrap!important;overflow:visible!important;gap:0 20px!important;padding-bottom:10px!important}
  .hubnav>.kick{flex-basis:100%}
  .hubnav a{white-space:nowrap}
}

/* 7 ─ GRIDS WITHOUT ORPHANS ──────────────────────────────────────────────────
   3-up and 4-up card grids are rebuilt on 6 and 12 tracks so a short last row widens to fill the row:
   3-up: 4 cards → 2+2, 5 → 3+2, 7 → 3+2+2.  4-up: 5 → 3+2 under 4, 6 → 4+2, 7 → 4+3.
   Grids that carry their own inline grid-template-columns are left alone. */
@media(min-width:701px){
  .g3:not([style*="grid-template"]),.together,.watchg{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .g3:not([style*="grid-template"])>*,.together>*,.watchg>*{grid-column:span 2}
  .g3:not([style*="grid-template"]):has(>:last-child:nth-child(3n+1))>:nth-last-child(-n+4),
  .g3:not([style*="grid-template"]):has(>:last-child:nth-child(3n+2))>:nth-last-child(-n+2),
  .together:has(>:last-child:nth-child(3n+1))>:nth-last-child(-n+4),
  .together:has(>:last-child:nth-child(3n+2))>:nth-last-child(-n+2),
  .watchg:has(>:last-child:nth-child(3n+1))>:nth-last-child(-n+4),
  .watchg:has(>:last-child:nth-child(3n+2))>:nth-last-child(-n+2){grid-column:span 3}
}
@media(min-width:761px){
  .g4:not([style*="grid-template"]),.pi-grid,.pr-gal,.scr-links,.allgames,.pics{grid-template-columns:repeat(12,minmax(0,1fr))!important}
  .g4:not([style*="grid-template"])>*,.pr-gal>*,.pi-grid>*,.scr-links>*,.allgames>*,.pics>*{grid-column:span 3}
  :is(.g4:not([style*="grid-template"]),.pi-grid,.pr-gal,.pr-gal,.scr-links,.allgames,.pics):has(>:last-child:nth-child(4n+1))>:nth-last-child(-n+5){grid-column:span 4}
  :is(.g4:not([style*="grid-template"]),.pi-grid,.pr-gal,.pr-gal,.scr-links,.allgames,.pics):has(>:last-child:nth-child(4n+1))>:nth-last-child(-n+2){grid-column:span 6}
  :is(.g4:not([style*="grid-template"]),.pi-grid,.pr-gal,.pr-gal,.scr-links,.allgames,.pics):has(>:last-child:nth-child(4n+2))>:nth-last-child(-n+2){grid-column:span 6}
  :is(.g4:not([style*="grid-template"]),.pi-grid,.pr-gal,.pr-gal,.scr-links,.allgames,.pics):has(>:last-child:nth-child(4n+3))>:nth-last-child(-n+3){grid-column:span 4}
  /* exactly three link tiles (Scripture "Hear all three") fill the row */
  .scr-links:has(>:nth-child(3):last-child)>*{grid-column:span 4}
}
@media(min-width:761px) and (max-width:1100px){.pi-grid{grid-template-columns:repeat(12,minmax(0,1fr))!important}}
/* two-up grids on tablets and phones: an odd last card spans the row */
@media(min-width:561px) and (max-width:700px){
  .g3:not([style*="grid-template"])>:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:760px){
  .g4:not([style*="grid-template"])>:last-child:nth-child(odd):not(:only-child){grid-column:1/-1}
}
/* Scripture picture gallery: first picture is 2x2, so 8 pictures left one hole; the last one widens */
.scr-gal:has(>figure:nth-child(8):last-child)>figure:last-child{grid-column:span 2}
.scr-gal:has(>figure:nth-child(8):last-child)>figure:last-child button{aspect-ratio:8/5}
/* the 9 "start from where you are" doors: always 3x3 or 1 column, never 2+2+2+2+1 */
@media(min-width:561px) and (max-width:900px){.wsgrid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ws{min-height:150px}}

/* 8 ─ EQUAL CARDS AND RAILS ──────────────────────────────────────────────────
   Titles were landing on different baselines because the small-caps line above them runs to 1, 2 or 6 lines.
   Reserve two lines for it and clamp it; clamp titles to 3 and blurbs to 3. Same in the video rails. */
@media(min-width:701px){
  .g .card .k,.rail .wcard>.k,.eprow .ep small{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
  .g .card .k{min-height:calc(2 * 1.45em);line-height:1.45}
  .rail .wcard>.k{min-height:calc(2 * 1.45em);line-height:1.45}
}
.card .t,.rail .wcard>.t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.rail .wcard>.d{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.card{height:100%}
/* episode rails ("In this series"): title and blurb weight */
.eprow .ep b{font-size:22px}
.eprow .ep small{-webkit-line-clamp:3}
/* name-page "Start with what we know": the dark 4th episode ran 300px taller than its row */
.eps{align-items:stretch}
.eps .ep.brk p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:9;overflow:hidden}
/* rail scroll arrows sat on top of card text; pin them to the picture band */
.railwrap:has(.wcard) .rb{top:80px!important;transform:translateY(-50%)}

/* 9 ─ PAGE FIXES ─────────────────────────────────────────────────────────── */
/* phones: hero actions stack as one even column instead of three different widths */
@media(max-width:560px){
  .hero .btns>.btn,.hero .btns>.pron,.hero .show-btns>.btn:not(.alt),.gh-hero .btns>.btn{flex:1 1 100%;justify-content:center}
  .hero .btns{width:100%}
}
/* section header: on phones the "All …" link squeezed the heading into a 2-column wrap */
.sh{flex-wrap:wrap}
.sh>div:first-child{flex:1 1 420px;min-width:0}
/* hero with series meta (Watch, Thanks, Play, Kids, Questions): meta above, one row of actions */
.hero-in:has(>.show-meta){display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s5)}
.hero-in:has(>.show-meta)>*{flex:0 0 100%}
.hero-in:has(>.show-meta)>.show-meta{order:1;margin:18px 0 0}
.hero-in:has(>.show-meta)>.btns,.hero-in:has(>.show-meta)>.show-btns{order:2;flex:0 0 auto;margin-top:22px}
.show-btns:has(>.show-cont[href="#"])>.show-cont[href="#"]{display:none}
.show-btns .btn.alt{color:#fff!important}
/* home + kids "A Name for today": one centred label, not centred Arabic with left-hung buttons */
.wg-name{text-align:center}
.wg-name .wg-play,.wg-name .pron{margin-left:auto;margin-right:auto}
.wg-name .wg-l,.wg-name .wg-go{justify-content:center}
/* Thanks: the Watch block was nested inside a section header (.sh) and jammed into the next heading */
.sh:has(.w20){display:block}
.sh .w20s{padding:0 0 var(--s7)!important}
.w20-g:has(>figure:only-child)>figure{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s6);align-items:center}
.w20-g:has(>figure:only-child)>figure>.w20-k{grid-column:1/-1;margin:0}
@media(max-width:760px){.w20-g:has(>figure:only-child)>figure{grid-template-columns:1fr}}
/* Scripture doors: titles on one baseline; script name becomes an emblem; credit stays a whisper */
.scr-door .do{position:absolute;top:var(--s6);left:26px;font-size:44px;line-height:1;opacity:.92}
.scr-door p{min-height:calc(3 * 1.5em)}
.scr-door .go{margin:14px 26px 26px!important;color:#fff!important}
.scr-door .cr{font-size:10.5px;opacity:.6}
/* Scripture book pages: the blue/rose/gold tinted rounded quote panels and disc numbers read as another site */
.scr-layer .ep-q,.scr-acc-t .ep-q,.scr-acc-b .ep-q,.scr-acc-q .ep-q{background:var(--wash)!important}
/* "Tonight" and "Free documentary of the day" panel: hairline box, no radius, equal halves */
.wg-tonight,.wg-game,.td-g>.wg,.wg-qod,.qh-qod .wg-qod{border-color:var(--line)!important;box-shadow:none}
.hub-w .wg-game{max-width:none}
/* kids/questions widget pair hung left with the right half empty: give them the full column */
.td-g.td-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:var(--gap);align-items:stretch}
@media(max-width:860px){.td-g.td-2{grid-template-columns:1fr}}
/* F-ILM banner and theatre: align with the column, square */
.theatre{padding:clamp(16px,2vw,28px)}
/* Prophets "three tellings": an empty column (no New Testament telling) printed a blank third box */
.tl-g>.tl-c:has(>.tl-k+p:empty:last-child){display:none}
.tl-g:has(>.tl-c>.tl-k+p:empty:last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
/* phone safety: no sideways scroll from 404/search forms */
main form,.ftr form{max-width:100%}
main form input{min-width:0}

/* 10 ─ SCRIPTURE SECTION TABS (needs HTML change H1) ─────────────────────────
   <nav class="scr-tabs pad wrap" aria-label="The three books">
     <a href="…/torah/index.html" aria-current="page"><span lang="he">תורה</span>The Torah and the Hebrew Bible</a>
     <a href="…/bible/index.html"><span>Βίβλος</span>The Bible</a>
     <a href="…/quran/index.html"><span lang="ar">القرآن</span>The Qur'an</a>
     <a href="…/listen.html"><span>♪</span>Listen to all three</a></nav> */
.scr-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--ink);margin:var(--s5) var(--edge) 0!important;padding:0!important;max-width:none!important}
.scr-tabs a{display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-height:84px;padding:14px 16px 12px;
  text-decoration:none;color:var(--mute);border-bottom:3px solid transparent;margin-bottom:-1px;
  font:400 clamp(17px,1.6vw,22px)/1.15 'Libre Caslon Display',Georgia,serif;border-left:1px solid var(--line)}
.scr-tabs a:first-child{border-left:0;padding-left:0}
.scr-tabs a>span{font:400 20px/1 'Amiri','Frank Ruhl Libre',serif;color:var(--mute)}
.scr-tabs a:hover{color:var(--ink);background:var(--wash)}
.scr-tabs a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
@media(max-width:700px){
  .scr-tabs{grid-template-columns:1fr 1fr}
  .scr-tabs a{min-height:60px;font-size:16px;padding:12px 12px 10px}
  .scr-tabs a:nth-child(odd){border-left:0;padding-left:0}
  .scr-tabs a:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .scr-tabs a[aria-current]{border-bottom:3px solid var(--ink)}
}

/* menu panel on the shared content edge */
.mm2-in{max-width:none!important;padding-left:var(--edge,51px)!important;padding-right:var(--edge,51px)!important}