:root {
    --app-main-color: #0579ff;
    --app-accent: #eda21d;
    --app-highlight-active: #d58911;
    --app-bg: #171717;
    --app-bg-elevated: #212121;
    --app-grad-light: #f7d092;
    --app-gradient-to: #efaf4e;
    --app-foreground: #ffffff;
    --app-muted: #c0c0c0;
    --app-alert-bg: #dc2626;
    --app-border: rgba(255, 255, 255, 0.12);
    --app-color-border-soft: rgba(255, 255, 255, 0.07);

    --app-display-font: 'Oswald', 'Arial Narrow', sans-serif;
    --app-body-font: 'Inter', system-ui, sans-serif;

    --app-text-h1: 56px;
    --app-size-h2: 38px;
    --app-type-h3: 24px;
    --app-fs-h4: 19px;
    --app-text-h5: 16px;
    --app-fs-body: 16px;
    --app-text-sm: 13px;
    --app-fs-micro: 11px;

    --app-weight-regular: 400;
    --app-fw-medium: 500;
    --app-weight-bold: 700;

    --app-leading-tight: 1.08;
    --app-line-normal: 1.45;
    --app-leading-loose: 1.65;
    --app-tracking-tight: -0.02em;
    --app-ls-normal: 0.01em;
    --app-ls-wide: 0.1em;

    --app-gutter-2xs: 4px;
    --app-space-xs: 8px;
    --app-gap-sm: 12px;
    --app-space-md: 16px;
    --app-space-lg: 24px;
    --app-gap-xl: 40px;
    --app-space-2xl: 64px;
    --app-gap-3xl: 96px;

    --app-shell-width: 1120px;
    --app-measure: 720px;
    --app-inset-desktop: 24px;
    --app-gutter-mobile: 16px;

    --app-radius-xs: 4px;
    --app-corner-sm: 8px;
    --app-rounded-md: 12px;
    --app-radius-lg: 20px;
    --app-round-full: 9999px;
    --app-radius-circle: 50%;

    --app-shade-sm: 0 2px 6px rgba(0, 0, 0, 0.3);
    --app-depth-md: 0 6px 18px rgba(0, 0, 0, 0.38);
    --app-depth-lg: 0 12px 32px rgba(0, 0, 0, 0.45);

    --app-speed-fast: 90ms;
    --app-duration-base: 140ms;
    --app-ease: cubic-bezier(0.4, 0, 0.4, 1);

    --app-section-pad: 48px;
}

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

html,
body {
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--app-bg);
    color: var(--app-foreground);
    font-family: var(--app-body-font);
    font-size: var(--app-fs-body);
    line-height: var(--app-line-normal);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    font-family: var(--app-display-font);
    line-height: var(--app-leading-tight);
}

p {
    margin: 0;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ---- a11y ---- */
.skip-link {
    position: fixed;
    top: -200px;
    left: var(--app-space-md);
    z-index: 200;
    padding: var(--app-space-xs) var(--app-space-md);
    background: var(--app-accent);
    color: var(--app-bg);
    border-radius: var(--app-corner-sm);
    font-weight: var(--app-weight-bold);
}

.skip-link:not(:focus) {
    top: -200px !important;
}

.skip-link:focus {
    top: var(--app-space-md);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ---- shared inner width (single section grid) ---- */
.banner-inner,
.transom-inner,
.threshold-inner,
.mantle-inner,
.sconce-inner,
.lobby-inner,
.canopy-inner,
.cornice-inner,
.parapet-inner,
.tribune-inner,
.turret-inner,
.alcove-inner,
.crest-inner,
.spandrel-inner,
.court-inner,
.strip-inner {
    width: 100%;
    max-width: calc(var(--app-shell-width) + 2 * var(--app-inset-desktop));
    margin-inline: auto;
    padding-inline: var(--app-inset-desktop);
}

.main {
    display: block;
}

/* section vertical rhythm */
.transom,
.threshold,
.quatrefoil,
.mantle,
.sconce,
.lobby,
.canopy,
.cornice,
.turret,
.alcove,
.crest,
.spandrel {
    padding-block: var(--app-section-pad);
}

/* =========== HEADER  HEAD-13 =========== */
.banner {
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-color-border-soft);
}

.banner-inner {
    display: flex;
    align-items: center;
    gap: var(--app-space-lg);
    padding-block: var(--app-space-md);
}

.banner-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.banner-logo img {
    height: 52px;
    width: auto;
    flex-shrink: 0;
}

.banner-nav {
    margin-left: auto;
}

.banner-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--app-space-md);
}

