/*
 * Terra Rossa portal styleguide bridge — canonical source.
 *
 * Mirrors the Astro marketing site's design system from `/reference/tokens.css`
 * and `/reference/global.css`. This file is the source of truth for client-
 * facing portal CSS. Because Hostinger Node/npm availability is not yet
 * confirmed (see OWNER-LAUNCH-CHECKLIST → Hostinger production) and Vite
 * `node_modules` is not currently installed, this file is manually mirrored
 * to `public/css/terra.css` and served via `asset('css/terra.css')`.
 *
 * When the Vite pipeline is wired in Milestone 10 (deploy rehearsal), add
 * this file to `vite.config.js` inputs and switch layouts to `@vite`.
 *
 * Palette: Midnight Black / Terra Brown / Copper Gold / Warm Ivory / Stone.
 * Typography: Montserrat display + Helvetica Neue body (matches Astro spec).
 * No pill radii, no purple gradients, no glassmorphism, no AI-template look.
 */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&display=swap');

:root {
    /* Terra Rossa brand palette — mirrored from /reference/tokens.css */
    --tr-midnight-black: #0B0A09;
    --tr-terra-brown: #1B130F;
    --tr-terra-brown-elevated: #241A15;
    --tr-copper-gold: #B8874E;
    --tr-copper-gold-deep: #8C6537;
    --tr-copper-gold-soft: rgba(184, 135, 78, 0.14);
    --tr-warm-ivory: #F3EEE8;
    --tr-warm-ivory-dim: #D8D1C8;
    --tr-stone-gray: #8F8780;
    --tr-stone-gray-subtle: #6C6560;

    /* BrandGuide 5.3 aliases */
    --midnight: #0B0A09;
    --terra: #1B130F;
    --copper: #B8874E;
    --ivory: #F3EEE8;
    --stone: #8F8780;
    --ink: #2B211A;
    --ink-soft: #5B5049;
    --line-dark: rgba(184, 135, 78, 0.28);
    --line-light: rgba(143, 135, 128, 0.28);

    /* Semantic surfaces — the portal is a light editorial reading surface on
       ivory, so applicant-facing routes default to the Warm Ivory surface with
       midnight text. Reserve the dark surface for hero moments or dashboards. */
    --color-bg: var(--tr-warm-ivory);
    --color-surface: #FFFFFF;
    --color-surface-alt: #EAE3D8;
    --color-surface-elevated: #FFFFFF;
    --color-surface-inverse: var(--tr-midnight-black);

    --color-text: var(--tr-midnight-black);
    --color-text-strong: var(--tr-midnight-black);
    --color-text-muted: #4F4944;
    --color-text-subtle: var(--tr-stone-gray);
    --color-text-inverse: var(--tr-warm-ivory);

    --color-border: rgba(11, 10, 9, 0.10);
    --color-border-strong: rgba(11, 10, 9, 0.22);

    --color-accent: var(--tr-copper-gold-deep); /* contrast on ivory */
    --color-accent-hover: var(--tr-midnight-black);
    --color-accent-soft: var(--tr-copper-gold-soft);
    --color-focus-ring: var(--tr-copper-gold-deep);

    /* Status — muted, not saccharine. Values chosen to sit on ivory. */
    --color-success: #3F6B3A;
    --color-success-soft: #E4EDDE;
    --color-warning: #8C6537;
    --color-warning-soft: rgba(184, 135, 78, 0.14);
    --color-danger: #8B2E20;
    --color-danger-soft: #F0DEDA;
    --color-info: #34495E;
    --color-info-soft: #E2E7EC;

    /* Typography */
    --font-display: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-body: "Helvetica Neue", Helvetica, Arial, sans-serif;

    --fs-body: clamp(0.9375rem, 0.86rem + 0.28vw, 1rem);
    --fs-body-sm: clamp(0.875rem, 0.83rem + 0.15vw, 0.9375rem);
    --fs-body-lg: clamp(1rem, 0.9rem + 0.5vw, 1.15rem);
    --fs-lead: clamp(1.05rem, 0.95rem + 0.6vw, 1.35rem);
    --fs-eyebrow: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);
    --fs-heading-sm: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --fs-heading-md: clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    --fs-heading-lg: clamp(2rem, 1.6rem + 2vw, 3rem);
    --fs-heading-xl: clamp(2.5rem, 1.9rem + 3vw, 4.25rem);

    --lh-body: 1.65;
    --lh-heading: 1.1;
    --ls-eyebrow: 0.22em;
    --ls-heading: -0.01em;

    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* Spacing / layout */
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 2rem;
    --space-8: 2.5rem;
    --space-9: 3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    --section-py: clamp(4rem, 3rem + 4vw, 7rem);
    --section-py-sm: clamp(2.5rem, 2rem + 2vw, 4rem);

    /* Rectangular — no pill or fully rounded shapes per DESIGN-SPEC.md */
    --radius: 2px;

    --shadow-soft: 0 20px 60px -20px rgba(11, 10, 9, 0.18);
    --shadow-sm: 0 2px 6px rgba(11, 10, 9, 0.06);

    --transition-fast: 160ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 260ms cubic-bezier(0.4, 0, 0.2, 1);

    /* NOTE: --content-max-width, --wide-max-width, --medium-max-width are
       overridden further down at the ORX-2 block (search "widen portal
       containers per owner directive"). The final values are 1600/1280/900.
       These defaults are kept for downward compat with any external
       @import consumers; do NOT rely on them as the source of truth. */
    --content-max-width: 1360px;
    --narrow-max-width: 560px;
    --medium-max-width: 720px;
    --wide-max-width: 1040px;
    --page-padding-x: 40px;
    --page-padding-x-mobile: 24px;

    --nav-height: 84px;
}

@media (max-width: 720px) {
    :root {
        --page-padding-x: var(--page-padding-x-mobile);
        --nav-height: 72px;
    }
}

/* -------------------------------------------------------------------------- */
/* Reset + 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.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    font-weight: var(--fw-regular);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-5);
}
h1 { font-size: var(--fs-heading-lg); font-weight: var(--fw-medium); }
h2 { font-size: var(--fs-heading-md); }
h3 { font-size: var(--fs-heading-sm); }

p { margin: 0 0 var(--space-5); }
ul, ol { padding: 0 0 0 1.2rem; margin: 0 0 var(--space-5); }

a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-hover); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
    border-radius: 2px;
}

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

::selection {
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
}

/* -------------------------------------------------------------------------- */
/* Skip link                                                                   */
/* -------------------------------------------------------------------------- */

.tr-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem;
}
.tr-skip:focus { left: var(--space-4); top: var(--space-4); color: var(--tr-midnight-black); }

/* -------------------------------------------------------------------------- */
/* Shell — dark editorial nav over ivory reading body                          */
/* -------------------------------------------------------------------------- */

.tr-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

.tr-header {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory);
    border-bottom: 1px solid var(--line-dark);
    padding: var(--space-5) 0;
    position: relative;
    z-index: 40;
}
/* Static copper keyline under nav — replaces scroll-linked hairline.
   Chosen over a JS-driven progress bar because the portal is a short-scroll
   editorial surface, not a long marketing page. Keyline is decorative but
   reinforces the copper brand rhythm on every route. */
.tr-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--tr-copper-gold) 30%,
        var(--tr-copper-gold) 70%,
        transparent 100%
    );
    opacity: 0.55;
    pointer-events: none;
}
.tr-header__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--page-padding-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: var(--nav-height);
}
.tr-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--tr-warm-ivory);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.tr-brand:hover { color: var(--tr-copper-gold); }
.tr-brand__logo {
    height: 36px;
    width: auto;
}
.tr-brand__sub {
    display: none;
    color: var(--tr-stone-gray);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
}
@media (min-width: 640px) { .tr-brand__sub { display: inline; } }

.tr-header__meta {
    color: var(--tr-warm-ivory-dim);
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-align: right;
}
.tr-header__meta strong {
    display: block;
    color: var(--tr-copper-gold);
    font-family: var(--font-display);
    font-weight: var(--fw-medium);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
    margin-bottom: 2px;
}

