/*
 * L2V — Vortrium Server Project
 *
 * The design is a late-nineties server page: ridge and outset borders, system
 * greys, Verdana and Courier. Every declaration below is a one-to-one port of
 * the design source; nothing was "modernised" on the way in.
 *
 * The design authored its styles inline. They are classes here so that the
 * Content-Security-Policy can be style-src 'self' with no 'unsafe-inline' and
 * no per-element exception. Values that vary per row (state colours, zebra
 * striping, progress blocks) come from a closed set, so they are modifiers
 * rather than computed style attributes.
 */

/* ---------------------------------------------------------------- tokens -- */

:root {
    --ink: #2b2b2b;
    --ink-strong: #111111;
    --ink-heading: #1b2a4a;
    --ink-body: #333333;
    --ink-muted: #444444;
    --ink-soft: #555555;
    --ink-faint: #666666;
    --ink-ghost: #888888;

    --chrome: #d4d0c8;
    --chrome-face: #ece9d8;
    --chrome-light: #dfdfdf;
    --chrome-dark: #b8b4a8;
    --paper: #ffffff;
    --paper-warm: #fdfcf5;
    --rule: #eeece2;
    --rule-soft: #e2dfd2;

    --zebra-a: #ffffff;
    --zebra-b: #f7f6ee;

    --state-done: #146c2e;
    --state-wip: #b06b00;
    --state-off: #9a968c;

    --gold: #e8c66a;
    --gold-soft: #ffe9b0;
    --rust: #8a2b00;
    --phosphor: #33ff66;

    /* Brand. Everything below is the design's own palette, lifted out of the
       rules so that a second site can be the same design in another colour
       rather than a second stylesheet. The server site overrides this block and
       nothing else. */
    --page-bg: #14100c;
    --frame: #6b5b3e;

    --brand-title-a: #2c3f6b;
    --brand-title-b: #17233d;
    --brand-title-c: #0e1729;
    --brand-edge: #4a5f8f;
    --brand-bar-a: #4a5f8f;
    --brand-bar-b: #263a63;
    --brand-bar-edge: #101c33;
    --brand-bar-edge-raised: #6b80b0;
    --brand-soft: #b9c6e2;
    --brand-mute: #9fb0d0;
    --brand-note: #c3cfe6;

    --accent-bar-a: #7a5f2a;
    --accent-bar-b: #4a3714;
    --accent-bar-edge: #2b1f08;
    --accent-bar-edge-raised: #a2853f;
    --accent-note: #dcc48a;

    --link: #00339c;
    --link-hover: #cc3300;
    --selection: #000080;

    --footer-bg: #221d16;
    --footer-edge: #4a4238;
    --footer-ink: #8e8578;
    --footer-mute: #6d6559;

    --sans: Verdana, Tahoma, Geneva, sans-serif;
    --serif: Georgia, "Times New Roman", Times, serif;
    --mono: "Courier New", Courier, monospace;
}

/*
 * The server site. The same design, the same borders, the same type, with the
 * brand block swapped for purple. Nothing below the token list is duplicated,
 * so a change to a rule reaches both sites and neither can drift.
 */

:root[data-site="reverie"] {
    --page-bg: #120c18;
    --frame: #5e4a7a;

    --brand-title-a: #4a2c6b;
    --brand-title-b: #2d1a42;
    --brand-title-c: #180d24;
    --brand-edge: #7050a0;
    --brand-bar-a: #6a4a9a;
    --brand-bar-b: #3d2760;
    --brand-bar-edge: #1e1030;
    --brand-bar-edge-raised: #9070c0;
    --brand-soft: #cbb9e2;
    --brand-mute: #b09fd0;
    --brand-note: #d8cbe8;

    --accent-bar-a: #6a3a7a;
    --accent-bar-b: #3d1f4a;
    --accent-bar-edge: #200a28;
    --accent-bar-edge-raised: #a068b8;
    --accent-note: #e0bce8;

    --ink-heading: #3a2352;
    --rust: #7a2b5e;
    --link: #4a2382;
    --link-hover: #a8236e;
    --selection: #3a1d6e;

    --paper-warm: #fbf8fd;
    --zebra-b: #f7f3fa;

    --footer-bg: #1d1626;
    --footer-edge: #453a52;
    --footer-ink: #948a9e;
    --footer-mute: #6f6578;
}

