/* TerraLuxe Spa — the whole design system.
   Translated from the brand kit's tokens.css. Mark: waterline lotus.
   Type: Jost (display) + Spectral (text). Self-hosted; see /fonts.

   White on lavender is the combination this brand is built on, and it stays.
   The constraint that comes with it, already stated in tokens.css: paper on
   #8B77A8 measures 3.50:1, which passes AA for text 24px and larger and fails
   it below that. So lavender fields carry display type only — the hero line and
   the closer are set at a 24px floor — and small print sits on chalk in
   lav-deep (5.93:1). The original draft broke this rule with a 17px hero line
   and a 13px hours line at 3.03:1. */

/* ---------- fonts ---------- */
/* Jost ships as a variable font, so one file covers 300–500. */
@font-face{
  font-family:"Jost";font-style:normal;font-weight:300 500;font-display:swap;
  src:url(/fonts/jost-latin-var.woff2) format("woff2");
}
@font-face{
  font-family:"Spectral";font-style:normal;font-weight:300;font-display:swap;
  src:url(/fonts/spectral-300.woff2) format("woff2");
}
@font-face{
  font-family:"Spectral";font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/spectral-400.woff2) format("woff2");
}
@font-face{
  font-family:"Spectral";font-style:italic;font-weight:300;font-display:swap;
  src:url(/fonts/spectral-300-italic.woff2) format("woff2");
}

:root{
  --chalk:#E4E3DC; --paper:#F2F1EC; --lavender:#8B77A8;
  --brass:#A9853F; --lav-deep:#5E4B78; --ink:#2E2839;
  --rule:1px solid rgba(46,40,57,.14);
  --display:"Jost","Helvetica Neue",Arial,sans-serif;
  --text:"Spectral",Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--chalk);color:var(--ink);
  font-family:var(--text);font-weight:300;font-size:17px;line-height:1.75;
  -webkit-text-size-adjust:100%;
}
.wrap{max-width:1060px;margin:0 auto;padding:0 26px}

/* Visible only when tabbed to — the first stop for a keyboard or screen-reader
   user, who otherwise walks the whole nav on every page. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:var(--paper);font-family:var(--display);
  font-size:14px;letter-spacing:.1em;padding:12px 20px;text-decoration:none;
}
.skip:focus{left:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

/* ---------- bar ---------- */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:40;
  background:var(--chalk);border-bottom:1px solid var(--brass);
}
/* Home only: the bar slides in once the hero has scrolled past. Interior pages
   carry .bar--static and are visible from the start, having no hero. */
.bar--reveal{transform:translateY(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1)}
.bar--reveal.visible{transform:translateY(0)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:66px;gap:20px}
.bar .brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.bar .brand svg{width:26px;height:26px;flex:none}
.bar .brand span{font-family:var(--display);font-weight:300;font-size:15px;letter-spacing:.28em;text-indent:.28em}
.bar nav{display:flex;align-items:center;gap:26px}
.bar nav a{
  font-family:var(--display);font-size:14px;letter-spacing:.1em;
  color:var(--lav-deep);text-decoration:none;padding:6px 0;
  border-bottom:1px solid transparent;
}
.bar nav a:hover,.bar nav a:focus-visible{border-bottom-color:var(--brass)}
.bar nav a[aria-current="page"]{border-bottom-color:var(--brass)}
/* .bar nav a is more specific than .btn, so without this the Book button in the
   bar draws lav-deep text on the ink field — about 1.4:1, effectively invisible. */
.bar nav a.btn{color:var(--paper);border-bottom:1px solid var(--ink)}
.bar nav a.btn:hover,.bar nav a.btn:focus-visible{color:var(--paper);border-bottom-color:var(--lav-deep)}
/* Interior pages start below the fixed bar. */
.offset{padding-top:66px}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--display);font-size:14px;letter-spacing:.12em;
  background:var(--ink);color:var(--paper);text-decoration:none;
  padding:12px 22px;display:inline-block;border:1px solid var(--ink);
}
.btn:hover,.btn:focus-visible{background:var(--lav-deep);border-color:var(--lav-deep)}
.btn--reversed{background:var(--paper);color:var(--ink);border-color:var(--paper);padding:15px 30px;font-size:15px}
.btn--reversed:hover,.btn--reversed:focus-visible{background:var(--chalk);color:var(--ink);border-color:var(--chalk)}

