/* ============================================================================
   Fort Lauderdale 50th — styles.
   Two states live in this file: the locked door, and the page behind it.
   Palette is a Fort Lauderdale sunset: deep navy water, coral sun, sand.
   ========================================================================== */

:root {
    --navy:      #0a1628;
    --navy-2:    #0f2038;
    --navy-3:    #16294a;
    --ink:       #f2f6fb;
    --ink-mute:  #9db0cb;
    --ink-faint: #6a7f9d;

    --coral:     #ff6b5a;
    --sun:       #ffc857;
    --teal:      #2ec4c6;
    --sand:      #f6e7d2;

    --line:      rgba(255, 255, 255, .10);
    --line-2:    rgba(255, 255, 255, .18);
    --panel:     rgba(255, 255, 255, .045);
    --panel-2:   rgba(255, 255, 255, .075);

    --r:   14px;
    --r-s: 10px;
    --shadow:   0 10px 30px rgba(0, 0, 0, .35);
    --shadow-l: 0 24px 60px rgba(0, 0, 0, .45);

    --sans: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
            "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --display: "Avenir Next", "Segoe UI", var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: var(--sans);
    background: var(--navy);
    color: var(--ink);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--teal); }
.lnk { color: var(--teal); text-decoration: none; border-bottom: 1px solid rgba(46,196,198,.35); }
.lnk:hover { border-bottom-color: var(--teal); }
.muted { color: var(--ink-faint); }

.wrap { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }

.ico { width: 22px; height: 22px; flex: 0 0 auto; }

/* Marks anything standing in for a real photo, so nobody mistakes the
   placeholder art for the actual house. */
.ph-tag {
    position: absolute; left: 12px; top: 12px; z-index: 2;
    background: rgba(10, 22, 40, .72);
    border: 1px solid var(--line-2);
    color: var(--ink-mute);
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 99px;
    backdrop-filter: blur(6px);
}
.ph-tag-sm { left: 6px; top: 6px; font-size: 9px; padding: 2px 6px; }
.ph-svg { width: 100%; height: 100%; display: block; }

/* ══════════════════════════════════════════════════════════════════════
   THE DOOR
   ══════════════════════════════════════════════════════════════════════ */

body.locked { min-height: 100vh; min-height: 100dvh; overflow: hidden; }

.gate {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    padding: 1.5rem;
    overflow: hidden;
}

/* — ambient background — */
.gate-bg, .hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.gate-bg {
    background:
        radial-gradient(120% 80% at 50% 0%,  #1b3a5c 0%, transparent 60%),
        linear-gradient(180deg, #0d2038 0%, #0a1628 55%, #07101d 100%);
}
.sun {
    position: absolute; left: 50%; top: 14%;
    width: 340px; height: 340px; margin-left: -170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,200,87,.34) 0%, rgba(255,107,90,.16) 45%, transparent 70%);
    filter: blur(6px);
    animation: sun-breathe 9s ease-in-out infinite;
}
@keyframes sun-breathe {
    0%, 100% { transform: scale(1);    opacity: .9; }
    50%      { transform: scale(1.08); opacity: 1; }
}
.sea {
    position: absolute; left: -10%; right: -10%; bottom: -12%; height: 46%;
    background:
        radial-gradient(80% 100% at 50% 100%, rgba(46,196,198,.20), transparent 70%),
        linear-gradient(180deg, transparent, rgba(13,43,62,.85));
}
.sea::before, .sea::after {
    content: ""; position: absolute; left: -20%; right: -20%; height: 60px;
    border-radius: 50%;
    background: radial-gradient(50% 100% at 50% 50%, rgba(255,255,255,.055), transparent 70%);
    animation: swell 11s ease-in-out infinite;
}
.sea::before { top: 18%; }
.sea::after  { top: 44%; animation-duration: 15s; animation-direction: reverse; }
@keyframes swell {
    0%, 100% { transform: translateX(-3%) scaleY(1); }
    50%      { transform: translateX(3%)  scaleY(1.25); }
}
.palm {
    position: absolute; bottom: -4%; width: 260px; height: 62%;
    background: no-repeat center / contain;
    opacity: .5;
    transform-origin: bottom center;
    animation: sway 7s ease-in-out infinite;
}
.palm-l {
    left: -40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cg fill='%23050d18'%3E%3Cpath d='M96 400V150c-8-26-30-48-62-58 34-4 56 8 68 30 2-42-12-76-38-100 40 18 58 56 60 104 18-40 52-62 96-64-44 22-70 56-80 106z'/%3E%3C/g%3E%3C/svg%3E");
}
.palm-r {
    right: -50px; height: 50%; animation-delay: -3s; animation-duration: 9s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400'%3E%3Cg fill='%23050d18'%3E%3Cpath d='M104 400V150c8-26 30-48 62-58-34-4-56 8-68 30-2-42 12-76 38-100-40 18-58 56-60 104-18-40-52-62-96-64 44 22 70 56 80 106z'/%3E%3C/g%3E%3C/svg%3E");
}
@keyframes sway {
    0%, 100% { transform: rotate(-1.5deg); }
    50%      { transform: rotate(1.5deg); }
}

