/* ============================================================================
   Polarisk design system
   ----------------------------------------------------------------------------
   The language is an observatory instrument crossed with a signed clinical
   record. Two rules keep it there, and both are load-bearing:

     1. Authority comes from hairlines, typography and density — never from
        shadows, gradients, rounded cards or colour washes. Radius never
        exceeds 2px. Nothing is a pill.
     2. Gold marks authority only: a citation, a signature, a figure that
        carries legal weight, one call to action. Gold used decoratively is a
        bug, not a flourish.

   Night is the only theme. @media print remaps everything to paper, because
   buyers print compliance pages and hand them to a DPO.
   ========================================================================= */

:root{
  /* Night */
  --night:#05090F;
  --night-hi:#0B1422;
  --night-panel:#080E18;
  --night-quote:#070C15;

  /* Ink on night */
  --starlight:#EDF1FA;
  --dim:#9FADC6;
  --dimmer:#6E7C95;

  /* Authority */
  --gold:#D9B45B;
  --gold-deep:#C29A3B;
  --star:#EAD9A8;

  /* Paper — signed documents, certificates, printed extracts */
  --paper:#F6F2EA;
  --ink:#0E1B33;
  --ink-soft:#44506A;

  /* Structure */
  --rule:rgba(159,173,198,.17);
  --rule-strong:rgba(159,173,198,.30);
  --rule-gold:rgba(217,180,91,.30);

  /* Type */
  --serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;

  /* Measure and rhythm */
  --measure:68ch;
  --gutter:clamp(20px,5vw,64px);
  --shell:1180px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--night);
  color:var(--starlight);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video{max-width:100%;height:auto}
::selection{background:var(--gold);color:var(--night)}

/* --- Focus: visible, gold, never removed ------------------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:2px;
}


/* ============================================================================
   1. Shell
   ========================================================================= */

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.shell--narrow{max-width:840px}

/* ============================================================================
   3. Typography
   ========================================================================= */

h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.17;letter-spacing:-.005em}
h1{font-size:clamp(31px,4.6vw,50px);line-height:1.09;letter-spacing:-.015em}
h2{font-size:clamp(24px,3vw,33px);margin-top:2.4em}
h3{font-size:clamp(19px,2vw,22px);margin-top:1.9em}
h4{font-family:var(--sans);font-size:16px;font-weight:600;margin-top:1.6em}
h2+h3,h2+p,h3+p,h1+p{margin-top:.7em}

p,ul,ol,table,figure,blockquote,.note,.callout,.plate{max-width:var(--measure)}
p{margin-top:1.05em}
.lede{font-size:clamp(18px,2.1vw,21.5px);line-height:1.55;color:var(--dim);margin-top:1.1em}
.lede strong{color:var(--starlight);font-weight:400}

a{color:var(--star);text-decoration:none;border-bottom:1px solid var(--rule-gold)}
a:hover{color:var(--gold);border-bottom-color:var(--gold)}

strong,b{font-weight:600;color:var(--starlight)}
em{font-style:italic}
small{font-size:14px;color:var(--dimmer)}
abbr[title]{text-decoration:underline dotted rgba(159,173,198,.5);cursor:help}

ul,ol{margin-top:1.05em;padding-left:1.25em}
li{margin-top:.5em;padding-left:.25em}
li::marker{color:var(--gold-deep)}

/* Unbulleted definition list — the workhorse for "what you get" blocks.

   Two columns where there is room. As a single column this was the component
   most responsible for pages reading as a wall: five items stacked vertically
   is a tall, undifferentiated block of prose that the eye slides off. Side by
   side it becomes something you scan. Falls back to one column under 640px,
   where stacking is correct. */
.deflist{
  list-style:none;padding:0;margin-top:1.4em;max-width:none;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  column-gap:clamp(26px,3vw,48px);
  border-top:1px solid var(--rule);
}
.deflist li{
  margin:0;padding:15px 0 17px;border-bottom:1px solid var(--rule);
  display:block;
}
.deflist b{display:block;font-family:var(--sans);font-size:16px;margin-bottom:5px}
.deflist span{display:block;color:var(--dim);font-size:15.5px;line-height:1.58}
/* Where a list is genuinely sequential, keep it in one column. */
.deflist--flow{grid-template-columns:minmax(0,1fr);max-width:var(--measure)}

