/*
 * Linen — minimal white wedding website (templates/linen/index.php).
 * Tenor Sans in tracked capitals for the names and headings, Lato for the text, thin rules, photos edge to edge.
 * Loaded after Bootstrap (which is only there for the shared layer's dialogs): everything here is .ln-* scoped.
 */
:root {
    --ln-bg: #ffffff;
    --ln-band: #f6f5f2;
    --ln-ink: #1d1d1d;
    --ln-ink-2: #565656;
    --ln-mute: #8e8c88;
    --ln-rule: #e5e2dd;
    --ln-display: "Tenor Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --ln-sans: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body.ln {
    margin: 0;
    background: var(--ln-bg);
    color: var(--ln-ink-2);
    font-family: var(--ln-sans);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.85;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ln h1, .ln h2, .ln h3, .ln p, .ln figure { margin: 0; }
.ln h1, .ln h2, .ln h3 { font-family: var(--ln-display); font-weight: 400; color: var(--ln-ink); }
.ln a { color: inherit; text-decoration: none; }
.ln img { display: block; max-width: 100%; }

/* ---- type ------------------------------------------------------------------------------------------------- */
.ln-kicker {
    font-family: var(--ln-sans);
    font-size: 10.5px;
    font-weight: 400;
    line-height: 1.8;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ln-mute);
}
.ln-title {
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    line-height: 1.3;
    letter-spacing: .32em;
    text-transform: uppercase;
    margin-right: -.32em !important; /* the tracking after the last letter: centred for real */
    overflow-wrap: anywhere;
}
.ln-text { font-size: 15px; line-height: 1.9; color: var(--ln-ink-2); overflow-wrap: anywhere; }

/* ---- layout ----------------------------------------------------------------------------------------------- */
.ln-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.ln-section { padding: clamp(84px, 10vw, 140px) 0; }
.ln-head { text-align: center; margin: 0 auto clamp(48px, 6vw, 80px); padding: 0 24px; }
.ln-head .ln-kicker { margin-bottom: 14px; }
.ln-head::after { content: ""; display: block; width: 36px; height: 1px; margin: 28px auto 0; background: var(--ln-ink); opacity: .35; }

/* ---- header (over the cover) ------------------------------------------------------------------------------ */
.ln-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 72px 0;
    color: #fff;
}
.ln-brand {
    max-width: 100%;
    font-family: var(--ln-display);
    font-size: 12px;
    letter-spacing: .36em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #fff !important;
}
.ln-nav { display: none; }
@media (max-width: 991px) { .ln-brand.is-long { display: none; } }
.ln-nav a { font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .9) !important; transition: opacity .2s; white-space: nowrap; }
.ln-nav a:hover { opacity: .65; }
@media (min-width: 992px) {
    .ln-header { justify-content: space-between; gap: 40px; padding: 36px 52px 0; }
    .ln-header.has-login { padding-right: 104px; }
    .ln-brand { font-size: 13px; }
    .ln-nav { display: flex; gap: 36px; }
}

