/* sezimder.kz — the stylesheet.

   Palette `sky-gold`: a white page under a deep sky-blue band, warm gold for what is
   pressed or counted. Type `system-sans`, radius `soft`, layout `sidebar`. Classes are
   `type-prefixed`: l- layout, b- block, e- element, m- modifier. */

:root {
    --sky: #1a6fb5;
    --sky-deep: #12558d;
    --gold: #d9a520;
    --gold-deep: #b8860b;
    --ink: #1b2430;
    --ink-soft: #5b6675;
    --line: #dde5ee;
    --paper: #ffffff;
    --paper-tint: #eef4fa;
    --radius: 8px;
    --measure: 1140px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* The page fills the window even when its content does not. Without this the footer sits
   wherever the text ends — halfway up the screen on a crossing page, with the paper
   running on below it, which reads as a page that failed to load the rest of itself. */
/* The whole site is ONE column standing on a tinted ground, and the header is the top of
   that column rather than a band behind it. Painting only the header to the content's
   width left the page shaped like a T: a coloured bar that stopped where the text began
   and nothing holding the two together. Here the width is the column's, so the header and
   what is under it cannot disagree — there is one edge, not two. */
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--paper-tint);
    color: var(--ink);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Every band of the page is this wide and white; the ground shows only beside them. */
.l-head,
.l-shell,
.l-foot {
    width: 100%;
    max-width: var(--measure);
    background: var(--paper);
}

/* The stretching one is `.l-shell`, NOT `.l-main`. body's own children are the header,
   the shell and the footer — `.l-main` lives one level down inside the shell's grid, so
   `flex: 1` on it grew a box whose parent stayed exactly as tall as its content, and the
   footer sat wherever the card ended. The bug was invisible on a long page and obvious on
   a short one: a 300px card left the footer floating mid-screen. */
.l-shell { flex: 1 0 auto; }
.l-foot { flex-shrink: 0; }

a { color: var(--sky-deep); }
a:hover { color: var(--gold-deep); }
img { display: block; max-width: 100%; height: auto; }
small { font-size: .8em; color: var(--ink-soft); }

/* ---- layout regions ---- */

/* The wrap now only pads: the centring moved to the column itself, and a `max-width` here
   as well would inset the contents twice. */
.l-wrap { padding: 0 24px; }

.l-head {
    background: var(--sky);
    color: #fff;
}

/* Two things on the band: the name at the left, everything else together at the right.
   The sections used to sit beside the wordmark with the buttons far off at the other end,
   which spread three groups across the width and left the middle empty. Sections and
   entry buttons are both ways off this page, so they travel as one group. */
.l-head .l-wrap {
    display: flex;
    align-items: center;
    gap: 24px;
    min-height: 62px;
}

.b-menu { display: flex; align-items: center; gap: 24px; margin-left: auto; }

/* The burger belongs to the phone. Above that width the checkbox and its label are not
   rendered at all, so nothing here can leave the menu hidden on a desktop. */
.e-burger { display: none; }

/* The toggle is hidden from sight, never from the tab order — `hidden` took it out of
   both, and the menu became unreachable without a pointer. Clipped rather than
   `display: none` for the same reason. */
.e-toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* The focus ring belongs on the burger, because that is what a reader sees: the input it
   labels is clipped to a pixel. */
.e-toggle:focus-visible + .e-burger { outline: 2px solid var(--sky); outline-offset: 2px; }

.l-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 32px;
    padding-top: 24px;
    padding-bottom: 48px;
}

.l-shell.m-wide { grid-template-columns: minmax(0, 1fr); }

/* The column is second in the markup and first on the screen: placed by the grid, so the
   headings read in page order for a screen reader while the eye finds the choice on the
   left. */
.l-side {
    grid-column: 1;
    grid-row: 1;
    border-right: 1px solid var(--line);
    padding-right: 24px;
    align-self: start;
    position: sticky;
    top: 16px;
}

.l-main { grid-column: 2; grid-row: 1; min-width: 0; }

.l-shell.m-wide .l-main { grid-column: 1; }

/* No tint of its own any more: the ground behind the column is that colour now, and a
   footer painted the same would read as a gap in the page rather than as its end. The
   rule above it does the separating. */
.l-foot {
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: 14px;
}

.l-foot .l-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    min-height: 56px;
}

