/* ══ Public site ══════════════════════════════════════════════════════════════════════════════
   Loaded after _content/Alpex.Web.Common/css/base.css (the tokens and the element rules both apps
   share), which it builds on. Everything here applies under body.public (_PublicLayout).
   It follows the live www.alpex.al (Astra theme): Quicksand, a white page, #333 text, the salmon
   #e47e6e accent, a transparent header over the hero on the home page and a white one elsewhere.

   Contrast (WCAG AA, measured): the live salmon #e47e6e is 2.80:1 on white, so it is only ever a
   decoration here (rules, underlines, borders beside other cues). Salmon TEXT and salmon FILLS
   under white text use --pub-accent-strong #b3503f (5.08:1 on white, 4.59:1 on --brand-tint);
   large salmon headings (≥ 24px) use --pub-accent-heading #c85f4d (4.04:1, AA large ≥ 3:1).
   --muted is darkened to #5d6874 (5.40:1 on the table-head tint; the admin's #6b7784 is 4.34:1
   there) and --brand-deep to #b3503f (links: 5.08:1; the admin's #c85f4d is 4.04:1). */

@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/quicksand-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Quicksand";
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url("../fonts/quicksand-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body.public {
    --pub-accent:         #e47e6e;   /* live salmon — decoration only (2.80:1 on white) */
    --pub-accent-strong:  #b3503f;   /* salmon text, and fills under white text (5.08:1) */
    --pub-accent-heading: #c85f4d;   /* large salmon headings only (4.04:1) */
    --pub-text:           #333333;   /* the live menu and heading tone (12.63:1) */
    --brand-deep:         #b3503f;
    --muted:              #5d6874;
    --bg:                 #ffffff;
    --font-data: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    --page-max: 80rem;
    --gutter: 1.75rem;

    font-family: "Quicksand", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--pub-text);
    background: #fff;
    overflow-x: hidden;
}

.public h1, .public h2, .public h3 { font-weight: 600; color: var(--pub-text); letter-spacing: 0; }
.public h1 { font-size: 2.25rem; line-height: 1.25; margin: 0 0 1.25rem; }
.public h2 { font-size: 1.5rem; line-height: 1.3; }
.public h3 { font-size: 1.1rem; }

/* Figures keep a system face: its tabular digits line up in every browser. */
.public table { font-family: var(--font-data); font-weight: 400; }

.public :focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: none; }

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

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 100;
    padding: .5rem .9rem;
    background: var(--surface);
    color: var(--ink);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lift);
}
.skip-link:focus { top: .5rem; }

/* ── Public site: layout ────────────────────────────────────────────────────────────────────── */

.public main.site-main { max-width: none; margin: 0; padding: 0; }
.site-main__inner {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 2.5rem var(--gutter) 4rem;
}

.public .page-title--centred { text-align: center; font-size: 2.75rem; margin: .5rem 0 2rem; }

.error-page { max-width: 42rem; margin: 3rem auto; text-align: center; }

/* ── Public site: header ────────────────────────────────────────────────────────────────────
   Scoped under .site-header (the admin's bare-<header> dark bar lives in the admin's own
   stylesheet, not here). The dropdown is CSS only and hides its links
   without display:none, so they stay reachable by Tab and :focus-within opens the group. */

/* Sticky, as on the live site (ALPEX, October 2026): the logo and the menu stay on screen while the
   page scrolls. The home page's header over the hero is the exception handled below. An in-page
   link (the skip link's #main, a heading anchor) must land below it, not under it. */
html { scroll-padding-top: 7.5rem; }
.public .site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    display: block;
    padding: 0;
    background: #fff;
    box-shadow: 0 1px 0 var(--line);
}

.site-topbar__inner {
    display: flex;
    justify-content: flex-end;
    gap: .25rem;
    max-width: 92rem;
    margin: 0 auto;
    padding: .3rem var(--gutter) 0;
}
.site-topbar__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    color: var(--pub-text);
}
.site-topbar__link svg { width: 1.05rem; height: 1.05rem; }
.site-topbar__link:hover { color: var(--pub-accent-strong); }

/* Help Center accounts (ADR 0014): "Sign in", or the signed-in name and "Sign out", top right as on the live site. */
.site-topbar__inner { align-items: center; }
.site-topbar__user { margin-right: .35rem; color: var(--pub-text); font-size: .78rem; }
.site-topbar__form { display: inline; margin: 0; }
.public .site-topbar__account {
    display: inline-flex; align-items: center; height: 2rem; margin-right: .5rem; padding: 0 .4rem;
    border: 0; background: none; color: var(--pub-text); font: inherit; font-size: .78rem; font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; text-decoration: none; cursor: pointer;
}
.public .site-topbar__account:hover { color: var(--pub-accent-strong); }
.site-topbar__lang { margin-right: .75rem; }
.public .site-header .site-topbar__lang .lang-switch__item { padding: .2rem .4rem; font-size: .75rem; }
/* The menu never wraps; below the width it needs, the burger takes over (narrow screens, further down). */
.site-header__nav { flex: none; }