/* Eyebrow / kicker */
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin:0 0 14px;
}
.eyebrow--dim{color:var(--dimmer)}

/* Section number, document style */
.secnum{
  font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--gold-deep);
  display:block;margin-bottom:9px;
}

/* ============================================================================
   4. Buttons
   ----------------------------------------------------------------------------
   Two only. Gold solid = the one action that matters on this page. Ghost =
   everything else. No third style, no icon buttons, no pills.
   ========================================================================= */

.btn{
  display:inline-block;font-family:var(--mono);font-size:13.5px;letter-spacing:.02em;
  background:var(--gold);color:var(--night);border:1px solid var(--gold);
  padding:14px 24px;border-radius:2px;text-decoration:none;
  transition:background .16s ease,border-color .16s ease;
}
.btn:hover{background:var(--star);border-color:var(--star);color:var(--night)}
.btn--ghost{
  background:transparent;color:var(--star);border-color:var(--rule-gold);
}
.btn--ghost:hover{background:rgba(217,180,91,.09);color:var(--gold);border-color:var(--gold)}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:1.8em;max-width:var(--measure)}

/* ============================================================================
   5. Sections and rules
   ========================================================================= */

section{padding:clamp(52px,7vw,92px) 0}
section+section{border-top:1px solid var(--rule)}
.section--tight{padding:clamp(36px,4.5vw,58px) 0}
.section--panel{background:var(--night-panel)}

.hdr{max-width:760px}
.hdr h2{margin-top:0}

/* Two-column editorial: sticky heading beside flowing body */
.split{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(28px,5vw,74px)}
.split__aside{position:sticky;top:98px;align-self:start}
.split__aside h2{margin-top:0}
.split__body>*:first-child{margin-top:0}
@media (max-width:859px){
  .split{grid-template-columns:1fr;gap:22px}
  .split__aside{position:static}
}

/* ============================================================================
   6. Register — the programme/service grid
   ----------------------------------------------------------------------------
   Not "cards". Ruled cells in a register, the way a schedule of statutory
   duties is actually printed. Borders, not boxes.
   ========================================================================= */

.register{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));
  gap:0;margin-top:2.2em;max-width:none;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.register__cell{
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:26px 26px 28px;display:flex;flex-direction:column;
  transition:background .18s ease;
}
/* Four-cell grids orphan their last item at shell width (3 + 1). This asks for
   a wider minimum so four cells land as a balanced 2 x 2. */
.register--pair{grid-template-columns:repeat(auto-fit,minmax(400px,1fr))}
a.register__cell{border-bottom:1px solid var(--rule);color:inherit}
a.register__cell:hover{background:var(--night-hi);color:inherit}
a.register__cell:hover .register__name{color:var(--gold)}
.register__ref{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--gold-deep);
  margin-bottom:11px;
}
.register__name{
  font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.22;
  margin:0;transition:color .18s ease;
}
.register__law{
  font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--dimmer);
  margin-top:9px;
}
.register__body{color:var(--dim);font-size:15px;line-height:1.58;margin-top:13px;max-width:none}
.register__more{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--star);
  margin-top:auto;padding-top:18px;
}

/* ============================================================================
   6b. Programme cards
   ----------------------------------------------------------------------------
   The register, made openable. Same ruled-cell language, but each cell expands
   in place to show the facts a SHEQ lead is actually comparing: what triggers
   it, how often, who may sign, and whether a finding is reportable.

   Native <details> does the work. No JavaScript, keyboard operable and screen
   reader announced for free, and the facts stay in the DOM so they are indexed
   whether or not anyone opens the card.
   ========================================================================= */

.pgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(304px,1fr));
  gap:0;margin-top:2.4em;max-width:none;
  border-top:1px solid var(--rule);border-left:1px solid var(--rule);
}
.pcard{
  position:relative;
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);
  padding:26px 26px 22px;display:flex;flex-direction:column;
  transition:background .18s ease;
}
.pcard:hover{background:var(--night-hi)}
/* A gold edge marks the open card, so an expanded cell reads as the one you
   are working in rather than as a layout accident.

   Two selectors, deliberately. :has() covers the no-JavaScript case; the
   data-open attribute, set from the details' own toggle event, covers browsers
   without :has() support. Either alone is sufficient, and they cannot
   disagree because both derive from the same open state. */