.tr-main {
    flex: 1;
    padding: var(--section-py-sm) 0 var(--section-py);
}
.tr-main > .tr-container,
.tr-main > .tr-narrow,
.tr-main > .tr-medium,
.tr-main > .tr-wide {
    padding-left: var(--page-padding-x);
    padding-right: var(--page-padding-x);
}

/* Full midnight footer — logo, driver line, links, copper micro-rule.
   Structure mirrors the Astro reference footer (dark bg, copper accents). */
.tr-footer {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory-dim);
    font-size: 0.85rem;
    padding: var(--space-9) var(--page-padding-x) var(--space-8);
    border-top: 1px solid var(--line-dark);
    position: relative;
}
.tr-footer::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: var(--tr-copper-gold);
}
.tr-footer__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-7);
    align-items: flex-start;
    justify-content: space-between;
}
.tr-footer__brand {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 220px;
}
.tr-footer__logo {
    height: 40px;
    width: auto;
    display: block;
}
.tr-footer__wordmark {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    color: var(--tr-warm-ivory);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.85rem;
    line-height: 1.2;
}
.tr-footer__wordmark span {
    display: block;
    color: var(--tr-stone-gray);
    letter-spacing: 0.22em;
    font-size: 0.65rem;
    font-weight: var(--fw-medium);
    margin-top: 2px;
}
.tr-footer__driver {
    flex: 1 1 260px;
    text-align: center;
    color: var(--tr-warm-ivory);
    font-family: var(--font-display);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: var(--fw-medium);
}
.tr-footer__driver span {
    display: block;
    margin-top: var(--space-3);
    color: var(--tr-stone-gray);
    letter-spacing: 0.12em;
    text-transform: none;
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: var(--fw-regular);
}
.tr-footer__links {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 220px;
    justify-content: flex-end;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.tr-footer__links a {
    color: var(--tr-warm-ivory-dim);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.tr-footer__links a:hover,
.tr-footer__links a:focus-visible {
    color: var(--tr-copper-gold);
}
.tr-footer__links span[aria-hidden="true"] {
    display: inline-block;
    width: 20px;
    height: 1px;
    background: var(--tr-copper-gold);
    opacity: 0.6;
}
@media (max-width: 720px) {
    .tr-footer__inner {
        flex-direction: column;
        text-align: center;
    }
    .tr-footer__brand,
    .tr-footer__links { justify-content: center; width: 100%; }
    .tr-footer__driver { text-align: center; }
}

/* -------------------------------------------------------------------------- */
/* Layout containers                                                           */
/* -------------------------------------------------------------------------- */

.tr-container { max-width: var(--content-max-width); margin: 0 auto; }
.tr-narrow    { max-width: var(--narrow-max-width);  margin: 0 auto; }
.tr-medium    { max-width: var(--medium-max-width);  margin: 0 auto; }
.tr-wide      { max-width: var(--wide-max-width);    margin: 0 auto; }

/* -------------------------------------------------------------------------- */
/* Card — the ivory reading unit                                               */
/* -------------------------------------------------------------------------- */

.tr-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    padding: clamp(1.75rem, 3vw, 3rem);
    box-shadow: var(--shadow-sm);
    position: relative;
}
.tr-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 2px;
    background: var(--tr-copper-gold);
}
.tr-card + .tr-card { margin-top: var(--space-7); }

.tr-eyebrow {
    display: inline-block;
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-eyebrow);
    text-transform: uppercase;
    color: var(--tr-copper-gold-deep);
    margin: 0 0 var(--space-4);
}

.tr-rule {
    display: block;
    width: 48px;
    height: 1px;
    background: var(--tr-copper-gold);
    border: 0;
    margin: 0 0 var(--space-5);
}

.tr-lead {
    font-size: var(--fs-lead);
    line-height: 1.5;
    color: var(--color-text-muted);
    margin-bottom: var(--space-7);
    max-width: 60ch;
}
.tr-muted { color: var(--color-text-muted); }
.tr-subtle { color: var(--color-text-muted); font-size: 0.9rem; }

/* -------------------------------------------------------------------------- */
/* Forms                                                                       */
/* -------------------------------------------------------------------------- */

.tr-form-row { margin-bottom: var(--space-6); }
.tr-form-row label {
    display: block;
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.04em;
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}
.tr-required-mark {
    color: var(--tr-copper-gold-deep);
    font-weight: var(--fw-bold);
    margin-left: 2px;
}
.tr-input, .tr-textarea, .tr-select {
    width: 100%;
    display: block;
    background: #FFFFFF;
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    font: inherit;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.tr-textarea { min-height: 140px; resize: vertical; }
.tr-input:focus, .tr-textarea:focus, .tr-select:focus {
    outline: none;
    border-color: var(--tr-copper-gold-deep);
    box-shadow: 0 0 0 3px var(--tr-copper-gold-soft);
}
.tr-input[aria-invalid="true"],
.tr-textarea[aria-invalid="true"],
.tr-select[aria-invalid="true"] {
    border-color: var(--color-danger);
    box-shadow: 0 0 0 3px var(--color-danger-soft);
}
.tr-field-error {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-danger);
    font-size: 0.875rem;
}
.tr-help {
    display: block;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

/* -------------------------------------------------------------------------- */
/* Buttons — rectangular, copper primary, uppercase display                    */
/* -------------------------------------------------------------------------- */

.tr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    border: 1px solid var(--tr-copper-gold);
    padding: 0.95rem 1.75rem;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: 0.85rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    min-height: 46px;
}
.tr-btn:hover, .tr-btn:focus-visible {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory);
    border-color: var(--tr-midnight-black);
}
.tr-btn--secondary {
    background: transparent;
    color: var(--tr-midnight-black);
    border-color: var(--tr-midnight-black);
}
.tr-btn--secondary:hover, .tr-btn--secondary:focus-visible {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory);
}
.tr-btn--ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
    padding: 0.6rem 1rem;
    min-height: 40px;
    letter-spacing: 0.1em;
    font-size: 0.8rem;
}
.tr-btn--ghost:hover, .tr-btn--ghost:focus-visible {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: transparent;
}
.tr-btn--block { width: 100%; }
.tr-btn--dark {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory);
    border-color: var(--tr-midnight-black);
}
.tr-btn--dark:hover, .tr-btn--dark:focus-visible {
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    border-color: var(--tr-copper-gold);
}

.tr-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
}

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

.tr-alert {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    background: var(--color-info-soft);
    color: var(--color-text);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-5);
    margin: 0 0 var(--space-6);
    font-size: 0.95rem;
}
.tr-alert--success { background: var(--color-success-soft); border-left-color: var(--color-success); }
.tr-alert--warning { background: var(--color-warning-soft); border-left-color: var(--tr-copper-gold-deep); }
.tr-alert--danger  { background: var(--color-danger-soft);  border-left-color: var(--color-danger); }
.tr-alert--info    { background: var(--color-info-soft);    border-left-color: var(--color-info); }

.tr-alert__title {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-2);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 0.85rem;
}
.tr-alert ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; }

/* -------------------------------------------------------------------------- */
/* Badges — rectangular chip, uppercase                                        */
/* -------------------------------------------------------------------------- */

.tr-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: var(--radius);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
}
.tr-badge--success { background: var(--color-success-soft); color: var(--color-success); border-color: transparent; }
.tr-badge--warning { background: var(--color-warning-soft); color: var(--tr-copper-gold-deep); border-color: transparent; }
.tr-badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); border-color: transparent; }
.tr-badge--info    { background: var(--color-info-soft);    color: var(--color-info); border-color: transparent; }

/* -------------------------------------------------------------------------- */
/* Stepper                                                                     */
/* -------------------------------------------------------------------------- */

