:root {
    --topbar-height: 56px;
    --sidebar-width: 240px;
    /* Strip left beside the open sidebar on small screens; holds the close button. */
    --close-strip: 56px;

    /* Brand */
    --primary: #19313e;
    --primary-light: #264655;
    --ocean: #1a6e8e;
    --ocean-dark: #13566f;
    --foam: #e8f1f4;

    /* Neutrals */
    --ink: #16202b;
    --muted: #44525c;
    --rule: rgba(25, 49, 62, 0.2);
    --page-top: #becbd3;
    --page-bottom: #dbdbdb;
    --surface: #fff;

    /* Status */
    --warning: #b7791f;
    --warning-bg: #fbf3e0;
    --error: #b42318;
    --error-bg: #fdecea;
    --success: #1e7b4d;
    --success-bg: #e7f4ec;

    --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
    --sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --radius: 2px;
    /* Every button's corners. */
    --button-radius: 4px;
    --slide: 0.25s ease;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Shows where the page is overscrolled past the end of the gradient. */
    background: var(--page-bottom);
    /* No scroll bar; the page still scrolls by wheel, touch, trackpad and keyboard. */
    scrollbar-width: none;
}

html::-webkit-scrollbar {
    display: none;
}

body {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.125rem;
    font-optical-sizing: auto;
    line-height: 1.55;
    color: var(--ink);
    min-height: 100vh;
    background: linear-gradient(180deg, var(--page-top) 0%, var(--page-bottom) 100%);
    overflow-x: hidden;
    transition: padding-left var(--slide);
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--serif);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--primary);
}

h1 {
    font-size: clamp(2rem, 5vw, 3rem);
}

p {
    margin: 0 0 1.1em;
}

a {
    color: var(--ocean-dark);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

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

:focus-visible {
    outline: 2px solid var(--ocean);
    outline-offset: 2px;
}

.icon {
    display: block;
    width: 24px;
    height: 24px;
    flex: none;
}

/* Tooltips: the text of data-tooltip, shown beside a control when it is pointed at or focused.
   Only where there is a pointer to hover with; on touch screens a tap would leave them stuck open. */

@media (hover: hover) {
    .logo-button,
    .icon-link,
    .button[data-tooltip],
    .icon-button[data-tooltip] {
        position: relative;
    }

    [data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        top: calc(100% + 12px);
        left: 50%;
        padding: 5px 9px;
        font-family: var(--sans);
        font-size: 0.75rem;
        font-weight: 500;
        line-height: 1.3;
        white-space: nowrap;
        color: #fff;
        background: var(--ink);
        border-radius: var(--radius);
        opacity: 0;
        visibility: hidden;
        transform: translateX(-50%);
        transition: opacity 0.15s, visibility 0.15s;
        pointer-events: none;
        z-index: 40;
    }

    [data-tooltip]:hover::after,
    [data-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transition-delay: 0.3s;
    }

    /* At the screen's edges the tooltip lines up with its control instead of centring on it. */
    .topbar-actions .icon-link:last-child::after {
        right: 0;
        left: auto;
        transform: none;
    }

    .sidebar-close::after,
    .sidebar-opener::after {
        top: 50%;
        left: calc(100% + 4px);
        transform: translateY(-50%);
    }
}

/* The drawer's close button sits against the right edge, so its tooltip opens to the left. */
@media (hover: hover) and (max-width: 899.98px) {
    .sidebar-close::after {
        right: calc(100% + 4px);
        left: auto;
    }
}

/* Top bar */

.topbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px 0 0;
    background: var(--primary);
    cursor: pointer;
    z-index: 30;
}

/* The logo file has wide transparent margins, so it is drawn oversized and cropped to the bar.
   The left padding lines the mark up with the text of the sidebar links below it. */
.logo-button {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 0 0 20px;
    border: 0;
    background: none;
    cursor: pointer;
}

.logo-button img {
    width: auto;
    height: 68px;
    /* Trims the overhang so the button is exactly as tall as the bar. */
    margin: -6px 0;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.icon-link {
    display: flex;
    padding: 8px;
    color: #fff;
    border-radius: 50%;
}

.icon-link:hover,
.icon-link[aria-current="page"] {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
}

.topbar :focus-visible {
    outline-color: #fff;
    outline-offset: -2px;
}

/* Sidebar */

.sidebar {
    position: fixed;
    top: var(--topbar-height);
    bottom: 0;
    left: 0;
    width: var(--sidebar-width);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--rule);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--slide), visibility var(--slide);
    z-index: 20;
}

.sidebar ul {
    flex: 1;
    min-height: 0;
    margin: 0;
    padding: 20px 0;
    list-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar a {
    display: block;
    padding: 12px 24px 12px 21px;
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--ink);
    text-decoration: none;
    border-left: 3px solid transparent;
}

.sidebar a:hover,
.sidebar a:focus-visible {
    color: var(--ocean-dark);
    background: var(--foam);
}

