/* ----- Reset & Base ----- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: #fcf8f3;
    color: #1e1e1e;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

/* No image may exceed its column, whatever its intrinsic size. */
img,
svg {
    max-width: 100%;
}

/* ----- Standardized Container ----- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ----- Standardized Section Spacing ----- */
/* padding-block, not the padding shorthand: the shorthand would reset
   .container's horizontal gutters to zero and push content to the
   screen edge on mobile. */
.section {
    padding-block: 3rem;
}

.section-sm {
    padding-block: 2rem;
}

.section-lg {
    padding-block: 4rem;
}

/* ----- Buttons ----- */
.btn {
    display: inline-block;
    padding: 0.9rem 2.4rem;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    border-radius: 0;
}

.btn-primary {
    background: #f58987;
    color: #fff;
    box-shadow: 0 4px 14px rgba(245, 137, 135, 0.35);
}
.btn-primary:hover {
    background: #e07371;
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(245, 137, 135, 0.45);
}

.btn-outline {
    background: transparent;
    color: #f58987;
    border: 2px solid #f58987;
}
.btn-outline:hover {
    background: #f58987;
    color: #fff;
    transform: translateY(-3px);
}

/* ----- Section Titles ----- */
.section-title {
    font-size: 2.6rem;
    font-weight: 800;
    letter-spacing: -1px;
    margin-bottom: 0.5rem;
}
.section-title .highlight {
    color: #f58987;
}
.section-subtitle {
    color: #777;
    font-size: 1.1rem;
    max-width: 600px;
}

/* ============================================================
           HEADER
        ============================================================ */
header {
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
header.container {
    margin-top: 6px;
}

.logo {
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #1e1e1e;
    text-decoration: none;
    margin: 0;
    padding: 0;
}
.logo:focus-visible {
    outline: 2px solid #f58987;
    outline-offset: 4px;
}
.logo span {
    color: #f58987;
}
.logo .tagline {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: #888;
    text-transform: uppercase;
    margin-top: 2px;
    margin-left: 0;
    padding-left: 0;
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: #1e1e1e;
    font-size: 1.15rem;
    width: 2.9rem;
    height: 2.9rem;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.3s ease, border-color 0.3s ease,
        color 0.3s ease;
}
.nav-toggle:hover,
.nav-toggle[aria-expanded='true'] {
    background: #f58987;
    border-color: #f58987;
    color: #fff;
}
.nav-toggle:focus-visible {
    outline: 2px solid #f58987;
    outline-offset: 3px;
}

.nav-links {
    display: flex;
    gap: 2.2rem;
    list-style: none;
    font-weight: 500;
    font-size: 0.95rem;
    margin: 0;
    padding: 0;
}
.nav-links a {
    color: #2d2d2d;
    text-decoration: none;
    transition: color 0.3s;
    position: relative;
}
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #f58987;
    transition: width 0.3s ease;
}
.nav-links a:hover {
    color: #f58987;
}
.nav-links a:hover::after {
    width: 100%;
}

/* ============================================================
           HERO
        ============================================================ */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-content h1 {
    font-size: 3.6rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 1.2rem;
}
.hero-content h1 .highlight {
    color: #f58987;
}
.hero-content p {
    font-size: 1.15rem;
    color: #555;
    max-width: 520px;
    margin-bottom: 2rem;
}

.hero-badge {
    display: inline-block;
    background: rgba(245, 137, 135, 0.08);
    color: #f58987;
    padding: 0.4rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 1.2rem;
    border-radius: 0;
}
.hero-badge i {
    margin-right: 0.5rem;
}

.btn-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
}
.hero-image {
    width: 100%;
    max-width: 540px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.10);
    aspect-ratio: 16/9;
    background: #e8ddd0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s ease;
    border-radius: 0;
}
.hero-image:hover {
    transform: scale(1.01);
}
.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
           POEM — FULL WIDTH PINK BACKGROUND
        ============================================================ */
.poem-section-fullwidth {
    background: #fce4e4;
    padding-block: 3rem;
    width: 100%;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Layered circles tucked into opposing corners — mostly cropped by
   the band's edges, so they read as quiet shapes rather than motifs. */
.poem-section-fullwidth::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(circle 165px at -30px -45px,
            rgba(255, 255, 255, 0.5) 99%, transparent 100%),
        radial-gradient(circle 95px at 145px 5px,
            rgba(245, 137, 135, 0.1) 99%, transparent 100%),
        radial-gradient(circle 55px at 255px -15px,
            rgba(255, 255, 255, 0.3) 99%, transparent 100%),
        radial-gradient(circle 195px at calc(100% + 45px) calc(100% + 35px),
            rgba(255, 255, 255, 0.42) 99%, transparent 100%),
        radial-gradient(circle 120px at calc(100% - 160px) calc(100% - 5px),
            rgba(245, 137, 135, 0.09) 99%, transparent 100%),
        radial-gradient(circle 62px at calc(100% - 285px) calc(100% + 12px),
            rgba(255, 255, 255, 0.26) 99%, transparent 100%);
}

.poem-section-fullwidth > .container {
    position: relative;
    z-index: 1;
}

.poem-block {
    background: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

.poem-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: center;
}

/* --- Photo Stack: One on top of another --- */
.poem-images {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0;
}