/* On a phone the grid is one column and the markup order holds: the listing, then the
   column under it — the city names and the bands would otherwise stand between the reader
   and the first face. The chips on the page itself already offer the same choice at the
   top. The column's own rule (no cap, two columns of names) is scoped tighter than the
   desktop one below it, so it wins whatever the order of the two blocks. */
@media (max-width: 820px) {
    .l-shell { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .l-side { grid-column: 1; grid-row: auto; border-right: 0; border-top: 1px solid var(--line); padding: 20px 0 0; position: static; }
    .l-main { grid-column: 1; grid-row: auto; }
    .l-side .b-citylist { max-height: none; overflow: visible; columns: 2; column-gap: 16px; }
    .b-citylist li { break-inside: avoid; }
}

/* ---- brand: wordmark with a gold underline ---- */

.b-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* White letters over a gold underline.

   They were gold and hollow — a stroke around an empty middle — which on this band cannot
   be read: gold and sky-blue sit close enough in value that a 1.4px outline reads as a
   smudge rather than as a word, and worst at exactly the size a header uses. Solid gold
   was better and still dim. An outlined or gold wordmark wants a dark or a white ground,
   and this palette has neither where the name stands.

   So the name stands in white and the gold moves to the line beneath it, where it works —
   the same gold as the buttons, the counters, the rule under a hovered link. */
.b-brand .e-name {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: .02em;
    color: #fff;
    border-bottom: 3px solid var(--gold);
    padding-bottom: 2px;
}


.b-brand:hover .e-name { border-bottom-color: #fff; }

.b-topnav { display: flex; gap: 18px; }
.b-topnav a { color: #fff; text-decoration: none; opacity: .9; padding: 6px 0; border-bottom: 2px solid transparent; }
.b-topnav a:hover, .b-topnav a.m-here { opacity: 1; border-bottom-color: var(--gold); color: #fff; }

/* The two service buttons on the sky band. «Вход» is an outline the band shows through;
   «Регистрация» is filled gold — the one action the header pushes, so it carries the
   colour the rest of the site spends on its buttons. */
.b-entrynav { display: flex; gap: 10px; align-items: center; }
.e-enter {
    padding: 6px 14px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .55);
}
.e-enter:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.e-enter.m-primary { background: var(--gold); color: #1b1300; border-color: var(--gold); }
.e-enter.m-primary:hover { background: #fff; border-color: #fff; color: var(--sky-deep); }

.b-footnav { display: flex; gap: 16px; flex-wrap: wrap; }
.b-footnav a { color: var(--ink-soft); }
.e-note { margin: 0; }

/* ---- the picker ---- */

/* The picker is the one thing on this page that does something, so it is the one block
   with a ground of its own. Everything else is a list. */
.b-picker {
    margin: 0 0 32px;
    padding: 20px 22px;
    background: var(--paper-tint);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.b-picker .e-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 12px;
}

/* The three selects share the row equally and the button takes what its word needs. They
   used to sit at their natural widths with a third of the block empty to the right, which
   read as a form that had lost a field. */
.b-picker .e-field { display: flex; flex-direction: column; gap: 4px; flex: 1 1 0; min-width: 0; }
.b-picker .e-fields .e-button { flex: 0 0 auto; }
.b-picker .e-label { font-size: 13px; color: var(--ink-soft); }

/* The native control, given the page's own edges. Left unstyled beyond that on purpose:
   a select drawn from scratch is a listbox reimplemented in CSS, and it breaks the one
   thing this form is for — a phone opening its own wheel. */
.b-picker select {
    font: inherit;
    padding: 9px 12px;
    width: 100%;
    min-width: 0;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.b-picker select:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; }
.b-picker .e-button { border: 0; cursor: pointer; font: inherit; font-weight: 700; padding: 11px 22px; }

/* On a phone each control takes the row: three of them side by side leave a select too
   narrow to show a city's name. */
@media (max-width: 560px) {
    .b-picker .e-fields { flex-direction: column; align-items: stretch; }
    .b-picker select { min-width: 0; width: 100%; }

    /* Four things do not fit one phone row, and stacking them cost two full bands of
       screen before the first word of the page. So the menu folds behind a burger: the
       band is the name and the button, and the rest opens on a tap. */
    .l-head .l-wrap { flex-wrap: wrap; gap: 0; min-height: 56px; }
    .e-burger {
        display: block;
        margin-left: auto;
        padding: 10px 2px;
        cursor: pointer;
    }
    .e-burger span,
    .e-burger span::before,
    .e-burger span::after {
        display: block;
        width: 24px;
        height: 2px;
        background: #fff;
        border-radius: 2px;
    }
    .e-burger span { position: relative; }
    .e-burger span::before, .e-burger span::after { content: ''; position: absolute; }
    .e-burger span::before { top: -7px; }
    .e-burger span::after { top: 7px; }

    /* Closed by default and opened by the checkbox beside it. `flex-basis: 100%` puts the
       opened menu on its own row under the name, not squeezed beside it. */
    .b-menu { display: none; flex: 0 0 100%; flex-direction: column; align-items: flex-start; gap: 14px; padding: 4px 0 14px; }
    .e-toggle:checked ~ .b-menu { display: flex; margin-left: 0; }
}

/* ---- side column ---- */

.b-sidehead {
    margin: 0 0 8px;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
}

.b-sidesub {
    margin: 12px 0 4px;
    font-size: 15px;
    color: var(--sky-deep);
}

.b-sidehead + .b-sidehead, .b-bands + .b-sidehead, .b-citylist + .b-sidehead, .b-sidelink + .b-sidehead { margin-top: 24px; }

.b-bands, .b-citylist {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}

.b-bands li, .b-citylist li { margin: 0; }

.b-bands a, .b-bands .m-here, .b-citylist a {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 5px 8px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
}

.b-bands a:hover, .b-citylist a:hover { background: var(--paper-tint); color: var(--sky-deep); }
.b-bands .m-here { background: var(--sky); color: #fff; }
.b-bands .m-here small { color: rgba(255, 255, 255, .8); }

.b-citylist { max-height: 60vh; overflow: auto; }

.b-sidelink { margin: 12px 0 0; font-size: 15px; }

/* ---- page lead ---- */

.b-crumbs {
    font-size: 14px;
    color: var(--ink-soft);
    margin-bottom: 12px;
}

.b-crumbs span { margin: 0 4px; }

.b-lead { margin-bottom: 24px; }

.e-title {
    margin: 0 0 10px;
    font-size: clamp(24px, 3.2vw, 34px);
    line-height: 1.2;
    font-weight: 800;
}

.e-text { margin: 0 0 12px; max-width: 70ch; color: var(--ink); }
.e-hint { margin: 0 0 12px; color: var(--ink-soft); font-size: 14px; }

/* Section headings, and they have to be bigger than they were. At 18px against 15px body
   text every block on the page weighed the same and the eye had nothing to land on — a
   page of even grey. The rule above them does the separating, so the size can stay modest
   and still read as a step down from the title. */
.e-heading {
    margin: 34px 0 12px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--sky-deep);
}

/* The first heading of a column does not need a rule over it — there is nothing above it
   to be separated from. */
.b-lead + * .e-heading,
.b-picker .e-heading { border-top: 0; padding-top: 0; margin-top: 0; }

.e-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.e-fact {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--paper-tint);
}

.e-fact.m-accent { background: var(--gold); border-color: var(--gold); color: #1b1300; font-weight: 700; }

/* ---- slices as chips, cities as a grid ---- */

.b-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }

.e-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--sky);
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--sky-deep);
    font-size: 15px;
}

.e-chip:hover { background: var(--sky); color: #fff; }
.e-chip:hover small { color: rgba(255, 255, 255, .85); }

.b-citygrid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 6px 16px;
}

.e-city {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-radius: var(--radius);
    text-decoration: none;
    color: var(--ink);
    border-bottom: 1px dotted var(--line);
}

.e-city:hover { background: var(--paper-tint); color: var(--sky-deep); }

/* ---- the listing: paragraph entries ---- */

.b-people {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 16px 12px;
}

.b-person { margin: 0; }

.b-person .e-link {
    display: block;
    text-decoration: none;
    color: var(--ink);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--paper-tint);
    border: 1px solid var(--line);
    transition: border-color .15s;
}