/* A sidebar link with an icon before its text, e.g. the dashboard's. */
.sidebar .sidebar-icon-link {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sidebar-icon-link .icon {
    width: 20px;
    height: 20px;
}

/* The subscriber content switch, at the bottom of the sidebar, for those without a subscription. */
.sidebar .sidebar-subscriber {
    flex: none;
    padding: 16px 24px;
    border-top: 1px solid var(--rule);
}

.sidebar-subscriber .subscriber-toggle {
    margin: 0;
}

.sidebar .sidebar-subscriber a {
    display: inline;
    padding: 0;
    font-weight: 600;
    color: var(--primary);
    border: 0;
}

.sidebar .sidebar-subscriber a:hover,
.sidebar .sidebar-subscriber a:focus-visible {
    background: none;
    text-decoration: underline;
}

/* Admins' link to the dashboard, at the bottom of the sidebar. */
.sidebar .sidebar-admin {
    flex: none;
    padding: 8px 0;
    border-top: 1px solid var(--rule);
}

.sidebar a[aria-current="page"] {
    font-weight: 600;
    color: var(--primary);
    background: var(--foam);
    border-left-color: var(--ocean);
}

/* The close and open buttons share a look and sit at the same height, so one replaces the other. */
.sidebar-close,
.sidebar-opener {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 48px;
    padding: 0;
    color: var(--primary);
    background: none;
    border: 0;
    cursor: pointer;
    /* Faded until pointed at, so they don't compete with the page. */
    opacity: 0.6;
    transition: color 0.15s, opacity 0.15s;
}

.sidebar-close:hover,
.sidebar-opener:hover,
.sidebar-close:focus-visible,
.sidebar-opener:focus-visible {
    color: var(--ocean);
    opacity: 1;
}

/* Hangs off the sidebar's right edge, vertically centred. */
.sidebar-close {
    position: absolute;
    top: 50%;
    left: 100%;
    transform: translateY(-50%);
}

.scrim,
.sidebar-opener {
    display: none;
}

/* Wide screens: the sidebar sits beside the content and stays open until collapsed. */
@media (min-width: 900px) {
    html:not(.sidebar-collapsed) body {
        padding-left: var(--sidebar-width);
    }

    html:not(.sidebar-collapsed) .sidebar {
        transform: none;
        visibility: visible;
    }

    /* No sidebar at all when every section is switched off. */
    html.no-sidebar body {
        padding-left: 0;
    }

    html.sidebar-collapsed .sidebar-opener {
        position: fixed;
        top: calc(50% + var(--topbar-height) / 2);
        left: 0;
        display: flex;
        transform: translateY(-50%);
        z-index: 20;
    }
}

/* Small screens: the sidebar is a drawer over the content, closed until opened. */
@media (max-width: 899.98px) {
    .sidebar {
        width: calc(100% - var(--close-strip));
        border-right: 0;
        /* Also carries the close button, which hangs off the right edge, out of view. */
        transform: translateX(calc(-100% - var(--close-strip)));
    }

    html.sidebar-open .sidebar {
        transform: none;
        visibility: visible;
    }

    /* Over the dark scrim here, so white, and at the bottom of the strip beside the drawer. */
    .sidebar-close {
        top: auto;
        bottom: 0;
        bottom: env(safe-area-inset-bottom, 0px);
        width: var(--close-strip);
        height: var(--close-strip);
        color: #fff;
        opacity: 1;
        transform: none;
    }

    .sidebar-close:hover {
        color: #fff;
    }

    .sidebar-close:focus-visible {
        outline-color: #fff;
        outline-offset: -6px;
    }

    .scrim {
        display: block;
        position: fixed;
        inset: var(--topbar-height) 0 0 0;
        background: rgba(25, 49, 62, 0.72);
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--slide), visibility var(--slide);
        z-index: 10;
    }

    html.sidebar-open .scrim {
        opacity: 1;
        visibility: visible;
    }

    html.sidebar-open body {
        overflow: hidden;
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .sidebar,
    .scrim {
        transition: none;
    }
}

/* Page content */

.content {
    max-width: 50rem;
    margin: 0 auto;
    padding: calc(var(--topbar-height) + clamp(2rem, 6vw, 4.5rem)) clamp(1.25rem, 5vw, 3rem) clamp(3rem, 8vw, 6rem);
}

.byline {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted);
}

.page-header {
    margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
    padding-bottom: clamp(1.25rem, 3vw, 1.75rem);
    border-bottom: 1px solid var(--rule);
}

.page-header::before {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-bottom: 1.25rem;
    background: var(--ocean);
}

.page-header .byline {
    margin-top: 0.85rem;
}

.prose {
    max-width: 40rem;
}

.prose > :last-child {
    margin-bottom: 0;
}