.poem-stack {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.poem-image {
    position: absolute;
    background: #ffffff;
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
    border-radius: 0;
    transition: transform 0.3s ease, z-index 0.3s;
}

.poem-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.photo-credit {
    display: block;
    padding: 0.4rem 0.2rem 0.1rem;
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.3;
    color: #9a9a9a;
    text-align: right;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Hovering lifts the photo above its neighbour (z-index: 10), so the
   credit is only revealed once it is guaranteed to be visible. */
.poem-image:hover .photo-credit {
    opacity: 1;
}

/* Touch devices have no hover state — keep the credit visible there. */
@media (hover: none) {
    .photo-credit {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .photo-credit {
        transition: none;
    }
}

/* Back photo — behind, rotated left */
.photo-back {
    width: 90%;
    transform: rotate(-3deg);
    z-index: 1;
    left: -5%;
    top: -30%;
}

/* Front photo — in front, rotated right */
.photo-front {
    width: 85%;
    transform: rotate(4deg);
    z-index: 2;
    right: -5%;
    bottom: -30%;
}

.poem-image:hover {
    transform: scale(1.02) rotate(0deg);
    z-index: 10;
}

.poem-content {
    display: flex;
    flex-direction: column;
}

.poem {
    font-family: 'Georgia', serif;
    font-size: 1.15rem;
    line-height: 1.9;
    color: #2d2d2d;
    font-style: italic;
    padding: 1rem 0;
}

.poem-author {
    margin-top: 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #888;
    text-align: left;
    font-style: normal;
}

/* ============================================================
           ABOUT
        ============================================================ */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.about-text p {
    color: #444;
    font-size: 1.05rem;
    margin-bottom: 1.2rem;
}
.about-text p strong {
    color: #f58987;
}

.about-image {
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #e8ddd0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    border-radius: 0;
}
.about-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============================================================
           PERFECT PLACE
        ============================================================ */
.occasions-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
}

.occasion-item {
    border-radius: 0;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.occasion-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}

.occasion-image {
    overflow: hidden;
    background: #f5ede6;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.occasion-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.occasion-item:hover .occasion-image img {
    transform: scale(1.02);
}

.occasion-text {
    padding: 1.2rem 1.5rem 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.occasion-text h4 {
    font-size: 1rem;
    font-weight: 700;
    color: #f58987;
    margin-bottom: 0.3rem;
    letter-spacing: -0.3px;
}

.occasion-text p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}
.occasion-text p:not(:last-child) {
    margin-bottom: 0.6rem;
}

.occasion-item.span-full {
    grid-column: 1 / -1;
}

.occasion-item.portrait-item {
    grid-row: span 2;
}

.occasion-item.portrait-item .occasion-image {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    border-radius: 0;
    overflow: hidden;
}

.occasion-item.portrait-item .occasion-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    aspect-ratio: 3 / 4;
}

/* ============================================================
           NOTABLE GUESTS
        ============================================================ */
.guests-badge {
    display: inline-block;
    background: rgba(245, 137, 135, 0.08);
    color: #f58987;
    padding: 0.4rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 1.2rem;
}
.guests-badge i {
    margin-right: 0.5rem;
}

.guests-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.85fr 0.85fr;
    gap: 1.5rem;
    margin-top: 2.5rem;
    align-items: stretch;
}

.guest-card {
    position: relative;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.guest-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}

.guest-photo {
    position: relative;
    overflow: hidden;
    background: #f5ede6;
    height: 100%;
}
.guest-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
/* The landscape group shot sets the row height; the portrait beside it
   fills that height and is cropped from its sides, not its subjects. */
.guest-card--wide .guest-photo img {
    aspect-ratio: 4 / 3;
    height: auto;
}
.guest-card--tall .guest-photo img {
    object-position: center 22%;
}
.guest-card:hover .guest-photo img {
    transform: scale(1.03);
}

.guest-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 3rem 1.5rem 1.3rem;
    color: #fff;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.4) 55%,
        rgba(0, 0, 0, 0) 100%
    );
}
.guest-role {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #f58987;
    margin-bottom: 0.3rem;
}
.guest-name {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.2;
}
.guest-card--wide .guest-name {
    font-size: 1.45rem;
}
.guest-note {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.75);
}

@media (prefers-reduced-motion: reduce) {
    .guest-card,
    .guest-photo img {
        transition: none;
    }
    .guest-card:hover {
        transform: none;
    }
    .guest-card:hover .guest-photo img {
        transform: none;
    }
}

/* ============================================================
           FEATURES
        ============================================================ */
.features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.feature-item {
    background: #fff;
    padding: 2rem 1.8rem;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    border-radius: 0;
}
.feature-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
    border-color: rgba(245, 137, 135, 0.15);
}
.feature-item .icon {
    font-size: 2.8rem;
    color: #f58987;
    margin-bottom: 1rem;
}
.feature-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}
.feature-item p {
    color: #666;
    font-size: 0.95rem;
}

/* ============================================================
           LOCATIONS
        ============================================================ */
.locations-badge {
    display: inline-block;
    background: rgba(245, 137, 135, 0.08);
    color: #f58987;
    padding: 0.4rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 1.2rem;
}
.locations-badge i {
    margin-right: 0.5rem;
}

.locations-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: start;
    margin-top: 2.5rem;
}

.location-city {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 1.6rem 1.6rem 0.6rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.location-city:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
    border-color: rgba(245, 137, 135, 0.15);
}

.city-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.8rem;
    padding-bottom: 0.9rem;
    border-bottom: 2px solid #f58987;
}
.city-name {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #1e1e1e;
}
.city-count {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #999;
    white-space: nowrap;
}