/* ------------------------------------------------------------------ base -- */

body {
    margin: 0;
    padding: 0;
    background-color: var(--page-bg);
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.022) 0 1px,
        transparent 1px 3px
    );
    color: var(--ink);
    font-family: var(--sans);
    font-size: 11px;
}

a {
    color: var(--link);
    text-decoration: underline;
}

a:hover {
    color: var(--link-hover);
}

::selection {
    background: var(--selection);
    color: #ffffff;
}

/* Keyboard users get a visible target; the design never showed one because it
   never considered one. This adds nothing to the rendered page at rest. */
a:focus-visible {
    outline: 2px solid var(--selection);
    outline-offset: 1px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--chrome);
    border: 2px outset var(--chrome-light);
    padding: 6px 12px;
    font-weight: bold;
    z-index: 10;
}

.skip-link:focus {
    left: 8px;
    top: 8px;
}

.page {
    max-width: 1550px;
    margin: 0 auto;
    padding: 12px 0 40px;
}

/* ----------------------------------------------------------------- panel -- */

.panel {
    border: 3px ridge var(--frame);
    background: var(--chrome);
    padding: 3px;
}

.panel + .panel,
.panel--spaced {
    margin-top: 14px;
}

/* ------------------------------------------------------------------ hero -- */

.titlebar {
    background: linear-gradient(180deg, var(--brand-title-a) 0%, var(--brand-title-b) 55%, var(--brand-title-c) 100%);
    border: 2px outset var(--brand-edge);
    padding: 14px 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.titlebar__logo {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: bold;
    color: var(--gold);
    text-shadow: 2px 2px 0 #000000;
    letter-spacing: 2px;
    line-height: 1;
    margin: 0;
}

.titlebar__tagline {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--brand-soft);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-top: 5px;
}

.titlebar__meta {
    text-align: right;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--brand-mute);
    line-height: 1.7;
}

.titlebar__status {
    color: var(--gold);
}

/* -------------------------------------------------------------------- nav -- */

.navbar {
    background: #c0c0c0;
    border: 2px outset #e8e8e8;
    border-top: none;
    padding: 5px 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.navbar__link {
    display: block;
    border: 2px outset var(--chrome-light);
    background: var(--chrome);
    padding: 4px 12px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: bold;
    color: #202020;
    text-decoration: none;
}

.navbar__link:hover,
.navbar__link:focus-visible {
    border-style: inset;
    background: #c8c4bc;
    color: #202020;
}

/* ------------------------------------------------------------- hero body -- */

.hero {
    background: var(--chrome-face);
    border: 2px inset var(--chrome-dark);
    border-top: none;
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr 258px;
    gap: 20px;
    align-items: start;
}

.caption {
    margin: 0;
    background: linear-gradient(180deg, var(--brand-bar-a), var(--brand-bar-b));
    border: 1px solid var(--brand-bar-edge);
    padding: 5px 10px;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
}

.caption--gold {
    background: linear-gradient(180deg, var(--accent-bar-a), var(--accent-bar-b));
    border: 1px solid var(--accent-bar-edge);
    color: var(--gold-soft);
}

.welcome {
    border: 1px solid var(--chrome-dark);
    border-top: none;
    background: var(--paper);
    padding: 18px;
}

.welcome__title {
    font-family: var(--serif);
    font-size: 27px;
    line-height: 1.2;
    color: var(--ink-heading);
    margin: 0 0 14px;
    text-wrap: balance;
}

.welcome__body {
    font-size: 12px;
    line-height: 1.75;
    color: var(--ink-body);
    margin: 0 0 12px;
    text-wrap: pretty;
}

.welcome__body:last-child {
    margin-bottom: 0;
}

.chip {
    font-family: var(--mono);
    background: #f0eee4;
    border: 1px solid #ddd9cc;
    padding: 0 3px;
}

.sidebar {
    display: grid;
    gap: 14px;
}

/* ------------------------------------------------------------ facts table -- */

.facts {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--chrome-dark);
    border-top: none;
    background: var(--paper);
    font-family: var(--mono);
    font-size: 11px;
}