/* — the vault halves that swing apart — */
.vault-door {
    position: absolute; top: -5%; bottom: -5%; width: 52%;
    z-index: 20;
    background:
        linear-gradient(180deg, #16283f 0%, #0c1a2c 100%);
    box-shadow: inset 0 0 120px rgba(0,0,0,.6);
    transform: translateX(0);
    transition: transform 1s cubic-bezier(.7, 0, .2, 1);
    pointer-events: none;
    opacity: 0;
}
.vault-left  { left: -1%;  border-right: 2px solid rgba(255,255,255,.09); }
.vault-right { right: -1%; border-left:  2px solid rgba(255,255,255,.09); }

.vault-flash {
    position: absolute; inset: 0; z-index: 21; pointer-events: none;
    background: radial-gradient(circle at 50% 45%, rgba(255,220,150,.95), rgba(255,160,110,.35) 35%, transparent 70%);
    opacity: 0;
}

.gate-inner {
    position: relative; z-index: 10;
    text-align: center;
    width: min(460px, 100%);
    transition: transform .5s ease, opacity .5s ease;
}

.gate-kicker {
    margin: 0 0 .3rem;
    color: var(--ink-mute);
    font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
}
.gate-title {
    margin: 0 0 1.6rem;
    font-family: var(--display);
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 700; letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--sun), var(--coral) 60%, #ff8fa3);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* — the padlock — */
.lock { display: grid; place-items: center; margin-bottom: 1.2rem; }
.lock-svg {
    width: 108px; height: 118px;
    color: var(--ink-mute);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.45));
    transition: color .4s ease;
}
.lock-body {
    fill: #1d3350;
    stroke: rgba(255,255,255,.16); stroke-width: 2;
    transition: fill .45s ease, stroke .45s ease;
}
.dial  { stroke: rgba(255,255,255,.22); transform-origin: 100px 144px; }
.tumbler { fill: rgba(255,255,255,.20); transform-origin: center; transform-box: fill-box; }
.check { stroke: #6ee7a8; stroke-dasharray: 80; stroke-dashoffset: 80; opacity: 0; }
.shackle-g { transform-origin: 100px 92px; }

/* checking: the dial hunts */
.gate.is-checking .dial   { animation: dial-spin .55s cubic-bezier(.5,0,.5,1) infinite; }
.gate.is-checking .tumbler{ animation: tumble-wait .55s ease-in-out infinite; }
@keyframes dial-spin   { to { transform: rotate(360deg); } }
@keyframes tumble-wait {
    0%, 100% { opacity: .25; } 50% { opacity: .8; }
}

/* wrong code */
.gate.is-bad .gate-inner { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
.gate.is-bad .lock-svg   { color: var(--coral); }
.gate.is-bad .lock-body  { fill: #4a1f26; stroke: rgba(255,107,90,.5); }
@keyframes shake {
    10%, 90% { transform: translateX(-3px); }
    20%, 80% { transform: translateX(6px); }
    30%, 50%, 70% { transform: translateX(-10px); }
    40%, 60% { transform: translateX(10px); }
}

/* right code — the sequence */
.gate.is-open .lock-svg  { color: #6ee7a8; }
.gate.is-open .lock-body { fill: #12402f; stroke: rgba(110,231,168,.55); }
.gate.is-open .dial      { animation: dial-lock .5s cubic-bezier(.3,1.6,.5,1) forwards; }
@keyframes dial-lock { 0% { transform: rotate(0); } 100% { transform: rotate(-140deg); } }

.gate.is-open .t1 { animation: tumble .34s ease-out .00s forwards; }
.gate.is-open .t2 { animation: tumble .34s ease-out .14s forwards; }
.gate.is-open .t3 { animation: tumble .34s ease-out .28s forwards; }
@keyframes tumble {
    0%   { fill: rgba(255,255,255,.2); transform: scale(1)   translateY(0); }
    45%  { fill: #6ee7a8;              transform: scale(1.9) translateY(-3px); }
    100% { fill: #6ee7a8;              transform: scale(1)   translateY(0); }
}

.gate.is-open .check {
    opacity: 1;
    animation: draw .45s ease-out .46s forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.gate.is-open .shackle-g { animation: shackle-pop .7s cubic-bezier(.3,1.5,.5,1) .5s forwards; }
@keyframes shackle-pop {
    0%   { transform: translateY(0)     rotate(0deg); }
    40%  { transform: translateY(-26px) rotate(0deg); }
    100% { transform: translateY(-24px) rotate(24deg); }
}

.gate.is-open .lock       { animation: lock-lift .8s ease-out 1.0s forwards; }
@keyframes lock-lift {
    to { transform: translateY(-14px) scale(1.16); opacity: 0; }
}
.gate.is-open .gate-inner { animation: inner-out .6s ease-in 1.05s forwards; }
@keyframes inner-out { to { opacity: 0; transform: scale(1.08); } }

.gate.is-open .vault-door { opacity: 1; transition-delay: .95s; }
.gate.is-open .vault-left  { transform: translateX(-102%); }
.gate.is-open .vault-right { transform: translateX(102%); }
.gate.is-open .vault-flash { animation: flash 1.3s ease-out 1.0s forwards; }
@keyframes flash {
    0%   { opacity: 0; transform: scale(.4); }
    25%  { opacity: .95; }
    100% { opacity: 0; transform: scale(2.4); }
}

/* — the code boxes — */
.gate-ask {
    margin: 0 0 1rem; font-size: .95rem; font-weight: 500;
    color: var(--ink-mute); letter-spacing: .01em;
}
.code-form { margin: 0; }
.code-boxes { display: flex; gap: .6rem; justify-content: center; margin-bottom: 1.1rem; }
.code-box {
    width: 58px; height: 70px;
    text-align: center;
    font-size: 1.9rem; font-weight: 600; font-family: var(--display);
    color: var(--ink);
    background: rgba(255,255,255,.05);
    border: 2px solid var(--line-2);
    border-radius: var(--r-s);
    outline: none;
    transition: border-color .2s, background .2s, transform .15s, box-shadow .2s;
    caret-color: var(--sun);
}
.code-box:focus {
    border-color: var(--sun);
    background: rgba(255,200,87,.09);
    box-shadow: 0 0 0 4px rgba(255,200,87,.13);
}
.code-box.filled { border-color: var(--teal); background: rgba(46,196,198,.10); transform: translateY(-2px); }
.gate.is-bad .code-box { border-color: var(--coral); background: rgba(255,107,90,.10); }

.code-plain {
    width: 200px; padding: .8rem; text-align: center; font-size: 1.4rem;
    letter-spacing: .5em; border-radius: var(--r-s);
    border: 2px solid var(--line-2); background: rgba(255,255,255,.05); color: var(--ink);
}

.gate-btn {
    width: 100%; padding: .95rem 1rem;
    font: inherit; font-weight: 700; font-size: 1rem; letter-spacing: .04em;
    color: #26150f;
    background: linear-gradient(120deg, var(--sun), var(--coral));
    border: 0; border-radius: 99px; cursor: pointer;
    box-shadow: 0 8px 24px rgba(255,107,90,.28);
    transition: transform .15s ease, box-shadow .2s ease, filter .2s;
}
.gate-btn:hover  { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255,107,90,.36); }
.gate-btn:active { transform: translateY(0); }
.gate-btn[disabled] { filter: grayscale(.5) brightness(.8); cursor: default; transform: none; }

.gate-msg {
    min-height: 2.6em; margin-top: .85rem;
    font-size: .9rem; color: var(--coral); line-height: 1.45;
}
.gate-msg.ok { color: #6ee7a8; }

.chooser {
    margin-top: 1rem; padding: 1rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.chooser p { margin: 0 0 .7rem; font-size: .9rem; color: var(--ink-mute); }
.chooser-btns { display: grid; gap: .5rem; }
.chooser-btns button {
    padding: .7rem 1rem; font: inherit; font-weight: 600;
    color: var(--ink); background: var(--panel-2);
    border: 1px solid var(--line-2); border-radius: var(--r-s); cursor: pointer;
}
.chooser-btns button:hover { border-color: var(--teal); background: rgba(46,196,198,.12); }

.gate-foot { margin-top: 1.6rem; font-size: .82rem; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════════════
   ARRIVAL — the curtain that lifts on the page behind the door
   ══════════════════════════════════════════════════════════════════════ */

body.arriving { overflow: hidden; }

.curtain { position: fixed; inset: 0; z-index: 999; pointer-events: none; }
.curtain-half {
    position: absolute; left: 0; right: 0; height: 50.5%;
    background: linear-gradient(180deg, #16283f, #0a1628);
    transition: transform 1.05s cubic-bezier(.7, 0, .15, 1);
}
.curtain-top    { top: 0;    box-shadow: 0 6px 40px rgba(0,0,0,.6); }
.curtain-bottom { bottom: 0; box-shadow: 0 -6px 40px rgba(0,0,0,.6); }

.welcome {
    position: absolute; inset: 0;
    display: grid; place-content: center; text-align: center;
    font-family: var(--display);
    transition: opacity .5s ease .1s, transform .6s ease .1s;
}
.welcome-hi {
    display: block; font-size: 1rem; letter-spacing: .3em; text-transform: uppercase;
    color: var(--ink-mute);
    animation: rise .7s ease-out .15s both;
}
.welcome-name {
    display: block; font-size: clamp(2.4rem, 11vw, 4.6rem); font-weight: 700;
    background: linear-gradient(120deg, var(--sun), var(--coral) 65%, #ff8fa3);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: rise .8s cubic-bezier(.2,1.3,.4,1) .3s both;
}
@keyframes rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.curtain.lifting .curtain-top    { transform: translateY(-101%); }
.curtain.lifting .curtain-bottom { transform: translateY(101%); }
.curtain.lifting .welcome        { opacity: 0; transform: scale(1.12); }

/* confetti pieces are injected by app.js */
.confetti {
    position: fixed; top: -14px; z-index: 1000; pointer-events: none;
    width: 9px; height: 15px; opacity: 0;
    animation: fall linear forwards;
}
@keyframes fall {
    0%   { opacity: 1; transform: translate3d(0, -10vh, 0) rotate(0deg); }
    100% { opacity: 0; transform: translate3d(var(--dx, 0), 106vh, 0) rotate(var(--spin, 540deg)); }
}

/* ══════════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════════ */

.hero {
    position: relative;
    min-height: 76vh; min-height: 76dvh;
    display: grid; place-items: center;
    text-align: center;
    padding: 5rem 1.25rem 6rem;
    overflow: hidden;
}
.hero-bg {
    background:
        radial-gradient(120% 80% at 50% 0%, #1e4166 0%, transparent 62%),
        linear-gradient(180deg, #10253f 0%, #0a1628 60%, #0a1628 100%);
}
.hero-fade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: 1;
    background: linear-gradient(180deg, transparent, var(--navy));
}
.hero-inner { position: relative; z-index: 2; }

.hero-kicker {
    margin: 0 0 .8rem; color: var(--teal);
    font-size: .82rem; letter-spacing: .26em; text-transform: uppercase;
}
.hero-title { margin: 0 0 1rem; font-family: var(--display); line-height: 1.02; }
.hero-name {
    display: block; font-size: clamp(2.6rem, 11vw, 5.6rem); font-weight: 800; letter-spacing: -.03em;
    background: linear-gradient(120deg, var(--sun), var(--coral) 62%, #ff8fa3);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-occasion {
    display: block; margin-top: .3rem;
    font-size: clamp(1.1rem, 4.4vw, 2rem); font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink);
}
.hero-dates { margin: 1.2rem 0 .4rem; font-size: clamp(1rem, 3vw, 1.2rem); color: var(--ink); }
.hero-tagline { margin: 0 auto; max-width: 34ch; color: var(--ink-mute); }

.hero-nav {
    display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
    margin-top: 2.2rem;
}
.hero-nav a {
    padding: .55rem 1.1rem; border-radius: 99px;
    background: var(--panel); border: 1px solid var(--line-2);
    color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 600;
    transition: background .2s, border-color .2s, transform .15s;
}
.hero-nav a:hover { background: var(--panel-2); border-color: var(--teal); transform: translateY(-2px); }

/* ══════════════════════════════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════════════════════════════ */

.sec { padding: 4.5rem 0; position: relative; }
.sec-alt { background: linear-gradient(180deg, #0c1c31, #0a1628); }

.sec-kicker {
    margin: 0 0 .4rem; color: var(--teal);
    font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
}
.sec-title {
    margin: 0 0 .5rem; font-family: var(--display);
    font-size: clamp(1.8rem, 6vw, 2.8rem); font-weight: 700; letter-spacing: -.02em;
}
.sec-sub { margin: 0 0 2rem; color: var(--ink-mute); max-width: 60ch; }

/* — slideshow — */
.slideshow {
    position: relative;
    border-radius: var(--r); overflow: hidden;
    background: #0c1a2c; box-shadow: var(--shadow-l);
    aspect-ratio: 3 / 2;
    max-height: 640px;
}
.slides { position: absolute; inset: 0; }
.slide {
    position: absolute; inset: 0; margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity .8s ease, visibility .8s;
}
.slide.is-active { opacity: 1; visibility: visible; }
.slide img, .slide .ph-svg {
    width: 100%; height: 100%; object-fit: cover;
}
/* A slow drift keeps a still photo from feeling like a dead rectangle. */
.slide.is-active img, .slide.is-active .ph-svg { animation: kenburns 9s ease-out both; }
@keyframes kenburns {
    from { transform: scale(1.001); }
    to   { transform: scale(1.07); }
}
.slide figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
    padding: 3rem 1.25rem 1.1rem;
    background: linear-gradient(180deg, transparent, rgba(6, 14, 26, .9));
    font-size: .95rem; font-weight: 500;
}

.slide-nav {
    position: absolute; top: 50%; z-index: 4;
    width: 46px; height: 46px; margin-top: -23px;
    display: grid; place-items: center;
    background: rgba(10,22,40,.55); backdrop-filter: blur(8px);
    border: 1px solid var(--line-2); border-radius: 50%;
    color: var(--ink); cursor: pointer;
    transition: background .2s, transform .15s, border-color .2s;
}
.slide-nav svg { width: 22px; height: 22px; }
.slide-nav:hover { background: rgba(10,22,40,.85); border-color: var(--teal); }
.slide-nav.prev { left: 14px; }
.slide-nav.next { right: 14px; }

.dots {
    position: absolute; left: 0; right: 0; bottom: 12px; z-index: 5;
    display: flex; gap: 7px; justify-content: center;
}
.dot {
    width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
    background: rgba(255,255,255,.35); cursor: pointer;
    transition: background .25s, width .25s, transform .2s;
}
.dot.is-active { background: var(--sun); width: 22px; border-radius: 99px; }

/* — date / time / address — */
.facts {
    display: grid; gap: 1rem; margin-top: 1.6rem;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.fact {
    display: flex; gap: .9rem;
    padding: 1.25rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.fact .ico { color: var(--sun); margin-top: .2rem; }
.fact h3 {
    margin: 0 0 .35rem; font-size: .76rem; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 700;
}
.fact p { margin: 0 0 .15rem; }
.fact-sub { color: var(--ink-mute); font-size: .9rem; margin-top: .4rem !important; }

.codes { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }
.code-chip {
    display: flex; flex-direction: column; gap: .1rem;
    padding: .6rem 1.1rem;
    background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r-s);
    text-decoration: none; color: var(--ink);
}
.code-chip span {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
}
.code-chip strong { font-size: 1rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.chip-link:hover { border-color: var(--teal); }
.chip-link strong { font-family: var(--sans); color: var(--teal); }

/* — people — */
/* Wider than a bare headshot needs, because each card also carries the
   guest's flights and, for its owner, the form that edits them. */
/* One ROW per guest, not a card.
   How much each person carries varies a lot — some have four flight fields and
   a dietary note, some have nothing yet, one has an open edit form. A card grid
   sized for the fullest leaves the empty ones looking broken, and sized for the
   emptiest clips the rest. A row absorbs the difference and stays scannable
   down the left edge, which is what a guest list is for. */
.people { display: grid; gap: .55rem; }

.person {
    display: grid;
    /* The identity column is a FIXED width, not a fraction, so the divider
       between "who" and "flights" lines up down the whole list. A fractional
       track would make it ragged as names vary in length. */
    grid-template-columns: auto 13rem minmax(0, 1fr);
    gap: .35rem 1.15rem;
    align-items: center;
    padding: .8rem 1.05rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
    transition: border-color .2s ease, background .2s ease;
}
.person:hover { border-color: var(--line-2); background: var(--panel-2); }
.person.is-me { border-color: rgba(255,200,87,.45); background: rgba(255,200,87,.06); }

.pface {
    position: relative;
    width: 58px; height: 58px; margin: 0; flex: 0 0 auto;
    border-radius: 50%; overflow: hidden;
    background: linear-gradient(140deg,
        hsl(var(--hue, 200) 55% 42%), hsl(calc(var(--hue, 200) + 40) 60% 26%));
    display: grid; place-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.pface img { width: 100%; height: 100%; object-fit: cover; }
.pface .ph-tag-sm { display: none; }   /* no room for it at this size */
.pinitials {
    font-family: var(--display); font-size: 1.3rem; font-weight: 700;
    color: rgba(255,255,255,.9); letter-spacing: .02em;
}

.pid { min-width: 0; }
.pname { margin: 0; font-size: 1rem; font-weight: 700; }
.you {
    display: inline-block; margin-left: .3rem; padding: 1px 7px;
    font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--sun); border: 1px solid rgba(255,200,87,.5); border-radius: 99px;
    vertical-align: middle;
}
.pnote { margin: .05rem 0 0; font-size: .76rem; color: var(--ink-faint); }
.pphone {
    display: inline-block; margin-top: .2rem;
    font-size: .86rem; color: var(--teal); text-decoration: none;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.pphone:hover { text-decoration: underline; }
.psms {
    display: inline-block; margin: .2rem 0 0 .5rem; padding: .12rem .6rem;
    font-size: .7rem; font-weight: 600; text-decoration: none; color: var(--ink);
    background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 99px;
    vertical-align: middle;
}
.psms:hover { border-color: var(--teal); }

/* — flights, in the third column of the row — */
/* Laid out as label-above-value pairs flowing horizontally, so four fields fit
   on one line on a laptop and wrap gracefully instead of forcing a wide column. */
.pinfo {
    min-width: 0;
    padding-left: 1.15rem;
    border-left: 1px solid var(--line);
}
.ptrip {
    margin: 0;
    display: flex; flex-wrap: wrap; gap: .3rem 1.6rem;
}
.ptrip > div { min-width: 0; }
.ptrip dt {
    font-size: .58rem; letter-spacing: .11em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700;
}
.ptrip dd { margin: 0; font-size: .85rem; color: var(--ink); line-height: 1.35; }
.ptrip-none {
    margin: 0; font-size: .78rem; color: var(--ink-faint); font-style: italic;
}

.pdiet {
    margin: .5rem 0 0; padding: .45rem .65rem;
    background: rgba(46,196,198,.08); border: 1px solid rgba(46,196,198,.28);
    border-radius: var(--r-s);
    font-size: .8rem; color: var(--sand);
}
.pdiet-tag {
    display: block; margin-bottom: .2rem;
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--teal); font-weight: 700;
}

/* — the owner's edit form — */
/* Spans the whole row and opens underneath it, so the form gets real width
   instead of being squeezed into one column of the grid. */
.tedit { grid-column: 1 / -1; margin-top: .3rem; }
.tedit > summary {
    list-style: none; cursor: pointer; width: max-content;
    padding: .32rem .8rem; border-radius: 99px;
    background: var(--panel-2); border: 1px solid var(--line-2);
    font-size: .74rem; font-weight: 600; color: var(--ink);
}
.tedit > summary::-webkit-details-marker { display: none; }
.tedit > summary:hover { border-color: var(--sun); }
.tedit[open] > summary { border-color: rgba(255,200,87,.5); color: var(--sun); }

.tform {
    display: grid; gap: .6rem .9rem; margin-top: .8rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    align-items: start;
}
/* The dietary box and the button want the full width, not a narrow column. */
.tform .tfull, .tform .tsave, .tform .tstamp { grid-column: 1 / -1; }
.tsave { justify-self: start; }
.tform label {
    display: grid; gap: .25rem;
    font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700;
}
.tform input, .tform textarea {
    width: 100%; padding: .45rem .6rem;
    font: inherit; font-size: .84rem; text-transform: none; letter-spacing: normal;
    color: var(--ink); background: rgba(0,0,0,.22);
    border: 1px solid var(--line-2); border-radius: var(--r-s);
}
.tform textarea { resize: vertical; min-height: 3.6rem; line-height: 1.45; }
.tform input:focus, .tform textarea:focus {
    outline: none; border-color: var(--sun); background: rgba(0,0,0,.32);
}
.tform input::placeholder, .tform textarea::placeholder { color: var(--ink-faint); opacity: .8; }
.thint {
    font-size: .66rem; letter-spacing: normal; text-transform: none;
    color: var(--teal); font-weight: 500; line-height: 1.4;
}
.tsave {
    margin-top: .2rem; padding: .5rem .9rem;
    font: inherit; font-size: .82rem; font-weight: 700; color: #21160a;
    background: linear-gradient(120deg, var(--sun), var(--coral));
    border: 0; border-radius: 99px; cursor: pointer;
}
.tsave:hover { filter: brightness(1.07); }
.tstamp { margin: .1rem 0 0; font-size: .68rem; color: var(--ink-faint); }

/* — host previewing the page as a guest — */
/* Sticky on purpose: the entire value of this mode is remembering you are not
   seeing the whole page. A banner that scrolls away defeats it. */
.gview {
    position: sticky; top: 0; z-index: 60;
    display: flex; flex-wrap: wrap; gap: .45rem 1rem;
    align-items: center; justify-content: center;
    padding: .55rem 1.1rem;
    background: linear-gradient(120deg, var(--sun), var(--coral));
    color: #21160a; font-size: .84rem; font-weight: 600; text-align: center;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.gview a {
    flex: 0 0 auto;
    padding: .1rem .75rem; border-radius: 99px;
    background: rgba(255,255,255,.3); border: 1px solid rgba(0,0,0,.3);
    color: #21160a; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.gview a:hover { background: rgba(255,255,255,.55); }

/* — save confirmation — */
.flash {
    margin: 0 0 1.4rem; padding: .7rem 1rem;
    border-radius: var(--r-s); font-size: .88rem; max-width: 60ch;
}
.flash-ok  { background: rgba(46,196,198,.1);  border: 1px solid rgba(46,196,198,.35); color: var(--sand); }
.flash-bad { background: rgba(255,107,90,.1); border: 1px solid rgba(255,107,90,.4);  color: var(--sand); }

/* — host-only dietary roll-up — */
.sub-head {
    margin: 2.4rem 0 .9rem; font-family: var(--display);
    font-size: 1.1rem; font-weight: 700;
}
.diets { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.diets li {
    display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: 1rem;
    padding: .7rem .9rem;
    background: rgba(46,196,198,.07); border: 1px solid rgba(46,196,198,.24);
    border-radius: var(--r-s); font-size: .9rem;
}
.diets strong { color: var(--sun); }

/* — device register, host only — */
.ipcode {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: .78rem; color: var(--ink-faint);
}
.devs { display: grid; gap: 1rem; }
.dev-group {
    padding: .9rem 1rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.dev-group h4 {
    margin: 0 0 .6rem; font-size: .95rem; font-weight: 700;
    display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.dev-count {
    font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint); font-weight: 700;
}
.dev-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.dev-group li {
    display: flex; gap: 1rem; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    padding: .55rem .7rem;
    background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-s);
}
.dev-group li.is-revoked { opacity: .55; border-style: dashed; }
.dev-label { display: block; font-size: .88rem; font-weight: 600; }
.dev-off {
    display: inline-block; margin-left: .35rem; padding: 0 .45rem;
    font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--coral); border: 1px solid rgba(255,107,90,.45); border-radius: 99px;
}
.dev-meta { display: block; margin-top: .15rem; font-size: .74rem; color: var(--ink-faint); }
.dev-group form { margin: 0; flex: 0 0 auto; }
.dev-revoke, .dev-restore {
    padding: .25rem .75rem; font: inherit; font-size: .72rem; font-weight: 700;
    border-radius: 99px; cursor: pointer;
}
.dev-revoke {
    color: var(--coral); background: rgba(255,107,90,.1);
    border: 1px solid rgba(255,107,90,.4);
}
.dev-revoke:hover { background: rgba(255,107,90,.2); }
.dev-restore {
    color: var(--teal); background: rgba(46,196,198,.1);
    border: 1px solid rgba(46,196,198,.4);
}
.dev-restore:hover { background: rgba(46,196,198,.2); }

/* — activities — */
.weather-note {
    display: flex; gap: .8rem; align-items: flex-start;
    margin: 0 0 2rem; padding: 1rem 1.15rem;
    background: rgba(255,200,87,.07); border: 1px solid rgba(255,200,87,.25);
    border-radius: var(--r); color: var(--sand); max-width: 70ch;
}
.weather-note .ico { color: var(--sun); }

.acts { display: grid; gap: 1.6rem; }
.act {
    display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
    background: var(--panel); border: 1px solid var(--line);
    border-radius: var(--r); overflow: hidden;
    box-shadow: var(--shadow);
}
.act-art { position: relative; min-height: 260px; background: #0c1a2c; }
.act-art img, .act-art .ph-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wx-badge {
    position: absolute; right: 12px; bottom: 12px; z-index: 2;
    padding: 4px 11px; border-radius: 99px;
    background: rgba(10,22,40,.75); backdrop-filter: blur(6px);
    border: 1px solid rgba(255,200,87,.45); color: var(--sun);
    font-size: .72rem; font-weight: 600; letter-spacing: .04em;
}
.act-body { padding: 1.6rem 1.7rem; }
.act-when {
    margin: 0 0 .3rem; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink-faint);
}
.act-when strong { color: var(--teal); }
.act-title { margin: 0 0 .6rem; font-family: var(--display); font-size: 1.5rem; font-weight: 700; }
.act-blurb { margin: 0 0 1rem; color: var(--ink-mute); }
.act-meet { display: flex; gap: .55rem; align-items: flex-start; margin: 0 0 1rem; font-size: .9rem; }
.act-meet .ico { width: 18px; height: 18px; color: var(--coral); margin-top: .15rem; }
.act-list { margin: 0 0 1rem; padding-left: 1.1rem; color: var(--ink-mute); font-size: .92rem; }
.act-list li { margin-bottom: .3rem; }
.act-list li::marker { color: var(--teal); }
.act-rain {
    margin: 0; padding: .75rem .95rem; font-size: .88rem;
    background: rgba(46,196,198,.07); border-left: 3px solid var(--teal);
    border-radius: 0 var(--r-s) var(--r-s) 0; color: var(--ink-mute);
}
.act-rain strong { color: var(--teal); }

/* — need to know — */
.cards {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.card {
    padding: 1.4rem;
    background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
.card .ico { color: var(--coral); margin-bottom: .6rem; }
.card h3 { margin: 0 0 .4rem; font-size: 1.1rem; font-weight: 700; }
.card p  { margin: 0; color: var(--ink-mute); font-size: .94rem; }

/* — host check-in log — */
.log { width: 100%; border-collapse: collapse; font-size: .92rem; }
.log th {
    text-align: left; padding: .6rem .8rem;
    font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
    color: var(--ink-faint); border-bottom: 1px solid var(--line-2);
}
.log td { padding: .65rem .8rem; border-bottom: 1px solid var(--line); }
.log tr.not-yet td { color: var(--ink-faint); }
.log-note { margin-top: 1rem; font-size: .85rem; color: var(--ink-faint); max-width: 60ch; }

/* — footer — */
.foot {
    padding: 2.5rem 0 3.5rem;
    border-top: 1px solid var(--line);
    color: var(--ink-mute); font-size: .9rem;
}
.foot p { margin: 0 0 .4rem; }
.foot-sm { font-size: .82rem; color: var(--ink-faint); }

/* ══════════════════════════════════════════════════════════════════════
   NARROW SCREENS
   ══════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .act { grid-template-columns: 1fr; }
    .act-art { min-height: 210px; aspect-ratio: 16 / 9; }
    .act-body { padding: 1.3rem; }
}

/* Only below this do the three columns genuinely stop fitting, and the flights
   drop to their own full-width line under the name. Kept deliberately low so
   flights stay to the RIGHT of the photo/name/number on anything laptop-sized
   and most tablets. */
@media (max-width: 620px) {
    .person { grid-template-columns: auto 1fr; align-items: start; }
    .pinfo  { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
    .ptrip  { gap: .3rem 1.2rem; }
    .diets li { grid-template-columns: 1fr; gap: .2rem; }
}

@media (max-width: 560px) {
    .wrap { width: min(1160px, 100% - 1.75rem); }
    .sec { padding: 3.2rem 0; }
    .slideshow { aspect-ratio: 4 / 3; }
    .slide-nav { width: 40px; height: 40px; margin-top: -20px; }
    .slide-nav.prev { left: 8px; }
    .slide-nav.next { right: 8px; }
    .person { padding: .7rem .8rem; gap: .3rem .9rem; }
    .pface { width: 48px; height: 48px; }
    .pinitials { font-size: 1.1rem; }
    .tform { grid-template-columns: 1fr; }
    .code-box { width: 52px; height: 64px; font-size: 1.6rem; }
    .log { font-size: .84rem; }
    .log th, .log td { padding: .5rem .45rem; }
}

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION — keep the meaning, drop the movement
   ══════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .slide.is-active img, .slide.is-active .ph-svg { animation: none; transform: none; }
    .confetti { display: none; }
}