.branch-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.branch-list li + li .branch-link {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.branch-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 0;
    color: #2d2d2d;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
}
.branch-link .pin {
    color: #c9b8a8;
    font-size: 0.9rem;
    width: 1rem;
    text-align: center;
    transition: color 0.3s ease;
}
.branch-link .go {
    margin-left: auto;
    font-size: 0.75rem;
    color: #f58987;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.branch-link:hover,
.branch-link:focus-visible {
    color: #f58987;
    padding-left: 0.4rem;
}
.branch-link:hover .pin,
.branch-link:focus-visible .pin {
    color: #f58987;
}
.branch-link:hover .go,
.branch-link:focus-visible .go {
    opacity: 1;
    transform: translateX(0);
}
.branch-link:focus-visible {
    outline: 2px solid #f58987;
    outline-offset: 3px;
}

.locations-note {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    color: #777;
    font-size: 0.95rem;
}
.locations-note a {
    color: #f58987;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 137, 135, 0.4);
    transition: border-color 0.3s ease;
}
.locations-note a:hover {
    border-color: #f58987;
}

@media (prefers-reduced-motion: reduce) {
    .location-city,
    .branch-link,
    .branch-link .pin,
    .branch-link .go {
        transition: none;
    }
    .location-city:hover {
        transform: none;
    }
    .branch-link:hover {
        padding-left: 0;
    }
}

/* ============================================================
           CONTACT
        ============================================================ */
.contact-band {
    background: #1e1e1e;
    color: #fff;
    padding-block: 4.5rem;
    width: 100%;
}

.contact-inner {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 4rem;
    align-items: center;
}

.contact-badge {
    display: inline-block;
    background: rgba(245, 137, 135, 0.14);
    color: #f58987;
    padding: 0.4rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 1.2rem;
}
.contact-badge i {
    margin-right: 0.5rem;
}

.contact-lead h2 {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
    margin-bottom: 1rem;
}
.contact-lead h2 .highlight {
    color: #f58987;
}
.contact-lead p {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.05rem;
    max-width: 460px;
}

.contact-phone {
    display: inline-block;
    margin-top: 2rem;
    text-decoration: none;
}
.contact-phone .label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 0.35rem;
}
.contact-phone .number {
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #f58987;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s ease, color 0.3s ease;
}
.contact-phone:hover .number,
.contact-phone:focus-visible .number {
    border-color: #f58987;
}

.contact-actions {
    display: grid;
    gap: 1rem;
}