.facts__key {
    padding: 5px 8px;
    color: var(--ink-faint);
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

.facts__value {
    padding: 5px 8px;
    color: var(--ink-strong);
    border-bottom: 1px solid var(--rule);
    text-align: right;
    font-weight: bold;
}

.zebra-a {
    background: var(--zebra-a);
}

.zebra-b {
    background: var(--zebra-b);
}

/* --------------------------------------------------------------- progress -- */

.widget {
    border: 2px outset var(--chrome-light);
    background: var(--chrome);
    padding: 12px;
    text-align: center;
}

.widget--tight {
    padding: 10px;
}

.widget__title {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: bold;
    color: var(--ink-muted);
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.progress {
    border: 2px inset #b0aca4;
    background: var(--paper);
    padding: 2px;
    margin-bottom: 8px;
}

.progress__track {
    display: flex;
    gap: 2px;
    height: 16px;
}

.progress__block {
    flex: 1;
}

.progress__block--on {
    background: var(--state-done);
}

.progress__block--off {
    background: #dcd8cc;
}

.progress__value {
    font-family: var(--mono);
    font-size: 17px;
    font-weight: bold;
    color: var(--state-done);
}

.progress__note {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-faint);
    margin-top: 3px;
}

/* ---------------------------------------------------------- visit counter -- */

.counter__label {
    font-family: var(--sans);
    font-size: 10px;
    color: var(--ink-muted);
    margin-bottom: 6px;
}

.counter__display {
    display: inline-flex;
    gap: 2px;
    background: #000000;
    border: 2px inset #808080;
    padding: 4px;
}

.counter__digit {
    font-family: var(--mono);
    font-size: 17px;
    font-weight: bold;
    color: var(--phosphor);
    background: #0a1a0e;
    padding: 1px 4px;
}

/* -------------------------------------------------------------- sections -- */

.section__bar {
    background: linear-gradient(180deg, var(--brand-bar-a), var(--brand-bar-b));
    border: 2px outset var(--brand-bar-edge-raised);
    padding: 7px 12px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.section__bar--gold {
    background: linear-gradient(180deg, var(--accent-bar-a), var(--accent-bar-b));
    border: 2px outset var(--accent-bar-edge-raised);
}

.section__title {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 1px;
    margin: 0;
}

.section__bar--gold .section__title {
    color: var(--gold-soft);
}

.section__note {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--brand-note);
}

.section__bar--gold .section__note {
    color: var(--accent-note);
}

.section__body {
    background: var(--chrome-face);
    border: 2px inset var(--chrome-dark);
    border-top: none;
    padding: 16px;
}

.section__intro {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-muted);
    margin: 0 0 14px;
    text-wrap: pretty;
}

.section__intro--wide {
    max-width: 68em;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.split-240 {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 18px;
    align-items: start;
}

.split-258 {
    display: grid;
    grid-template-columns: 258px 1fr;
    gap: 18px;
    align-items: start;
}

.stack {
    display: grid;
    gap: 10px;
}

/* ------------------------------------------------------------------ card -- */

.card {
    border: 2px outset var(--chrome-light);
    background: var(--paper);
    padding: 12px;
}

.card--roomy {
    padding: 13px;
}

.card--wide {
    padding: 14px;
}

.card__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 7px;
}

.card__head--gap7 {
    gap: 7px;
    margin-bottom: 7px;
}

.card__check {
    color: var(--state-done);
    font-size: 12px;
}

