/* ==========================================================================
   LAS VEGAS POOL SOCIETY
   style.css: the single stylesheet for the whole site.

   Structure:
     1.  Tokens (colors, type, spacing)
     2.  Reset & base
     3.  Typography
     4.  Layout helpers
     5.  Header / navigation
     6.  Buttons & links
     7.  Hero
     8.  Sections & components
     9.  Forms
     10. Footer
     11. Motion & accessibility
     12. Responsive
   ========================================================================== */


/* 1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Palette, taken from the LVPS brand spec. Change here, changes everywhere. */
  --society-black: #171717;
  --desert-ivory:  #F4F0E8;
  --pool-blue:     #2E6473;
  --water:         #78A9AC;
  --travertine:    #C8BBA7;
  --white:         #FFFFFF;

  /* Derived tones */
  --ink-70:        rgba(23, 23, 23, 0.70);
  --ink-55:        rgba(23, 23, 23, 0.55);
  --ink-12:        rgba(23, 23, 23, 0.12);
  --ivory-sink:    #EBE5DA;   /* slightly deeper ivory for alternating bands */
  --blue-deep:     #24505C;   /* hover state for Pool Blue */

  /* Typefaces.
     Didot is listed first: on macOS it resolves to the real Didot.
     Bodoni Moda (Google Fonts) is the Didone stand-in everywhere else.
     If you license a real Didot webfont, drop it in and add it at the front. */
  --font-display: "Didot", "Bodoni Moda", "Playfair Display", Didot, "Times New Roman", serif;
  --font-ui: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale */
  --fs-hero:    clamp(3.1rem, 12vw, 9rem);
  --fs-display: clamp(2.3rem, 6.2vw, 4.6rem);
  --fs-title:   clamp(1.75rem, 3.6vw, 2.7rem);
  --fs-sub:     clamp(1.25rem, 2.2vw, 1.6rem);
  --fs-lead:    clamp(1.05rem, 1.5vw, 1.2rem);
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-eyebrow: 0.6875rem;

  /* Spacing */
  --gutter: clamp(1.5rem, 5vw, 5rem);
  --band:   clamp(4.5rem, 11vw, 9.5rem);
  --max:    1320px;
  --max-text: 62ch;
}


/* 2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--desert-ivory);
  color: var(--society-black);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

/* Photography never pops in white, it fades up from travertine. */
img[loading] { background: var(--travertine); }


/* 3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.04;
  margin: 0;
}

h1 { font-size: var(--fs-display); }
h2 { font-size: var(--fs-display); }
h3 { font-size: var(--fs-title); }
h4 { font-size: var(--fs-sub); }

p { margin: 0 0 1.35em; max-width: var(--max-text); }
p:last-child { margin-bottom: 0; }

/* The eyebrow: small letterspaced Montserrat. Used as the only
   labelling device on the site. Reads like a membership card, not a badge. */
.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 1.4rem;
  display: block;
}
.eyebrow--blue { color: var(--pool-blue); }
.eyebrow--light { color: rgba(255,255,255,0.72); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.7;
  color: var(--ink-70);
}

.statement {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 18ch;
}

.text-blue { color: var(--pool-blue); }


/* 4. LAYOUT
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band { padding-block: var(--band); }
.band--tight { padding-block: calc(var(--band) * 0.6); }
.band--ivory-deep { background: var(--ivory-sink); }
.band--travertine { background: var(--travertine); }
.band--black { background: var(--society-black); color: var(--desert-ivory); }
.band--black .eyebrow { color: rgba(244,240,232,0.55); }
.band--black .lead { color: rgba(244,240,232,0.72); }

/* Editorial split: big Didone statement left, small Montserrat detail right. */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 5rem);
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr 1fr; align-items: start; }
  .split--narrow-first { grid-template-columns: 0.85fr 1fr; }
}

/* THE SIGNATURE ELEMENT: the waterline.
   A pool's waterline tile band, reduced to two rules. It is the only
   divider used on this site. No cards, no boxes, no borders elsewhere. */
.waterline {
  border: 0;
  height: 5px;
  margin: 0;
  background:
    linear-gradient(var(--pool-blue), var(--pool-blue)) top / 100% 1px no-repeat,
    linear-gradient(var(--travertine), var(--travertine)) bottom / 100% 3px no-repeat;
  opacity: 0.55;
}
.waterline--full { margin-block: 0; }
.band--black .waterline { opacity: 0.4; }