.tr-stepper {
    display: flex;
    gap: var(--space-3);
    margin: 0 0 var(--space-7);
    padding: 0;
    list-style: none;
    color: var(--color-text-muted);
    font-family: var(--font-display);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    flex-wrap: wrap;
}
.tr-stepper li { display: flex; align-items: center; gap: var(--space-3); }
.tr-stepper li + li::before {
    content: "";
    width: 24px;
    height: 1px;
    background: var(--color-border-strong);
}
.tr-stepper__num {
    display: inline-flex;
    width: 26px;
    height: 26px;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    color: var(--color-text-muted);
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    font-size: 0.75rem;
    letter-spacing: 0;
}
.tr-stepper li[aria-current="step"] { color: var(--color-text); }
.tr-stepper li[aria-current="step"] .tr-stepper__num {
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    border-color: var(--tr-copper-gold);
}

/* -------------------------------------------------------------------------- */
/* Utility                                                                     */
/* -------------------------------------------------------------------------- */

.visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}
.tr-mb-0 { margin-bottom: 0 !important; }
.tr-mt-lg { margin-top: var(--space-8); }
.tr-mt-md { margin-top: var(--space-6); }
.tr-text-center { text-align: center; }
.tr-flex-between { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.tr-block { display: block; }
.tr-inline-block { display: inline-block; }

/* -------------------------------------------------------------------------- */
/* Review step block (application review page)                                 */
/* -------------------------------------------------------------------------- */

.tr-review-step {
    padding: var(--space-6) 0;
    border-top: 1px solid var(--color-border);
}
.tr-review-step:first-of-type { border-top: 0; padding-top: var(--space-4); }
.tr-review-step h2 {
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tr-copper-gold-deep);
    font-weight: var(--fw-semibold);
    margin-bottom: var(--space-5);
}
.tr-review-list { margin: 0 0 var(--space-5); }
.tr-review-list dt {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: var(--space-4) 0 var(--space-2);
}
.tr-review-list dd {
    margin: 0;
    color: var(--color-text);
    font-size: 1rem;
}

/* -------------------------------------------------------------------------- */
/* Portal hero-lite — used on /portal and /home landing                        */
/* -------------------------------------------------------------------------- */

.tr-hero {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory);
    padding: var(--section-py) var(--page-padding-x);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line-dark);
}
.tr-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tr-copper-gold) 50%, transparent);
    opacity: 0.4;
}
.tr-hero__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.tr-hero .tr-eyebrow { color: var(--tr-copper-gold); }
.tr-hero h1 {
    color: var(--tr-warm-ivory);
    font-size: var(--fs-heading-xl);
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    max-width: 20ch;
    margin: 0;
}
.tr-hero h1 em { color: var(--tr-copper-gold); font-style: italic; font-weight: var(--fw-medium); }
.tr-hero p {
    color: var(--tr-warm-ivory-dim);
    max-width: 56ch;
    font-size: var(--fs-lead);
}

/* -------------------------------------------------------------------------- */
/* Inquiry CTA (M9.8)                                                          */
/* -------------------------------------------------------------------------- */

.tr-cta {
    background: linear-gradient(180deg, var(--tr-warm-ivory) 0%, var(--color-surface-alt) 100%);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    padding: clamp(2rem, 3vw, 3.5rem);
    margin: var(--space-10) 0 0;
    text-align: left;
    position: relative;
}
.tr-cta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 3px;
    background: var(--tr-copper-gold);
}
.tr-cta h2 {
    max-width: 22ch;
    font-size: var(--fs-heading-lg);
    font-weight: var(--fw-medium);
    color: var(--color-text-strong);
    margin: 0 0 var(--space-4);
}
.tr-cta p {
    color: var(--color-text-muted);
    max-width: 54ch;
    margin: 0 0 var(--space-6);
}

/* -------------------------------------------------------------------------- */
/* Featured badge (M9.8)                                                       */
/* -------------------------------------------------------------------------- */

.tr-content-card--featured::after {
    content: "Featured";
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    background: var(--tr-midnight-black);
    color: var(--tr-copper-gold);
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--radius);
}

/* -------------------------------------------------------------------------- */
/* Content grid — protected home / newsletter listing (M9.7)                   */
/* -------------------------------------------------------------------------- */

.tr-cards {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-6) 0;
}
.tr-cards > * { flex: 1 1 280px; }

.tr-content-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    padding: var(--space-6);
    text-decoration: none;
    color: var(--color-text);
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    position: relative;
}
.tr-content-card:hover, .tr-content-card:focus-visible {
    transform: translateY(-2px);
    border-color: var(--tr-copper-gold);
    box-shadow: var(--shadow-soft);
    color: var(--color-text);
}
.tr-content-card .tr-eyebrow { margin-bottom: var(--space-3); }
.tr-content-card h3 {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
    letter-spacing: -0.01em;
}
.tr-content-card p { color: var(--color-text-muted); margin: 0 0 var(--space-5); font-size: 0.95rem; }
.tr-content-card__meta {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* WCAG AA 4.5:1 on the white card surface — the previous stone-gray
       #8F8780 tested at ~3.66:1, below AA for small text. Ink-soft #5B5049
       tests at ~6.9:1. */
    color: var(--color-text-muted);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-family: var(--font-display);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* -------------------------------------------------------------------------- */
/* Article body (M9.7 detail view)                                             */
/* -------------------------------------------------------------------------- */

.tr-prose {
    max-width: 68ch;
    margin: 0 auto;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--color-text);
}
.tr-prose h2 { margin-top: var(--space-9); font-size: 1.5rem; }
.tr-prose h3 { margin-top: var(--space-7); font-size: 1.25rem; }
.tr-prose blockquote {
    border-left: 3px solid var(--tr-copper-gold);
    padding-left: var(--space-5);
    margin: var(--space-7) 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: 1.15rem;
}
.tr-prose a { text-decoration: underline; text-decoration-color: var(--tr-copper-gold); text-underline-offset: 3px; }
.tr-prose img { margin: var(--space-6) 0; }
.tr-prose ul, .tr-prose ol { padding-left: 1.4rem; }
.tr-prose li { margin-bottom: var(--space-2); }

/* -------------------------------------------------------------------------- */
/* Small screens                                                               */
/* -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .tr-header__inner { flex-wrap: wrap; padding: 0 var(--page-padding-x); }
    .tr-header__meta { text-align: left; width: 100%; }
    .tr-btn-row { flex-direction: column; align-items: stretch; }
    .tr-btn-row .tr-btn { width: 100%; }
    .tr-flex-between { flex-direction: column; align-items: stretch; }
    .tr-hero h1 { font-size: var(--fs-heading-lg); }
}

/* -------------------------------------------------------------------------- */
/* Editorial hero (UIX-1)                                                      */
/* Premium hero variant for /home and section-lead pages. Full-bleed midnight  */
/* with a two-column split: copy left, media/gradient panel right. Copy panel  */
/* uses oversized headline w/ italic emphasis + thin copper rule.              */
/* -------------------------------------------------------------------------- */

.tr-hero-editorial {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory);
    padding: var(--section-py) var(--page-padding-x);
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid var(--line-dark);
}
.tr-hero-editorial::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tr-copper-gold) 50%, transparent);
    opacity: 0.35;
}
.tr-hero-editorial__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-9);
    align-items: center;
}
.tr-hero-editorial__copy {
    flex: 1 1 480px;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}