.banner-item {
    display: inline-flex;
}

.banner-drawer-item {
    display: block;
}

.banner-link {
    font-family: var(--app-display-font);
    font-weight: var(--app-fw-medium);
    font-size: var(--app-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-muted);
    white-space: nowrap;
    padding-block: var(--app-gutter-2xs);
    transition: color var(--app-speed-fast) var(--app-ease);
}

.banner-link:hover,
.banner-link--active {
    color: var(--app-accent);
}

.banner-auth {
    flex-shrink: 0;
    white-space: nowrap;
    background: var(--app-accent);
    color: var(--app-bg);
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    padding: 10px var(--app-space-lg);
    border-radius: var(--app-rounded-md);
    transition: background var(--app-speed-fast) var(--app-ease), color var(--app-speed-fast) var(--app-ease);
}

.banner-auth:hover {
    background: var(--app-highlight-active);
    color: var(--app-bg);
}

.banner-toggle {
    display: none;
    margin-left: auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: 1px solid var(--app-border);
    border-radius: var(--app-corner-sm);
    cursor: pointer;
}

.banner-toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--app-foreground);
    border-radius: 2px;
}

.banner-drawer {
    display: none;
    border-top: 1px solid var(--app-color-border-soft);
    background: var(--app-bg);
}

.banner-drawer.is-open {
    display: block;
}

.banner-drawer-list {
    display: flex;
    flex-direction: column;
    padding: var(--app-gap-sm) var(--app-gutter-mobile);
}

.banner-drawer-link {
    display: block;
    padding: var(--app-gap-sm) 0;
    font-family: var(--app-display-font);
    font-size: var(--app-text-h5);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-foreground);
    border-bottom: 1px solid var(--app-color-border-soft);
}

.banner-drawer-link:hover {
    color: var(--app-accent);
}

.banner-drawer-link--cta {
    color: var(--app-accent);
    border-bottom: none;
}

/* =========== HERO  HERO-12 =========== */
.transom {
    background: var(--app-bg);
}

.transom-inner {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-2xl);
}

.transom-text {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
}

.transom-kicker {
    font-family: var(--app-body-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-accent);
}

.transom-title {
    font-size: var(--app-text-h1);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-tracking-tight);
    text-transform: uppercase;
    color: var(--app-foreground);
    max-width: 20ch;
}

.transom-lead {
    font-size: var(--app-text-h5);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
    max-width: 620px;
}

.transom-cta {
    align-self: flex-start;
    margin-top: var(--app-space-xs);
    background: var(--app-accent);
    color: var(--app-bg);
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-h5);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    padding: var(--app-space-md) var(--app-gap-xl);
    border-radius: var(--app-rounded-md);
    transition: background var(--app-speed-fast) var(--app-ease), color var(--app-speed-fast) var(--app-ease);
}

.transom-cta:hover {
    background: var(--app-highlight-active);
    color: var(--app-bg);
}

.transom-figure {
    margin: 0;
    width: 100%;
    border-radius: var(--app-radius-lg);
    overflow: hidden;
    box-shadow: var(--app-depth-lg);
}

.transom-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* =========== PAGE HEADER  PHEAD-01 =========== */
.threshold {
    border-bottom: 1px solid var(--app-color-border-soft);
}

.threshold-inner {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
}

.threshold-eyebrow {
    font-family: var(--app-body-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-accent);
}

.threshold-title {
    font-size: var(--app-text-h1);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-tracking-tight);
    text-transform: uppercase;
    color: var(--app-foreground);
    max-width: 22ch;
}

.threshold-divider {
    width: 64px;
    height: 3px;
    background: var(--app-accent);
    border-radius: 2px;
}

.threshold-description {
    font-size: var(--app-text-h5);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
    max-width: 720px;
}

/* =========== PROSE  PROSE-01 =========== */
.quatrefoil-prose {
    max-width: var(--app-measure);
    margin-inline: auto;
    padding-inline: var(--app-inset-desktop);
}

