/* ==========================================================
   The Serenity Collections — Home page styles
   Used by index.html only (loaded after base.css)
   ========================================================== */

/* -------------------- NAV -------------------- */
  .nav{
    position:fixed;
    top:0; left:0; right:0;
    z-index:100;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:1.6rem 6vw;
    color:#fff;
    transition:background 0.4s ease, padding 0.4s ease, box-shadow .4s ease;
  }
  .nav.scrolled{
    background:rgba(32,30,28,0.92);
    padding:1rem 6vw;
    backdrop-filter:blur(6px);
    box-shadow:0 8px 24px rgba(0,0,0,0.25);
  }

  .brand{
    display:flex;
    align-items:center;
    gap:0.7rem;
  }


  .nav-cta{
    font-size:0.72rem;
    letter-spacing:0.22em;
    text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.55);
    padding:0.65rem 1.4rem;
    transition:all .3s ease;
    white-space:nowrap;
  }
  .nav-cta:hover{ background:#fff; color:var(--charcoal); }

/* -------------------- HERO -------------------- */
  .hero{
    position:relative;
    min-height:100svh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    background:#0f0e0d;
  }
  .hero video, .hero .poster-fallback{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(0.86) contrast(1.03);
  }
  .hero::before{
    content:"";
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(10,9,8,0.5) 0%, rgba(10,9,8,0.18) 26%, rgba(10,9,8,0.38) 58%, rgba(10,9,8,0.76) 100%),
      radial-gradient(60% 45% at 50% 62%, rgba(10,9,8,0.32), transparent 70%);
    z-index:1;
  }
  .hero-content{
    position:relative;
    z-index:2;
    text-align:center;
    color:#fff;
    padding:0 6vw;
    max-width:820px;
    margin-top:2vh;
  }
  .hero h1{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(2.4rem, 6.4vw, 4.6rem);
    letter-spacing:0.03em;
    line-height:1.05;
    text-shadow:0 2px 24px rgba(0,0,0,0.45);
    text-transform:uppercase;
  }
  .hero .collection-line{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.9rem;
    margin-top:1.3rem;
    font-family:'Jost', sans-serif;
    font-size:0.78rem;
    letter-spacing:0.32em;
    text-transform:uppercase;
    color:var(--gold-light);
    font-weight:400;
  }
  .hero .collection-line .rule{
    width:32px;
    height:1px;
    background:var(--gold);
  }
  .hero .hero-lede{
    margin-top:1.4rem;
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.05rem, 2vw, 1.3rem);
    color:rgba(255,255,255,0.92);
    text-shadow:0 2px 16px rgba(0,0,0,0.5);
  }
  .hero .tagline{
    margin-top:0.9rem;
    font-size:0.82rem;
    letter-spacing:0.34em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.88);
    font-weight:400;
  }
  .hero .status-pill{
    display:inline-block;
    margin-top:1.9rem;
    font-size:0.68rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    color:var(--gold-light);
    border:1px solid var(--gold-dim);
    padding:0.5rem 1.1rem;
    border-radius:2px;
  }
  .hero-actions{
    margin-top:2.3rem;
    display:flex;
    gap:1rem;
    justify-content:center;
    flex-wrap:wrap;
  }
  .btn{
    font-family:'Jost', sans-serif;
    font-size:0.74rem;
    letter-spacing:0.24em;
    text-transform:uppercase;
    padding:0.95rem 2.1rem;
    border:1px solid rgba(255,255,255,0.7);
    color:#fff;
    background:transparent;
    cursor:pointer;
    transition:all .35s ease;
    display:inline-block;
  }
  .btn:hover{ background:#fff; color:var(--charcoal); }
  .btn-solid{
    background:var(--gold);
    border-color:var(--gold);
    color:#221d15;
  }
  .btn-solid:hover{
    background:var(--gold-light);
    border-color:var(--gold-light);
    color:#221d15;
  }

  .scroll-cue{
    position:absolute;
    left:50%;
    bottom:2.4rem;
    transform:translateX(-50%);
    z-index:2;
    color:rgba(255,255,255,0.75);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:0.5rem;
    font-size:0.62rem;
    letter-spacing:0.3em;
    text-transform:uppercase;
    cursor:pointer;
    transition:color .3s ease;
  }
  .scroll-cue:hover{ color:#fff; }
  .scroll-cue .line{
    width:1px;
    height:34px;
    background:linear-gradient(to bottom, rgba(255,255,255,0.9), transparent);
    animation:cue 2.2s ease-in-out infinite;
  }
  @keyframes cue{
    0%{ transform:scaleY(0.3); transform-origin:top; opacity:0.4;}
    50%{ transform:scaleY(1); transform-origin:top; opacity:1;}
    100%{ transform:scaleY(0.3); transform-origin:bottom; opacity:0.4;}
  }

  .sound-toggle{
    position:absolute;
    right:1.8rem;
    bottom:2.5rem;
    z-index:3;
    width:32px;
    height:32px;
    border:none;
    background:transparent;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    padding:0;
    opacity:0.75;
    transition:opacity .3s ease;
  }
  .sound-toggle:hover{
    opacity:1;
  }
  .sound-toggle svg{
    width:18px;
    height:18px;
    filter:drop-shadow(0 1px 4px rgba(0,0,0,0.7));
  }
  .sound-toggle svg path{
    fill:none;
    stroke:#fff;
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .sound-toggle .icon-unmuted{ display:none; }
  .sound-toggle[aria-pressed="true"] .icon-muted{ display:none; }
  .sound-toggle[aria-pressed="true"] .icon-unmuted{ display:block; }
  .sound-toggle[aria-pressed="true"] svg path{ stroke:var(--gold-light); }
  @media (max-width:640px){
    .sound-toggle{ right:1.2rem; bottom:2rem; width:30px; height:30px; }
    .sound-toggle svg{ width:16px; height:16px; }
  }

  .sound-toggle.is-fixed{
    position:fixed;
    right:1.8rem;
    bottom:1.8rem;
    z-index:200;
    width:44px;
    height:44px;
    border-radius:50%;
    border:1px solid var(--gold);
    background:#fff;
    box-shadow:0 10px 28px rgba(0,0,0,0.18);
    opacity:1;
    transition:background .3s ease, border-color .3s ease, transform .3s ease;
  }
  .sound-toggle.is-fixed:hover{
    background:#000;
    border-color:#000;
  }
  .sound-toggle.is-fixed svg{
    width:19px;
    height:19px;
    filter:none;
  }
  .sound-toggle.is-fixed svg path{
    stroke:var(--gold);
    transition:stroke .3s ease;
  }
  .sound-toggle.is-fixed[aria-pressed="true"] svg path{
    stroke:var(--gold);
  }
  .sound-toggle.is-fixed:hover svg path{
    stroke:#fff;
  }
  @media (max-width:640px){
    .sound-toggle.is-fixed{ right:1.1rem; bottom:1.1rem; width:40px; height:40px; }
    .sound-toggle.is-fixed svg{ width:17px; height:17px; }
  }

/* -------------------- INTRO / QUOTE -------------------- */
  .intro{
    background:var(--cream);
    padding:6.5rem 0 5.5rem;
    text-align:center;
  }
  .intro .eyebrow{ color:var(--gold); }
  .intro .eyebrow span{ color:var(--ink); font-weight:400; }
  .intro-rule{
    width:56px;
    height:1px;
    background:var(--gold);
    margin:1.4rem auto 2.1rem;
  }
  .intro p.lede{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(1.05rem, 1.6vw, 1.28rem);
    line-height:1.65;
    color:var(--ink-soft);
    max-width:640px;
    margin:0 auto;
  }
  .intro-heading{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    font-size:clamp(1.4rem, 2.6vw, 1.9rem);
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--ink);
    margin-bottom:1.8rem;
  }
  .intro-lines{
    display:flex;
    flex-direction:column;
    gap:0.5rem;
    margin-bottom:0.4rem;
  }
  .intro-lines p{
    font-family:'Cormorant Garamond', serif;
    font-size:clamp(1.1rem, 1.8vw, 1.35rem);
    color:var(--ink-soft);
  }
  .quote-mark{
    font-family:'Cormorant Garamond', serif;
    color:var(--gold);
    font-size:3.4rem;
    line-height:1;
    margin:2.6rem 0 0.6rem;
  }
  blockquote{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-weight:400;
    font-size:clamp(1.3rem, 2.4vw, 1.9rem);
    line-height:1.5;
    max-width:760px;
    margin:0 auto;
    color:var(--ink);
  }
  .intro .actions{ margin-top:2.8rem; }
  .intro .btn{
    border-color:var(--ink);
    color:var(--ink);
  }
  .intro .btn:hover{ background:var(--ink); color:#fff; }

/* -------------------- AUDIENCE / GET INVOLVED -------------------- */
  .audience{
    background:var(--cream);
    padding:1rem 0 6.5rem;
  }
  .audience-head{
    text-align:center;
    margin-bottom:4rem;
  }
  .audience-head .lede{
    margin:0 auto;
    color:var(--ink-soft);
  }
  .audience-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:3.5rem 2.5rem;
    max-width:1020px;
    margin:0 auto;
  }
  .audience-grid-2{
    grid-template-columns:repeat(2, 1fr);
    max-width:760px;
  }
  .audience-card{
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .audience-icon{
    width:64px;
    height:64px;
    border-radius:50%;
    border:1px solid var(--gold-dim);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:1.5rem;
  }
  .audience-icon svg{
    width:26px;
    height:26px;
  }
  .audience-icon svg path,
  .audience-icon svg circle{
    fill:none;
    stroke:var(--gold);
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .audience-card h3{
    font-family:'Cormorant Garamond', serif;
    font-weight:500;
    font-size:1.35rem;
    color:var(--ink);
  }
  .audience-rule{
    width:32px;
    height:1px;
    background:var(--gold);
    margin:0.9rem auto 1.2rem;
  }
  .audience-card p{
    font-size:0.88rem;
    line-height:1.7;
    color:var(--ink-soft);
    max-width:270px;
    margin-bottom:1.7rem;
    flex-grow:1;
  }
  .audience-card p.card-subheading{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1.05rem;
    color:var(--ink);
    max-width:280px;
    margin-bottom:1rem;
    flex-grow:0;
  }
  .audience-btn{
    border-color:var(--ink);
    color:var(--ink);
    font-size:0.68rem;
    padding:0.85rem 1.5rem;
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    white-space:nowrap;
  }
  .audience-btn:hover{ background:var(--ink); color:#fff; }
  .audience-btn span{ font-size:0.95rem; line-height:1; }

  @media (max-width:900px){
    .audience-grid{
      grid-template-columns:1fr;
      gap:3rem;
      max-width:360px;
    }
  }

  .new-chapter{
    text-align:center;
    max-width:680px;
    margin:5rem auto 0;
    padding-top:3.5rem;
    border-top:1px solid var(--line-dark);
  }
  .new-chapter-mark{
    width:34px;
    height:34px;
    margin:0 auto 1.3rem;
    color:var(--gold);
  }
  .new-chapter-mark svg path{
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
    stroke-linejoin:round;
  }
  .new-chapter .eyebrow{
    margin-bottom:1rem;
  }
  .new-chapter .lede{
    margin:0 auto;
    color:var(--ink-soft);
  }

/* -------------------- RESERVE / FORM -------------------- */
  .reserve{
    position:relative;
    background:var(--charcoal);
    color:#fff;
    padding:6.5rem 0 6rem;
  }
  .reserve::before{
    content:"";
    position:absolute; inset:0;
    background:
      radial-gradient(1200px 480px at 50% -10%, rgba(182,147,95,0.10), transparent 60%);
    pointer-events:none;
  }
  .reserve-head{
    text-align:center;
    max-width:600px;
    margin:0 auto 3.2rem;
    position:relative;
  }
  .reserve-head .eyebrow{ color:var(--gold-light); margin-bottom:0.9rem; }
  .reserve-head h2{
    font-family:'Cormorant Garamond', serif;
    font-weight:400;
    font-size:clamp(2rem, 4vw, 2.7rem);
  }
  .reserve-head p{
    margin-top:1rem;
    font-size:0.95rem;
    line-height:1.7;
    color:rgba(255,255,255,0.68);
    font-weight:300;
  }

  form.res-form{
    position:relative;
    max-width:720px;
    margin:0 auto;
  }
  .hp-field{
    position:absolute;
    left:-9999px;
    top:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
  }
  .grid-2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1.6rem 1.4rem;
  }
  .field{
    display:flex;
    flex-direction:column;
    gap:0.55rem;
    position:relative;
  }
  .field.full{ grid-column:1 / -1; }
  .field label{
    font-size:0.66rem;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.55);
  }
  .field input,
  .field select,
  .field textarea{
    font-family:'Jost', sans-serif;
    font-size:0.95rem;
    font-weight:300;
    background:transparent;
    border:none;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.3);
    color:#fff;
    padding:0.55rem 0.1rem;
    outline:none;
    transition:border-color .3s ease;
    line-height:1.4;
    height:2.5rem;
    box-sizing:border-box;
  }
  .field select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='rgba(255,255,255,0.55)' stroke-width='1.3'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 0.15rem center;
    background-size:14px;
    padding-right:1.6rem;
    cursor:pointer;
  }
  .field select option{ color:#111; }
  .field input::placeholder,
  .field textarea::placeholder{ color:rgba(255,255,255,0.32); }
  .field input:focus,
  .field select:focus,
  .field textarea:focus{ border-color:var(--gold); }
  .field textarea{ resize:vertical; min-height:80px; height:auto; }

/* -------------------- CUSTOM SELECT (Guests) -------------------- */
  .custom-select{
    position:relative;
  }
  .cs-trigger{
    width:100%;
    height:2.5rem;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.6rem;
    font-family:'Jost', sans-serif;
    font-size:0.95rem;
    font-weight:300;
    text-align:left;
    background:transparent;
    border:none;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.3);
    color:#fff;
    padding:0.55rem 0.1rem;
    cursor:pointer;
    transition:border-color .3s ease;
  }
  .cs-trigger:hover{ border-color:rgba(255,255,255,0.55); }
  .custom-select.open .cs-trigger{ border-color:var(--gold); }
  .cs-chevron{
    width:13px; height:13px;
    flex-shrink:0;
    transition:transform .25s ease;
  }
  .cs-chevron path{
    fill:none;
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.4;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .custom-select.open .cs-chevron{ transform:rotate(180deg); }
  .custom-select.open .cs-chevron path{ stroke:var(--gold-light); }

  .cs-options{
    position:absolute;
    left:0; right:0;
    top:calc(100% + 6px);
    background:var(--charcoal-2);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:0;
    list-style:none;
    margin:0;
    padding:0.3rem 0;
    z-index:30;
    box-shadow:0 20px 44px rgba(0,0,0,0.5);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .custom-select.open .cs-options{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .cs-options li{
    padding:0.6rem 0.9rem;
    font-family:'Jost', sans-serif;
    font-size:0.9rem;
    font-weight:300;
    color:rgba(255,255,255,0.72);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
    border-left:2px solid transparent;
  }
  .cs-options li:hover,
  .cs-options li.focused{
    background:rgba(182,147,95,0.12);
    color:#fff;
    border-left-color:var(--gold-dim);
  }
  .cs-options li.selected{
    color:var(--gold-light);
    border-left-color:var(--gold);
  }

/* -------------------- DATE FIELD + CALENDAR -------------------- */
  .date-field{
    position:relative;
    display:flex;
    align-items:center;
  }
  .date-field input{
    width:100%;
    padding-right:2.6rem;
    cursor:pointer;
  }
  .date-icon-btn,
  .date-clear-btn{
    position:absolute;
    right:0.1rem;
    top:50%;
    transform:translateY(-60%);
    background:transparent;
    border:none;
    padding:0.3rem;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .date-icon-btn svg,
  .date-clear-btn svg{
    width:16px;
    height:16px;
  }
  .date-icon-btn svg rect,
  .date-icon-btn svg path{
    fill:none;
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.3;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .date-icon-btn:hover svg rect,
  .date-icon-btn:hover svg path{ stroke:var(--gold-light); }
  .date-clear-btn svg path{
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.5;
    stroke-linecap:round;
  }
  .date-clear-btn:hover svg path{ stroke:var(--gold-light); }
  .date-field.has-value .date-icon-btn{ display:none; }
  .date-field:not(.has-value) .date-clear-btn{ display:none; }

  .calendar-popover{
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    width:280px;
    background:var(--charcoal-2);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:0;
    padding:1rem 1rem 0.6rem;
    z-index:40;
    box-shadow:0 20px 44px rgba(0,0,0,0.5);
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .date-field.open .calendar-popover{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .cal-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:0.8rem;
  }
  .cal-title{
    font-family:'Cormorant Garamond', serif;
    font-style:italic;
    font-size:1.05rem;
    color:#fff;
  }
  .cal-nav{
    background:transparent;
    border:none;
    padding:0.3rem;
    cursor:pointer;
    display:flex;
  }
  .cal-nav svg{ width:14px; height:14px; }
  .cal-nav svg path{
    fill:none;
    stroke:rgba(255,255,255,0.55);
    stroke-width:1.5;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .cal-nav:hover svg path{ stroke:var(--gold-light); }
  .cal-weekdays{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    margin-bottom:0.3rem;
  }
  .cal-weekdays span{
    text-align:center;
    font-family:'Jost', sans-serif;
    font-size:0.62rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:rgba(255,255,255,0.4);
    padding-bottom:0.4rem;
  }
  .cal-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    grid-auto-rows:32px;
  }
  .cal-day{
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:0;
    font-family:'Jost', sans-serif;
    font-size:0.82rem;
    font-weight:300;
    color:rgba(255,255,255,0.78);
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .cal-day:hover:not(:disabled){
    background:rgba(182,147,95,0.14);
    color:#fff;
  }
  .cal-day.today{
    color:var(--gold-light);
  }
  .cal-day.selected{
    background:var(--gold);
    color:#221d15;
    font-weight:500;
  }
  .cal-day:disabled{
    color:rgba(255,255,255,0.18);
    cursor:default;
  }
  .cal-day.empty{
    cursor:default;
  }
  @media (max-width:640px){
    .calendar-popover{ width:100%; left:0; right:0; }
  }
  .field-tooltip{
    position:absolute;
    left:0;
    top:calc(100% + 10px);
    background:var(--charcoal-2);
    color:var(--gold-light);
    font-family:'Jost', sans-serif;
    font-size:0.72rem;
    font-weight:400;
    letter-spacing:0.02em;
    line-height:1.4;
    padding:0.55rem 0.8rem;
    border-top:2px solid var(--gold);
    border-radius:0;
    box-shadow:0 16px 36px rgba(0,0,0,0.45);
    z-index:25;
    white-space:nowrap;
    opacity:0;
    transform:translateY(-4px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;
  }
  .field-tooltip::before{
    content:"";
    position:absolute;
    left:14px;
    top:-7px;
    width:0; height:0;
    border-left:6px solid transparent;
    border-right:6px solid transparent;
    border-bottom:6px solid var(--gold);
  }
  .field.invalid .field-tooltip{
    opacity:1;
    transform:translateY(0);
  }
  .field.invalid input{
    border-color:var(--gold);
  }
  @media (max-width:640px){
    .field-tooltip{ white-space:normal; max-width:90vw; }
  }

  .res-form .actions{
    margin-top:2.6rem;
    display:flex;
    align-items:center;
    gap:1.4rem;
    flex-wrap:wrap;
    justify-content:center;
  }
  .form-note{
    font-size:0.75rem;
    color:rgba(255,255,255,0.45);
    font-weight:300;
    text-align:center;
    margin-top:1.4rem;
  }