.tr-hero-editorial__copy .tr-eyebrow { color: var(--tr-copper-gold); margin: 0; }
.tr-hero-editorial__copy .tr-rule { background: var(--tr-copper-gold); margin: 0; }
.tr-hero-editorial h1 {
    color: var(--tr-warm-ivory);
    font-size: var(--fs-heading-xl);
    font-weight: var(--fw-medium);
    letter-spacing: -0.02em;
    line-height: 1.05;
    max-width: 22ch;
    margin: 0;
}
.tr-hero-editorial h1 em {
    color: var(--tr-copper-gold);
    font-style: italic;
    font-weight: var(--fw-medium);
}
.tr-hero-editorial p {
    color: var(--tr-warm-ivory-dim);
    max-width: 56ch;
    font-size: var(--fs-lead);
    margin: 0;
}
.tr-hero-editorial__media {
    flex: 1 1 360px;
    aspect-ratio: 3 / 2;
    position: relative;
    border: 1px solid var(--line-dark);
    background: linear-gradient(
        135deg,
        var(--tr-terra-brown) 0%,
        var(--tr-terra-brown-elevated) 40%,
        var(--tr-midnight-black) 100%
    );
    overflow: hidden;
}
.tr-hero-editorial__media::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(184, 135, 78, 0.22), transparent 55%),
        radial-gradient(circle at 80% 20%, rgba(184, 135, 78, 0.08), transparent 60%);
    pointer-events: none;
}
.tr-hero-editorial__media img,
.tr-hero-editorial__media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 720px) {
    .tr-hero-editorial__inner { flex-direction: column; gap: var(--space-7); }
    .tr-hero-editorial h1 { font-size: var(--fs-heading-lg); }
    .tr-hero-editorial__media { width: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Content card media block (UIX-1)                                            */
/* 3:2 image/media slot with owner-approved fallback gradient panel.           */
/* Do NOT fetch stock imagery — this block is intentionally palette-locked so  */
/* posts without a feature image still read as intentional editorial cards.    */
/* -------------------------------------------------------------------------- */

.tr-content-card { padding: 0; overflow: hidden; }
.tr-content-card__media {
    aspect-ratio: 3 / 2;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--tr-terra-brown) 0%,
        var(--tr-terra-brown-elevated) 45%,
        var(--tr-midnight-black) 100%
    );
    border-bottom: 1px solid var(--tr-copper-gold-soft);
}
.tr-content-card__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 75%, rgba(184, 135, 78, 0.20), transparent 55%),
        radial-gradient(circle at 78% 22%, rgba(184, 135, 78, 0.10), transparent 60%);
    pointer-events: none;
}
.tr-content-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.tr-content-card__body {
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tr-content-card__body > * { margin-top: 0; }
.tr-content-card--featured .tr-content-card__media {
    border-bottom-color: var(--tr-copper-gold);
}

/* -------------------------------------------------------------------------- */
/* Cards grid — predictable 3 / 2 / 1 (UIX-1)                                  */
/* Flexbox calc-based, no CSS grid (per DESIGN-SPEC "flexbox only").           */
/* -------------------------------------------------------------------------- */

.tr-cards--three {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin: var(--space-6) 0;
}
.tr-cards--three > * {
    flex: 0 1 calc((100% - (var(--space-6) * 2)) / 3);
    min-width: 0;
    display: flex;
}
@media (max-width: 960px) {
    .tr-cards--three > * {
        flex-basis: calc((100% - var(--space-6)) / 2);
    }
}
@media (max-width: 640px) {
    .tr-cards--three > * { flex-basis: 100%; }
}

/* -------------------------------------------------------------------------- */
/* Disabled form + button states (UIX-1)                                       */
/* Ensures WCAG-visible non-interactive states across all interactive tokens.  */
/* -------------------------------------------------------------------------- */

.tr-btn:disabled,
.tr-btn[aria-disabled="true"],
.tr-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
    box-shadow: none;
}
.tr-btn--secondary:disabled,
.tr-btn--secondary[aria-disabled="true"] {
    background: transparent;
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
}
.tr-btn--dark:disabled,
.tr-btn--dark[aria-disabled="true"] {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border-strong);
}

.tr-input:disabled,
.tr-textarea:disabled,
.tr-select:disabled {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    cursor: not-allowed;
    opacity: 0.75;
    box-shadow: none;
}
.tr-input:disabled::placeholder,
.tr-textarea:disabled::placeholder {
    color: var(--color-text-muted);
    opacity: 0.7;
}

/* -------------------------------------------------------------------------- */
/* Prose overflow protection (UIX-1)                                           */
/* Long tokens (URLs, hashes, unbroken strings) must not push the article past */
/* its column. word-break: normal preserves natural typography; overflow-wrap: */
/* anywhere is the escape hatch for the truly long strings.                    */
/* -------------------------------------------------------------------------- */

.tr-prose {
    word-break: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.tr-prose pre,
.tr-prose code {
    max-width: 100%;
    overflow-x: auto;
    word-break: break-word;
    white-space: pre-wrap;
}
.tr-prose img,
.tr-prose figure { max-width: 100%; height: auto; }
.tr-prose table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

/* -------------------------------------------------------------------------- */
/* Section wrapper — replaces inline `padding: var(--section-py-sm) var(...)`  */
/* used across portal home / newsletter / detail templates (UIX-2).            */
/* -------------------------------------------------------------------------- */

.tr-page-body {
    padding: var(--section-py-sm) var(--page-padding-x);
}
.tr-page-body > .tr-container,
.tr-page-body > .tr-narrow,
.tr-page-body > .tr-medium,
.tr-page-body > .tr-wide {
    padding-left: 0;
    padding-right: 0;
}
.tr-section + .tr-section { margin-top: var(--space-10); }
.tr-section > .tr-eyebrow { margin-bottom: var(--space-3); }

/* -------------------------------------------------------------------------- */
/* Breadcrumb + article meta + reading time (UIX-2)                            */
/* -------------------------------------------------------------------------- */

.tr-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* AA compliant: stone-gray fails at ~3.66:1; ink-soft is ~6.9:1 on ivory. */
    color: var(--color-text-muted);
    margin: 0 0 var(--space-6);
}
.tr-breadcrumb a {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color var(--transition-fast);
}
.tr-breadcrumb a:hover,
.tr-breadcrumb a:focus-visible { color: var(--tr-copper-gold-deep); }
.tr-breadcrumb span[aria-hidden="true"] {
    color: var(--color-border-strong);
    padding: 0 2px;
}
.tr-breadcrumb [aria-current="page"] {
    color: var(--color-text);
    max-width: 32ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tr-article-header {
    margin: 0 0 var(--space-8);
}
.tr-article-header h1 {
    margin: 0 0 var(--space-4);
    font-size: var(--fs-heading-xl);
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
}
.tr-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    /* ORX-SENIOR-UIUX: prior color --color-text-muted (~3.5:1) failed
       WCAG 2.2 AA on ivory for small text. --ink-soft (#5B5049) clears
       the 4.5:1 threshold. Bump font-size to 0.75rem so the uppercase
       letterspacing remains legible on 390px viewports. */
    color: var(--ink-soft);
    font-family: var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.75rem;
    margin: 0 0 var(--space-5);
}
.tr-article-meta > span::before {
    content: "·";
    margin-right: var(--space-4);
    color: var(--tr-copper-gold);
}
.tr-article-meta > span:first-child::before { content: none; margin: 0; }

.tr-figure {
    margin: var(--space-8) 0 var(--space-9);
    border: 1px solid var(--color-border);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        var(--tr-terra-brown) 0%,
        var(--tr-terra-brown-elevated) 45%,
        var(--tr-midnight-black) 100%
    );
    position: relative;
}
.tr-figure::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 75%, rgba(184, 135, 78, 0.18), transparent 55%),
        radial-gradient(circle at 78% 22%, rgba(184, 135, 78, 0.10), transparent 60%);
    pointer-events: none;
}
.tr-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    z-index: 1;
}

/* Prev / next post navigation (UIX-2 detail) */
.tr-post-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    margin: var(--space-10) 0 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-6);
}
.tr-post-nav__item {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    color: var(--color-text);
    text-decoration: none;
    padding: var(--space-4) 0;
    transition: color var(--transition-fast);
}
.tr-post-nav__item:hover,
.tr-post-nav__item:focus-visible { color: var(--tr-copper-gold-deep); }
.tr-post-nav__item--next { text-align: right; align-items: flex-end; }
.tr-post-nav__label {
    /* AA-safe on ivory. */
    color: var(--color-text-muted);
    font-family: var(--font-display);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 0.7rem;
}
.tr-post-nav__title {
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    font-size: 1.05rem;
    color: inherit;
    max-width: 30ch;
}

/* -------------------------------------------------------------------------- */
/* Pending / access-denied stepper (UIX-2)                                     */
/* Numbered "what happens next" list with copper counters.                     */
/* -------------------------------------------------------------------------- */

