/* =========================================================================
   LUMINARI CLUB — Member Portal · shared chrome  (v2)
   Built on colors_and_type.css. Abstract golden-hour hero, no photograph.
   ========================================================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: var(--parchment); color: var(--forest); font-family: var(--font-sans);
       overflow-x: hidden; }
::selection { background: var(--champagne); color: var(--forest-deep); }
:root { --font-mono: 'SF Mono', 'JetBrains Mono', ui-monospace, 'Menlo', monospace; }

.shell { max-width: 1140px; margin: 0 auto; padding: 0 48px; width: 100%; }
.shell-narrow { max-width: 720px; margin: 0 auto; padding: 0 48px; width: 100%; }

/* ---------- tracked labels / editorial bits ---------- */
.kicker { font-family: var(--font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.26em;
          text-transform: uppercase; color: var(--stone-50); }

/* ===================================================== HERO (gradient) ==== */
.hero { position: relative; min-height: 60vh; display: flex; flex-direction: column;
        color: var(--cream); overflow: hidden; }
.hero.tall { min-height: 72vh; }
.hero.short { min-height: 46vh; }

.hero .grad { position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(116% 78% at 74% 16%, rgba(248,233,197,0.92) 0%, rgba(231,190,134,0.0) 44%),
    linear-gradient(157deg, #E9D9AE 0%, #DCBB8B 20%, #C68C5E 41%, #9A7350 56%, #5A5840 72%, #2C5A45 86%, #163C2C 100%);
  background-size: 160% 160%, 100% 100%;
  animation: heroDrift 26s var(--ease-in) infinite alternate;
}
.hero .basegrad { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(15,42,30,0.30) 0%, rgba(15,42,30,0) 30%,
              rgba(15,42,30,0) 52%, rgba(15,42,30,0.55) 80%, rgba(15,42,30,0.93) 100%); }
.hero .grain-x { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>"); }

/* hero variant using the single permitted photo (trip detail) */
.hero img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 48%; z-index: 0; }
.hero.photo .basegrad { background: linear-gradient(180deg, rgba(15,42,30,0.42) 0%, rgba(15,42,30,0.08) 30%,
              rgba(15,42,30,0.34) 66%, rgba(15,42,30,0.93) 100%); }

@keyframes heroDrift { from { background-position: 30% 20%, 0 0; } to { background-position: 64% 40%, 0 0; } }
@media (prefers-reduced-motion: reduce){ .hero .grad { animation: none; } }

/* ---------- topbar / return ---------- */
.topbar { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between;
          padding: 30px 48px; }
.topbar .mark { width: 30px; height: 30px; color: var(--champagne); display: block;
                transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease); }
a.marklink:hover .mark { transform: rotate(40deg); opacity: 0.9; }
.signout { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
           color: rgba(251,249,244,0.78); cursor: pointer; transition: color var(--dur-fast) var(--ease);
           background: none; border: 0; }
.signout:hover { color: var(--cream); }

/* ---------- hero content ---------- */
.hero-content { position: relative; z-index: 3; margin-top: auto; padding-bottom: 72px; }
.hero .eyebrow-italic { color: var(--champagne); font-size: 14px; letter-spacing: 0.18em; display: block; margin-bottom: 20px; }
.hero .crumb { color: rgba(251,249,244,0.72); font-size: 12.5px; letter-spacing: 0.18em; display: block; margin-bottom: 20px;
               font-family: var(--font-display); font-style: italic; text-transform: uppercase; }
.hero .crumb a { color: var(--champagne); transition: opacity var(--dur-fast) var(--ease); }
.hero .crumb a:hover { opacity: 0.7; }
.hero h1 { font-family: var(--font-display); text-transform: uppercase; font-weight: 500;
           letter-spacing: 0.05em; line-height: 0.98; font-size: clamp(46px, 7.4vw, 100px);
           color: var(--cream); text-shadow: 0 2px 40px rgba(15,42,30,0.4); }
.hero h1.sm { font-size: clamp(40px, 5.6vw, 76px); }

/* ===================================================== SECTIONS ========== */
section.block { padding: 96px 0; }
.sec-label { display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
             padding-bottom: 26px; border-bottom: 1px solid var(--rule); margin-bottom: 52px; }
.sec-label .l { color: var(--forest); font-size: 12px; letter-spacing: 0.26em; font-weight: 600;
                text-transform: uppercase; font-family: var(--font-sans); }
.sec-label .r { font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--stone-70);
                letter-spacing: 0.01em; white-space: nowrap; }

.editorial { font-family: var(--font-serif); font-style: italic; font-size: 21px; line-height: 1.5;
             color: var(--stone-70); }

