/* ==========================================================================
   KamraKhaliHai.in — frontend stylesheet
   --------------------------------------------------------------------------
   One hand-written file, no framework. Organised as:

     1. Design tokens          6. Layout shell + ad rails
     2. Reset and base         7. Header and navigation
     3. Typography             8. Page sections and components
     4. Utilities              9. Forms and results
     5. Links and focus       10. Footer, responsive, print

   The visual language is a working reference publication: paper background,
   ink text, hairline rules, a serif for headings and the system UI stack for
   controls. Cards are used where a card earns its place — not as the default
   container for everything.

   Documented in DESIGN_SYSTEM.md; breakpoint behaviour in RESPONSIVE.md.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS
   Every colour, size and spacing step in the site comes from here. Components
   never invent their own values.
   ========================================================================== */

:root {
    /* --- Surface and ink ------------------------------------------------ */
    --color-bg:            #f7f6f3;   /* page — warm paper, not pure grey    */
    --color-surface:       #ffffff;   /* panels, cards, header, footer       */
    --color-surface-alt:   #f2f0ec;   /* subtle fills, table headers, chips  */
    --color-ink:           #15181c;   /* body text and headings              */
    --color-ink-2:         #474d54;   /* secondary text                      */
    --color-ink-3:         #6e757c;   /* muted labels, metadata              */

    /* --- Lines ---------------------------------------------------------- */
    --color-line:          #e4e0d8;   /* hairline dividers                   */
    --color-line-strong:   #cdc7bb;   /* borders that must read as edges     */

    /* --- Brand ---------------------------------------------------------- */
    --color-primary:       #14506e;   /* deep blue — links, primary actions  */
    --color-primary-dark:  #0e3b52;
    --color-primary-wash:  #eaf1f5;
    --color-accent:        #9c4221;   /* clay — eyebrows, marks, emphasis    */
    --color-accent-wash:   #fbf1ea;

    /* --- Semantic ------------------------------------------------------- */
    --color-success:       #2c6a45;
    --color-success-wash:  #eff6f1;
    --color-warning:       #855d00;
    --color-warning-wash:  #fbf5e6;
    --color-error:         #9a2b25;
    --color-error-wash:    #fbf0ef;

    /* --- Type ----------------------------------------------------------- */
    /* System stacks only: nothing to download, nothing to leak, and they
       render well on Windows, macOS and Android alike. */
    --font-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                  "Times New Roman", serif;
    --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --text-xs:   0.75rem;    /* 12px — badges, fine print                    */
    --text-sm:   0.8125rem;  /* 13px — metadata, help text                   */
    --text-base: 0.9375rem;  /* 15px — UI text                               */
    --text-body: 1rem;       /* 16px — reading text                          */
    --text-lg:   1.125rem;   /* 18px — lead paragraphs                       */
    --text-xl:   1.3125rem;  /* 21px — section headings                      */
    --text-2xl:  1.625rem;   /* 26px — page headings                         */
    --text-3xl:  2.125rem;   /* 34px — hero                                  */

    --leading-tight: 1.22;
    --leading-snug:  1.4;
    --leading-body:  1.62;

    /* --- Spacing (4px base) --------------------------------------------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;

    /* --- Shape ---------------------------------------------------------- */
    --radius-sm: 2px;
    --radius-md: 3px;
    --radius-lg: 4px;
    /* Shadows are used sparingly: only for things that genuinely float. */
    --shadow-pop: 0 6px 20px rgba(21, 24, 28, 0.13);

    /* --- Layout --------------------------------------------------------- */
    --container: 72rem;   /* header, footer and section width               */
    --measure:   44rem;   /* reading measure for prose                      */
    --rail:      176px;   /* reserved ad-rail width on wide screens         */
    --gutter:    24px;
    --header-h:  60px;

    --transition: 120ms ease;
}

/* ==========================================================================
   2. RESET AND BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-ink);
    font: var(--text-body)/var(--leading-body) var(--font-sans);
    /* Nothing may push the page sideways at any width. */
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* Locked while the mobile drawer is open. */
body.is-nav-open { overflow: hidden; }

img, svg, video { max-width: 100%; height: auto; }
img { display: block; }

hr { border: 0; border-top: 1px solid var(--color-line); margin: var(--space-6) 0; }

::selection { background: var(--color-primary-wash); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: -0.012em;
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
    text-wrap: balance;
}

h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); margin-top: var(--space-7); }
h3 { font-size: var(--text-lg); margin-top: var(--space-5); }
h4 { font-size: var(--text-base); margin-top: var(--space-4); font-family: var(--font-sans); font-weight: 700; }

p, ul, ol, dl, table, figure, pre { margin: 0 0 var(--space-4); }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: var(--space-1); }
li > ul, li > ol { margin-top: var(--space-1); }

strong, b { font-weight: 650; }

small { font-size: var(--text-sm); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.875em; }

code {
    background: var(--color-surface-alt);
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
}

pre {
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    overflow-x: auto;
}

pre code { background: none; padding: 0; }