.tr-next-steps {
    list-style: none;
    counter-reset: tr-step;
    padding: 0;
    margin: var(--space-6) 0 var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.tr-next-steps li {
    counter-increment: tr-step;
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-alt);
    border-left: 2px solid var(--tr-copper-gold);
    border-radius: var(--radius);
}
.tr-next-steps li::before {
    content: counter(tr-step, decimal-leading-zero);
    font-family: var(--font-display);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    color: var(--tr-copper-gold-deep);
    min-width: 32px;
    font-size: 0.9rem;
    line-height: 1.4;
}
.tr-next-steps strong {
    display: block;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--color-text);
    margin-bottom: 2px;
}
.tr-next-steps p { margin: 0; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.5; }

/* -------------------------------------------------------------------------- */
/* Filter tabs — used on /newsletter (safe, no query change; type is fixed to  */
/* Newsletter, tabs are visual filter placeholders wired to same list).        */
/* -------------------------------------------------------------------------- */

.tr-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    margin: 0 0 var(--space-7);
    padding: 0 0 var(--space-2);
}
.tr-tab {
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    /* WCAG AA on ivory: stone-gray 3.66:1 fails; ink-soft passes at ~6.9:1. */
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--space-3) 0;
    border-bottom: 2px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}
.tr-tab:hover,
.tr-tab:focus-visible {
    color: var(--tr-copper-gold-deep);
}
.tr-tab[aria-current="page"] {
    color: var(--color-text);
    border-bottom-color: var(--tr-copper-gold);
}

/* -------------------------------------------------------------------------- */
/* Mobile progress bar (UIX-3)                                                 */
/* Collapses the dot .tr-stepper on small viewports to a compact progress line */
/* with "Step X of Y · Label". Dot stepper reserved for tablet/desktop.        */
/* -------------------------------------------------------------------------- */

.tr-progress {
    display: none;
    margin: 0 0 var(--space-6);
    font-family: var(--font-display);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-size: 0.72rem;
    /* AA-safe on ivory. */
    color: var(--color-text-muted);
}
.tr-progress__label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    align-items: baseline;
    margin-bottom: var(--space-3);
}
.tr-progress__count {
    color: var(--color-text);
    font-weight: var(--fw-semibold);
}
.tr-progress__title {
    color: var(--color-text-muted);
    text-transform: none;
    letter-spacing: 0.01em;
    font-family: var(--font-body);
    font-size: 0.85rem;
    text-align: right;
}
.tr-progress__bar {
    position: relative;
    height: 4px;
    background: var(--color-surface-alt);
    border-radius: var(--radius);
    overflow: hidden;
}
.tr-progress__bar::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--tr-progress-value, 0%);
    background: var(--tr-copper-gold);
    transition: width var(--transition-base);
}

@media (max-width: 720px) {
    .tr-stepper { display: none; }
    .tr-progress { display: block; }
}

/* -------------------------------------------------------------------------- */
/* Character counter (UIX-3)                                                   */
/* Live remaining/limit counter under textareas that carry maxlength. Purely   */
/* informative — the maxlength attribute still enforces the hard cap.          */
/* -------------------------------------------------------------------------- */

.tr-charcount {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    font-size: 0.72rem;
    /* AA-safe on ivory. */
    color: var(--color-text-muted);
    text-align: right;
}
.tr-charcount[data-warn="true"] { color: var(--color-warning); font-weight: var(--fw-semibold); }
.tr-charcount[data-danger="true"] { color: var(--color-danger); font-weight: var(--fw-semibold); }

/* -------------------------------------------------------------------------- */
/* Save-state note (UIX-3)                                                     */
/* Honest save feedback — no fake autosave. Message states that answers save   */
/* only when the applicant presses Continue.                                   */
/* -------------------------------------------------------------------------- */

.tr-save-note {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    background: var(--color-info-soft);
    color: var(--color-text);
    border-left: 3px solid var(--color-info);
    border-radius: var(--radius);
    padding: var(--space-3) var(--space-5);
    margin: 0 0 var(--space-6);
    font-size: 0.85rem;
}
.tr-save-note strong {
    display: block;
    font-family: var(--font-display);
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-text);
    margin-bottom: 2px;
}
.tr-save-note--success {
    background: var(--color-success-soft);
    border-left-color: var(--color-success);
    color: var(--color-success);
}
.tr-save-note--success strong { color: var(--color-success); }

/* -------------------------------------------------------------------------- */
/* Review page "Needs completion" affordance (UIX-3)                           */
/* -------------------------------------------------------------------------- */

.tr-review-step__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
}
.tr-review-step__header h2 { margin: 0; }
.tr-review-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius);
}
.tr-review-status--ok {
    background: var(--color-success-soft);
    color: var(--color-success);
}
.tr-review-status--needs {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}
.tr-review-status a {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.tr-review-answer--missing {
    color: var(--color-danger);
    font-style: italic;
}

/* -------------------------------------------------------------------------- */
/* Submit confirmation gate (UIX-3)                                            */
/* Native accessible confirmation: an explicit required checkbox that unlocks  */
/* the Submit button via :has()/JS. No modal, no risky JS dialog.              */
/* -------------------------------------------------------------------------- */

.tr-confirm {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface-alt);
    border-radius: var(--radius);
    margin: var(--space-6) 0;
    border-left: 3px solid var(--tr-copper-gold);
}
.tr-confirm input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: var(--tr-copper-gold-deep);
    flex: 0 0 auto;
}
.tr-confirm label {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--color-text);
    cursor: pointer;
}
.tr-confirm strong {
    display: block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 2px;
    /* WCAG AA: copper-deep on surface-alt fails at ~3.1:1. Midnight passes
       comfortably; the copper accent still lives in the left rail. */
    color: var(--color-text);
}

