/* ═══════════════════════════════════════════════════════════════
   THE SPIN DEN — Design System
   Single source of truth for tokens + components.
   Both pages consume this file; page HTML contains no styling.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS (sampled from logo) ─────────────────────────── */
:root{
  /* color */
  --sd-navy:      #0E3A69;   /* logo wordmark navy   */
  --sd-blue:      #1568B8;   /* logo swirl blue      */
  --sd-blue-soft: #BFD9F2;   /* derived tint         */
  --sd-green:     #67A24A;   /* logo swirl green     */
  --sd-green-deep:#4E8236;   /* derived shade        */
  --sd-mist:      #F4F8FC;   /* page background      */
  --sd-white:     #FFFFFF;
  --sd-ink:       #1C2E42;   /* body text            */

  /* type */
  --sd-font-display:'Oswald',sans-serif;      /* condensed caps, matches logo lockup */
  --sd-font-body:'Source Sans 3',sans-serif;

  /* shape + rhythm */
  --sd-radius: 16px;
  --sd-ring: 0 0 0 4px var(--sd-white), 0 0 0 8px var(--sd-blue-soft);
  --sd-shadow: 0 10px 30px rgba(14,58,105,.12);
  --sd-section-pad: clamp(3.5rem, 8vw, 5.5rem);
}

/* ── 2. BASE ───────────────────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--sd-font-body);
  color:var(--sd-ink);
  background:var(--sd-mist);
  line-height:1.65;
  overflow-x:hidden;
}
h1,h2,h3{font-family:var(--sd-font-display);font-weight:600;color:var(--sd-navy);letter-spacing:.02em;text-transform:uppercase;line-height:1.15}
img{max-width:100%;display:block}
a{color:var(--sd-blue)}
.sd-container{max-width:1120px;margin:0 auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── 3. AMBIENT BACKGROUND: bubbles + sparkles ─────────────── */
.sd-bubbles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sd-bubble{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(191,217,242,.4) 55%, rgba(21,104,184,.18));
  border:1px solid rgba(21,104,184,.22);
  opacity:.45;animation:sd-rise linear infinite;
}
.sd-bubble--green{background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.95), rgba(103,162,74,.28) 55%, rgba(78,130,54,.15));border-color:rgba(103,162,74,.25)}
@keyframes sd-rise{from{transform:translateY(12vh)}to{transform:translateY(-120vh)}}
.sd-sparkle{position:absolute;line-height:1;animation:sd-twinkle ease-in-out infinite}
.sd-sparkle--blue{color:var(--sd-blue)}
.sd-sparkle--green{color:var(--sd-green)}
@keyframes sd-twinkle{0%,100%{opacity:.12;transform:scale(.75) rotate(0deg)}50%{opacity:.8;transform:scale(1.1) rotate(18deg)}}
.sd-content{position:relative;z-index:1}

/* ── 4. NAV ────────────────────────────────────────────────── */
.sd-nav{background:var(--sd-white);border-bottom:3px solid var(--sd-green);position:sticky;top:0;z-index:50;box-shadow:0 2px 12px rgba(14,58,105,.08)}
.sd-nav__inner{display:flex;align-items:center;justify-content:space-between;padding-block:.7rem}
.sd-nav__logo img{height:52px;width:auto}
.sd-nav__links{display:flex;gap:1.8rem;list-style:none}
.sd-nav__links a{text-decoration:none;color:var(--sd-navy);font-family:var(--sd-font-display);font-weight:500;text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;padding-bottom:.15rem;border-bottom:2px solid transparent}
.sd-nav__links a:hover,.sd-nav__links a[aria-current="page"]{color:var(--sd-blue);border-bottom-color:var(--sd-green)}

/* ── 5. BANNER ─────────────────────────────────────────────── */
.sd-banner{background:var(--sd-white);text-align:center;padding:clamp(3rem,7vw,5rem) 1.25rem clamp(3.5rem,8vw,5.5rem);border-bottom:1px solid var(--sd-blue-soft);position:relative}
.sd-banner__logo{max-width:min(560px,82vw);margin:0 auto 1.75rem}
.sd-banner__badge{
  display:inline-block;font-family:var(--sd-font-display);font-weight:600;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(1.05rem,2.8vw,1.5rem);color:var(--sd-white);
  background:linear-gradient(120deg,var(--sd-blue),var(--sd-green));
  padding:.5rem 2rem;border-radius:999px;box-shadow:var(--sd-shadow);
}
.sd-banner--slim{padding:2.5rem 1.25rem}
.sd-banner--slim .sd-banner__logo{max-width:300px;margin-bottom:1.25rem}

/* ── 6. SECTIONS ───────────────────────────────────────────── */
.sd-section{padding-block:var(--sd-section-pad)}
.sd-section--band{background:var(--sd-white);border-block:3px solid var(--sd-blue-soft)}
.sd-title{font-size:clamp(1.5rem,3.8vw,2.2rem);margin-bottom:1.75rem}
.sd-title::after{content:'';display:block;width:76px;height:5px;border-radius:3px;margin-top:.55rem;background:linear-gradient(90deg,var(--sd-blue),var(--sd-green))}
.sd-title--center{text-align:center}
.sd-title--center::after{margin-inline:auto}