.pcard::before{
  content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:2px;
  background:var(--gold);opacity:0;transition:opacity .2s ease;
}
.pcard:has(details[open])::before,
.pcard[data-open="true"]::before{opacity:1}
.pcard:has(details[open]),
.pcard[data-open="true"]{background:var(--night-hi)}

.pcard__ref{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--gold-deep);
  margin-bottom:11px;
}
.pcard__name{
  font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.22;margin:0;
}
.pcard__name a{color:var(--starlight);border:0}
.pcard__name a:hover{color:var(--gold)}
.pcard__law{
  font-family:var(--mono);font-size:11.5px;line-height:1.55;color:var(--dimmer);
  margin:9px 0 0;max-width:none;
}
.pcard__blurb{color:var(--dim);font-size:15px;line-height:1.58;margin:13px 0 0;max-width:none}

.pcard__more{margin-top:16px;border-top:1px solid var(--rule)}
.pcard__more summary{
  cursor:pointer;list-style:none;padding:13px 22px 13px 0;position:relative;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--star);
}
.pcard__more summary::-webkit-details-marker{display:none}
.pcard__more summary::after{
  content:"";position:absolute;right:3px;top:50%;width:9px;height:9px;margin-top:-5px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:rotate(45deg) translateY(-2px);transition:transform .22s ease;
}
.pcard__more[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pcard__more summary:hover{color:var(--gold)}

.pcard__facts{margin:0 0 4px;padding:0 0 6px}
.pcard__facts div{padding:11px 0;border-top:1px solid var(--rule)}
.pcard__facts dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);margin-bottom:5px;
}
.pcard__facts dd{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55}

.pcard__go{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;color:var(--star);
  margin-top:auto;padding-top:18px;border:0;
}
.pcard__go:hover{color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  .pcard,.pcard::before,.pcard__more summary::after{transition:none}
}

/* ============================================================================
   7. Figures — numbers that carry legal weight
   ========================================================================= */

.figrow{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--rule-gold);margin-top:2.2em;max-width:none;
}
.figrow__item{padding:22px 24px 24px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule)}
.figrow__item:last-child{border-right:none}
.figrow__n{
  font-family:var(--mono);font-size:clamp(28px,3.4vw,38px);line-height:1;color:var(--gold);
  letter-spacing:-.02em;
}
.figrow__k{
  font-family:var(--sans);font-size:14.5px;line-height:1.5;color:var(--dim);margin-top:11px;
}
.figrow__src{font-family:var(--mono);font-size:10.5px;color:var(--dimmer);margin-top:9px;line-height:1.5}

/* ============================================================================
   8. Tables — regulatory schedules
   ========================================================================= */

.tbl{width:100%;border-collapse:collapse;margin-top:1.9em;font-size:15px;max-width:none}
.tbl caption{
  text-align:left;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  color:var(--dimmer);text-transform:uppercase;padding-bottom:12px;
}
.tbl th,.tbl td{
  text-align:left;padding:13px 16px 13px 0;border-bottom:1px solid var(--rule);
  vertical-align:top;
}
.tbl th{
  font-family:var(--mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--dimmer);font-weight:400;border-bottom-color:var(--rule-strong);
}
.tbl td{color:var(--dim)}
.tbl td:first-child{color:var(--starlight)}
.tbl td.num{font-family:var(--mono);color:var(--star);white-space:nowrap}
.tblwrap{overflow-x:auto;margin-top:1.9em}
.tblwrap .tbl{margin-top:0}

/* ============================================================================
   9. Notes, citations, callouts
   ========================================================================= */

.note{
  border-left:2px solid var(--rule-gold);padding:4px 0 4px 20px;margin-top:1.7em;
  color:var(--dim);font-size:15.5px;
}
.note b{color:var(--star)}

.cite{
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--dimmer);
  margin-top:1.5em;max-width:var(--measure);
}
.cite a{color:var(--dim);border-bottom-color:var(--rule)}

.callout{
  border:1px solid var(--rule-gold);background:var(--night-hi);
  padding:clamp(26px,3.6vw,40px);margin-top:2.6em;border-radius:2px;max-width:none;
}
.callout h2,.callout h3{margin-top:0}
.callout p{color:var(--dim)}

/* ============================================================================
   10. Paper plate — a signed record rendered on the page
   ========================================================================= */