/* The sign-in and registration forms. */
.account-form { display: grid; gap: .45rem; max-width: 28rem; padding: 1.5rem; }
.account-form label { margin-top: .5rem; font-weight: 600; }
.account-form input { width: 100%; }
.account-form button { justify-self: start; margin-top: 1rem; }
/* The tag helper hides its empty list with an inline style, which the CSP blocks: hidden by class instead. */
.account-form__errors.validation-summary-valid { display: none; }
.account-form__errors { color: #9d2b1d; }

/* Wider than the page: the Albanian menu labels are long, and the menu stays on one line (it never wraps). */
.site-header__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    max-width: 92rem;
    margin: 0 auto;
    padding: 0 var(--gutter) .6rem;
}

.site-brand { display: block; flex: none; padding: 0; line-height: 0; }
.site-brand::after { content: none; }
.site-brand__logo { display: block; width: 11.375rem; height: auto; }
.site-brand__logo--white { display: none; }

.site-header__nav { display: flex; align-items: center; gap: .75rem; margin-left: auto; }

.public .site-header nav { display: block; }
.site-nav__list, .site-nav__sub { list-style: none; margin: 0; padding: 0; }
.site-nav__list { display: flex; flex-wrap: nowrap; align-items: stretch; }
.site-nav__item { position: relative; display: flex; }

.public .site-header .site-nav__link {
    display: flex;
    align-items: center;
    padding: 1.1rem .55rem;
    color: var(--pub-text);
    background: transparent;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.public .site-header a.site-nav__link:hover,
.public .site-header .site-nav__item:focus-within > .site-nav__link { color: var(--pub-accent-strong); background: transparent; }
.public .site-header .site-nav__item.active > .site-nav__link { border-bottom-color: var(--pub-accent-strong); }
.site-nav__item.has-children > .site-nav__link::after {
    content: "";
    width: .4rem; height: .4rem;
    margin: -.2rem 0 0 .45rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
}
.site-nav__heading { cursor: default; }

.site-nav__sub {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    min-width: 15rem;
    padding: .4rem 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--pub-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .12);
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity .12s, transform .12s;
}
.site-nav__item:hover > .site-nav__sub,
.site-nav__item:focus-within > .site-nav__sub,
.site-nav__item.is-open > .site-nav__sub { opacity: 1; transform: none; pointer-events: auto; }

.public .site-header .site-nav__sublink {
    position: relative;
    display: block;
    padding: .55rem 1rem;
    color: var(--pub-text);
    font-size: .92rem;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    white-space: normal;
    transition: padding-left .15s, color .15s;
}
.site-nav__sub li:last-child .site-nav__sublink { border-bottom: 0; }
/* Each row spans the panel: the item is a flex row, so without this the link (and its divider line)
   was only as wide as its text. */
.site-nav__sub .site-nav__item > .site-nav__sublink { flex: 1 1 auto; }
/* The live site's pointer: a small accent chevron slides in before the item under the mouse, the
   keyboard focus and the current page (ALPEX, October 2026). Absolutely placed, so it never takes a
   place in the flex row of an item that has its own sideways chevron (::after, third level). */
.public .site-header .site-nav__sublink::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 1rem;
    width: .35rem;
    height: .35rem;
    margin-top: -.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0;
    transition: opacity .15s;
}
.public .site-header a.site-nav__sublink:hover,
.public .site-header a.site-nav__sublink:focus-visible,
.public .site-header a.site-nav__sublink[aria-current="page"] { padding-left: 1.75rem; color: var(--pub-accent-strong); }
.public .site-header a.site-nav__sublink:hover::before,
.public .site-header a.site-nav__sublink:focus-visible::before,
.public .site-header a.site-nav__sublink[aria-current="page"]::before { opacity: 1; }
.public .site-header a.site-nav__sublink[aria-current="page"] { font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
    .public .site-header .site-nav__sublink,
    .public .site-header .site-nav__sublink::before { transition: none; }
}

/* Third level: a flyout nested inside a flyout opens sideways, clear of its own parent, with a
   sideways chevron on anything that itself has a submenu (a second-level item with third-level
   items under it). */
.public .site-header .site-nav__sub .site-nav__item.has-children > .site-nav__sublink {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.site-nav__sub .site-nav__item.has-children > .site-nav__sublink::after {
    content: "";
    width: .35rem; height: .35rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    flex: none;
}
.site-nav__sub .site-nav__sub { top: -.45rem; left: 100%; margin-left: .05rem; }

.public .site-header .site-nav__link:focus-visible,
.public .site-header .site-nav__sublink:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }

