/* The story look: the site, and every page a client sees (account, sign in,
   health form, guest pass, claim, paid, unsubscribe, privacy), in the style of the studio's Instagram stories
   (November 2026). Heavy capitals, square edges, the room photograph behind
   the words, white tags for the places left and a red one for full.

   All of it is in this one file, loaded last on the home page. To undo it,
   take out the <link> to this file in home.html: nothing else changed.

   Inter at every weight (the site's own Inter stops at 600), self-hosted,
   SIL Open Font License 1.1. */

@font-face {
  font-family: "Inter Story";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-full-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Story";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/fonts/inter-full-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --story: "Inter Story", Inter, "Helvetica Neue", Arial, sans-serif;
  --story-red: #E0322B;
}
/* The photograph runs the full width; nothing may scroll sideways. */
html, body { overflow-x: clip; }

/* ---------- the words ---------- */
h1, h2, h3, h4 {
  font-family: var(--story); font-weight: 800; text-transform: uppercase;
  letter-spacing: -0.035em; line-height: 0.92;
}
h1 { font-size: clamp(48px, 7.4vw, 96px); }
h2 { font-size: clamp(34px, 4.8vw, 62px); }
h3 { font-size: 22px; letter-spacing: -0.02em; line-height: 1.05; }
h4 { font-size: 15px; letter-spacing: 0.02em; }
.eyebrow { font-family: var(--story); font-weight: 500; letter-spacing: 0.32em; }

/* The wordmark as the stories set it: spaced capitals, a line underneath. */
.logo { font-family: var(--story); font-size: 18px; letter-spacing: 0.4em; text-transform: uppercase; line-height: 1; }
.logo b { font-weight: 400; }
.logo::after {
  content: "Reformer \00B7  Beauty"; display: block; margin-top: 7px;
  font-size: 8px; font-weight: 500; letter-spacing: 0.46em; opacity: 0.78; white-space: nowrap;
}
/* The menu in the same small spaced capitals. */
.bar nav a, .bar .signin, .navbtn, #mobnav a {
  font-family: var(--story); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}

