/* ============================================================
   Chloe-Grace Studio | style.css
   8 Pacific St, Newcastle NSW

   One accent colour and three neutral grounds.

   The accent is the studio's own dusty rose, #D6AFAF, the flat
   ground its logo tile sits on. Everything around it is neutral:
   an off white carrying the barest warmth, so the rose does not
   read cold beside it, and a near black for the dark bands. No
   browns and no beiges anywhere.
   ============================================================ */


/* ------------------------------------------------------------
   THEME

   Light is the page default. Two other tones drop onto any single
   section, so a page alternates rather than running one ground the
   whole way down. See PER SECTION TONES below.
   ------------------------------------------------------------ */

:root{
  --bg:          #F7F6F3;   /* page ground, an off white */
  --bg-alt:      #EEEDE9;   /* alternating band, a shade down */
  --panel:       #FFFFFF;   /* cards and note panels */
  --deep:        #17171A;   /* the darkest ground, footer */
  --text:        #1A1A1C;   /* headings and body, a near black */
  --text-soft:   #67676B;   /* secondary copy */
  --line:        #E3E1DC;   /* rules and edges */
  --brand:       #1A1A1C;   /* buttons and links */
  --brand-hover: #4A4A4E;
  --brand-text:  #FFFFFF;   /* type on a filled button */
  --label:       #6E6E72;   /* the small tracked capitals */
  --accent:      #D6AFAF;   /* the logo rose, untouched */
  --hairline:    rgba(26,26,28,.12);  /* structural rules, no accent colour */

  /* The masthead runs on the brand rose rather than on the page ground, so
     the studio's colour is the first thing on every page. Type on it is the
     near black, at 8.7:1. These two are also what the sticky booking bar
     and the menu's jump bar use, so all three bars match. */
  --bar:         #D6AFAF;
  --bar-solid:   #D6AFAF;
  --bar-text:    #1A1A1C;
  --bar-line:    rgba(26,26,28,.22);

  /* --- Type ---
     One family. Jost is the closest widely available match to the
     letterspaced STUDIO under the wordmark: geometric, light, circular
     bowls, flat terminals. Headings are set the way the lockup sets
     that word, in tracked capitals at a light weight. */
  --display: "Jost", "Century Gothic", Futura, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --sans:    "Jost", "Century Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* --- Measure --- */
  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 60px);

  /* --- Rhythm --- */
  --band: clamp(68px, 10vw, 148px);
}


/* ------------------------------------------------------------
   PER SECTION TONES

   Add .tone-rose or .tone-dark to any <section> and everything
   inside it follows: text, links, buttons, rules, panels. Light is
   the default, so a section only needs a class where it changes.

   Each tone restates the whole token block. A token left out would
   keep inheriting the light value and quietly break the contrast.
   ------------------------------------------------------------ */

.tone-light,
.tone-blush,
.tone-rose,
.tone-dark{
  background:var(--bg);
  color:var(--text);
}

.tone-light{
  --bg:#F7F6F3; --bg-alt:#EEEDE9; --panel:#FFFFFF; --deep:#17171A;
  --text:#1A1A1C; --text-soft:#67676B; --line:#E3E1DC;
  --brand:#1A1A1C; --brand-hover:#4A4A4E; --brand-text:#FFFFFF;
  --label:#6E6E72; --accent:#D6AFAF; --hairline:rgba(26,26,28,.12);
}

/* The rose at about half strength, mixed toward white. It reads as the same
   colour without the weight of the full tile, which is what a long passage of
   copy wants, and it steps down from the rose masthead rather than jumping
   to a neutral. Near black on it is 13.2:1. */
.tone-blush{
  --bg:#EDDBDB; --bg-alt:#E5CFCF; --panel:#FFFFFF; --deep:#17171A;
  --text:#1A1A1C; --text-soft:#6B5457; --line:#E0CBCB;
  --brand:#1A1A1C; --brand-hover:#6B5457; --brand-text:#FDFBFA;
  --label:#6B5457; --accent:#D6AFAF; --hairline:rgba(26,26,28,.16);
}

