:root{
  --paper:#F6F6FB; --surface:#FFFFFF; --surface-2:#EFEFF7;
  --ink:#1C2440; --ink-2:#4E5878; --ink-3:#858EAB;
  --accent:#E8572B; --accent-deep:#C4441D; --accent-wash:#FDEEE7;
  --rule:#E4E4F0; --rule-strong:#CCCDDF;
  --shadow:0 1px 2px rgba(28,36,64,.05), 0 8px 24px -12px rgba(28,36,64,.14);
  --shadow-lift:0 2px 4px rgba(28,36,64,.06), 0 14px 32px -14px rgba(28,36,64,.22);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12141F; --surface:#1A1D2C; --surface-2:#222639;
    --ink:#ECEDF5; --ink-2:#AEB4CC; --ink-3:#7F86A2;
    --accent:#FF7C4F; --accent-deep:#FF9772; --accent-wash:#2E1D18;
    --rule:#2A2E42; --rule-strong:#3D4258;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
    --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 14px 32px -14px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --paper:#12141F; --surface:#1A1D2C; --surface-2:#222639;
  --ink:#ECEDF5; --ink-2:#AEB4CC; --ink-3:#7F86A2;
  --accent:#FF7C4F; --accent-deep:#FF9772; --accent-wash:#2E1D18;
  --rule:#2A2E42; --rule-strong:#3D4258;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lift:0 2px 4px rgba(0,0,0,.35), 0 14px 32px -14px rgba(0,0,0,.6);
}

*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Figtree,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-deep); text-underline-offset:.18em; text-decoration-thickness:.07em;}
a:hover{color:var(--accent);}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:5px;}
.wrap{max-width:1140px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem);}

/* ── masthead ────────────────────────────────── */
.masthead{background:var(--surface); border-bottom:1px solid var(--rule);}
.masthead .wrap{display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap; padding-top:1.15rem; padding-bottom:1.15rem;}
.mark{display:flex; align-items:baseline; gap:.6rem; text-decoration:none; color:inherit;}
.mark b{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:800;
  font-size:1.72rem; letter-spacing:-.03em; line-height:1; color:var(--ink);}
.mark i{font-style:normal; font-size:.8rem; color:var(--ink-3); font-weight:500;}
nav{display:flex; gap:.35rem; flex-wrap:wrap; align-items:center;}
nav a{font-size:.9rem; font-weight:500; color:var(--ink-2); text-decoration:none;
  padding:.4rem .7rem; border-radius:7px;}
nav a:hover{color:var(--ink); background:var(--surface-2);}
nav a.on{color:var(--accent-deep); background:var(--accent-wash); font-weight:600;}

/* ── type ────────────────────────────────────── */
h1{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:700;
  font-size:clamp(1.95rem,6.2vw,3.6rem); line-height:1.06; letter-spacing:-.03em;
  overflow-wrap:break-word;
  margin:.7rem 0 0; text-wrap:balance;}
h2{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:600;
  font-size:1.7rem; line-height:1.2; letter-spacing:-.025em; margin:0; text-wrap:balance;}
h3{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:600;
  font-size:1.16rem; line-height:1.25; letter-spacing:-.015em; margin:0;}
.lead{font-size:1.19rem; color:var(--ink-2); margin:1.1rem 0 0; max-width:56ch;}

/* ── hero + flag band ────────────────────────── */
/* vertical only: a shorthand here would cancel the horizontal padding .wrap sets,
   which is invisible while the viewport is wider than .wrap and flush to the
   screen edge as soon as it is not. */
.hero{padding-top:clamp(2.5rem,6vw,4rem);}
.flagband{display:flex; flex-wrap:wrap; gap:.3rem; margin:2.1rem 0 .5rem; max-width:44rem;}
.flagband span{font-size:1.6rem; line-height:1.35; filter:saturate(1.05);}
@media (prefers-reduced-motion:no-preference){
  .flagband span{animation:pop .4s cubic-bezier(.2,.9,.3,1.3) backwards;}
  @keyframes pop{from{opacity:0; transform:translateY(6px) scale(.86);} to{opacity:1;}}
}

