/* Glow Wellness Spa – tokens sampled from the venue's own photograph of the room.
   See ../_brief.md for the rationale behind each value. */

:root {
  --ink:       #221F1C;   /* charcoal linens, low light – the dominant surface */
  --ink-soft:  #332E29;   /* raised surfaces on the dark ground */
  --paper:     #F4F1EC;   /* the plaster walls */
  --paper-2:   #EAE5DC;   /* a second paper tone for banded sections */
  --candle:    #C98A3F;   /* the accent, sampled from the candle flames */
  --oak:       #8A6A4B;   /* the floor – hairlines and meta text on dark */
  --sage:      #6B7862;   /* the plant – quiet labels only */
  --text:      #2B2723;
  --muted:     #6A625A;

  --shell: 1160px;
  --gut: clamp(1.25rem, 4vw, 2.75rem);

  --display: 'Sora', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  --body: 'Karla', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: var(--body);
  font-size: clamp(1rem, .96rem + .22vw, 1.09rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.1rem;
  font-weight: 700;
}
.skip:focus { left: .5rem; top: .5rem; }

:focus-visible {
  outline: 3px solid var(--candle);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- eyebrows ---------- */

.eyebrow {
  font-family: var(--body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--oak);
  margin: 0 0 .9rem;
}
.eyebrow--sage { color: var(--sage); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .8rem 1.5rem;
  font-family: var(--body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .28s var(--ease), color .28s var(--ease),
              border-color .28s var(--ease), transform .28s var(--ease);
}

.btn--solid {
  background: var(--candle);
  color: #1A1713;
  border-radius: 2px;
}
.btn--solid:hover { background: #DCA057; transform: translateY(-1px); }

.btn--ghost {
  background: transparent;
  color: var(--paper);
  border-color: rgba(244, 241, 236, .42);
  border-radius: 2px;
}
.btn--ghost:hover { border-color: var(--paper); background: rgba(244, 241, 236, .09); }

.btn--pill {
  background: transparent;
  color: var(--paper);
  border-color: rgba(244, 241, 236, .34);
  border-radius: 999px;
  min-height: 44px;
  padding: .55rem 1.15rem;
  font-size: .9rem;
}
.btn--pill:hover { border-color: var(--candle); color: var(--candle); }

.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.9rem; }
.cta-row--centre { justify-content: center; }

/* ---------- top bar ---------- */

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  padding-block: 1.15rem;
}
.topbar__in {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
  color: var(--paper);
  text-decoration: none;
  display: inline-flex;
  align-items: baseline;
  gap: .42rem;
  margin-right: auto;
}
.mark__g { color: var(--candle); }
.mark__rest { font-weight: 600; opacity: .92; font-size: .96em; }

.topnav { display: none; gap: 1.75rem; }
.topnav a {
  color: rgba(244, 241, 236, .84);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  padding-block: .5rem;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.topnav a:hover { color: var(--paper); border-bottom-color: var(--candle); }

@media (min-width: 900px) {
  .topnav { display: flex; }
}

/* ---------- hero ---------- */

.hero {
  position: relative;
  min-height: min(94vh, 780px);
  display: flex;
  align-items: flex-end;
  background: var(--ink);
  overflow: hidden;
}
.hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 50%;
}
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(20, 18, 16, .93) 0%, rgba(20, 18, 16, .74) 42%, rgba(20, 18, 16, .34) 100%);
}
.hero__in {
  position: relative;
  padding-block: clamp(6.5rem, 16vh, 8rem) clamp(2.75rem, 7vh, 4.25rem);
  color: var(--paper);
}
.hero h1 {
  font-size: clamp(2.15rem, 1.1rem + 4.4vw, 4rem);
  max-width: 17ch;
  margin-bottom: 1.25rem;
}
.hero__lede {
  max-width: 46ch;
  color: rgba(244, 241, 236, .85);
  font-size: clamp(1rem, .95rem + .3vw, 1.14rem);
}
.hero__proof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .7rem;
  margin: 2.1rem 0 0;
  font-size: .88rem;
  color: rgba(244, 241, 236, .74);
}
.hero__proof strong { color: var(--candle); font-size: 1.02rem; }
.dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--oak);
}