.quatrefoil-title {
    font-size: var(--app-size-h2);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-tracking-tight);
    color: var(--app-foreground);
    margin-block-start: var(--app-space-2xl);
    margin-block-end: var(--app-space-md);
}

.quatrefoil-prose > .quatrefoil-title:first-child {
    margin-block-start: 0;
}

.quatrefoil-para {
    font-size: var(--app-fs-body);
    line-height: var(--app-leading-loose);
    color: var(--app-foreground);
    margin-block-end: var(--app-space-md);
}

.quatrefoil-list {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
    margin-block-end: var(--app-space-md);
    padding-left: var(--app-space-lg);
}

.quatrefoil-listitem {
    position: relative;
    font-size: var(--app-fs-body);
    line-height: var(--app-leading-loose);
    color: var(--app-foreground);
    list-style: disc;
}

.quatrefoil-prose a {
    color: var(--app-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--app-speed-fast) var(--app-ease);
}

.quatrefoil-prose a:hover {
    color: var(--app-highlight-active);
}

.quatrefoil-prose strong {
    font-weight: var(--app-weight-bold);
    color: var(--app-foreground);
}

/* =========== ITEMS GRID  GRID-11 =========== */
.mantle-heading,
.sconce-heading,
.lobby-heading {
    font-size: var(--app-size-h2);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-tracking-tight);
    text-transform: uppercase;
    color: var(--app-foreground);
    margin-block-end: var(--app-gap-xl);
}

.mantle-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--app-space-lg);
}

.mantle-item {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
    padding: var(--app-space-lg);
    background: var(--app-bg-elevated);
    border: 1px solid var(--app-color-border-soft);
    border-radius: var(--app-radius-lg);
    transition: border-color var(--app-speed-fast) var(--app-ease);
}

.mantle-item:hover {
    border-color: var(--app-accent);
}

.mantle-item--large {
    grid-column: span 2;
}

.mantle-item-title {
    font-size: var(--app-fs-h4);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-ls-normal);
    color: var(--app-foreground);
}

.mantle-item-text {
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
}

.mantle--figure {
    padding-block: var(--app-space-md);
}

.figure {
    margin: 0;
    border-radius: var(--app-radius-lg);
    overflow: hidden;
    box-shadow: var(--app-depth-md);
}

.figure-img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.figure-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--app-space-lg);
}

.figure--detail,
.figure--process {
    height: 100%;
}

.figure--context {
    max-height: 460px;
}

.figure--context .figure-img {
    max-height: 460px;
    object-fit: cover;
}

/* =========== REVIEWS  REV-01 =========== */
.sconce-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--app-space-lg);
}

.sconce-item {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
    padding: var(--app-space-lg);
    background: var(--app-bg-elevated);
    border: 1px solid var(--app-color-border-soft);
    border-radius: var(--app-rounded-md);
}

.sconce-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-gap-sm);
}

.sconce-author {
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-fs-body);
    color: var(--app-foreground);
}

.sconce-stars {
    display: inline-flex;
    gap: 1px;
    font-size: var(--app-text-sm);
    letter-spacing: 1px;
    color: var(--app-muted);
}

.sconce-star {
    color: var(--app-muted);
}

.sconce-star--full,
.sconce-star--half {
    color: var(--app-accent);
}

.sconce-star--half {
    background: linear-gradient(90deg, var(--app-accent) 50%, rgba(255, 255, 255, 0.2) 50%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sconce-text {
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
}

/* =========== FAQ  FAQ-09 =========== */
.lobby-list {
    display: flex;
    flex-direction: column;
}

.lobby-item {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
    padding-block: var(--app-space-lg);
    border-bottom: 1px solid var(--app-color-border-soft);
}

.lobby-prefix {
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    color: var(--app-accent);
    margin-right: var(--app-gutter-2xs);
}

.lobby-question {
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-fs-h4);
    color: var(--app-foreground);
}

.lobby-answer {
    font-size: var(--app-fs-body);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
}

/* =========== CTA  CTA-03 =========== */
.canopy-inner {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    border-radius: var(--app-radius-lg);
    overflow: hidden;
    border: 1px solid var(--app-color-border-soft);
}

.canopy-content {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
    padding: var(--app-space-2xl);
    background: var(--app-bg-elevated);
}

.canopy-title {
    font-size: var(--app-size-h2);
    font-weight: var(--app-weight-bold);
    letter-spacing: var(--app-tracking-tight);
    text-transform: uppercase;
    color: var(--app-foreground);
}

.canopy-text {
    font-size: var(--app-fs-body);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
}

.canopy-btn {
    align-self: flex-start;
    margin-top: var(--app-space-xs);
    background: var(--app-accent);
    color: var(--app-bg);
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-h5);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    padding: var(--app-space-md) var(--app-gap-xl);
    border-radius: var(--app-rounded-md);
    transition: background var(--app-speed-fast) var(--app-ease), color var(--app-speed-fast) var(--app-ease);
}

