/* =========================================================================
   ATRIA — shared styles
   Used by index.php (homepage) and rsvp.php (registration).
   ========================================================================= */

:root {
    --bg: #fbf9f5;
    --ink: #0a0a0a;
    --muted: #6a6a6a;
    --accent: #d14119;
    --line: rgba(10, 10, 10, 0.08);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { width: 100%; min-height: 100%; }

body {
    background: var(--bg);
    color: var(--ink);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    min-height: 100vh;
}

/* Pages where we want fixed-viewport behaviour (homepage) lock overflow.
   Pages with longer content (rsvp) don't need this. */
body.lock-viewport {
    height: 100%;
    overflow: hidden;
}

/* ---------- Background canvas ---------- */
.bg-gl {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    display: block;
    pointer-events: none;
}

/* ---------- Page grid ---------- */
.page {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 40px 56px;
}

header, footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}

/* ---------- Top-left ATRIA wordmark (rsvp / non-home pages) ---------- */
.home-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
    transition: opacity 0.3s ease;
}
.home-link:hover { opacity: 0.6; }

.home-link img {
    display: block;
    height: 18px;
    width: auto;
}

/* ---------- Top-right tagline + small L mark ---------- */
.tagline {
    margin-left: auto;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    font-size: 11px;
    letter-spacing: 0.14em;
    line-height: 1.55;
    font-weight: 500;
    text-transform: uppercase;
    color: var(--ink);
}
.tagline span { text-align: right; }

/* L bracket — corner at top-right, arms going left + down */
.l-small {
    display: inline-block;
    position: relative;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    margin-top: -2px;
}
.l-small::before,
.l-small::after {
    content: "";
    position: absolute;
    background: var(--accent);
}
.l-small::before { right: 0; top: 0; width: 16px; height: 46px; }
.l-small::after  { right: 0; top: 0; width: 46px; height: 16px; }

/* L bracket — corner at bottom-left, arms going right + up */
.l-big {
    position: relative;
    width: 56px;
    height: 56px;
}
.l-big::before,
.l-big::after {
    content: "";
    position: absolute;
    background: var(--accent);
}
.l-big::before { left: 0; bottom: 0; width: 20px; height: 56px; }
.l-big::after  { left: 0; bottom: 0; width: 56px; height: 20px; }

/* ---------- Main / center stack ---------- */
main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 24px;
    gap: 40px;
}

/* RSVP page needs vertical breathing room around its taller content */
body.rsvp-page main {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ---------- Index page: large ATRIA wordmark + subtitle ---------- */
h1.logo-text {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: clamp(80px, 16vw, 260px);
    line-height: 0.9;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 32px;
}

img.logo {
    width: clamp(280px, 56vw, 800px);
    height: auto;
    margin-bottom: 32px;
    display: block;
}

.subtitle {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(13px, 1.4vw, 16px);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    max-width: 640px;
}

/* ---------- RSVP page: invitation block ---------- */
.invite {
    text-align: center;
    max-width: 560px;
}

.invite h1 {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(44px, 6.5vw, 80px);
    line-height: 1;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
}

.details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 16px;
    line-height: 1.5;
}

.details p { font-weight: 400; }

.details .big {
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.01em;
    margin-bottom: 6px;
}

.details em {
    font-style: italic;
    color: var(--muted);
}

.details .meta {
    margin-top: 16px;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
}

/* ---------- RSVP form ---------- */
.rsvp-form {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-error {
    padding: 12px 16px;
    border-left: 2px solid var(--accent);
    background: rgba(209, 65, 25, 0.06);
    font-size: 13px;
    color: var(--ink);
}

.field-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.field label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
}

.field label .req {
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: 400;
    color: var(--muted);
    text-transform: lowercase;
}

.field .help {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.45;
    margin: -2px 0 4px;
    font-weight: 400;
}

.field input {
    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--ink);
    border-radius: 0;
    padding: 8px 0 10px;
    outline: none;
    transition: border-color 0.2s ease;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
}

.field input:focus { border-bottom-color: var(--accent); }
.field input::placeholder { color: var(--muted); }

.rsvp-submit {
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--ink);
    border: none;
    padding: 18px 40px;
    cursor: pointer;
    transition: background 0.2s ease;
    align-self: center;
    margin-top: 12px;
}

.rsvp-submit:hover { background: var(--accent); }

/* ---------- RSVP success ---------- */
.rsvp-success {
    text-align: center;
    max-width: 480px;
    padding: 80px 0;
}

.rsvp-success h1 {
    font-family: 'Inter', sans-serif;
    font-style: italic;
    font-weight: 300;
    font-size: clamp(40px, 6vw, 72px);
    margin-bottom: 24px;
}

.rsvp-success p {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink);
}

/* ---------- Partners / Sponsors ---------- */
.partners {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 40px;
    margin-top: 16px;
    border-top: 1px solid var(--line);
}

.partner-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.partner-label {
    font-size: 11px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
}

.partner-logos {
    display: flex;
    gap: 56px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

/* Force a 2-per-row layout (used when there are 4 logos in a group) */
.partner-logos.two-cols {
    max-width: 380px;
    row-gap: 32px;
}

/* Each logo gets a fixed-size slot — keeps the row balanced regardless of
   the original logo's aspect ratio. */
.partner-logo {
    width: 161px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Placeholder variant — dashed outline so unfilled slots are obvious */
.partner-logo.placeholder {
    border: 1px dashed var(--line);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--muted);
    padding: 0 12px;
    text-align: center;
}

/* ---------- Footer ---------- */
footer { align-items: flex-end; }

.footer-left {
    display: flex;
    align-items: flex-end;
    gap: 22px;
}

.footer-right {
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 500;
    text-align: right;
    line-height: 1.6;
}

.footer-right a {
    color: var(--ink);
    text-decoration: none;
    transition: color 0.3s ease;
}
.footer-right a:hover { color: var(--accent); }

/* ---------- Fade-in ---------- */
.fade {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}
.fade.d1 { animation-delay: 0.1s; }
.fade.d2 { animation-delay: 0.3s; }
.fade.d3 { animation-delay: 0.5s; }
.fade.d4 { animation-delay: 0.7s; }
.fade.d5 { animation-delay: 0.9s; }

@keyframes fadeIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
    .page { padding: 24px 22px; }

    main { padding: 50px 0 64px 0; gap: 40px; }

    .tagline { font-size: 10px; gap: 12px; }

    .home-link img { height: 14px; }

    .l-small { width: 32px; height: 32px; }
    .l-small::before { width: 11px; height: 32px; }
    .l-small::after  { width: 32px; height: 11px; }

    .l-big { width: 38px; height: 38px; }
    .l-big::before { width: 14px; height: 38px; }
    .l-big::after  { width: 38px; height: 14px; }

    h1.logo-text { font-size: clamp(64px, 22vw, 140px); }

    .field-group { grid-template-columns: 1fr; gap: 24px; }

    .partners { padding-top: 32px; gap: 32px; }
    .partner-logos { gap: 28px; }
    .partner-logo { width: 131px; height: 48px; }
    .partner-logo.placeholder { font-size: 10px; }

    body.rsvp-page main { padding-top: 60px; }
    .details { padding: 10px 0; }

    /* Keep footer in a row on mobile — L on the left, contact on the right.
       Avoids stacking the email on top of the L mark. */
    footer {
        flex-direction: row;
        align-items: flex-end;
        gap: 16px;
    }
    .footer-right {
        text-align: right;
        font-size: 10px;
        letter-spacing: 0.16em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-gl { display: none; }
    .fade { animation: none; opacity: 1; transform: none; }
}