.card__title {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: bold;
    color: var(--ink-heading);
    margin: 0;
}

.card__title--12 {
    font-size: 12px;
}

.card__body {
    font-size: 11px;
    line-height: 1.65;
    color: var(--ink-muted);
    margin: 0;
    text-wrap: pretty;
}

.aside-note {
    border: 2px inset #c8c4b8;
    background: var(--paper-warm);
    padding: 13px;
}

.aside-note__body {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--ink-muted);
    margin: 0;
    text-wrap: pretty;
}

/* --------------------------------------------------------------- metrics -- */

.metric {
    border: 2px outset var(--chrome-light);
    background: var(--paper);
    padding: 14px;
    text-align: center;
}

.metric__value {
    font-family: var(--mono);
    font-size: 25px;
    font-weight: bold;
    color: var(--rust);
    margin-bottom: 8px;
}

.metric__label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: bold;
    color: var(--ink-heading);
    margin-bottom: 7px;
    border-top: 1px solid var(--rule-soft);
    padding-top: 7px;
}

.metric__note {
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0;
    text-wrap: pretty;
}

/* --------------------------------------------------------------- reasons -- */

.reason__number {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: bold;
    color: #ffffff;
    background: var(--rust);
    padding: 1px 5px;
}

/* ---------------------------------------------------------- architecture -- */

.arch-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.terminal {
    border: 2px inset #c8c4b8;
    background: #000000;
    padding: 14px;
    overflow-x: auto;
}

.terminal__text {
    font-family: var(--mono);
    font-size: 11.5px;
    line-height: 1.85;
    color: var(--phosphor);
    margin: 0;
}

.modules__title {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: bold;
    color: var(--ink-muted);
    letter-spacing: 1px;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 7px;
    margin-bottom: 10px;
}

.modules__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px;
    font-family: var(--mono);
    font-size: 11px;
}

.modules__item {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.modules__name {
    color: #222222;
}

.dot {
    width: 7px;
    height: 7px;
    flex: none;
    border: 1px solid #00000055;
    transform: translateY(-1px);
}

.dot--done {
    background: var(--state-done);
}

.dot--wip {
    background: var(--state-wip);
}

.dot--off {
    background: var(--state-off);
}

/* ---------------------------------------------------------------- layers -- */

.layer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.layer__tag {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #777777;
}

.layer__title {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink-heading);
    margin: 0 0 8px;
}

.pill {
    font-family: var(--sans);
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #ffffff;
    padding: 2px 6px;
}

.pill--done {
    background: var(--state-done);
}

.pill--wip {
    background: var(--state-wip);
}

.pill--off {
    background: var(--state-off);
}

/* ----------------------------------------------------------------- rules -- */

.stat {
    border: 2px outset var(--chrome-light);
    background: var(--paper);
    padding: 10px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.stat__count {
    font-family: var(--mono);
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    padding: 2px 8px;
}

.stat__count--done {
    background: var(--state-done);
}

.stat__count--wip {
    background: var(--state-wip);
}

.stat__count--off {
    background: var(--state-off);
}

.stat__label {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: bold;
    color: var(--ink-heading);
}

.stat__note {
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.rules {
    width: 100%;
    border-collapse: collapse;
    border: 2px inset #c8c4b8;
    background: var(--paper);
    font-family: var(--sans);
    font-size: 11px;
}

.rules__number {
    padding: 6px 9px;
    font-family: var(--mono);
    color: var(--ink-ghost);
    border-bottom: 1px solid var(--rule);
    width: 30px;
}

.rules__text {
    padding: 6px 9px;
    color: #222222;
    line-height: 1.5;
    border-bottom: 1px solid var(--rule);
}

.rules__state {
    padding: 6px 9px;
    border-bottom: 1px solid var(--rule);
    text-align: right;
    white-space: nowrap;
}

/* --------------------------------------------------------------- roadmap -- */

.legend {
    border: 2px outset var(--chrome-light);
    background: var(--paper);
    padding: 12px;
    font-family: var(--sans);
    font-size: 10.5px;
    display: grid;
    gap: 7px;
}

.legend__title {
    font-weight: bold;
    color: var(--ink-muted);
    letter-spacing: 1px;
    border-bottom: 1px solid var(--rule-soft);
    padding-bottom: 6px;
}

.legend__row {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-body);
}

.swatch {
    width: 11px;
    height: 11px;
    flex: none;
}

.swatch--done {
    background: var(--state-done);
    border: 1px solid #0a4a1e;
}

.swatch--wip {
    background: var(--state-wip);
    border: 1px solid #7d4b00;
}

.swatch--off {
    background: var(--state-off);
    border: 1px solid #6f6c64;
}

.phases {
    width: 100%;
    border-collapse: collapse;
    border: 2px inset #c8c4b8;
    background: var(--paper);
}

.phases__number {
    padding: 9px 10px;
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-ghost);
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
    width: 30px;
}