.canopy-btn:hover {
    background: var(--app-highlight-active);
    color: var(--app-bg);
}

.canopy-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 240px;
    background-color: var(--app-highlight-active);
    background-image: linear-gradient(135deg, var(--app-gradient-to), var(--app-highlight-active));
}

.canopy-mark {
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: 64px;
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    background-color: var(--app-highlight-active);
    color: #171717;
}

/* =========== BREADCRUMBS  BREAD-06 =========== */
.parapet {
    background: var(--app-bg-elevated);
    border-bottom: 1px solid var(--app-color-border-soft);
}

.parapet-inner {
    padding-block: var(--app-gap-sm);
}

.parapet-list {
    display: flex;
    align-items: center;
    gap: var(--app-space-xs);
    font-size: var(--app-text-sm);
}

.parapet-item {
    display: inline-flex;
    align-items: center;
}

.parapet-link {
    color: var(--app-muted);
    transition: color var(--app-speed-fast) var(--app-ease);
}

.parapet-link:hover {
    color: var(--app-accent);
}

.parapet-sep {
    color: rgba(255, 255, 255, 0.4);
}

.parapet-current {
    color: var(--app-foreground);
    font-weight: var(--app-fw-medium);
}

/* =========== INLINE CTA  INLINE-CTA-06 =========== */
.tribune {
    padding-block: var(--app-space-lg);
}

.tribune-box {
    max-width: 640px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
    align-items: center;
    text-align: center;
    padding: var(--app-space-lg);
    background: var(--app-bg-elevated);
    border: 1px solid var(--app-color-border-soft);
    border-radius: var(--app-rounded-md);
}

.tribune-text {
    font-size: var(--app-fs-body);
    color: var(--app-muted);
}

.tribune-actions {
    display: flex;
    gap: var(--app-gap-sm);
    justify-content: center;
    flex-wrap: wrap;
}

.tribune-btn {
    padding: var(--app-gap-sm) var(--app-gap-xl);
    font-family: var(--app-body-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    border-radius: var(--app-rounded-md);
    transition: background var(--app-speed-fast) var(--app-ease), color var(--app-speed-fast) var(--app-ease), border-color var(--app-speed-fast) var(--app-ease);
}

.tribune-btn--app-primary {
    background: var(--app-accent);
    color: var(--app-bg);
}

.tribune-btn--app-primary:hover {
    background: var(--app-highlight-active);
    color: var(--app-bg);
}

.tribune-btn--app-ghost {
    background: transparent;
    border: 1px solid var(--app-border);
    color: var(--app-foreground);
}

.tribune-btn--app-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--app-foreground);
    color: var(--app-foreground);
}

/* =========== TABLE  TABLE-05 =========== */
.turret-scroll {
    overflow-x: auto;
    border: 1px solid var(--app-color-border-soft);
    border-radius: var(--app-rounded-md);
}

.turret-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
}

.turret-thead {
    background: var(--app-bg-elevated);
}

.turret-th {
    padding: var(--app-gap-sm) var(--app-space-md);
    text-align: left;
    font-family: var(--app-body-font);
    font-size: var(--app-fs-micro);
    font-weight: var(--app-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-foreground);
}

.turret-th--row {
    color: var(--app-foreground);
    font-weight: var(--app-fw-medium);
    text-transform: none;
    letter-spacing: normal;
    font-size: var(--app-text-sm);
}