blockquote {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-4);
    border-left: 3px solid var(--color-line-strong);
    color: var(--color-ink-2);
}

/* Reading measure for long-form copy. */
.prose { max-width: var(--measure); }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose img { border-radius: var(--radius-md); margin: var(--space-5) 0; }

.lede {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-ink-2);
    max-width: var(--measure);
}

/* Small uppercase label above a heading. Used sparingly. */
.eyebrow {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-2);
}

.meta {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

.meta > * + *::before {
    content: "·";
    margin: 0 0.45em;
    color: var(--color-line-strong);
}

/* ==========================================================================
   4. UTILITIES
   A deliberately short list — utilities are not a substitute for components.
   ========================================================================== */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.stack > * + * { margin-top: var(--space-4); }
.text-muted { color: var(--color-ink-3); }
.text-small { font-size: var(--text-sm); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   5. LINKS AND FOCUS
   ========================================================================== */

a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 0.16em;
    text-decoration-thickness: 1px;
    transition: color var(--transition);
}

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

/* A visible focus ring is a feature, not a bug. */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 1px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--color-ink);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
}

.skip-link:focus { left: 0; }

/* ==========================================================================
   6. LAYOUT SHELL AND AD RAILS
   --------------------------------------------------------------------------
   The page is a single centred column by default. When the Ads module is on
   AND the viewport is wide enough, two rails appear either side without
   narrowing the reading column — the shell widens instead. Below 1280px the
   rails are removed entirely rather than squeezed, so the content never gets
   crushed on a tablet.
   ========================================================================== */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.shell {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.main {
    min-width: 0;             /* lets grid children shrink instead of overflow */
    padding: var(--space-6) 0 var(--space-8);
}

/* Rails are only rendered when there is something to put in them. */
.shell--rails { max-width: calc(var(--container) + (var(--rail) + var(--space-6)) * 2); }

.rail {
    position: sticky;
    top: var(--space-4);
    padding-top: var(--space-6);
}

/* Wide desktop: three columns, and the header, banners and footer widen to
   match so the rails line up with the edges of the page rather than sticking
   out past a narrower masthead. */
@media (min-width: 1280px) {
    .shell--rails { grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); }

    body.has-rails .masthead__bar,
    body.has-rails .category-strip__inner,
    body.has-rails .site-footer__grid,
    body.has-rails .site-footer__legal,
    body.has-rails .container {
        max-width: calc(var(--container) + (var(--rail) + var(--space-6)) * 2);
    }
}

/* --- Ad slots ---------------------------------------------------------- */
/* A slot renders nothing at all when its section is disabled, so there is no
   empty box and no layout shift. The dev placeholder is opt-in. */

.ad-slot { margin-bottom: var(--space-5); }
.ad-slot:empty { display: none; }
.ad-slot--band { margin: 0; padding: var(--space-3) 0; }

.ad-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-md);
    background: repeating-linear-gradient(
        135deg,
        var(--color-surface-alt) 0 10px,
        var(--color-bg) 10px 20px
    );
    color: var(--color-ink-3);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    padding: var(--space-3);
    min-height: 90px;
}

.ad-placeholder__label { display: block; font-weight: 600; }

.ad-placeholder__reason {
    display: block;
    margin-top: var(--space-1);
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-xs);
    opacity: 0.85;
}

.ad-placeholder--rail { min-height: 600px; flex-direction: column; }
.ad-placeholder--band { min-height: 90px; flex-direction: column; }
.ad-placeholder--inline { min-height: 110px; flex-direction: column; }

/* Reserved space. The height is set before the advert arrives, so the page
   does not jump when it loads — this is the whole of the layout-shift
   protection and it is why the wrapper exists at all. The height is a minimum
   rather than a fixed size: an advert shorter than the reservation leaves a
   little space, which costs nothing; an advert taller than a fixed box would
   be clipped. */
.ad-unit {
    display: block;
    width: 100%;
    overflow: hidden;
}

.ad-unit ins { display: block; width: 100%; }

.ad-unit--band { min-height: 90px; }
.ad-unit--inline { min-height: 250px; }
.ad-unit--rail { min-height: 600px; }

/* An advert inside an article body: separated from the text above and below it
   by more than the paragraph rhythm, so it reads as an interruption rather
   than as part of the piece. */
.ad-slot--in-content {
    margin: var(--space-6) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
}

@media (min-width: 768px) {
    .ad-unit--band { min-height: 100px; }
}

/* --- Consent banner ----------------------------------------------------- */
/* Fixed to the bottom, never covering the whole page and never trapping
   focus: a reader who ignores it can still read the article, which is the
   point of the site. Accept and decline are the same element with the same
   styling — the markup gives neither an advantage. */

.consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    background: var(--color-surface);
    border-top: 2px solid var(--color-line-strong);
    box-shadow: 0 -4px 16px rgb(0 0 0 / 8%);
    padding: var(--space-4) 0;
}