/* ---- hero ------------------------------------------------------------------------------------------------- */
.ln-hero {
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    background-color: #9d9890; /* until the cover arrives */
}
.ln-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 22%),
        linear-gradient(0deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 45%),
        rgba(0, 0, 0, .14);
}
.ln-hero-inner {
    width: 100%;
    max-width: 1200px;
    padding: 120px 28px 110px;
    animation: ln-fade 1.6s ease both;
}
@keyframes ln-fade { from { opacity: 0; } to { opacity: 1; } }
.ln-hero .ln-kicker { color: rgba(255, 255, 255, .92); margin-bottom: 26px; }
.ln-names {
    font-size: clamp(2.5rem, 6.6vw, 5.8rem) !important;
    line-height: 1.12;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-right: -.14em !important;
    color: #fff !important;
    text-shadow: 0 2px 28px rgba(0, 0, 0, .18);
    overflow-wrap: anywhere;
}
.ln-names .ln-amp { font-size: .62em; vertical-align: .18em; padding: 0 .1em; }
.ln-names.is-title { font-size: clamp(2rem, 4.8vw, 4.2rem) !important; letter-spacing: .12em; }
.ln-hero-sub {
    max-width: 660px;
    margin: 28px auto 0 !important;
    font-size: 11.5px;
    line-height: 2;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .95);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .3);
}
.ln-hero .wedz-actions { margin-top: 40px; gap: 14px !important; }
.ln-hero-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 0;
    padding: 13px 28px 12px;
    color: #fff;
    font: 400 10.5px/1.4 var(--ln-sans);
    letter-spacing: .3em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s, color .25s;
}
.ln-hero-btn:hover { background: #fff; color: var(--ln-ink); }
.ln-hero-line { position: absolute; left: 50%; bottom: 0; width: 1px; height: 64px; background: rgba(255, 255, 255, .8); }
@media (max-width: 767px) {
    .ln-names span { display: block; }
    .ln-names .ln-amp { display: block; font-size: .5em; line-height: 1.6; vertical-align: 0; }
    .ln-hero-inner { padding: 110px 24px 100px; }
    .ln-hero-sub { font-size: 10.5px; letter-spacing: .26em; }
    .ln-hero-btn { padding: 12px 20px 11px; letter-spacing: .26em; }
}

/* ---- the couple ------------------------------------------------------------------------------------------- */
.ln-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; max-width: 1040px; margin: 0 auto; }
.ln-person { text-align: center; }
.ln-person-pic { margin-bottom: 34px !important; }
.ln-person-pic img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ln-person-name { font-size: 1.45rem; line-height: 1.35; letter-spacing: .22em; text-transform: uppercase; margin: 10px -.22em 16px 0 !important; overflow-wrap: anywhere; }
.ln-person .ln-text { max-width: 440px; margin: 0 auto; }
@media (min-width: 768px) {
    .ln-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(40px, 6vw, 96px); }
    .ln-pair > .ln-person:only-child { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; }
    .ln-pair:not(.both-pics) { align-items: center; }
}