.turret-td {
    padding: var(--app-gap-sm) var(--app-space-md);
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

.turret-tr {
    border-bottom: 1px solid var(--app-color-border-soft);
}

.turret-tbody .turret-tr:last-child {
    border-bottom: none;
}

/* =========== LEGAL  LEGAL-06 =========== */
.alcove-intro,
.alcove-updated,
.alcove-section,
.alcove-disclaimer {
    max-width: var(--app-measure);
}

.alcove-intro {
    font-size: var(--app-fs-body);
    line-height: var(--app-line-normal);
    color: var(--app-foreground);
    margin-block-end: var(--app-space-md);
}

.alcove-updated {
    font-size: var(--app-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-muted);
    margin-block-end: var(--app-gap-xl);
}

.alcove-section {
    margin-block-end: var(--app-space-lg);
}

.alcove-subheading {
    font-size: var(--app-fs-h4);
    font-weight: var(--app-weight-bold);
    color: var(--app-foreground);
    margin-block-end: var(--app-gap-sm);
}

.alcove-para {
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
    margin-block-end: var(--app-gap-sm);
}

.alcove-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
    padding-left: var(--app-space-lg);
}

.alcove-contact {
    font-size: var(--app-text-sm);
    line-height: var(--app-line-normal);
    color: var(--app-muted);
    list-style: disc;
}

.alcove-disclaimer {
    margin-block-start: var(--app-space-lg);
    padding: var(--app-space-md);
    background: rgba(220, 38, 38, 0.1);
    border-left: 3px solid var(--app-alert-bg);
    border-radius: var(--app-radius-xs);
    font-size: var(--app-text-sm);
    line-height: var(--app-line-normal);
    color: var(--app-foreground);
}

/* =========== FORM  FORM-02 =========== */
.crest-inner {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: var(--app-gap-xl);
}

.crest-side {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
    padding: var(--app-space-lg);
    background: rgba(5, 121, 255, 0.08);
    border-radius: var(--app-rounded-md);
    align-self: start;
}

.crest-side-title {
    font-size: var(--app-type-h3);
    font-weight: var(--app-weight-bold);
    text-transform: uppercase;
    color: var(--app-foreground);
}

.crest-intro {
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
}