.phases__main {
    padding: 9px 10px;
    border-bottom: 1px solid var(--rule);
}

.phases__title {
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: bold;
    margin: 0 0 3px;
    color: var(--ink-heading);
}

.phases__title--muted {
    color: var(--ink-faint);
}

.phases__body {
    font-size: 11px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
    text-wrap: pretty;
}

.phases__state {
    padding: 9px 10px;
    border-bottom: 1px solid var(--rule);
    text-align: right;
    white-space: nowrap;
    vertical-align: top;
}

/* -------------------------------------------------------------- licences -- */
/*
 * Not in the original design, which had nothing to sell. Built from the same
 * parts as the rest of the page: the raised card, the rust monospace figure the
 * benchmarks use, and the inset well the aside notes use.
 */

.licence-intro {
    display: grid;
    grid-template-columns: 258px 1fr;
    gap: 18px;
    align-items: start;
    margin-bottom: 12px;
}

.terms {
    margin: 0;
    padding: 0 0 0 22px;
    font-size: 11px;
    line-height: 1.7;
    color: var(--ink-muted);
    /* Two columns so the card is filled rather than half empty; the list is
       short enough that reading order across a break is never in doubt. */
    columns: 2;
    column-gap: 28px;
}

.terms__item {
    padding-left: 4px;
    margin-bottom: 5px;
    break-inside: avoid;
}

.terms__item::marker {
    font-family: var(--mono);
    font-weight: bold;
    color: var(--rust);
}

.licences {
    align-items: stretch;
}

.licence {
    border: 2px outset var(--chrome-light);
    background: var(--paper);
    padding: 14px;
    display: flex;
    flex-direction: column;
}

/* The tier that cannot be bought is marked by the material it is made of, the
   way the aside notes are, rather than by a louder colour. */
.licence--earned {
    border: 2px inset #c8c4b8;
    background: var(--paper-warm);
}

.licence__name {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: bold;
    color: var(--ink-heading);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.licence__tagline {
    font-family: var(--mono);
    font-size: 10px;
    color: #777777;
    margin-top: 3px;
}

.licence__price {
    margin: 11px 0 0;
    border-top: 1px solid var(--rule-soft);
    padding-top: 11px;
    display: flex;
    align-items: baseline;
    gap: 5px;
    flex-wrap: wrap;
}

.licence__amount {
    font-family: var(--mono);
    font-size: 23px;
    font-weight: bold;
    color: var(--rust);
}

.licence--earned .licence__amount {
    font-size: 19px;
    color: var(--state-done);
}

.licence__period {
    font-family: var(--sans);
    font-size: 10.5px;
    color: var(--ink-faint);
}

.licence__note {
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-top: 4px;
    min-height: 2.2em;
}

.licence__list {
    margin: 11px 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule-soft);
    padding-top: 10px;
}

.licence__benefit {
    position: relative;
    padding-left: 14px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--ink-muted);
    margin-bottom: 7px;
    text-wrap: pretty;
}

.licence__benefit:last-child {
    margin-bottom: 0;
}

