/* girlsintechuk.com — Direction A "Plate"
   Palette (5 named jobs, two genuinely saturated members ~170 deg apart in hue):
   --paper  white          ground
   --card   card stock     secondary ground / mats (a tint, not a palette member)
   --ink    bitumen        ink
   --accent pillar-box red accent          (saturated)
   --field  racing green   area colour     (saturated)
*/
:root{
  --paper:#FFFFFF;
  --card:#F1EFE9;
  --ink:#22201C;
  --accent:#C8102E;
  --field:#012169;
  --quiet:#5C5648;
  --faint:#8A8375;
  --rule:rgba(34,32,28,.24);
  --display:Piazzolla,Georgia,serif;
  --sans:Karla,"Helvetica Neue",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;text-wrap:pretty}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--accent)}
h1,h2,h3,h4{margin:0;font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.06}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(20px,4vw,40px)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--ink);color:var(--paper);padding:10px 14px;z-index:9}
.ico{width:20px;height:20px;flex:none;color:var(--accent)}
.rule-head{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.rule-head h2,.rule-head b{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.rule-head span.line{height:1px;flex:1;background:var(--rule)}
.rule-head .aside{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* ---------- masthead ---------- */
.masthead{background:var(--paper);border-bottom:2px solid var(--ink)}
.lockup{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px)}
.mast-mark{flex:none;display:block;color:var(--accent)}
.mast-mark svg{width:clamp(34px,3.4vw,46px);height:auto}
.mast-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px;padding-block:24px 18px}
.wordmark{font-family:var(--display);font-weight:800;font-size:clamp(27px,3.3vw,43px);line-height:.95;letter-spacing:-.02em;display:block}
.mast-sub{font-family:var(--display);font-style:italic;font-size:15.5px;color:var(--quiet);margin-top:7px}
.mast-note{margin-left:auto;max-width:290px;font-size:12.5px;line-height:1.55;color:var(--quiet);border-left:2px solid var(--accent);padding-left:12px}
.index{border-top:1px solid var(--ink);display:grid;grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.index-col{padding:14px 16px 18px;border-right:1px solid var(--rule)}
.index-col:last-child{border-right:0}
.index-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.index-head .no{font-size:11px;font-weight:700;color:var(--accent);letter-spacing:.06em}
.index-head b{font-family:var(--display);font-weight:600;font-size:15.5px;line-height:1.15;letter-spacing:0}
.index-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.index-col li{font-size:13px;line-height:1.32}
.index-col li a{color:var(--quiet)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding-block:12px;border-top:1px solid var(--rule)}
.bar nav{display:flex;flex-wrap:wrap;gap:10px 16px}
.bar nav a{display:flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--quiet)}
.bar nav a .ico{width:17px;height:17px}
.bar .browse{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:3px}

/* ---------- homepage ---------- */
.hero{position:relative;background:var(--card);min-height:min(64vh,580px);display:grid;border-bottom:2px solid var(--ink)}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-cap{position:relative;align-self:end;justify-self:start;max-width:min(660px,94%);background:var(--paper);border-top:2px solid var(--ink);border-right:2px solid var(--ink);padding:24px clamp(20px,3vw,32px) 20px}
.kicker{display:flex;align-items:center;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.kicker .sep{color:var(--faint);font-weight:400;letter-spacing:.1em}
.hero-cap h1{font-size:clamp(27px,3.5vw,48px);margin-top:12px}
.lead-band{display:grid;grid-template-columns:1.5fr 1fr;gap:0;border-bottom:1px solid var(--ink)}
.lead-main{padding:clamp(26px,3.4vw,44px) clamp(20px,3vw,38px);border-right:1px solid var(--ink)}
.lead-main .flag{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:9px}
.lead-main h2{font-size:clamp(26px,3vw,40px);margin-top:12px}
.lead-main .dek{font-family:var(--display);font-size:19px;line-height:1.5;color:#3A3730;margin-top:14px;max-width:60ch}
.more{display:inline-block;margin-top:18px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:3px}
.lead-main .more{display:inline-block;margin-top:20px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:3px}
.lead-side{background:var(--card);border-left:1px solid var(--ink);padding:clamp(22px,3vw,34px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.lead-side p{font-family:var(--display);font-size:17.5px;line-height:1.55}
.lead-side p+p{border-top:1px solid rgba(34,32,28,.3);padding-top:16px}
.seconds{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:0;border-bottom:2px solid var(--ink)}
.card{display:flex;flex-direction:column;padding:22px clamp(18px,2.4vw,28px) 26px;border-right:1px solid var(--rule)}
.card:last-child{border-right:0}
.card .cimg{aspect-ratio:16/10;overflow:hidden;background:var(--card);margin-bottom:14px}
.card .cimg img{width:100%;height:100%;object-fit:cover}
.card .csec{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.18;margin-top:9px;min-height:2.4em}
.card p{font-size:14px;line-height:1.5;color:var(--quiet);margin-top:9px}
.card .cgo{margin-top:auto;padding-top:16px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
.creed{background:var(--field);color:var(--paper);padding-block:clamp(44px,6vw,80px)}
.creed p{max-width:920px;margin:0 auto;text-align:center;font-family:var(--display);font-size:clamp(21px,2.5vw,33px);line-height:1.3}
.figures{background:var(--field);color:var(--paper);padding-bottom:clamp(40px,5vw,60px)}
.figures .rule-head span.line{background:rgba(255,255,255,.4)}
.figures .rule-head .aside{color:rgba(255,255,255,.7)}
.sections-band{padding-block:clamp(34px,4vw,52px);border-bottom:2px solid var(--ink)}
.sec-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:0 40px}
.sec-item{display:grid;grid-template-columns:38px 1fr;gap:14px;padding:16px 0;border-top:1px solid var(--rule);align-items:start}
.sec-item .no{font-family:var(--display);font-weight:800;font-size:21px;color:var(--accent);line-height:1.1}
.sec-item b{display:flex;align-items:center;gap:9px;font-family:var(--display);font-weight:600;font-size:19.5px;line-height:1.2}
.sec-item p{font-size:13.5px;line-height:1.5;color:var(--quiet);margin-top:5px}
.sec-item .cnt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:7px}

/* ---------- article ---------- */
.art-head{padding-block:clamp(30px,4vw,52px) 0}
.art-head h1{font-size:clamp(29px,4vw,54px);line-height:1.03}
.art-head .dek{font-family:var(--display);font-style:italic;font-size:clamp(18px,2vw,22px);line-height:1.44;color:#3A3730;margin-top:18px;max-width:62ch}
.art-meta{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:24px;padding-block:13px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet)}
.article-body{display:grid;grid-template-columns:[full-start] minmax(20px,1fr) [mid-start] min(68ch,calc(100% - 40px)) [mid-end] minmax(20px,1fr) [full-end];row-gap:0}
.article-body>*{grid-column:mid-start/mid-end}
.article-body>.wide{grid-column:full-start/full-end;width:min(1140px,calc(100% - 40px));margin-inline:auto}
.article-body>.full{grid-column:full-start/full-end;width:100%}
.article-body h2{font-family:var(--display);font-weight:700;font-size:clamp(23px,2.5vw,31px);line-height:1.15;margin-top:44px}
.article-body h2::before{content:"";display:block;width:36px;height:5px;background:var(--accent);margin-bottom:16px}
.article-body h2+p{margin-top:14px}
.article-body p{font-family:var(--display);font-size:19px;line-height:1.62;margin-top:20px}
.article-body p:first-of-type{margin-top:26px}
.article-body>ul{font-family:var(--display);font-size:18.5px;line-height:1.6;margin:20px 0 0;padding-left:22px}
.article-body>ul li+li{margin-top:8px}
.lead{font-family:var(--display);font-size:21px;line-height:1.5;color:#3A3730}
.drop::first-letter{float:left;font-family:var(--display);font-weight:800;font-size:3.5em;line-height:.86;padding:.02em .09em 0 0}

/* ---------- figure system: plate · mat · column · archive ---------- */
figure{margin:0}
.article-figure{margin-top:34px}
.article-figure img{width:100%;object-fit:cover}
.article-figure figcaption{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin-top:12px}
.fig-kicker{font-family:var(--sans);font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap;padding-top:3px}
.fig-cap{display:block;font-family:var(--display);font-style:italic;font-size:16.5px;line-height:1.45;max-width:64ch}
.fig-credit{display:block;grid-column:2;font-family:var(--sans);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
/* plate — full bleed, corner marks over the image, caption stepped beneath */
.fig-plate{position:relative;margin-top:0}
.fig-plate .plate-frame{position:relative;background:var(--card)}
.fig-plate img{aspect-ratio:21/9;min-height:280px}
.fig-plate figcaption{width:min(1140px,calc(100% - 40px));margin-inline:auto}
.corners{position:absolute;inset:18px;pointer-events:none;color:var(--ink)}
.corners svg{position:absolute;width:30px;height:30px}
.corners svg:nth-child(1){top:0;left:0}
.corners svg:nth-child(2){top:0;right:0}
.corners svg:nth-child(3){bottom:0;left:0}
.corners svg:nth-child(4){bottom:0;right:0}
/* mat — photograph inset on a card-stock mat with a hairline, caption in the outer gutter */
.fig-mat{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
.fig-mat .mat{background:#FAF9F5;border:1px solid var(--ink);padding:clamp(12px,1.6vw,20px)}
.fig-mat .mat img{aspect-ratio:16/10}
.fig-mat figcaption{display:block;margin-top:0;padding-top:6px;border-top:2px solid var(--accent)}
.fig-mat .fig-kicker,.fig-archive .fig-kicker{display:block;padding-top:6px}
.fig-archive figcaption{border-top:2px solid var(--accent);padding-top:6px}
.fig-mat .fig-credit,.fig-archive .fig-credit{grid-column:auto}
.fig-mat .fig-cap{margin-top:6px}
.fig-mat .fig-credit{margin-top:9px}
/* column — sits in the measure, rule above, hanging caption */
.fig-col{border-top:1px solid var(--ink);padding-top:14px}
.fig-col img{aspect-ratio:3/2}
/* archive — heavy frame, green tint, long caption */
.fig-archive{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(20px,3vw,38px);align-items:start}
.fig-archive .frame{position:relative;border:6px solid var(--ink)}
.fig-archive .frame img{aspect-ratio:16/10}
.fig-archive .frame::after{content:"";position:absolute;inset:0;background:var(--field);opacity:.15;mix-blend-mode:multiply;pointer-events:none}
.fig-archive figcaption{display:block;margin-top:0}
.fig-archive .fig-cap{font-style:normal;font-size:19px;line-height:1.45;margin-top:8px}
.fig-archive .fig-credit{margin-top:12px}

/* ---------- components ---------- */
.pullquote{margin:36px 0 0;padding:0;display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:stretch}
.pullquote svg{width:16px;height:100%;color:var(--accent)}
.pullquote p{font-family:var(--display);font-weight:600;font-size:clamp(21px,2.3vw,26px);line-height:1.3;color:var(--field);margin:0}
.blockquote{margin:32px 0 0;border-left:3px solid var(--accent);padding:2px 0 2px 20px}
.blockquote p{font-family:var(--display);font-size:19.5px;line-height:1.5;margin:0}
.blockquote cite{display:block;margin-top:10px;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.callout{margin:34px 0 0;background:var(--card);border-top:2px solid var(--ink);padding:22px clamp(18px,2.4vw,26px)}
.callout p{font-family:var(--display);font-size:18px;line-height:1.5;margin:0}
.callout p+p{margin-top:12px}
.note{font-family:var(--sans);font-size:14px;line-height:1.6;color:var(--quiet);margin-top:26px;padding-left:16px;border-left:2px solid var(--rule)}
.record{margin-top:38px;background:var(--card);border-top:2px solid var(--ink);border-bottom:1px solid var(--rule);padding:24px clamp(18px,2.6vw,30px) 28px}
.record>.rule-head{margin-bottom:16px}
.record dl{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:18px 34px}
.record .rec-pair{min-width:0}
.record dt{font-family:var(--sans);font-size:12.5px;font-weight:700;letter-spacing:.04em;line-height:1.35}
.record .rec-points{list-style:none;margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--rule);display:grid;gap:12px}
.record .rec-points li{font-family:var(--display);font-size:16.5px;line-height:1.5;padding-left:18px;position:relative}
.record .rec-points li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:3px;background:var(--accent)}
.record dd{margin:4px 0 0;font-family:var(--display);font-size:16px;line-height:1.5;color:#3A3730}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(130px,210px) 1fr;gap:8px 22px;padding:13px 0;border-top:1px solid rgba(255,255,255,.3)}
.timeline li:first-child{border-top:0}
.t-when{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;line-height:1.4}
.t-what{font-family:var(--display);font-size:16.5px;line-height:1.5}
.tl-band{margin-top:38px;background:var(--field);color:var(--paper);padding:clamp(24px,3.4vw,40px) 0}
.tl-band .inner{width:min(1140px,calc(100% - 40px));margin-inline:auto}
.tl-band .rule-head span.line{background:rgba(255,255,255,.4)}
.tl-band .t-what{color:rgba(255,255,255,.86)}
.tl-plain .timeline li{grid-template-columns:1fr}
.tl-plain .t-what{font-size:17px}
.statrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:30px}
.statblock{border-top:2px solid var(--accent);padding-top:14px}
.stat-num{display:block;font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,54px);line-height:.96;letter-spacing:-.02em}
.stat-label{display:block;font-family:var(--display);font-size:17px;line-height:1.4;margin-top:10px}
.stat-measures{display:block;font-family:var(--sans);font-size:12.5px;line-height:1.55;margin-top:10px;color:var(--quiet)}
.figures .stat-measures{color:rgba(255,255,255,.72)}
.figures .statblock,.tl-band .statblock{border-top:1px solid rgba(255,255,255,.4);padding-top:18px}
.figures .statrow{gap:38px}
.figures .stat-num{position:relative;font-size:clamp(46px,6.4vw,86px);letter-spacing:-.035em;padding-bottom:20px}
.figures .stat-num::after{content:"";position:absolute;left:0;bottom:0;width:58px;height:6px;background:var(--accent)}
.figures .stat-label{font-size:18.5px;line-height:1.35;margin-top:16px}
.figures .stat-measures{font-size:13px;line-height:1.6;margin-top:12px}
.datatable,.versus{width:100%;border-collapse:collapse;margin-top:32px;font-family:var(--sans)}
.datatable caption,.versus caption{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding-bottom:9px}
.datatable th,.versus th{text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;padding:9px 12px 9px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.datatable td,.versus td{font-family:var(--display);font-size:16px;line-height:1.45;padding:13px 12px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.versus tbody th{font-family:var(--sans);font-size:12.5px;letter-spacing:.02em;text-transform:none;color:var(--ink);border-bottom:1px solid var(--rule);padding-right:20px;width:24%}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:32px}
.table-scroll table{margin-top:0;min-width:520px}
.chart{margin-top:34px}
.chart svg{width:100%;height:auto;overflow:visible}
.chart figcaption{margin-top:12px;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--quiet);max-width:62ch}
.chart .bar-rect{fill:var(--field)}
.chart .bar-rect.hi{fill:var(--accent)}
.chart .axis{stroke:var(--rule);stroke-width:1}
.chart text{font-family:var(--sans);font-size:11px;fill:var(--ink)}
.chart .val{font-weight:700}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:32px}
.gallery figure{background:#FAF9F5;border:1px solid var(--ink);padding:10px}
.gallery img{aspect-ratio:4/3;object-fit:cover}
.gallery figcaption{font-family:var(--display);font-style:italic;font-size:14px;line-height:1.4;margin-top:9px}
.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px;margin-top:32px}
.profile-card{display:flex;flex-direction:column;background:var(--card);border-top:2px solid var(--ink);padding:18px 20px 22px}
.profile-card .p-photo{aspect-ratio:1;object-fit:cover;margin-bottom:14px}
.profile-card h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:0}
.profile-card .p-role{font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.profile-card p{font-family:var(--display);font-size:15.5px;line-height:1.5;margin-top:10px}
.profile-card .p-links{font-family:var(--sans);font-size:13px;margin-top:auto;padding-top:14px}
.profile-card .p-attr{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.org-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(226px,1fr));gap:14px;margin-top:30px}
.org-card{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;border:1px solid var(--rule);padding:12px 14px;background:#FAF9F5}
.org-card .org-logo{width:44px;height:44px;object-fit:contain}
.org-card.no-logo{grid-template-columns:1fr}
.org-name{font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2}
.org-host{font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:var(--faint)}
.entity-ref{border-bottom:1px solid var(--accent)}
.further-grid,.related-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:24px;list-style:none;margin:0;padding:0}
.further-grid a,.related-links a{display:block;border-top:1px solid var(--ink);padding-top:12px}
.further-grid a .rl-sec,.related-links a .rl-sec{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.further-grid a b,.related-links a b{display:block;font-family:var(--display);font-weight:600;font-size:19px;line-height:1.2;margin-top:8px}
.further-grid a span.rl-dek,.related-links a span.rl-dek{display:block;font-size:13.5px;line-height:1.5;color:var(--quiet);margin-top:7px}
.sources{margin-top:44px;border-top:2px solid var(--accent);padding-top:14px}
.sources ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:10px}
.sources li{font-size:13.5px;line-height:1.55;color:var(--quiet);padding-left:16px;border-left:1px solid var(--rule)}
.nextsec{background:var(--field);color:var(--paper);margin-top:48px;padding-block:clamp(28px,3.4vw,40px)}
.nextsec .inner{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.nextsec p{font-family:var(--display);font-size:clamp(18px,2vw,23px);line-height:1.35;max-width:660px}
.nextsec a.go{margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border:1px solid rgba(255,255,255,.6);padding:12px 18px}
.nextsec a.go:hover{background:var(--paper);color:var(--field)}

/* ---------- section / archive / static pages ---------- */
.sec-open{display:grid;grid-template-columns:1fr 1.1fr;border-bottom:1px solid var(--ink)}
.sec-open-txt{padding:clamp(28px,4vw,48px) clamp(20px,3vw,40px)}
.sec-open-txt .no{font-family:var(--display);font-weight:800;font-size:clamp(44px,6vw,68px);line-height:.9;color:var(--accent)}
.sec-open-txt h1{font-size:clamp(28px,3.4vw,44px);margin-top:12px}
.sec-open-txt .dek{font-family:var(--display);font-size:18.5px;line-height:1.5;margin-top:16px;max-width:52ch}
.sec-open-txt .glyph{margin-top:22px;color:var(--accent)}
.sec-open-txt .glyph svg{width:56px;height:56px}
.sec-open-img{position:relative;min-height:300px;background:var(--card);border-left:1px solid var(--ink)}
.sec-open-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-list{list-style:none;margin:0;padding:0}
.cat-list li{border-top:1px solid var(--rule)}
.cat-list li:last-child{border-bottom:1px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:72px 1.15fr 1.5fr;gap:8px 22px;padding:20px 0;align-items:baseline}
.cat-list .ent{font-family:var(--sans);font-size:12px;font-weight:700;color:var(--accent);letter-spacing:.06em}
.cat-list b{font-family:var(--display);font-weight:600;font-size:22px;line-height:1.18}
.cat-list p{font-family:var(--display);font-size:15.5px;line-height:1.5;color:var(--quiet)}
.prose{max-width:68ch;padding-block:clamp(28px,4vw,48px)}
.prose h1{font-size:clamp(28px,3.6vw,46px)}
.prose h2{font-family:var(--display);font-weight:700;font-size:24px;margin-top:34px}
.prose p{font-family:var(--display);font-size:19px;line-height:1.62;margin-top:18px}
.prose ul{font-family:var(--display);font-size:18.5px;line-height:1.6;margin-top:16px;padding-left:22px}
.err{padding-block:clamp(48px,8vw,110px)}
.err h1{font-size:clamp(34px,6vw,72px)}
.err p{font-family:var(--display);font-size:21px;line-height:1.5;margin-top:18px}
.err .back{display:inline-block;margin-top:26px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid var(--accent);padding-bottom:3px}

/* ---------- supporters strip (footer furniture) ---------- */
.supporters{background:var(--card);color:var(--ink);padding-block:34px 40px;border-top:1px solid var(--ink)}
.supporters .rule-head span.line{background:var(--rule)}
.supporters .rule-head .aside{color:var(--faint)}
.sup-note{font-size:13px;line-height:1.6;color:var(--quiet);max-width:64ch;margin-bottom:20px}
.sup-tier{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:26px 0 12px}
.sponsor-group{display:flex;flex-wrap:wrap;gap:14px}
.sponsor{flex:0 0 262px;max-width:100%;display:grid;grid-template-columns:1fr;gap:12px;align-items:start;padding:14px;background:var(--paper);border-top:1px solid var(--rule)}
.sponsor:hover{color:var(--ink);border-top-color:var(--ink)}
.sponsor.feat{border-top:2px solid var(--accent)}
.sponsor img{width:100%;height:56px;background:#141310;padding:8px 12px;max-height:56px;object-fit:contain}
.sponsor-name{display:block;font-family:var(--display);font-weight:600;font-size:16px;line-height:1.2}
.sponsor-blurb{display:block;font-size:12.5px;line-height:1.5;color:var(--quiet);margin-top:6px}

/* ---------- footer ---------- */
.foot{background:var(--ink);color:var(--paper);padding-block:46px 50px;border-top:6px solid var(--accent)}
.foot .inner{display:grid;grid-template-columns:minmax(300px,1.35fr) auto auto;gap:34px 56px;align-items:start}
.foot-lockup{display:flex;align-items:center;gap:18px}
.foot .emblem{display:block;width:60px;color:var(--accent);flex:none}
.foot .emblem svg{width:100%;height:auto}
.foot .about{max-width:52ch}
.foot .about p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.76);margin-top:18px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22)}
.foot .about p.foot-creed{font-family:var(--display);font-size:16.5px;line-height:1.45;color:#fff;border-top:0;padding-top:0;margin-top:14px}
.foot .about b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(24px,2.6vw,32px);color:var(--paper);margin-bottom:10px;letter-spacing:-.02em}
.foot nav{display:contents;font-size:13.5px}
.foot nav b{display:block;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.foot nav div{display:flex;flex-direction:column;gap:8px;font-size:13.5px}
.foot a{color:rgba(255,255,255,.86)}
.foot a:hover{color:var(--paper)}
.foot .fine{margin-top:28px;padding-top:16px;border-top:1px solid rgba(255,255,255,.22);font-size:11.5px;letter-spacing:.06em;color:rgba(255,255,255,.55)}

/* ---------- styleguide only ---------- */
.sg-band{border-top:2px solid var(--ink);padding-block:30px 40px}
.sg-band>h2{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.sg-band>.sg-note{font-size:13px;color:var(--quiet);margin-bottom:20px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .lead-band,.sec-open,.fig-archive,.fig-mat{grid-template-columns:1fr}
  .lead-main{border-right:0;border-bottom:1px solid var(--ink)}
  .sec-open-img{border-left:0;border-top:1px solid var(--ink);min-height:240px}
  .fig-mat figcaption,.fig-archive figcaption{margin-top:14px}
  .cat-list a{grid-template-columns:64px 1fr}
  .cat-list p{grid-column:2}
}
@media (max-width:760px){
  .mast-note{margin-left:0;max-width:none}
  .index{grid-template-columns:1fr 1fr}
  .index-col{border-bottom:1px solid var(--rule)}
  .article-body p{font-size:18px}
  .timeline li{grid-template-columns:1fr}
  .record dl{grid-template-columns:1fr;gap:16px}
  .foot .inner{grid-template-columns:1fr;gap:26px}
  .foot nav div{grid-column:1}
  .nextsec a.go{margin-left:0}
}
@media (max-width:540px){
  .index{grid-template-columns:1fr}
  .card{border-right:0;border-bottom:1px solid var(--rule)}
  .sponsor{flex:1 1 100%}
  .sponsor img{max-width:320px}
  .cat-list a{grid-template-columns:1fr;gap:6px}
  .cat-list p,.cat-list b{grid-column:1}
  .pullquote{grid-template-columns:1fr}
  .pullquote svg{display:none}
  .drop::first-letter{font-size:2.9em}
  .article-figure figcaption{grid-template-columns:1fr;gap:4px}
  .fig-credit{grid-column:1}
  .fig-kicker{padding-top:0}
}
@media print{
  .masthead .index,.supporters,.bar .browse{display:none}
  body{background:#fff}
}

/* corner marks read over any photograph */
.corners{color:var(--paper);filter:drop-shadow(0 0 1.6px rgba(20,19,16,.9))}
.ico.big{width:56px;height:56px}

/* sp-mark-align: marks sit CENTRED in their box. Placement only — Design's size,
   padding, panel and object-fit are untouched. */
.sponsor img,.sponsor-box img,.sp-logo img{object-position:center!important;margin-left:auto!important;margin-right:auto!important;display:block}
.sponsor .sp-logo,.sponsor-box{display:flex;align-items:center;justify-content:center}

/* sp-tile-uniform: a slot never grows to fill its row — every tile the same width in
   every row, whatever the count. Only flex-grow is touched. */
.sponsor{flex-grow:0!important}
.sponsor.lead-line,.sponsor.feat.lead-line{flex-grow:1!important}

/* sp-mark-fit: width:100% + padding must not overflow the tile — but the declared
   HEIGHT is the mark's size and border-box alone steals the vertical padding from it.
   earlychristianireland declares height:66px with 10px top/bottom padding: border-box
   left a 46px mark and the operator read it as 'logos too small'. Keep the horizontal
   inset, drop the vertical padding, so the mark occupies the full height Design set. */
.sponsor img,.sponsor-box img,.sp-logo img{box-sizing:border-box!important;padding-top:0!important;padding-bottom:0!important}

/* sp-blurb-unhide: every supporter slot shows its text — no half-texted grids */
.sponsor-blurb:not(:empty){display:block!important;line-height:1.5}

/* sp-blurb-link: money-link anchors in blurbs must inherit the blurb colour (readable on dark OR light tiles) */
.sponsor-blurb a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* sp-domain-override: per-domain, from work/css_override.css */
/* girlsintechuk: two things.
   1. The last supporter row stopped 286px short of the container. Same cause as gfineartdc — our
      sp-tile-uniform flex-grow:0 guard. Allowed to grow here, min-width 240px so 7 tiles wrap 4+3
      with both rows full rather than 5+2.
   2. The logo filled the tile edge to edge — img 234px inside a 262px tile is exactly the padding
      box, so every mark touched its own padding. Cap the mark at 78% of the tile and centre it,
      which leaves real air inside the panel without touching Design's tile size or ground. */
[data-partner].sponsor,[data-partner].sponsor-box,
.sponsor-row [data-partner],.sponsor-band [data-partner]{
  flex-grow:1!important; flex-basis:0!important; min-width:240px;
}
[data-partner] img,.sponsor img,.sponsor-box img{
  max-width:78%!important; margin-left:auto!important; margin-right:auto!important;
}

/* sp-mark-frame: a uniform plate for the money mark, in the tiers where Design sized the plate
   to the artwork instead. Operator's rule: the dark ground is unified whatever the logo's
   size. width:100% (or one fixed width where copy shares the row) + one height for the tier
   + object-fit:contain, so the plate is the same box everywhere and the artwork fits inside
   it. A ground and an inset are added ONLY where none exists — adding a second ground gives
   co-cure's rectangle-inside-a-rectangle. Design's framed tiers are not touched at all. */
.sponsor-group .sponsor.sponsor img{box-sizing:border-box!important;padding:9px 15px!important}

/* op-money-columns: the supporters block ran one tile per row — 11 tiles,
   1887px at 390, 21% of the whole page. Two columns bring it to
   1210px (36% shorter). Checked before writing: no new overflow, smallest mark still
   108px wide, longest blurb 3 lines, tile heights 141-181px.
   A block that fails any of those is left in one column — two narrow columns can make a block
   TALLER once the copy rewraps, which is the case the operator warned about.
   The blurb is held to three rows at phone width, because a nine- or eleven-line blurb in a narrow column made two columns TALLER than one. The copy stays in the markup. An odd tile count means the lead tile spans the whole row, so the block does not end on an empty cell. Only the tier(s) that were one-per-row are touched (.sponsor-group), never the section
   that holds several tiers: forcing a grid on that would put a featured row and a regulars run
   side by side. Phone widths only. */
@media (max-width:640px){
  .sponsor-group{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:14px!important}
    .sponsor-group > *{min-width:0!important;max-width:100%;width:auto!important;flex:0 1 auto!important}
    .sponsor-group > * *{min-width:0!important;max-width:100%}
    .sponsor-group img,.sponsor-group svg{max-width:100%;height:auto}
  .sponsor-group .sponsor-blurb{display:-webkit-box!important;-webkit-line-clamp:3!important;-webkit-box-orient:vertical;overflow:hidden!important}
}

/* op-odd-tier-lead: .sponsor-group (7 tiles) lay out two per row with an ODD tile count, so the
   block ended on a lone tile beside an empty cell. The lead tile takes the whole row instead —
   operator: "the 1st item in such rows to be 100% width, then split" — so the grid reads as
   complete. These tiers were already two-per-row, which is why the column pass never wrote the
   rule for them. Checked before writing: no new horizontal overflow, block not more than 15%
   taller. Phone widths only; desktop keeps Design's layout. */
@media (max-width:640px){
  .sponsor-group:has(> *:nth-child(odd):last-child) > *:first-child{grid-column:1 / -1!important}
}

/* op-article-width: the article column was capped at 646px (79 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 2 of "[full-start] minmax(20px, 1fr) [mid-start] min(68ch, 100% - 40px) [mid-end] minmax(20px, 1fr) [full-end]" (declared in .article-body) to ~102 characters per line in this build's own prose font, never past the edge Design's own content already reaches beside it. Above 1600 the column and the prose type grow together (up to 1.2x). Nothing below 1024 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1024px){
  div.article-body{grid-template-columns:[full-start] minmax(20px, 1fr) [mid-start] min(831px, 100%) [mid-end] minmax(20px, 1fr) [full-end]!important}
}
@media (min-width:1600px){
  div.article-body{grid-template-columns:[full-start] minmax(20px, 1fr) [mid-start] min(clamp(831px, 57.708vw, 997px), 100%) [mid-end] minmax(20px, 1fr) [full-end]!important}
  div.article-body > :is(p.drop, p:not([class])){font-size:clamp(19px,1.3194vw,22.8px)!important}
}
/* op-article-width:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(article.card > div.cimg > img,
  div.article-body > figure.article-figure.fig-col > img,
  figure.article-figure.fig-archive > div.frame > img,
  figure.article-figure.fig-archive.wide > div.frame > img,
  figure.article-figure.fig-mat.wide > div.mat > img,
  figure.article-figure.fig-plate.full > div.plate-frame > img,
  main > section.hero > img,
  section.sec-open > div.sec-open-img > img){height:auto}
/* op-img-dims:end */