/* ── shared ──────────────────────────────────── */
.sec{padding-top:clamp(2.75rem,6vw,4rem); padding-bottom:clamp(2.75rem,6vw,4rem);}
.sec-head{margin-bottom:1.5rem;}
.stack{display:flex; flex-direction:column; gap:.75rem;}
.chip{
  font-size:.76rem; font-weight:600; padding:.3rem .65rem; border-radius:999px;
  background:var(--surface-2); color:var(--ink-2); white-space:nowrap;
}
.chip.ga{background:var(--accent-wash); color:var(--accent-deep);}
.go{
  width:2rem; height:2rem; border-radius:999px; background:var(--surface-2);
  color:var(--ink-2); display:grid; place-items:center; font-size:1rem; flex:none;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}


/* ── next edition ────────────────────────────── */
.next{display:flex; align-items:center; gap:1.15rem; flex-wrap:wrap;
  background:var(--accent-wash); border-radius:14px; padding:1.3rem 1.6rem;
  text-decoration:none; color:inherit;
  transition:transform .18s ease, box-shadow .18s ease;}
.next:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift);}
.next .flag{font-size:2.1rem; line-height:1;}
.next-label{display:block; font-size:.75rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--accent-deep);}
.next-title{display:block; font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-weight:700; font-size:1.42rem; letter-spacing:-.025em; color:var(--ink); margin-top:.2rem;}
.next-sub{display:block; font-size:.93rem; color:var(--ink-2); margin-top:.1rem;}

/* ── how to take part ────────────────────────── */
.two{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr)); gap:.75rem;}
.path{background:var(--surface); border:1px solid var(--rule); border-radius:13px;
  padding:1.5rem 1.6rem; box-shadow:var(--shadow);}
.path h3{margin-bottom:.6rem;}
.path p{margin:0 0 .75rem; color:var(--ink-2); font-size:.95rem;}
.path p:last-child{margin-bottom:0;}

/* ── faq ─────────────────────────────────────── */
.qa{background:var(--surface); border:1px solid var(--rule); border-radius:13px;
  padding:0 1.5rem; box-shadow:var(--shadow);}
.qa + .qa{margin-top:.6rem;}
.qa summary{cursor:pointer; list-style:none; padding:1.15rem 0; font-weight:600;
  font-size:1.02rem; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;}
.qa summary::-webkit-details-marker{display:none;}
.qa summary::after{content:"+"; font-size:1.4rem; line-height:1; color:var(--ink-3); flex:none;}
.qa[open] summary::after{content:"\2013";}
.qa summary:hover{color:var(--accent-deep);}
.qa .a{padding:0 0 1.3rem; color:var(--ink-2); font-size:.96rem; max-width:64ch;}
.qa .a p{margin:0 0 .65rem;}
.qa .a p:last-child{margin:0;}

/* ── committees ──────────────────────────────── */
.cmte + .cmte{margin-top:2.75rem;}
.cmte h2{margin-bottom:.35rem;}
.cmte .blurb{color:var(--ink-2); font-size:.95rem; margin:0 0 1.2rem; max-width:56ch;}
.member{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto;
  gap:.75rem 1.25rem; align-items:center; background:var(--surface);
  border:1px solid var(--rule); border-radius:13px; padding:1rem 1.4rem;
  box-shadow:var(--shadow);}
.member .flag{font-size:1.5rem; line-height:1;}
.m-name{font-weight:600; color:var(--ink); font-size:1.02rem; display:block;}
.m-country{font-size:.87rem; color:var(--ink-3);}
.m-term{font-size:.88rem; color:var(--ink-2); font-variant-numeric:tabular-nums; white-space:nowrap;}
.roles{display:flex; gap:.4rem; flex-wrap:wrap; justify-content:flex-end;}
.member.pending{background:transparent; box-shadow:none; border-style:dashed;}
.m-name.m-pending{color:var(--ink-3); font-weight:500; font-style:italic;}
@media (max-width:640px){
  .member{grid-template-columns:auto minmax(0,1fr);}
  .member .chip, .m-term{grid-column:2; justify-self:start;}
}

/* ── editions ────────────────────────────────── */
.grouplabel{font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-3); margin:2.5rem 0 .9rem;}
.grouplabel:first-of-type{margin-top:0;}
.ed-row{display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto auto;
  gap:1rem 1.5rem; align-items:center; background:var(--surface); border:1px solid var(--rule);
  border-radius:13px; padding:1.1rem 1.4rem; text-decoration:none; color:inherit;
  box-shadow:var(--shadow); transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;}