.contact-action {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.4rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    transition: background 0.3s ease, border-color 0.3s ease,
        transform 0.3s ease;
}
.contact-action .ico {
    width: 2.75rem;
    height: 2.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 137, 135, 0.14);
    color: #f58987;
    font-size: 1.1rem;
    transition: background 0.3s ease, color 0.3s ease;
}
.contact-action .copy {
    display: flex;
    flex-direction: column;
}
.contact-action .title {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.2px;
}
.contact-action .sub {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 0.15rem;
}
.contact-action .go {
    margin-left: auto;
    font-size: 0.8rem;
    color: #f58987;
    opacity: 0.5;
    transform: translateX(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.contact-action:hover,
.contact-action:focus-visible {
    background: rgba(245, 137, 135, 0.08);
    border-color: rgba(245, 137, 135, 0.5);
    transform: translateY(-3px);
}
.contact-action:hover .go,
.contact-action:focus-visible .go {
    opacity: 1;
    transform: translateX(0);
}

.contact-action.is-primary {
    background: #f58987;
    border-color: #f58987;
    color: #1e1e1e;
}
.contact-action.is-primary .ico {
    background: rgba(30, 30, 30, 0.12);
    color: #1e1e1e;
}
.contact-action.is-primary .sub {
    color: rgba(30, 30, 30, 0.7);
}
.contact-action.is-primary .go {
    color: #1e1e1e;
}
.contact-action.is-primary:hover,
.contact-action.is-primary:focus-visible {
    background: #e07371;
    border-color: #e07371;
}

.contact-action:focus-visible,
.contact-phone:focus-visible {
    outline: 2px solid #f58987;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .contact-action,
    .contact-action .go,
    .contact-phone .number {
        transition: none;
    }
    .contact-action:hover {
        transform: none;
    }
}

/* ============================================================
           FOOTER
        ============================================================ */
footer {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
/* footer also carries .container, whose padding shorthand outranks a
   bare element selector — so the vertical padding needs to match it. */
footer.container {
    padding-block: 1.15rem;
}
.contact-band + footer {
    border-top: none;
}
.footer-social {
    display: flex;
    gap: 1.5rem;
}
.footer-social a {
    color: #888;
    font-size: 1.4rem;
    transition: all 0.3s ease;
}
.footer-social a:hover {
    color: #f58987;
    transform: translateY(-3px);
}
.footer-text {
    color: #999;
    font-size: 0.85rem;
}
.footer-credit {
    color: #999;
    font-size: 0.85rem;
}
.footer-credit a {
    color: #f58987;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 137, 135, 0.4);
    transition: border-color 0.3s ease;
}
.footer-credit a:hover {
    border-color: #f58987;
}
.footer-credit a:focus-visible {
    outline: 2px solid #f58987;
    outline-offset: 3px;
}

/* ============================================================
           RESPONSIVE
        ============================================================ */
@media (max-width: 992px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 2.5rem;
    }
    .hero-content p {
        margin: 0 auto 2rem;
    }
    .btn-group {
        justify-content: center;
    }
    .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .about-text p {
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .occasions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
    }
    .occasion-item.portrait-item {
        grid-row: span 1;
    }
    .occasion-item.portrait-item .occasion-image img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
    }
    .features {
        grid-template-columns: repeat(2, 1fr);
    }
    .guests-grid {
        grid-template-columns: 1fr 1fr;
    }
    .guest-card--wide {
        grid-column: 1 / -1;
    }
    .guest-card--tall .guest-photo img {
        aspect-ratio: 4 / 5;
        height: auto;
    }
    .locations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.2rem;
    }
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }
    .contact-lead p {
        margin-left: auto;
        margin-right: auto;
    }
    .contact-action {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .poem-wrapper {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Stacked layout: the photos hang above and below the stack box,
       so the column needs padding deeper than the overhang or the
       back photo collides with the top of the pink band. */
    .poem-images {
        padding: 4rem 0 3rem;
    }

    .poem-stack {
        max-width: 380px;
        aspect-ratio: 4 / 3;
    }

    .photo-back {
        width: 88%;
        left: 0;
        top: -15%;
    }

    .photo-front {
        width: 82%;
        right: 0;
        bottom: -15%;
    }

    .poem-image {
        padding: 0.4rem;
    }

    .poem {
        font-size: 1rem;
        padding: 0.5rem 0;
    }

    .poem-section-fullwidth {
        padding-block: 2rem;
    }

    .poem-section-fullwidth::before {
        background:
            radial-gradient(circle 100px at -25px -35px,
                rgba(255, 255, 255, 0.5) 99%, transparent 100%),
            radial-gradient(circle 58px at 85px 0px,
                rgba(245, 137, 135, 0.1) 99%, transparent 100%),
            radial-gradient(circle 125px at calc(100% + 35px) calc(100% + 25px),
                rgba(255, 255, 255, 0.42) 99%, transparent 100%),
            radial-gradient(circle 70px at calc(100% - 95px) calc(100% - 5px),
                rgba(245, 137, 135, 0.09) 99%, transparent 100%);
    }

    .section {
        padding-block: 2rem;
    }
    .section-lg {
        padding-block: 3rem;
    }
}

@media (max-width: 600px) {
    .container {
        padding-inline: 1.25rem;
    }
    .hero-content h1 {
        font-size: 2.4rem;
    }
    .occasions-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .occasion-item.span-full {
        grid-column: 1;
    }
    .features {
        grid-template-columns: 1fr;
    }
    .guests-grid {
        grid-template-columns: 1fr;
    }
    .guest-card--wide {
        grid-column: 1;
    }
    .guest-card--tall .guest-photo img {
        aspect-ratio: 4 / 5;
        height: auto;
    }
    .locations-grid {
        grid-template-columns: 1fr;
    }
    .locations-note {
        flex-direction: column;
        align-items: flex-start;
    }
    /* Mobile nav becomes a dropdown panel anchored to the header. */
    header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        position: relative;
        flex-wrap: nowrap;
        gap: 0.75rem;
    }
    /* .container's padding shorthand outranks a bare element
       selector, so header padding has to be set at this specificity. */
    header.container {
        padding-block: 0.85rem;
    }
    /* The logo yields width so the button never wraps below it. */
    .logo {
        font-size: 1.15rem;
        line-height: 1.25;
        min-width: 0;
        flex: 1 1 auto;
    }
    .logo .tagline {
        font-size: 0.62rem;
        letter-spacing: 0.8px;
    }
    .nav-toggle {
        display: flex;
        flex-shrink: 0;
    }
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 1.25rem;
        right: 1.25rem;
        flex-direction: column;
        gap: 0;
        background: #fff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        box-shadow: 0 14px 40px rgba(0, 0, 0, 0.1);
        padding: 0.35rem 0;
        font-size: 1rem;
        z-index: 60;
    }
    .nav-links.is-open {
        display: flex;
    }
    .nav-links li + li {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
    .nav-links a {
        display: block;
        padding: 0.9rem 1.25rem;
    }
    .nav-links a::after {
        display: none;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible {
        background: rgba(245, 137, 135, 0.08);
        color: #f58987;
    }
    .section-title {
        font-size: 2rem;
    }
    .contact-band {
        padding-block: 3rem;
    }
    .contact-lead h2 {
        font-size: 2rem;
    }
    .contact-phone .number {
        font-size: 1.6rem;
    }
    .contact-action {
        padding: 1.2rem;
        gap: 0.9rem;
    }
    .guest-overlay {
        padding: 2.5rem 1.2rem 1.1rem;
    }
    .guest-name,
    .guest-card--wide .guest-name {
        font-size: 1.2rem;
    }
    .locations-badge,
    .guests-badge,
    .contact-badge,
    .hero-badge {
        font-size: 0.75rem;
        padding: 0.35rem 1rem;
    }
    footer {
        flex-direction: column;
        text-align: center;
        gap: 0.35rem;
    }
    footer.container {
        padding-block: 0.9rem 0.85rem;
    }
    .footer-text {
        order: 2;
        margin-top: 0;
    }
    .footer-credit {
        order: 3;
        font-size: 0.78rem;
    }
    .footer-social {
        order: 1;
        gap: 0.25rem;
    }
    .footer-social a {
        padding: 0.3rem;
        font-size: 1.25rem;
    }
}

@media (max-width: 480px) {
    .poem-stack {
        max-width: 320px;
        aspect-ratio: 4 / 3;
    }

    /* The photos are absolutely positioned and rotated, so any
       negative offset pushes past the container and creates a
       horizontal scrollbar on narrow screens. Pull them inside. */
    .photo-back {
        width: 84%;
        left: 0;
        top: -15%;
        transform: rotate(-2deg);
    }

    .photo-front {
        width: 80%;
        right: 0;
        bottom: -15%;
        transform: rotate(3deg);
    }

    .poem-image {
        padding: 0.3rem;
    }

    .poem {
        font-size: 0.9rem;
        padding: 0.3rem 0;
    }

    .poem-author {
        font-size: 0.8rem;
    }
}

/* Small phones — the largest type still crowds at 360px and below. */
@media (max-width: 400px) {
    .hero-content h1 {
        font-size: 2.05rem;
    }
    .section-title,
    .contact-lead h2 {
        font-size: 1.75rem;
    }
    .logo {
        font-size: 0.98rem;
    }
    header {
        gap: 0.6rem;
    }
    .nav-toggle {
        width: 2.6rem;
        height: 2.6rem;
        font-size: 1.05rem;
    }
    .contact-phone .number {
        font-size: 1.45rem;
    }
    .btn {
        padding: 0.85rem 1.6rem;
        font-size: 0.95rem;
    }
    .btn-group {
        gap: 0.7rem;
    }
    .contact-action .ico {
        width: 2.4rem;
        height: 2.4rem;
    }
}

/* ============================================================
           ARTICLE / BLOG
        ============================================================ */
.breadcrumb {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 1.2rem;
}
.breadcrumb a {
    color: #f58987;
    text-decoration: none;
    font-weight: 500;
}
.breadcrumb a:hover {
    text-decoration: underline;
}
.breadcrumb .sep {
    margin: 0 0.5rem;
    color: #ccc;
}

.article-head {
    max-width: 760px;
}
.article-head h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.4px;
    margin-bottom: 1rem;
}
.article-head h1 .highlight {
    color: #f58987;
}
.article-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #555;
}
.article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    font-size: 0.85rem;
    color: #888;
}
.article-meta i {
    color: #f58987;
    margin-right: 0.4rem;
}