/* ---------- hero (home) ---------- */
.hero{
  background:var(--lavender);color:var(--paper);
  min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;
  padding:80px 26px 60px;
}
.hero .lockup{display:flex;flex-direction:column;align-items:center}
.hero .lockup svg{width:clamp(74px,7vw,94px);height:auto;margin-bottom:52px}
.hero .wordmark{
  font-family:var(--display);font-weight:300;
  font-size:clamp(30px,7.4vw,52px);
  letter-spacing:.32em;text-indent:.32em;line-height:1;margin:0;
}
/* Paper on lavender measures 3.50:1. That clears AA for LARGE text (>=24px)
   and fails it for anything smaller, which is exactly what tokens.css means by
   "24px+ only". So the hero keeps the white-on-lavender the brand is built on,
   and every line inside it is set at 24px or above. Small type (the strip, the
   hours) sits on chalk instead, where lav-deep gives 5.93:1. Do not shrink
   anything in here below 24px. */
.hero .line{
  font-family:var(--text);font-style:italic;font-weight:300;
  font-size:clamp(24px,3.2vw,30px);line-height:1.5;
  margin:60px auto 38px;max-width:24ch;color:var(--paper);
}

/* Small print that would fail on lavender lives here, under the hero. */
.strip{
  background:var(--chalk);border-bottom:var(--rule);text-align:center;
  padding:22px 26px;font-family:var(--display);font-size:13px;
  letter-spacing:.16em;color:var(--lav-deep);margin:0;
}

/* ---------- interior page header ---------- */
.masthead{padding:76px 0 0}
.masthead .eyebrow{
  font-family:var(--display);font-size:11px;letter-spacing:.42em;
  color:var(--lav-deep);margin:0 0 14px;text-transform:uppercase;
}
.masthead h1{
  font-family:var(--text);font-weight:400;font-size:clamp(28px,5vw,42px);
  line-height:1.2;margin:0 0 18px;
}
.masthead p{max-width:56ch;color:var(--lav-deep);font-size:19px;margin:0}

/* ---------- sections ---------- */
section{padding:80px 0;border-top:var(--rule)}
section:first-of-type{border-top:none}
h2{font-family:var(--text);font-weight:400;font-size:clamp(25px,4vw,34px);line-height:1.25;margin:0 0 18px}
h3{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:.06em;margin:0}
.lede p{max-width:56ch;color:var(--lav-deep);font-size:19px;margin:0 0 18px}
.prose p{max-width:60ch;color:var(--lav-deep);margin:0 0 18px}
.prose a{color:var(--lav-deep)}

/* ---------- service rows ---------- */
.rows{margin-top:34px}
.row{
  display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;
  padding:26px 0;border-top:var(--rule);
}
.row:first-child{border-top:none}
.row p{margin:8px 0 0;max-width:48ch;color:var(--lav-deep);font-size:16px;line-height:1.65}
.row .price{font-family:var(--text);font-size:26px;text-align:right;white-space:nowrap;line-height:1.2}
.row .dur{display:block;font-family:var(--display);font-size:11.5px;letter-spacing:.16em;color:var(--lav-deep);margin-top:6px}
.row .alt{display:block;font-size:20px;margin-top:12px;color:var(--lav-deep)}
/* The one brass accent the brand allows per page. Therapeutic is the
   most-booked service, so it is the row that gets it. */
/* .row:first-child{border-top:none} is 0,2,0 and outranks a bare .row--featured,
   so the featured row lost its top rule and the brass read as an ordinary
   divider under it rather than a bracket around it. */
.row.row--featured{border-top:1px solid var(--brass);border-bottom:1px solid var(--brass)}
.row--featured + .row{border-top:none}
.tag{
  display:block;font-family:var(--display);font-size:11px;letter-spacing:.28em;
  color:var(--lav-deep);margin:0 0 8px;text-transform:uppercase;
}

/* ---------- lists ---------- */
.plain{list-style:none;padding:0;margin:0}
.plain li{padding:16px 0;border-top:var(--rule);color:var(--lav-deep)}
.plain li:first-child{border-top:none}
.plain strong{
  display:block;font-family:var(--display);font-weight:400;font-size:15px;
  letter-spacing:.06em;color:var(--ink);margin-bottom:4px;
}