/* Wide screens: content is wider and centred, with room either side to clear the sidebar opener. */
@media (min-width: 900px) {
    .content {
        max-width: 72rem;
        margin: 0 auto;
        padding-inline: clamp(3.5rem, 6vw, 5rem);
    }

    .prose {
        max-width: 48rem;
    }
}

/* Forms */

.form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: 30rem;
}

.form[hidden] {
    display: none;
}

.form + .form {
    margin-top: 1.5rem;
}

label {
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink);
}

input,
textarea {
    width: 100%;
    margin-bottom: 0.75rem;
    padding: 10px 12px;
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--button-radius);
}

/* A text box with a search icon inside it, e.g. on the search page and the dashboard. */
.search-box {
    position: relative;
    flex: 1 1 18rem;
    max-width: 28rem;
}

.search-box .icon {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    color: var(--muted);
    transform: translateY(-50%);
    pointer-events: none;
}

.search-box input {
    margin: 0;
    padding-left: 38px;
}

/* In the search page's list header, beside its filters (sized by toe-horz-list.css). */
.search-page-box {
    max-width: none;
}

/* The list's tag picker, its search and the tags chosen are as tall as the search box, their text and padding in
   proportion. Tags elsewhere keep their own size. */
.search-results .thl-tag,
.search-results .ttp-add,
.search-results .ttp-input {
    height: 46px;
    font-size: 0.9375rem;
}

.search-results .thl-tag {
    gap: 6px;
    padding: 0 8px 0 12px;
}

/* The list's type buttons, as tall as the tags beside them. */
.search-results .thl-filter {
    height: 46px;
    padding: 0 16px;
    font-size: 0.9375rem;
}

/* Only a "+" here: square. */
.search-results .ttp-add {
    width: 46px;
    padding: 0;
}

.search-results .ttp-input {
    width: 13rem;
    padding: 0 12px;
}

.search-results .ttp-text {
    font-size: 0.9375rem;
}

.search-results .ttp-add svg {
    width: 22px;
    height: 22px;
}

.search-results .thl-tag-remove svg {
    width: 18px;
    height: 18px;
}

/* Nothing follows the grid, so it needs no space below it. */
toe-horz-list.search-results {
    margin-bottom: 0;
}

/* Less room above and below than other pages, leaving the window's height to the grid's rows. */
.content.content-search {
    padding-top: calc(var(--topbar-height) + 1.5rem);
    padding-bottom: 1.5rem;
}

/* Off-screen rather than display: none, which bots commonly skip. */
.decoy {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

textarea {
    min-height: 10rem;
    resize: vertical;
}

/* The message box is as wide as the page header's rule above it; the rest of the form keeps .form's width. */
.form.contact-form {
    max-width: none;
}

.contact-form > :not(textarea) {
    max-width: 30rem;
}

input:focus-visible,
textarea:focus-visible {
    outline-offset: 0;
    border-color: var(--ocean);
}

.button {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.5;
    color: #fff;
    background: var(--primary);
    border: 0;
    border-radius: var(--button-radius);
    cursor: pointer;
}

.button[hidden] {
    display: none;
}

.button:hover {
    color: #fff;
    background: var(--primary-light);
}

a.button {
    text-decoration: none;
}

.button:disabled {
    opacity: 0.6;
    cursor: default;
}

.button .icon {
    width: 20px;
    height: 20px;
}

/* An on/off switch around a checkbox, shared by the dashboard and the subscriber content switch. */
.switch {
    position: relative;
    display: inline-flex;
    align-self: flex-start;
    margin: 8px 0;
    cursor: pointer;
}

.switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.switch-track {
    width: 46px;
    height: 26px;
    background: var(--rule);
    border-radius: 13px;
    transition: background-color 0.15s;
}

.switch-track::after {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 3px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.15s;
}

.switch input:checked + .switch-track {
    background: var(--success);
}

.switch input:checked + .switch-track::after {
    transform: translateX(20px);
}

.switch input:focus-visible + .switch-track {
    outline: 2px solid var(--ocean);
    outline-offset: 2px;
}

@media (hover: hover) {
    .switch[data-tooltip]::after {
        left: 0;
        transform: none;
    }
}

.message {
    max-width: 30rem;
    margin: 1.25rem 0 0;
    font-family: var(--sans);
    font-size: 0.9375rem;
}

.message:empty {
    display: none;
}

.message.success,
.message.error {
    padding: 10px 14px;
    border-left: 3px solid;
    border-radius: var(--radius);
}

.message.success {
    color: var(--success);
    background: var(--success-bg);
}

.message.error {
    color: var(--error);
    background: var(--error-bg);
}

/* Sections and tables */

.section {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section h2 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.section > .button {
    margin-top: 1.5rem;
}

/* Wide tables scroll sideways inside this rather than widening the page. */
.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--sans);
    font-size: 0.9375rem;
    background: var(--surface);
}

.table[hidden] {
    display: none;
}

.table th,
.table td {
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--rule);
}