/* The logo's own ground. Type on it is the near black, at 8.7:1.
   White on this rose is about 1.8:1, so white is reserved for the
   wordmark image itself, which is a logotype. */
.tone-rose{
  --bg:#D6AFAF; --bg-alt:#CBA1A1; --panel:#DEBCBC; --deep:#17171A;
  --text:#1A1A1C; --text-soft:#46383A; --line:#C29797;
  --brand:#1A1A1C; --brand-hover:#46383A; --brand-text:#FDFBFA;
  --label:#46383A; --accent:#FFFFFF; --hairline:rgba(26,26,28,.2);
}

.tone-dark{
  --bg:#17171A; --bg-alt:#202024; --panel:#202024; --deep:#0F0F11;
  --text:#F2F1EF; --text-soft:#A5A5A9; --line:#33333A;
  --brand:#D6AFAF; --brand-hover:#E6C9C9; --brand-text:#17171A;
  --label:#C0A5A5; --accent:#D6AFAF; --hairline:rgba(242,241,239,.15);
}

/* A toned section can still take the band modifiers. */
.on-warm{background:var(--bg-alt)}
.on-panel{background:var(--panel)}
.on-deepest{background:var(--deep)}


/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */

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

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* Anchor targets have to clear both sticky bars. site.js measures the
     masthead and the menu's jump bar and writes the two custom properties;
     the fallbacks here are what they measure at on a wide desktop. */
  scroll-padding-top:calc(var(--head-h, 80px) + var(--jump-h, 0px) + 22px);
  background:var(--bg);
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(15.5px,1vw,16.5px);
  font-weight:300;
  line-height:1.78;
  letter-spacing:.014em;
  -webkit-font-smoothing:antialiased;
}

img,video,iframe{max-width:100%;display:block;height:auto;border:0}
a{color:inherit;text-decoration:none}

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

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--deep);color:#F7F6F3;
  padding:12px 20px;
}
.skip:focus{left:12px;top:12px}


/* ------------------------------------------------------------
   TYPE

   Headings copy the wordmark's own treatment of the word STUDIO:
   light weight, capitals, wide tracking. Tracked capitals stop
   being readable at small sizes, so h3 and h4 drop back to
   sentence case at a normal weight.

   There is now one heading per section. The small label that used
   to sit above each of these is gone, so the heading below carries
   a hairline instead where the section needs a top edge.
   ------------------------------------------------------------ */

h1,h2{
  font-family:var(--display);
  font-weight:500;
  line-height:1.32;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0;
  color:var(--text);
}
h1{font-size:clamp(23px,3.2vw,40px)}
h2{font-size:clamp(16px,1.75vw,22px)}

h3,h4{
  font-family:var(--sans);
  font-weight:400;
  line-height:1.35;
  letter-spacing:.01em;
  margin:0;
  color:var(--text);
}
h3{font-size:clamp(17px,1.4vw,20px)}
h4{font-size:15px}

p{margin:0}
.lede{
  font-size:clamp(17px,1.35vw,20px);
  font-weight:300;
  line-height:1.7;
  color:var(--text);
}
.soft{color:var(--text-soft)}

.stack-s{margin-top:14px}
.stack-m{margin-top:22px}
.stack-l{margin-top:38px}

.center{text-align:center}


/* ------------------------------------------------------------
   LAYOUT
   ------------------------------------------------------------ */

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gut);
}
/* These carry margin-inline themselves rather than leaning on .wrap for it.
   A modifier that caps the width but needs a second class to centre is a trap:
   used on its own it silently pins its contents to the left. */
.wrap--mid{max-width:840px;margin-inline:auto}
.wrap--tight{max-width:640px;margin-inline:auto}
/* Wider than the site's normal measure. Only the gallery uses it, where the
   pictures are the whole point of the page. */
.wrap--wide{max-width:1440px;margin-inline:auto}

.band{padding-block:var(--band)}
.band--short{padding-block:clamp(44px,6vw,84px)}