.consent__inner {
    width: min(var(--container), 100%);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.consent__text { flex: 1 1 22rem; min-width: 0; }
.consent__title { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.consent__text p { margin: 0; font-size: var(--text-sm); }
.consent__links { margin-top: var(--space-2) !important; display: flex; gap: var(--space-4); }

.consent__actions {
    display: flex;
    gap: var(--space-3);
    flex: 0 0 auto;
}

/* Identical width, identical weight. Nothing here makes one easier to press
   than the other. The 44px floor is a deliberate override of the site button
   height: this is a decision somebody makes once, with a thumb, and a target
   that small is how a mis-tap becomes a consent record. */
.consent__button { min-width: 8rem; min-height: 44px; justify-content: center; }

@media (max-width: 599px) {
    .consent__actions { width: 100%; }
    .consent__button { flex: 1 1 0; min-width: 0; }
}

/* ==========================================================================
   7. HEADER AND NAVIGATION
   ========================================================================== */

.masthead {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-line-strong);
    position: relative;
    z-index: 50;
}

.masthead__bar {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 var(--gutter);
    min-height: var(--header-h);
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

/* --- Brand -------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    /* Padding rather than a bare 22px line box, so the logo is a comfortable
       target on a phone as well as a link on a desktop. */
    padding-block: var(--space-2);
    text-decoration: none;
    color: var(--color-ink);
    flex-shrink: 0;
}

.brand:hover { color: var(--color-ink); }

.brand__mark {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.brand__name {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
    white-space: nowrap;
}

.brand__name span { color: var(--color-accent); }

/* --- Primary navigation ------------------------------------------------- */

.nav-primary { display: flex; align-items: center; gap: var(--space-1); }

.nav-primary__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-base);
    color: var(--color-ink-2);
    text-decoration: none;
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

.nav-primary__link:hover { color: var(--color-ink); background: var(--color-surface-alt); }
.nav-primary__link[aria-current="page"] { color: var(--color-ink); font-weight: 600; }

/* --- Dropdown ----------------------------------------------------------- */

.nav-dropdown { position: relative; }

.nav-dropdown__toggle {
    font: inherit;
    font-size: var(--text-base);
    color: var(--color-ink-2);
    background: none;
    border: 0;
    cursor: pointer;
    padding: var(--space-2) var(--space-3);
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    border-radius: var(--radius-sm);
}

.nav-dropdown__toggle:hover { color: var(--color-ink); background: var(--color-surface-alt); }

.nav-dropdown__chevron {
    width: 9px; height: 9px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg) translate(-1px, -1px);
    transition: transform var(--transition);
}

.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__chevron {
    transform: rotate(-135deg) translate(-2px, -2px);
}

.nav-dropdown__panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 21rem;
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-pop);
    padding: var(--space-3);
    display: none;
}

.nav-dropdown__panel[data-open="true"] { display: block; }

.nav-dropdown__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.nav-dropdown__item {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-ink);
    font-size: var(--text-base);
    line-height: 1.3;
}

.nav-dropdown__item:hover { background: var(--color-primary-wash); color: var(--color-primary-dark); }
.nav-dropdown__item small { display: block; color: var(--color-ink-3); font-size: var(--text-xs); }

.nav-dropdown__foot {
    border-top: 1px solid var(--color-line);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    font-size: var(--text-sm);
}

/* --- Header search ------------------------------------------------------ */

.masthead__search { margin-left: auto; width: min(19rem, 32vw); }

.search-form { display: flex; width: 100%; }

.search-form__input {
    flex: 1 1 auto;
    min-width: 0;
    font: inherit;
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-bg);
    border: 1px solid var(--color-line-strong);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    padding: 0.45rem 0.65rem;
}

.search-form__input::placeholder { color: var(--color-ink-3); }

.search-form__input:focus {
    background: var(--color-surface);
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary-wash);
    outline-offset: -1px;
}

.search-form__button {
    flex: 0 0 auto;
    font: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: 0.45rem 0.9rem;
    cursor: pointer;
}

.search-form__button:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

/* Large variant used in the hero and on the search page. */
.search-form--large .search-form__input { font-size: var(--text-lg); padding: 0.7rem 0.9rem; }
.search-form--large .search-form__button { font-size: var(--text-base); padding: 0.7rem 1.4rem; }

/* --- Category strip ----------------------------------------------------- */

.category-strip {
    border-top: 1px solid var(--color-line);
    background: var(--color-surface);
}

.category-strip__inner {
    max-width: var(--container);
    margin-inline: auto;
    padding: 0 var(--gutter);
    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;
}

.category-strip__inner::-webkit-scrollbar { display: none; }

.category-strip__link {
    padding: 0.55rem 0;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.category-strip__link:hover { color: var(--color-ink); border-bottom-color: var(--color-line-strong); }
.category-strip__link[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); }

/* --- Mobile controls ---------------------------------------------------- */

.masthead__mobile { display: none; margin-left: auto; gap: var(--space-2); }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: none;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    cursor: pointer;
}

.icon-button:hover { background: var(--color-surface-alt); }
.icon-button svg { width: 18px; height: 18px; }

/* --- Mobile drawer ------------------------------------------------------ */

.nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: none;
}