/* ----- Body typography ----- */
.prose {
    max-width: 760px;
}
.prose h2 {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.7px;
    line-height: 1.2;
    margin: 3rem 0 1rem;
}
.prose h2 .highlight {
    color: #f58987;
}
.prose h2:first-child {
    margin-top: 0;
}
.prose h3 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2rem 0 0.6rem;
}
.prose p {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 1.2rem;
}
.prose p strong {
    color: #1e1e1e;
    font-weight: 700;
}
.prose a {
    color: #f58987;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 137, 135, 0.4);
}
.prose a:hover {
    border-color: #f58987;
}
.prose ul {
    margin: 0 0 1.4rem 0;
    padding: 0;
    list-style: none;
}
.prose ul li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.7rem;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #444;
}
.prose ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 7px;
    height: 7px;
    background: #f58987;
}

/* Foreign or local terms called out inline. */
.term {
    font-style: italic;
    color: #1e1e1e;
    font-weight: 600;
}

/* ----- Figures ----- */
.article-figure {
    margin: 2rem 0 2.4rem;
}
.article-figure img {
    display: block;
    width: 100%;
    height: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}
.article-figure figcaption {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: #999;
    line-height: 1.5;
}
.article-figure figcaption .credit {
    color: #bbb;
}

.figure-wide {
    max-width: none;
}

/* ----- Pull quote ----- */
.pull-quote {
    margin: 2.5rem 0;
    padding: 1.6rem 0 1.6rem 1.6rem;
    border-left: 3px solid #f58987;
    font-family: 'Georgia', serif;
    font-style: italic;
    font-size: 1.3rem;
    line-height: 1.6;
    color: #2d2d2d;
}

/* ----- Callout box ----- */
.callout {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-top: 3px solid #f58987;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    padding: 1.6rem 1.8rem;
    margin: 2rem 0 2.4rem;
}
.callout h4 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #f58987;
    margin-bottom: 0.9rem;
}
.callout dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.55rem 1.4rem;
    margin: 0;
    font-size: 0.95rem;
}
.callout dt {
    font-weight: 700;
    color: #1e1e1e;
    white-space: nowrap;
}
.callout dd {
    margin: 0;
    color: #555;
}
.callout .note {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    font-size: 0.85rem;
    color: #888;
}

/* ----- The trio cards ----- */
.trio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin: 2rem 0 2.5rem;
}
.trio-card {
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.trio-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
}
.trio-photo {
    overflow: hidden;
    background: #f5ede6;
}
/* Square crop: the three source photos are a mix of portrait and
   landscape, and a square treats both fairly. */
.trio-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.trio-card:hover .trio-photo img {
    transform: scale(1.03);
}
.trio-text {
    padding: 1.1rem 1.3rem 1.4rem;
}
.trio-text h4 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f58987;
    margin-bottom: 0.15rem;
}
.trio-text .en {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #aaa;
    margin-bottom: 0.5rem;
}
.trio-text p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* ----- Article CTA ----- */
.article-cta {
    background: #fce4e4;
    padding: 2.2rem 2rem;
    margin: 3rem 0 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.article-cta h3 {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin-bottom: 0.3rem;
}
.article-cta p {
    color: #6b5b5b;
    font-size: 0.95rem;
    margin: 0;
    max-width: 420px;
}
.article-cta .btn-group {
    flex-shrink: 0;
}

/* The coral buttons sit on a pink panel here, where white-on-coral drops
   to 2.4:1 and coral-on-pink to 2.0:1. Dark type restores legibility
   without introducing a new colour. */
.article-cta .btn-primary {
    background: #f58987;
    color: #1e1e1e;
    box-shadow: 0 4px 14px rgba(200, 95, 93, 0.3);
}
.article-cta .btn-primary:hover {
    background: #e07371;
    color: #1e1e1e;
}
.article-cta .btn-outline {
    color: #1e1e1e;
    border-color: #1e1e1e;
}
.article-cta .btn-outline:hover {
    background: #1e1e1e;
    color: #fff;
    border-color: #1e1e1e;
}

@media (prefers-reduced-motion: reduce) {
    .trio-card,
    .trio-photo img {
        transition: none;
    }
    .trio-card:hover {
        transform: none;
    }
    .trio-card:hover .trio-photo img {
        transform: none;
    }
}

@media (max-width: 768px) {
    .article-head h1 {
        font-size: 2.3rem;
    }
    .article-lead {
        font-size: 1.1rem;
    }
    .prose h2 {
        font-size: 1.6rem;
        margin-top: 2.4rem;
    }
    .trio-grid {
        grid-template-columns: 1fr 1fr;
    }
    .pull-quote {
        font-size: 1.15rem;
        padding-left: 1.2rem;
    }
}

@media (max-width: 600px) {
    .article-head h1 {
        font-size: 1.95rem;
        letter-spacing: -1px;
    }
    .prose h2 {
        font-size: 1.45rem;
    }
    .prose p,
    .prose ul li {
        font-size: 1rem;
    }
    .trio-grid {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }
    .callout {
        padding: 1.3rem 1.2rem;
    }
    .callout dl {
        grid-template-columns: 1fr;
        gap: 0.15rem;
    }
    .callout dd {
        margin-bottom: 0.6rem;
    }
    .article-cta {
        padding: 1.6rem 1.3rem;
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ============================================================
           ARTICLE TEASER (homepage)
        ============================================================ */
.teaser {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease,
        border-color 0.3s ease;
}
.teaser:hover,
.teaser:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.07);
    border-color: rgba(245, 137, 135, 0.15);
}
.teaser:focus-visible {
    outline: 2px solid #f58987;
    outline-offset: 3px;
}

.teaser-photo {
    overflow: hidden;
    background: #f5ede6;
}
.teaser-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.teaser:hover .teaser-photo img {
    transform: scale(1.03);
}

.teaser-body {
    padding: 2.2rem 2.4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.teaser-tag {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #f58987;
    margin-bottom: 0.7rem;
}
.teaser-body h3 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.2;
    margin-bottom: 0.7rem;
}
.teaser-body p {
    color: #666;
    font-size: 0.98rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
}
.teaser-more {
    font-size: 0.9rem;
    font-weight: 700;
    color: #f58987;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}
.teaser-more i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}
.teaser:hover .teaser-more i {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .teaser,
    .teaser-photo img,
    .teaser-more i {
        transition: none;
    }
    .teaser:hover {
        transform: none;
    }
    .teaser:hover .teaser-photo img,
    .teaser:hover .teaser-more i {
        transform: none;
    }
}

@media (max-width: 768px) {
    .teaser {
        grid-template-columns: 1fr;
    }
    .teaser-photo img {
        aspect-ratio: 16 / 9;
        height: auto;
    }
    .teaser-body {
        padding: 1.6rem 1.5rem 1.8rem;
    }
    .teaser-body h3 {
        font-size: 1.35rem;
    }
}

/* ============================================================
   NEW HOURS ANNOUNCEMENT — LA SALLE AVENUE  (temporary)
   Added 2026-08-23. Remove on or after 2026-09-07: delete this
   whole block, and the matching markup block in index.html.

   Kept contiguous -- base rules and breakpoints together --
   rather than split into the grouped media queries above, so
   removal is a single cut.

   Paired markup: index.html, just after the HERO section.
   ============================================================ */
.hours-alert {
    display: flex;
    align-items: center;
    gap: 1.8rem;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-top: 4px solid #f58987;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    padding: 2rem 1.8rem;
}

.hours-alert__figure {
    flex: 0 0 200px;
    margin: 0;
}

.hours-alert__figure img {
    display: block;
    width: 100%;
    height: auto;
}

.hours-alert__body {
    flex: 1 1 auto;
    min-width: 0;
}

.hours-alert__eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #f58987;
    margin-bottom: 0.35rem;
}