/* Language: the live site's flags, with the code beside them. */
.public .site-header .lang-switch { display: flex; gap: .15rem; }
.public .site-header .lang-switch__item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .45rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--pub-text);
    background: transparent;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-decoration: none;
}
.lang-switch__flag { display: block; width: 16px; height: 11px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
.public .site-header a.lang-switch__item:hover { color: var(--pub-accent-strong); border-color: var(--line); }
.public .site-header .lang-switch__item.is-current { border-color: var(--line-strong); }

/* Phone and small tablet: the menu moves into a <details> panel. */
.site-burger { display: none; margin-left: auto; }
.site-burger__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    list-style: none;
    cursor: pointer;
    color: var(--pub-text);
    border-radius: var(--radius);
}
.site-burger__toggle::-webkit-details-marker { display: none; }
.site-burger__icon,
.site-burger__icon::before,
.site-burger__icon::after {
    display: block;
    width: 1.5rem;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
}
.site-burger__icon { position: relative; }
.site-burger__icon::before, .site-burger__icon::after { content: ""; position: absolute; left: 0; }
.site-burger__icon::before { top: -7px; }
.site-burger__icon::after { top: 7px; }
.site-burger[open] .site-burger__icon { background: transparent; }
.site-burger[open] .site-burger__icon::before { top: 0; transform: rotate(45deg); }
.site-burger[open] .site-burger__icon::after { top: 0; transform: rotate(-45deg); }