/* ===================================================== BUTTONS / CHIPS === */
.btn-forest { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
              font-weight: 600; color: var(--cream); background: var(--forest); border: 0; border-radius: 3px;
              padding: 15px 32px; cursor: pointer; display: inline-block; text-align: center;
              transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.btn-forest:hover { background: var(--forest-soft); }
.btn-forest:active { transform: scale(0.98); }

.btn-outline { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
               font-weight: 600; color: var(--forest); background: transparent; border: 1px solid var(--forest);
               border-radius: 3px; padding: 14px 30px; cursor: pointer; display: inline-block; text-align: center;
               transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.btn-outline:hover { background: var(--forest); color: var(--cream); }

.link-ul { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
           font-weight: 600; color: var(--forest); cursor: pointer; background: none; border: 0;
           border-bottom: 1px solid var(--champagne); padding-bottom: 3px; display: inline-block;
           transition: opacity var(--dur-fast) var(--ease); }
.link-ul:hover { opacity: 0.6; }

/* status chips */
.chip { display: inline-flex; align-items: center; font-family: var(--font-sans); font-size: 10px;
        letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600; border-radius: 2px; padding: 7px 14px; }
.chip.confirmed { color: var(--forest); border: 1px solid var(--champagne-deep); background: transparent; }
.chip.solid { color: var(--cream); background: var(--forest); border: 1px solid var(--forest); }
.chip.arranging { color: var(--stone-70); border: 1px solid var(--stone-30); background: transparent; }
.chip.waitlist { color: var(--stone-50); border: 1px dashed var(--stone-30); background: transparent; }

/* selectable preference chips */
.pchip { font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.02em; color: var(--forest);
         background: var(--parchment); border: 1px solid var(--champagne-deep); border-radius: 2px;
         padding: 8px 14px; display: inline-flex; align-items: center; gap: 7px; }
.pchip.on { background: var(--forest); color: var(--cream); border-color: var(--forest); }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* ===================================================== CARDS ============= */
.card-parch { background: var(--cream); border: 1px solid var(--champagne); border-radius: 3px;
              box-shadow: 0 18px 36px -28px rgba(15,42,30,0.32); }

/* ---------- entry blocks (lobby → section) ---------- */
.entry { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.entry-block { position: relative; background: var(--cream); border: 1px solid var(--champagne); border-radius: 3px;
               padding: 40px 38px 34px; display: flex; flex-direction: column; min-height: 230px;
               transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
               box-shadow: 0 18px 38px -30px rgba(15,42,30,0.3); }
.entry-block:hover { transform: translateY(-3px); box-shadow: 0 28px 52px -28px rgba(15,42,30,0.4); }
.entry-block .eb-eyebrow { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.24em;
                           text-transform: uppercase; font-weight: 600; color: var(--stone-50); }
.entry-block .eb-title { font-family: var(--font-display); text-transform: uppercase; font-weight: 500;
                         letter-spacing: 0.05em; font-size: 34px; line-height: 1.0; color: var(--forest); margin-top: 14px; }
.entry-block .eb-state { font-family: var(--font-serif); font-style: italic; font-size: 17px; color: var(--stone-70);
                         margin-top: 14px; flex: 1; }
.entry-block .eb-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.entry-block .eb-foot .arrow { color: var(--champagne-deep); font-size: 20px; transition: transform var(--dur) var(--ease); }
.entry-block:hover .eb-foot .arrow { transform: translateX(5px); }

/* ===================================================== FOOTER ============ */
.alfred { background: var(--forest-deep); color: var(--cream); text-align: center; padding: 116px 48px 92px; }
.alfred .mark { width: 38px; height: 38px; color: var(--champagne); margin: 0 auto 28px; }
.alfred .eyebrow-italic { color: rgba(251,249,244,0.6); font-size: 12px; letter-spacing: 0.18em; display: block; margin-bottom: 16px; }
.alfred h2 { font-family: var(--font-display); text-transform: uppercase; font-weight: 500; letter-spacing: 0.07em;
             font-size: clamp(38px, 5vw, 58px); line-height: 1.0; color: var(--cream); }
.alfred .pickup { font-family: var(--font-serif); font-style: italic; font-size: 16px; color: rgba(251,249,244,0.7);
                  margin-top: 22px; }
.alfred .pickup a { color: var(--champagne); border-bottom: 1px solid rgba(212,201,168,0.45); padding-bottom: 2px; }
.alfred .email { display: inline-block; margin-top: 22px; font-family: var(--font-serif); font-size: 21px;
                 color: var(--cream); border-bottom: 1px solid var(--champagne); padding-bottom: 4px;
                 transition: opacity var(--dur-fast) var(--ease); letter-spacing: 0.01em; }
.alfred .email:hover { opacity: 0.72; }
.alfred .hours { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; color: rgba(251,249,244,0.5); margin-top: 32px; }

footer.legal { background: var(--forest-deep); color: rgba(251,249,244,0.42); padding: 0 48px 48px; }
footer.legal .line { max-width: 1140px; margin: 0 auto; padding-top: 30px; border-top: 1px solid var(--rule-dark);
                     font-family: var(--font-sans); font-size: 11.5px; line-height: 1.6; letter-spacing: 0.02em; text-align: center; }

/* ===================================================== ENTRANCE ========== */
.rise { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .rise { opacity: 1; transform: none; } }

/* ===================================================== RESPONSIVE ======== */
@media (max-width: 880px) {
  .shell, .shell-narrow { padding: 0 26px; }
  .topbar { padding: 22px 26px; }
  section.block { padding: 68px 0; }
  .entry { grid-template-columns: 1fr; gap: 16px; }
  .alfred { padding: 84px 26px 70px; }
  footer.legal { padding: 0 26px 40px; }
}
@media (max-width: 460px) {
  .sec-label { flex-direction: column; align-items: flex-start; gap: 10px; }
}