.hours-alert__title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #1e1e1e;
    margin-bottom: 0.5rem;
}

.hours-alert__lede {
    color: #666;
    font-size: 0.98rem;
    margin-bottom: 1.3rem;
}

.hours-alert__lede strong {
    color: #1e1e1e;
    font-weight: 700;
}

.hours-alert__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem;
}

.hours-alert__slot {
    background: #fce4e4;
    padding: 1rem 1.2rem;
}

.hours-alert__days {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8f3f3d;
    margin-bottom: 0.25rem;
}

.hours-alert__time {
    display: block;
    white-space: nowrap;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.2;
    color: #1e1e1e;
}

.hours-alert__foot {
    margin-top: 1.3rem;
    font-size: 0.85rem;
    color: #777;
}

.hours-alert__foot a {
    color: #f58987;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 137, 135, 0.35);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.hours-alert__foot a:hover {
    color: #e07371;
    border-color: #e07371;
}

@media (max-width: 840px) {
    .hours-alert {
        gap: 1.4rem;
    }

    .hours-alert__figure {
        flex: 0 0 150px;
    }

    .hours-alert__title {
        font-size: 1.45rem;
    }
}

@media (max-width: 600px) {
    .hours-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.1rem;
        padding: 1.6rem 1.3rem;
    }

    .hours-alert__figure {
        flex: 0 0 auto;
        width: 168px;
        max-width: 60%;
    }

    .hours-alert__title {
        font-size: 1.3rem;
    }

    .hours-alert__grid {
        grid-template-columns: 1fr;
    }

    .hours-alert__time {
        font-size: 1.2rem;
    }
}

@media (max-width: 400px) {
    .hours-alert__slot {
        padding: 0.9rem 1rem;
    }

    .hours-alert__days {
        font-size: 0.7rem;
        letter-spacing: 1px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hours-alert__foot a {
        transition: none;
    }
}
    
/* ===== END NEW HOURS ANNOUNCEMENT ===== */

/* ============================================================
   MARIKINA OPENING ANNOUNCEMENT  (temporary)
   Added 2026-08-23. Remove once the branch opens and is listed
   as a normal entry in the Locations grid: delete this whole
   block, and the matching markup block in index.html.

   Kept contiguous -- base rules and breakpoints together --
   rather than split into the grouped media queries above, so
   removal is a single cut. This is the only block in the file
   that breaks that grouping, and it does so because it is
   scheduled for deletion.

   COLOUR NOTE: the gradient runs from the mural's navy to its
   terracotta. To change the mood, edit the three stops in
   .soon-alert__panel background and nothing else.

   Paired markup: index.html, inside the LOCATIONS section.
   ============================================================ */
.soon-alert {
    display: flex;
    align-items: stretch;
    margin-top: 2.5rem;
    overflow: hidden;
}

/* --- Photo side --- */
/* Deliberately unclipped. The diagonal is cut into the panel
   instead: the panel stacks above the photo, so a cut here
   would just be painted over. */
.soon-alert__media {
    position: relative;
    flex: 0 0 44%;
}

/* Absolute so the photo's own height never sets the block's:
   the copy decides how tall the panel is, and the photo simply
   fills whatever that turns out to be. Left in flow it added
   ~70px of dead gradient below the button. */
.soon-alert__media img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Favours the left of the frame so the diagonal never
       crops into the MASSKARA lettering. */
    object-position: 38% center;
}

/* Warms the cut edge so photo and gradient meet, not collide. */
.soon-alert__media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(100deg,
            rgba(30, 42, 71, 0) 62%,
            rgba(30, 42, 71, 0.5) 100%);
}