/* A square rather than a disc, to match the module dots. */
.licence__benefit::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 5px;
    height: 5px;
    background: var(--state-done);
    border: 1px solid #00000055;
}

.licence--earned .licence__benefit::before {
    background: var(--gold);
}

.licence-footnote {
    margin: 12px 0 0;
    font-size: 10.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    text-wrap: pretty;
}

/* ------------------------------------------------------------------ banner -- */
/*
 * The splash the server site opens with.
 *
 * Built out of gradients and borders alone. No image, which is not a
 * limitation dressed as a virtue: the policy is img-src 'self' with nothing to
 * serve, and a banner made of CSS survives a translation getting longer and a
 * phone turning sideways, which a 1000px JPEG of text does not.
 *
 * The look is the one a fan site had in 2004: a bevelled plate, a heavy serif
 * name with a glow under it, and a rule with a gem in the middle.
 */

.banner {
    position: relative;
    overflow: hidden;
    border: 2px inset var(--brand-bar-edge-raised);
    border-top: none;
    padding: 34px 20px 26px;
    text-align: center;
    background:
        radial-gradient(120% 150% at 50% -20%, rgba(255, 255, 255, 0.16), transparent 60%),
        radial-gradient(80% 120% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 70%),
        linear-gradient(180deg, var(--brand-title-a) 0%, var(--brand-title-b) 55%, var(--brand-title-c) 100%);
}

/* The scanline the body already wears, laid over the banner so the two read as
   the same surface. */
.banner::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: repeating-linear-gradient(
        0deg,
        rgba(255, 255, 255, 0.03) 0 1px,
        transparent 1px 3px
    );
}

.banner__inner {
    position: relative;
    z-index: 1;
    max-width: 60em;
    margin: 0 auto;
}

.banner__crest {
    font-size: 15px;
    line-height: 1;
    color: var(--gold);
    text-shadow: 0 0 8px rgba(232, 198, 106, 0.55);
    margin-bottom: 10px;
}

.banner__name {
    font-family: var(--serif);
    font-size: 52px;
    font-weight: bold;
    line-height: 1;
    letter-spacing: 6px;
    margin: 0;
    color: var(--gold);
    text-shadow:
        2px 2px 0 rgba(0, 0, 0, 0.85),
        0 0 18px rgba(232, 198, 106, 0.35);
}

.banner__rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 14px auto 12px;
    max-width: 26em;
}

.banner__rule-line {
    height: 1px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, transparent, var(--brand-bar-edge-raised), transparent);
}

.banner__rule-gem {
    font-size: 8px;
    color: var(--gold);
    line-height: 1;
}

.banner__line {
    font-family: var(--sans);
    font-size: 11.5px;
    letter-spacing: 1px;
    color: var(--brand-soft);
    margin: 0;
    text-wrap: balance;
}

/* --------------------------------------------------------------- plates -- */

.plates {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}

.plate {
    min-width: 116px;
    border: 2px outset var(--brand-bar-edge-raised);
    background: rgba(0, 0, 0, 0.28);
    padding: 9px 14px;
}

.plate__value {
    font-family: var(--mono);
    font-size: 19px;
    font-weight: bold;
    color: var(--gold);
    line-height: 1.2;
}

.plate__value--shut {
    font-family: var(--sans);
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #ff9d9d;
}

.plate__label {
    font-family: var(--sans);
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--brand-mute);
    margin-top: 4px;
}

@media (max-width: 620px) {
    .banner {
        padding: 24px 12px 20px;
    }

    .banner__name {
        font-size: 34px;
        letter-spacing: 3px;
    }

    .plate {
        min-width: 92px;
        padding: 7px 10px;
    }
}

/* ------------------------------------------------------------------ forms -- */
/*
 * The three forms, in the same chrome as everything else: inset wells for
 * inputs, a raised button, and the zebra table the rules already use for the
 * ballot.
 *
 * There is no JavaScript behind any of it. A submit is a real form post and the
 * answer is a redirect, which is why a refresh after voting does not vote
 * again. The result bars are widths from a fixed set of classes rather than a
 * style attribute, because the policy has no room for one.
 */