/* Edge to edge, out of the wrap. */
.bleed{width:100%}


/* ------------------------------------------------------------
   REVEAL
   ------------------------------------------------------------ */

.js .rise{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.22,.61,.36,1);
}
.js .rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  .js .rise{opacity:1;transform:none;transition:none}
}


/* ------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------ */

.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:11px;
  font-weight:400;
  letter-spacing:.24em;
  text-transform:uppercase;
  padding:15px 32px;
  border:1px solid var(--brand);
  background:var(--brand);
  color:var(--brand-text);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
  cursor:pointer;
}
.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}

.btn--line{
  background:transparent;
  color:var(--brand);
}
.btn--line:hover{background:var(--brand);color:var(--brand-text)}

.btn--sm{padding:11px 22px;letter-spacing:.2em}

/* On a photograph, where the tone tokens do not apply. */
.btn--light{
  background:#FFFFFF;border-color:#FFFFFF;color:#1A1A1C;
}
.btn--light:hover{background:#D6AFAF;border-color:#D6AFAF;color:#1A1A1C}
.btn--ghost{
  background:transparent;border-color:rgba(255,255,255,.7);color:#FFFFFF;
}
.btn--ghost:hover{background:#FFFFFF;border-color:#FFFFFF;color:#1A1A1C}

.btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
.btns--center{justify-content:center}

/* An underlined text link that keeps its own rule. */
.tlink{
  display:inline-block;
  font-family:var(--sans);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand);
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
  transition:color .3s ease, border-color .3s ease;
}
.tlink:hover{color:var(--brand-hover);border-bottom-color:var(--accent)}


/* ------------------------------------------------------------
   MASTHEAD

   The wordmark sits centred with the navigation split either side,
   which is the arrangement the studio's own logo tile asks for: it
   is a wide horizontal lockup and it reads badly squeezed into a
   corner. Below 940px the whole thing collapses to a wordmark and
   a Menu button.
   ------------------------------------------------------------ */

.masthead{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--bar);
  color:var(--bar-text);
  border-bottom:1px solid transparent;
  transition:background .3s ease, border-color .3s ease;
}
.masthead.is-stuck{
  background:var(--bar-solid);
  border-bottom-color:var(--bar-line);
}
/* The rose is the same on every page, so the bar does not inherit the tone
   of whatever section happens to be under it. */
.masthead .nav a{color:var(--bar-text)}
/* An outline, so the button carries the bar's own rose inside a dark rule
   rather than a second, lighter pink. It fills only on hover. */