.table thead th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--muted);
}

.table tfoot th,
.table tfoot td {
    font-weight: 600;
    border-bottom: 0;
}

.table .number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table .actions {
    width: 1%;
    text-align: right;
}

.table.read-only .actions {
    display: none;
}

.table tr.clickable {
    cursor: pointer;
}

.table tr.clickable:hover {
    background: var(--foam);
}

.link-button {
    padding: 0;
    font: inherit;
    color: var(--ocean-dark);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    background: none;
    border: 0;
    cursor: pointer;
}

.link-button:hover {
    color: var(--error);
}

.icon-button {
    display: inline-flex;
    padding: 6px;
    color: var(--muted);
    background: none;
    border: 0;
    border-radius: var(--button-radius);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s;
}

.icon-button-danger:hover,
.icon-button-danger:focus-visible {
    color: var(--error);
    background: var(--error-bg);
}

.icon-button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* A product's name with its type's icon before it. */
.purchase-name {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.type-icon {
    display: inline-flex;
    color: var(--ocean);
}

.button-danger {
    background: var(--error);
}

.button-danger:hover {
    background: #8f1c13;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Content as wide as a whole number of list tiles, 1 to 4 of them, so a list with whole-tiles shows no part of one,
   and the page's text and dividing line are never wider than the list and end in line with its last tile. Tiles are
   320px with 16px between them (toe-horz-list's default card and gap): 320px is one, 656px two, 992px three, 1328px
   four. Narrower than one tile, the text and list take the width there is. */
.tile-columns {
    container-type: inline-size;
}

.tile-columns-inner,
.search-columns {
    margin-inline: auto;
}

.tile-columns-inner .prose {
    max-width: none;
}

@container (min-width: 320px) {
    .tile-columns-inner {
        width: 320px;
    }
}

@container (min-width: 656px) {
    .tile-columns-inner {
        width: 656px;
    }
}

@container (min-width: 992px) {
    .tile-columns-inner {
        width: 992px;
    }
}

@container (min-width: 1328px) {
    .tile-columns-inner {
        width: 1328px;
    }
}

/* Pages with no maximum width, e.g. the dashboard, or those whose content fits whole tiles to the window. Less room
   either side than other pages, so a 1440px window beside the open sidebar fits four tiles; still enough to clear
   the sidebar opener. */
@media (min-width: 900px) {
    .content.content-wide {
        max-width: none;
        padding-inline: 2.5rem;
    }
}

.prose + .section,
.prose + toe-horz-list {
    margin-top: clamp(2rem, 5vw, 3rem);
}







.button-small {
    padding: 6px 16px;
    font-size: 0.875rem;
}

.pending {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--warning);
}

.refunded {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--error);
}

.products-message {
    margin-top: 1rem;
}

/* Product page */

.back-link {
    display: inline-block;
    margin-bottom: 1.25rem;
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 500;
}

.back-link::before {
    content: "\2039\00a0";
}

.product-type {
    margin: 0 0 0.5rem;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ocean);
}

.product-thumbnail {
    display: block;
    width: 100%;
    max-width: 40rem;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.5rem;
    border-radius: var(--radius);
}

.product-info-wide .product-thumbnail,
.product-info-wide .prose {
    max-width: none;
}

.product-info.no-access .product-thumbnail {
    filter: grayscale(1);
}

.product-contents {
    margin-top: clamp(2rem, 5vw, 3rem);
}

/* Products: what admins see */

.admin-edit {
    float: right;
    margin: 0;
}

.preview-note {
    max-width: none;
    margin: 0 0 1.5rem;
    padding: 10px 14px;
    color: var(--warning);
    background: var(--warning-bg);
    border-left: 3px solid;
    border-radius: var(--radius);
}

/* A video's Vimeo player, in place of its thumbnail. */
.video-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-bottom: 1.5rem;
    background: var(--primary);
    border-radius: var(--radius);
    overflow: hidden;
}

.video-player[hidden] {
    display: none;
}

.video-player iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* An article's summary, and its body. */
.lead {
    font-size: 1.3125rem;
    line-height: 1.5;
    color: var(--primary);
}

.article-content {
    margin-bottom: 1.5rem;
}

.article-content h2,
.article-content h3,
.article-content h4 {
    margin: 1.8em 0 0.6em;
}

.article-content h2 {
    font-size: 1.75rem;
}

.article-content h3 {
    font-size: 1.375rem;
}

.article-content h4 {
    font-size: 1.125rem;
}

.article-content > :first-child {
    margin-top: 0;
}

.article-content ul,
.article-content ol {
    margin: 0 0 1.1em;
    padding-left: 1.5em;
}

.article-content li {
    margin-bottom: 0.3em;
}

.article-content blockquote {
    margin: 1.5em 0;
    padding: 0.2em 0 0.2em 1.25em;
    font-style: italic;
    color: var(--muted);
    border-left: 3px solid var(--ocean);
}