.site-burger__panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - 7rem);
    overflow-y: auto;
    padding: .5rem var(--gutter) 1.25rem;
    background: #fff;
    border-top: 2px solid var(--pub-accent);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
}
.public .site-burger__panel .site-nav__list { flex-direction: column; }
.public .site-burger__panel .site-nav__item { flex-direction: column; }
.public .site-header .site-burger__panel .site-nav__link { padding: .7rem 0; border-bottom: 1px solid var(--line); }
.public .site-header .site-burger__panel .site-nav__item.active > .site-nav__link { color: var(--pub-accent-strong); }
.public .site-burger__panel .site-nav__item.has-children > .site-nav__link::after { display: none; }
.public .site-burger__panel .site-nav__sub {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    min-width: 0;
    padding: .2rem 0 .4rem 1rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.public .site-header .site-burger__panel .site-nav__sublink,
.public .site-header .site-burger__panel a.site-nav__sublink:hover,
.public .site-header .site-burger__panel a.site-nav__sublink:focus-visible,
.public .site-header .site-burger__panel a.site-nav__sublink[aria-current="page"] { padding: .45rem 0; border-bottom: 0; }
.public .site-header .site-burger__panel .site-nav__sublink::before { content: none; }
/* A third-level item on the phone: one step deeper still, its own sideways chevron switched off —
   the panel is a plain nested accordion, always expanded, not a flyout. */
.public .site-burger__panel .site-nav__sub .site-nav__sub { padding-left: 1rem; }
.public .site-burger__panel .site-nav__item.has-children > .site-nav__sublink::after { display: none; }
.public .site-burger__panel .lang-switch { margin-top: 1rem; }

/* The live site's vertical "Market notice" tab on the right edge of the viewport. */
.notice-tab {
    position: fixed;
    right: 0;
    top: 50%;
    z-index: 40;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    padding: 1rem .5rem;
    background: #fff;
    color: var(--pub-accent-strong);
    border: 1.5px solid var(--pub-accent-strong);
    border-right: 0;
    border-radius: var(--radius) 0 0 var(--radius);
    box-shadow: var(--shadow);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.notice-tab:hover { background: var(--pub-accent-strong); color: #fff; }

/* The notice panel (Components/NoticePanel): the same tab as a <details> summary; opened, a white
   panel on the right edge with the latest notices, the summary turned into the X in its corner. */
.notice-panel { position: fixed; right: 0; top: 50%; z-index: 40; transform: translateY(-50%); }
.notice-panel__toggle { display: block; list-style: none; cursor: pointer; }
.notice-panel__toggle::-webkit-details-marker { display: none; }
.notice-panel .notice-tab { position: static; display: block; transform: none; }
.notice-panel__toggle:hover .notice-tab { background: var(--pub-accent-strong); color: #fff; }
/* A notice this browser has not opened yet: the tab filled, as on the live site (site-nav.js). */
.notice-panel .notice-tab--unread { background: var(--pub-accent-strong); color: #fff; }
.notice-panel__close { display: none; }
.notice-panel[open] .notice-tab { display: none; }
.notice-panel[open] .notice-panel__close {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    background: var(--pub-accent-strong);
}
.notice-panel[open] .notice-panel__close::before,
.notice-panel[open] .notice-panel__close::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.1rem;
    height: 1.5px;
    background: #fff;
    transform: translate(-50%, -50%) rotate(45deg);
}
.notice-panel[open] .notice-panel__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.notice-panel__toggle:focus-visible { outline: none; }
.notice-panel__toggle:focus-visible .notice-tab,
.notice-panel__toggle:focus-visible .notice-panel__close { outline: 2px solid var(--ink); outline-offset: 2px; }
.notice-panel__body {
    width: min(23rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
    padding: 1.75rem 1.75rem 1.5rem;
    background: #fff;
    box-shadow: var(--shadow);
}
.public .notice-panel__title {
    margin: 0 0 1rem;
    color: var(--pub-text);
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    text-transform: uppercase;
}
.notice-panel__list { margin: 0; padding: 0; list-style: none; }
.notice-panel__list li { margin-bottom: 1rem; }
.notice-panel__list time { display: block; margin-bottom: .6rem; color: var(--pub-accent-strong); font-weight: 700; }
.notice-panel__list a { color: #5f6b7a; text-decoration: none; }   /* 5.5:1 on white */
.notice-panel__list a:hover { color: var(--pub-accent-strong); text-decoration: underline; }
.notice-panel__all {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--pub-accent-strong);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
}
.notice-panel__all::before {
    content: "";
    width: .7rem;
    height: .7rem;
    border: 3px solid currentColor;
    border-radius: 50%;
    background: radial-gradient(currentColor 35%, transparent 40%);
}
.notice-panel__all:hover { text-decoration: underline; }

/* Home: the header lies over the hero, transparent, white logo and white menu. The hero's top
   scrim (below) keeps that white text at 11.7:1 or better whatever the photo.
   sticky-header.js pins it (site-header--fixed: same place at the top of the page, so nothing moves)
   and, once the hero has scrolled away, turns it into the white inner-page header with the colour
   logo (site-header--solid). Without the script the header simply scrolls away with the hero. */
.is-home .site-header { position: absolute; top: 0; left: 0; right: 0; transition: background-color .2s, box-shadow .2s; }
.is-home .site-header.site-header--fixed { position: fixed; }
.is-home .site-header:not(.site-header--solid) { background: transparent; box-shadow: none; }
.is-home .site-header:not(.site-header--solid) .site-brand__logo--colour { display: none; }
.is-home .site-header:not(.site-header--solid) .site-brand__logo--white { display: block; }
.is-home .site-header:not(.site-header--solid) .site-topbar__link,
.is-home .site-header:not(.site-header--solid) .site-burger__toggle { color: #fff; }
.is-home .site-header:not(.site-header--solid) .site-topbar__link:hover { color: #fff; background: rgba(255, 255, 255, .15); }
.public.is-home .site-header:not(.site-header--solid) .site-topbar__account,
.is-home .site-header:not(.site-header--solid) .site-topbar__user { color: #fff; }
.public.is-home .site-header:not(.site-header--solid) .site-header__nav .site-nav__link,
.public.is-home .site-header:not(.site-header--solid) .site-topbar .lang-switch__item { color: #fff; }
.public.is-home .site-header:not(.site-header--solid) .site-header__nav a.site-nav__link:hover,
.public.is-home .site-header:not(.site-header--solid) .site-header__nav .site-nav__item:focus-within > .site-nav__link { color: #fff; border-bottom-color: #fff; }
.public.is-home .site-header:not(.site-header--solid) .site-header__nav .site-nav__item.active > .site-nav__link { border-bottom-color: #fff; }
.public.is-home .site-header:not(.site-header--solid) .site-topbar a.lang-switch__item:hover,
.public.is-home .site-header:not(.site-header--solid) .site-topbar .lang-switch__item.is-current { border-color: rgba(255, 255, 255, .6); }
@media (prefers-reduced-motion: reduce) { .is-home .site-header { transition: none; } }
.is-home .site-header:not(.site-header--solid) :focus-visible { outline-color: #fff; }
.is-home .site-header .site-nav__sub :focus-visible,
.is-home .site-header .site-burger__panel :focus-visible { outline-color: var(--ink); }

/* ── Public site: footer ────────────────────────────────────────────────────────────────────── */

.site-footer { background: #333333; color: #d9d9d9; font-size: .9rem; }   /* 8.95:1 */
.site-footer__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 1.5rem 2rem;
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 2.75rem var(--gutter) 2rem;
}
.site-footer__brand img { display: block; width: 10rem; height: auto; }
.public .site-footer h2 {
    margin: 0 0 .75rem;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: .35rem; }
.site-footer address { font-style: normal; line-height: 1.7; }
.site-footer a { color: #d9d9d9; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer :focus-visible { outline-color: #fff; }
.site-footer__bottom {
    max-width: var(--page-max);
    margin: 0 auto;
    padding: 1rem var(--gutter) 1.5rem;
    border-top: 1px solid #636363;
}
.site-footer__bottom p { margin: 0; font-size: .82rem; }

/* ── Public site: home page ─────────────────────────────────────────────────────────────────── */

.section-head { display: flex; align-items: baseline; gap: 1rem; margin: 2.5rem 0 1rem; }
.public .section-head h2 { margin: 0; }
.section-head a { margin-left: auto; font-size: .9rem; }

.unit { color: var(--muted); font-size: .78em; font-weight: 400; letter-spacing: 0; text-transform: none; }

/* Hero: full-bleed, about 60% of the viewport, a scroll-snap strip moved by anchor links.
   Scrim: 60% black under the header, 50% everywhere else. On the brightest possible pixel (white)
   that leaves #808080 behind the caption, 3.95:1 against white — so every caption line is large
   text (≥ 24px, or ≥ 19px bold), for which AA asks 3:1. */
.hero { position: relative; background: var(--ink); }
.hero__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}
.hero__track::-webkit-scrollbar { display: none; }
.hero__track:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.hero__slide {
    position: relative;
    margin: 0;
    min-height: max(24rem, 60vh);
    scroll-snap-align: start;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8.5rem 4.5rem 3.5rem;
    background: var(--ink);
    text-align: center;
}
.hero__slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .6) 8rem, rgba(0, 0, 0, .5) 13rem, rgba(0, 0, 0, .5) 100%);
}
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero__caption { position: relative; z-index: 2; max-width: 52rem; color: #fff; }
.hero__title {
    margin: 0;
    font-size: clamp(2.25rem, 1.2rem + 4vw, 4.375rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.hero__subtitle {
    margin: .6rem 0 0;
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.hero__caption .button { margin-top: 1.4rem; }

.hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 2.75rem;
    height: 2.75rem;
    margin-top: -1.375rem;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
}
.hero__arrow::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .7rem;
    height: .7rem;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}
.hero__arrow--prev { left: 1.25rem; }
.hero__arrow--prev::before { transform: translate(-30%, -50%) rotate(45deg); }
.hero__arrow--next { right: 1.25rem; }
.hero__arrow--next::before { transform: translate(-70%, -50%) rotate(-135deg); }
.hero__arrow:hover { background: rgba(255, 255, 255, .2); }
.hero__arrow:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* Auto-rotate controls (Task 34, hero-carousel.js). Hidden until the script confirms there is more
   than one slide and attaches its click handlers — a dot or the pause button is never shown inert
   with nothing behind it. Reduced motion keeps the dots (still useful for manual navigation) but
   drops the pause button, since there is no rotation left to pause. */
.hero__controls { display: none; }
.hero.is-enhanced .hero__controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1.1rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
}
.hero.is-reduced-motion .hero__playpause { display: none; }

.hero__dots { display: flex; gap: .55rem; }
.hero__dot {
    width: .65rem;
    height: .65rem;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.hero__dot[aria-current="true"] { background: #fff; }
.hero__dot:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.hero__playpause {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .35);
    color: #fff;
    cursor: pointer;
}
.hero__playpause:hover { background: rgba(0, 0, 0, .55); }
.hero__playpause:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.hero__playpause-icon { position: relative; width: .6rem; height: .7rem; }
.hero__playpause-icon::before,
.hero__playpause-icon::after {
    content: "";
    position: absolute;
    top: 0;
    width: .16rem;
    height: 100%;
    background: currentColor;
}
.hero__playpause-icon::before { left: 0; }
.hero__playpause-icon::after { right: 0; }
/* Paused: the icon becomes a play triangle. */
.hero__playpause[aria-pressed="true"] .hero__playpause-icon {
    width: 0;
    height: 0;
    border-top: .38rem solid transparent;
    border-bottom: .38rem solid transparent;
    border-left: .62rem solid currentColor;
    background: none;
}
.hero__playpause[aria-pressed="true"] .hero__playpause-icon::before,
.hero__playpause[aria-pressed="true"] .hero__playpause-icon::after { content: none; }

/* Market widget. The heading, the joined segment buttons and the white card sit in one grid;
   the radios are absolutely positioned, so they take no cell. */
.home-market { margin-top: .5rem; }
.segment-tabs {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem 1.5rem;
}
.public .home-market__title {
    grid-column: 1;
    margin: 0;
    color: var(--pub-accent-heading);   /* 4.04:1 — large text only */
    font-size: 2rem;
    font-weight: 500;
}
.segment-tabs__radio { position: absolute; top: 0; left: 0; opacity: 0; width: 1px; height: 1px; margin: 0; }

.segment-tabs__list {
    grid-column: 2;
    display: inline-flex;
    border: 1.5px solid var(--pub-accent-strong);
    border-radius: var(--radius);
    overflow: hidden;
}
.public .segment-tabs__tab {
    display: block;
    margin: 0;
    padding: .5rem 1.1rem;
    color: var(--pub-accent-strong);
    background: #fff;
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .03em;
    cursor: pointer;
    white-space: nowrap;
}
.public .segment-tabs__tab + .segment-tabs__tab { border-left: 1.5px solid var(--pub-accent-strong); }
.public .segment-tabs__tab:hover { background: var(--brand-tint); }

.segment-tabs__panels {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.segment-tabs__panels table { box-shadow: none; }
.segment-tabs__panel { display: none; }

.segment-tabs__radio:nth-of-type(1):checked ~ .segment-tabs__panels > .segment-tabs__panel:nth-child(1),
.segment-tabs__radio:nth-of-type(2):checked ~ .segment-tabs__panels > .segment-tabs__panel:nth-child(2),
.segment-tabs__radio:nth-of-type(3):checked ~ .segment-tabs__panels > .segment-tabs__panel:nth-child(3),
.segment-tabs__radio:nth-of-type(4):checked ~ .segment-tabs__panels > .segment-tabs__panel:nth-child(4) { display: block; }

/* The selected segment: salmon fill, white text (5.08:1). */
.segment-tabs__radio:nth-of-type(1):checked ~ .segment-tabs__list > .segment-tabs__tab:nth-child(1),
.segment-tabs__radio:nth-of-type(2):checked ~ .segment-tabs__list > .segment-tabs__tab:nth-child(2),
.segment-tabs__radio:nth-of-type(3):checked ~ .segment-tabs__list > .segment-tabs__tab:nth-child(3),
.segment-tabs__radio:nth-of-type(4):checked ~ .segment-tabs__list > .segment-tabs__tab:nth-child(4) {
    color: #fff;
    background: var(--pub-accent-strong);
}

.segment-tabs__radio:nth-of-type(1):focus-visible ~ .segment-tabs__list > .segment-tabs__tab:nth-child(1),
.segment-tabs__radio:nth-of-type(2):focus-visible ~ .segment-tabs__list > .segment-tabs__tab:nth-child(2),
.segment-tabs__radio:nth-of-type(3):focus-visible ~ .segment-tabs__list > .segment-tabs__tab:nth-child(3),
.segment-tabs__radio:nth-of-type(4):focus-visible ~ .segment-tabs__list > .segment-tabs__tab:nth-child(4) {
    outline: 3px solid var(--ink);
    outline-offset: -5px;
}

.segment-tabs__meta { margin: 0 0 .8rem; color: var(--muted); font-size: .9rem; }
.market-empty { color: var(--muted); margin: .5rem 0 1rem; }
.home-market__more { margin: .8rem 0 0; text-align: right; font-size: .9rem; }

.table-scroll { overflow-x: auto; max-height: 32rem; overflow-y: auto; border-radius: var(--radius-lg); }
.public .table-scroll:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
table.two-zone { font-size: .88rem; }
table.two-zone th, table.two-zone td { padding: .45rem .7rem; white-space: nowrap; }
table.two-zone thead { position: sticky; top: 0; z-index: 1; }
table.two-zone .two-zone__zone { text-align: center; color: var(--ink); border-left: 1px solid var(--line); }
table.two-zone tbody th { font-weight: 600; color: var(--ink-2); }
th.num { text-align: right; }

.latest-figures { margin-top: 2.5rem; }
.public .latest-figures h2 { margin: 0 0 .3rem; }
.latest-figures__day { margin: 0 0 .8rem; color: var(--muted); font-size: .9rem; }
.latest-figures tbody th { font-weight: 600; color: var(--ink-2); }

.home-feeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 0 2.5rem; }
.article-card {
    padding: 1.1rem 1.25rem;
    margin-bottom: .9rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--pub-accent);
    border-radius: var(--radius);
}
.article-card__date { color: var(--pub-accent-strong); font-size: .85rem; font-weight: 600; }
.public .article-card__title { margin: .25rem 0 0; font-size: 1.05rem; line-height: 1.4; }
.article-card__title a { color: var(--pub-text); text-decoration: none; }
.article-card__title a:hover { color: var(--pub-accent-strong); text-decoration: underline; }
.article-card__summary { margin: .4rem 0 0; color: var(--ink-2); font-size: .95rem; }

/* A card with a picture: thumbnail left, text right, and one column on a phone. */
.article-card--with-image { display: flex; gap: 1.1rem; align-items: flex-start; }
.article-card__body { min-width: 0; flex: 1; }
.article-card__media {
    display: block;
    flex: 0 0 auto;
    width: 9.5rem;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--pub-surface-2, #f6f3f1);
}
.article-card__media img { display: block; width: 100%; height: 6.5rem; object-fit: cover; }

@media (max-width: 34rem) {
    .article-card--with-image { display: block; }
    .article-card__media { width: 100%; margin-bottom: .8rem; }
    .article-card__media img { height: 10rem; }
}

/* ── Market Results page ────────────────────────────────────────────────────────────────────── */

.market-card {
    padding: 1.25rem;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
}
.market-card table { box-shadow: none; }

/* ── CMS content lists and details (news, notices, reports, pages) ────────────────────────────── */

.content-list { max-width: 48rem; }

.content-detail { max-width: 48rem; }
.content-detail__date { display: block; margin: 0 0 1rem; }
.content-detail__image { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); margin-bottom: 1.2rem; }
.content-detail__lead { font-size: 1.1rem; color: var(--ink-2); margin: 0 0 1.2rem; }
.content-detail__body { line-height: 1.75; }
.content-detail__body :first-child { margin-top: 0; }
.content-detail__attachment { margin-top: 1.4rem; }
.content-detail__attachment .muted { margin-left: .35rem; font-size: .85rem; }
.content-detail__attachment .button.primary .muted { color: #fff; }

.translation-notice { max-width: 48rem; }

/* ── Market data file lists ───────────────────────────────────────────────────────────────────── */

.filter-links { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .8rem; }
.filter-link {
    padding: .35rem .8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-2);
    font-size: .88rem;
    text-decoration: none;
}
.filter-link:hover { background: var(--surface-2); color: var(--ink); }
.filter-link.is-current { background: var(--pub-accent-strong); border-color: var(--pub-accent-strong); color: #fff; font-weight: 600; }

.doc-day { margin-bottom: 1.4rem; }
.public .doc-day h2 { margin: 1.6rem 0 .5rem; font-size: 1.15rem; }
table.doc-table { font-size: .9rem; }
table.doc-table th, table.doc-table td { padding: .5rem .8rem; }
table.doc-table td a { overflow-wrap: anywhere; }

/* ── Site search (Task 35) and the period filter (Task 33) ───────────────────────────────────── */

/* The header magnifier: a <details>, no script. The field drops in below it on the desktop bar and
   sits in the flow inside the phone panel; its entrance animation is off for reduced motion. */
.site-search { position: relative; }
.site-search__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    color: var(--pub-text);
    cursor: pointer;
    list-style: none;
}
.site-search__toggle::-webkit-details-marker { display: none; }
.site-search__toggle svg { width: 1.15rem; height: 1.15rem; }
.site-search__toggle:hover, .site-search[open] .site-search__toggle { color: var(--pub-accent-strong); }
.site-search__toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: -3px; }
.site-search__form {
    position: absolute;
    top: calc(100% + .4rem);
    right: 0;
    z-index: 60;
    display: flex;
    gap: .4rem;
    width: min(22rem, calc(100vw - 2 * var(--gutter, 1rem)));
    padding: .6rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-top: 2px solid var(--pub-accent);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .12);
}
.site-search[open] .site-search__form { animation: site-search-in .16s ease-out; }
.site-search__form input { flex: 1; min-width: 0; }
.is-home .site-header:not(.site-header--solid) .site-header__nav .site-search__toggle { color: #fff; }
.site-burger__panel .site-search { margin-top: 1rem; }
.site-burger__panel .site-search__form { position: static; width: auto; margin-top: .4rem; box-shadow: none; }

@keyframes site-search-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .site-search[open] .site-search__form { animation: none; }
}

.search-form { display: flex; gap: .5rem; max-width: 36rem; margin: 0 0 1.4rem; }
.search-form input { flex: 1; min-width: 0; }
.search-results { max-width: 48rem; margin: 0; padding: 0; list-style: none; }
.search-result { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.search-result__meta { display: flex; gap: .75rem; margin: 0; color: var(--pub-accent-strong); font-size: .85rem; font-weight: 600; }
.public .search-result__title { margin: .25rem 0 0; font-size: 1.1rem; line-height: 1.4; }
.search-result__title a { color: var(--pub-text); text-decoration: none; }
.search-result__title a:hover { color: var(--pub-accent-strong); text-decoration: underline; }
.search-result__snippet { margin: .35rem 0 0; color: var(--ink-2); font-size: .95rem; }

.period-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; margin: 0 0 1.2rem; }
.period-filter__field { display: flex; flex-direction: column; gap: .2rem; font-size: .88rem; color: var(--ink-2); }
.period-filter__clear { align-self: center; font-size: .9rem; }

.article-card__download { margin: .7rem 0 0; }
.article-card__download .button { display: inline-flex; align-items: center; gap: .4rem; }
.article-card__download .icon { width: 1rem; height: 1rem; }

/* ── Public site: narrow screens ────────────────────────────────────────────────────────────── */

/* The one-line menu needs about 80rem (the Albanian labels); narrower than that, the burger. */
@media (max-width: 79.98rem) {
    .site-header__nav, .site-topbar__lang { display: none; }
    .site-burger { display: block; }
}

@media (max-width: 45rem) {
    body.public { --gutter: 1rem; }
    .public h1 { font-size: 1.75rem; }
    .public .page-title--centred { font-size: 2rem; }
    .site-brand__logo { width: 8.5rem; }
    .site-main__inner { padding-top: 1.75rem; }
    .hero__slide { min-height: max(22rem, 60svh); padding: 7.5rem 3.75rem 3rem; }
    .hero__arrow { width: 2.25rem; height: 2.25rem; margin-top: -1.125rem; }
    .hero__arrow--prev { left: .6rem; }
    .hero__arrow--next { right: .6rem; }
    .segment-tabs { grid-template-columns: minmax(0, 1fr); }
    .segment-tabs__list { grid-column: 1; justify-self: start; }
    .public .segment-tabs__tab { padding: .5rem .6rem; font-size: .85rem; }
    .segment-tabs__panels { padding: .75rem; }
    .public .home-market__title { font-size: 1.75rem; }   /* 28px: still large text */
    .section-head { flex-wrap: wrap; }
    .home-feeds { grid-template-columns: minmax(0, 1fr); }
    .notice-tab { padding: .75rem .35rem; font-size: .7rem; }
    .site-footer__inner { padding: 2rem var(--gutter) 1.5rem; }
}

/* ── Exchange members (ToR p.26) ──────────────────────────────────────────────────────────────
   A calm four-column table: company, zone, and a dot per market. The dot uses the accent's
   AA-contrast variant (--pub-accent-strong), never the decorative salmon, because it is the only
   thing carrying the answer for a sighted reader. */
table.members th, table.members td { padding: .55rem .8rem; }
table.members tbody th { font-weight: 600; color: var(--ink); text-align: left; }
table.members .members__market { text-align: center; white-space: nowrap; }
table.members td.members__market { color: var(--muted); }
table.members .members__tick { color: var(--pub-accent-strong); font-size: 1.1rem; line-height: 1; }

/* ── Download lists (Task 21): the WordPress-style file panels on day-ahead, intraday, monthly
   reports and a CMS page's own lists. Two columns on desktop, one on a phone; each panel a light
   coral card, file names in a mono face (never the page's Quicksand), each pager button >= 44px. */

.download-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin: 1.5rem 0; }
.download-lists__column { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }

.download-panel {
    padding: 1.25rem 1.4rem;
    background: rgba(228, 126, 110, .09);   /* light coral, per the WordPress screenshots */
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.public .download-panel h2 { margin: 0 0 .4rem; font-size: 1.2rem; }
.download-panel__intro { margin: 0 0 .8rem; color: var(--ink-2); font-size: .92rem; }
.public .download-panel__year { margin: 1rem 0 .4rem; font-size: .95rem; color: var(--muted); }
.download-panel__year:first-of-type { margin-top: 0; }

.download-panel__files { list-style: none; margin: 0; padding: 0; }
.download-panel__files li { border-bottom: 1px solid var(--line); }
.download-panel__files li:last-child { border-bottom: none; }
.download-panel__files a {
    display: block;
    padding: .55rem 0;
    color: var(--pub-text);
    text-decoration: none;
    overflow-wrap: anywhere;
}
.download-panel__files a:hover { color: var(--pub-accent-strong); text-decoration: underline; }
.download-panel__files a.mono {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: .88rem;
}

.download-panel__pager {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}
.download-panel__pager a, .download-panel__pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding: 0 .6rem;
    border-radius: var(--radius);
    font-size: .88rem;
}
.download-panel__pager a { color: var(--ink-2); text-decoration: none; border: 1px solid var(--line-strong); background: var(--surface); }
.download-panel__pager a:hover { background: var(--surface-2); color: var(--ink); }
.download-panel__pager span.is-current { background: var(--pub-accent-strong); color: #fff; font-weight: 600; }
.download-panel__pager span.is-disabled { color: var(--muted); border: 1px solid var(--line); opacity: .7; }

@media (max-width: 45rem) {
    .download-lists { grid-template-columns: 1fr; }
}

/* The page builder's blocks (_PageBlocks). A Files block in list layout and a columns block reuse
   .download-panel / .download-lists above; only the table, the links row and the figure are new. */
.page-block { margin: 0 0 1.5rem; }
.page-block--table h2, .page-block--links h2 { margin: 0 0 .6rem; font-size: 1.2rem; }
.file-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.file-table th { text-align: left; font-weight: 600; color: var(--ink-2); padding: .5rem .6rem; border-bottom: 2px solid var(--line-strong); }
.file-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.file-table__label { white-space: nowrap; font-weight: 600; }
.file-table__title a { color: var(--ink); text-decoration: none; font-weight: 500; }
.file-table__title a:hover { color: var(--pub-accent-strong); text-decoration: underline; }
.file-table tbody tr:hover { background: var(--surface-2); }
.file-table__file { white-space: nowrap; }
.file-link { display: inline-flex; align-items: center; gap: .4rem; text-decoration: none; color: var(--ink-2); }
.file-link:hover { color: var(--pub-accent-strong); text-decoration: underline; }
.file-link__icon { display: inline-block; width: 1rem; height: 1.25rem; border: 1.5px solid currentColor; border-radius: 2px; position: relative; }
.file-link__icon::after { content: ""; position: absolute; left: .2rem; right: .2rem; top: .45rem; height: .15rem; background: currentColor; box-shadow: 0 .3rem 0 currentColor; }
.file-link--pdf { color: #b42318; }
.file-link--sheet { color: #1f7a3e; }
.file-link--doc { color: #1d5aa8; }
.logo-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.5rem; }
.logo-links li { flex: 0 1 11rem; }
.logo-links a { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; text-decoration: none; color: var(--ink-2); font-size: .9rem; }
.logo-links a:hover { color: var(--pub-accent-strong); }
.logo-links img { max-width: 100%; max-height: 5rem; object-fit: contain; }
.page-block--media img, .page-block--media video { max-width: 100%; height: auto; display: block; }
.page-block--media figcaption { margin-top: .4rem; font-size: .9rem; color: var(--muted); }

@media (max-width: 45rem) {
    .file-table__file, .file-table__label { white-space: normal; }
}

/* A CMS page's document list (ContentPage.LibraryCategory): title, date and a type/size pill. */
.documents { list-style: none; margin: 1.6rem 0 0; padding: 0; max-width: 48rem; border-top: 1px solid var(--line); }
.documents li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; padding: .7rem 0; border-bottom: 1px solid var(--line); }
.documents li > a { flex: 1 1 16rem; font-weight: 600; }
.documents__date { font-size: .9rem; }