/* 5. HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 240, 232, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ink-12);
}

.header-inner {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.9rem var(--gutter);
  display: flex;
  align-items: center;
  gap: 2rem;
}

.wordmark {
  font-family: var(--font-display);
  font-size: 0.95rem;
  line-height: 1.12;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--society-black);
  text-decoration: none;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-right: auto;
}
.wordmark svg,
.wordmark img { width: 32px; height: 32px; flex: none; }
.footer-mark-lockup { display: flex; align-items: center; gap: 0.85rem; }
.footer-mark-lockup img { width: 40px; height: 40px; filter: invert(1); }
.wordmark span { display: block; }

.nav-primary ul {
  list-style: none;
  display: flex;
  gap: clamp(1.1rem, 2.2vw, 2.1rem);
  margin: 0;
  padding: 0;
}
.nav-primary a {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--society-black);
  text-decoration: none;
  padding-block: 0.35rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.nav-primary a:hover,
.nav-primary a[aria-current="page"] { border-bottom-color: var(--pool-blue); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ink-12);
  color: var(--society-black);
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.6rem 0.85rem;
  cursor: pointer;
}


/* 6. BUTTONS & LINKS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.05rem 1.9rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn--primary { background: var(--pool-blue); color: var(--white); }
.btn--primary:hover { background: var(--blue-deep); }
.btn--ghost { background: transparent; color: var(--society-black); border-color: var(--society-black); }
.btn--ghost:hover { background: var(--society-black); color: var(--desert-ivory); }
.btn--light { background: var(--desert-ivory); color: var(--society-black); }
.btn--light:hover { background: var(--white); }

.nav-cta { padding: 0.85rem 1.4rem; }

/* Text link. The only other place Pool Blue appears. */
.link {
  color: var(--pool-blue);
  text-decoration: none;
  border-bottom: 1px solid rgba(46, 100, 115, 0.35);
  padding-bottom: 1px;
}
.link:hover { border-bottom-color: var(--pool-blue); }


/* 7. HERO
   -------------------------------------------------------------------------- */
.hero { padding-top: clamp(3rem, 8vw, 6.5rem); }

.hero-mark {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
}
.hero-mark span { display: block; }

.hero-meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding-top: 2rem;
}
@media (min-width: 800px) {
  .hero-meta { grid-template-columns: 1.2fr 1fr; align-items: end; }
}

.hero-credentials {
  font-size: var(--fs-small);
  color: var(--ink-55);
  line-height: 2;
}
.hero-credentials span { display: block; }

.hero-figure { margin: clamp(3rem, 7vw, 5rem) 0 0; }
.hero-figure img {
  width: 100%;
  height: clamp(340px, 62vh, 720px);
  object-fit: cover;
}

/* Page hero for interior pages, smaller, no photo above the fold. */
.page-head { padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { max-width: 16ch; }
.page-head .lead { margin-top: 1.8rem; max-width: 52ch; }


/* 8. SECTIONS & COMPONENTS
   -------------------------------------------------------------------------- */

/* Full-bleed photograph band */
.figure-full img {
  width: 100%;
  height: clamp(300px, 55vh, 620px);
  object-fit: cover;
}
.figure-caption {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-55);
  padding: 1rem var(--gutter) 0;
  max-width: var(--max);
  margin-inline: auto;
}

/* Plain list of what's included. No icons, no cards, just a rule per line. */
.spec-list { list-style: none; margin: 0; padding: 0; }
.spec-list li {
  padding: 1.15rem 0;
  border-top: 1px solid var(--ink-12);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.3rem;
}
.spec-list li:last-child { border-bottom: 1px solid var(--ink-12); }
.spec-list strong { font-weight: 600; font-size: 0.95rem; }
.spec-list span { color: var(--ink-70); font-size: 0.9375rem; line-height: 1.65; }
@media (min-width: 700px) {
  .spec-list li { grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
}
.band--black .spec-list li { border-color: rgba(244,240,232,0.18); }
.band--black .spec-list span { color: rgba(244,240,232,0.7); }

/* Two- and three-across editorial columns. Text only, deliberately no cards. */
.cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 760px) { .cols--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cols--3 { grid-template-columns: repeat(3, 1fr); } }

.col h3, .col h4 { margin-bottom: 0.9rem; }
.col p { color: var(--ink-70); font-size: 0.9375rem; }
/* Columns on a black band need light body copy, or the text vanishes. */
.band--black .col p { color: rgba(244, 240, 232, 0.72); }

/* Service area list */
.areas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
}
.areas li {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  padding: 1.1rem 0;
  border-top: 1px solid var(--ink-12);
}

/* Closing call to action */
.closer { text-align: left; }
.closer .statement { margin-bottom: 2.5rem; max-width: 20ch; }

/* Article list for Resources */
.posts { list-style: none; margin: 0; padding: 0; }
.posts li { border-top: 1px solid var(--ink-12); padding: 2rem 0; }
.posts li:last-child { border-bottom: 1px solid var(--ink-12); }
.posts h3 { font-size: var(--fs-sub); margin-bottom: 0.6rem; }
.posts p { color: var(--ink-70); font-size: 0.9375rem; margin-bottom: 0; }