.article-content hr {
    margin: 2em 0;
    border: 0;
    border-top: 1px solid var(--rule);
}

.article-content figure {
    margin: 1.75em 0;
}

.article-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.article-content figcaption {
    margin-top: 0.6em;
    font-family: var(--sans);
    font-size: 0.875rem;
    color: var(--muted);
}

/* A PDF in an article: its first page, framed like a sheet of paper, with an "Open PDF" button over its bottom right
   corner. The whole page opens the PDF. Not too wide, so a portrait page doesn't run on far down the article. */
.article-content figure.content-pdf {
    max-width: 22rem;
}

.article-content .content-pdf a {
    position: relative;
    display: block;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(25, 49, 62, 0.12);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.article-content .content-pdf img {
    border-radius: 0;
}

.article-content .content-pdf a::after {
    content: "Open PDF";
    position: absolute;
    right: 12px;
    bottom: 12px;
    padding: 6px 12px;
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
    background: var(--primary);
    border-radius: var(--button-radius, 4px);
    box-shadow: 0 2px 8px rgba(22, 32, 43, 0.3);
    transition: background-color 0.15s;
}

.article-content .content-pdf a:hover {
    border-color: var(--ocean);
    box-shadow: 0 6px 18px rgba(25, 49, 62, 0.22);
}

.article-content .content-pdf a:hover::after {
    background: var(--primary-light);
}

.article-content pre {
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 0.875rem;
    background: var(--foam);
    border-radius: var(--radius);
}

/* Article page (products/article.html): the title, then the article with a rail beside it that stays in view, a bar
   under the top bar filling as the page is read, and more articles after it. All in a column as wide as a whole
   number of the list's tiles (.tile-columns), at most three, which its layout responds to. */

.content.article-page {
    max-width: none;
}

.article-column {
    max-width: 992px;
    container-type: inline-size;
}

.article-column .admin-edit {
    margin-bottom: 0.75rem;
}

.article-progress {
    position: fixed;
    inset: var(--topbar-height) 0 auto 0;
    height: 3px;
    pointer-events: none;
    z-index: 25;
}

.article-progress span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--ocean), #8cc6c4);
    transform: scaleX(0);
    transform-origin: left;
}

.article-header {
    margin-bottom: clamp(2rem, 5cqw, 3.5rem);
    padding-bottom: clamp(2rem, 5cqw, 3.5rem);
    border-bottom: 1px solid var(--rule);
}

.article-header::before {
    content: "";
    display: block;
    width: 3rem;
    height: 4px;
    margin-bottom: 1.5rem;
    background: var(--ocean);
}

.article-header h1 {
    font-size: clamp(2.5rem, 5.5cqw, 4.25rem);
    line-height: 1.03;
    letter-spacing: -0.022em;
    text-wrap: balance;
}

.article-byline {
    margin: 1.1rem 0 0;
    font-size: clamp(1.2rem, 2.2cqw, 1.5rem);
    line-height: 1.4;
    color: var(--muted);
}

.article-layout {
    display: grid;
    gap: 2rem;
}

/* Above the article on narrow screens, as a wrapping row; beside it, a column, from 820px. */
.article-rail {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.article-back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.55rem 1.1rem 0.55rem 0.8rem;
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    background: var(--primary);
    border-radius: 999px;
    transition: background 0.15s;
}

.article-back:hover {
    color: #fff;
    background: var(--ocean-dark);
}

.article-back .icon {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.article-back:hover .icon {
    transform: translateX(-3px);
}

.article-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.75rem;
    margin: 0;
}

.article-facts dt {
    margin-bottom: 0.2rem;
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
}

.article-facts dd {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.9375rem;
    color: var(--primary);
}

.article-facts .tag-list {
    margin: 0.2rem 0 0;
}

.article-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0;
    font-family: var(--sans);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ocean-dark);
    background: none;
    border: 0;
    cursor: pointer;
}

.article-copy:hover {
    color: var(--primary);
}

.article-copy .icon {
    width: 18px;
    height: 18px;
}

.article-body {
    font-size: 1.1875rem;
    line-height: 1.7;
}

.article-more {
    margin-top: clamp(3rem, 7cqw, 4.5rem);
    padding-top: clamp(2rem, 5cqw, 3rem);
    border-top: 1px solid var(--rule);
}