/* ---------- your hour (signature) ---------- */

.hour {
  background: var(--paper);
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.hour__head { max-width: 44ch; margin-bottom: clamp(2.5rem, 5vw, 3.75rem); }
.hour h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.7rem); margin-bottom: 1rem; }
.hour__note { color: var(--muted); }

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(138, 106, 75, .3);
}
.step {
  padding: 1.75rem 0;
  border-bottom: 1px solid rgba(138, 106, 75, .3);
  display: grid;
  gap: .55rem;
}
.step__n {
  font-family: var(--display);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .1em;
  color: var(--candle);
}
.step h3 { font-size: clamp(1.15rem, 1rem + .55vw, 1.42rem); }
.step p { color: var(--muted); max-width: 58ch; }

@media (min-width: 760px) {
  .step {
    grid-template-columns: 4.5rem minmax(0, 15rem) minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    padding: 2.1rem 0;
  }
  .step__n { padding-top: .35rem; }
}

/* ---------- treatments ---------- */

.treatments {
  background: var(--paper-2);
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.sec-head { max-width: 46ch; margin-bottom: clamp(2.25rem, 5vw, 3.5rem); }
.sec-head--centre { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.7rem); margin-bottom: 1rem; }
.sec-head__note { color: var(--muted); }

.groups {
  display: grid;
  gap: 1.6rem;
}
@media (min-width: 720px) { .groups { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .groups { grid-template-columns: repeat(3, 1fr); } }

.group {
  background: var(--paper);
  border: 1px solid rgba(138, 106, 75, .2);
  border-radius: 2px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.group > img {
  width: 100%;
  height: clamp(180px, 24vw, 230px);
  object-fit: cover;
  object-position: center 38%;
}
.group__body { padding: 1.6rem 1.5rem 1.75rem; display: flex; flex-direction: column; flex: 1; }
.group h3 {
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--candle);
  display: inline-block;
  align-self: flex-start;
}

.tlist { list-style: none; margin: 0; padding: 0; }
.tlist li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  /* A long treatment name and its duration should not collide. When they cannot share a
     line the duration drops below the name rather than squeezing it into two words. */
  column-gap: 1.5rem;
  row-gap: .1rem;
  padding: .6rem 0;
  border-bottom: 1px solid rgba(138, 106, 75, .16);
}
.tlist__n { flex: 1 1 11rem; }
.tlist__d { margin-left: auto; }
.tlist li:last-child { border-bottom: 0; }
.tlist__n { font-weight: 500; }
.tlist__d {
  font-size: .82rem;
  color: var(--muted);
  white-space: nowrap;
  letter-spacing: .02em;
}
.group__foot {
  margin-top: 1.2rem;
  font-size: .88rem;
  color: var(--muted);
}
.treatments__more {
  margin-top: 2rem;
  color: var(--muted);
  font-size: .93rem;
  max-width: 62ch;
}

/* ---------- the room ---------- */

.room { background: var(--paper); padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.room__in { display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 900px) {
  .room__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; }
}
.room h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.5rem); margin-bottom: 1.2rem; }
.room__text p { color: var(--muted); max-width: 52ch; }

.facts { margin: 2rem 0 0; display: grid; gap: 0; }
.facts > div {
  display: grid;
  gap: .2rem;
  padding: .95rem 0;
  border-top: 1px solid rgba(138, 106, 75, .24);
}
.facts > div:last-child { border-bottom: 1px solid rgba(138, 106, 75, .24); }
.facts dt {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--sage);
}
.facts dd { margin: 0; color: var(--text); }
@media (min-width: 560px) {
  .facts > div { grid-template-columns: 12rem minmax(0, 1fr); gap: 1.25rem; align-items: baseline; }
}