/* ---------- Admin preview banner (M9.10) ---------- */
.tr-admin-preview-banner {
    background: var(--tr-copper-gold-deep, #8B6432);
    color: #FFF8EA;
    font-family: var(--font-display, "Montserrat", system-ui, sans-serif);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(0,0,0,0.25);
}
.tr-admin-preview-banner__inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px var(--page-padding-x, 24px);
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
}
.tr-admin-preview-banner__label {
    font-weight: 700;
    padding: 3px 10px;
    background: rgba(0,0,0,0.28);
    border-radius: 3px;
    letter-spacing: 0.14em;
}
.tr-admin-preview-banner__body {
    flex: 1 1 260px;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.95;
}
.tr-admin-preview-banner__exit {
    color: #FFF8EA;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tr-admin-preview-banner__exit:hover,
.tr-admin-preview-banner__exit:focus-visible {
    color: #fff;
    text-decoration-thickness: 2px;
}

/* ---------- Draft preview banner (UXR-2) ---------- */
/* Deep midnight bar to distinguish from the copper published-preview banner
   so admins never confuse a draft preview with a live client view. */
.tr-admin-preview-banner--draft {
    background: var(--tr-midnight, #1B1E22);
    color: #F3EEE8;
    border-bottom: 1px solid var(--tr-copper-gold-deep, #8B6432);
}
.tr-admin-preview-banner--draft .tr-admin-preview-banner__label {
    background: var(--tr-copper-gold-deep, #8B6432);
    color: #FFF8EA;
}
.tr-admin-preview-banner--draft .tr-admin-preview-banner__exit {
    color: var(--tr-copper-gold, #B8874E);
}

/* ---------- Admin answer / audit body overflow guard (UXR-2) ---------- */
/* Applicant answers and audit reasons render inside a Filament HtmlString
   entry. Long URLs or unbroken tokens must not force horizontal scroll on
   the admin detail page. */
.tr-admin-answers__body,
.tr-admin-audit__reason {
    overflow-wrap: anywhere;
    word-break: break-word;
    max-width: 100%;
}

/* UXR-3: subtle meta label next to a CTA (file size on Download PDF, etc.). */
.tr-btn__meta {
    font-weight: 400;
    opacity: 0.72;
    letter-spacing: 0.02em;
    margin-left: 0.5rem;
    font-size: 0.85em;
}

/* UXR-3: benefit copy block on /complete-profile. */
.tr-benefits {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--line-light, rgba(143,135,128,0.28));
}
.tr-benefits__heading {
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--tr-copper-gold-deep, #8C6537);
    margin: 0 0 var(--space-4) 0;
}
.tr-benefits__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-4);
}
.tr-benefits__list li {
    padding-left: 1.25rem;
    position: relative;
    line-height: 1.55;
    color: var(--color-text, #2a2624);
}
.tr-benefits__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 8px;
    height: 1px;
    background: var(--tr-copper-gold-deep, #8C6537);
}
.tr-benefits__list strong {
    display: block;
    color: var(--color-text, #2a2624);
    font-family: var(--font-display);
    font-size: 0.95rem;
    margin-bottom: 2px;
}

/* ============================================================ */
/* ORX-2: portal width, hero gap, footer, delinked logos        */
/* ============================================================ */

/* --- Widen portal containers per owner directive --- */
:root {
    /* Was 1360/1040/720/560. Owner rejected as too narrow. Widen. */
    --content-max-width: 1600px;
    --wide-max-width: 1280px;
    --medium-max-width: 900px;
}

/* --- ORX-2/ORX-8: kill the weird nav-to-hero gap.
   ORX-2 zeroed the first child's margin-top but `.tr-main` still emits its
   own `padding: var(--section-py-sm) 0 var(--section-py)` which produced a
   visible beige strip between the dark header and the black hero. The main
   region should never contribute its own top padding — every route's first
   block already carries either a full-bleed hero (with internal padding) or
   a `.tr-page-body` wrapper (also with internal padding). --- */
.tr-main {
    padding-top: 0 !important;
}
.tr-main > .tr-hero-editorial:first-child,
.tr-main > section.tr-hero-editorial:first-child,
.tr-main > *:first-child {
    margin-top: 0 !important;
}
.tr-hero-editorial {
    padding-top: clamp(2rem, 3vw + 1rem, 4rem);
    padding-bottom: clamp(2rem, 3vw + 1rem, 4rem);
}

/* --- Delinked brand block: layout parity with the old <a> element --- */
span.tr-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

/* --- Footer: image logo only, wordmark repetition removed --- */
.tr-footer__brand {
    display: flex;
    align-items: center;
}
.tr-footer__brand .tr-footer__logo {
    height: 44px;
    width: auto;
    display: block;
}

/* ============================================================ */
/* ORX-8: newsletter detail + pre-footer CTA rework              */
/* ============================================================ */

/* ORX-8 #4: newsletter detail was rendered inside `.tr-medium` (900px), which
   felt cramped on desktop even though the internal `.tr-prose` cap keeps the
   body at 68ch. The article header + surrounding chrome should breathe wider
   while the prose column itself remains the readable measure. */
.tr-article-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin: 0 0 var(--space-8);
}
.tr-article-header__main {
    flex: 1 1 60ch;
    min-width: 0;
}
.tr-article-header__pdf {
    flex: 0 0 auto;
    padding-top: var(--space-2);
}
.tr-article-header__pdf .tr-btn {
    min-width: 220px;
    justify-content: center;
}
@media (max-width: 720px) {
    .tr-article-header__pdf .tr-btn { min-width: 0; width: 100%; }
    .tr-article-header__pdf { width: 100%; }
}

/* ORX-8 #6: pre-footer CTA rework. Old block used an ivory→surface-alt
   gradient plus a left copper rail — read as a generic bordered box. New
   composition mirrors Terra Rossa staging: midnight surface, centered
   editorial headline, top copper hairline, copper button. Kept as an aside
   so screen readers still announce it as complementary content. */
.tr-cta {
    background: var(--tr-midnight-black);
    color: var(--tr-warm-ivory);
    border: 0;
    border-radius: 2px;
    padding: clamp(3rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem);
    margin: var(--space-10) 0 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.tr-cta::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 2px;
    background: var(--tr-copper-gold);
    border-radius: 0;
}
.tr-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--tr-copper-gold) 50%, transparent);
    opacity: 0.4;
    pointer-events: none;
}
.tr-cta .tr-eyebrow {
    color: var(--tr-copper-gold);
    margin: 0 auto var(--space-4);
    display: inline-block;
}
.tr-cta h2 {
    color: var(--tr-warm-ivory);
    max-width: 22ch;
    margin: 0 auto var(--space-4);
    font-size: var(--fs-heading-lg);
    font-weight: var(--fw-medium);
    letter-spacing: -0.015em;
    text-align: center;
}
.tr-cta .tr-rule {
    background: var(--tr-copper-gold);
    margin: 0 auto var(--space-5);
    width: 48px;
}
.tr-cta p {
    color: var(--tr-warm-ivory-dim);
    max-width: 54ch;
    margin: 0 auto var(--space-7);
    text-align: center;
}
.tr-cta .tr-btn-row {
    justify-content: center;
}
.tr-cta .tr-btn,
.tr-cta .tr-btn--dark {
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    border-color: var(--tr-copper-gold);
}
.tr-cta .tr-btn:hover,
.tr-cta .tr-btn:focus-visible,
.tr-cta .tr-btn--dark:hover,
.tr-cta .tr-btn--dark:focus-visible {
    background: transparent;
    color: var(--tr-copper-gold);
    border-color: var(--tr-copper-gold);
}

/* =========================================================
   ORX-9: Intake form field additions
   ========================================================= */

/* Fieldset for multiselect (checkbox group) */
.tr-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    margin: 0;
}
.tr-fieldset > legend {
    padding: 0 var(--space-2);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-sm);
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--color-text);
}
.tr-fieldset[aria-invalid="true"] {
    border-color: var(--color-danger, #a1373d);
    box-shadow: 0 0 0 3px rgba(161, 55, 61, 0.12);
}

/* Checkbox grid — 2-column on desktop, 1-column on mobile.
   ORX-18: refined per owner rejection of visual heaviness. White
   surface separates options from the ivory canvas; tighter gap and
   padding; title-case label typography; refined selected state. */
.tr-checkgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: var(--space-3);
}
@media (max-width: 640px) {
    .tr-checkgrid { grid-template-columns: 1fr; }
}
.tr-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    min-height: 44px;
    border: 1px solid rgba(11, 10, 9, 0.10);
    border-radius: 2px;
    cursor: pointer;
    background: #FFFFFF;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}
.tr-checkbox:hover {
    border-color: var(--tr-copper-gold);
    box-shadow: 0 0 0 1px rgba(184, 135, 78, 0.35);
}
.tr-checkbox input[type="checkbox"] {
    appearance: auto;
    width: 16px;
    height: 16px;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--tr-copper-gold);
}
.tr-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--tr-copper-gold);
    outline-offset: 2px;
}
.tr-checkbox:has(input:checked) {
    background: rgba(184, 135, 78, 0.06);
    border-color: var(--tr-copper-gold);
    box-shadow: inset 0 0 0 1px var(--tr-copper-gold);
}
.tr-checkbox > span {
    /* ORX-18: title case, no uppercase, no wide letter-spacing.
       Legibility over decoration. */
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
    color: var(--tr-midnight-black);
}
.tr-checkbox:has(input:checked) > span {
    font-weight: 600;
}