@container (min-width: 820px) {
    .article-layout {
        grid-template-columns: 13rem minmax(0, 1fr);
        gap: clamp(2.5rem, 6cqw, 5rem);
    }

    .article-rail {
        position: sticky;
        top: calc(var(--topbar-height) + 2rem);
        align-self: start;
        flex-direction: column;
        align-items: flex-start;
        gap: 1.75rem;
        padding: 0;
        border: 0;
    }

    .article-facts {
        flex-direction: column;
        gap: 1.25rem;
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .article-back .icon {
        transition: none;
    }
}

/* Video page (products/video.html): the video in a card with a dark bar of details under it, a panel for access for
   those who can't watch, then the title, description and comments, and more videos after them. All are as wide as
   the column: a whole number of the list's tiles (.tile-columns), at most three. */

.content.video-page {
    max-width: none;
}

.video-column {
    max-width: 992px;
}

.video-column .admin-edit {
    float: none;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.video-card {
    overflow: hidden;
    background: var(--primary);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(25, 49, 62, 0.08), 0 30px 60px -30px rgba(25, 49, 62, 0.5);
}

.video-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0e1f29;
    container-type: inline-size;
}

.video-stage iframe,
.video-stage img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}

/* Locked: the thumbnail is still seen, dimmed, under a lock and the subscription that opens it. */
.video-stage.is-locked img {
    filter: grayscale(0.5) brightness(0.5);
}

.video-stage-note {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    padding: 1rem;
    font-family: var(--sans);
    text-align: center;
    color: #fff;
}

.video-stage:not(.is-locked) .video-stage-note {
    background: linear-gradient(180deg, rgba(14, 31, 41, 0) 40%, rgba(14, 31, 41, 0.6) 100%);
}

.video-stage-icon {
    display: grid;
    place-items: center;
    width: clamp(3rem, 10cqw, 4.75rem);
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.video-stage-icon .icon {
    width: 46%;
    height: 46%;
}

.video-stage-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    font-size: clamp(0.875rem, 2.4cqw, 1.125rem);
    font-weight: 600;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
}

/* A subscription tier, in its colour (tier.colour), e.g. the one that would open a locked video. */
.video-tier {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    font-family: var(--sans);
    font-size: 0.875em;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.02em;
    color: var(--tier-text, #fff);
    text-shadow: none;
    background: var(--tier-colour, var(--ocean));
    border-radius: var(--button-radius);
}

/* Dark, as the video's frame, so the card reads as one piece. */
.video-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 2rem;
    padding: 1rem clamp(1rem, 3cqw, 1.5rem);
    border-top: 1px solid rgba(213, 225, 229, 0.12);
}

.video-bar .article-back {
    background: rgba(255, 255, 255, 0.12);
}

.video-bar .article-back:hover {
    background: var(--ocean);
}

.video-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 2rem;
    margin: 0;
}

.video-facts dt {
    margin-bottom: 0.15rem;
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8fa5ae;
}

.video-facts dd {
    margin: 0;
    font-family: var(--sans);
    font-size: 0.9375rem;
    color: #e2eaed;
}

.video-bar .article-copy {
    margin-left: auto;
    color: #8cc6c4;
}

.video-bar .article-copy:hover {
    color: #c6e4e2;
}

.video-access {
    margin-top: 1.5rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    font-family: var(--sans);
    background: var(--surface);
    border-top: 4px solid var(--ocean);
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(25, 49, 62, 0.06), 0 18px 40px -24px rgba(25, 49, 62, 0.35);
}

.video-access-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
}

.video-access-status .icon {
    width: 18px;
    height: 18px;
}

.video-access-option {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.video-access-heading {
    margin: 0;
    font-family: var(--serif);
    font-size: 1.3125rem;
    font-weight: 500;
    line-height: 1.25;
    color: var(--primary);
}

.video-access-text,
.video-access-hint {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted);
}

.video-access-hint {
    font-size: 0.8125rem;
}

.video-access-text + .video-access-text {
    margin-top: 1rem;
}

.video-access .button {
    align-self: stretch;
    justify-content: center;
    width: 100%;
    margin-top: 0.4rem;
}

.video-access .products-message:empty {
    display: none;
}

.video-access-price {
    margin: 0.2rem 0 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.video-access-price strong {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.video-access-or {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 1.4rem 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
}

.video-access-or::before,
.video-access-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rule);
}

/* The two ways in side by side, with "or" between them, once there is room. */
@container (min-width: 640px) {
    .video-access:has(.video-access-or) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 0 2.5rem;
    }

    .video-access-status {
        grid-column: 1 / -1;
    }

    .video-access-or {
        flex-direction: column;
        margin: 0;
    }

    .video-access-or::before,
    .video-access-or::after {
        width: 1px;
        height: auto;
    }
}

.video-header {
    margin-top: clamp(2.25rem, 5cqw, 3.25rem);
    margin-bottom: 1.25rem;
}