.room__pics { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.room__pics img { border-radius: 2px; width: 100%; }
.room__pics img:first-child { aspect-ratio: 4 / 3; object-fit: cover; }
.room__pics img:last-child { aspect-ratio: 16 / 9; object-fit: cover; object-position: center 42%; }
@media (min-width: 560px) {
  .room__pics { grid-template-columns: 1.35fr 1fr; align-items: stretch; }
  .room__pics img { height: 100%; }
  .room__pics img:first-child { aspect-ratio: auto; min-height: 320px; }
  .room__pics img:last-child { aspect-ratio: auto; min-height: 320px; }
}

/* ---------- quotes ---------- */

.says { background: var(--paper-2); padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.quotes { display: grid; gap: 1.25rem; }
@media (min-width: 820px) { .quotes { grid-template-columns: repeat(3, 1fr); } }

.quote {
  margin: 0;
  background: var(--paper);
  border-radius: 14px;
  padding: 1.9rem 1.7rem 1.6rem;
  border: 1px solid rgba(138, 106, 75, .18);
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.quote blockquote { margin: 0; }
.quote blockquote p {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.06rem;
  line-height: 1.42;
  letter-spacing: -.012em;
}
.quote figcaption {
  margin-top: auto;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text);
}
.quote figcaption span { font-weight: 400; color: var(--muted); }

/* ---------- visit ---------- */

.visit { background: var(--paper); padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.visit__in { display: grid; gap: clamp(2.25rem, 5vw, 4rem); }
@media (min-width: 800px) { .visit__in { grid-template-columns: 1.15fr 1fr; } }
.visit h2 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); margin-bottom: 1.1rem; }
.visit address {
  font-style: normal;
  font-size: 1.1rem;
  line-height: 1.55;
  margin-bottom: 1rem;
}
.visit__meta { color: var(--muted); max-width: 42ch; }
.visit__h3 {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sage);
  font-family: var(--body);
  margin-bottom: 1.1rem;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-top: 1.4rem;
  min-height: 44px;
  font-weight: 700;
  font-size: .95rem;
  color: var(--text);
  text-decoration: none;
  border-bottom: 2px solid var(--candle);
  padding-bottom: 2px;
  transition: color .25s var(--ease), gap .25s var(--ease);
}
.link-arrow::after { content: '\2192'; }
.link-arrow:hover { color: var(--candle); gap: .75rem; }

.contact { list-style: none; margin: 0; padding: 0; }
.contact li {
  display: grid;
  gap: .1rem;
  padding: .9rem 0;
  border-top: 1px solid rgba(138, 106, 75, .24);
}
.contact li:last-child { border-bottom: 1px solid rgba(138, 106, 75, .24); }
.contact span {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact a {
  font-size: 1.04rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 106, 75, .45);
  width: fit-content;
  max-width: 100%;
  /* info@glowwellnessspa.com has no break opportunity of its own and will push the
     column out of the viewport on a narrow tablet if it is not allowed to wrap. */
  overflow-wrap: anywhere;
  padding-block: .28rem;
  transition: border-color .25s var(--ease), color .25s var(--ease);
}
.contact a:hover { color: var(--candle); border-bottom-color: var(--candle); }
/* Only split the label off once the column is genuinely wide enough for the value beside
   it. Between 800px and 1040px the Visit section is already two columns, so this list is
   sitting in roughly a third of the page. */
@media (min-width: 1040px) {
  .contact li { grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 1rem; }
}

/* ---------- closing block ---------- */

.close {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(3.75rem, 9vw, 6rem);
}
.close__in { text-align: center; max-width: 48ch; margin-inline: auto; }
.close h2 { font-size: clamp(1.8rem, 1.25rem + 2.2vw, 2.75rem); margin-bottom: 1.1rem; }
.close p { color: rgba(244, 241, 236, .78); }

/* ---------- footer ---------- */

.foot { background: var(--ink-soft); color: rgba(244, 241, 236, .72); padding-block: 2.5rem; }
.foot__in { display: grid; gap: .45rem; }
.foot__mark {
  font-family: var(--display);
  font-weight: 700;
  color: var(--paper);
  font-size: 1rem;
  letter-spacing: -.01em;
}
.foot__addr { font-size: .92rem; }
.foot__addr a { color: var(--candle); text-decoration: none; border-bottom: 1px solid transparent; }
.foot__addr a:hover { border-bottom-color: var(--candle); }
.foot__note { font-size: .82rem; color: rgba(244, 241, 236, .48); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .btn--solid:hover { transform: none; }
}