.masthead .nav .btn--line{
  background:transparent;
  border-color:var(--bar-text);
  color:var(--bar-text);
}
.masthead .nav .btn--line:hover{background:var(--bar-text);border-color:var(--bar-text);color:#FDFBFA}
.masthead .nav-toggle{color:var(--bar-text);border-color:var(--bar-line)}

/* Over the hero photograph the bar lifts out of the flow and goes
   transparent, so the image runs to the top of the window and the type on
   the bar flips to white. Once the page scrolls, .is-stuck brings the
   ground and the dark type back. */
.masthead--over{
  position:fixed;
  left:0;right:0;top:0;
  background:transparent;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.masthead--over:not(.is-stuck) .nav a{color:#FFFFFF}
/* Over the hero the same outline goes white, so it reads against the
   photograph until the bar takes its colour. */
.masthead--over:not(.is-stuck) .nav .btn--line{
  background:transparent;
  border-color:rgba(255,255,255,.7);
  color:#FFFFFF;
}
.masthead--over:not(.is-stuck) .nav .btn--line:hover{background:#FFFFFF;color:#1A1A1C}
.masthead--over:not(.is-stuck) .nav-toggle{color:#FFFFFF;border-color:rgba(255,255,255,.5)}
.masthead--over:not(.is-stuck) .brand__ink{opacity:0}
.masthead--over:not(.is-stuck) .brand__cream{opacity:1}

/* Three columns: the tabs on the left, the wordmark centred, the one button
   on the right. The outer two are equal fractions so the wordmark sits on the
   true centre of the bar rather than being pushed off it by whichever side
   happens to be wider. */
.masthead__inner{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:clamp(16px,3vw,42px);
  padding-block:18px;
}

.brand{
  position:relative;
  display:block;
  justify-self:center;
  width:clamp(148px,15vw,196px);
}
.brand img{
  width:100%;
  transition:opacity .3s ease;
}
.brand__cream{position:absolute;inset:0;opacity:0}

.nav{
  display:flex;
  align-items:center;
  gap:clamp(13px,1.7vw,26px);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
}
.nav--tabs{justify-content:flex-start}
.nav--action{justify-content:flex-end}
.nav a{
  position:relative;
  padding-block:4px;
  transition:color .3s ease;
}
.nav a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.nav a:not(.btn):hover::after,
.nav a[aria-current="page"]::after{transform:scaleX(1)}

.nav-toggle{
  display:none;
  justify-self:end;
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  background:transparent;
  border:1px solid currentColor;
  padding:9px 16px;
  cursor:pointer;
}


/* ------------------------------------------------------------
   MOBILE NAV PANEL
   ------------------------------------------------------------ */

.navpanel{
  position:fixed;
  inset:0;
  z-index:90;
  display:none;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  background:#17171A;
  color:#F2F1EF;
  text-align:center;
}
.navpanel.is-open{display:flex}
.navpanel a:not(.btn){
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(17px,4.4vw,22px);
  letter-spacing:.2em;
  text-transform:uppercase;
  line-height:2.5;
  color:#F2F1EF;
}
.navpanel .btn{
  margin-top:26px;
  background:#D6AFAF;border-color:#D6AFAF;color:#17171A;
}
.navpanel__close{
  position:absolute;
  top:22px;right:var(--gut);
  font-family:var(--sans);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  background:transparent;color:#F2F1EF;
  border:1px solid rgba(242,241,239,.32);
  padding:9px 16px;
  cursor:pointer;
}


/* ------------------------------------------------------------
   HERO

   The studio's own campaign photograph, pinned to the viewport so
   the page scrolls over it like a window. Touch browsers either
   ignore a fixed attachment or scale it badly, so below 821px and
   on anything without a hover pointer it falls back to a normal
   cover image. Reduced motion gets the same fallback.
   ------------------------------------------------------------ */

.hero{
  position:relative;
  display:flex;
  /* The wordmark sits low rather than dead centre. Centred, it lands on the
     model's face and on the card she is holding, which are the two things
     worth seeing in this photograph. */
  align-items:flex-end;
  justify-content:center;
  /* Full window, so the photograph is the whole of the first screen. svh is
     the small viewport height: on a phone it measures to the bottom of the
     screen with the browser chrome showing, so the hero never overflows the
     way 100vh does there. Older browsers fall back to the vh line above. */
  min-height:100vh;
  min-height:100svh;
  padding-block:clamp(110px,16vh,170px) clamp(52px,7vh,84px);
  overflow:hidden;
  text-align:center;
  color:#FFFFFF;
}

.hero__bg{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 18%;
  background-repeat:no-repeat;
}
@media (min-width: 821px) and (hover: hover){
  .hero__bg{background-attachment:fixed}
}
@media (prefers-reduced-motion: reduce){
  .hero__bg{background-attachment:scroll}
}

/* The scrim. Dark enough at the foot to hold the buttons, lighter
   through the middle so the photograph is still legible behind the
   wordmark. */
.hero__bg::after{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(18,18,20,.46) 0%,
    rgba(18,18,20,.30) 26%,
    rgba(18,18,20,.60) 58%,
    rgba(18,18,20,.84) 100%);
}

.hero__inner{position:relative;z-index:1;width:100%}

.hero__mark{
  width:min(760px,84vw);
  margin-inline:auto;
  filter:drop-shadow(0 3px 30px rgba(0,0,0,.45));
}
.hero h1{margin:0}


/* ------------------------------------------------------------
   TICKER
   ------------------------------------------------------------ */

.ticker{
  overflow:hidden;
  border-block:1px solid var(--hairline);
  background:var(--bg-alt);
  padding-block:15px;
}
.ticker__track{
  display:flex;
  width:max-content;
  animation:drift 42s linear infinite;
}
.ticker__track span{
  font-size:11px;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--label);
  padding-inline:34px;
  white-space:nowrap;
}
.ticker__track span::after{
  content:"\2022";
  margin-left:34px;
  color:var(--accent);
}
@keyframes drift{ to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){
  .ticker__track{animation:none}
  .ticker{padding-inline:var(--gut)}
}


/* ------------------------------------------------------------
   PAGE HEAD
   ------------------------------------------------------------ */

.pagehead{
  padding-block:clamp(118px,14vw,178px) clamp(38px,4.5vw,64px);
  text-align:center;
}
.pagehead p{
  max-width:600px;
  margin-inline:auto;
}


/* ------------------------------------------------------------
   SERVICE INDEX

   One numbered rule per family, with the lowest price on the menu
   at the end of the row. Names stay sentence case: a list of
   tracked capitals at this size reads as a wall.
   ------------------------------------------------------------ */

.index__row{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:baseline;
  gap:20px;
  padding-block:26px;
  border-top:1px solid var(--hairline);
  transition:padding-inline .4s cubic-bezier(.22,.61,.36,1), background .4s ease;
}
.index__row:last-child{border-bottom:1px solid var(--hairline)}
.index__row:hover{padding-inline:14px;background:var(--panel)}

.index__num{
  font-family:var(--sans);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--label);
}
.index__name{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(20px,2.4vw,30px);
  letter-spacing:.01em;
  line-height:1.25;
}
.index__note{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-soft);
  white-space:nowrap;
}


/* ------------------------------------------------------------
   PHOTOGRAPHY
   ------------------------------------------------------------ */

.strip{display:grid;gap:0}
.strip--three{grid-template-columns:repeat(3,1fr)}
.strip--two{grid-template-columns:repeat(2,1fr)}
.strip__cell{margin:0;position:relative;overflow:hidden}
.strip__cell img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  aspect-ratio:3/4;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.strip__cell:hover img{transform:scale(1.035)}

/* A photograph beside a column of words. */
.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,6vw,86px);
  align-items:center;
}
.split--wide-text{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}
.split__media img{
  width:100%;
  object-fit:cover;
  aspect-ratio:4/5;
}
.split__media--wide img{aspect-ratio:3/2}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(8px,1.2vw,18px);
}
.grid figure{margin:0;overflow:hidden}
.grid img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 50%;
  aspect-ratio:3/4;
  transition:transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.grid figure:hover img{transform:scale(1.035)}