.video-header h1 {
    font-size: clamp(2.25rem, 4.6cqw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.video-byline {
    margin: 0.9rem 0 0;
    font-size: clamp(1.15rem, 2cqw, 1.4rem);
    line-height: 1.4;
    color: var(--muted);
}

.video-header .tag-list {
    margin-top: 1rem;
}

.video-description {
    font-size: 1.1875rem;
    line-height: 1.7;
}

.video-more {
    margin-top: clamp(3rem, 7cqw, 4.5rem);
    padding-top: clamp(2rem, 5cqw, 3rem);
    border-top: 1px solid var(--rule);
}

/* Tags: small chips in each tag's colour, its description as their tooltip. */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

/* 12px text in a chip 24px tall: the usual size for chips in modern interfaces. */
.tag {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 8px;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tag-text, #fff);
    background: var(--tag-colour, var(--ocean));
    border-radius: var(--button-radius);
}

.tag-link {
    color: inherit;
    text-decoration: none;
}

.tag-link:hover {
    color: inherit;
    text-decoration: underline;
}

.tag:has(.tag-link:hover) {
    filter: brightness(1.1);
}

/* A subscription tier, in its colour (tier.colour), e.g. in the dashboard's users table. */
.tier-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 8px;
    font-family: var(--sans);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--tier-text, #fff);
    background: var(--tier-colour, var(--primary));
    border-radius: var(--button-radius);
}

/* The bottom of a product page, for one the visitor may see but not use: its price and Buy button, or a prompt to
   sign in and see them. */
.product-purchase {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: 1.25rem 1.5rem;
    font-family: var(--sans);
    background: var(--surface);
    border-top: 4px solid var(--ocean);
    border-radius: var(--radius);
}

.product-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    margin: 0;
}

.product-price strong {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.product-price-term,
.product-price-signin {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--muted);
}

.product-purchase .products-message {
    flex-basis: 100%;
    margin: 0;
}

.product-access {
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--primary);
}


/* Shared by the account and dashboard pages: dialogs, quiet buttons and cards. */

.dialog {
    width: min(28rem, calc(100% - 32px));
    padding: 1.5rem;
    color: var(--ink);
    background: var(--surface);
    border: 0;
    border-top: 4px solid var(--error);
    border-radius: var(--radius);
    box-shadow: 0 20px 50px rgba(22, 32, 43, 0.3);
}

.dialog::backdrop {
    background: rgba(25, 49, 62, 0.6);
}

.dialog h2 {
    margin-bottom: 0.75rem;
    font-size: 1.5rem;
}

.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 1.5rem;
}

.button-quiet {
    color: var(--primary);
    background: var(--foam);
}

.button-quiet:hover {
    background: #d7e6eb;
}

.card {
    margin-top: clamp(2.5rem, 6vw, 4rem);
    padding: clamp(1.25rem, 3vw, 2rem);
    background: var(--surface);
    border-top: 4px solid var(--primary);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(25, 49, 62, 0.08);
}

.card h2 {
    font-size: 1.5rem;
}

.card > .byline {
    margin: 0.4rem 0 1.5rem;
}


/* Under the sign in button: whether newcomers can sign in. */
.signin-note {
    margin-top: 0.75rem;
}

/* The basket count on the account icon: how many products are in the open order. */
.icon-link {
    position: relative;
}

.basket-badge {
    position: absolute;
    top: -1px;
    right: -3px;
    min-width: 12px;
    height: 16px;
    padding: 0 3px;
    font-family: var(--sans);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background: var(--warning);
    border: 2px solid var(--primary);
    border-radius: 10px;
    box-sizing: content-box;
}

.basket-badge[hidden] {
    display: none;
}

/* Account: the order being filled, to pay for. */
.order-card {
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    border-top-color: var(--warning);
    font-family: var(--sans);
}

.order-card[hidden] {
    display: none;
}

.order-card-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1rem;
}

.order-items {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule);
}

/* A product, or the offer: its name on the left, its price and a button to take it out on the right. */
.order-line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
}

.order-line[hidden] {
    display: none;
}

.order-line-name {
    display: inline-flex;
    flex: 1;
    align-items: center;
    gap: 10px;
    min-width: 0;
    font-weight: 600;
    color: var(--primary);
}

.order-line-name .icon {
    flex: none;
    color: var(--ocean);
}

.order-line-name a {
    color: inherit;
    text-decoration: none;
}

.order-line-name a:hover {
    text-decoration: underline;
}

.order-line-note {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--success);
}

.order-line-price {
    flex: none;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.order-line-price s {
    margin-right: 8px;
    font-size: 0.875rem;
    color: var(--muted);
}

.order-offer .order-line-price {
    color: var(--success);
}

.order-offer {
    padding: 10px 0;
    border-bottom: 1px solid var(--rule);
}

.order-offer:has(#offer-applied:not([hidden])) {
    padding: 0;
}

.order-offer-open {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 0.9375rem;
}

.order-offer-open .icon,
.order-offer .order-line-name .icon {
    width: 20px;
    height: 20px;
}

.order-offer-open[hidden],
.order-offer-form[hidden] {
    display: none;
}

.order-offer-form {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    max-width: 20rem;
}

.order-offer-form input {
    margin: 0;
    padding: 6px 10px;
    font-size: 0.9375rem;
    text-transform: uppercase;
}

.order-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0 0;
    font-weight: 600;
}

