/* The Locked Room — The Register
   Palette roles: ground, ink, accent (cobalt), secondary (acid), deep */
:root{
  --ground:#FFFFFF;
  --ground-2:#F1F1EF;
  --ink:#0E1013;
  --ink-2:#3A3E45;
  --ink-3:#6E727A;
  --rule:#D6D6D2;
  --accent:#1B34C4;
  --accent-ink:#DCE1FB;
  --secondary:#E0B400;
  --deep:#0F1116;
  --measure:70ch;
  --pad:clamp(18px,4.4vw,44px);
  --serif:'Faustina',Georgia,serif;
  --sans:'Chivo','Familjen Grotesk',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.6;text-wrap:pretty}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:var(--serif);font-weight:700;letter-spacing:-0.015em;line-height:1.08;margin:0}
svg{flex:0 0 auto}
.wrap{max-width:1280px;margin:0 auto;padding-inline:var(--pad)}
.kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:8px}
.num{font-family:var(--sans);font-weight:800;font-variant-numeric:tabular-nums;color:var(--accent)}
.sans{font-family:var(--sans)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;background:var(--ink);color:var(--ground);padding:8px 12px;z-index:20}

/* ---------- masthead + menu ---------- */
.site-head{position:sticky;top:0;z-index:40;background:var(--ground);border-bottom:3px solid var(--ink)}
.head-inner{max-width:1280px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:12px var(--pad)}
.brand-mark{display:flex;align-items:center;gap:10px;color:var(--ink);flex:0 0 auto}
.brand-mark:hover{text-decoration:none;color:var(--accent)}
.brand-mark svg{color:var(--accent)}
.brand-name{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-0.02em;text-transform:uppercase;line-height:1;white-space:nowrap}
.menu-nav{margin-left:auto}
.menu{display:flex;align-items:center;flex-wrap:wrap;list-style:none;margin:0;padding:0;gap:2px}
.menu-item{position:relative}
.menu-item:hover,.menu-item:focus-within{z-index:60}
.menu-item > a{display:flex;align-items:center;gap:7px;padding:11px 12px;font-family:var(--sans);font-size:15px;font-weight:700;color:var(--ink);white-space:nowrap}
.menu-item > a svg{color:var(--accent)}
.menu-item > a:hover{text-decoration:none;color:var(--accent);background:var(--ground-2)}
.menu-item[aria-current="true"] > a{color:var(--accent);box-shadow:inset 0 -3px 0 var(--accent)}
.menu-all > a{color:var(--accent)}
.submenu{position:absolute;z-index:50;top:100%;left:0;min-width:290px;background:var(--ground);border:1px solid var(--ink);border-top:3px solid var(--accent);box-shadow:0 14px 30px rgba(20,22,26,.18);padding:6px 0 8px;display:none}
.menu-item:hover .submenu,.menu-item:focus-within .submenu{display:block}
.menu-item:last-child .submenu,.menu-item:nth-last-child(2) .submenu{left:auto;right:0}
.submenu-head{font-family:var(--sans);font-size:13px;line-height:1.45;color:var(--ink-3);padding:8px 18px 10px;border-bottom:1px solid var(--rule);display:flex;gap:8px}
.submenu-head .num{font-size:13px}
.submenu ul{list-style:none;margin:0;padding:0}
.submenu li a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:baseline;padding:9px 18px;font-family:var(--sans);font-size:14.5px;color:var(--ink)}
.submenu li a:hover{text-decoration:none;color:var(--accent);background:var(--ground-2)}
.submenu li a .num{font-size:12.5px}