/* Two across, four down, run wide. This is deliberately past the size the
   source files can carry sharply: several are only 340px on the long edge, so
   at a 650px cell they are enlarged nearly 2x. Scale was chosen over
   sharpness here on purpose. Higher resolution originals would fix it with no
   change to this rule. */
.grid--two{
  grid-template-columns:repeat(2,1fr);
  max-width:1320px;
  margin-inline:auto;
}

/* Result photographs are close ups where the brow and the eye sit in the
   top third of the frame. A centred crop takes the mouth and loses the
   work, so those two grids are biased upward. Interiors keep the centre. */
.strip--faces .strip__cell img,
.grid--faces img{object-position:50% 34%}

/* The interiors are not all the same shape. The basin is 519 x 847 while the
   room and the candle are both exactly 3:4, so a shared 3:4 cell was cutting
   the top and bottom off the basin, which is the one picture where the full
   height is the picture. The row takes the basin's own proportion instead:
   every interior now shows its full height, and the two 3:4 files give up a
   little width at the sides, which costs them almost nothing. */
.strip--tall .strip__cell img{aspect-ratio:519/847}


/* ------------------------------------------------------------
   MENU
   ------------------------------------------------------------ */

.jump{
  position:sticky;
  top:var(--head-h, 78px);
  z-index:40;
  display:flex;
  flex-wrap:wrap;
  gap:8px 26px;
  padding-block:16px;
  margin-bottom:clamp(40px,5vw,66px);
  background:var(--bg);          /* fully opaque: the menu scrolls under it */
  border-bottom:1px solid var(--hairline);
}
.jump a{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-soft);
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .3s ease, border-color .3s ease;
}
.jump a:hover,
.jump a.is-current{color:var(--text);border-bottom-color:var(--accent)}