a.ed-row:hover{box-shadow:var(--shadow-lift); transform:translateY(-2px); border-color:var(--rule-strong);}
a.ed-row:hover .go{background:var(--accent); color:#fff;}
.ed-year{font-family:"Bricolage Grotesque",Figtree,sans-serif; font-weight:700; font-size:1.85rem;
  line-height:1; letter-spacing:-.03em; color:var(--accent); font-variant-numeric:tabular-nums;}
.ed-nth{font-size:.74rem; font-weight:600; color:var(--ink-3); margin-top:.25rem;}
.ed-where{display:flex; align-items:center; gap:.65rem; flex-wrap:wrap;}
.ed-where .flag{font-size:1.45rem;}
.ed-place{font-weight:600; font-size:1.04rem; color:var(--ink);}
.ed-dates{font-size:.9rem; color:var(--ink-2); margin-top:.15rem;}
.ed-num{text-align:right; font-size:.87rem; color:var(--ink-2); white-space:nowrap;}
.ed-num b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums;}
.ed-tag{font-size:.72rem; font-weight:600; padding:.15rem .5rem; border-radius:999px;
  background:var(--surface-2); color:var(--ink-2);}
.ed-row.soon{background:transparent; box-shadow:none; border-style:dashed;}
.ed-row.soon .ed-year{color:var(--ink-3);}
@media (max-width:720px){
  .ed-row{grid-template-columns:4.5rem minmax(0,1fr); }
  .ed-num, .ed-row .go{grid-column:2; text-align:left;}
}

/* ── table ───────────────────────────────────── */
th.r{text-align:right;}
.tablewrap{overflow-x:auto; background:var(--surface); border:1px solid var(--rule);
  border-radius:13px; box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; min-width:46rem;}
th{font-size:.78rem; font-weight:600; color:var(--ink-3); text-align:left;
  padding:1rem 1rem .75rem; border-bottom:1px solid var(--rule); white-space:nowrap;}
td{padding:.95rem 1rem; border-bottom:1px solid var(--rule); vertical-align:middle; font-size:.94rem;}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:var(--surface-2);}
.cty{display:flex; align-items:center; gap:.7rem; white-space:nowrap;}
.flag{font-size:1.5rem; line-height:1;}
.cty .nm{font-weight:600; color:var(--ink);}
.yr{font-weight:700; color:var(--accent); font-variant-numeric:tabular-nums; font-size:1.02rem;}
.org{color:var(--ink); max-width:30rem;}
.links{white-space:nowrap; text-align:right;}
.ico{display:inline-grid; place-items:center; width:2.15rem; height:2.15rem;
  border-radius:9px; background:var(--surface-2); color:var(--ink-2); margin-left:.35rem;
  transition:background .16s ease, color .16s ease, transform .16s ease;}
.ico:hover{background:var(--accent); color:#fff; transform:translateY(-1px);}
.ico svg{width:1.05rem; height:1.05rem;}
td a{word-break:break-word;}
.none{color:var(--ink-3);}

/* ── footer ──────────────────────────────────── */

footer{background:var(--surface); border-top:1px solid var(--rule); margin-top:1rem;}
footer .wrap{padding-top:2.9rem; padding-bottom:2.1rem;}
.f-grid{display:grid; gap:2rem 3.5rem;
  grid-template-columns:minmax(0,1.5fr) repeat(2,minmax(8rem,1fr));}
.f-brand b{display:block; font-family:"Bricolage Grotesque",Figtree,sans-serif;
  font-weight:800; font-size:1.5rem; letter-spacing:-.03em; line-height:1; color:var(--ink);}
.f-brand p{margin:.55rem 0 0; font-size:.89rem; color:var(--ink-3); max-width:30ch;}
.f-col h4{margin:0 0 .75rem; font-size:.75rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3);}
.f-col a{display:block; padding:.2rem 0; font-size:.92rem; color:var(--ink-2); text-decoration:none;}
.f-col a:hover{color:var(--accent-deep);}
.f-base{margin-top:2.4rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-size:.83rem; color:var(--ink-3); font-variant-numeric:tabular-nums;}

.loaderr{color:var(--ink-3); font-size:.95rem; padding:1.25rem 0;}

