/* ───────────────────────────────────────────────────────────────
   Hot Stone Massage Unlimited Co.

   The room, not the brochure. Warm dark brown-black carries most
   of the page — the dim, lamplit room the work actually happens
   in. Two light bands (rates, Becca) are the places you need to
   read plainly, so they switch to paper.

   Type: Newsreader carries every word on the page. Oswald appears
   only where the printed mark speaks — the wordmark, the nav, the
   three trade words, the numbers on the rate sheet.
   ─────────────────────────────────────────────────────────────── */

:root {
  --night:  #17150f;   /* the room */
  --ember:  #221d16;   /* lifted panel */
  --bone:   #ede5d7;   /* text on night */
  --dim:    #a49780;   /* secondary text on night */
  --linen:  #f2ece1;   /* paper band */
  --basalt: #3a3936;   /* brand charcoal, ink on paper */
  --slate:  #6b675e;   /* secondary ink on paper */
  --lamp:   #c8994f;   /* lamplight; used sparingly */
  --rule-d: rgba(237, 229, 215, 0.16);
  --rule-l: rgba(58, 57, 54, 0.18);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Oswald", "Helvetica Neue", Arial, sans-serif;

  --shell: 1140px;
  --pad:   clamp(1.25rem, 5vw, 4rem);
  --band-y: clamp(4.5rem, 10vw, 9rem);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--night);
  color: var(--bone);
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

h1, h2 { font-weight: 200; line-height: 1.06; margin: 0 0 0.5em; letter-spacing: -0.012em; }
p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

.shell { width: min(100% - (var(--pad) * 2), var(--shell)); margin-inline: auto; }

.skip {
  position: absolute; top: 0; left: -9999px; z-index: 99;
  background: var(--bone); color: var(--night); padding: 0.75rem 1.25rem;
}
.skip:focus { left: 0; }

:focus-visible { outline: 2px solid var(--lamp); outline-offset: 4px; }

/* ── Buttons and inline actions ──────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.7em 1.9em;
  border: 1px solid var(--bone);
  border-radius: 100px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  background: transparent;
  transition: background-color 0.3s, color 0.3s;
}
.btn:hover, .btn:focus-visible { background: var(--bone); color: var(--night); }

.btn.dark { border-color: var(--basalt); color: var(--basalt); }
.btn.dark:hover, .btn.dark:focus-visible { background: var(--basalt); color: var(--linen); }

.plain {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--dim);
  transition: color 0.3s;
}
.plain:hover { color: var(--bone); }

/* ── Masthead ────────────────────────────────────────────────── */
.masthead {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 3vw, 2.25rem) var(--pad) clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(to bottom, rgba(23, 21, 15, 0.92) 0%, rgba(23, 21, 15, 0.58) 55%, rgba(23, 21, 15, 0) 100%);
  pointer-events: none;
}
.masthead > * { pointer-events: auto; }

/* Her actual logotype, keyed to cream on transparency. */
.mark {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 0.95rem);
  text-decoration: none;
}
/* Her logotype, top left. Sized off width so the letterspacing stays readable. */
.mark-wordmark { width: clamp(168px, 20vw, 260px); height: auto; }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.1rem); }
.menu a {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.76rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  transition: color 0.3s;
}
.menu a:hover { color: var(--bone); }
.menu .menu-phone { color: var(--bone); }

.menu-btn {
  display: none;
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--rule-d);
  border-radius: 100px;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--bone);
  cursor: pointer;
}

@media (max-width: 900px) {
  .menu-btn { display: block; }
  .menu {
    position: absolute; top: 100%; right: var(--pad); left: var(--pad);
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 0.5rem 1.4rem 1.2rem;
    background: var(--ember);
    border: 1px solid var(--rule-d);
    display: none;
  }
  .menu.open { display: flex; }
  .menu a { width: 100%; padding: 0.85rem 0; border-bottom: 1px solid var(--rule-d); }
  .menu a:last-child { border-bottom: 0; }
}

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
  min-height: 100svh;
}

.hero-type {
  padding: clamp(8rem, 18vh, 11rem) clamp(2rem, 5vw, 4rem) clamp(5rem, 9vw, 6.5rem) var(--pad);
}

.hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 4.9rem);
  margin-bottom: 0.5em;
}
.hero h1 span { display: block; }
.hero h1 .l2 { padding-left: 0.09em; }
.hero h1 .l3 { padding-left: 0.18em; font-style: italic; color: var(--lamp); }

.hero-sub {
  max-width: 23em;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--dim);
  margin-bottom: 2.1em;
}

.hero-do { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem 2rem; }

.hero-photo { position: relative; align-self: stretch; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%; }
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to right, var(--night) 0%, rgba(23,21,15,0.25) 26%, rgba(23,21,15,0) 55%);
}