.crest-channel {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

.crest-mail {
    color: var(--app-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.crest-mail:hover {
    color: var(--app-highlight-active);
}

.crest-form {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
    padding: var(--app-space-lg);
    background: var(--app-bg-elevated);
    border-radius: var(--app-rounded-md);
    box-shadow: var(--app-shade-sm);
}

.crest-field {
    display: flex;
    flex-direction: column;
    gap: var(--app-gutter-2xs);
}

.crest-label {
    font-family: var(--app-body-font);
    font-weight: var(--app-fw-medium);
    font-size: var(--app-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-foreground);
}

.crest-input {
    font-family: var(--app-body-font);
    font-size: var(--app-fs-body);
    color: var(--app-foreground);
    background: var(--app-bg);
    border: 1px solid var(--app-border);
    border-radius: var(--app-rounded-md);
    padding: var(--app-gap-sm) var(--app-space-md);
    min-height: 48px;
    transition: border-color var(--app-speed-fast) var(--app-ease);
}

.crest-input:focus {
    outline: none;
    border-color: var(--app-accent);
}

.crest-textarea {
    min-height: 130px;
    resize: vertical;
}

.crest-submit {
    align-self: flex-start;
    background: var(--app-accent);
    color: var(--app-bg);
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-h5);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    padding: var(--app-gap-sm) var(--app-gap-xl);
    min-height: 48px;
    border: none;
    border-radius: var(--app-rounded-md);
    cursor: pointer;
    transition: background var(--app-speed-fast) var(--app-ease), color var(--app-speed-fast) var(--app-ease);
}

.crest-submit:hover {
    background: var(--app-highlight-active);
    color: var(--app-bg);
}

.crest-success {
    padding: var(--app-space-md);
    background: rgba(34, 197, 94, 0.12);
    border: 1px solid rgba(34, 197, 94, 0.4);
    border-radius: var(--app-rounded-md);
    font-size: var(--app-text-sm);
    color: var(--app-foreground);
}

/* =========== AUTHOR CARD  AUTH-08 =========== */
.spandrel-inner {
    display: flex;
    gap: var(--app-gap-xl);
    align-items: flex-start;
}

.spandrel-portrait {
    width: 140px;
    height: 140px;
    flex-shrink: 0;
    border-radius: var(--app-radius-circle);
    object-fit: cover;
    object-position: center 20%;
    border: 3px solid var(--app-bg-elevated);
}

.spandrel-body {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
}

.spandrel-name {
    font-size: var(--app-size-h2);
    font-weight: var(--app-weight-bold);
    color: var(--app-foreground);
}

.spandrel-role {
    font-size: var(--app-text-sm);
    font-weight: var(--app-fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-accent);
}

.spandrel-bio {
    font-size: var(--app-fs-body);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
    max-width: 640px;
}

.spandrel-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: var(--app-space-xs);
    margin-top: var(--app-gutter-2xs);
}

.spandrel-tag {
    padding: var(--app-gutter-2xs) var(--app-gap-sm);
    background: var(--app-main-color);
    color: var(--app-foreground);
    border-radius: var(--app-round-full);
    font-size: var(--app-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
}

/* =========== BYLINE  BYLINE-04 =========== */
.cornice-quote {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--app-space-md);
    padding: var(--app-gap-xl);
    background: var(--app-bg-elevated);
    border-radius: var(--app-radius-lg);
    border-left: 3px solid var(--app-accent);
}

.cornice-bio {
    font-family: var(--app-display-font);
    font-size: var(--app-fs-h4);
    font-style: italic;
    line-height: var(--app-line-normal);
    color: var(--app-foreground);
}

.cornice-attribution {
    display: flex;
    align-items: center;
    gap: var(--app-gap-sm);
}

.cornice-portrait {
    width: 48px;
    height: 48px;
    border-radius: var(--app-radius-circle);
    object-fit: cover;
    object-position: center 20%;
    border: 2px solid var(--app-bg);
}

.cornice-meta {
    display: flex;
    flex-direction: column;
}

.cornice-name {
    font-style: normal;
}

.cornice-namelink {
    font-weight: var(--app-weight-bold);
    color: var(--app-accent);
    transition: color var(--app-speed-fast) var(--app-ease);
}

.cornice-namelink:hover {
    color: var(--app-highlight-active);
}

.cornice-role {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

/* =========== 404  ERR-01 =========== */
.court {
    padding-block: var(--app-gap-3xl);
}

.court-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--app-space-lg);
}

.court-code {
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: clamp(80px, 18vw, 180px);
    line-height: 1;
    color: var(--app-accent);
}

.court-title {
    font-size: var(--app-size-h2);
    font-weight: var(--app-weight-bold);
    color: var(--app-foreground);
    max-width: 18ch;
}

.court-text {
    font-size: var(--app-text-h5);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
    max-width: 560px;
}

.court-btn {
    background: var(--app-accent);
    color: var(--app-bg);
    font-family: var(--app-display-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-h5);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    padding: var(--app-space-md) var(--app-gap-xl);
    border-radius: var(--app-rounded-md);
    transition: background var(--app-speed-fast) var(--app-ease), color var(--app-speed-fast) var(--app-ease);
}

.court-btn:hover {
    background: var(--app-highlight-active);
    color: var(--app-bg);
}

/* =========== FOOTER  FOOT-04 =========== */
.strip {
    background: var(--app-bg-elevated);
    border-top: 1px solid var(--app-color-border-soft);
    padding-block: var(--app-gap-xl);
}

.strip-inner {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    gap: var(--app-gap-xl);
}

.strip-brand {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
}

.strip-col {
    display: block;
}

.strip-navitem {
    display: block;
}

.strip-logo {
    height: 44px;
    width: auto;
}

.strip-tagline {
    font-size: var(--app-text-sm);
    line-height: var(--app-leading-loose);
    color: var(--app-muted);
    max-width: 320px;
}

.strip-heading {
    font-family: var(--app-body-font);
    font-size: var(--app-text-sm);
    font-weight: var(--app-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-foreground);
    margin-block-end: var(--app-space-md);
}

.strip-nav {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
}

.strip-navlink {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
    transition: color var(--app-speed-fast) var(--app-ease);
}

.strip-navlink:hover {
    color: var(--app-accent);
}