/* --- Gradient side --- */
.soon-alert__panel {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    padding: 2.8rem 2.6rem;
    background: linear-gradient(135deg,
            #1e2a47 0%,
            #3b2c45 52%,
            #6d3a37 100%);
    color: #fff;
    /* The slanted divider. Overlap and cut are both 90px, which
       is what keeps them honest: at the top the panel's edge
       lands exactly on the photo's edge, and by the bottom it
       has eaten 90px into it. Any cut larger than the overlap
       would open a wedge of bare page between the two. */
    margin-left: -90px;
    clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%);
    /* Must clear the cut (90px) or the diagonal slices the
       first letter of the heading. */
    padding-left: 7.5rem;
}

.soon-alert__panel::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle 240px at 78% -20%,
            rgba(245, 137, 135, 0.22) 0%, transparent 70%);
}

.soon-alert__panel > * {
    position: relative;
}

.soon-alert__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(245, 137, 135, 0.18);
    color: #f9a9a7;
    padding: 0.42rem 1.1rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 1.1rem;
}

.soon-alert__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f58987;
    box-shadow: 0 0 0 0 rgba(245, 137, 135, 0.65);
    animation: soon-alert-pulse 1.9s ease-out infinite;
}

@keyframes soon-alert-pulse {
    70% {
        box-shadow: 0 0 0 9px rgba(245, 137, 135, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(245, 137, 135, 0);
    }
}

.soon-alert__title {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.2;
    color: #fff;
}

.soon-alert__title em {
    font-style: normal;
    color: #f9a9a7;
}

.soon-alert__lede {
    margin-top: 0.55rem;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.78);
}

.soon-alert__points {
    list-style: none;
    margin: 1.7rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.soon-alert__points li {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

.soon-alert__points i {
    color: #f9a9a7;
    font-size: 0.86rem;
}

.soon-alert__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 1.8rem;
    padding: 0.85rem 2rem;
    background: #f58987;
    color: #1e2a47;
    font-size: 0.95rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.3s ease;
}

.soon-alert__cta i {
    font-size: 0.78rem;
    transition: transform 0.3s ease;
}

.soon-alert__cta:hover,
.soon-alert__cta:focus-visible {
    background: #fff;
}

.soon-alert__cta:hover i,
.soon-alert__cta:focus-visible i {
    transform: translateX(4px);
}

.soon-alert__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

@media (max-width: 840px) {
    .soon-alert__panel {
        margin-left: -60px;
        clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
        padding: 2.4rem 1.8rem 2.4rem 5.5rem;
    }

    .soon-alert__title {
        font-size: 1.8rem;
    }
}

/* Stacked: the diagonal turns horizontal and the photo takes
   a fixed height, since it no longer has a sibling to match. */
@media (max-width: 700px) {
    .soon-alert {
        display: block;
    }

    .soon-alert__media {
        height: 230px;
    }

    .soon-alert__media img {
        object-position: center 42%;
    }

    .soon-alert__media::after {
        background: linear-gradient(to bottom,
                rgba(30, 42, 71, 0) 60%,
                rgba(30, 42, 71, 0.4) 100%);
    }

    .soon-alert__panel {
        margin-left: 0;
        /* Same trick turned on its side: the cut edge runs from
           44px above the photo's base on the left to flush
           with it on the right. Overlap matches the cut for
           the same reason it does on desktop. */
        margin-top: -44px;
        clip-path: polygon(0 0, 100% 44px, 100% 100%, 0 100%);
        padding: 3rem 1.4rem 2.2rem;
    }

    .soon-alert__title {
        font-size: 1.55rem;
    }

    .soon-alert__lede {
        font-size: 1rem;
    }

    .soon-alert__points {
        flex-direction: column;
        align-items: stretch;
    }

    .soon-alert__points li {
        justify-content: center;
        /* Full-width chips wrap on very narrow screens; without
           this the second line hangs left inside a centred box. */
        text-align: center;
    }

    .soon-alert__cta {
        display: flex;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .soon-alert__dot {
        animation: none;
    }

    .soon-alert__cta,
    .soon-alert__cta i {
        transition: none;
    }

    .soon-alert__cta:hover i {
        transform: none;
    }
}
    

/* ===== END MARIKINA OPENING ANNOUNCEMENT ===== */

/* ============================================================
   UTILITIES — extracted from inline style attributes 2026-08-23
   These replace style="" attributes that were sitting in the
   four index.html files. Permanent: not tied to any temporary
   announcement block.
   ============================================================ */

/* Section that follows a page head, which supplies its own top
   spacing. Used on the three blog pages. */
.section--flush {
    padding-top: 0;
}

/* Was declared only in inline attributes on two pages, and
   nowhere in this file -- so the two teaser lists could silently
   drift apart. Defined once here. */
.teaser-stack {
    display: grid;
    gap: 1.5rem;
}

/* Right-aligns the "See all reading" link under the teasers. */
.teaser-actions {
    text-align: right;
}

/* Opening quote mark above the poem. */
.poem-quote {
    display: block;
    color: #f58987;
    opacity: 0.3;
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

/* Nudges a button away from the paragraph above it. */
.btn--spaced {
    margin-top: 0.5rem;
}

/* Placeholder social icons: inert until the accounts exist.
   Keyed off aria-hidden so the styling and the accessibility
   state can never disagree -- remove aria-hidden and tabindex
   from the markup and the link simply starts working, with no
   CSS left behind to clean up. */
.footer-social a[aria-hidden="true"] {
    pointer-events: none;
}
/* ===== END UTILITIES ===== */


/* ============================================================
   CONTACT FORM — permanent, added 2026-08-24
   Sits after the dark .contact-band, before the footer.

   Two columns: .cform__media (neon-sign photo above a dark
   "what to expect" strip) on the left, .cform__body (heading +
   form) on the right. Stacks at 992px — a site breakpoint,
   chosen deliberately over inventing a third set the way the
   Marikina block's 840/700 did.

   Appended contiguously with its own breakpoints rather than
   split into the grouped media queries at lines 1119-1460, so
   stylesheet edits stay append-only and verifiable by diffing
   the leading portion of the file.

   Reuses .btn / .btn-primary for the submit control; everything
   here is namespaced .cform__ so nothing collides with the
   .contact-* rules that style the band above it.
   ============================================================ */

.cform {
    display: grid;
    grid-template-columns: 0.88fr 1fr;
    max-width: 1180px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid rgba(30, 30, 30, 0.1);
    border-top: 4px solid #f58987;
}

/* ----- Left column ----- */
.cform__media {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Photo takes whatever height the form column dictates. The img
   is absolutely positioned rather than height:100% so it fills a
   stretched flex item without needing a definite height. */
/* The photo never stretches: it holds the image's own 3/4 ratio and
   .cform__aside below it absorbs whatever height the form column
   dictates. Letting it flex to fill instead drives the ratio down
   to ~0.53 at narrow two-column widths, which slices the wordmark
   in half. */
.cform__photo {
    position: relative;
    flex: 0 0 auto;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #1e1e1e;
}

.cform__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.cform__aside {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #1e1e1e;
    padding: 1.75rem 2rem;
}

.cform__aside-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f58987;
    margin-bottom: 0.5rem;
}

.cform__aside-text {
    font-size: 0.92rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin: 0;
}

/* ----- Right column ----- */
.cform__body {
    padding: 3rem;
    min-width: 0;
}

.cform__head {
    margin-bottom: 2.5rem;
}

.cform__eyebrow {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #f58987;
    margin-bottom: 0.6rem;
}

.cform__title {
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.8px;
    margin-bottom: 0.8rem;
}

.cform__intro {
    color: rgba(30, 30, 30, 0.7);
    font-size: 1rem;
    max-width: 60ch;
}

.cform__intro a {
    color: #1e1e1e;
    text-decoration: none;
    border-bottom: 2px solid #f58987;
    transition: color 0.3s ease, background 0.3s ease;
}

.cform__intro a:hover,
.cform__intro a:focus-visible {
    color: #f58987;
}

/* ----- Honeypot -----
   Not display:none. Some bots skip fields the browser reports as
   hidden; this stays in the layout tree but is pulled off-canvas
   and out of the tab order. */
.cform__botcheck {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ----- Fields ----- */
.cform__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.cform__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cform__field--wide {
    grid-column: 1 / -1;
}

.cform__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(30, 30, 30, 0.55);
    margin-bottom: 0.55rem;
}

.cform__optional {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
    font-style: italic;
    color: rgba(30, 30, 30, 0.4);
    margin-left: 0.35rem;
}

.cform__input {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #1e1e1e;
    background: #fcf8f3;
    border: 1px solid rgba(30, 30, 30, 0.15);
    border-radius: 0;
    padding: 0.85rem 1rem;
    width: 100%;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.cform__input::placeholder {
    color: rgba(30, 30, 30, 0.35);
}

.cform__input:hover {
    border-color: rgba(30, 30, 30, 0.3);
}

.cform__input:focus {
    outline: none;
    background: #fff;
    border-color: #f58987;
    box-shadow: 0 0 0 3px rgba(245, 137, 135, 0.25);
}

/* Native select chrome varies too much between platforms to sit
   beside the text inputs, so it is reset and given its own mark. */
.cform__select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23f58987' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px 8px;
    cursor: pointer;
}

.cform__textarea {
    resize: vertical;
    min-height: 8rem;
    line-height: 1.6;
}

/* ----- Consent ----- */
.cform__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 1.75rem;
    cursor: pointer;
}

.cform__checkbox {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    accent-color: #f58987;
    cursor: pointer;
}

.cform__consent-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(30, 30, 30, 0.65);
}

/* ----- Submit & status ----- */
.cform__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: 2rem;
}