.nav-drawer[data-open="true"] { display: block; }

.nav-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(21, 24, 28, 0.45);
}

.nav-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(20rem, 88vw);
    background: var(--color-surface);
    border-left: 1px solid var(--color-line-strong);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-line);
    position: sticky;
    top: 0;
    background: var(--color-surface);
}

.nav-drawer__body { padding: var(--space-4); }

.nav-drawer__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    margin: var(--space-5) 0 var(--space-2);
}

.nav-drawer__body > .nav-drawer__label:first-child { margin-top: 0; }

.nav-drawer__list { list-style: none; margin: 0; padding: 0; }

.nav-drawer__list a {
    display: block;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--color-line);
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--text-body);
}

.nav-drawer__list a:hover { color: var(--color-primary); }
.nav-drawer__list a[aria-current="page"] { font-weight: 600; }

/* ==========================================================================
   8. PAGE SECTIONS AND COMPONENTS
   ========================================================================== */

/* --- Page head ---------------------------------------------------------- */

.page-head { margin-bottom: var(--space-6); }
.page-head h1 { margin-bottom: var(--space-2); }
.page-head .lede { margin-bottom: 0; }

/* --- Section ------------------------------------------------------------ */

.section { margin-bottom: var(--space-8); }
.section:last-child { margin-bottom: 0; }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    border-bottom: 2px solid var(--color-ink);
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
}

.section__head h2 { margin: 0; font-size: var(--text-xl); }

/* inline-flex + min-height keeps this a 24px target with a mouse as well as a
   finger; the coarse-pointer rule further down makes it comfortably bigger. */
.section__link {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-size: var(--text-sm);
    white-space: nowrap;
    text-decoration: none;
}

.section__link:hover { text-decoration: underline; }

.section__note { font-size: var(--text-sm); color: var(--color-ink-3); white-space: nowrap; }

/* --- Hero --------------------------------------------------------------- */
/* Two columns on desktop so the fold carries real content, not just a slogan. */

.hero {
    border-bottom: 1px solid var(--color-line);
    padding: var(--space-7) 0 var(--space-7);
    margin-bottom: var(--space-7);
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.hero h1 {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-3);
}

.hero__lede { font-size: var(--text-lg); color: var(--color-ink-2); margin-bottom: var(--space-5); }

.hero__search { max-width: 34rem; }

.hero__hints {
    margin: var(--space-3) 0 0;
    font-size: var(--text-sm);
    color: var(--color-ink-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: baseline;
}

.hero__hints a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 24px;
    justify-content: center;
    color: var(--color-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--color-line-strong);
}

.hero__hints a:hover { color: var(--color-primary); border-bottom-color: currentColor; }

.hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.hero__aside {
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.hero__aside h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    margin: 0 0 var(--space-3);
}

/* --- Ruled list (tools, articles, search results) ----------------------- */
/* A directory reads better as a ruled list than as a grid of floating cards,
   and it stays legible at eighty entries. */

.list-ruled { list-style: none; margin: 0; padding: 0; }
.list-ruled > li { margin: 0; border-bottom: 1px solid var(--color-line); }
.list-ruled > li:last-child { border-bottom: 0; }

.list-ruled__item {
    display: block;
    padding: var(--space-3) var(--space-2);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
}

a.list-ruled__item:hover { background: var(--color-primary-wash); }

.list-ruled__title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-primary);
    margin-bottom: 0.15rem;
}

a.list-ruled__item:hover .list-ruled__title { text-decoration: underline; }

.list-ruled__desc { display: block; color: var(--color-ink-2); font-size: var(--text-base); }

.list-ruled__item--muted { opacity: 0.72; }
.list-ruled__item--muted .list-ruled__title { color: var(--color-ink-2); }

/* --- Cards -------------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--space-4);
}

.card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

/* Tool card — a link block with a clear title, summary and category. */
.tool-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--transition), background var(--transition);
}

.tool-card:hover { background: var(--color-primary-wash); border-left-color: var(--color-accent); color: inherit; }

.tool-card__title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--color-primary-dark);
}

.tool-card:hover .tool-card__title { text-decoration: underline; }

.tool-card__desc { display: block; font-size: var(--text-base); color: var(--color-ink-2); flex: 1 1 auto; }
.tool-card__foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

.tool-card--planned { border-left-color: var(--color-line-strong); cursor: default; }
.tool-card--planned:hover { background: var(--color-surface); border-left-color: var(--color-line-strong); }
.tool-card--planned .tool-card__title { color: var(--color-ink-2); }
.tool-card--planned:hover .tool-card__title { text-decoration: none; }

/* Category card — compact, no illustration, no shadow. */
.category-card {
    display: block;
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
}

.category-card:hover { border-color: var(--color-primary); background: var(--color-primary-wash); color: inherit; }

.category-card__name {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-primary-dark);
    margin-bottom: var(--space-1);
}

.category-card:hover .category-card__name { text-decoration: underline; }
.category-card__desc { display: block; font-size: var(--text-sm); color: var(--color-ink-2); }
.category-card__count { display: block; font-size: var(--text-xs); color: var(--color-ink-3); margin-top: var(--space-2); }