/* ── documents: regulations and syllabus ─────── */
.doc-toc{display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 2.25rem;}
.doc-toc a{font-size:.86rem; font-weight:600; padding:.35rem .8rem; border-radius:999px;
  background:var(--surface); border:1px solid var(--rule); color:var(--ink-2);
  text-decoration:none;}
.doc-toc a:hover{border-color:var(--rule-strong); color:var(--accent-deep);}
.doc{max-width:74ch;}
.doc h2{margin:2.6rem 0 .9rem; scroll-margin-top:1.5rem;}
.doc h2:first-child{margin-top:0;}
.doc h3{margin:2rem 0 .6rem; font-size:1.24rem;}
.doc h4{margin:1.5rem 0 .5rem; font-size:1.02rem;}
.doc h5{margin:1.2rem 0 .4rem; font-size:.95rem; color:var(--ink-2);}
.doc p{color:var(--ink-2); margin:0 0 .85rem;}
.doc ul{margin:0 0 1.15rem; padding-left:1.35rem; color:var(--ink-2);}
.doc li{margin:.3rem 0;}
.doc code{font-size:.92em; background:var(--surface-2); border-radius:4px; padding:.05em .35em;}
.doc strong{color:var(--ink); font-weight:600;}
.clause-n{display:inline-block; color:var(--accent); margin-right:.55rem;}
.clause{scroll-margin-top:1.5rem;}
.clause-ref{font-variant-numeric:tabular-nums; color:var(--ink-3); font-weight:600;
  text-decoration:none; margin-right:.2rem;}
.clause-ref:hover{color:var(--accent);}
.clause:target{background:var(--accent-wash); border-radius:6px;
  box-shadow:0 0 0 .5rem var(--accent-wash);}
ul.syl{list-style:none; padding-left:0;}
ul.syl li{padding-left:1.75rem; position:relative;}
ul.syl.yes > li::before{content:"\2705"; position:absolute; left:0; font-size:.9em;}
ul.syl.no  > li::before{content:"\274C"; position:absolute; left:0; font-size:.9em;}
ul.syl.sub{list-style:disc; padding-left:1.35rem; margin:.35rem 0 .35rem;}
ul.syl.sub li{padding-left:0;}
ul.syl.sub li::before{content:none;}
.doc-src{margin-top:2.75rem; padding-top:1.3rem; border-top:1px solid var(--rule);
  font-size:.88rem; color:var(--ink-3); max-width:70ch;}
.doc-src code{background:var(--surface-2); border-radius:4px; padding:.05em .35em;}

/* ── phones ──────────────────────────────────── */
@media (max-width:560px){
  /* The register is four columns and about 736px wide, which on a phone is two
     screens of sideways scrolling. Below this width each row becomes a block
     instead: country and year on one line, the organisation under it, the links
     under that. The header row goes, so the year says what it is. */
  .tablewrap{overflow-x:visible;}
  table{min-width:0;}
  thead{display:none;}
  tbody, table{display:block;}
  tr{display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem 1rem;
     padding:1.05rem 1.25rem; border-bottom:1px solid var(--rule);}
  tbody tr:last-child{border-bottom:0;}
  td{display:block; padding:0; border:0;}
  td:nth-child(1){flex:1 1 auto;}
  td:nth-child(2){flex:0 0 auto;}
  td:nth-child(3){flex:1 1 100%;}
  td:nth-child(4){flex:1 1 100%; text-align:left; margin-top:.35rem;}
  .yr{font-size:.92rem; font-weight:600;}
  .yr::before{content:"since "; color:var(--ink-3); font-weight:500;}
  .org{max-width:none;}
  .links .ico{margin:0 .4rem 0 0;}
  .f-grid{grid-template-columns:1fr; gap:1.75rem;}
  .masthead .wrap{gap:.75rem;}
  nav{gap:.15rem;}
  nav a{padding:.35rem .55rem; font-size:.88rem;}
  .flagband span{font-size:1.42rem;}
  .next{gap:.9rem; padding:1.15rem 1.25rem;}
  .next-title{font-size:1.24rem;}
  .path{padding:1.25rem 1.3rem;}
  .qa{padding:0 1.2rem;}
  .qa summary{gap:1rem;}
  .doc-toc{gap:.4rem;}
  .doc-toc a{font-size:.82rem; padding:.3rem .65rem;}
}