/* ---------- bands ---------- */
.band{padding-block:clamp(44px,6vw,76px)}
.band-tight{padding-block:clamp(30px,4vw,46px)}
.band-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;border-bottom:3px solid var(--ink);padding-bottom:12px;margin-bottom:26px}
.band-head h2{font-size:clamp(28px,3.4vw,40px)}
.band-head p{font-family:var(--sans);font-size:15px;color:var(--ink-2);margin:0;max-width:46ch}
.band-accent{background:var(--accent);color:var(--accent-ink)}
.band-accent h2,.band-accent h3{color:#fff}
.band-accent a{color:#fff}
.band-secondary{background:var(--secondary);color:var(--ink)}
.band-deep{background:var(--deep);color:var(--ground)}

/* ---------- hero ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);background:var(--deep);color:var(--ground);border-bottom:3px solid var(--ink)}
.hero-text{padding:clamp(34px,4.4vw,64px) clamp(26px,3.4vw,56px);display:flex;flex-direction:column;justify-content:center}
.hero-text h1{font-size:clamp(36px,4.6vw,64px);line-height:1.0;margin-top:16px}
.hero-dek{font-family:var(--sans);font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:#cfd0cd;max-width:44ch;margin:18px 0 0}
.hero-meta{display:flex;flex-direction:column;gap:6px;margin-top:24px;padding-top:16px;border-top:1px solid #2c2f36;font-family:var(--sans);font-size:13.5px;color:#9a9ea6}
.hero-cta{display:inline-flex;align-items:center;gap:10px;margin-top:26px;align-self:flex-start;background:var(--secondary);color:var(--ink);font-family:var(--sans);font-weight:700;font-size:15px;padding:13px 20px}
.hero-cta:hover{text-decoration:none;background:#f0c400}
.hero-img{position:relative;min-height:440px}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- register table ---------- */
.register{border-top:3px solid var(--ink)}
.register-head,.register-row{display:grid;grid-template-columns:58px minmax(0,1.45fr) minmax(0,1.5fr) 150px;gap:20px;align-items:baseline}
.register-head{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);padding-block:10px;border-bottom:1px solid var(--ink)}
.register-row{padding-block:16px;border-bottom:1px solid var(--rule);color:var(--ink)}
.register-row:hover{background:var(--ground-2)}
.register-row:hover{text-decoration:none}
.register-title{font-size:22px;font-weight:700;line-height:1.2}
.register-row:hover .register-title{color:var(--accent)}
.register-brief{font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.register-sec{font-family:var(--sans);font-size:13.5px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.register-sec svg{color:var(--accent)}
.register-more{display:inline-flex;align-items:center;gap:10px;margin-top:20px;font-family:var(--sans);font-weight:700;font-size:15px}

.register-lean .register-head,.register-lean .register-row{grid-template-columns:58px minmax(0,1fr) 200px}
.register-lean .register-row{padding-block:13px}
@media (max-width:680px){.register-lean .register-head,.register-lean .register-row{grid-template-columns:38px minmax(0,1fr)}}

/* ---------- cards ---------- */
.card-row{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{display:flex;flex-direction:column;background:var(--ground);border-top:2px solid var(--ink);padding-top:14px;color:var(--ink)}
.card:hover{text-decoration:none}
.card-img{aspect-ratio:16/10;overflow:hidden;margin-bottom:14px}
.card-img img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:24px;line-height:1.15;min-height:2.3em}
.card:hover h3{color:var(--accent)}
.card p{font-family:var(--sans);font-size:14.5px;line-height:1.55;color:var(--ink-2);margin:8px 0 0}
.card .card-meta{margin-top:auto;padding-top:14px;font-family:var(--sans);font-size:13px;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.card .card-meta svg{color:var(--accent)}

/* two-up feature */
.duo{display:grid;gap:30px;grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.duo-item{display:flex;flex-direction:column;color:inherit}
.duo-item:hover{text-decoration:none}
.duo-item .duo-img{aspect-ratio:3/2;overflow:hidden}
.duo-item .duo-img img{width:100%;height:100%;object-fit:cover}
.duo-item h3{font-size:clamp(24px,2.4vw,32px);margin-top:16px}
.duo-item:hover h3{color:var(--accent)}
.duo-item p{font-family:var(--sans);font-size:15px;line-height:1.6;color:var(--ink-2)}

/* ---------- figures ---------- */
figure{margin:0}
.article-figure figcaption,.fig-plate figcaption,.fig-mat figcaption,.fig-cell figcaption{font-family:var(--sans)}
.fig-cap{font-family:var(--sans);font-size:15.5px;line-height:1.5;color:var(--ink)}
.fig-credit{font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--ink-3);margin-top:6px;display:block}

/* 1 · plate: breaks the measure, caption on an accent bar */
.fig-plate{margin-block:34px}
.fig-plate img{width:100%;aspect-ratio:16/10;object-fit:cover}
.fig-plate figcaption{background:var(--accent);color:#fff;padding:14px 20px;display:flex;flex-wrap:wrap;gap:8px 28px;justify-content:space-between;align-items:baseline}
.fig-plate .fig-cap{color:#fff;max-width:76ch}
.fig-plate .fig-credit{color:var(--accent-ink);margin:0}
.fig-plate figcaption a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* 2 · mat: photograph on a paper mat with drawn corner marks */
.fig-mat{margin-block:34px;background:var(--ground-2);padding:18px;position:relative}
.fig-mat img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-mat .mark{position:absolute;color:var(--accent)}
.fig-mat .mark.tl{top:8px;left:8px}
.fig-mat .mark.tr{top:8px;right:8px}
.fig-mat figcaption{margin-top:14px;padding-left:16px;border-left:2px solid var(--accent);max-width:70ch}

/* 3 · cell: inset in the column, hairline rules, caption beside */
.fig-cell{margin-block:34px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);padding-block:16px;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:26px;align-items:center}
.fig-cell img{width:100%;aspect-ratio:16/9;object-fit:cover}
.fig-cell figcaption{display:flex;flex-direction:column;justify-content:center}
.fig-cell .fig-kicker{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.article-figure{margin-block:34px}
.article-figure img{width:100%;aspect-ratio:3/2;object-fit:cover}
.article-figure figcaption{margin-top:12px;font-size:15.5px;line-height:1.5;color:var(--ink)}
.gallery{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-block:34px}
.gallery img{aspect-ratio:1/1;object-fit:cover}
.gallery figcaption{font-family:var(--sans);font-size:13.5px;color:var(--ink-2);margin-top:8px}

/* ---------- article ---------- */
.article{max-width:1240px;margin:0 auto;padding-inline:var(--pad)}
.article-top{padding-top:34px;max-width:var(--measure);margin-inline:auto}
.article-top h1{font-size:clamp(32px,4.6vw,58px);max-width:26ch;margin-top:14px}
.lede-row{display:flex;flex-wrap:wrap;gap:14px 30px;margin-top:20px;padding-top:14px;border-top:1px solid var(--rule);font-family:var(--sans);font-size:13.5px;color:var(--ink-3)}
.article-body{padding-bottom:20px;display:grid;grid-template-columns:[full-start] minmax(0,1fr) [wide-start] minmax(0,0.45fr) [text-start] min(var(--measure),100%) [text-end] minmax(0,0.45fr) [wide-end] minmax(0,1fr) [full-end];column-gap:0}
.article-body > *{grid-column:text-start/text-end;max-width:none;margin-inline:0}
.article-body > .full,.article-body > .wide{grid-column:full-start/full-end}
.article-body > .out{grid-column:wide-start/wide-end}
.article-body p{font-size:18.5px;line-height:1.68;margin:0 0 22px}
.article-body h2{font-size:clamp(24px,2.6vw,32px);margin:40px 0 14px;padding-top:14px;border-top:2px solid var(--ink)}
.article-body > .fig-plate + h2{margin-top:26px}
.article-body ul,.article-body ol{font-family:var(--sans);font-size:16.5px;line-height:1.6;padding-left:22px}
.article-body li{margin-bottom:8px}
.lead{font-family:var(--sans);font-size:clamp(18px,1.9vw,21px);line-height:1.55;color:var(--ink-2);margin:0 0 26px}
.pullquote{margin:34px 0;padding:0;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent)}
.pullquote p{font-size:clamp(22px,2.6vw,28px);line-height:1.32;font-weight:600;padding-block:20px;margin:0}
.blockquote{margin:30px 0;padding-left:22px;border-left:3px solid var(--ink)}
.blockquote p{font-size:20px;line-height:1.5;margin:0 0 10px;font-style:italic}
.blockquote cite{font-family:var(--sans);font-style:normal;font-size:13.5px;color:var(--ink-3)}
.callout{background:var(--deep);color:var(--ground);padding:22px 24px;margin:34px 0}
.callout p{font-family:var(--sans);font-size:17px;line-height:1.55;margin:0}
.note{font-family:var(--sans);font-size:15px;line-height:1.55;color:var(--ink-2);border-left:2px solid var(--secondary);padding-left:14px;margin:26px 0}

/* register panel (notes-for-design material) */
.regpanel{margin:40px 0;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding-block:18px}
.regpanel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 20px;margin-bottom:14px}
.regpanel-head h3{font-size:clamp(20px,2.2vw,26px)}
.regpanel-head span{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.regpanel ol{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.regpanel ol li{break-inside:avoid;display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding-block:9px;border-bottom:1px solid var(--rule);font-family:var(--sans);font-size:15px;line-height:1.45}
.regpanel ol li b{font-family:var(--sans);font-weight:800;color:var(--accent);font-variant-numeric:tabular-nums}
.regpanel ol li em{font-style:normal;color:var(--ink-2)}
.timeline{list-style:none;margin:0;padding:0}
.timeline li{display:grid;grid-template-columns:minmax(120px,210px) minmax(0,1fr);gap:20px;padding-block:12px;border-bottom:1px solid var(--rule)}
.t-when{font-family:var(--sans);font-weight:700;font-size:14.5px;color:var(--accent)}
.t-what{font-family:var(--sans);font-size:15.5px;line-height:1.5}
.keyterms{margin:0;font-family:var(--sans)}
.keyterms div{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr);gap:20px;padding-block:12px;border-bottom:1px solid var(--rule)}
.keyterms dt{font-weight:700;font-size:15.5px}
.keyterms dd{margin:0;font-size:15.5px;color:var(--ink-2);line-height:1.5}
.datatable,.versus{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:15px}
.datatable th,.versus th{text-align:left;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);border-bottom:1px solid var(--ink);padding:10px 14px 10px 0}
.datatable td,.versus td{border-bottom:1px solid var(--rule);padding:12px 14px 12px 0;vertical-align:top;line-height:1.45}
.versus td:first-child{font-weight:700}
.statrow{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:34px 0}
.statblock{border-top:2px solid var(--accent);padding-top:12px}
.stat-num{display:block;font-family:var(--sans);font-weight:800;font-size:40px;line-height:1;font-variant-numeric:tabular-nums}
.stat-label{display:block;font-family:var(--sans);font-size:14px;line-height:1.4;color:var(--ink-2);margin-top:8px}
.chart figcaption{font-family:var(--sans);font-size:14px;color:var(--ink-2);margin-top:10px}
.chart svg{width:100%;height:auto}

/* related / further */
.related-links,.cat-list{list-style:none;margin:0;padding:0}
.related-links li{border-bottom:1px solid var(--rule)}
.related-links a{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:baseline;padding-block:13px;color:var(--ink);font-family:var(--sans);font-size:16.5px}
.related-links a:hover{color:var(--accent);text-decoration:none}
.related-links .num{font-size:14px}
.further-grid{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));border-top:3px solid var(--ink)}
.further-grid a{padding:18px 22px 18px 0;border-right:1px solid var(--rule);color:var(--ink)}
.further-grid a:last-child{border-right:0}
.further-grid a:hover{color:var(--accent);text-decoration:none}
.further-grid strong{display:block;font-family:var(--serif);font-size:21px;font-weight:700;line-height:1.2;margin-top:6px}
.entity-ref{font-family:inherit;border-bottom:1px solid rgba(27,52,196,.35)}

/* profile / org cards */
.profile-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:30px 0}
.profile-card{background:var(--ground-2);padding:20px;display:flex;flex-direction:column}
.profile-card .p-photo{width:72px;height:72px;object-fit:cover;margin-bottom:12px}
.profile-card h3{font-size:21px}
.profile-card .p-role{font-family:var(--sans);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:6px 0 10px}
.profile-card p{font-family:var(--sans);font-size:15px;line-height:1.5;margin:0 0 10px;color:var(--ink-2)}
.profile-card .p-links{margin-top:auto;font-size:14px}
.org-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin:26px 0}
.org-card{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center;background:var(--ground-2);padding:14px;color:var(--ink)}
.org-card:hover{text-decoration:none;background:#E7E7E4}
.org-logo{width:44px;height:44px;object-fit:contain}
.org-name{font-weight:700;font-size:17px}
.org-host{font-family:var(--sans);font-size:13px;color:var(--ink-3)}

/* ---------- supporters ---------- */
.supporters{background:var(--deep);color:var(--ground)}
.supporters .band-head{align-items:baseline}
.sponsor-groups{display:grid;gap:26px}
.supporters .band-head{border-color:#2c2f36}
.supporters .band-head h2{color:var(--ground)}
.supporters .band-head p{color:#9a9ea6}
.sponsor-group{margin-top:22px}
.sponsor-group-label{font-family:var(--sans);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:#8e929a;margin-bottom:14px}
.sponsor-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.sponsor{display:flex;align-items:center;justify-content:center;width:100%;max-width:300px;height:88px;padding:14px 20px;background:#1B1E24;border:1px solid #2c2f36}
.sponsor:hover{border-color:var(--accent);text-decoration:none}
.sponsor img{max-height:48px;max-width:100%;width:auto;height:auto;object-fit:contain}
.sponsor.feat{border-top:2px solid var(--secondary)}

/* ---------- section / hub ---------- */
.sec-hero{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));border-bottom:3px solid var(--ink)}
.sec-hero-text{padding:clamp(30px,4vw,52px) var(--pad) clamp(30px,4vw,52px) 0}
.sec-no{font-family:var(--sans);font-weight:800;font-size:clamp(44px,6vw,64px);color:var(--accent);line-height:1;font-variant-numeric:tabular-nums}
.sec-hero-text h1{font-size:clamp(38px,5.4vw,60px);margin-top:8px}
.sec-hero-text p{font-family:var(--sans);font-size:clamp(16px,1.7vw,18px);line-height:1.6;color:var(--ink-2);max-width:52ch}
.sec-hero-img{position:relative;min-height:320px}
.sec-hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cat-list > li{border-bottom:1px solid var(--rule)}
.cat-list > li:first-child{border-top:3px solid var(--ink)}
.cat-list a{display:grid;grid-template-columns:76px minmax(0,1fr) 280px;gap:26px;align-items:center;padding-block:24px;color:var(--ink)}
.cat-list a:hover{text-decoration:none}
.cat-list a:hover h2,.cat-list a:hover h3{color:var(--accent)}
.cat-list h2,.cat-list h3{font-size:clamp(23px,2.5vw,30px);line-height:1.15}
.cat-list p{font-family:var(--sans);font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:8px 0 0;max-width:62ch}
.cat-list .cat-thumb{aspect-ratio:16/9;overflow:hidden}
.cat-list .cat-thumb img{width:100%;height:100%;object-fit:cover}
.hub-groups{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.hub-group{border-top:2px solid var(--ink);padding-top:14px}
.hub-group h2{font-size:26px;display:flex;align-items:center;gap:10px}
.hub-group h2 svg{color:var(--accent)}
.hub-group p{font-family:var(--sans);font-size:14.5px;color:var(--ink-2);margin:8px 0 12px}
.hub-group ul{list-style:none;margin:0;padding:0}
.hub-group li{border-top:1px solid var(--rule)}
.hub-group li a{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;padding-block:10px;font-family:var(--sans);font-size:15.5px;color:var(--ink)}
.hub-group li a:hover{color:var(--accent);text-decoration:none}

/* prose pages (about/contact/404) */
.page-body{max-width:var(--measure);margin:0 auto;padding-block:20px 40px}
.page-body p{font-size:18.5px;line-height:1.68}
.page-body h2{font-size:26px;margin:34px 0 12px;padding-top:12px;border-top:2px solid var(--ink)}
.form-grid{display:grid;gap:16px;max-width:520px;margin-top:24px}
.form-grid label{font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:6px}
.form-grid input,.form-grid textarea{width:100%;font-family:var(--sans);font-size:16px;padding:11px 12px;border:1px solid var(--ink);background:var(--ground-2);color:var(--ink)}
.form-grid button{font-family:var(--sans);font-weight:700;font-size:15px;padding:13px 20px;background:var(--accent);color:#fff;border:0;justify-self:start;cursor:pointer}

/* quiet line */
.quiet-line{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) auto;gap:26px;align-items:center}
.quiet-kicker{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#6b5400}
.quiet-line p{font-size:clamp(19px,2.2vw,26px);line-height:1.34;font-weight:600;margin:0}
.quiet-link{display:inline-flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;border-bottom:2px solid var(--ink);padding-bottom:3px}
.quiet-link:hover{text-decoration:none;color:#3a2f00}

/* ---------- fair-play diagram ---------- */
.fairplay-grid{display:grid;gap:44px;grid-template-columns:minmax(0,0.95fr) minmax(0,1.05fr);align-items:center}
.fairplay{border:1px solid rgba(255,255,255,.35);padding:20px}
.fairplay svg{width:100%;height:auto}
.fairplay figcaption{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(255,255,255,.3);font-family:var(--sans);font-size:13.5px;color:#dbe0fb}
.fairplay figcaption span{display:flex;align-items:center;gap:9px;white-space:nowrap}
.fairplay .key{position:relative;display:inline-block;width:16px;height:16px;flex:0 0 16px}
.fairplay .key-x::before,.fairplay .key-x::after{content:"";position:absolute;left:0;top:7px;width:16px;height:2.4px;background:#fff}
.fairplay .key-x::before{transform:rotate(45deg)}
.fairplay .key-x::after{transform:rotate(-45deg)}
.fairplay .key-block{width:18px;height:11px;flex:0 0 18px;background:var(--secondary)}
.fairplay .key-dash{width:4px;flex:0 0 4px;background:repeating-linear-gradient(to bottom,var(--secondary) 0 4px,transparent 4px 7px)}

/* ---------- footer ---------- */
.site-foot{border-top:3px solid var(--ink);margin-top:10px;background:var(--deep);color:var(--ground)}
.foot-bar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;padding-block:22px}
.foot-bar .brand-mark{color:var(--ground);flex:0 0 auto}
.foot-bar .brand-mark svg{color:var(--secondary)}
.foot-bar .brand-mark:hover{color:var(--secondary);text-decoration:none}
.foot-bar .brand-name{font-size:17px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto;font-family:var(--sans);font-size:14px}
.foot-links a{display:inline-flex;align-items:baseline;gap:7px;color:#c9ccd1;white-space:nowrap}
.foot-links a:hover{color:var(--secondary);text-decoration:none}
.foot-links .num{font-size:12px;color:var(--secondary)}

/* ---------- responsive ---------- */
@media (max-width:1200px){
  .menu-item > a{padding:10px 9px;font-size:14.5px}
  .menu-item > a svg{display:none}
}
@media (max-width:1080px){
  .register-head,.register-row{grid-template-columns:44px minmax(0,1.3fr) minmax(0,1.4fr)}
  .register-sec{display:none}
  .register-head span:last-child{display:none}
  .cat-list a{grid-template-columns:60px minmax(0,1fr) 200px}
}
@media (max-width:1080px){
  .sponsor-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:900px){
  .fairplay-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .foot-top{grid-template-columns:minmax(0,1fr)}
  .foot-sections{margin-inline:0}
  .foot-sections a{border-right:0;border-bottom:1px solid var(--rule);padding-inline:0}
  .site-head{position:static}
  .head-inner{flex-direction:column;align-items:flex-start;gap:10px}
  .menu-nav{margin-left:0;width:100%}
  .menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px;align-items:start}
  .menu-item > a{padding:8px 0;font-size:15px}
  .menu-item > a svg{display:block}
  .submenu{position:static;display:block;border:0;border-top:1px solid var(--rule);box-shadow:none;padding:4px 0 12px;min-width:0;background:transparent}
  .submenu-head{display:none}
  .submenu li a{padding:6px 0;grid-template-columns:30px minmax(0,1fr);font-size:14px}
  .fig-cell{grid-template-columns:minmax(0,1fr)}
  .regpanel ol{columns:1}
  .cat-list a{grid-template-columns:52px minmax(0,1fr)}
  .cat-list .cat-thumb{display:none}
}
@media (max-width:680px){
  body{font-size:17px}
  .foot-links{margin-left:0}
  .sponsor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-sections{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-sections a:nth-child(2n){border-right:0}
  .register-head,.register-row{grid-template-columns:38px minmax(0,1fr);gap:12px}
  .register-brief{grid-column:2}
  .fig-plate figcaption{flex-direction:column;gap:6px}
  .timeline li,.keyterms div{grid-template-columns:minmax(0,1fr);gap:4px}
  .sponsor{max-width:none;height:80px}
  .further-grid a{border-right:0;border-bottom:1px solid var(--rule);padding-right:0}
  .hero-body h1{max-width:none}
}

@media (max-width:1180px){
  .article{--measure:62ch}
}
@media (max-width:1080px){
  .article-body{grid-template-columns:minmax(0,1fr)}
  .article-body > *,
  .article-body > .out,
  .article-body > .full,
  .article-body > .wide{grid-column:1}
}

@media (max-width:1080px){
  .article-top{max-width:none;margin-inline:0}
}

/* 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-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-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-grid .sponsor.sponsor img{height:48px!important;display:block!important;width:100%!important}

/* op-nav-collapse: this nav printed 182px of stacked links at 390 before any content
   (4 links), and the build shipped no control to close it. A disclosure cannot be
   built from CSS alone — :hover and :focus-within are unreachable on touch until a link has
   already been tapped — so a hidden checkbox and its label were injected immediately before
   the nav, and the nav collapses against the checked state. Exactly the mechanism the builds
   that DO have a burger already use.
   Treatment "right-tab", bold, seeded from the domain so 175 builds do not all ship the
   same hairline box in the same place; it inherits this build's font and colour, and where the
   nav's own parent has no inline padding (0px measured) the button carries the build's
   gutter (clamp(18px,4.4vw,44px)) so it cannot sit against the glass. The links are hidden,
   not removed: they stay in the markup. Desktop is untouched — every rule below is inside the
   phone breakpoint (860px here), where the button appears and the nav starts closed.
   Folded with the "max-height" technique and marked with the "dots" icon — the mechanism
   is deliberately not identical across the fleet either. */
.menu-switch{display:none}
@media (max-width:860px){
  .menu-switch{align-items:center;justify-content:center;gap:9px;font:inherit;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:inherit;cursor:pointer;min-height:44px;box-sizing:border-box;display:flex;width:fit-content;margin-left:auto;border:1px solid currentColor;border-radius:2px;padding:10px 16px;margin-right:clamp(18px,4.4vw,44px);margin-block:clamp(16px,4.5vw,26px) clamp(12px,3vw,18px)}

  .menu-switch-bars{width:13px;height:3px;flex:none;border-radius:99px;background:currentColor;box-shadow:5px 0 0 -0.5px currentColor,-5px 0 0 -0.5px currentColor}
  .submenu > ul{max-height:0;overflow:hidden;padding-block:0;border-top-width:0;border-bottom-width:0;transition:max-height .28s ease}
  .menu-switch-c:checked ~ .submenu > ul{max-height:220vh;padding-block:revert;border-top-width:revert;border-bottom-width:revert}
  .submenu:has(> .menu-switch){display:flow-root}
  .menu-switch:not(:has(~ .submenu > ul)){display:none}
}

/* op-page-overflow: the page scrolled sideways at 320 — a.duo-item reached
   338px in a 320px screen (+18px), inside
   div.duo. Remedy: unpin the grid track. Structural only, no spacing value of mine;
   tried in order and this is the first that held, with the page's visible copy unchanged.
   Phone widths only — desktop is re-measured after writing and must not move. */
@media (max-width:360px){
  div.duo{grid-template-columns:minmax(0,1fr)!important}
  a.duo-item{min-width:0!important;max-width:100%!important}
}

/* op-article-width: the article column was capped at 746px (97 characters per line) at every desktop width. Operator: "it should utilize more space". Widened through grid track 3 of "[full-start] minmax(0,1fr) [wide-start] minmax(0,0.45fr) [text-start] min(var(--measure),100%) [text-end] minmax(0,0.45fr) [wide-end] minmax(0,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 1280 changes. Originals: migration/_backups/article_width/. */
@media (min-width:1280px){
  div.article-body{grid-template-columns:[full-start] minmax(0,1fr) [wide-start] minmax(0,0.45fr) [text-start] min(782px, 100%) [text-end] minmax(0,0.45fr) [wide-end] minmax(0,1fr) [full-end]!important}
}
@media (min-width:1600px){
  div.article-body{grid-template-columns:[full-start] minmax(0,1fr) [wide-start] minmax(0,0.45fr) [text-start] min(clamp(782px, 54.306vw, 938px), 100%) [text-end] minmax(0,0.45fr) [wide-end] minmax(0,1fr) [full-end]!important}
  div.article-body > :is(p:not([class])){font-size:clamp(18.5px,1.2847vw,22.2px)!important}
}
/* op-article-width:end */

/* op-article-head: the article header followed the text column (746px) and was left behind when the text went to 782px. Operator: "article header page with title + meta info that are super shrinked". Its containers now follow the text again by the text's own factor. */
@media (min-width:1280px){
  div.article-top{max-width:min(782px, 100%)!important}
}
@media (min-width:1600px){
  div.article-top{max-width:min(calc(clamp(782px, 54.306vw, 938px) + 0px), 100%)!important}
}
/* op-article-head:end */

/* op-hover-pad */
.register-row{padding-left:clamp(12px,3.5vw,22px)!important}
/* op-hover-pad:end */

/* op-img-dims — intrinsic width/height reserve image space; the proven height:auto guard (zero specificity) */
:where(a > span.cat-thumb > img,
  a.card > div.card-img > img,
  a.duo-item > div.duo-img > img,
  div.article-body > figure.fig-cell.out > img,
  div.article-body > figure.fig-mat.out > img,
  div.article-body > figure.fig-plate.full > img,
  div.sec-hero > div.sec-hero-img > img,
  section.hero > div.hero-img > img){height:auto}
/* op-img-dims:end */