/* Article card. */
.article-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
}

.article-card__thumb {
    aspect-ratio: 16 / 9;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    object-fit: cover;
    width: 100%;
}

.article-card__title {
    display: block;
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    color: var(--color-primary-dark);
    line-height: var(--leading-tight);
}

.article-card:hover .article-card__title { text-decoration: underline; }
.article-card__excerpt { display: block; font-size: var(--text-base); color: var(--color-ink-2); }

/* --- Badges ------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.02em;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-ink-2);
}

.badge--primary { background: var(--color-primary-wash); border-color: #bcd2df; color: var(--color-primary-dark); }
.badge--accent  { background: var(--color-accent-wash); border-color: #e4c2ab; color: var(--color-accent); }
.badge--success { background: var(--color-success-wash); border-color: #bcd6c6; color: var(--color-success); }
.badge--warning { background: var(--color-warning-wash); border-color: #e2d3a6; color: var(--color-warning); }
.badge--error   { background: var(--color-error-wash); border-color: #e0b9b7; color: var(--color-error); }

/* --- Alerts ------------------------------------------------------------- */

.alert {
    border: 1px solid var(--color-line-strong);
    border-left: 3px solid var(--color-primary);
    background: var(--color-surface);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    font-size: var(--text-base);
}

.alert > :last-child { margin-bottom: 0; }
.alert--success { border-left-color: var(--color-success); }
.alert--warning { border-left-color: var(--color-warning); }
.alert--error   { border-left-color: var(--color-error); }
.alert--info    { border-left-color: var(--color-primary); }

/* Dashed note used to mark starter copy that the owner should replace. */
.starter-notice {
    border: 1px dashed var(--color-line-strong);
    background: var(--color-accent-wash);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    margin-bottom: var(--space-5);
}

/* --- Breadcrumbs -------------------------------------------------------- */

.breadcrumbs { font-size: var(--text-sm); color: var(--color-ink-3); margin-bottom: var(--space-4); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.35rem; color: var(--color-line-strong); }
.breadcrumbs a { color: var(--color-ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--color-primary); text-decoration: underline; }

/* --- Tabs --------------------------------------------------------------- */

.tabs { border-bottom: 1px solid var(--color-line-strong); display: flex; gap: var(--space-1); overflow-x: auto; }

.tabs__tab {
    font: inherit;
    font-size: var(--text-base);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    margin-bottom: -1px;
    color: var(--color-ink-2);
    cursor: pointer;
    white-space: nowrap;
}

.tabs__tab:hover { color: var(--color-ink); }
a.tabs__tab { text-decoration: none; }
.tabs__tab[aria-selected="true"],
.tabs__tab[aria-current="page"] { color: var(--color-ink); border-bottom-color: var(--color-accent); font-weight: 600; }
.tabs__panel { padding-top: var(--space-4); }
.tabs__panel[hidden] { display: none; }

/* --- Accordion / FAQ ---------------------------------------------------- */
/* Built on <details> so it works with JavaScript disabled and is keyboard
   accessible without any ARIA of our own. */

.accordion { border-top: 1px solid var(--color-line); max-width: var(--measure); }

.accordion__item { border-bottom: 1px solid var(--color-line); }

.accordion__summary {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--text-base);
    list-style: none;
}

.accordion__summary::-webkit-details-marker { display: none; }

.accordion__summary::before {
    content: "+";
    flex: 0 0 auto;
    width: 1.1em;
    color: var(--color-accent);
    font-weight: 700;
    line-height: inherit;
}

.accordion__item[open] > .accordion__summary::before { content: "\2212"; }

.accordion__summary:hover { color: var(--color-primary-dark); }

.accordion__body { padding: 0 0 var(--space-4) calc(1.1em + var(--space-3)); color: var(--color-ink-2); }
.accordion__body > :last-child { margin-bottom: 0; }

/* --- Pagination --------------------------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-line);
}

.pagination__link {
    display: inline-block;
    min-width: 2.2rem;
    text-align: center;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink-2);
    text-decoration: none;
    font-size: var(--text-base);
}

.pagination__link:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }
.pagination__link[aria-current="page"] { background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600; }
.pagination__gap { color: var(--color-ink-3); padding: 0 var(--space-1); }
.pagination__status { margin-left: auto; font-size: var(--text-sm); color: var(--color-ink-3); }

/* --- Tables ------------------------------------------------------------- */
/* The wrapper scrolls, never the page. */

.table-wrap {
    /* `position: relative` matters: it makes this the containing block for any
       absolutely positioned descendant (a visually-hidden label, for example),
       which would otherwise be placed against the document and stretch the
       page even though the table itself scrolls inside here. */
    position: relative;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: var(--space-4);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--text-base); margin: 0; }
.table th, .table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); }
.table thead th { background: var(--color-surface-alt); font-size: var(--text-sm); color: var(--color-ink-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table td.numeric, .table th.numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* Tables inside prose get the same treatment automatically via JS wrapping. */
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.prose th, .prose td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-line); }
.prose thead th { background: var(--color-surface-alt); }

