/* Jost, self-hosted. The home page used to fetch this from Google on every
   visit: a render-blocking third-party request on the one page most people
   land on first, from a phone on 3G. */
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/source-assets/fonts/jost-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/source-assets/fonts/jost-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url(/source-assets/fonts/jost-700-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Jost';font-style:normal;font-weight:700;font-display:swap;src:url(/source-assets/fonts/jost-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ============================================================
   spine.css — the furniture every page of the site shares.
   Tokens, the five-size type scale, the gutter, the masthead,
   the progress rule and the footer. Loaded by the home page and
   by /register/, /account/, /terms/ and /privacy/.
   ============================================================ */

:root{
  /* --- paper and ink --- */
  --putty:#E5E4E0; --bone:#EDECE8; --vellum:#D7D5CE; --graphite:#595855;
  --beige:#F4F3F0; --black:#000000; --white:#FFFFFF;
  --ink:#171826;                      /* the masthead and the footer */

  /* --- the poster palette, sampled from source-assets/posters --- */
  --blue:#0B339C;                     /* 38% of poster-committee */
  --blue-bright:#0138CA;
  --blue-air:#7FA0FF;      /* poster blue readable on an ink ground */
  --navy:#122D74;
  --magenta:#9812A4;
  --bronze:#966128;
  --gold:#BD9439;

  /* --- the arc colour code. The lineup poster alternates magenta and blue
       by day; the site follows the poster rather than inventing a ramp. --- */
  --c1:#9812A4;  --c2:#0B339C;  --c3:#9812A4;  --c4:#0B339C;  --c5:#9812A4;
  --arc-c:var(--blue);                /* the arc currently under the reader */

  /* --- the one gutter, every page --- */
  --gut:4.1667vw;

  /* --- five sizes. Nothing else. --- */
  /* the reference's own five steps: 89 / 51 / 36 / 19 / 14 at 1440 */
  --t-display:clamp(42px,6.2vw,89px);
  --t-statement:clamp(30px,3.55vw,51px);
  --t-sub:clamp(23px,2.5vw,36px);
  --t-body:19px;
  /* 15, not the reference's 14. A delegate told us they could not read the site
     without their glasses, and 45% of all text on the site sits on this step —
     including "Cannot get in?" and the package names people read before paying.
     Mechanism 2 caps the scale at FIVE sizes, and five is what this still is;
     only the smallest value moved. Jost also carries a lower x-height than the
     reference's Supreme, so the same number renders smaller here than it did
     when it was measured. */
  --t-micro:15px;
  --t-hero:clamp(74px,14vw,202px);    /* the hero word, the one recorded exception */
  --track:normal;                     /* the reference does not tighten display type */

  /* One grotesk, no serif — the reference has none. --serif is kept as an
     alias so every existing call site resolves to the same family.
     Swapping in a licensed Supreme is a change to these two lines. */
  --grot:Jost,"Helvetica Neue",Helvetica,Arial,sans-serif;   /* Supreme's skeleton: Futura DNA, single-storey a, pointed W */
  --serif:var(--grot);
  --sans:var(--grot);
  --ease:cubic-bezier(.22,.61,.36,1);

  --bar-h:66px;                       /* masthead height, +3px rule */
  --z-rule:44; --z-bar:46; --z-panel:48;
}

/* ============================================================
   THE MASTHEAD
   ============================================================ */
.bar{
  position:fixed; inset:0 0 auto 0; z-index:var(--z-bar);
  background:var(--ink); color:#fff;
  font-family:var(--sans);
}
.bar__in{
  display:flex; align-items:center; gap:3vw;
  height:calc(var(--bar-h) - 3px); padding:0 var(--gut);
}
.bar__mark{
  font-family:var(--serif); font-weight:400; font-size:var(--t-sub); line-height:1; font-weight:700;
  letter-spacing:normal; color:#fff; text-decoration:none; white-space:nowrap;
}
.bar__mark i{font-style:normal; font-weight:400; color:rgba(255,255,255,.62)}
.bar__here{
  font-family:var(--sans); font-size:var(--t-micro); font-weight:700; line-height:1;
  color:var(--ink); background:#fff; padding:6px 10px; margin-left:14px; white-space:nowrap;
}
.bar__nav{display:flex; gap:30px; margin-left:auto}
.bar__nav a{
  font-size:var(--t-micro); font-weight:400; line-height:1; color:rgba(255,255,255,.76);
  text-decoration:none; padding:6px 0; transition:color .18s var(--ease);
}
.bar__nav a:hover{color:#fff}
.bar__nav a[aria-current]{color:#fff; box-shadow:inset 0 -2px 0 0 currentColor}
/* The masthead action is neutral on purpose. Poster blue belongs to ARC 1;
   a blue button sitting above a bronze arc was two accents on one screen. */
.bar__cta{
  font-size:var(--t-micro); font-weight:700; line-height:1; color:var(--ink); text-decoration:none;
  background:#fff; padding:11px 20px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.bar__cta:hover{background:var(--bone)}
.bar__burger{display:none}

/* --- the rule: fills as the reader moves through the five arcs,
       in the colour of the arc they are standing in. One colour at a time. --- */
.rule{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  z-index:var(--z-rule); background:rgba(255,255,255,.16); pointer-events:none;
}
.rule::after{
  content:""; position:absolute; inset:0 auto 0 0;
  width:calc(var(--prog,0) * 100%); background:var(--arc-c);
  transition:background .2s var(--ease);
}
.rule--onlight{background:rgba(255,255,255,.16)}

html{scroll-padding-top:var(--bar-h)}
section[id],header[id]{scroll-margin-top:var(--bar-h)}

/* the page starts below the furniture */
.has-bar{padding-top:var(--bar-h)}

/* ============================================================
   THE FOOTER
   ============================================================ */
.foot{
  background:var(--ink); color:#fff; font-family:var(--sans);
  padding:6vh var(--gut) 26px;
}
.foot__top{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.foot__lockup{width:min(24vw,320px); height:auto}
.foot__yor{
  margin:18px 0 0; font-family:var(--serif); font-style:italic;
  font-size:var(--t-sub); line-height:1.25; color:rgba(255,255,255,.72);
}
.foot h4{
  margin:0 0 14px; font-size:var(--t-micro); font-weight:700; line-height:1.3;
  color:rgba(255,255,255,.6);
}
.foot ul{list-style:none; margin:0; padding:0; font-size:var(--t-body); line-height:1.85}
.foot a{color:#fff; text-decoration:none; transition:color .18s var(--ease)}
.foot a:hover{color:rgba(255,255,255,.68)}
.foot__base{
  display:flex; justify-content:space-between; gap:2vw;
  margin-top:5vh; padding-top:14px; border-top:1px solid rgba(255,255,255,.2);
  font-size:var(--t-micro); font-weight:400; color:rgba(255,255,255,.6);
}

/* ============================================================
   SHARED EDITORIAL FURNITURE
   ============================================================ */

/* THE RUNNING HEAD. One rail, every arc. Each of the five used to carry its
   own implementation — a1__plate / a2__mast / a4__mast / a5__mast — and ARC 3
   carried none at all, which is what "five separately made sections" looked
   like in the markup. */
.arcmast{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:baseline; gap:0 2vw;
  margin:0 var(--gut); padding:0 0 11px;
  border-bottom:1px solid var(--vellum);
  font-family:var(--grot); font-size:var(--t-micro); font-weight:700; color:#56564f;
}
.arcmast > :last-child{text-align:right}
.arcmast em{font-style:normal; font-weight:700; color:var(--black)}
.arcmast--dark{border-bottom-color:rgba(237,236,232,.24); color:rgba(237,236,232,.66)}
.arcmast--dark em{color:#fff}
@media (max-width:820px){
  .arcmast{grid-template-columns:1fr auto; gap:2px 2vw}
  .arcmast > :last-child{grid-column:1/-1; text-align:left}
}

/* the running head that opens every section */
.mast{
  display:flex; justify-content:space-between; gap:2vw;
  padding:0 0 11px; margin:0 var(--gut);
  border-bottom:1px solid var(--vellum);
  font-family:var(--sans); font-size:var(--t-micro); font-weight:700; color:#56564f;
}
.mast--dark{border-bottom-color:rgba(255,255,255,.22); color:rgba(255,255,255,.66)}
.mast__arc{color:var(--arc-c)}
.mast--dark .mast__arc{color:#fff}

/* Every photograph is seated by a CHIP in its lower-left corner — the
   reference's device. Not a band across the image: that is the mechanism
   over-applied, and it was. */
.chip{
  position:absolute; left:0; bottom:0; z-index:2;
  background:var(--arc-c); color:#fff;
  font-family:var(--grot); font-weight:700; font-size:var(--t-micro); line-height:1;
  letter-spacing:normal; padding:8px 11px 9px;
}
.shotwrap{position:relative; overflow:hidden}
.shotwrap > img,.shotwrap > picture > img{display:block; width:100%; height:100%; object-fit:cover}

/* the one action. The hero's chamfered hexagons join it — two button
   shapes for the same word in one viewport was the tell. */
.hex{clip-path:none!important; border-radius:0}
.act{
  display:inline-block; font-family:var(--sans); font-size:var(--t-micro); font-weight:700;
  line-height:1; color:#fff; text-decoration:none; background:var(--arc-c);
  padding:15px 28px; transition:filter .18s var(--ease);
}
.act:hover{filter:brightness(1.14)}
.act--ink{background:var(--ink)}
.act--light{background:#fff; color:var(--ink)}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width:820px){
  /* the scale keeps its drama on a phone: same five steps, bigger vw */
  :root{
    --bar-h:54px;
    --t-display:11.4vw; --t-statement:8vw; --t-sub:6vw;
    /* The phone was never in the bar: barbican.org.uk was measured at 1440×900
       only, so nothing here contradicts a number anybody recorded. This is the
       size a student actually reads on a cheap Android in daylight. */
    --t-body:18px; --t-micro:15px; --t-hero:23vw;
  }
  .bar__nav{
    position:fixed; inset:var(--bar-h) 0 auto 0; z-index:var(--z-panel);
    display:block; margin:0; padding:8px var(--gut) 22px; background:var(--ink);
    border-top:1px solid rgba(255,255,255,.16);
    transform:translateY(-102%); visibility:hidden;
    transition:transform .28s var(--ease), visibility 0s linear .28s;
  }
  .bar.is-open .bar__nav{transform:none; visibility:visible; transition-delay:0s}
  .bar__nav a{
    display:block; padding:15px 0; font-size:var(--t-body); color:#fff;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .bar__nav a[aria-current]{box-shadow:none; color:var(--blue-bright)}
  /* at 390 the wordmark + location chip + action + burger do not fit.
     The chip goes (the page title is right below it anyway) and the
     wordmark is allowed to truncate rather than push the action off-screen. */
  .bar__here{display:none}
  /* line-height:1 on a serif wordmark clips its own ascenders once overflow is
     hidden for the ellipsis — it was losing 3px of the E and the ’ before the
     type scale ever changed. The line box needs to fit the glyphs. */
  /* line-height:1 on a serif wordmark clips its own ascenders once overflow is
     hidden for the ellipsis — it was losing 3px of the E and the ’ before the
     type scale ever changed. The line box needs to fit the glyphs.
     The size is pinned rather than tied to --t-body: the masthead is furniture,
     and it should not resize when reading copy does. */
  .bar__mark{min-width:0; overflow:hidden; text-overflow:ellipsis; font-size:17px; line-height:1.45}
  .bar__in{gap:10px}
  /* 9px of side padding, not 14. The label reads at the larger --t-micro now,
     and at 390px that extra width left the row 5px short of the full wordmark:
     "The Ekiti Experience ’26" truncated to "The Ekiti Experienc…". */
  .bar__cta{margin-left:auto; padding:10px 9px; flex:none; white-space:nowrap}
  .bar__burger{
    display:block; width:34px; height:34px; margin-left:10px; padding:0;
    background:none; border:0; cursor:pointer; position:relative;
  }
  .bar__burger span{
    position:absolute; left:7px; right:7px; height:1.5px; background:#fff;
    transition:transform .26s var(--ease), opacity .18s var(--ease);
  }
  .bar__burger span:nth-child(1){top:12px}
  .bar__burger span:nth-child(2){top:21px}
  .bar.is-open .bar__burger span:nth-child(1){transform:translateY(4.5px) rotate(45deg)}
  .bar.is-open .bar__burger span:nth-child(2){transform:translateY(-4.5px) rotate(-45deg)}

  .foot__top{grid-template-columns:1fr; gap:34px}
  .foot__lockup{width:64vw}
  .foot__base{flex-direction:column; gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .rule::after,.bar__nav,.bar__burger span{transition:none}
}


/* FOOTER TYPOGRAPHY IS NOT THE PAGE'S. `.portal-page p` (0,1,1) was beating
   `.foot__yor` (0,1,0), so the four subpages re-typeset the transplanted
   footer at their own body scale — the voice line collapsed 36px → 19px.
   These carry the footer's own scale at a specificity the page cannot reach. */
.portal-page .foot .foot__yor,.foot .foot__yor{font-size:var(--t-sub); line-height:1.25}
.portal-page .foot ul,.foot ul{font-size:var(--t-body); line-height:1.85}
.portal-page .foot li,.portal-page .foot p,.portal-page .foot a{font-size:inherit; line-height:inherit}
.portal-page .foot h4,.foot h4{font-size:var(--t-micro); line-height:1.3}
.portal-page .foot__base,.foot__base{font-size:var(--t-micro)}

/* ============================================================
   THE SUBPAGES join the system. Typography and colour only —
   their layouts are piece four.
   ============================================================ */
.portal-page{
  font-family:var(--sans); font-size:var(--t-body);
  /* one ground, one gutter, one accent — the portal's own tokens remapped */
  --portal-ink:var(--ink);
  --portal-blue:var(--blue);
  --portal-blue-dark:#071F63;
  --portal-magenta:var(--blue);
  --portal-magenta-deep:var(--blue);   /* was navy — a second blue on every paper screen */
  --portal-gold:var(--bronze);
  --portal-signal:var(--gold);
  --portal-paper:var(--bone);
  --portal-paper-deep:var(--vellum);
  --portal-muted:var(--graphite);
  --portal-line:rgba(23,24,38,.18);
  --portal-gutter:var(--gut);
  --portal-max:none;
  background:var(--bone); color:var(--ink);
}
/* the system declares two weights. 600/700/800 fall back to 500. */
/* --- weight discipline --- */
.portal-page strong,.portal-page b,.portal-page th,
.portal-page .portal-kicker,.portal-page button,.portal-page .btn{font-weight:700}

/* the monospace was costume, not voice */
.portal-page code,.portal-page strong,.portal-page b{font-family:var(--sans)!important}
.portal-page .portal-width{max-width:none; padding-left:var(--gut); padding-right:var(--gut)}
.portal-page h1,.portal-page h2,.portal-page h3,
.portal-page .policy-main h2,.portal-page legend{
  font-family:var(--serif); font-weight:700; letter-spacing:normal;
}
/* the second line of a portal display is the accent, carried by colour — the
   home page's convention. It was italic at 400 here, and read as another face. */
.portal-page h1 em,.portal-page h2 em{font-style:normal; font-weight:700}
.portal-page h1{font-size:var(--t-statement); line-height:1.02}
.portal-page h2{font-size:var(--t-sub); line-height:1.2}
.portal-page h3,.portal-page legend{font-size:var(--t-body)}
.portal-page p,.portal-page li,.portal-page label{font-size:var(--t-body); line-height:1.6}
.portal-page small,.portal-page .portal-footer{font-size:var(--t-micro)}
.portal-footer{
  background:var(--ink); color:rgba(255,255,255,.6);
  font-family:var(--sans); font-weight:400;
  padding:26px var(--gut); margin-top:8vh;
}
.portal-footer a{color:#fff; text-decoration:none}
.portal-footer > div{display:flex; justify-content:space-between; gap:2vw;
  max-width:none; padding-left:0!important; padding-right:0!important; margin:0}


/* ============================================================
   THE REGISTRATION PAGE. It stays an ink surface — the same ink as
   the masthead, the footer and the abstracts panel — because its
   own text colour is the light one. What changes is the accent:
   the pre-redesign pink and magenta give way to poster blue.
   ============================================================ */
.registration-page .portal-kicker,
.registration-page .registration-window b,
.registration-page .flow-steps button[aria-current="step"]{color:#fff}
.registration-page .flow-steps button[aria-current="step"]{background:var(--blue); border-color:var(--blue)}
.registration-page .registration-window b{color:var(--blue-air)}
.registration-page .portal-kicker{color:var(--blue-air)}
.registration-page .registration-intro__lede,
.registration-page .form-heading > p:last-child,
.registration-page .event-facts{color:rgba(237,236,232,.82)}
.registration-page .registration-window span{color:rgba(237,236,232,.7)}
.registration-page .field input,
.registration-page .field select,
.registration-page .field textarea{
  background:rgba(255,255,255,.06); color:var(--bone);
  border:1px solid rgba(237,236,232,.32); border-radius:0;
}
.registration-page .field input::placeholder{color:rgba(237,236,232,.55)}
.registration-page .package-option,
.registration-page .flow-steps button{border-radius:0}
.registration-page .package-option:has(input:checked){
  border-color:var(--blue); background:rgba(11,51,156,.22);
}

/* the draft notice was a sand tint block — the one thing the bar names by hand */
.portal-page .policy-draft{
  background:transparent; border-left:0; border-top:2px solid var(--blue);
  padding:12px 0 0; margin:22px 0 26px; color:var(--ink);
  font-size:var(--t-micro); font-weight:700; display:inline-block;
}
/* the breadcrumb was wearing ARC 4's bronze; the code means nothing if it is also decoration.
   Excluded on the register page, which is printed on ink — graphite read 2.47:1 there. */
.portal-page:not(.registration-page) .portal-kicker{color:var(--graphite)}
.portal-page:not(.registration-page) .portal-kicker span{color:var(--blue)}
/* ...but the account page has two dark grounds — the blue hero and the ink pass
   panel — and account.css already dressed their kickers for it. The rule above
   outranked that and printed graphite (2.13:1, 2.47:1) and the deep blue
   (1.42:1, 1.65:1) on them. Hand those two back to their own treatment. */
.portal-page:not(.registration-page) .portal-kicker--light,
.portal-page:not(.registration-page) .pass-panel .portal-kicker{color:var(--portal-paper)}
.portal-page:not(.registration-page) .portal-kicker--light span,
.portal-page:not(.registration-page) .pass-panel .portal-kicker span{color:var(--portal-signal)}


/* ============================================================
   PIECE 4 — the registration page's own layout.
   The spine gave it the masthead, footer, type and palette; this is
   the body. Containers were capping at 1100px on a 1440 viewport and
   pushing every control into the left 40%.
   ============================================================ */
.registration-page .portal-main,
.registration-page .portal-width,
.registration-page .registration-intro,
.registration-page .registration-intro__inner,
.registration-page .registration-workspace{
  width:100%; max-width:none; margin-left:0; margin-right:0;
}
/* registration-main.css sets width:min(1100px,90%) on these two */
.registration-page .registration-intro__inner,
.registration-page .registration-workspace{width:100%}
.registration-page .registration-form-shell{
  /* 12 Sep: this was a 1px-bordered card carrying up to 52px of its own padding,
     so every label, field and package option inside it began at 110px while the
     masthead, the headline, the facts row and the footer all began at 60. The
     page's largest block was the one thing off the gutter, and a bordered card
     is not a device this site uses anywhere else. */
  max-width:none; margin:0; padding:0; border:0; background:transparent;
}
.registration-page .registration-form-shell > form{padding:0}
/* the identity lockup was centred on a page that is ragged-left throughout */
.registration-page .registration-lockup{margin-left:0; margin-right:auto}
/* the steps rail held kicker | steps | "already registered?" and pushed them to
   the extremes, so the step chips floated in the middle of a page that reads
   ragged-left everywhere else. They run from the gutter now. */
.registration-page .flow-rail{align-items:flex-start; justify-content:flex-start;
  gap:14px clamp(24px,3vw,44px); flex-wrap:wrap}
/* the register page is an INK surface, so its hairlines must be light.
   The .portal-page token remap set --portal-line dark, which is invisible here. */
/* The register page is the one portal surface printed on ink, so the portal's
   accent token has to invert with it. Left as the deep poster blue it measured
   1.97:1 against #171826 — every asterisk, every dt, every kicker. */
.registration-page{--portal-line:rgba(237,236,232,.24);
  --portal-magenta:var(--blue-air); --portal-blue:var(--blue-air);
  --portal-magenta-deep:var(--blue-air);
  /* graphite is a paper grey; on ink it read 2.47:1 across every kicker and
     standfirst on the page */
  --portal-muted:rgba(237,236,232,.78)}
.registration-page .package-option,
.registration-page .field input,
.registration-page .field select,
.registration-page .field textarea{border-color:rgba(237,236,232,.26)}
.registration-page .event-facts{max-width:none}

/* the lockup sat inside a 1px bordered box */
.registration-page .registration-lockup{border:0; background:transparent; width:min(30vw,420px)}

/* the route chips were centred at x=271; they belong on the gutter */
.registration-page .flow-steps{justify-content:flex-start; flex:1 1 auto; margin-left:0}
.registration-page .registration-workspace > *{margin-left:0; margin-right:0}

/* the active chip was #7FA0FF carrying a bone sub-label — 2.1:1 */
.registration-page .flow-steps button[aria-current="step"]{
  background:var(--blue-air); border-color:var(--blue-air); color:var(--ink);
}
.registration-page .flow-steps button span,
.registration-page .password-strength,
.registration-page .portal-main span{color:rgba(237,236,232,.76)}
.registration-page .flow-steps button span{color:var(--blue-air)}
.registration-page .field label span,
.registration-page .required,
.registration-page abbr[title]{color:var(--blue-air)}
/* a span inside a filled button takes the button's own colour, not the page's */
.registration-page .portal-button span{color:inherit}
/* only .package-fieldset legend was inverted; the payment step's legend kept
   --portal-ink and vanished into the ink ground at 1:1 */
.registration-page legend{color:var(--bone)}
.registration-page .package-option--limited .package-option__room,
.registration-page .package-option__room[class*="limit"]{color:var(--blue-air)}
/* The chip above is blue-air carrying INK. These forced its children white,
   left over from when the chip was #0B339C, and white on blue-air is 2.51:1 —
   so the step a delegate is actually standing on was the least readable one. */
.registration-page .flow-steps button[aria-current="step"] b,
.registration-page .flow-steps button[aria-current="step"] small,
.registration-page .flow-steps button[aria-current="step"] span{color:var(--ink)}
.registration-page .flow-steps button[aria-current="step"] small{color:rgba(23,24,38,.82)}

/* mechanism 7: nothing rounds but the action */
.registration-page .package-option,
.registration-page .flow-steps button,
.registration-page .field input,
.registration-page .field select,
.registration-page .field textarea,
.registration-page .registration-form-shell{border-radius:0}

/* Selects on this form had no dropdown arrow at all. Every rule that styles
   them uses the `background` shorthand, which resets background-image, and the
   chevron .field select paints in account.css was being wiped three times over
   — with appearance:none that leaves a dropdown looking exactly like a text
   input. True of gender and delegate type since they were built; school is a
   dropdown now, so it matters. Painted here because spine.css has the last
   word, and in light ink because this form is dark. */
.registration-page .field select{
  padding-right:2.6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m3 5 4 4 4-4' fill='none' stroke='%23EDECE8' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .95rem center;
  background-size:.85rem;
}

/* the "limited slot" card carried a gold outline off the palette */
.registration-page .package-option--limited,
.registration-page .package-option[data-limited]{border-color:rgba(237,236,232,.34)}

/* ============================================================
   PIECE 4 — the account page.
   ============================================================ */
.account-page .account-panel,
.account-page .portal-card,
.account-page form{background:var(--bone); border:1px solid rgba(23,24,38,.16); border-radius:0}
.account-page .field input{background:#fff; border-radius:0; color:var(--ink)}
.account-page .field input::placeholder{color:#5c5c56}
/* "Forgot password?" read as a second primary action. The first version of this
   rule aimed at `.forgot` and `a[href*=forgot]` and matched nothing — the real
   element is a button carrying data-forgot-toggle — so it stayed centred and
   button-shaped under the primary action. */
.account-page .forgot,
.account-page a[href*="forgot"],
.account-page [data-forgot-toggle]{
  display:inline-block; width:auto; min-height:0;
  background:transparent!important; border:0!important; padding:10px 0!important;
  margin:0; text-align:left;
  color:var(--blue)!important; text-decoration:underline; text-underline-offset:3px;
  font-size:var(--t-micro); font-weight:400;
}

/* The .portal-page token remap assumed a light ground. On the registration
   page — which is ink — three of those tokens became text colours you cannot
   read: --portal-ink on ink (1.20:1), --portal-blue on ink (1.97:1) and
   --graphite as muted (2.95:1). Scoped to the main column so the ink footer
   and the white masthead chips are untouched. */
.registration-page .portal-main b,
.registration-page .portal-main strong,
.registration-page .package-option b{color:#fff}
/* an anchor that IS a filled button keeps the button's own colour — this
   blanket link rule was painting "Open my account" blue-air on a blue-air fill */
.registration-page .portal-main a:not(.portal-button),
.registration-page .package-option__top strong,
.registration-page .package-option__room,
.registration-page .event-facts dt,
.registration-page .password-toggle,
.registration-page .portal-kicker span,
.registration-page .registration-window b{color:var(--blue-air)}
.registration-page .portal-main small,
.registration-page .package-option__details,
.registration-page .flow-steps button b,
.registration-page .flow-steps button small,
.registration-page .registration-intro__lede,
.registration-page .event-facts dd,
.registration-page .flow-note{color:rgba(237,236,232,.78)}
.registration-page .flow-steps button span,
.registration-page .password-strength,
.registration-page .portal-main span{color:rgba(237,236,232,.76)}
.registration-page .flow-steps button span{color:var(--blue-air)}
.registration-page .field label span,
.registration-page .required,
.registration-page abbr[title]{color:var(--blue-air)}
/* a span inside a filled button takes the button's own colour, not the page's */
.registration-page .portal-button span{color:inherit}
/* only .package-fieldset legend was inverted; the payment step's legend kept
   --portal-ink and vanished into the ink ground at 1:1 */
.registration-page legend{color:var(--bone)}
.registration-page .package-option--limited .package-option__room,
.registration-page .package-option__room[class*="limit"]{color:var(--blue-air)}
.registration-page .flow-steps button[aria-current="step"] b,
.registration-page .flow-steps button[aria-current="step"] small,
.registration-page .flow-steps button[aria-current="step"] span{color:var(--ink)}

/* ============================================================
   THE ACCOUNT DASHBOARD — 12 Sep
   The last surface still built like a different product: a saturated blue
   hero carrying an adire texture and a 32rem double-ring circle behind it,
   the wordmark blown to 55rem and bled off the right edge under
   mix-blend-mode:screen, gold running as a second accent on six elements,
   a 135deg gradient inside the pass, and every section drawn as a bordered
   card — with a card nested inside one, which bar.md bans outright.
   ============================================================ */

/* one dark plane, and it is the site's own */
.account-page .account-hero{background:var(--ink); color:var(--bone)}
.account-page .account-hero::after{display:none}
.account-page .account-hero__mark{
  width:min(26rem,32vw); max-width:none; transform:none; mix-blend-mode:normal;
  background:transparent; filter:none; object-fit:contain; justify-self:end;
}

/* one accent. Gold was carrying "delegate", "Admit one", "Experience.",
   "Paid", every Copy control and the status dot, against blue everywhere else. */
/* blue-air is legible on ink and a pale wash on paper, so it is scoped to the
   two ink objects. Everywhere else on this page the accent is the paper blue. */
.account-page{--portal-signal:var(--blue)}
.account-page .account-hero,
.account-page .pass-panel{--portal-signal:var(--blue-air)}

/* the pass is the one object here that is legitimately a card — it is a ticket.
   It keeps its plane and loses the gradient. */
.account-page .pass-panel__main{background:var(--ink)}

/* everything else is a block on the page, separated by a hairline, the way
   #abstracts is on the home page. Not a bordered card. */
.account-page .access-panel,
.account-page .activity-panel,
.account-page .account-actions,
.account-page .account-signin-shell{
  border:0; border-top:1px solid rgba(23,24,38,.22);
  background:transparent; padding:22px 0 34px; min-height:0;
}
.account-page .account-signin-shell{align-self:start}
.account-page .account-signin-shell form,
.account-page .account-actions{background:transparent; border:0}
.account-page .account-layout{gap:0 clamp(28px,4vw,60px)}

/* square, like every other element on the site */
.account-page .status-dot,
.account-page .activity-item::before{border-radius:0}

/* the sign-in column ran empty below the button while the support line sat
   stranded across the foot of the page. It belongs with "how to get in". */
.account-page .account-empty__help{
  margin:3.2rem 0 0; padding-top:1.4rem; max-width:38ch;
  border-top:1px solid rgba(23,24,38,.22);
  font-size:var(--t-micro); color:#56564f;
}
.account-page .account-empty__help b{color:var(--ink)}
.account-page .account-empty__help a{color:var(--blue); text-underline-offset:3px}

/* ---- portal vertical rhythm, 13 Sep -------------------------------------
   Measured by scanning the rendered pages for rows of pure background: the
   account page was carrying 520px of dead band in a 1489px page (35% of it),
   and the register page a 166px void between the intro and the step rail. The
   home page's sections breathe at 12-14vh; these were at 160px fixed on a
   panel holding one short sign-in form. Brought onto the same rhythm.        */
.account-page .account-empty{padding-top:52px; padding-bottom:64px}
.account-page .account-bottom-note{padding-bottom:40px}
.registration-page .registration-workspace{padding-top:56px}
.registration-page .portal-trust{padding-bottom:40px}
@media (max-width:820px){
  .account-page .account-empty{padding-top:56px; padding-bottom:48px}
  .registration-page .registration-workspace{padding-top:40px}
}

/* ---- the portal pages join the publication, 13 Sep -----------------------
   Register, account, terms and privacy carried none of the home page's
   devices: no three-part meta row, no date line, nothing but the masthead and
   the footer to say they belonged to the same site. They now open with the
   same rail the five arcs use — one component, already in this file — so the
   reader meets the identical row on every route.                            */
.portalmast{margin:26px var(--gut) 34px}
/* the policy pages already inset their own main, so the rail keeps the gutter
   it inherits and only loses thedead space above it */
.policy-page .portalmast{margin-left:0; margin-right:0; margin-top:0}
.policy-page .policy-main{padding-top:34px}
.registration-page .portalmast{
  margin:26px var(--gut) 10px; border-bottom-color:rgba(237,236,232,.24);
}
.account-page .portalmast{margin:26px var(--gut) 10px}
@media (max-width:820px){
  .portalmast{margin-top:20px; margin-bottom:22px}
  .policy-page .policy-main{padding-top:24px}
}

/* The skip link is the first thing a keyboard user lands on, and on the account
   page it rendered --portal-ink on --portal-blue: 1.65:1. White on that blue is
   8.6:1. It is never seen by a mouse user, which is exactly why it was missed. */
.portal-skip,
.portal-page .portal-skip{color:#fff!important; background:var(--blue)!important}
.portal-skip:focus,
.portal-page .portal-skip:focus{outline:3px solid #fff; outline-offset:2px}


/* The attribution on the campaign site.
   The footer here is the ink plane, not paper — a first pass set the links to
   var(--ink), which IS that background, so the credit measured 1.00:1 and was
   invisible on the one page most people see first. */
.credit {
  margin: 0; padding-top: 18px;
  font-family: var(--sans); font-size: var(--t-micro); line-height: 1.5;
  color: rgba(255, 255, 255, .62);
}
.credit a {
  color: #fff; text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, .45);
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.credit a:hover { text-decoration-color: currentColor; }