/* ============================================================
   ABOUT / OASIS
   Extends css/style.css. Tokens, .btn, .fact, .visit, .foot,
   .site-head, .marquee, .grain and .dock all come from there.
   Only about-specific composition lives here.
   ============================================================ */

/* ---------- 1. HERO ---------------------------------------- */
.ab-hero{
  position:relative; overflow:hidden;
  background:var(--night);
  padding:calc(var(--head-clear) + clamp(36px,6vh,72px)) clamp(16px,5vw,64px) clamp(56px,8vh,96px);
}
.ab-hero__mesh{
  position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:
    radial-gradient(60% 55% at 18% 8%,  rgba(232,68,122,.42), transparent 70%),
    radial-gradient(55% 50% at 84% 22%, rgba(245,158,44,.34), transparent 72%),
    radial-gradient(70% 60% at 50% 96%, rgba(34,22,53,.9),    transparent 70%);
  filter:blur(6px);
  pointer-events:none;
}
.ab-hero__inner{ position:relative; max-width:var(--maxw); margin:0 auto; }

.ab-eyebrow{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.22em; font-size:var(--fs-3xs); color:var(--turquoise);
  margin-bottom:1.4rem;
}
.ab-hero__title{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  line-height:.9; letter-spacing:-.015em;
  /* Height is in the clamp as well as width because the title is the tallest
     thing in the hero and the only one that can push the calls to action past
     the fold. min() lets viewport height cap it on a short window without
     touching a tall one: at 1440x950 and above the 8vh term is larger than
     5.6vw, so the size is exactly what it always was. */
  font-size:clamp(2.2rem, min(5.6vw, 8vh), 4.4rem);
  color:var(--sand);
  max-width:22ch;
}
.ab-hero__title .nb{ white-space:nowrap; }
/* The nowrap keeps "in Palm Springs" off its own widow line on wide screens.
   Below ~700px the phrase is wider than the viewport, so let it break. */
@media(max-width:700px){
  .ab-hero__title .nb{ white-space:normal; }
  .ab-hero__title{ font-size:clamp(1.95rem,8.4vw,3rem); }
}
.ab-hero__title b{
  font-weight:900;
  background:linear-gradient(92deg,var(--apricot),var(--orange) 40%,var(--magenta));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* The liftable summary. Deliberately plain, entity dense, first 100 words. */
.ab-lede{
  margin-top:clamp(22px,3vw,34px);
  max-width:60ch;
  font-size:clamp(1.2rem,1.75vw,1.45rem);
  line-height:1.55; color:var(--sand);
  border-left:3px solid var(--orange);
  padding-left:clamp(18px,2.4vw,28px);
}
.ab-hero__cta{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(24px,3vw,36px); }

/* On a short desktop window the hero stack runs past the fold and takes both
   calls to action with it — at 1280x720 they finished 77px below it, so the
   page landed with nothing to act on. The title clamp above does most of the
   work; this takes the rest out of the vertical rhythm evenly rather than
   collapsing any one gap. Above 760px tall nothing here applies, and the
   mobile rules further down own everything below 761px wide. */
@media (min-width:761px) and (max-height:760px){
  .ab-hero{ padding-top:calc(var(--head-clear) + clamp(20px,3vh,72px)); }
  .ab-eyebrow{ margin-bottom:.9rem; }
  .ab-lede{ margin-top:clamp(16px,2vw,34px); }
  .ab-hero__cta{ margin-top:clamp(18px,2vw,36px); }
}
.btn--solid-sunset{
  background:linear-gradient(100deg,var(--magenta),var(--orange));
  color:var(--night);
  box-shadow:0 18px 46px -20px rgba(232,68,122,.75);
}
.btn--solid-sunset:hover{ transform:translateY(-2px); }

/* ---------- 2. STORY --------------------------------------- */
.ab-story{
  background:linear-gradient(180deg,#2c1b3f,var(--dusk));
  padding:clamp(72px,12vh,150px) clamp(16px,5vw,64px);
}
.ab-wrap{ max-width:var(--maxw); margin:0 auto; }
.ab-kicker{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.3rem,2.4vw,1.85rem); color:var(--apricot);
  margin-bottom:1.6rem;
}
.ab-story .section-title{ color:var(--sand); max-width:14ch; }
.ab-cols{
  display:grid; grid-template-columns:1fr; gap:clamp(34px,4.5vw,64px);
  margin-top:clamp(34px,5vw,60px); align-items:start;
}
@media(min-width:900px){ .ab-cols{ grid-template-columns:1.25fr .85fr; } }
.ab-prose p{
  font-size:var(--fs-base); line-height:1.7; color:var(--sand);
  max-width:62ch; margin-bottom:1.15rem;
}
.ab-prose p:last-child{ margin-bottom:0; }
.ab-prose h3{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-md); letter-spacing:.01em; color:var(--sand); line-height:1.15;
  margin-bottom:.85rem;
}
.ab-prose h3:not(:first-child){ margin-top:2rem; }
.ab-prose a{
  color:var(--apricot); border-bottom:1px solid rgba(255,201,126,.4);
  transition:color .2s, border-color .2s;
}
.ab-prose a:hover{ color:var(--sand); border-color:var(--sand); }
.ab-prose strong{ color:var(--apricot); font-weight:700; }