.form {
    display: block;
}

.form__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.form__note {
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    text-wrap: pretty;
}

.button {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: bold;
    color: #202020;
    background: var(--chrome);
    border: 2px outset var(--chrome-light);
    padding: 6px 18px;
    cursor: pointer;
}

.button:hover,
.button:focus-visible {
    background: #c8c4bc;
}

.button:active {
    border-style: inset;
}

.button:disabled {
    color: #8a8a8a;
    border-style: inset;
    cursor: not-allowed;
}

/* ------------------------------------------------------------------ field -- */

.field {
    display: block;
    margin-bottom: 10px;
}

.field__label {
    display: block;
    font-family: var(--sans);
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 5px;
}

.field__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--sans);
    font-size: 12px;
    color: var(--ink-strong);
    background: var(--paper);
    border: 2px inset #b0aca4;
    padding: 6px 8px;
}

.field__input--area {
    font-size: 11.5px;
    line-height: 1.6;
    resize: vertical;
    min-height: 7em;
}

.field__input:focus-visible {
    outline: 2px solid var(--selection);
    outline-offset: -2px;
}

.field--check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.field__consent {
    font-size: 11px;
    line-height: 1.55;
    color: var(--ink-muted);
    text-wrap: pretty;
}

/* ----------------------------------------------------------------- notice -- */

.notice {
    margin: 0 0 12px;
    padding: 8px 11px;
    font-size: 11px;
    line-height: 1.55;
    border: 2px inset #c8c4b8;
}

.notice--good {
    background: #f0f7f1;
    color: #10521f;
    border-color: #b9d6c0;
}

.notice--bad {
    background: #fbf1ee;
    color: #7a2410;
    border-color: #ddc0b6;
}

/* ----------------------------------------------------------------- ballot -- */

.ballot {
    width: 100%;
    border-collapse: collapse;
    border: 2px inset #c8c4b8;
    background: var(--paper);
}

.ballot__pick {
    padding: 9px 6px 9px 10px;
    width: 22px;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
}

.ballot__label {
    padding: 9px 6px;
    border-bottom: 1px solid var(--rule);
}

.ballot__label label {
    display: block;
    cursor: pointer;
}

.ballot__rate {
    font-family: var(--mono);
    font-size: 15px;
    font-weight: bold;
    color: var(--rust);
    margin-right: 8px;
}

.ballot__estimate {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: bold;
    color: var(--ink-heading);
}

.ballot__body {
    display: block;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-top: 3px;
    text-wrap: pretty;
}

.ballot__result {
    padding: 9px 10px 9px 6px;
    width: 130px;
    text-align: right;
    vertical-align: top;
    border-bottom: 1px solid var(--rule);
    white-space: nowrap;
}

.ballot__share {
    display: inline-block;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: bold;
    color: var(--ink-heading);
    min-width: 34px;
}

.ballot__share--hidden {
    color: #b6b2aa;
}

.bar {
    display: inline-block;
    vertical-align: middle;
    width: 78px;
    height: 11px;
    margin-left: 6px;
    background: #ffffff;
    border: 2px inset #b0aca4;
}

.bar__fill {
    display: block;
    height: 100%;
    background: var(--state-done);
}

/* Fixed widths in steps of five. A style attribute would be the obvious way to
   do this and is exactly what style-src 'self' exists to refuse. */
