/* =========================================================
   Phoenix Dinner Salon
   Editorial, warm, Phoenix-rooted, quietly premium.
   ========================================================= */

:root{
  /* Palette */
  --bone:        #F4EFE7;  /* Desert Bone     */
  --ink:         #262421;  /* Charcoal Ink    */
  --olive:       #384A45;  /* Sonoran Olive   */
  --clay:        #B65F3A;  /* Clay Terracotta */
  --brass:       #A8844F;  /* Muted Brass     */
  --stone:       #D8CFC2;  /* Warm Stone      */
  --saguaro:     #1F2D2A;  /* Night Saguaro   */
  --linen:       #E9DDCF;  /* Sunbaked Linen  */

  /* Tints */
  --bone-dim:    rgba(244,239,231,.74);
  --bone-faint:  rgba(244,239,231,.52);
  --brass-line:  rgba(168,132,79,.34);
  --brass-faint: rgba(168,132,79,.18);
  --ink-line:    rgba(38,36,33,.16);

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, sans-serif;

  /* Fluid scale */
  --h1:    clamp(2.5rem, 1.6rem + 3.9vw, 4.5rem);
  --h2:    clamp(1.95rem, 1.35rem + 2.7vw, 3.35rem);
  --h2-lg: clamp(2.2rem, 1.4rem + 3.6vw, 4rem);
  --h3:    clamp(1.35rem, 1.15rem + 0.9vw, 1.85rem);
  --lede:  clamp(1.08rem, 1rem + 0.5vw, 1.32rem);
  --body:  clamp(1rem, 0.96rem + 0.2vw, 1.12rem);

  --wrap: 1240px;
  --pad: clamp(24px, 5vw, 72px);
  --section-y: clamp(76px, 9vw, 156px);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  font-family:var(--sans);
  background:var(--saguaro);
  color:var(--bone);
  font-size:var(--body);
  line-height:1.68;
  font-weight:300;
  letter-spacing:.002em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:380;
  line-height:1.04;
  letter-spacing:-.014em;
}

a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

/* ---------- Eyebrow ---------- */
.eyebrow{
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.26em;
  font-size:.72rem;
  font-weight:600;
  color:var(--brass);
  display:flex;
  align-items:center;
  gap:.85em;
  margin-bottom:1.5rem;
}
.eyebrow::before{
  content:"";
  width:clamp(20px,3vw,42px);
  height:1px;
  background:currentColor;
  opacity:.7;
  flex:none;
}
.eyebrow--clay{ color:var(--clay); }

/* ---------- Header / Nav ---------- */
.site-head{
  position:sticky; top:0; z-index:60;
  background:rgba(31,45,42,.82);
  backdrop-filter:saturate(150%) blur(10px);
  -webkit-backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--brass-faint);
}
.site-head__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:.95rem var(--pad);
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem;
}
.wordmark{
  font-family:var(--serif);
  font-size:clamp(1.05rem,1rem + .4vw,1.3rem);
  font-weight:440;
  letter-spacing:.005em;
  color:var(--bone);
  white-space:nowrap;
}
.site-nav{ display:flex; gap:clamp(1rem,2.4vw,2.4rem); flex-wrap:wrap; }
.site-nav a{
  font-size:.76rem; text-transform:uppercase; letter-spacing:.16em;
  font-weight:500; color:var(--bone-dim);
  padding-block:.2rem; position:relative; transition:color .25s ease;
}
.site-nav a::after{
  content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%;
  background:var(--brass); transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.site-nav a:hover{ color:var(--bone); }
.site-nav a:hover::after{ transform:scaleX(1); }

/* ---------- Hero ---------- */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  min-height:calc(100svh - 58px);
  background:var(--saguaro);
}
.hero__media{ position:relative; overflow:hidden; min-height:46svh; }
.hero__img{
  width:100%; height:100%; object-fit:cover; object-position:64% 50%;
}
.hero__panel{
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(40px,5vw,92px) clamp(28px,4vw,76px);
  background:var(--saguaro);
  border-left:1px solid var(--brass-faint);
}
.hero__title{
  font-size:var(--h1);
  font-weight:360;
  margin:.2rem 0 1.5rem;
  max-width:14ch;
}
.hero__sub{
  font-size:var(--lede);
  color:var(--bone-dim);
  max-width:42ch;
  margin-bottom:2.2rem;
}
.refrain{
  display:flex; flex-direction:column; gap:.35rem;
  margin-bottom:2.4rem;
  padding-left:1.1rem;
  border-left:2px solid var(--clay);
}
.refrain span{
  font-family:var(--serif);
  font-style:italic;
  font-weight:340;
  font-size:clamp(1.02rem,.98rem + .35vw,1.22rem);
  color:var(--stone);
  letter-spacing:-.01em;
}
.textlink{
  align-self:flex-start;
  font-family:var(--sans);
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.76rem;
  font-weight:600;
  color:var(--brass);
  display:inline-flex; align-items:center; gap:.6em;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--brass-line);
  transition:color .25s ease, border-color .25s ease;
}
.textlink span{ transition:transform .3s ease; }
.textlink:hover{ color:var(--bone); border-color:var(--bone); }
.textlink:hover span{ transform:translateX(5px); }