/* The side column stacks the room shot over the founder card: four
   paragraphs of prose leave it short otherwise. */
.ab-side{ display:grid; gap:clamp(20px,2.4vw,28px); max-width:460px; }

/* Source is 908px wide, so the frame is capped well under that rather than
   letting it stretch and go soft on a large screen. */
.ab-room{ margin:0; }
.ab-room img{
  display:block; width:100%; height:auto;
  aspect-ratio:3/4; object-fit:cover; object-position:center 20%;
  border-radius:22px;
  border:1px solid rgba(241,228,208,.13);
}
.ab-room figcaption{
  margin-top:.65rem;
  font-family:var(--serif); font-style:italic;
  font-size:var(--fs-sm); color:rgba(241,228,208,.72);
}

/* Founder card: the attributed quote and nothing else. No portrait slot —
   Sev does not want his picture on the site, so the card is typographic by
   design rather than an empty frame waiting on a file. He is named in the
   citation, so the card does not repeat it above the quote. */
.ab-person{
  padding:clamp(22px,2.6vw,30px); border-radius:22px;
  background:rgba(241,228,208,.05);
  border:1px solid rgba(241,228,208,.13);
}
.ab-person__quote{
  font-size:var(--fs-sm); line-height:1.65;
  color:rgba(241,228,208,.85);
}


/* ---------- 3. CRAFT --------------------------------------- */
.ab-craft{
  background:var(--night);
  padding:clamp(72px,12vh,150px) clamp(16px,5vw,64px);
}
.ab-craft .section-title{ color:var(--sand); }
.ab-craft__grid{
  display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,26px);
  margin-top:clamp(36px,5vw,60px);
}
@media(min-width:760px){ .ab-craft__grid{ grid-template-columns:repeat(3,1fr); } }
.ab-card{
  position:relative; overflow:hidden;
  padding:clamp(26px,3vw,36px); border-radius:22px;
  background:linear-gradient(165deg,rgba(241,228,208,.075),rgba(241,228,208,.02));
  border:1px solid rgba(241,228,208,.12);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.ab-card:hover{
  transform:translateY(-4px);
  border-color:rgba(232,68,122,.5);
  box-shadow:0 28px 60px -30px rgba(232,68,122,.6);
}
.ab-card h3{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-lg); letter-spacing:.01em; color:var(--sand); line-height:1.1;
}
.ab-card__fa{
  font-family:var(--serif); font-style:italic; font-size:var(--fs-md);
  color:var(--apricot); margin-top:.3rem;
}
.ab-card p{
  margin-top:.9rem; font-size:var(--fs-sm); line-height:1.65;
  color:rgba(241,228,208,.88);
}

/* Named dishes strip */
.ab-signature{
  margin-top:clamp(40px,5vw,64px);
  display:grid; grid-template-columns:1fr; gap:1px;
  background:rgba(241,228,208,.14);
  border:1px solid rgba(241,228,208,.14);
  border-radius:20px; overflow:hidden;
}
@media(min-width:700px){ .ab-signature{ grid-template-columns:repeat(3,1fr); } }
.ab-sig{ background:var(--night); padding:clamp(22px,2.6vw,30px); }
.ab-sig__name{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-md); color:var(--sand); line-height:1.15;
}
.ab-sig__note{
  margin-top:.55rem; font-size:var(--fs-sm); line-height:1.6;
  color:rgba(241,228,208,.82);
}
.ab-sig__price{
  display:inline-block; margin-top:.85rem;
  font-family:var(--display); font-weight:800; font-size:var(--fs-2xs);
  letter-spacing:.06em; color:var(--turquoise);
}