.plate{
  background:var(--paper);color:var(--ink);border-radius:2px;
  padding:clamp(24px,3vw,32px) clamp(24px,3.2vw,36px);
  box-shadow:0 22px 60px rgba(0,0,0,.55),0 0 0 1px rgba(217,198,138,.22);
  margin-top:2.2em;max-width:470px;
}
.plate__ph{font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--ink-soft)}
.plate h3{font-family:var(--serif);font-weight:600;font-size:21px;margin-top:8px;color:var(--ink)}
.plate__row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:20px;gap:16px}
.plate__line{
  font-family:var(--serif);font-style:italic;font-size:21px;color:var(--ink);
  border-bottom:1px solid rgba(14,27,51,.5);padding:0 22px 6px 2px;
}
.plate__who{font-family:var(--mono);font-size:10px;color:var(--ink-soft);margin-top:7px;line-height:1.7}

/* ============================================================================
   11. FAQ — real <details>, indexable, no JS
   ========================================================================= */

.faq{margin-top:2em;max-width:var(--measure);border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  cursor:pointer;list-style:none;padding:19px 34px 19px 0;position:relative;
  font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.35;color:var(--starlight);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:4px;top:18px;
  font-family:var(--mono);font-size:19px;color:var(--gold);line-height:1.2;
}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--gold)}
.faq__a{padding:0 0 22px;color:var(--dim)}
.faq__a>*:first-child{margin-top:0}

/* ============================================================================
   12. Breadcrumbs
   ========================================================================= */

.crumbs{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--dimmer);
  padding:26px 0 0;max-width:none;
}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.crumbs li{margin:0;padding:0;display:flex;align-items:center;gap:8px}
.crumbs li+li::before{content:"/";color:var(--rule-strong)}
.crumbs a{color:var(--dim);border-bottom:none}
.crumbs a:hover{color:var(--gold)}
.crumbs [aria-current]{color:var(--dimmer)}

/* ============================================================================
   5b. Rhythm
   ----------------------------------------------------------------------------
   Measured on the built site: pages were running 20 to 25 consecutive text-only
   blocks and one visual per 600 to 1300 words. That is what "I lose focus"
   feels like from the inside, and no amount of good prose fixes it, because the
   eye has nowhere to land.

   These two exist to break the column. A keyline gives a skimmer the argument
   of a section in one line; a strip converts a paragraph of numbers into
   something readable at a glance. Neither is decoration: if a keyline is not
   the sentence you would say out loud, cut it rather than filling the slot.
   ========================================================================= */

.keyline{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(23px,3.1vw,34px);line-height:1.24;letter-spacing:-.01em;
  color:var(--starlight);max-width:22ch;margin:0;
  padding-left:clamp(18px,2.4vw,30px);border-left:2px solid var(--gold);
}
.keyline--wide{max-width:30ch}
.keyline em{font-style:normal;color:var(--gold)}
.keyline__sub{
  font-family:var(--sans);font-size:15.5px;font-weight:400;line-height:1.6;
  color:var(--dim);margin-top:14px;max-width:52ch;letter-spacing:0;
}
/* A keyline standing alone between two sections, as a beat rather than a header. */
.section--beat{padding:clamp(40px,5.5vw,74px) 0}

.strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  border-top:1px solid var(--rule-gold);margin-top:2.2em;max-width:none;
}
.strip__i{padding:20px 22px 22px 0}
.strip__n{
  font-family:var(--mono);font-size:clamp(21px,2.4vw,27px);line-height:1.05;
  color:var(--gold);letter-spacing:-.01em;
}
.strip__t{font-size:14.5px;line-height:1.5;color:var(--dim);margin-top:9px;max-width:26ch}

/* ============================================================================
   12b. Figures
   ----------------------------------------------------------------------------
   The missing half of the design system. Everything else here is a container
   for prose, which is how a site ends up as a very well-set wall of text.

   Engraved line drawings in the observatory register: hairline strokes, gold
   spent only on the element that carries the meaning, mono labels, and a plate
   caption under every figure. A figure without a caption is decoration.
   ========================================================================= */