/* --- Empty state -------------------------------------------------------- */

.empty-state {
    border: 1px dashed var(--color-line-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: var(--space-6);
    text-align: center;
    color: var(--color-ink-2);
}

.empty-state h2 { margin-top: 0; }
.empty-state > :last-child { margin-bottom: 0; }

/* --- CTA strip ---------------------------------------------------------- */

.cta-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.cta-strip h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); }
.cta-strip p { margin: 0; color: var(--color-ink-2); font-size: var(--text-base); }

/* ==========================================================================
   9. FORMS, BUTTONS AND RESULTS
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.4;
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.button:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

.button--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-line-strong); }
.button--secondary:hover { background: var(--color-surface-alt); color: var(--color-ink); border-color: var(--color-ink-3); }

.button--quiet { background: none; border-color: transparent; color: var(--color-primary); padding-inline: 0.4rem; }
.button--quiet:hover { background: var(--color-primary-wash); color: var(--color-primary-dark); }

.button--small { font-size: var(--text-sm); padding: 0.3rem 0.7rem; }
.button--large { font-size: var(--text-body); padding: 0.65rem 1.4rem; }
.button--block { width: 100%; }

.button-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* --- Form primitives ---------------------------------------------------- */

.form-field { margin-bottom: var(--space-4); }

.form-field__label {
    display: block;
    font-size: var(--text-base);
    font-weight: 600;
    margin-bottom: var(--space-1);
}

.form-field__optional { font-weight: 400; color: var(--color-ink-3); font-size: var(--text-sm); }

.form-field__required { color: var(--color-error); margin-left: 0.15em; }

.form-field__help { display: block; font-size: var(--text-sm); color: var(--color-ink-3); margin-top: var(--space-1); }

.form-field__error {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-error);
    margin-top: var(--space-1);
    font-weight: 500;
}

.input, .select, .textarea {
    width: 100%;
    font: inherit;
    font-size: var(--text-base);
    color: var(--color-ink);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.65rem;
    /* 16px on iOS avoids the zoom-on-focus jump — handled in the mobile query. */
}

.textarea { min-height: 8rem; resize: vertical; }

.select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-ink-2) 50%),
                      linear-gradient(135deg, var(--color-ink-2) 50%, transparent 50%);
    background-position: calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 2rem;
}

.input:focus, .select:focus, .textarea:focus {
    border-color: var(--color-primary);
    outline: 2px solid var(--color-primary-wash);
    outline-offset: -1px;
}

.input[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--color-error); }
.input[aria-invalid="true"]:focus { outline-color: var(--color-error-wash); }

.input:disabled, .select:disabled { background: var(--color-surface-alt); color: var(--color-ink-3); cursor: not-allowed; }

/* Input with a trailing unit or a unit selector. */
.input-group { display: flex; }
.input-group > .input { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.input-group > .input:focus { position: relative; z-index: 1; }

.input-group__unit {
    display: inline-flex;
    align-items: center;
    padding: 0 0.7rem;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line-strong);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    white-space: nowrap;
}