.menu{margin-bottom:clamp(56px,7vw,96px)}
.menu:last-of-type{margin-bottom:0}
.menu > h2{
  padding-bottom:20px;
  border-bottom:1px solid var(--text);
  margin-bottom:8px;
}

.item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px clamp(24px,4vw,60px);
  padding-block:28px;
  border-bottom:1px solid var(--hairline);
}
.item__name{
  font-family:var(--sans);
  font-size:clamp(16px,1.3vw,18px);
  font-weight:400;
  letter-spacing:.02em;
  margin:0;
}
.item__desc{
  margin-top:9px;
  font-size:15px;
  line-height:1.7;
  color:var(--text-soft);
  max-width:62ch;
}
.item__meta{text-align:right;white-space:nowrap}
.item__price{
  display:block;
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(19px,1.6vw,24px);
  line-height:1.25;
}
.item__time{
  display:block;
  margin-top:6px;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-soft);
}

/* The note panel under the menu, and the policy list. */
.note{
  border:1px solid var(--line);
  background:var(--panel);
  padding:clamp(26px,3.4vw,44px);
}
.note h3{margin-bottom:14px}
.note ul{margin:0;padding-left:1.1em}
.note li{margin-bottom:10px}
.note li:last-child{margin-bottom:0}


/* ------------------------------------------------------------
   DETAIL AND HOURS ROWS
   ------------------------------------------------------------ */

.rows{border-top:1px solid var(--hairline)}
.rows__row{
  display:grid;
  grid-template-columns:minmax(120px,.55fr) 1fr;
  gap:16px;
  padding-block:15px;
  border-bottom:1px solid var(--hairline);
}
.rows__key{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--label);
  padding-top:3px;
}
.rows__val{color:var(--text)}
/* Today is marked by weight, not colour, so it stays legible on all
   three grounds. */
.rows__row.is-today .rows__key{color:var(--text)}
.rows__row.is-today .rows__val{font-weight:400}

.map{
  aspect-ratio:4/3;
  background:var(--bg-alt);
  border:1px solid var(--line);
}
/* On its own under the details rather than in a column beside them. */
.map--wide{
  max-width:900px;
  margin-block:clamp(44px,5vw,72px) 0;
  margin-inline:auto;
  aspect-ratio:16/9;
}
.map iframe{
  width:100%;height:100%;
  /* Black and white, so the map reads as a diagram of where the studio is
     rather than competing with the photography. */
  filter:grayscale(1) contrast(1.05);
}

@media (max-width: 720px){
  .map--wide{aspect-ratio:4/3}
}


/* ------------------------------------------------------------
   PULL QUOTE

   Sentence case at a light weight, so it reads as somebody
   speaking rather than as another section heading.
   ------------------------------------------------------------ */

.quote{
  font-family:var(--display);
  font-size:clamp(21px,2.7vw,33px);
  font-weight:200;
  line-height:1.45;
  letter-spacing:.01em;
  margin:0;
}
.quote cite{
  display:block;
  margin-top:26px;
  font-style:normal;
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--text-soft);
}


/* ------------------------------------------------------------
   INCLUDED WITH EVERY SERVICE

   This sits inside the menu rather than in a band of its own,
   because it is a note about the menu, not a subject in its own
   right. The heavy rule above it is what separates the two.
   ------------------------------------------------------------ */

.included-note{
  margin-top:clamp(46px,6vw,76px);
  padding-top:clamp(28px,3.4vw,42px);
  border-top:1px solid var(--text);
}
.included-note__lede{
  max-width:54ch;
  margin-top:16px;
}