/* ---- the date: a bordered panel (+ the couple's photo) ---------------------------------------------------- */
.ln-date { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ln-band); }
.ln-date-pic img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.ln-date-panel { display: flex; align-items: center; justify-content: center; padding: 28px; }
.ln-date-box { width: 100%; max-width: 640px; border: 1px solid var(--ln-rule); background: #fff; padding: 64px 22px 58px; text-align: center; }
.ln-date-box > .ln-kicker:first-child { margin-bottom: 26px; }
.ln-date-day { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.25; letter-spacing: .16em; text-transform: uppercase; margin-right: -.16em !important; overflow-wrap: anywhere; }
.ln-date-week { margin-top: 10px !important; font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--ln-mute); }
.ln-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 460px; margin: 44px auto 0; border-top: 1px solid var(--ln-rule); border-bottom: 1px solid var(--ln-rule); }
.ln-count > div { padding: 22px 2px 18px; }
.ln-count > div + div { border-left: 1px solid var(--ln-rule); }
.ln-count .time { display: block; font-family: var(--ln-display); font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.1; color: var(--ln-ink); font-variant-numeric: tabular-nums; }
.ln-count-label { display: block; margin-top: 8px; font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ln-mute); }
.ln-date-thanks { margin-top: 30px !important; }
.ln-date-venue { margin-top: 34px !important; color: var(--ln-ink-2); }
@media (min-width: 768px) {
    .ln-date-panel { padding: clamp(56px, 7vw, 110px) 40px; }
    .ln-date-box { padding: 84px 48px 76px; }
    .ln-count-label { font-size: 9px; letter-spacing: .3em; }
}
@media (min-width: 992px) {
    .ln-date.has-pic { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ln-date.has-pic .ln-date-pic { order: 2; min-height: 640px; }
    .ln-date.has-pic .ln-date-pic img { aspect-ratio: auto; position: relative; }
    .ln-date.has-pic .ln-date-panel { padding: 72px clamp(40px, 5vw, 80px); }
}

/* ---- our story: alternating rows -------------------------------------------------------------------------- */
.ln-story { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin-bottom: 84px; }
.ln-story:last-child { margin-bottom: 0; }
.ln-story-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.ln-story-num { display: flex; align-items: center; gap: 14px; font-family: var(--ln-display); font-size: 12px; letter-spacing: .2em; color: var(--ln-mute); margin-bottom: 18px !important; }
.ln-story-num::after { content: ""; width: 40px; height: 1px; background: var(--ln-rule); }
.ln-story-title { font-size: 1.3rem; line-height: 1.45; letter-spacing: .2em; text-transform: uppercase; overflow-wrap: anywhere; }
.ln-story-date { margin-top: 8px !important; }
.ln-story-text .ln-text { margin-top: 18px !important; }
.ln-story.no-img .ln-story-text { max-width: 620px; margin: 0 auto; text-align: center; }
.ln-story.no-img .ln-story-num { justify-content: center; }
.ln-story.no-img .ln-story-num::after { display: none; }
@media (min-width: 992px) {
    .ln-story { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0; align-items: center; margin-bottom: 130px; }
    .ln-story-pic { grid-column: 1 / span 7; grid-row: 1; }
    .ln-story-text { grid-column: 9 / span 4; grid-row: 1; }
    .ln-story.is-flip .ln-story-pic { grid-column: 6 / span 7; }
    .ln-story.is-flip .ln-story-text { grid-column: 1 / span 4; }
    .ln-story.no-img .ln-story-text { grid-column: 3 / span 8; }
    .ln-story-title { font-size: 1.45rem; }
}

/* ---- gallery: edge to edge, thin gaps (live/app.js lays it out with Masonry; the widths are live/custom.css's) */
.ln-gallery { padding-bottom: 3px; }
/* the side gaps are the wrapper's: Masonry places the photos absolutely, so their % widths are of #lgallery's
   padding box while it divides its content box — padding on #lgallery itself loses a column */
.ln-gallery-grid { padding: 0 2px; }
#lgallery.ln-masonry { margin: 0; padding: 0; }
#lgallery.ln-masonry .grid-item { padding: 2px; }
#lgallery.ln-masonry .grid-item img { width: 100%; height: auto; transition: opacity .3s; }
#lgallery.ln-masonry .grid-item:hover img { opacity: .88; }
@media (min-width: 768px) {
    .ln-gallery-grid { padding: 0 3px; }
    #lgallery.ln-masonry .grid-item { padding: 3px; }
}
/* one or two photos: centred, not a row with gaps */
#lgallery.ln-masonry.few-1 { max-width: 560px; margin: 0 auto; }
#lgallery.ln-masonry.few-2 { max-width: 1000px; margin: 0 auto; }
#lgallery.few-1 .grid-item { width: 100%; }
#lgallery.few-2 .grid-item { width: 50%; }

/* ---- when & where ----------------------------------------------------------------------------------------- */
.ln-venues { background: var(--ln-band); }
.ln-venue-row { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 1040px; margin: 0 auto; }
.ln-venue { padding: 40px 8px; text-align: center; }
.ln-venue + .ln-venue { border-top: 1px solid var(--ln-rule); }
.ln-venue-name { font-size: 1.12rem; line-height: 1.55; letter-spacing: .18em; text-transform: uppercase; margin: 14px 0 12px !important; overflow-wrap: anywhere; }
.ln-link {
    display: inline-block;
    margin-top: 22px;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--ln-ink);
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ln-ink) !important;
    transition: opacity .2s;
}
.ln-link:hover { opacity: .6; }
@media (min-width: 768px) {
    .ln-venue-row.n-1 { max-width: 560px; }
    .ln-venue-row.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ln-venue-row.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ln-venue { padding: 20px 44px; }
    .ln-venue + .ln-venue { border-top: 0; border-left: 1px solid var(--ln-rule); }
}

/* ---- footer ----------------------------------------------------------------------------------------------- */
.ln-footer { padding: clamp(80px, 9vw, 120px) 24px 60px; text-align: center; }
.ln-gallery + .ln-footer { border-top: 0; }
.ln-footer-names { font-family: var(--ln-display); font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.5; letter-spacing: .3em; margin-right: -.3em !important; text-transform: uppercase; color: var(--ln-ink); overflow-wrap: anywhere; }
.ln-footer .ln-kicker { margin-top: 10px !important; }
.ln-credit { max-width: 640px; margin: 40px auto 0 !important; padding-top: 30px; border-top: 1px solid var(--ln-rule); font-size: 12px; line-height: 1.8; letter-spacing: .04em; color: var(--ln-mute); }
.ln-credit a { color: var(--ln-ink-2) !important; border-bottom: 1px solid var(--ln-rule); }