.prose h2 { font-size: var(--fs-title); margin-top: 3rem; margin-bottom: 1rem; }
.prose h3 { font-size: var(--fs-sub); margin-top: 2rem; margin-bottom: 0.75rem; }
.prose ul { color: var(--ink-70); padding-left: 1.2rem; margin-bottom: 1.35em; }
.prose li { margin-bottom: 0.4rem; }


/* 9. FORMS
   -------------------------------------------------------------------------- */
.form { max-width: 40rem; }

.field { margin-bottom: 1.9rem; }

.field label {
  display: block;
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-bottom: 0.6rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--society-black);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-12);
  padding: 0.65rem 0;
  border-radius: 0;
  appearance: none;
}
.field select { background-image: none; }
.field textarea { min-height: 7rem; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--pool-blue);
}

.field-help { font-size: var(--fs-small); color: var(--ink-55); margin-top: 0.5rem; }

.field-row { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* Honeypot: hidden from people, catches bots. */
.field--trap { position: absolute; left: -9999px; }


/* Manifesto: the philosophy block on The Society page. Didone set large,
   one line per thought, with air between them. Deliberately not body copy. */
.manifesto { max-width: 30ch; }
.manifesto p {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.1vw, 2.35rem);
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin: 0 0 1.1em;
  max-width: none;
}
.manifesto p:last-child { margin-bottom: 0; }
.manifesto .manifesto-close { color: var(--water); }

/* PORTRAIT LAYOUT, currently unused. Uncomment together with the <figure>
   block in the-society.html to put a photo beside the owner story.

.portrait {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
@media (min-width: 900px) {
  .portrait { grid-template-columns: 0.85fr 1fr; }
  .portrait-figure { position: sticky; top: 6rem; }
}
.portrait-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.portrait-figure figcaption {
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin-top: 1rem;
}

*/

/* Pull quote, breaks up the biography without adding a card. */
.pull {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.3vw, 2.45rem);
  line-height: 1.22;
  letter-spacing: -0.018em;
  max-width: 24ch;
  margin: 3.25rem 0;
  padding-left: 1.75rem;
  border-left: 1px solid var(--pool-blue);
}

/* 10. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--society-black);
  color: var(--desert-ivory);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) 2.5rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.75rem;
  padding-bottom: 3rem;
}
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }

.footer-grid h4 {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244,240,232,0.5);
  margin-bottom: 1.1rem;
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 0.6rem; }
.footer-grid a { color: var(--desert-ivory); text-decoration: none; font-size: 0.9375rem; }
.footer-grid a:hover { color: var(--water); }

.footer-mark {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.3rem);
  line-height: 1.1;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.footer-legal {
  border-top: 1px solid rgba(244,240,232,0.16);
  padding-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-size: var(--fs-small);
  color: rgba(244,240,232,0.55);
}
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--water); }


/* Confirmation panel shown after a form is sent. Ivory card, black scrim,
   same restraint as the rest of the site. No icons, no green checkmark. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  background: rgba(23, 23, 23, 0.72);
}
.modal.is-open { display: flex; }

.modal-panel {
  background: var(--desert-ivory);
  max-width: 34rem;
  width: 100%;
  padding: clamp(2rem, 5vw, 3.25rem);
  border-top: 3px solid var(--pool-blue);
  animation: modal-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.modal-panel h2 {
  font-size: var(--fs-title);
  margin-bottom: 1.25rem;
}
.modal-panel p { color: var(--ink-70); }
.modal-panel .btn { margin-top: 2rem; }

@keyframes modal-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .modal-panel { animation: none; }
}

/* 11. MOTION & ACCESSIBILITY
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

:focus-visible {
  outline: 2px solid var(--pool-blue);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--society-black);
  color: var(--desert-ivory);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}
.skip-link:focus { left: var(--gutter); top: 0.5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}


/* 12. RESPONSIVE: mobile navigation
   -------------------------------------------------------------------------- */
@media (max-width: 1020px) {
  .nav-toggle { display: block; order: 3; }
  .nav-cta { display: none; }

  .nav-primary {
    display: none;
    order: 4;
    width: 100%;
    padding-bottom: 1.25rem;
  }
  .nav-primary.is-open { display: block; }
  .nav-primary ul { flex-direction: column; gap: 0; }
  .nav-primary li { border-top: 1px solid var(--ink-12); }
  .nav-primary a { display: block; padding: 1rem 0; border-bottom: 0; }
  .nav-primary a[aria-current="page"] { color: var(--pool-blue); }

  .nav-primary .nav-cta-mobile {
    display: inline-block;
    margin-top: 1.25rem;
    background: var(--pool-blue);
    color: var(--white);
    padding: 1rem 1.75rem;
    letter-spacing: 0.18em;
    font-weight: 600;
  }

  .header-inner { flex-wrap: wrap; }
}

@media (min-width: 1021px) {
  .nav-primary .nav-cta-mobile { display: none; }
}