/* ---------- Movements (shared) ---------- */
.movement{ padding-block:var(--section-y); position:relative; }
.movement--ink{ background:var(--ink); }
.movement--olive{ background:var(--olive); }
.movement--saguaro{ background:var(--saguaro); }
.movement--signal{ background:var(--ink); }

.prose p + p{ margin-top:1.1rem; }
.prose p{ color:var(--bone-dim); }

/* ---------- The Salon ---------- */
.salon{
  display:grid;
  grid-template-columns:0.92fr 1.08fr;
  gap:clamp(28px,4.5vw,84px);
  align-items:start;
}
.salon__title{
  font-size:var(--h2);
  font-weight:360;
  max-width:16ch;
}
.salon__body{ font-size:var(--lede); padding-top:.4rem; }

.rule{
  border:0; height:1px; background:var(--brass-line);
  margin-block:clamp(48px,6.5vw,104px);
  max-width:100%;
}

/* ---------- Core Statement ---------- */
.core{ position:relative; }
.core__title{
  font-size:var(--h2-lg);
  font-weight:340;
  max-width:18ch;
  margin-bottom:clamp(28px,3.6vw,56px);
}
.core__cols{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:clamp(28px,4vw,72px);
  align-items:start;
}
.core__body{ font-size:var(--lede); color:var(--bone-dim); max-width:40ch; }
.core__support{
  font-family:var(--serif); font-style:italic; font-weight:340;
  font-size:clamp(1.15rem,1.05rem + .5vw,1.5rem);
  line-height:1.35; color:var(--clay);
  border-top:1px solid var(--brass-faint); padding-top:1.2rem;
}

/* ---------- The Experience ---------- */
.experience__title{
  font-size:var(--h2);
  font-weight:340;
  margin-bottom:clamp(40px,5vw,80px);
  max-width:20ch;
}
.triptych{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--brass-line);
}
.panel{
  padding:clamp(28px,2.6vw,44px) clamp(22px,2.2vw,40px) clamp(8px,2vw,20px) 0;
  border-left:1px solid var(--brass-line);
}
.panel:first-child{ border-left:0; padding-left:0; }
.panel:not(:first-child){ padding-left:clamp(22px,2.4vw,44px); }
.panel__num{
  font-family:var(--sans); font-weight:600; font-size:.78rem;
  letter-spacing:.2em; color:var(--clay); display:block; margin-bottom:1.4rem;
}
.panel__title{ font-size:var(--h3); font-weight:400; margin-bottom:.9rem; }
.panel__text{ color:var(--bone-dim); max-width:30ch; }

/* ---------- Principle (overlapping linen relief) ---------- */
.movement--principle{ padding-top:0; padding-bottom:var(--section-y); }
.relief{
  position:relative;
  margin-top:clamp(-130px,-8vw,-72px);
  background:var(--linen);
  color:var(--ink);
  padding:clamp(40px,5.2vw,92px) clamp(30px,4.6vw,84px);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.7);
}
.relief .eyebrow{ color:var(--clay); }
.relief__title{
  font-size:var(--h2);
  font-weight:360;
  color:var(--ink);
  max-width:16ch;
  margin-bottom:clamp(22px,2.6vw,40px);
}
.relief__body{ max-width:62ch; font-size:var(--lede); }
.relief__body p{ color:rgba(38,36,33,.82); }
.relief__statement{
  font-family:var(--serif); font-style:normal; font-weight:420;
  font-size:clamp(1.3rem,1.1rem + .8vw,1.85rem);
  line-height:1.25; color:var(--ink);
  margin-block:1.3rem;
}
.relief__statement em{ font-style:italic; color:var(--clay); }
.triad{
  list-style:none; display:flex; flex-wrap:wrap; align-items:baseline;
  gap:clamp(.6rem,2vw,1.4rem);
  margin-top:clamp(34px,4vw,60px);
  padding-top:clamp(26px,3vw,44px);
  border-top:1px solid var(--ink-line);
}
.triad li{
  font-family:var(--serif); font-weight:340;
  font-size:clamp(1.6rem,1.1rem + 2.2vw,2.7rem);
  color:var(--clay); letter-spacing:-.02em; line-height:1;
  display:flex; align-items:baseline; gap:clamp(.6rem,2vw,1.4rem);
}
.triad li:not(:last-child)::after{
  content:"\2014"; color:var(--brass); font-size:.6em; transform:translateY(-.1em);
}