.included{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(24px,3vw,48px);
  margin-top:clamp(28px,3.4vw,46px);
}
.included > div{
  padding-top:18px;
  border-top:1px solid var(--hairline);
}
.included h3{margin-bottom:8px}
.included p{font-size:15px;color:var(--text-soft)}


/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */

.foot{
  --bg:#17171A; --text:#F2F1EF; --text-soft:#A5A5A9;
  --brand:#D6AFAF; --brand-hover:#E6C9C9; --brand-text:#17171A;
  --label:#C0A5A5; --accent:#D6AFAF; --hairline:rgba(242,241,239,.15);
  background:var(--bg);
  color:var(--text);
  padding-block:clamp(58px,7vw,92px) 34px;
}
.foot__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1.2fr;
  gap:clamp(34px,5vw,70px);
}
.foot__mark{width:200px;margin-bottom:22px}
.foot h4{
  color:var(--label);
  font-size:11px;
  letter-spacing:.24em;
  text-transform:uppercase;
  margin-bottom:16px;
}
.foot a:not(.btn){transition:color .3s ease}
.foot a:not(.btn):hover{color:var(--brand)}
.foot__links{display:flex;flex-direction:column;gap:9px}
.foot__bottom{
  display:flex;
  flex-wrap:wrap;
  gap:12px 24px;
  justify-content:space-between;
  align-items:center;
  margin-top:clamp(42px,5vw,68px);
  padding-top:22px;
  border-top:1px solid var(--hairline);
  font-size:12px;
  color:var(--text-soft);
}


/* ------------------------------------------------------------
   STICKY BOOKING BAR
   ------------------------------------------------------------ */

.bookbar{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:70;
  display:none;
  padding:11px var(--gut) calc(11px + env(safe-area-inset-bottom));
  background:var(--bar-solid);
  border-top:1px solid var(--hairline);
  transition:transform .35s cubic-bezier(.22,.61,.36,1);
}
.bookbar .btn{display:block;text-align:center}
.hero-in-view .bookbar{transform:translateY(110%)}


/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */

@media (max-width: 940px){
  .masthead__inner{grid-template-columns:1fr auto;padding-block:14px}
  .brand{justify-self:start}
  .nav{display:none}
  .nav-toggle{display:block}

  /* Six categories wrap to three lines on a phone, and a sticky bar that
     deep eats a quarter of the screen. Run them on one line instead and
     let the bar scroll sideways. */
  .jump{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    gap:22px;
  }
  .jump::-webkit-scrollbar{display:none}
  .jump a{white-space:nowrap}
}

@media (max-width: 860px){
  .split,
  .split--wide-text{grid-template-columns:1fr;gap:32px}
  .strip--three{grid-template-columns:1fr}
  .strip--three .strip__cell img{aspect-ratio:4/3}
  /* Full height is the whole point of this row, so it keeps its proportion
     on a phone rather than dropping to the landscape crop above. */
  .strip--tall .strip__cell img{aspect-ratio:519/847}
  .included{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:38px}
  .foot__mark{width:170px}
}

@media (max-width: 720px){
  .bookbar{display:block}
  body{padding-bottom:66px}
  .grid{grid-template-columns:repeat(2,1fr)}
  .index__row{grid-template-columns:40px 1fr;row-gap:6px;padding-block:22px}
  .index__note{grid-column:2;text-align:left}
  .index__row:hover{padding-inline:0}
  .item{grid-template-columns:1fr;gap:10px}
  .item__meta{text-align:left}
  .item__price{display:inline;font-size:19px}
  .item__time{display:inline;margin-left:14px}
  .rows__row{grid-template-columns:1fr;gap:2px}
  .rows__key{padding-top:0}
  .foot__bottom{justify-content:flex-start}
}

@media (max-width: 480px){
  .strip--two{grid-template-columns:1fr}
  .hero__mark{width:78vw}
}