.bar__fill--w0 { width: 0; }
.bar__fill--w5 { width: 5%; }
.bar__fill--w10 { width: 10%; }
.bar__fill--w15 { width: 15%; }
.bar__fill--w20 { width: 20%; }
.bar__fill--w25 { width: 25%; }
.bar__fill--w30 { width: 30%; }
.bar__fill--w35 { width: 35%; }
.bar__fill--w40 { width: 40%; }
.bar__fill--w45 { width: 45%; }
.bar__fill--w50 { width: 50%; }
.bar__fill--w55 { width: 55%; }
.bar__fill--w60 { width: 60%; }
.bar__fill--w65 { width: 65%; }
.bar__fill--w70 { width: 70%; }
.bar__fill--w75 { width: 75%; }
.bar__fill--w80 { width: 80%; }
.bar__fill--w85 { width: 85%; }
.bar__fill--w90 { width: 90%; }
.bar__fill--w95 { width: 95%; }
.bar__fill--w100 { width: 100%; }

@media (max-width: 620px) {
    .ballot__result {
        width: 58px;
    }

    .bar {
        display: none;
    }
}

/* ------------------------------------------------------------------ docs -- */

.docs {
    background: var(--chrome-face);
    border: 2px inset var(--chrome-dark);
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 20px;
    align-items: center;
}

.docs__title {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink-heading);
    margin: 0 0 9px;
}

.docs__body {
    font-size: 11.5px;
    line-height: 1.7;
    color: var(--ink-muted);
    margin: 0;
    text-wrap: pretty;
}

.docs__links {
    display: grid;
    gap: 7px;
}

.docs__link {
    border: 2px outset var(--chrome-light);
    background: var(--paper);
    padding: 9px 11px;
    font-family: var(--mono);
    font-size: 11px;
    color: #222222;
}

.docs__link--disabled {
    border: 2px inset #c8c4b8;
    background: #e4e0d4;
    color: #777777;
}

/* ---------------------------------------------------------------- footer -- */

.footer {
    border: 2px outset var(--footer-edge);
    background: var(--footer-bg);
    margin-top: 14px;
    padding: 12px 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.footer__note {
    font-family: var(--sans);
    font-size: 10px;
    line-height: 1.7;
    color: var(--footer-ink);
    margin: 0;
    max-width: 62em;
    text-wrap: pretty;
}

.footer__copy {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--footer-mute);
    margin: 0;
}

/* ----------------------------------------------------------------- error -- */

.error {
    background: var(--chrome-face);
    border: 2px inset var(--chrome-dark);
    border-top: none;
    padding: 24px;
}

.error__code {
    font-family: var(--mono);
    font-size: 44px;
    font-weight: bold;
    color: var(--rust);
    margin: 0 0 8px;
}

.error__title {
    font-family: var(--serif);
    font-size: 20px;
    color: var(--ink-heading);
    margin: 0 0 10px;
}

.error__body {
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-muted);
    margin: 0 0 14px;
    max-width: 60em;
}

/* ------------------------------------------------------------ small screens */
/*
 * The page says "best viewed at 1024x768" and means it. These queries only
 * collapse the fixed grids so the page stays readable on a phone; no colour,
 * border or type decision above is touched.
 */

@media (max-width: 1100px) {
    .grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .page {
        padding: 8px 8px 32px;
    }

    .hero,
    .split-240,
    .split-258,
    .arch-cols,
    .licence-intro,
    .docs {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .titlebar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .titlebar__meta {
        text-align: left;
    }

    .section__bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .grid-2,
    .grid-3,
    .grid-4,
    .modules__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .terms {
        columns: 1;
    }
}

@media print {
    body {
        background: #ffffff;
    }

    .navbar {
        display: none;
    }
}

/* ------------------------------------------------------- language switcher -- */
/*
 * Not in the original design, which was written in one language. It reuses the
 * same raised button the navigation already uses, so it reads as part of the
 * toolbar rather than as something bolted onto it.
 */

.navbar__spacer {
    flex: 1 1 auto;
    min-width: 12px;
}

.navbar__link--lang {
    font-family: var(--mono);
    letter-spacing: 1px;
    padding: 4px 9px;
}

.navbar__link--active {
    border-style: inset;
    background: #c8c4bc;
    color: #101010;
}

@media (max-width: 620px) {
    .navbar__spacer {
        flex-basis: 100%;
        min-width: 0;
    }
}