/* ---------- square, tracked buttons ---------- */
.btn {
  border-radius: 0; text-transform: uppercase; letter-spacing: 0.22em;
  font-family: var(--story); font-weight: 700; font-size: 11.5px; padding: 14px 22px;
}
.bar .btn { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.bar .btn:hover { background: var(--ink); color: var(--ivory); opacity: 1; }
.photo, .day, .slot, .course, .calnote, .course .cask,
input, select, textarea { border-radius: 0; }
.course .cask, .room .more, .calrow a.bk {
  text-transform: uppercase; letter-spacing: 0.2em; font-family: var(--story); font-weight: 700; font-size: 11px;
}

/* ---------- the top: the room behind the words ---------- */
.hero {
  position: relative; display: block; width: 100vw; margin: 0 calc(50% - 50vw);
  min-height: min(92vh, 900px); padding: 0; overflow: hidden;
}
.hero > div:first-child {
  position: relative; z-index: 2; max-width: var(--page); margin: 0 auto;
  padding: clamp(80px, 14vh, 150px) 28px 120px; color: #F4F1EC;
}
.hero > div:first-child::before {
  content: "Reformer Pilates \00B7  Lashes \00B7  Brows"; display: block; margin-bottom: 26px;
  font: 500 12px/1 var(--story); letter-spacing: 0.32em; text-transform: uppercase; color: rgba(244, 241, 236, 0.86);
}
.hero h1 { color: #F4F1EC; }
.hero h1::after {
  content: ""; display: block; width: min(100%, 600px); height: 1px; margin-top: 34px;
  background: rgba(244, 241, 236, 0.85);
}
.hero .lede { color: rgba(244, 241, 236, 0.82); margin-top: 26px !important; }
.hero-links { gap: 14px; flex-wrap: wrap; }
.hero-links a {
  color: #F4F1EC; border: 1.5px solid #F4F1EC; padding: 15px 26px;
  font: 700 12px/1 var(--story); letter-spacing: 0.24em; text-transform: uppercase;
}
.hero-links a:hover { background: #F4F1EC; color: #141311; }
.hero > div:first-child::after {
  content: "Sculpt \00B7  Strengthen \00B7  Glow"; display: block; margin-top: 40px;
  font: 500 11.5px/1 var(--story); letter-spacing: 0.34em; text-transform: uppercase; color: rgba(244, 241, 236, 0.75);
}
.hero > div:last-child { position: absolute; inset: 0; z-index: 1; }
.hero #hero-shot { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; border: 0; }
.hero #hero-shot img { filter: brightness(0.4) grayscale(0.2); }
.hero #hero-shot::after { background: linear-gradient(180deg, rgba(10,10,9,0.35) 0%, rgba(10,10,9,0.1) 40%, rgba(10,10,9,0.6) 100%); }
.hero .plate, .hero .caption { display: none; }
.hero .heroswap { position: absolute; z-index: 3; right: 28px; bottom: 26px; margin: 0; }

/* ---------- the timetable, like the "last spots left" story ---------- */
.calrow { padding: 14px 0; align-items: center; border-top-color: var(--line); }
.calrow .t { font-family: var(--story); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; min-width: 70px; }
.calrow .nm { font-family: var(--story); font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; }
.calrow .fr {
  background: var(--ink); color: var(--ivory); padding: 7px 11px;
  font: 700 11px/1 var(--story); letter-spacing: 0.18em; text-transform: uppercase;
}
.calrow .fr.full { background: var(--story-red); color: #fff; }
.calrow .mo { border-radius: 0; }
.day.full { border-style: solid; }
.day.full .ds { color: var(--story-red); }
.day .ds { font-family: var(--story); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 760px) {
  .hero { min-height: 86vh; }
  .hero > div:first-child { padding: 64px 20px 110px; }
  .hero > div:first-child::before { font-size: 10.5px; letter-spacing: 0.26em; }
  .hero .heroswap { right: 20px; bottom: 20px; }
  .logo { font-size: 16px; letter-spacing: 0.34em; }
  .logo::after { font-size: 7px; letter-spacing: 0.34em; }
  #mobnav a { font-size: 13px; }
  .calrow .t { font-size: 20px; min-width: 62px; }
}

/* ---------- every box: square, in the story's type and colours ---------- */
/* The serif goes everywhere it was used (names, prices, the month), so no
   box is left in the old type. */
:root { --serif: var(--story); }
/* The tan accent becomes the stories' white (dark) or ink (light): the step
   bar, a day with few places, a highlighted line. Red stays for full. */
:root, :root[data-theme="dark"], :root[data-theme="light"] {
  --sand: var(--ink);
  --sand-ink: var(--ink);
}
/* Square corners on everything on the page and in its panels; the header's
   round icons, the room dots and the tick boxes keep their shape. */
body *:not(header):not(header *):not(footer *):not(.pips):not(.pips *):not(input[type="radio"]):not(input[type="checkbox"]) { border-radius: 0 !important; }
/* The names on the choice boxes, like the class names on the story. */
.choice { padding: 22px 22px; }
.choice .t { font-weight: 800; font-size: 19px; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.1; }
.choice .r { font-family: var(--story); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.choice[aria-pressed="true"], .choice:hover { border-color: var(--ink); }
.daynav .mon { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 17px; }
.day .dd { font-family: var(--story); font-weight: 800; }
.day.few { border-color: var(--ink); }
.day.few .ds { color: var(--ink); }
/* Prices and totals heavy, like the times on the story. */
.pdprice, .evbuy .price, .sumline b { font-weight: 800; letter-spacing: -0.02em; }

/* The two rooms under the top said what its two buttons already say, so in
   this look the top leads straight on to "Book here". Delete this rule to
   bring the section back. */
.route[data-route="home"] .rooms { display: none; }

/* The wordmark on the pages that set it on its own (sign in, guest pass,
   claim, paid, unsubscribe): the same spaced capitals as the header. */
.mark { font-family: var(--story); font-weight: 400; text-transform: uppercase; letter-spacing: 0.4em; font-size: 22px; }
.mark b { font: inherit; letter-spacing: inherit; }

/* The sign-in page's heading: small, since the button says it too. It stays
   because it changes with what the page is doing (Sign in, Make an account,
   Set your password). */
h1#head { font-size: 26px; letter-spacing: 0.02em; line-height: 1.1; }

/* The privacy and policies pages' sections: headings sized for reading, not for a poster. */
#privacyBody h2, #privacyBody h3, #termsBody h2, #termsBody h3 { font-size: 22px; letter-spacing: 0; line-height: 1.15; }

/* The top photograph when it shows the beauty room (a face): darkened far
   less than the room, enough for the words over it to read. */
.hero #hero-shot.face img { filter: brightness(0.62) contrast(1.04) saturate(0.95); }

/* A real photograph needs no caption: those were notes on what to shoot.
   "Photograph to come" still shows where there is no picture yet. */
.photo:has(img) .plate { display: none; }

/* Phones: everything to tap is at least 44px tall. */
@media (max-width: 880px) {
  .foot .col { gap: 0; }
  .foot .col a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .foot .col .h { margin-bottom: 6px; }
  .themeswitch button { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .pips button { min-height: 44px; padding-left: 16px; padding-right: 16px; }
  .buyit, .quickadd { min-height: 44px; }
  /* Bigger to tap, same room in the row: the header has none to spare. */
  .bar .meicon { min-height: 44px; min-width: 44px; justify-content: center; margin-left: -6px; margin-right: -6px; }
  .bar .barbask { min-height: 44px; min-width: 44px; justify-content: center; margin-left: -10px; margin-right: -9px; }
  .bar .logo { padding-top: 7px; padding-bottom: 7px; margin-top: -7px; margin-bottom: -7px; }
  button.back { min-width: 44px; }
}