/* ---------- 4. FAST FACTS ---------------------------------- */
.ab-facts{
  background:linear-gradient(180deg,var(--dusk),#0d0819);
  padding:clamp(66px,10vh,130px) clamp(16px,5vw,64px);
}
.ab-facts .section-title{ color:var(--sand); }
.ab-facts .visit__facts{ margin-top:clamp(32px,4vw,52px); }
@media(min-width:900px){ .ab-facts .visit__facts{ grid-template-columns:repeat(3,1fr); } }

/* ---------- 5. FAQ (light section for readability) ---------- */
.ab-faq{
  background:var(--sand); color:var(--sand-ink);
  padding:clamp(72px,12vh,150px) clamp(16px,5vw,64px);
}
.ab-faq .ab-eyebrow{ color:var(--burnt-ink); }
.ab-faq .section-title{ color:var(--sand-ink); }
.ab-faq__list{ margin-top:clamp(36px,5vw,58px); max-width:900px; }
.ab-q{
  border-top:1px solid rgba(42,29,18,.22);
}
.ab-q:last-child{ border-bottom:1px solid rgba(42,29,18,.22); }
.ab-q > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem;
  padding:clamp(20px,2.4vw,28px) 0;
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-md); line-height:1.25; letter-spacing:.005em;
  color:var(--sand-ink);
  transition:color .2s;
}
.ab-q > summary::-webkit-details-marker{ display:none; }
.ab-q > summary:hover{ color:var(--burnt-ink); }
.ab-q__sign{
  flex:none; width:26px; height:26px; margin-top:.1rem;
  position:relative; border-radius:50%;
  border:2px solid var(--burnt-ink);
  transition:transform .3s var(--ease), background .25s;
}
.ab-q__sign::before,
.ab-q__sign::after{
  content:""; position:absolute; inset:50% 25%; height:2px; margin-top:-1px;
  background:var(--burnt-ink); transition:transform .3s var(--ease), background .25s;
}
.ab-q__sign::after{ transform:rotate(90deg); }
.ab-q[open] .ab-q__sign{ background:var(--burnt-ink); transform:rotate(135deg); }
.ab-q[open] .ab-q__sign::before,
.ab-q[open] .ab-q__sign::after{ background:var(--sand); }
.ab-q__a{
  padding:0 0 clamp(22px,2.6vw,30px);
  max-width:68ch;
}
.ab-q__a p{ font-size:var(--fs-base); line-height:1.7; color:#3a2a1a; }
.ab-q__a p + p{ margin-top:.9rem; }
.ab-q__a a{
  color:var(--burnt-ink); font-weight:700;
  border-bottom:1px solid rgba(138,74,18,.45);
}
.ab-q__a a:hover{ border-color:var(--burnt-ink); }

/* ---------- 6. CTA reprise --------------------------------- */
.ab-cta{
  background:var(--night);
  padding:clamp(66px,10vh,140px) clamp(16px,5vw,64px);
}
.ab-cta__card{
  max-width:var(--maxw); margin:0 auto;
  padding:clamp(34px,5vw,68px); border-radius:26px;
  background:linear-gradient(150deg,var(--magenta),var(--orange) 65%,var(--apricot));
  color:var(--night);
  box-shadow:0 30px 90px -34px rgba(232,68,122,.7);
}
.ab-cta__pre{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.18em; font-size:var(--fs-3xs); margin-bottom:1rem;
}
.ab-cta__line{
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(1.9rem,5vw,3.4rem); line-height:.98; letter-spacing:-.015em;
  max-width:18ch;
}
.ab-cta__row{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:clamp(26px,3.4vw,40px); }

/* Reduced motion: nothing here animates on scroll, but honour hover intent. */
@media(prefers-reduced-motion:reduce){
  .ab-card, .ab-card:hover, .btn--solid-sunset:hover{ transform:none; }
  .ab-q__sign, .ab-q__sign::before, .ab-q__sign::after{ transition:none; }
}

/* ---------- 3b. PRESS & RECOGNITION ------------------------ */
.ab-press{
  background:linear-gradient(180deg,var(--night),#1d1330);
  padding:clamp(72px,12vh,150px) clamp(16px,5vw,64px);
}
.ab-press .section-title{ color:var(--sand); }
.ab-press__grid{
  list-style:none; margin:clamp(36px,5vw,60px) 0 0; padding:0;
  display:grid; grid-template-columns:1fr; gap:clamp(18px,2.4vw,26px);
}
@media(min-width:820px){ .ab-press__grid{ grid-template-columns:repeat(3,1fr); } }
.ab-press__item{
  display:flex; flex-direction:column;
  padding:clamp(26px,3vw,34px); border-radius:22px;
  background:linear-gradient(165deg,rgba(241,228,208,.075),rgba(241,228,208,.02));
  border:1px solid rgba(241,228,208,.12);
  transition:transform .3s var(--ease), border-color .3s, box-shadow .3s var(--ease);
}
.ab-press__item:hover{
  transform:translateY(-4px);
  border-color:rgba(55,195,184,.5);
  box-shadow:0 28px 60px -30px rgba(55,195,184,.45);
}
/* The source slot holds a logo when one is present and falls back to the
   wordmark in type when it is not. Fixed slot height, never fixed width:
   these three logos run from 2.4:1 to 11.8:1, so equal-width scaling makes
   the widest one hair-thin and the tallest one shout. */
.ab-press__source{
  position:relative;
  min-height:44px; margin-bottom:.85rem;
  display:flex; align-items:center;
}
.ab-press__sourcetext{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  letter-spacing:.16em; font-size:var(--fs-3xs); color:var(--turquoise);
}
/* When the logo loads, about.js drops .has-logo on the slot and the type
   fallback steps aside. */
.ab-press__source.has-logo .ab-press__sourcetext{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
/* Parked absolutely rather than display:none. A display:none image is never
   fetched, so the load event that reveals it would never fire, and the logo
   could never appear. Absolute + opacity:0 still downloads and still takes
   no space in the slot. */
.ab-press__logo{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  opacity:0; pointer-events:none;
  width:auto; max-width:min(100%, 210px); object-fit:contain;
  /* Flatten three different brand palettes to one sand monochrome so the row
     reads as a set. Colour would fight the sunset gradient behind it. */
  filter:brightness(0) invert(1);
  transition:opacity .25s var(--ease);
}
.ab-press__source.has-logo .ab-press__logo{
  position:static; transform:none; opacity:.88; pointer-events:auto;
}
.ab-press__item:hover .ab-press__source.has-logo .ab-press__logo{ opacity:1; }

/* Optical sizing, tuned per mark rather than per pixel. A long thin wordmark
   carries at a smaller height than a stacked mark of the same area. */
.ab-press__logo--psl{  height:15px; }   /* 11.8:1 heavy sans wordmark */
.ab-press__logo--vgps{ height:42px; }   /* 2.4:1  stacked mark */
/* The Tribune mark is a fine-stroked engraved script. It needs more height and
   more opacity than the two sans marks to hold the same optical weight; at the
   26px that suits a sans wordmark its hairlines drop out entirely. */
.ab-press__logo--pst{  height:34px; opacity:1; }
.ab-press__source.has-logo .ab-press__logo--pst{ opacity:1; }

@media(prefers-reduced-motion:reduce){
  .ab-press__logo{ transition:none; }
}
.ab-press__headline{
  font-family:var(--display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-lg); line-height:1.12; color:var(--sand); letter-spacing:.005em;
}
/* The quote is the thing a skim-reader stops on, so it outweighs the body copy. */
.ab-press__quote{ margin:1.1rem 0 0; }
.ab-press__quote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.35rem,2vw,1.7rem); line-height:1.3;
  color:var(--apricot);
}
.ab-press__body{
  margin-top:1rem; font-size:var(--fs-sm); line-height:1.65;
  color:rgba(241,228,208,.88);
}
.ab-press__meta{
  margin-top:auto; padding-top:1.3rem;
  font-size:var(--fs-2xs); letter-spacing:.03em;
  color:rgba(241,228,208,.62);
}
.ab-press__meta a{
  color:var(--apricot); font-weight:700;
  border-bottom:1px solid rgba(255,201,126,.4);
  transition:color .2s, border-color .2s;
}
.ab-press__meta a:hover{ color:var(--sand); border-color:var(--sand); }

/* Founder card quote, now a real attributed blockquote. */
.ab-person__quote{ margin:0; }
.ab-person__quote p{
  font-family:var(--serif); font-style:italic;
  font-size:clamp(1.25rem,1.9vw,1.55rem); line-height:1.35;
  color:var(--apricot);
}
.ab-person__quote cite{
  display:block; margin-top:.8rem; font-style:normal;
  font-size:var(--fs-3xs); letter-spacing:.03em; line-height:1.5;
  color:rgba(241,228,208,.62);
}
.ab-person__quote cite a{
  color:var(--apricot); border-bottom:1px solid rgba(255,201,126,.4);
}
.ab-person__quote cite a:hover{ color:var(--sand); border-color:var(--sand); }

@media(prefers-reduced-motion:reduce){
  .ab-press__item, .ab-press__item:hover{ transform:none; }
}

/* Pointer from the About press strip to the full /press page. About keeps the
   three cards for its own E-E-A-T weight; /press carries the long version. */
.ab-press__intro{
  margin:clamp(14px,2vw,20px) 0 0;
  max-width:52ch;
  font-size:var(--fs-base); line-height:1.7;
  color:rgba(241,228,208,.78);
}
.ab-press__intro a{
  color:var(--turquoise);
  border-bottom:1px solid rgba(55,195,184,.4);
  text-decoration:none;
  transition:border-color .2s var(--ease);
}
.ab-press__intro a:hover{ border-color:var(--turquoise); }