.fig{margin:2.4em 0 0;max-width:none}
.fig__frame{
  border:1px solid var(--rule);border-radius:2px;background:var(--night-quote);
  padding:clamp(20px,3vw,34px);
}
.fig__frame svg{display:block;width:100%;height:auto}
.fig figcaption{
  font-family:var(--mono);font-size:11.5px;line-height:1.6;color:var(--dimmer);
  margin-top:12px;max-width:74ch;
}
.fig figcaption b{
  color:var(--gold-deep);font-weight:400;letter-spacing:.16em;text-transform:uppercase;
  margin-right:10px;
}
/* Inside a narrow column the frame can lose its padding without losing the rule. */
.fig--bare .fig__frame{border:0;background:none;padding:0}

/* Product screenshots. The app carries its own chrome and its own lighter
   night, deliberately different from this site, so the frame stays out of the
   way: a hairline and nothing else. A screenshot dressed in a fake browser
   window reads as a mockup, which is the opposite of the point. */
.fig--shot .fig__frame{padding:0;background:none;overflow:hidden;line-height:0}
.fig--shot img{display:block;width:100%;height:auto;border-radius:2px}
.fig--shot .fig__frame{border-color:var(--rule-strong)}

/* Engraved SVG primitives, so every figure inherits the same register rather
   than each one inventing its own weights. */
.eng{--ink-line:rgba(237,241,250,.55);--ink-faint:rgba(237,241,250,.22)}
.eng .ln{stroke:var(--ink-line);stroke-width:1;fill:none}
.eng .ln-faint{stroke:var(--ink-faint);stroke-width:1;fill:none}
.eng .ln-gold{stroke:var(--gold);stroke-width:1.4;fill:none}
.eng .fill-gold{fill:var(--gold)}
.eng .fill-night{fill:var(--night)}
.eng text{font-family:var(--mono);fill:var(--dim)}
.eng .lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.eng .lbl-gold{font-size:11px;letter-spacing:.14em;text-transform:uppercase;fill:var(--gold)}
.eng .val{font-size:15px;fill:var(--starlight);letter-spacing:.02em}
.eng .val-gold{font-size:15px;fill:var(--gold);letter-spacing:.02em}
.eng .note-t{font-size:11.5px;fill:var(--dimmer);letter-spacing:.01em;text-transform:none}

/* ============================================================================
   13. Page head block
   ========================================================================= */

.pagehead{padding:clamp(38px,5vw,62px) 0 clamp(30px,4vw,48px);border-bottom:1px solid var(--rule)}
.pagehead h1{max-width:19ch}
.pagehead .lede{max-width:60ch}
.pagehead--wide h1{max-width:24ch}

/* Split page head: copy left, a figure or fact panel right.
   Every page previously opened with an entire screen of heading and an empty
   right half. This puts something worth looking at above the fold and stops
   the site reading as one endless narrow column. */
.pagehead--split .pagehead__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:center;
}
.pagehead--split h1{max-width:19ch}
.pagehead--split .lede{max-width:46ch}
.pagehead--split .fig{margin-top:0}
@media (max-width:979px){
  .pagehead--split .pagehead__in{grid-template-columns:1fr;gap:30px}
  .pagehead--split h1,.pagehead--split .lede{max-width:none}
}

/* Key-facts panel, the non-figure option for the head slot. */
.keyfacts{border-top:1px solid var(--rule-gold);max-width:none}
.keyfacts div{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:18px;
  padding:14px 0;border-bottom:1px solid var(--rule);
}
.keyfacts dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dimmer);
}
.keyfacts dd{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55}
.keyfacts dd b{color:var(--starlight)}

/* ============================================================================
   15. Print — buyers print these and hand them to a DPO
   ========================================================================= */

@media print{
  :root{--starlight:#111;--dim:#333;--dimmer:#555;--gold:#8a6d1f;--gold-deep:#8a6d1f;
        --rule:#ccc;--rule-strong:#aaa;--rule-gold:#b9a166}
  body{background:#fff;color:#111;font-size:11pt}
  .btnrow,#journey,.crumbs{display:none!important}
  section{padding:14pt 0;border:none}
  section+section{border-top:1px solid #ddd}
  a{color:#111;border:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-family:monospace;font-size:8pt;color:#555}
  .faq details{border-color:#ddd}
  .faq details summary::after{display:none}
  .register{border-color:#ddd}
  .register__cell{border-color:#ddd;break-inside:avoid}
  .plate{box-shadow:none;border:1px solid #bbb}
  h1,h2,h3{break-after:avoid}
}