/* ---------- about ---------- */
.bio{display:grid;grid-template-columns:340px 1fr;gap:48px;align-items:start}
.bio img{width:100%;height:auto;display:block}
.bio .prose p:first-child{margin-top:0}
.credential{
  font-family:var(--display);font-size:13px;letter-spacing:.14em;
  color:var(--lav-deep);border-top:1px solid var(--brass);
  padding-top:16px;margin-top:28px;
}

/* ---------- closer ---------- */
.closer{background:var(--lavender);color:var(--paper);text-align:center;padding:104px 26px;border:none}
.closer p{font-family:var(--text);font-style:italic;font-size:clamp(24px,3.4vw,30px);max-width:20ch;margin:0 auto 38px;line-height:1.5}

/* ---------- footer ---------- */
footer{background:var(--ink);color:rgba(242,241,236,.78);padding:56px 0 46px;font-family:var(--display);font-size:14px;letter-spacing:.04em}
footer .wrap{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-end}
footer a{color:inherit}
footer nav{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:10px}
.fmark{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fmark svg{width:24px;height:24px}
.fmark span{font-weight:300;letter-spacing:.26em;text-indent:.26em;font-size:14px;color:var(--paper)}

@media (max-width:820px){
  .bio{grid-template-columns:1fr;gap:32px}
  .bio img{max-width:340px}
}
@media (max-width:640px){
  section{padding:60px 0}
  .hero .lockup svg{margin-bottom:38px}
  .masthead{padding-top:52px}
  /* The bar cannot hold the lotus AND the wordmark AND the nav at phone widths.
     The lotus at 26px is the least legible of the three and the wordmark is the
     half that identifies the business, so on small screens the mark drops and
     TERRALUXE stays. Button label shortens to "Book" for the same reason. */
  .bar .brand svg{display:none}
  .bar .brand span{font-size:14px;letter-spacing:.24em;text-indent:.24em}
  /* Measured: wordmark + three links + button needs 373px and a 320px screen
     offers 268px, so flexbox crushed the lot. The links drop; every page
     carries the same nav in the footer, and the in-page links cover the rest. */
  .bar nav a:not(.btn){display:none}
  .bar nav{gap:15px}
  .bar nav a{font-size:13px}
  .bar nav a.btn .long{display:none}
  .bar nav a.btn{padding:11px 15px}
  .row{grid-template-columns:1fr;gap:4px}
  .row .price{text-align:left;margin-top:10px}
  .hero .line{margin-top:48px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .bar--reveal{transition:none}
}

/* Home lists the sessions without rates (rates live only on /services), which
   left the row grid's second column empty and the copy wrapping at ~380px in a
   1008px row. The duration fills it, and is dropped from the body copy so the
   same fact is not written twice. */
.row .duration{
  font-family:var(--display);font-size:11.5px;letter-spacing:.16em;
  color:var(--lav-deep);text-align:right;white-space:nowrap;
}
@media (max-width:640px){ .row .duration{text-align:left;margin-top:8px} }

/* A masthead already carries 76px of top padding, so a section straight after
   it was opening on ~180px of empty chalk. */
.masthead + section{padding-top:44px}

/* Contextual link colours (.prose a, .bar nav a) are more specific than .btn,
   so a button sitting inside them drew the container's link colour on the
   button's own dark field — dark-on-dark, about 1.4:1. Restore the button's
   colours anywhere that can happen. */
.prose a.btn,footer a.btn{color:var(--paper)}
.prose a.btn--reversed,footer a.btn--reversed{color:var(--ink)}

/* Links inside a .plain list had no colour rule at all and fell back to the
   browser's default blue, which is the one colour not in the palette. */
.plain a{color:var(--lav-deep)}
.plain li{max-width:68ch}

/* Share block: the QR beside its explanation. */
.share{display:grid;grid-template-columns:240px 1fr;gap:44px;align-items:center}
.share img{width:100%;height:auto;display:block;border:1px solid rgba(46,40,57,.14)}
@media (max-width:640px){
  .share{grid-template-columns:1fr;gap:28px;justify-items:start}
  .share img{max-width:240px}
}