/* Help text variants */
.tr-help {
    display: block;
    font-size: var(--fs-xs);
    color: var(--color-text-muted, #6b6157);
    margin-top: var(--space-2);
    line-height: 1.4;
}
.tr-help--muted { opacity: 0.75; font-style: italic; }
.tr-help-inline {
    font-size: var(--fs-sm);
    color: var(--color-text-muted, #6b6157);
    margin: 0 0 var(--space-5);
}

/* Form row modifiers */
.tr-form-row--multiselect { margin-bottom: var(--space-7); }
.tr-form-row--error label,
.tr-form-row--error legend { color: var(--color-danger, #a1373d); }

/* Readonly input treatment */
.tr-input[readonly] {
    background: rgba(0, 0, 0, 0.03);
    color: var(--color-text-muted, #6b6157);
    cursor: not-allowed;
}

/* Muted ghost button (sign-out inside form) */
.tr-btn--muted {
    color: var(--color-text-muted, #6b6157);
    border-color: var(--color-border);
    font-size: var(--fs-xs);
}
.tr-btn--muted:hover { color: var(--color-danger, #a1373d); }

/* Success card + callout for post-approval screen */
.tr-card--success {
    border-top: 3px solid var(--tr-copper-gold);
}
.tr-callout {
    background: rgba(184, 134, 65, 0.06);
    border-left: 3px solid var(--tr-copper-gold);
    padding: var(--space-5) var(--space-6);
    margin: var(--space-5) 0;
    border-radius: 0 var(--radius-sm, 4px) var(--radius-sm, 4px) 0;
}
.tr-callout h2 {
    font-size: var(--fs-md);
    margin: 0 0 var(--space-3);
    color: var(--color-text);
}
.tr-callout ol { margin: 0; padding-left: var(--space-6); }
.tr-callout ol li { margin-bottom: var(--space-2); }
.tr-callout--dev {
    background: rgba(0, 0, 0, 0.03);
    border-left-color: var(--color-text-muted, #6b6157);
    font-size: var(--fs-sm);
}

/* Review step numbering */
.tr-review-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    font-size: var(--fs-xs);
    font-weight: 600;
    margin-right: var(--space-2);
    color: var(--color-text-muted, #6b6157);
    vertical-align: middle;
}

/* Stepper completed-step indicator */
.tr-stepper li[data-tr-step-done="true"] .tr-stepper__num {
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    border-color: var(--tr-copper-gold);
}

/* ORX-9 axe fix — remove opacity from tr-help--muted so WCAG contrast holds. */
.tr-help--muted { opacity: 1; color: var(--color-text, #1a1a1a); font-style: italic; }

/* ---------- ORX-10C: /login intake/access hub ---------- */
.tr-hub { display: block; }
.tr-hub__headline { margin-top: 0; }
.tr-hub__lead { max-width: 62ch; }
.tr-hub__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-7);
    margin-top: var(--space-7);
}
@media (min-width: 900px) {
    .tr-hub__grid { grid-template-columns: 1fr 1fr; }
}
.tr-hub__card { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-hub__card h2 { margin-top: var(--space-2); margin-bottom: 0; }
.tr-hub__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 10px;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    border-radius: 999px;
}
.tr-hub__badge--soft {
    /* Filled dark surface with copper text keeps the ORX-11 axe pass green
       (transparent copper-on-cream failed WCAG AA contrast). */
    background: var(--tr-midnight-black, #1a1a1a);
    color: var(--tr-copper-gold);
    border: 1px solid var(--tr-copper-gold);
}
.tr-hub__list {
    margin: 0;
    padding-left: 1.25rem;
    /* Use the primary text color so the list meets WCAG AA contrast on the
       ivory .tr-card surface. --tr-stone-gray is intentionally a hint color
       and fails contrast in this context. */
    color: var(--color-text, #1a1a1a);
}
.tr-hub__list li + li { margin-top: 4px; }
.tr-hub__form { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-hub__btn-row { display: flex; flex-direction: column; gap: var(--space-3); }
@media (min-width: 700px) {
    .tr-hub__btn-row { flex-direction: row; }
    .tr-hub__btn-row .tr-btn { flex: 1; }
}
.tr-hub__note { font-size: 0.9rem; margin: 0; }

/* ============================================================ */
/* ORX-16: /login access hero + access cards                     */
/* Owner rejected the ORX-15 boxes-in-void composition. This      */
/* replaces the .tr-hub layout with an intentional composed hero  */
/* + centered card row that reads as a premium portal landing.   */
/* ============================================================ */

.tr-login-hero {
    background: var(--tr-warm-ivory);
    padding: clamp(3rem, 6vw, 5rem) var(--page-padding-x) clamp(1.5rem, 3vw, 2.5rem);
    text-align: center;
    position: relative;
}
.tr-login-hero::before {
    /* Copper hairline directly under the midnight nav, tying the two zones. */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--tr-copper-gold);
    opacity: 0.28;
}
.tr-login-hero__inner {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}
.tr-login-hero__eyebrow {
    /* ORX-16: copper-deep clears WCAG 2.2 AA on ivory (~5.5:1) where
       standard copper failed (2.75:1). Weight 700 keeps the eyebrow
       optically strong at 12px. */
    color: var(--tr-copper-gold-deep);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.tr-login-hero__headline {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--tr-midnight-black);
}
.tr-login-hero__headline em {
    font-style: italic;
    font-weight: 500;
    color: var(--tr-midnight-black);
}
.tr-login-hero__rule {
    display: block;
    width: 56px;
    height: 2px;
    background: var(--tr-copper-gold);
    margin: 0.25rem 0;
}
.tr-login-hero__lede {
    margin: 0;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 560px;
}
.tr-login-hero__alert {
    width: 100%;
    max-width: 560px;
    margin-top: var(--space-4);
    text-align: left;
}
/* RC-LOGIN-FIX: retire pale-blue Bootstrap-style .tr-alert appearance on
   /login flashes. Terra Rossa treatment — warm ivory surface, copper
   hairline top, brand typography — so the enumeration-safe generic flash
   reads as part of the editorial system, not a system-alert popover. */
.tr-login-hero__alert .tr-alert {
    background: rgba(224, 208, 179, 0.28);
    color: var(--tr-midnight-black);
    border-left: none;
    border-top: 2px solid var(--tr-copper-gold);
    border-radius: 2px;
    padding: var(--space-4) var(--space-5);
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: 0 1px 2px rgba(11, 10, 9, 0.04);
}
.tr-login-hero__alert .tr-alert--danger {
    background: rgba(178, 60, 47, 0.06);
    border-top-color: var(--color-danger);
}
.tr-login-hero__alert .tr-alert--success {
    background: rgba(224, 208, 179, 0.28);
    border-top-color: var(--tr-copper-gold-deep);
}
.tr-login-hero__alert .tr-alert__title {
    color: var(--tr-copper-gold-deep);
    margin-bottom: var(--space-2);
}

.tr-login-cards {
    background: var(--tr-warm-ivory);
    /* RC-LOGIN-FIX: tighten hero-to-card gap so the cards feel anchored
       to the hero instead of floating below it. Bottom padding preserved
       so the ivory-to-editorial transition still has room to breathe. */
    padding: clamp(0.75rem, 1.5vw, 1.5rem) var(--page-padding-x) clamp(3rem, 6vw, 5rem);
}
.tr-login-cards__inner {
    /* RC-LOGIN-FIX: widen from 920px to 1120px so the two-card row
       aligns visually with the 1280px editorial bands below. The prior
       narrow measure made the top zone read as underweight vs the black
       Exclusive Access / Continue the Conversation blocks. */
    max-width: 1120px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: stretch;
}
.tr-access-card {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(11, 10, 9, 0.08);
    border-top: 2px solid var(--tr-copper-gold);
    border-radius: 2px;
    padding: clamp(1.75rem, 2.5vw, 2.25rem);
    gap: var(--space-4);
    box-shadow: 0 1px 2px rgba(11, 10, 9, 0.03);
}
.tr-access-card__chip {
    align-self: flex-start;
    display: inline-block;
    padding: 0.4rem 0.75rem;
    font-family: var(--font-display);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 600;
    background: var(--tr-copper-gold);
    color: var(--tr-midnight-black);
    border-radius: 2px;
}
.tr-access-card__chip--soft {
    background: transparent;
    color: var(--tr-midnight-black);
    border: 1px solid var(--tr-midnight-black);
}
.tr-access-card__heading {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: var(--fs-heading-md);
    line-height: 1.15;
    color: var(--tr-midnight-black);
}
.tr-access-card__body {
    margin: 0;
    color: var(--ink-soft);
    line-height: 1.6;
}
.tr-access-card__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--tr-midnight-black);
}
.tr-access-card__list li {
    position: relative;
    padding-left: 1.5rem;
    font-size: 0.95rem;
}
.tr-access-card__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55rem;
    width: 8px;
    height: 1px;
    background: var(--tr-copper-gold);
}
.tr-access-card__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: auto;
}
.tr-access-card__foot {
    margin: 0;
    padding-top: var(--space-3);
    border-top: 1px solid rgba(11, 10, 9, 0.06);
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.tr-access-card__foot a {
    color: var(--tr-copper-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tr-access-card__foot a:hover,
.tr-access-card__foot a:focus-visible {
    color: var(--tr-midnight-black);
}

/* ORX-16: kill remaining pill radius on legacy .tr-hub__badge if it
   renders anywhere else. Rectangular 2px per DESIGN-SPEC. */
.tr-hub__badge,
.tr-hub__badge--soft {
    border-radius: 2px !important;
}

/* RC-LOGIN-FIX: consistent vertical rhythm for the /login editorial
   sections that follow the two membership cards. One spacing scale for
   Exclusive Access → Insights → Continue the Conversation, so the page
   reads as intentional rather than three independent blocks. */
.tr-login-page-body {
    padding-top: clamp(1.75rem, 3vw, 3rem);
    padding-bottom: clamp(3rem, 6vw, 5rem);
}
.tr-login-page-body > * + * {
    margin-top: clamp(2rem, 4vw, 3.5rem);
}
/* Insights heading pulls closer to the section above so the eyebrow +
   rule + card grid stay optically one unit. */
.tr-login-page-body .tr-section {
    padding-top: 0;
}

/* ============================================================ */
/* ORX-17: /portal confidentiality acknowledgement               */
/* Replaces the "Welcome back + dual CTA" welcome dashboard with */
/* a single-CTA private-access screen. Composition matches the   */
/* ORX-16 /login hero pattern so the two access surfaces feel    */
/* like one consistent portal system.                            */
/* ============================================================ */

.tr-portal-ack {
    background: var(--tr-warm-ivory);
    padding: clamp(3rem, 6vw, 5.5rem) var(--page-padding-x) clamp(3rem, 6vw, 5rem);
    position: relative;
    min-height: var(--utility-min-height, 60vh);
    display: flex;
    align-items: flex-start;
}
.tr-portal-ack::before {
    /* Copper hairline directly under the midnight nav — ties the two zones. */
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--tr-copper-gold);
    opacity: 0.28;
}
.tr-portal-ack__inner {
    max-width: 720px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    width: 100%;
}
.tr-portal-ack__eyebrow {
    color: var(--tr-copper-gold-deep);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.tr-portal-ack__headline {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--tr-midnight-black);
}
.tr-portal-ack__headline em {
    font-style: italic;
    font-weight: 500;
    color: var(--tr-midnight-black);
}
.tr-portal-ack__rule {
    display: block;
    width: 56px;
    height: 2px;
    background: var(--tr-copper-gold);
    margin: 0.25rem 0;
}
.tr-portal-ack__body {
    margin: 0;
    max-width: 560px;
    font-size: var(--fs-lead);
    line-height: 1.6;
    color: var(--ink-soft);
}
.tr-portal-ack__actions {
    margin-top: var(--space-5);
}
.tr-portal-ack__cta {
    min-width: 280px;
    justify-content: center;
}
.tr-portal-ack__meta {
    margin-top: var(--space-8);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(11, 10, 9, 0.08);
    width: 100%;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
}
.tr-portal-ack__help {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.tr-portal-ack__help a {
    color: var(--tr-copper-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tr-portal-ack__help a:hover,
.tr-portal-ack__help a:focus-visible {
    color: var(--tr-midnight-black);
}
.tr-portal-ack__session {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--ink-soft);
}
.tr-portal-ack__session-label {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.72rem;
    color: var(--tr-copper-gold-deep);
    font-weight: 700;
}
.tr-portal-ack__session-email {
    color: var(--tr-midnight-black);
    font-weight: 500;
}
.tr-portal-ack__signout-form {
    display: inline;
    margin: 0;
}
.tr-portal-ack__signout {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--tr-copper-gold-deep);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.tr-portal-ack__signout:hover,
.tr-portal-ack__signout:focus-visible {
    color: var(--tr-midnight-black);
}

/* ============================================================ */
/* ORX-18 (owner-labeled ORX-17): spacing/composition rebuild    */
/* Tightens hero paddings, refines access cards to feel less     */
/* boxed, adds a composition anchor to /portal, adds an admin    */
/* login hero composition, and improves vertical rhythm on the   */
/* short utility pages so cards don't float in beige voids.      */
/* ============================================================ */

/* ---- Hero padding refinements ---- */
.tr-login-hero {
    padding-top: clamp(2.5rem, 4.5vw, 4.5rem);
    padding-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.tr-login-cards {
    padding-top: 0;
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

.tr-portal-ack {
    padding-top: clamp(3rem, 5vw, 4rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
}

/* ---- Access card refinement (less boxed) ---- */
.tr-access-card {
    border-top: 1px solid rgba(11, 10, 9, 0.08);
    padding: clamp(1.5rem, 2vw, 2rem);
    box-shadow: none;
    position: relative;
}
.tr-access-card::after {
    /* Interior top rule between chip and heading — reads as intentional
       trim rather than a stripe on top of the card. */
    content: "";
    position: absolute;
    left: clamp(1.5rem, 2vw, 2rem);
    right: clamp(1.5rem, 2vw, 2rem);
    top: calc(clamp(1.5rem, 2vw, 2rem) + 44px);
    height: 1px;
    background: rgba(184, 135, 78, 0.28);
}

/* ---- Portal ack composition anchor ---- */
.tr-portal-ack__inner {
    padding: clamp(2rem, 3vw, 2.5rem) 0;
    border-top: 1px solid rgba(184, 135, 78, 0.28);
    border-bottom: 1px solid rgba(184, 135, 78, 0.28);
}

/* ---- Admin login hero composition ---- */
.tr-admin-login {
    background: var(--tr-warm-ivory);
    padding: clamp(3rem, 5vw, 4rem) var(--page-padding-x);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100svh - var(--nav-height, 84px) - var(--footer-height, 320px));
}
.tr-admin-login::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--tr-copper-gold);
    opacity: 0.28;
}
.tr-admin-login__inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-4);
    padding: clamp(2rem, 3vw, 2.5rem) 0;
    border-top: 1px solid rgba(184, 135, 78, 0.28);
    border-bottom: 1px solid rgba(184, 135, 78, 0.28);
    width: 100%;
}
.tr-admin-login__eyebrow {
    color: var(--tr-copper-gold-deep);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}
.tr-admin-login__headline {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.015em;
    color: var(--tr-midnight-black);
    white-space: nowrap;
}
.tr-admin-login__headline em {
    font-style: italic;
    font-weight: 500;
    color: var(--tr-midnight-black);
}
.tr-admin-login__rule {
    display: block;
    width: 56px;
    height: 2px;
    background: var(--tr-copper-gold);
    margin: 0.25rem 0;
}
.tr-admin-login__body {
    margin: 0;
    max-width: 480px;
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--ink-soft);
}
.tr-admin-login__alert {
    width: 100%;
    max-width: 480px;
    text-align: left;
}
.tr-admin-login__actions {
    margin-top: var(--space-3);
}
.tr-admin-login__cta {
    min-width: 280px;
    justify-content: center;
}
.tr-admin-login__foot {
    margin: var(--space-3) 0 0;
    font-size: 0.9rem;
    color: var(--ink-soft);
}
.tr-admin-login__foot a {
    color: var(--tr-copper-gold-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tr-admin-login__foot a:hover,
.tr-admin-login__foot a:focus-visible {
    color: var(--tr-midnight-black);
}

/* Mobile — allow headline to wrap when nowrap would overflow. */
@media (max-width: 480px) {
    .tr-admin-login__headline {
        white-space: normal;
        font-size: 2rem;
    }
}