.input-group > .select { width: auto; flex: 0 0 auto; border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* Checkboxes and radios: real controls, aligned with their labels. */
.choice { display: flex; align-items: flex-start; gap: var(--space-2); margin-bottom: var(--space-2); }
.choice input { margin: 0.28rem 0 0; flex: 0 0 auto; width: 1rem; height: 1rem; accent-color: var(--color-primary); }
.choice label { font-size: var(--text-base); }
.choice__help { display: block; font-size: var(--text-sm); color: var(--color-ink-3); }

/* A destructive action reads as one without shouting. */
.button--danger { background: var(--color-surface); color: var(--color-error); border-color: #dcb6b4; }
.button--danger:hover { background: var(--color-error-wash); color: var(--color-error); border-color: var(--color-error); }

/* Segmented unit selector — lighter than a select for two or three options. */
.segmented { display: inline-flex; border: 1px solid var(--color-line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.segmented__option { position: relative; }
.segmented__option input { position: absolute; opacity: 0; pointer-events: none; }

.segmented__option span {
    display: block;
    padding: 0.35rem 0.75rem;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    background: var(--color-surface);
    border-right: 1px solid var(--color-line-strong);
    cursor: pointer;
}

.segmented__option:last-child span { border-right: 0; }
.segmented__option input:checked + span { background: var(--color-primary); color: #fff; font-weight: 600; }
.segmented__option input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: -2px; }

/* Grouping inside a form. */
.fieldset { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.fieldset > legend { padding: 0; font-weight: 700; font-size: var(--text-base); margin-bottom: var(--space-3); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }

/* --- Result box --------------------------------------------------------- */
/* The answer is the loudest thing on a calculator page. */

.result {
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-top: 3px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.result__label {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    margin-bottom: var(--space-2);
}

.result__primary {
    font-family: var(--font-serif);
    font-size: var(--text-2xl);
    line-height: var(--leading-tight);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-ink);
    margin-bottom: var(--space-3);
}

.result__rows { margin: 0 0 var(--space-3); }
.result__rows dt { font-size: var(--text-sm); color: var(--color-ink-3); }
.result__rows dd { margin: 0 0 var(--space-3); font-size: var(--text-body); font-variant-numeric: tabular-nums; }
.result__rows dd:last-child { margin-bottom: 0; }

.result__note {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    border-left: 2px solid var(--color-line-strong);
    padding-left: var(--space-3);
    margin: var(--space-4) 0 0;
}

.result__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.result--empty { border-top-color: var(--color-line-strong); }
.result__placeholder { color: var(--color-ink-3); font-size: var(--text-base); margin: 0; }

/* Sticky result panel on wide screens only. */
@media (min-width: 900px) {
    .result--sticky { position: sticky; top: var(--space-4); }
}

/* --- Filter chips ------------------------------------------------------- */

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.filter-row__chip {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-sm);
    text-decoration: none;
    white-space: nowrap;
}

.filter-row__chip:hover { border-color: var(--color-primary); color: var(--color-primary-dark); }

.filter-row__chip.is-current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

/* --- Result states ------------------------------------------------------ */

.result__caption {
    font-size: var(--text-sm);
    color: var(--color-ink-2);
    margin: 0 0 var(--space-1);
}

.result__hint {
    display: block;
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

/* A problem is not a failure of the page: same box, different top rule. */
.result--problem { border-top-color: var(--color-warning); }

.result__problem-title {
    font-family: var(--font-serif);
    font-size: var(--text-lg);
    margin: 0 0 var(--space-2);
}

.result__errors {
    margin: var(--space-3) 0 0;
    padding-left: 1.1rem;
    font-size: var(--text-sm);
    color: var(--color-error);
}

.result__errors li { margin-bottom: var(--space-1); }

/* Live conversion preview, shown only when JavaScript fills it in. */
.tool-form__live {
    margin: var(--space-3) 0 0;
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-line-strong);
    font-size: var(--text-base);
    color: var(--color-ink-2);
}

.tool-form__live strong { color: var(--color-ink); font-variant-numeric: tabular-nums; }

/* --- Working ------------------------------------------------------------ */
/* The arithmetic, shown rather than implied. */

.working {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

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

.working__title {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    margin: 0 0 var(--space-3);
}

.working__line {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-ink);
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
}

/* --- Tool page extras --------------------------------------------------- */

.eyebrow__link { color: inherit; text-decoration: none; }
.eyebrow__link:hover { color: var(--color-accent); text-decoration: underline; }

.eyebrow__type {
    color: var(--color-ink-3);
    font-weight: 600;
}

.eyebrow__type::before { content: "·"; margin: 0 0.5em; color: var(--color-line-strong); }

/* The one-sentence definition that leads the About block. */
.definition {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-ink);
    border-left: 3px solid var(--color-accent);
    padding-left: var(--space-4);
    margin-bottom: var(--space-4);
}

.notes-list { padding-left: 1.1rem; }
.notes-list li { margin-bottom: var(--space-2); }

.tool-version {
    margin-top: var(--space-7);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-line);
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

/* Currency prefix sits before the input rather than after it. */
.input-group__unit--prefix {
    border-left: 1px solid var(--color-line-strong);
    border-right: 0;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    order: -1;
}

.input-group__unit--prefix + .input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

/* --- Tool page layout --------------------------------------------------- */

.tool-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-5);
    align-items: start;
    margin-bottom: var(--space-7);
}

.tool-layout__aside { display: flex; flex-direction: column; gap: var(--space-4); }

/* --- Definition list ---------------------------------------------------- */

.detail-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.detail-list dt { color: var(--color-ink-3); font-size: var(--text-sm); }
.detail-list dd { margin: 0; }

/* --- Email link --------------------------------------------------------- */

.email-link {
    font-family: var(--font-mono);
    font-size: 0.95em;
    background: var(--color-primary-wash);
    padding: 0.12em 0.4em;
    border-radius: var(--radius-sm);
    overflow-wrap: anywhere;
}

/* --- Formula block ------------------------------------------------------ */

.formula {
    font-family: var(--font-mono);
    font-size: var(--text-base);
    background: var(--color-surface);
    border: 1px solid var(--color-line);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    overflow-x: auto;
    margin-bottom: var(--space-4);
}

/* --- Table of contents -------------------------------------------------- */

.toc {
    background: var(--color-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--text-base);
}

.toc h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    margin: 0 0 var(--space-2);
}

.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: var(--space-1); }
.toc li li { padding-left: var(--space-4); }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* --- Error page --------------------------------------------------------- */

.error-page { max-width: var(--measure); padding: var(--space-8) 0; }
.error-page__code { font-family: var(--font-mono); font-size: var(--text-sm); letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: var(--space-2); }
.error-page pre { font-size: var(--text-sm); white-space: pre-wrap; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--color-line-strong);
    background: var(--color-surface);
    margin-top: var(--space-7);
    padding: var(--space-6) 0 var(--space-5);
    font-size: var(--text-base);
}