.b-person .e-link:hover { border-color: var(--gold); }

.b-person .e-photo {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #d6e3f0;
}

.b-person .e-photo.m-empty { display: block; }

.b-person .e-name { display: inline; font-weight: 700; padding-left: 10px; }
.b-person .e-age { font-weight: 400; }

.b-person .e-place {
    display: block;
    padding: 0 10px 8px;
    color: var(--ink-soft);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.b-person .e-link > .e-name, .b-person .e-link > .e-age { line-height: 1.3; }
.b-person .e-link > .e-name { display: inline-block; padding-top: 8px; max-width: calc(100% - 44px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

.b-pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.e-page {
    padding: 8px 18px;
    border: 1px solid var(--sky);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
}

.e-page:hover { background: var(--sky); color: #fff; }
.e-here { color: var(--ink-soft); }

.b-empty { padding: 24px; background: var(--paper-tint); border-radius: var(--radius); }

.b-questions .e-question { margin: 16px 0 4px; font-size: 16px; }

/* ---- the profile ---- */

.b-card { margin-bottom: 8px; }
.b-cardhead .e-title { margin-bottom: 4px; }
.e-standing { margin: 0 0 16px; color: var(--ink-soft); }

.b-gallery { margin: 0 0 24px; }

.b-gallery .e-strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 6px;
    max-width: 520px;
}

/* One photo fills the strip, whatever the screen. It was capped at 480px, and on a wide
   screen two frames then stood side by side: a strip that shows two of its stops at once
   is not a strip, and the snap has nothing left to do. The cap belongs on the strip — how
   wide the gallery may grow — not on the frame inside it. */
.b-gallery .e-frame {
    flex: 0 0 100%;
    margin: 0;
    scroll-snap-align: start;
}

/* The photograph whole, not cropped to a shape.

   It was `cover` in a 3:4 frame, and the donors' photographs are phone shots: this one is
   388×800, an aspect of 0.48 against the frame's 0.75, so the crop took the head off the
   top and the feet off the bottom and left a dress. A listing card can crop — it is a
   thumbnail and the profile page is one click away — but this IS the profile page, and it
   is the one place the picture has to be what was taken.

   `contain` inside a fixed frame instead: tall shots letterbox onto the ground, wide ones
   sit centred, and every strip stop stays the same height so the snap has something even
   to snap to. */
.b-gallery .e-shot {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: contain;
    border-radius: var(--radius);
    background: var(--paper-tint);
}

.b-gallery .e-picks {
    list-style: none;
    display: flex;
    gap: 8px;
    margin: 10px 0 0;
    padding: 0;
    overflow-x: auto;
}

.b-gallery .e-picks { max-width: 520px; }
.b-gallery .e-pick img { width: 60px; height: 80px; object-fit: cover; border-radius: 4px; }
.b-gallery .e-pick:hover img { outline: 2px solid var(--gold); }

.e-bio { max-width: 70ch; white-space: pre-line; }

/* Facts read as pairs, so a pair has to stay one thing on the page.

   The grid used to stretch to the full width of the article, and `space-between` then
   pushed the label to one edge and the value to the other — half a screen of dotted rule
   between «Рост» and «170 см», which is the width a table gets when nobody gives it one.
   Four columns of that also left the last row hanging alone.

   So: a ceiling on the block, and columns wide enough to hold a pair and no wider. */
.b-facts {
    margin: 0;
    max-width: 620px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 2px 28px;
}

.b-facts .e-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    border-bottom: 1px dotted var(--line);
    padding: 6px 0;
}

.b-facts dt { color: var(--ink-soft); }
.b-facts dd { margin: 0; font-weight: 600; text-align: right; }

.b-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

.e-button {
    display: inline-block;
    padding: 12px 22px;
    background: var(--gold);
    color: #1b1300;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 700;
}

.e-button:hover { background: var(--gold-deep); color: #fff; }
.e-button.m-quiet { background: var(--paper-tint); color: var(--sky-deep); border: 1px solid var(--line); }
.e-button.m-quiet:hover { background: var(--sky); color: #fff; }

/* ---- the crossing ---- */

.b-crossing {
    max-width: 440px;
    margin: 24px auto;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    text-align: center;
}

/* The service card — «Регистрация», «Вход» — is the same card as a crossing, with a form
   in place of a portrait. Narrower than one, though: a crossing carries a portrait and a
   name, this carries one field, and at 440px the login card was mostly margin.

   The field is full width because a single input centred at its natural size reads as an
   afterthought beside a button that fills the card. */
.b-entry { max-width: 360px; text-align: left; }
.b-entry .e-title { margin-bottom: 20px; text-align: center; }
.b-entry .e-aside { text-align: center; }
.b-entry .e-entry { display: block; margin: 0 0 4px; }
.b-entry .e-field { display: block; text-align: left; margin: 0 0 14px; }
.b-entry .e-field span { display: block; margin: 0 0 5px; font-size: 14px; color: var(--ink-soft); }

.b-entry .e-field input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 13px;
    font: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.b-entry .e-field input:focus-visible { outline: 2px solid var(--sky); outline-offset: 1px; border-color: var(--sky); }
/* Both buttons take the card's width. «Войти» alone in the middle of a 440px card read
   as a stub — a button sized to its two words with the card's whole width around it —
   while «Продолжить» under a full-width field was already the right shape. One rule for
   both, so the two cards are the same card. */
.b-entry .e-button { display: block; width: 100%; box-sizing: border-box; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.b-entry .e-done { margin: 0 0 16px; color: var(--ink); }

/* The tick under the button, centred with the line below it: those two are the card's
   quiet tail and belong together, while the field and the button are its body. */
.b-entry .e-confirm { margin: 14px 0 0; }
.b-entry .e-aside { margin: 8px 0 0; font-size: 13px; }

.b-crossing .e-portrait { width: 120px; height: 160px; object-fit: cover; border-radius: var(--radius); margin: 0 auto 16px; }
.b-crossing .e-title { font-size: 24px; }
.b-crossing .e-where { font-weight: 400; color: var(--ink-soft); font-size: 16px; }
/* The name and the button stood ten pixels apart while a line of text sat between them.
   With the line gone the heading has to hold that room itself, or the button reads as
   part of the title. */
.b-crossing .e-title { margin-bottom: 22px; }
/* The tick, and the button it governs. The tick stands under the button, so the rule
   that greys the button has to reach backwards — `:has` on the block, not a sibling
   selector, which only reaches forward.

   Nothing here prevents a click: pointer-events would stop a mouse and not a keyboard,
   and the page cannot enforce an age in any case. What it does is make the state
   visible, so a reader who unticked it sees that they said no. */
/* Tight under the button and in the button's own colour: the tick is the button's
   condition, not a fifth item in the column. Blue made it a control of its own — the
   only blue on a gold card — and eight pixels of air let it drift into the links below,
   which it does not belong with. */
.b-crossing .e-confirm {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--ink);
}

.b-crossing .e-tick { width: 16px; height: 16px; accent-color: var(--gold); margin: 0; }
.b-crossing .e-confirm label { cursor: pointer; }

.b-crossing:has(.e-tick:not(:checked)) .e-button {
    background: var(--paper-tint);
    color: var(--ink-soft);
    box-shadow: inset 0 0 0 1px var(--line);
}

/* On the entry card the button sits inside the form, and a form button that looks live
   while the tick is off would say the opposite of the crossing's. Disabled outright here,
   because unlike a link this one CAN be stopped: the browser refuses the submit. */
.b-entry:has(.e-tick:not(:checked)) .e-entry .e-button { pointer-events: none; }

/* The two links under the tick carry no line of their own. Underlined, they read as a
   third and fourth offer on a card that makes one, and four ruled elements in a column
   is what made it noisy. The underline comes back on hover, where it says the thing it
   is for — this is clickable — to the one reader who is pointing at it. */
.b-crossing .e-aside { margin: 18px 0 0; font-size: 13px; }
.b-crossing .e-back { margin: 6px 0 0; font-size: 13px; }

.b-crossing .e-why { color: var(--ink-soft); text-decoration: none; }
.b-crossing .e-why:hover { color: var(--gold-deep); text-decoration: underline; }

/* The way back is the site's gold, not the grey of the line above it. Both were quiet and
   the same weight, so the one that names a rule and the one that returns to the profile
   read as a matched pair — and the reader who wants out had nothing to aim at. */
.b-crossing .e-back a { color: var(--gold-deep); text-decoration: none; font-weight: 700; }
.b-crossing .e-back a:hover { text-decoration: underline; }

/* ---- plain text pages ---- */

/* Prose blocks hold to a reading measure. Without a cap the how-it-works paragraphs run
   the full page width on a laptop, where a line of sixty words is a line nobody finishes. */
.b-how p { max-width: 68ch; margin: 0 0 12px; }
.b-how p:last-child { margin-bottom: 0; }

/* The questions read as a definition list, because that is what they are: a term and its
   gloss. The question carries the weight — it is what a reader scans for — and the answer
   sits under it in the body colour, indented enough to group the two without a box. */
.b-asked { margin-top: 8px; }
.e-qa { margin: 0; max-width: 68ch; }
.e-qa dt { margin: 18px 0 4px; font-weight: 700; color: var(--ink); }
.e-qa dt:first-child { margin-top: 0; }
.e-qa dd { margin: 0; color: var(--ink-soft); }

.b-text { max-width: 72ch; }
.b-text p { margin: 0 0 12px; }