.strip-base {
    max-width: calc(var(--app-shell-width) + 2 * var(--app-inset-desktop));
    margin: var(--app-gap-xl) auto 0;
    padding-inline: var(--app-inset-desktop);
    padding-top: var(--app-space-lg);
    border-top: 1px solid var(--app-color-border-soft);
    display: flex;
    flex-direction: column;
    gap: var(--app-gutter-2xs);
}

.strip-copyright {
    font-size: var(--app-text-sm);
    color: var(--app-muted);
}

.strip-legal {
    font-size: var(--app-fs-micro);
    color: var(--app-muted);
}

/* =========== COOKIE  COOK-03 =========== */
.beacon {
    display: none;
    position: fixed;
    inset-block-end: var(--app-space-md);
    inset-inline-end: var(--app-space-md);
    z-index: 120;
    width: 360px;
    max-width: calc(100vw - 2 * var(--app-space-md));
}

.beacon.is-visible {
    display: block;
}

.beacon-body {
    display: flex;
    flex-direction: column;
    gap: var(--app-gap-sm);
    padding: var(--app-space-lg);
    background: var(--app-bg-elevated);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg);
    box-shadow: var(--app-depth-lg);
}

.beacon-title {
    font-family: var(--app-display-font);
    font-size: var(--app-text-h5);
    font-weight: var(--app-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--app-ls-wide);
    color: var(--app-accent);
    margin: 0;
}

.beacon-message {
    font-size: var(--app-text-sm);
    line-height: var(--app-line-normal);
    color: var(--app-muted);
}

.beacon-actions {
    display: flex;
    gap: var(--app-gap-sm);
}

.beacon-button {
    flex: 1;
    min-height: 40px;
    font-family: var(--app-body-font);
    font-weight: var(--app-weight-bold);
    font-size: var(--app-text-sm);
    border-radius: var(--app-rounded-md);
    cursor: pointer;
    transition: background var(--app-speed-fast) var(--app-ease), color var(--app-speed-fast) var(--app-ease);
}

.beacon-button--app-accept {
    background: var(--app-accent);
    color: var(--app-bg);
    border: 1px solid var(--app-accent);
}

.beacon-button--app-accept:hover {
    background: var(--app-highlight-active);
    color: var(--app-bg);
}

.beacon-button--app-decline {
    background: transparent;
    color: var(--app-foreground);
    border: 1px solid var(--app-border);
}

.beacon-button--app-decline:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--app-foreground);
}

/* =========== RESPONSIVE =========== */
@media (max-width: 1000px) {
    .mantle-list,
    .sconce-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .mantle-item--large {
        grid-column: span 2;
    }

    .canopy-inner {
        grid-template-columns: 1fr;
    }

    .crest-inner {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    :root {
        --app-text-h1: 34px;
        --app-size-h2: 26px;
        --app-type-h3: 20px;
        --app-fs-h4: 17px;
        --app-section-pad: 40px;
        --app-inset-desktop: 16px;
    }

    .banner-nav,
    .banner-auth {
        display: none;
    }

    .banner-toggle {
        display: flex;
    }

    .banner-inner {
        gap: var(--app-space-md);
    }

    .banner-logo img {
        height: 44px;
    }

    .mantle-list,
    .sconce-list {
        grid-template-columns: 1fr;
    }

    .mantle-item--large {
        grid-column: auto;
    }

    .transom-title,
    .threshold-title {
        max-width: none;
    }

    .canopy-content {
        padding: var(--app-gap-xl);
    }

    .spandrel-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .strip-inner {
        grid-template-columns: 1fr;
        gap: var(--app-space-lg);
    }

    .beacon {
        inset-inline: var(--app-space-md);
        width: auto;
    }
}

@media (max-width: 720px) {
    .beacon,
    .beacon-body {
        padding: 12px 14px !important;
        gap: 8px !important;
    }

    .beacon-title {
        display: none !important;
    }

    .beacon-button {
        min-height: 36px !important;
        font-size: 12px !important;
    }

    .tribune-actions {
        flex-direction: column;
    }

    .tribune-btn {
        width: 100%;
        text-align: center;
    }
}

/* fix: навигация не помещалась — бургер до 1099px */
@media (max-width: 1099px) {
  .banner-nav,
  .banner-list,
  .banner-link,
  .banner-auth { display: none !important; }
  .banner-toggle { display: flex !important; }
}