.site-footer__grid {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
}

.site-footer__about p { color: var(--color-ink-2); font-size: var(--text-sm); max-width: 24rem; }

.site-footer h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-ink-3);
    margin: 0 0 var(--space-3);
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--color-ink-2); text-decoration: none; font-size: var(--text-sm); }
.site-footer a:hover { color: var(--color-primary); text-decoration: underline; }

.site-footer__legal {
    max-width: var(--container);
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--gutter) 0;
    border-top: 1px solid var(--color-line);
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--color-ink-3);
}

.site-footer__legal p { margin: 0; max-width: 42rem; }

/* ==========================================================================
   11. RESPONSIVE
   --------------------------------------------------------------------------
   Layouts reflow rather than shrink. The order things give way, widest first:

     1280  ad rails appear (they never exist below this)
     1120  header search narrows
      880  desktop nav → drawer; hero, tool page and footer stack
      640  single-column everywhere, 16px gutter, 16px inputs (no iOS zoom)
      420  tightened gutter and type for 360–375px devices

   Verified widths are listed in RESPONSIVE.md.
   ========================================================================== */

@media (max-width: 1279px) {
    /* No rails below this width — the content column is never squeezed. */
    .shell--rails { grid-template-columns: minmax(0, 1fr); max-width: var(--container); }
    .rail { display: none; }
}

@media (max-width: 1120px) {
    .masthead__search { width: min(15rem, 28vw); }
    .nav-primary__link, .nav-dropdown__toggle { padding-inline: var(--space-2); }
}

@media (max-width: 1023px) {
    .hero__grid { gap: var(--space-5); }
    .site-footer__grid { grid-template-columns: 1.4fr repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 879px) {
    /* --- Header becomes brand + icons; navigation moves into the drawer. */
    .nav-primary, .masthead__search, .category-strip { display: none; }
    .masthead__mobile { display: flex; }
    .masthead__bar { min-height: 56px; }

    /* --- Content stacks. */
    .hero { padding: var(--space-6) 0; margin-bottom: var(--space-6); }
    .hero__grid { grid-template-columns: minmax(0, 1fr); }
    .hero h1 { font-size: 1.75rem; }
    .hero__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }

.hero__aside { order: 2; }

    .tool-layout { grid-template-columns: minmax(0, 1fr); }
    .tool-layout__aside { order: 2; }

    .nav-dropdown__grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
    .section { margin-bottom: var(--space-7); }
    .card-grid, .card-grid--wide { grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); }
}

@media (max-width: 639px) {
    .working { grid-template-columns: minmax(0, 1fr); padding: var(--space-4); }

    :root {
        --gutter: 16px;
        --text-3xl: 1.75rem;
        --text-2xl: 1.4rem;
        --text-xl:  1.2rem;
    }

    body { font-size: 0.975rem; }

    .main { padding: var(--space-5) 0 var(--space-7); }

    /* 16px form text stops iOS Safari zooming in on focus. */
    .input, .select, .textarea, .search-form__input { font-size: 16px; }

    .card-grid, .card-grid--wide { grid-template-columns: minmax(0, 1fr); }
    .form-grid { grid-template-columns: minmax(0, 1fr); }

    .card { padding: var(--space-4); }
    .result { padding: var(--space-4); }

    .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); }
    .site-footer__about { grid-column: 1 / -1; }
    .site-footer__legal { flex-direction: column; gap: var(--space-2); }

    .detail-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .detail-list dd { margin-bottom: var(--space-3); }

    .section__head { flex-wrap: wrap; gap: var(--space-2); }

    .cta-strip { flex-direction: column; align-items: flex-start; }

    /* Full-width primary actions are easier to hit with a thumb. */
    .button-row .button { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 419px) {
    :root { --gutter: 14px; --text-3xl: 1.55rem; }

    .brand__name { font-size: 1.05rem; }
    .brand__mark { width: 22px; height: 22px; }
    .page-head { margin-bottom: var(--space-5); }
    .result__primary { font-size: 1.3rem; }
    .site-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Coarse pointers get larger hit targets regardless of width. Desktop keeps
   its tighter spacing — this is about fingers, not screen size. */
@media (pointer: coarse) {
    .list-ruled__item { padding-block: var(--space-4); }
    .filter-row__chip { padding-block: 0.45rem; }
    .nav-drawer__list a { padding-block: 0.75rem; }
    .hero__hints a { padding-block: 0.4rem; }
    .section__link { padding-block: 0.4rem; }
    .breadcrumbs a { padding-block: 0.25rem; }
    .pagination__link { padding-block: 0.5rem; }
}

/* ==========================================================================
   12. PRINT
   ========================================================================== */

@media print {
    .masthead, .category-strip, .site-footer, .rail, .ad-slot, .ad-unit,
    .consent, .nav-drawer, .skip-link, .button, .pagination { display: none !important; }

    body { background: #fff; color: #000; font-size: 11pt; }
    .shell, .container { max-width: none; padding: 0; }
    .card, .result { border: 1px solid #999; }
    a { text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}