.order-total strong {
    font-size: 1.375rem;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

/* The terms on the left, cancelling and paying on the right. */
.order-card-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 1.25rem;
}

.order-terms {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
}

.order-terms input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--ocean);
}

.order-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.order-note {
    margin-top: 0.75rem;
}

/* In place of the terms and the Pay button, while ordering is switched off. */
.order-closed {
    flex: 1 1 18rem;
    margin: 0;
}

.dialog-wide {
    width: min(40rem, calc(100% - 32px));
    border-top-color: var(--ocean);
}

.dialog-scroll {
    max-height: 60vh;
    overflow-y: auto;
    font-size: 1rem;
}

.dialog-scroll h3 {
    margin: 1.2em 0 0.4em;
    font-size: 1.125rem;
}

/* Account: the user's handle, with the button to change it beside it. */
.handle-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 30rem;
    margin-top: 1rem;
}

.handle-form input {
    flex: 1 1 12rem;
    margin: 0;
}

.handle-form input:disabled {
    color: var(--muted);
    background: var(--foam);
}

/* The "Show subscriber content" switch, with the links to subscribe or sign in below it. */
.subscriber-toggle {
    margin-bottom: 1.25rem;
    font-family: var(--sans);
}

.subscriber-toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.subscriber-toggle .switch {
    margin: 0;
}

.subscriber-toggle .byline {
    margin-top: 2px;
    font-size: 0.875rem;
}

/* The subscribe page: a card per plan (its name, price per month, description, features and button), then the key
   terms and notes. */
.subscribe-intro {
    margin-bottom: clamp(2rem, 5vw, 3rem);
}

.subscription-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.subscription-option {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: var(--surface);
    border-top: 4px solid var(--ocean);
    border-radius: var(--radius);
    box-shadow: 0 2px 10px rgba(25, 49, 62, 0.08);
}

.subscription-option:first-child {
    border-top-color: var(--rule);
}

.subscription-option h2 {
    font-size: 1.5rem;
}

.subscription-option sup,
.plan-price-term sup {
    margin-left: 1px;
    font-family: var(--sans);
    font-size: 0.6em;
}

.subscription-option sup a {
    text-decoration: none;
}

.plan-price {
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
    font-family: var(--sans);
}

.plan-price strong {
    font-size: 2.25rem;
    font-weight: 600;
    line-height: 1.1;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.plan-price-term,
.plan-price-signin {
    font-size: 0.8125rem;
    color: var(--muted);
}

.plan-price-signin {
    font-size: 0.9375rem;
}

.plan-description {
    font-size: 1rem;
}

/* Features, each with a checkbox for its bullet. */
.plan-features {
    flex: 1;
    margin: 0 0 1.5rem;
    padding: 0;
    font-family: var(--sans);
    font-size: 0.9375rem;
    line-height: 1.45;
    list-style: none;
}

.plan-features li {
    display: flex;
    gap: 8px;
    margin-bottom: 0.6rem;
}

.plan-features .icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--ocean);
}

.plan-current {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--sans);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--success);
}

.plan-current .icon {
    width: 20px;
    height: 20px;
}

.subscribe-terms {
    margin-top: clamp(2rem, 5vw, 3rem);
    padding: 1.25rem 1.5rem;
    font-family: var(--sans);
    background: var(--foam);
    border-left: 4px solid var(--ocean);
    border-radius: var(--radius);
}

.subscribe-terms h2 {
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.subscribe-terms ul {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.9375rem;
}

.subscribe-terms li + li {
    margin-top: 0.35rem;
}

.subscribe-notes ol {
    margin: 1.5rem 0 0;
    padding-left: 1.25rem;
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--muted);
}

.subscribe-notes li + li {
    margin-top: 0.35rem;
}

/* Shown while an admin views the site as someone else: a pill at the bottom of the window. */
.view-as-banner {
    position: fixed;
    bottom: 16px;
    left: 50%;
    z-index: 35;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: calc(100% - 32px);
    padding: 8px 16px;
    font-family: var(--sans);
    font-size: 0.875rem;
    color: #fff;
    background: var(--warning);
    border-radius: 999px;
    box-shadow: 0 6px 20px rgba(22, 32, 43, 0.3);
    transform: translateX(-50%);
}

.view-as-banner a,
.view-as-banner .link-button {
    color: #fff;
    font-weight: 600;
}

.view-as-banner .link-button:hover {
    color: #fff;
}

/* Account: the user's subscription, at the top of the page. */
.subscription-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin: 0 0 clamp(2rem, 5vw, 3rem);
    font-family: var(--sans);
    border-top-color: var(--tier-colour, var(--rule));
}

.subscription-card h2 {
    margin-bottom: 0.35rem;
}

.subscription-card .byline {
    margin: 0;
}

.subscription-card .subscription-message {
    flex-basis: 100%;
    margin: 0;
}

.subscription-card .tier-chip {
    margin-left: 6px;
    vertical-align: middle;
}