/* ── 7. COMPONENTS ─────────────────────────────────────────── */

/* two-column media split */
.sd-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.sd-split--bio{grid-template-columns:1.4fr 1fr}

/* amenity list */
.sd-list{list-style:none;display:flex;flex-direction:column;gap:.85rem}
.sd-list li{
  background:var(--sd-white);border-left:6px solid var(--sd-green);border-radius:10px;
  padding:.8rem 1.1rem;font-size:1.02rem;box-shadow:0 2px 10px rgba(14,58,105,.06);
  display:flex;gap:.7rem;align-items:baseline;
}
.sd-list li::before{content:'✦';color:var(--sd-blue);font-size:.75rem}

/* framed image (brand ring) */
.sd-frame{border-radius:var(--sd-radius);overflow:hidden;box-shadow:var(--sd-ring),var(--sd-shadow)}
.sd-frame--circle{border-radius:50%;aspect-ratio:1/1}
.sd-frame--circle img{width:100%;height:100%;object-fit:cover}
.sd-frame__caption{font-size:.85rem;color:var(--sd-navy);opacity:.75;text-align:center;margin-top:1rem}

/* photo cards (before / current / future) */
.sd-photo-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem}
.sd-photo-card{background:var(--sd-mist);border-radius:var(--sd-radius);overflow:hidden;box-shadow:var(--sd-shadow);display:flex;flex-direction:column}
.sd-photo-card__img{aspect-ratio:4/3;object-fit:cover;width:100%}
.sd-photo-card__ph{aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;background:repeating-linear-gradient(45deg,#E6EEF6,#E6EEF6 14px,#DDE8F3 14px,#DDE8F3 28px);color:var(--sd-navy)}
.sd-photo-card__ph .icon{font-size:2.2rem}
.sd-photo-card__ph .lbl{font-size:.78rem;opacity:.65}
.sd-photo-card__body{padding:1rem 1.2rem;text-align:center}
.sd-tag{display:inline-block;font-family:var(--sd-font-display);text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--sd-white);background:var(--sd-navy);border-radius:999px;padding:.2rem 1rem;margin-bottom:.4rem}
.sd-tag--blue{background:var(--sd-blue)}
.sd-tag--green{background:var(--sd-green)}
.sd-photo-card__body p{font-size:.87rem;opacity:.85}

/* pull quote */
.sd-quote{border-left:5px solid var(--sd-green);padding-left:1.1rem;font-style:italic;color:var(--sd-blue);font-size:1.1rem;margin-block:1.5rem}

/* button */
.sd-btn{
  display:inline-block;text-decoration:none;cursor:pointer;border:none;
  font-family:var(--sd-font-display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  font-size:1.25rem;color:var(--sd-white);
  background:linear-gradient(120deg,var(--sd-blue),var(--sd-green));
  padding:1.05rem 3.2rem;border-radius:999px;
  box-shadow:0 6px 0 var(--sd-navy), 0 14px 30px rgba(14,58,105,.25);
  transition:transform .15s, box-shadow .15s;
}
.sd-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 var(--sd-navy), 0 18px 34px rgba(14,58,105,.3)}
.sd-btn:active{transform:translateY(2px);box-shadow:0 3px 0 var(--sd-navy)}
.sd-btn:focus-visible{outline:3px solid var(--sd-green);outline-offset:4px}

/* centered prose block */
.sd-prose-center{max-width:740px;margin-inline:auto;text-align:center}
.sd-prose-center p{font-size:1.05rem;margin-bottom:2.25rem}

/* ── 8. FOOTER ─────────────────────────────────────────────── */
.sd-footer{background:var(--sd-navy);color:var(--sd-mist);padding:3rem 0 1.5rem;margin-top:2rem}
.sd-footer h3{color:var(--sd-white);font-size:1.4rem;margin-bottom:1.2rem}
.sd-footer h3::after{content:'';display:block;width:56px;height:4px;border-radius:2px;margin-top:.45rem;background:linear-gradient(90deg,var(--sd-blue),var(--sd-green))}
.sd-footer__grid{display:flex;flex-wrap:wrap;gap:2.25rem;margin-bottom:2rem}
.sd-footer__item{display:flex;gap:.6rem;align-items:baseline;font-size:.95rem}
.sd-footer__item .ico{color:var(--sd-green)}
.sd-footer__item a{color:var(--sd-mist);text-decoration:none}
.sd-footer__item a:hover{color:var(--sd-blue-soft)}
.sd-footer__copy{border-top:1px solid rgba(191,217,242,.25);padding-top:1.2rem;font-size:.8rem;opacity:.7;text-align:center}

/* ── 9. RESPONSIVE + MOTION ────────────────────────────────── */
@media(max-width:860px){
  .sd-split,.sd-split--bio{grid-template-columns:1fr}
  .sd-split__media{order:-1;max-width:520px;margin-inline:auto;width:100%}
  .sd-photo-row{grid-template-columns:1fr;max-width:480px;margin-inline:auto}
  .sd-nav__links{gap:1rem}
  .sd-nav__logo img{height:42px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}