.cform__submit[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.cform__status {
    font-size: 0.95rem;
    font-weight: 500;
    margin: 0;
}

.cform__status:empty {
    display: none;
}

.cform__status--working {
    color: rgba(30, 30, 30, 0.6);
}

.cform__status--ok {
    color: #2f7d5d;
}

.cform__status--error {
    color: #b3403e;
}

/* Replaces the whole form once a message is delivered, so the
   confirmation is the only thing left on screen. */
.cform__done {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    background: #fcf8f3;
    border: 1px solid rgba(245, 137, 135, 0.45);
    padding: 2rem;
}

.cform__done-icon {
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(245, 137, 135, 0.16);
    color: #f58987;
    font-size: 1.1rem;
}

.cform__done-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.2px;
    margin-bottom: 0.3rem;
}

.cform__done-text {
    font-size: 0.95rem;
    color: rgba(30, 30, 30, 0.7);
}

/* Between 992 and 1180 the form column narrows enough that two
   fields per row start to crowd their labels. */
@media (max-width: 1080px) {
    .cform__body {
        padding: 2.5rem;
    }

    .cform__aside {
        padding: 1.5rem;
    }

    .cform__grid {
        gap: 1.25rem;
    }

    .cform__title {
        font-size: 1.9rem;
    }
}

/* Stacks: photo becomes a banner above the form. The crop is
   pulled down to 66% so the neon sign stays in frame rather
   than the ceiling. */
@media (max-width: 992px) {
    .cform {
        grid-template-columns: 1fr;
    }

    .cform__photo {
        aspect-ratio: 16 / 10;
    }

    .cform__aside {
        flex: 0 0 auto;
    }

    .cform__photo img {
        object-position: center 80%;
    }
}

@media (max-width: 768px) {
    .cform__body {
        padding: 2rem 1.5rem;
    }

    .cform__title {
        font-size: 1.7rem;
    }

    .cform__grid {
        grid-template-columns: 1fr;
    }

    .cform__head {
        margin-bottom: 2rem;
    }

    .cform__photo {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 600px) {
    .cform__actions {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
    }

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

    .cform__done {
        flex-direction: column;
        gap: 0.9rem;
        padding: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cform__input,
    .cform__intro a {
        transition: none;
    }
}
/* ===== END CONTACT FORM ===== */