/* ---------- For Hosts ---------- */
.hosts{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:clamp(28px,4.5vw,84px);
  align-items:start;
}
.hosts__title{ font-size:var(--h2); font-weight:360; max-width:15ch; }
.hosts__body{ font-size:var(--lede); }
.smallline{
  margin-top:1.6rem; padding-top:1.2rem;
  border-top:1px solid var(--brass-faint);
  font-size:.95rem; color:var(--bone-faint);
  letter-spacing:.01em;
}

/* ---------- The Signal ---------- */
.movement--signal{ position:relative; }
.movement--signal::before{
  content:""; position:absolute; left:0; top:0; bottom:0;
  width:clamp(4px,.5vw,7px); background:var(--clay);
}
.signal{
  display:grid;
  grid-template-columns:0.95fr 1.05fr;
  gap:clamp(28px,4.5vw,84px);
  align-items:start;
}
.signal__title{ font-size:var(--h2-lg); font-weight:340; max-width:10ch; }
.signal__body{ font-size:var(--lede); }

/* ---------- Closing ---------- */
.closing{
  background:var(--clay);
  color:var(--bone);
  padding-block:clamp(88px,12vw,190px);
  padding-inline:var(--pad);
  text-align:center;
}
.closing__line{
  font-family:var(--serif);
  font-style:italic;
  font-weight:340;
  font-size:clamp(1.9rem,1.2rem + 3.3vw,3.6rem);
  line-height:1.16;
  letter-spacing:-.015em;
  max-width:18ch;
  margin-inline:auto;
}

/* ---------- Footer ---------- */
.foot{ background:var(--saguaro); padding-block:clamp(56px,7vw,104px); border-top:1px solid var(--brass-faint); }
.foot__inner{ display:flex; flex-direction:column; gap:.45rem; }
.foot__mark{ font-family:var(--serif); font-size:clamp(1.4rem,1.1rem + 1.2vw,2rem); font-weight:400; color:var(--bone); margin-bottom:.4rem; }
.foot__tag{ color:var(--brass); font-size:.82rem; text-transform:uppercase; letter-spacing:.2em; font-weight:500; }
.foot__place{ color:var(--bone-dim); }
.foot__mail{ color:var(--bone-dim); margin-top:1.3rem; }
.foot__mail a{ color:var(--bone); border-bottom:1px solid var(--brass-line); padding-bottom:1px; transition:border-color .25s ease; }
.foot__mail a:hover{ border-color:var(--bone); }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:900px){
  .hero{ grid-template-columns:1fr; min-height:auto; }
  .hero__media{ min-height:52svh; order:-1; }
  .hero__img{ object-position:62% 42%; }
  .hero__panel{ border-left:0; border-top:1px solid var(--brass-faint); padding-block:clamp(44px,9vw,72px); }
  .hero__title{ max-width:18ch; }

  .salon,
  .core__cols,
  .hosts,
  .signal{ grid-template-columns:1fr; }
  .core__support{ border-top:0; padding-top:0; }
  .salon__body,
  .hosts__body{ padding-top:0; }
}

@media (max-width:680px){
  body{ line-height:1.62; }
  .triptych{ grid-template-columns:1fr; }
  .panel,
  .panel:not(:first-child){ border-left:0; padding-left:0; padding-right:0; }
  .panel{ border-top:1px solid var(--brass-line); padding-block:clamp(24px,7vw,38px); }
  .panel:first-child{ border-top:0; padding-top:0; }
  .triad{ flex-direction:column; align-items:flex-start; gap:.3rem; }
  .triad li:not(:last-child)::after{ content:none; }
  .relief{ margin-top:-44px; }
  .site-nav{ gap:1rem 1.1rem; }
}

/* =========================================================
   Motion (restrained, guarded)
   ========================================================= */
@media (prefers-reduced-motion:no-preference){
  @keyframes riseIn{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }
  @keyframes settle{
    from{ transform:scale(1.055); }
    to{ transform:scale(1); }
  }
  .hero__img{ animation:settle 7s cubic-bezier(.16,.7,.3,1) both; }
  .hero__panel > *{ animation:riseIn .85s cubic-bezier(.2,.7,.2,1) both; }
  .hero__panel > :nth-child(1){ animation-delay:.10s; }
  .hero__panel > :nth-child(2){ animation-delay:.20s; }
  .hero__panel > :nth-child(3){ animation-delay:.32s; }
  .hero__panel > :nth-child(4){ animation-delay:.44s; }
  .hero__panel > :nth-child(5){ animation-delay:.56s; }
}