.creed {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
  margin: 0;
  padding: 1.15rem var(--pad);
  background: linear-gradient(to top, var(--night) 55%, rgba(23,21,15,0));
  font-family: var(--sans);
  font-weight: 300;
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dim);
}
.creed i { font-style: normal; color: var(--lamp); padding: 0 0.4em; }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 0; }
  .hero-photo { order: -1; height: 58svh; min-height: 300px; }
  .hero-photo::after {
    background: linear-gradient(to top, var(--night) 2%, rgba(23,21,15,0) 55%);
  }
  .hero-type { padding: 2.5rem var(--pad) 5rem; }
  .creed { text-align: center; }
}

/* ── Bands ───────────────────────────────────────────────────── */
.band { padding: var(--band-y) 0; }
.band.light { background: var(--linen); color: var(--basalt); }
/* A dark band that needs to separate from the dark band next to it. */
.band.raised { background: var(--ember); }

.band-title {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  margin-bottom: 1.1em;
}


/* Rates ------------------------------------------------------ */
.rates { width: 100%; border-collapse: collapse; }
.rates caption {
  max-width: 44em;
  margin-bottom: 3rem;
  text-align: left;
  color: var(--slate);
  font-size: 1.05rem;
  line-height: 1.7;
}
.rates thead th {
  padding: 0 0 0.9rem;
  border-bottom: 1px solid var(--basalt);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  text-align: right;
  width: 8.5rem;
}
.rates thead .ratename {
  text-align: left;
  width: auto;
  /* outranks `.rates .ratename` below, which would otherwise size this like a
     row heading rather than a column header */
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
}

.rates tbody th,
.rates tbody td { border-bottom: 1px solid var(--rule-l); padding: 1.7rem 0; vertical-align: baseline; }

.rates .ratename {
  text-align: left;
  padding-right: 3rem;
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.35rem, 2.2vw, 1.75rem);
  line-height: 1.2;
}
.rates .ratename span {
  display: block;
  max-width: 34em;
  margin-top: 0.55rem;
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--slate);
}
.rates tbody td {
  text-align: right;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
.rates tbody td.none { color: rgba(107, 103, 94, 0.5); }
.rates .dur { display: none; }

.aside {
  max-width: 40em;
  margin-top: 3rem;
  color: var(--slate);
  font-size: 1rem;
}

@media (max-width: 760px) {
  .rates thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .rates tbody tr { display: block; padding: 1.8rem 0; border-bottom: 1px solid var(--rule-l); }
  .rates tbody th,
  .rates tbody td { display: inline-block; border: 0; padding: 0; }
  .rates .ratename { display: block; padding-right: 0; margin-bottom: 1.1rem; }
  .rates tbody td { margin-right: 1.6rem; text-align: left; font-size: 1.1rem; }
  .rates tbody td.none { display: none; }
  .rates .dur {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 0.2rem;
  }
}

/* Sessions summary (home) ------------------------------------ */
.brief-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1rem, 5vw, 4.5rem);
  align-items: start;
}
.sessions-brief .band-title { margin-bottom: 0; }
.brief-body { max-width: 38em; }
.brief-body p { color: var(--slate); }
.brief-from {
  margin-top: 1.6em;
  font-size: 1.1rem;
  color: var(--basalt) !important;
}
.brief-from b {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 1.9rem;
  letter-spacing: 0.01em;
}
.brief-body p:last-child { margin-top: 2.2rem; }

@media (max-width: 760px) {
  .brief-grid { grid-template-columns: 1fr; }
  .sessions-brief .band-title { margin-bottom: 0.5em; }
}

/* Interior page head ----------------------------------------- */
.page-head + .band { padding-top: clamp(3rem, 6vw, 4.5rem); }
.page-head {
  background: var(--night);
  padding: clamp(8rem, 16vh, 11rem) 0 clamp(3.5rem, 7vw, 5.5rem);
}
.page-head h1 {
  font-family: var(--serif);
  font-size: clamp(2.2rem, 5.2vw, 3.6rem);
  text-transform: none;
  letter-spacing: -0.012em;
  margin-bottom: 0.45em;
}
.crumb {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
}
.crumb a { color: var(--dim); text-decoration: none; }
.crumb a:hover { color: var(--bone); }
.page-lede {
  max-width: 34em;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  color: var(--dim);
  margin: 0;
}
.menu a[aria-current="page"] { color: var(--bone); }

