/* Net Avenue — Bootstrap 5.3 theme overrides */

:root { --na-ink: #221e1d; --na-body: #4a4443; --na-muted: #857d7a; --na-accent: #d1005a; --na-accent-dark: #a80049; --na-line: #efeae7; --na-line-2: #e2dedb; --na-paper: #fffdfc; --bs-body-bg: #f4f2f1; --bs-body-color: var(--na-body); --bs-body-font-family: 'Outfit', system-ui, sans-serif; --bs-link-color: var(--na-accent); --bs-link-hover-color: #9c0043; --bs-border-radius: 0; --bs-border-radius-sm: 0; --bs-border-radius-lg: 0; }

/* header + page */
.site-header { background: #2b2827; color: #b9b3b0; }

.brand { font-family: 'Playfair Display', serif; font-size: 18px; letter-spacing: .12em; color: #fff; }

.ticker { font-size: 13px; color: #ff2e86; }

.page-title { font-family: 'Playfair Display', serif; font-weight: 500; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; color: var(--na-ink); }

.page-sub { font-size: 1.0625rem; color: #6b6462; max-width: 55ch; }

/* document cards */
.doc-card { display: flex; flex-direction: column; gap: .75rem; min-height: 160px; padding: 1.5rem; border: 1px solid var(--na-line-2); background: #fff; text-align: left; font: inherit; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }

    .doc-card:hover { border-color: var(--na-ink); box-shadow: 0 14px 32px -20px rgba(20, 16, 15, .5); transform: translateY(-2px); }

    .doc-card:focus-visible { outline: 2px solid var(--na-accent); outline-offset: 2px; }

.doc-card__tag,
.modal-eyebrow { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--na-accent); }

.doc-card__title { font-family: 'Playfair Display', serif; font-size: 1.3125rem; line-height: 1.25; color: var(--na-ink); }

.doc-card__meta { font-size: .8125rem; color: var(--na-muted); }

/* modal shell */
.modal { --bs-modal-bg: var(--na-paper); }

.modal-backdrop { --bs-backdrop-bg: #1e1a19; --bs-backdrop-opacity: .6; }

.modal-content { border: 0; border-top: 3px solid var(--na-accent); box-shadow: 0 40px 90px -20px rgba(20, 16, 15, .55); }

.modal-header { padding: 1.625rem 2rem 1.25rem; border-bottom: 1px solid var(--na-line); }

.modal-title { font-family: 'Playfair Display', serif; font-weight: 500; font-size: 1.875rem; line-height: 1.15; /*color: var(--na-ink);*/ color: var(--na-accent) }

.modal-meta { font-size: .875rem; color: var(--na-muted); }

.btn-close-circle { flex: none; width: 44px; height: 44px; border: 1px solid #e7e1de; border-radius: 50%; background: #fff; color: #55504e; font-size: 1.375rem; line-height: 1; transition: background .2s ease, color .2s ease, border-color .2s ease; }

    .btn-close-circle:hover { background: var(--na-ink); border-color: var(--na-ink); color: #fff; }

    .btn-close-circle:focus-visible { outline: 2px solid var(--na-accent); outline-offset: 2px; }

/* letter */
.modal-body { padding: 1.75rem 2rem .5rem; }

.letter { max-width: 100ch; }

    .letter p { margin-bottom: 1.125rem; font-size: 1.03125rem; line-height: 1.75; text-wrap: pretty; }

.salutation { font-size: 1.3125rem; line-height: 1.5; color: var(--na-ink); }

.pullquote { margin: 1.5rem 0; padding: 1.125rem 1.375rem; border-left: 3px solid var(--na-accent); background: #f9f5f3; font-family: 'Playfair Display', serif; font-size: 1.1875rem; line-height: 1.55; color: #2b2523; }

.signoff { margin-top: 1.75rem; padding-top: 1.375rem; border-top: 1px solid var(--na-line); }

.signoff__mark { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: #f1eae7; font-family: 'Playfair Display', serif; font-size: 1.125rem; color: #8a6f66; }

.signoff__name { font-weight: 500; color: var(--na-ink); }
.signoff__role { font-size: .875rem; color: var(--na-muted); }

/* footer */
.modal-footer { padding: 1rem 2rem; border-top: 1px solid var(--na-line); }

.stamp { font-size: .8125rem; color: #918988; }

.btn-outline-ink { --bs-btn-color: #3b3634; --bs-btn-border-color: #ddd6d3; --bs-btn-bg: #fff; --bs-btn-hover-color: var(--na-ink); --bs-btn-hover-border-color: var(--na-ink); --bs-btn-hover-bg: #fff; --bs-btn-focus-shadow-rgb: 209, 0, 90; --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .75rem; --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; }

.btn-accent { --bs-btn-color: #fff; --bs-btn-bg: var(--na-accent); --bs-btn-border-color: var(--na-accent); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--na-accent-dark); --bs-btn-hover-border-color: var(--na-accent-dark); --bs-btn-active-bg: var(--na-accent-dark); --bs-btn-active-border-color: var(--na-accent-dark); --bs-btn-focus-shadow-rgb: 209, 0, 90; --bs-btn-padding-x: 1.5rem; --bs-btn-padding-y: .75rem; --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; }

/* mobile */
@media (max-width: 575.98px) {
    .modal-header { padding: 1.25rem 1.25rem 1rem; }
    .modal-title { font-size: 1.5rem; }
    .modal-body { padding: 1.375rem 1.25rem .25rem; }
    .letter p { font-size: 1rem; }
    .modal-footer { padding: .875rem 1.25rem; }
    .stamp { width: 100%; }
    .modal-footer .btn { flex: 1 1 0; }
}

/* print — letter only */
@media print {
    .site-header,
    main,
    .modal-backdrop,
    .btn-close-circle,
    .modal-footer { display: none !important; }

    .modal { position: static !important; display: block !important; overflow: visible !important; }

    .modal-dialog { max-width: none; margin: 0; }

    .modal-content { border: 0; box-shadow: none; }

    .modal-header { padding: 0 0 1rem; }

    .modal-body { overflow: visible !important; padding: 0; }

    .letter { max-width: none; }
}