/* Photo + text pairs ----------------------------------------- */
.duo {
  display: grid;
  /* Equal halves, no gap: the photo columns then share one edge, so a duo and
     the flipped duo below it touch corner to corner. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  padding-block: 0;
}
.duo-photo { align-self: stretch; }
.duo-photo img {
  width: 100%; height: 100%;
  min-height: clamp(340px, 52vw, 680px);
  object-fit: cover;
}
.duo-text { padding: clamp(3.5rem, 8vw, 6rem) var(--pad); max-width: 34em; }
.duo.flip .duo-photo { order: 2; }
.duo.flip .duo-text { margin-left: auto; }

.duo h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.duo p { color: var(--dim); }
.duo .quiet {
  font-style: italic;
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--bone);
  margin-bottom: 1.1em;
}
.duo .tag { color: var(--bone); margin-bottom: 2em; }
.duo .tag b {
  font-family: var(--sans);
  font-weight: 200;
  font-size: 1.9rem;
  letter-spacing: 0.01em;
}
.duo .tag i { font-style: normal; color: var(--lamp); padding: 0 0.35em; }

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; gap: 0; }
  .duo.flip .duo-photo { order: 0; }
  .duo-photo img { min-height: 300px; max-height: 62svh; }
  .duo-text,
  .duo.flip .duo-text { padding: clamp(2.5rem, 8vw, 4rem) var(--pad); margin-left: 0; }
}

/* Reviews ---------------------------------------------------- */
.words {
  background: var(--ember);
  overflow: hidden;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

/* Two strips drift on their own. Each holds its quotes twice, end to end, and
   shifts by exactly half the track width so the wrap has no seam. Cards carry
   their own right margin rather than using flex `gap`, which would make that
   half-width figure inexact.

   The rows run at different speeds and the lower one starts part-way through
   its cycle (negative delay), so the two never settle into tidy columns. */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.marquee + .marquee { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

.track {
  display: flex;
  width: max-content;
  animation: drift linear infinite;
}
.track-a { animation-duration: 112s; }
.track-b { animation-duration: 136s; animation-delay: -47s; }

.words:hover .track,
.words:focus-within .track { animation-play-state: paused; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.tick {
  flex: 0 0 clamp(15rem, 23vw, 19rem);
  margin: 0 clamp(1.25rem, 2.6vw, 2.25rem) 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule-d);
}
.tick p {
  font-size: 1rem;
  line-height: 1.62;
  color: var(--bone);
  margin-bottom: 0.7em;
}
.tick cite {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lamp);
}

/* Anyone who has asked for less movement gets a strip they scroll themselves. */
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; width: auto; }
  .marquee { overflow-x: auto; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .tick[aria-hidden="true"] { display: none; }
}

/* Becca ------------------------------------------------------ */
.becca-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.becca-text { max-width: 36em; }
.becca-text p { color: var(--slate); }
.becca-text p:last-child { margin-top: 2.2rem; }
.becca-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

@media (max-width: 860px) {
  .becca-grid { grid-template-columns: 1fr; }
  .becca-photo { order: -1; }
  .becca-photo img { aspect-ratio: 4 / 3; }
}

/* Book ------------------------------------------------------- */
.book { text-align: center; padding-block: clamp(5rem, 11vw, 9rem); }
.book .seal {
  width: clamp(104px, 13vw, 150px);
  height: auto;
  margin: 0 auto 2.6rem;
}
.book h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.book p {
  width: min(100% - (var(--pad) * 2), 30em);
  margin-inline: auto;
  color: var(--dim);
}
.tel {
  display: inline-block;
  margin-top: 2.2rem;
  font-family: var(--sans);
  font-weight: 200;
  font-size: clamp(2rem, 6vw, 3.6rem);
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--bone);
  transition: color 0.3s;
}
.tel:hover { color: var(--lamp); }
.hours {
  margin-top: 1.8rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dim);
}

/* Footer ----------------------------------------------------- */
.foot {
  padding: 2.6rem var(--pad) 3rem;
  border-top: 1px solid var(--rule-d);
  text-align: center;
  font-size: 0.92rem;
  color: var(--dim);
}
.foot p { margin: 0 0 0.45em; }
.foot-mark {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 0.8rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bone);
  margin-bottom: 0.8em;
}
.foot a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.foot-legal { margin-top: 1.4em; font-size: 0.8rem; opacity: 0.65; }

/* ── The one orchestrated moment: the hero settles in ────────── */
@media (prefers-reduced-motion: no-preference) {
  .hero h1 span,
  .hero-sub,
  .hero-do { animation: settle 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) backwards; }
  .hero h1 .l1 { animation-delay: 0.05s; }
  .hero h1 .l2 { animation-delay: 0.17s; }
  .hero h1 .l3 { animation-delay: 0.29s; }
  .hero-sub    { animation-delay: 0.46s; }
  .hero-do     { animation-delay: 0.60s; }
  .hero-photo  { animation: fadein 1.6s ease backwards 0.1s; }
  .creed       { animation: fadein 1.2s ease backwards 0.85s; }

  @keyframes settle {
    from { opacity: 0; transform: translateY(0.4em); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
}