/* Christa Loisel — Cutting & Colour Specialist */

@font-face {
  font-family: "Bodoni Moda";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bodoni-moda.woff2") format("woff2");
}
@font-face {
  font-family: "Bodoni Moda";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/bodoni-moda-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/hanken-grotesk.woff2") format("woff2");
}

:root {
  --paper: #f3ede4;
  --paper-2: #ebe2d5;
  --paper-3: #e1d5c4;
  --ink: #1a1512;
  --ink-2: #4b3f38;
  --ink-3: #6e5f55;
  --rule: rgba(29, 23, 20, 0.16);
  --rule-strong: rgba(29, 23, 20, 0.5);
  --espresso: #2e1610;
  --auburn: #6b2316;
  --copper: #a8481f;
  --honey: #c98b3e;
  --ash: #b9ab93;

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --sans: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(16px, 3.2vw, 56px);
  --max: none;
  --ease: cubic-bezier(0.22, 0.61, 0.21, 1);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

::selection {
  background: var(--copper);
  color: var(--paper);
}

:focus-visible {
  outline: 1.5px solid var(--copper);
  outline-offset: 4px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
}
.skip:focus {
  left: 12px;
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- type ---------- */

.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 22px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.01em;
  font-optical-sizing: auto;
  font-kerning: normal;
}

h1,
h2 {
  font-weight: 600;
  letter-spacing: -0.035em;
}
h1 em,
h2 em {
  font-weight: 500;
  letter-spacing: -0.015em;
}

h2 {
  font-size: clamp(42px, 6.6vw, 128px);
  /* 0.9 let a descender in the first line touch the second (the y of "Every" hit the
     dot of the i in "considered"); 1.03 clears them and still reads tight */
  line-height: 1.03;
}

h2 em,
h1 em {
  font-style: italic;
  color: var(--copper);
}

.lede {
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34em;
}

.fig {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
/* the portrait caption sits on the darker sand, so it takes the darker grey to stay legible */
.portrait .fig {
  color: var(--ink-2);
}

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

.btn {
  --bg: var(--ink);
  --fg: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 26px 16px;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--bg);
  font: 500 13px/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.btn::after {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
  transition: width 0.35s var(--ease);
}
.btn:hover {
  --bg: var(--copper);
}
.btn:hover::after {
  width: 34px;
}
.btn--ghost {
  --bg: transparent;
  --fg: var(--ink);
  border-color: var(--rule-strong);
}
.btn--ghost:hover {
  --bg: var(--ink);
  --fg: var(--paper);
}
.btn--light {
  --bg: var(--paper);
  --fg: var(--ink);
}
.btn--light:hover {
  --bg: var(--honey);
  --fg: var(--ink);
}

.link {
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.4s var(--ease), color 0.3s;
}
.link:hover {
  color: var(--copper);
  background-size: 0 1px;
  background-position: 100% 100%;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 237, 228, 0.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s;
}
.site-header.is-scrolled {
  border-bottom-color: var(--rule);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand img {
  /* Christa's own logo, traced from her artwork: the CL with the name and tagline beside it */
  display: block;
  height: 40px;
  width: auto;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.6vw, 40px);
}
.nav a:not(.btn) {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.3s;
}
.nav a:not(.btn):hover,
.nav a:not(.btn)[aria-current="page"] {
  color: var(--copper);
}
.nav .btn {
  padding: 13px 18px 12px;
  font-size: 12px;
}

@media (max-width: 860px) {
  .nav a:not(.btn) {
    display: none;
  }
}
@media (max-width: 420px) {
  .brand img {
    height: 34px;
  }
  .nav .btn::after {
    display: none;
  }
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(16px, 2.4vw, 32px) 0 clamp(56px, 7vw, 104px);
  /* the last headline line is sized to run edge to edge */
  --hero-size: calc((100vw - 2 * var(--gutter)) / var(--hero-ratio, 6.84));
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
  margin-bottom: clamp(28px, 4.6vw, 72px);
  position: relative;
  z-index: 2;
  /* the lock emerges from beneath this rule */
  background: var(--paper);
  box-shadow: 0 -200px 0 200px var(--paper);
}
.hero__top .eyebrow {
  margin: 0;
}
/* desktop: the place line keeps its spot at the right, above the lock */
@media (min-width: 901px) { .hero__top .hero__issue { margin-left: auto; } }
.hero__issue {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hero__issue span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  margin-right: 12px;
}

.hero__stage {
  position: relative;
}

.hero h1 {
  position: relative;
  z-index: 1;
  font-size: var(--hero-size);
  font-weight: 600;
  line-height: 0.86;
  letter-spacing: -0.035em;
  font-kerning: normal;
  margin: 0;
  padding-top: 0.04em;
}
.hero h1 .line {
  display: block;
  white-space: nowrap;
}
.hero h1 .line--step {
  padding-left: 0.55em;
}
.hero h1 em {
  font-weight: 500;
  letter-spacing: -0.015em;
}

.hero__foot {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr);
  gap: 28px clamp(24px, 3.4vw, 64px);
  align-items: start;
  padding-top: clamp(32px, 4vw, 56px);
}
.hero__foot .lede {
  margin: 0;
}
.hero__foot .hero__actions {
  flex-direction: column;
  align-items: stretch;
}
.hero__foot .hero__actions .btn {
  justify-content: space-between;
}
.hero__facts {
  list-style: none;
  margin: clamp(48px, 6vw, 200px) 0 0;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.hero__facts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 21px);
}
.hero__facts span {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-top: 0.4em;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* the lock of hair: its cut line sits exactly on the headline's last line */
.hero__art {
  --art-w: 40vw;
  position: absolute;
  z-index: 0;
  right: 3vw;
  width: var(--art-w);
  height: calc(var(--art-w) * 1.3333);
  bottom: calc(var(--art-w) * -0.2);
  pointer-events: none;
}
.strands {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.strands path {
  fill: none;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
}
.strands .cut {
  stroke: var(--ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.strands text {
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  fill: var(--ink-3);
}
.strands .tone text {
  font-size: 10px;
  letter-spacing: 0.18em;
}
.strands .tone line {
  stroke: var(--ink-3);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.strands .tone circle {
  fill: var(--paper);
  stroke: var(--ink);
  stroke-width: 0.8;
  vector-effect: non-scaling-stroke;
}

.js .strands .strand {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.6s var(--ease) forwards;
}
.js .strands .cut,
.js .strands .anno {
  opacity: 0;
  animation: fade 1s var(--ease) 1.8s forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes fade {
  to {
    opacity: 1;
  }
}

@media (max-width: 900px) {
  .hero__stage {
    display: flex;
    flex-direction: column;
  }
  /* phones: the lock runs down the right of the hero, as on desktop: its roots come out from
     under the rule below the eyebrow and its cut lands on the rule under the intro.
     site.js places it, sets the headline to finish just short of the hair (as the desktop
     headline finishes short of its column) and wraps the intro around the curve, so no
     words ever cross the hair. The size here is only the starting point for that fit. */
  .hero { --hero-size: calc((100vw - 2 * var(--gutter)) / 8.9); }
  .hero__stage .hero__art { display: none; }
  .hero__foot {
    display: block;
    position: static;
    padding-top: 22px;
    border-bottom: 1px solid var(--ink);
  }
  .hero__foot .lede { display: flow-root; padding: 0; }
  /* Until site.js has wrapped the intro round the hair, the float is 0 wide but already as tall
     as the wrap will be, so the page can paint before the script runs and nothing below jumps
     when it does. Measured from site.js's own fit for this intro: tablets, then phones. If the
     intro's wording changes these drift a little; the worst case is a small jump on a slow phone. */
  .hero__foot .lede { --wrap-h: calc(200px - (100vw - 560px) / 4); }
  .hero__foot .lede::before {
    content: "";
    float: right;
    width: var(--wrap-w, 0px);
    height: var(--wrap-h, 0px);
    shape-outside: var(--wrap-shape, none);
  }
  .hero__lock {
    display: block;
    position: absolute;
    z-index: 0; /* under the eyebrow row, whose paper hides the roots above the rule */
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }
  .hero__lock .strands { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero__lock .strands .cut,
  .strands .anno { display: none; }
  .hero__foot .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .hero__facts {
    margin-top: 8px;
  }
  .strands text,
  .strands .tone text {
    font-size: 23px;
    letter-spacing: 0.12em;
  }
}

@media (max-width: 555px) {
  .hero__foot .lede { --wrap-h: calc(389px - (100vw - 460px) * 0.32); }
}
@media (max-width: 460px) {
  .hero__foot .lede { --wrap-h: calc(100vw * 1.04 - 89px); }
}
@media (max-width: 349px) {
  .hero__foot .lede { --wrap-h: 335px; }
}
@media (max-width: 339px) {
  .hero__foot .lede { --wrap-h: 420px; }
}

/* desktop: the lock has its own full-height column on the right, as in the first version;
   the headline and everything under it sit to its left, so no words cross the hair */
@media (min-width: 901px) {
  .hero {
    --lock-w: clamp(280px, 24vw, 440px); /* its own name: .hero__art sets --art-w for itself */
    --art-gap: clamp(56px, 6vw, 120px);
    --hero-size: calc((100vw - 2 * var(--gutter) - var(--lock-w) - var(--art-gap)) / var(--hero-ratio, 6.84));
    min-height: min(100vh, 1080px);
  }
  .hero__stage {
    position: static;
    margin-right: calc(var(--lock-w) + var(--art-gap));
  }
  .hero__foot {
    margin-right: calc(var(--lock-w) + var(--art-gap));
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .hero__foot .hero__facts {
    grid-column: 1 / -1;
    margin-top: clamp(28px, 3vw, 48px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 48px);
  }
  .hero__art {
    position: absolute;
    top: 0;
    bottom: clamp(24px, 3vw, 48px);
    right: var(--gutter);
    width: var(--lock-w);
    height: auto;
  }
}

/* the colour fan unfurls left to right as its column arrives */
.js .duo__col.reveal .fan { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease) .15s; }
.js .duo__col.reveal.is-in .fan { clip-path: inset(0 0 0 0); }

@media (min-width: 901px) { .hero__lock { display: none; } }  /* desktop draws the lock in its column */

/* phones: booking after Christa. The hero keeps its intro; the buttons and facts move below the about section */
.mbook { display: none; }
@media (max-width: 900px) {
  .hero__foot .hero__actions,
  .hero__foot .hero__facts { display: none; }
  .mbook {
    display: block;
    padding: 4px 0 8px;
  }
  .mbook .eyebrow { margin: 0 0 18px; }
  /* two buttons the same width, one under the other; Instagram sits under them */
  .mbook .hero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
  .mbook .hero__actions .btn { width: 100%; justify-content: space-between; }
  .mbook .hero__ig { align-self: flex-start; margin-top: 6px; }
  .mbook .hero__facts { margin-top: 28px; }
}

/* ---------- ledger (credentials) ---------- */

.ledger {
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}
.ledger .wrap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.ledger__item {
  padding: 34px 26px 32px 0;
  border-right: 1px solid var(--rule);
}
.ledger__item + .ledger__item {
  padding-left: 26px;
}
.ledger__item:last-child {
  border-right: 0;
}
.ledger__num {
  font-family: var(--serif);
  font-size: clamp(44px, 4.6vw, 64px);
  line-height: 1;
  display: block;
  margin-bottom: 14px;
}
.ledger__num sup {
  font-size: 0.4em;
  vertical-align: top;
  position: relative;
  top: 0.35em;
  margin-left: 2px;
  color: var(--copper);
}
.ledger__num--word {
  font-style: italic;
  font-size: clamp(34px, 3.4vw, 48px);
  padding-top: 0.2em;
}
.ledger__label {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}
@media (max-width: 860px) {
  .ledger .wrap {
    grid-template-columns: 1fr 1fr;
  }
  .ledger__item {
    padding: 28px 18px 26px 0 !important;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .ledger__item:nth-child(even) {
    padding-left: 18px !important;
    border-left: 1px solid var(--rule);
  }
  .ledger__item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

/* ---------- sections ---------- */

.section {
  padding: clamp(72px, 8vw, 128px) 0;
}
.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px clamp(24px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.section__head .lede {
  margin: 0;
}
@media (max-width: 860px) {
  .section__head {
    grid-template-columns: 1fr;
  }
}

/* ---------- approach: curve & line ---------- */

.duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--ink);
}
.duo__col {
  padding: 44px clamp(0px, 3vw, 48px) 10px 0;
}
.duo__col + .duo__col {
  border-left: 1px solid var(--rule);
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: 0;
}
.duo__fig {
  height: 150px;
  margin-bottom: 36px;
  display: flex;
  align-items: flex-end;
}
.duo__fig svg {
  height: 100%;
  width: auto;
  overflow: visible;
}
.duo__fig path,
.duo__fig line {
  fill: none;
  vector-effect: non-scaling-stroke;
}
.duo h3 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.08;
  margin: 10px 0 18px;
}
.duo h3 em {
  color: var(--copper);
}
.duo p {
  color: var(--ink-2);
  max-width: 30em;
  margin: 0 0 16px;
}
@media (max-width: 760px) {
  .duo {
    grid-template-columns: 1fr;
  }
  .duo__col + .duo__col {
    border-left: 0;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    margin-top: 40px;
  }
}

/* ---------- tones (colour chart) ---------- */

.tones {
  background: var(--paper-2);
}
.chart {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: clamp(8px, 1.4vw, 20px);
  align-items: start;
}
.swatch {
  margin: 0;
}
.swatch svg {
  width: 100%;
  height: clamp(300px, 34vw, 640px);
  transform-origin: 50% 0;
  transition: transform 0.8s var(--ease);
}
.swatch:hover svg {
  transform: rotate(-3deg);
}
.swatch figcaption {
  border-top: 1px solid var(--rule-strong);
  margin-top: 18px;
  padding-top: 12px;
}
.swatch b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.1;
}
.swatch span {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  /* all seven shades, in a strip you swipe; the fourth peeks in so the strip reads as one you can move */
  .chart {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 27%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 10px;
    scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .chart::-webkit-scrollbar { display: none; }
  .swatch { scroll-snap-align: start; }
  .swatch svg { height: clamp(260px, 78vw, 360px); }
}

.davines {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px clamp(24px, 6vw, 96px);
  margin-top: clamp(64px, 8vw, 110px);
  padding-top: 40px;
  border-top: 1px solid var(--rule-strong);
}
.davines h3 {
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.1;
}
.davines p {
  margin: 0 0 14px;
  color: var(--ink-2);
}
@media (max-width: 760px) {
  .davines {
    grid-template-columns: 1fr;
  }
}

/* ---------- services ---------- */

.services {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--ink);
  counter-reset: svc;
}
.services li {
  counter-increment: svc;
  display: grid;
  grid-template-columns: 70px minmax(0, 1.1fr) minmax(0, 1.4fr) 150px;
  gap: 8px clamp(16px, 3vw, 48px);
  align-items: baseline;
  padding: 30px 0 28px;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.services li::before {
  content: counter(svc, decimal-leading-zero);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.services li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--copper);
  transition: width 0.7s var(--ease);
}
.services li:hover::after {
  width: 100%;
}
.services h3 {
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
  transition: color 0.3s;
}
.services li:hover h3 {
  color: var(--copper);
}
.services p {
  margin: 0;
  color: var(--ink-2);
  font-size: 16px;
}
.services .tag {
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.services .tag--free {
  color: var(--copper);
}
@media (max-width: 860px) {
  .services li {
    grid-template-columns: 44px 1fr;
  }
  .services p,
  .services .tag {
    grid-column: 2;
    text-align: left;
  }
}

/* ---------- studios (dark) ---------- */

.dark {
  background: var(--ink);
  color: var(--paper);
}
.dark .eyebrow,
.dark .fig {
  color: rgba(243, 237, 228, 0.55);
}
.dark .lede {
  color: rgba(243, 237, 228, 0.75);
}
.dark h2 em {
  color: var(--honey);
}

.studios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid rgba(243, 237, 228, 0.5);
}
.studio {
  padding: 40px clamp(0px, 3vw, 48px) 8px 0;
}
.studio + .studio {
  border-left: 1px solid rgba(243, 237, 228, 0.16);
  padding-left: clamp(24px, 4vw, 56px);
  padding-right: 0;
}
.studio h3 {
  font-size: clamp(34px, 3.6vw, 52px);
  line-height: 1;
  margin: 12px 0 6px;
}
.studio .area {
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--honey);
}
.studio dl {
  margin: 34px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px 28px;
  font-size: 16px;
}
.studio dt {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 237, 228, 0.5);
  padding-top: 4px;
}
.studio dd {
  margin: 0;
  color: rgba(243, 237, 228, 0.88);
}
.studios-note {
  margin: 48px 0 0;
  font-size: 15px;
  color: rgba(243, 237, 228, 0.6);
}
@media (max-width: 760px) {
  .studios {
    grid-template-columns: 1fr;
  }
  .studio + .studio {
    border-left: 0;
    border-top: 1px solid rgba(243, 237, 228, 0.16);
    padding-left: 0;
    margin-top: 40px;
  }
}

/* ---------- call to action ---------- */

.cta {
  position: relative;
  padding: clamp(96px, 13vw, 180px) 0 clamp(88px, 11vw, 150px);
  text-align: center;
  overflow: hidden;
}
.cta__mark {
  width: 120px;
  height: auto;
  margin: 0 auto 40px;
}
.cta .wrap {
  position: relative;
}
.cta .eyebrow {
  justify-content: center;
}
.cta .eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.cta__phone {
  display: inline-block;
  font-family: var(--serif);
  font-size: calc((100vw - 2 * var(--gutter)) / 6.56);
  font-weight: 600;
  line-height: 0.9;
  letter-spacing: -0.04em;
  text-decoration: none;
  margin: 8px 0 26px;
  white-space: nowrap;
  transition: color 0.3s;
}
.cta__phone:hover {
  color: var(--copper);
}
.cta p {
  margin: 0 auto;
  color: var(--ink-2);
  max-width: 30em;
}
.cta .hero__actions {
  justify-content: center;
}

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

.site-footer {
  border-top: 1px solid var(--ink);
  padding: 56px 0 40px;
  font-size: 14px;
  color: var(--ink-2);
}
.site-footer .wrap {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 36px;
}
.site-footer .footer__title {
  font-family: var(--sans);
  line-height: 1.4;
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.site-footer p,
.site-footer address {
  margin: 0 0 6px;
  font-style: normal;
}
.site-footer .brand {
  margin-bottom: 18px;
}
.site-footer .brand img {
  /* the full logo, stacked as she drew it */
  height: auto;
  width: 170px;
}
.footer__base {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
  margin-top: 20px;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
@media (max-width: 860px) {
  .site-footer .wrap {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer .wrap > :first-child {
    grid-column: 1 / -1;
  }
}

/* ---------- reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* =========================================================
   Booking page
   ========================================================= */

.book-hero {
  padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  border-bottom: 1px solid var(--ink);
}
.book-hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 32px clamp(24px, 6vw, 96px);
  align-items: end;
}
.book-hero h1 {
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.025em;
}
.book-hero .lede {
  margin: 0;
}
@media (max-width: 860px) {
  .book-hero .wrap {
    grid-template-columns: 1fr;
  }
}

.booking {
  padding: clamp(48px, 7vw, 96px) 0 clamp(80px, 10vw, 140px);
}
.booking .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr);
  gap: 48px clamp(28px, 6vw, 96px);
  align-items: start;
}
@media (max-width: 960px) {
  .booking .wrap {
    grid-template-columns: 1fr;
  }
}

.step {
  border: 0;
  margin: 0 0 64px;
  padding: 0;
  min-width: 0;
}
.step legend {
  display: flex;
  align-items: baseline;
  gap: 18px;
  width: 100%;
  padding: 0 0 18px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--ink);
  font-family: var(--serif);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.1;
}
.step legend span {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--copper);
  flex: none;
}
.field--half {
  max-width: calc(50% - 14px);
}
@media (max-width: 600px) {
  .field--half {
    max-width: none;
  }
}
.step > .field__label {
  margin-top: 6px;
}
.choices--gap {
  margin-bottom: 30px;
}
.step .hint {
  margin: -8px 0 22px;
  color: var(--ink-3);
  font-size: 15px;
}

/* the date hint only appears when a chosen day doesn't suit the studio */
.step .hint:empty {
  display: none;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.choices--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .choices,
  .choices--3 {
    grid-template-columns: 1fr;
  }
}

.choice {
  position: relative;
  display: block;
  cursor: pointer;
}
.choice input {
  position: absolute;
  opacity: 0;
  inset: 0;
  margin: 0;
  cursor: pointer;
}
.choice__box {
  display: block;
  height: 100%;
  padding: 18px 20px 18px 50px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  transition: background 0.3s var(--ease), border-color 0.3s, color 0.3s;
  position: relative;
}
.choice__box::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 23px;
  width: 14px;
  height: 14px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  transition: box-shadow 0.3s var(--ease), background 0.3s;
}
.choice input[type="checkbox"] + .choice__box::before {
  border-radius: 0;
}
.choice b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
}
.choice small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: var(--ink-3);
  line-height: 1.45;
}
.choice:hover .choice__box {
  border-color: var(--ink);
}
.choice input:checked + .choice__box {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.choice input:checked + .choice__box small {
  color: rgba(243, 237, 228, 0.65);
}
.choice input:checked + .choice__box::before {
  border-color: var(--honey);
  background: var(--honey);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.choice input:focus-visible + .choice__box {
  outline: 1.5px solid var(--copper);
  outline-offset: 3px;
}

.field {
  display: block;
  margin-bottom: 22px;
}
.field__label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.field__label i {
  font-style: normal;
  color: var(--copper);
}
.field input,
.field textarea,
.field select {
  width: 100%;
  font: 400 18px/1.4 var(--sans);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
  padding: 10px 0 12px;
  transition: border-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  resize: vertical;
  min-height: 96px;
}
.field input:focus,
.field textarea:focus {
  outline: 0;
  border-bottom-color: var(--copper);
  box-shadow: 0 1px 0 0 var(--copper);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
  opacity: 0.7;
}
.fields-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
@media (max-width: 600px) {
  .fields-2 {
    grid-template-columns: 1fr;
  }
}

.form-error {
  display: none;
  margin: 0 0 20px;
  padding: 14px 18px;
  border-left: 2px solid var(--copper);
  background: var(--paper-2);
  color: var(--auburn);
  font-size: 15px;
}
.form-error.is-shown {
  display: block;
}

/* the appointment card */

.ticket {
  position: sticky;
  top: 110px;
  background: var(--ink);
  color: var(--paper);
  padding: 34px 30px 30px;
  overflow: hidden;
}
.ticket__mark {
  position: absolute;
  right: -40px;
  top: -30px;
  width: 210px;
  opacity: 0.16;
  pointer-events: none;
}
.ticket .fig {
  color: rgba(243, 237, 228, 0.55);
}
.ticket h2 {
  font-size: 34px;
  line-height: 1.05;
  margin: 10px 0 26px;
}
.ticket h2 em {
  color: var(--honey);
}
.ticket dl {
  margin: 0 0 28px;
  border-top: 1px solid rgba(243, 237, 228, 0.2);
}
.ticket dl div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px dashed rgba(243, 237, 228, 0.2);
}
.ticket dt {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 237, 228, 0.5);
  padding-top: 3px;
}
.ticket dd {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  word-break: break-word;
}
.ticket dd.is-empty {
  color: rgba(243, 237, 228, 0.5);
  font-style: italic;
}
.ticket .btn {
  width: 100%;
  justify-content: space-between;
}
.ticket__alt {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: 13px;
}
.ticket__alt button {
  background-color: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.ticket__alt .link {
  color: rgba(243, 237, 228, 0.8);
}
.ticket__alt .link:hover {
  color: var(--honey);
}
.ticket__note {
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(243, 237, 228, 0.16);
  font-size: 13px;
  line-height: 1.55;
  color: rgba(243, 237, 228, 0.6);
}
.ticket__status {
  min-height: 1.2em;
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--honey);
}
@media (max-width: 960px) {
  .ticket {
    position: relative;
    top: 0;
  }
}

.faq {
  margin-top: 8px;
  border-top: 1px solid var(--ink);
}
.faq details {
  border-bottom: 1px solid var(--rule);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  position: relative;
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.25;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 50%;
  width: 14px;
  height: 1px;
  background: var(--ink);
  box-shadow: none;
}
.faq summary::before {
  content: "";
  position: absolute;
  right: 10.5px;
  top: calc(50% - 6.5px);
  width: 1px;
  height: 14px;
  background: var(--ink);
  transition: transform 0.35s var(--ease);
}
.faq details[open] summary::before {
  transform: scaleY(0);
}
.faq details p {
  margin: 0 0 24px;
  color: var(--ink-2);
  max-width: 40em;
}

/* 404 */
.missing {
  min-height: 70vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 80px 0;
}
.missing h1 {
  font-size: clamp(56px, 10vw, 140px);
  line-height: 1;
  margin: 10px 0 24px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
  }
  html {
    scroll-behavior: auto;
  }
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.missing .eyebrow,
.missing .hero__actions {
  justify-content: center;
}
.missing .lede {
  margin: 0 auto;
}

/* ---------- about / portrait (full-bleed split) ---------- */

.about {
  padding: 0;
  border-top: 1px solid var(--ink);
}
.about .wrap {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
}
.portrait {
  margin: 0;
  background: var(--paper-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 6vw, 110px) var(--gutter);
}
.portrait__arch {
  position: relative;
  width: min(100%, 560px);
  aspect-ratio: 4 / 5;
  border-radius: 999px 999px 0 0;
  background: var(--auburn);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.portrait__arch::after {
  /* a hairline inner frame, like the salon's arched mirrors */
  content: "";
  position: absolute;
  inset: 12px 12px 0;
  border: 1px solid rgba(243, 237, 228, 0.45);
  border-bottom: 0;
  border-radius: 999px 999px 0 0;
  pointer-events: none;
}
.portrait__arch picture,
.portrait__arch img.portrait__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.portrait__arch img.portrait__photo {
  object-fit: cover;
}
.portrait__mark {
  width: 38%;
  opacity: 0.85;
}
.portrait figcaption {
  width: min(100%, 560px);
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ink);
}
.about__copy {
  align-self: center;
  padding: clamp(72px, 9vw, 160px) var(--gutter) clamp(72px, 9vw, 160px) clamp(32px, 6vw, 120px);
}
.about h2 {
  margin-bottom: 36px;
}
.about__copy > p:not(.eyebrow):not(.lede) {
  color: var(--ink-2);
  max-width: 36em;
  margin: 0 0 16px;
}
.about__copy .lede {
  margin: 0 0 22px;
}
.about__copy .btn {
  margin-top: 22px;
}
@media (max-width: 860px) {
  .about .wrap {
    grid-template-columns: 1fr;
  }
  .about__copy {
    padding: 64px var(--gutter) 80px;
  }
}
.about h2 {
  font-size: clamp(42px, 5.6vw, 112px);
}
section[id] {
  scroll-margin-top: 78px;
}
.cta .hero__actions {
  margin-top: 40px;
}
.duo__fig {
  height: clamp(150px, 14vw, 230px);
}


/* =========================================================
   Full-width, colour-blocked pass
   ========================================================= */

@media (max-width: 1200px) and (min-width: 901px) {
  .hero__foot {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .hero__facts {
    grid-column: 1 / -1;
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
}

/* headline lines rise in, one after another */
.js .hero h1 .line {
  opacity: 0;
  transform: translateY(0.18em);
  animation: rise 1.2s var(--ease) forwards;
}
.js .hero h1 .line:nth-child(2) {
  animation-delay: 0.14s;
}
.js .hero h1 .line:nth-child(3) {
  animation-delay: 0.28s;
}
@keyframes rise {
  to {
    opacity: 1;
    transform: none;
  }
}

/* credentials now sit under the Meet Christa copy */
.ledger--mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid var(--ink);
  border-bottom: 0;
}
.ledger--mini .ledger__item {
  padding: 24px 20px 22px 0;
  border-right: 0;
  border-bottom: 1px solid var(--rule);
}
.ledger--mini .ledger__item:nth-child(even) {
  padding-left: 24px;
  border-left: 1px solid var(--rule);
}
.ledger--mini .ledger__num {
  font-size: clamp(40px, 3.6vw, 60px);
}
.ledger--mini .ledger__num--word {
  font-size: clamp(32px, 2.8vw, 46px);
}
.about__copy > p:not(.eyebrow):not(.lede) {
  max-width: none;
}

/* approach drawings fill their columns */
.duo__fig svg {
  width: 100%;
  height: 100%;
}
.duo p {
  max-width: none;
}
.duo__col {
  padding-right: clamp(0px, 3vw, 56px);
}

/* ---- colour chart on black, like a salon colour ring ---- */
.tones {
  background: var(--ink);
  color: var(--paper);
}
.tones .eyebrow {
  color: rgba(243, 237, 228, 0.55);
}
.tones .lede,
.tones .davines p {
  color: rgba(243, 237, 228, 0.78);
}
.tones h2 em {
  color: var(--honey);
}
.tones .chart {
  position: relative;
}
.tones .chart::before {
  /* a soft spotlight behind the swatches */
  content: "";
  position: absolute;
  inset: -12% -4% 10%;
  background: radial-gradient(60% 55% at 50% 40%, rgba(201, 139, 62, 0.16), transparent 70%);
  pointer-events: none;
}
.tones .swatch figcaption {
  border-top-color: rgba(243, 237, 228, 0.35);
}
.tones .swatch span {
  color: rgba(243, 237, 228, 0.55);
}
.tones .davines {
  border-top-color: rgba(243, 237, 228, 0.3);
}

/* ---- studios on deep oxblood ---- */
.dark {
  background: #3a130c;
}
.studio h3 {
  font-size: clamp(48px, 6.4vw, 120px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.9;
}
.studio .area {
  display: block;
  margin-top: 8px;
  font-size: clamp(22px, 2vw, 32px);
}
.studio dl {
  grid-template-columns: repeat(3, auto);
  grid-auto-flow: column;
  grid-template-rows: auto auto;
  justify-content: start;
  gap: 6px clamp(28px, 4vw, 72px);
  padding-top: 22px;
  border-top: 1px solid rgba(243, 237, 228, 0.18);
}

/* ---- call to action in full copper ---- */
.cta {
  background: var(--copper);
  color: var(--paper);
}
.cta .eyebrow {
  color: rgba(243, 237, 228, 0.95);
}
.cta p {
  color: rgba(243, 237, 228, 0.95);
}
.cta__phone:hover {
  color: var(--ink);
}
.cta .btn {
  --bg: var(--paper);
  --fg: var(--ink);
  border-color: var(--paper);
}
.cta .btn:hover {
  --bg: var(--ink);
  --fg: var(--paper);
  border-color: var(--ink);
}
.cta .btn--ghost {
  --bg: transparent;
  --fg: var(--paper);
  border-color: rgba(243, 237, 228, 0.6);
}
.cta {
  padding: clamp(72px, 9vw, 140px) 0 clamp(72px, 9vw, 130px);
}

/* services: a row fills with colour on hover */
.services li {
  transition: background 0.5s var(--ease);
}
@media (hover: hover) {
  .services li:hover {
    background: var(--paper-2);
  }
}
.services li {
  padding-left: 14px;
  padding-right: 14px;
  margin: 0 -14px;
}
.tones {
  overflow: hidden;
}

/* hero foot fills its row */
.hero__foot .lede {
  font-size: clamp(19px, 1.65vw, 26px);
  line-height: 1.5;
}
.hero__ig {
  align-self: flex-start;
  margin-top: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 1.4vw, 22px);
}

/* the arch grows to the full height of its panel */
@media (min-width: 861px) {
  .portrait {
    justify-content: stretch;
  }
  .portrait__arch {
    flex: 1;
    width: 100%;
    max-width: 640px;
    aspect-ratio: auto;
    min-height: 560px;
  }
  .portrait figcaption {
    max-width: 640px;
    width: 100%;
  }
}

/* portrait photo: keep Christa's face in frame at every arch shape */
.portrait__arch img.portrait__photo {
  object-position: 40% 42%;
}

/* ---------- type: Bodoni's sturdier cut (option 1, 2026-10-05) ----------
   At display sizes Bodoni Moda's automatic optical size thins the hairlines until letters break up.
   A fixed text-size optical cut keeps the face but gives the thin strokes body. Hanken Grotesk has no
   opsz axis, so it ignores this. */
html { font-variation-settings: "opsz" 16; }
.hero h1 { font-weight: 500; letter-spacing: -0.025em; }


/* phones: the intro is set a touch smaller so it wraps the curve of the lock in a comfortable measure */
@media (max-width: 900px) {
  .hero__foot .lede { font-size: clamp(17px, 4.65vw, 18px); line-height: 1.55; text-wrap: pretty; }
}

/* ---------- Instagram ---------- */

.ig-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
}
/* visible at every width, including phones where the text links hide */
.nav a.nav__ig {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 -8px;
  color: var(--ink);
  transition: color 0.3s;
}
.nav a.nav__ig:hover {
  color: var(--copper);
}
.cta__ig,
.ticket__ig {
  margin: 0;
}
.cta__ig {
  margin-top: 32px;
}
.cta__ig a,
.ticket__ig a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  letter-spacing: 0.02em;
}
.cta__ig a span,
.ticket__ig a span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 2px;
}
.cta__ig a:hover {
  color: var(--ink);
}
.ticket__ig {
  margin-top: 18px;
  color: rgba(243, 237, 228, 0.85);
}
.ticket__ig a:hover {
  color: var(--honey);
}
.cta__ig,
.ticket__ig {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
}
.cta__ig {
  justify-content: center;
}
.ticket__ig-label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(243, 237, 228, 0.6);
  width: 100%;
}
.nav a.nav__ig + a.nav__ig {
  margin-left: -14px;
}
.footer__credit {
  letter-spacing: 0.08em;
}
.cta .cta__ig {
  margin: 32px auto 0;
}

/* larger social links */
.nav a.nav__ig {
  width: 46px;
  height: 46px;
}
.nav a.nav__ig .ig-icon {
  width: 26px;
  height: 26px;
}
.nav a.nav__ig + a.nav__ig {
  margin-left: -10px;
}
.cta__ig .ig-icon,
.ticket__ig .ig-icon {
  width: 26px;
  height: 26px;
}
.cta__ig a,
.ticket__ig a {
  font-size: 18px;
  gap: 12px;
}
.cta__ig,
.ticket__ig {
  gap: 12px 36px;
}
@media (max-width: 420px) {
  .nav a.nav__ig {
    width: 40px;
    height: 40px;
  }
  .nav a.nav__ig .ig-icon {
    width: 24px;
    height: 24px;
  }
}
.cta .cta__textonly {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: rgba(243, 237, 228, 0.95);
}

/* eleven11 credit, matching the studio's mark */
.footer__eleven {
  display: inline-block;
  padding: 0.8rem 0.3rem;
  margin: -0.8rem -0.3rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.12em;
  color: var(--ink);
  text-decoration: none;
  transition: opacity 0.16s ease;
}
.footer__eleven:hover {
  opacity: 0.85;
}
.footer__eleven:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 2px;
}
.footer__elevenmark {
  background: linear-gradient(135deg, #6366f1, #22d3ee);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer__eleven {
  padding: 0.2rem 0.3rem;
  margin: -0.2rem -0.3rem;
  vertical-align: baseline;
  line-height: 1;
}

/* No italics anywhere: accents keep their colour, in the same upright face */
em,
h1 em,
h2 em,
h3 em,
.hero__issue span,
.ledger__num--word,
.studio .area,
.ticket dd.is-empty,
.hero__ig {
  font-style: normal;
}
h1 em,
h2 em,
h3 em {
  font-weight: inherit;
  letter-spacing: inherit;
}

/* "Send by text" at the end of the form, mirroring the appointment card */
.form-send {
  margin: -24px 0 72px;
}
.form-send__btn {
  width: 100%;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 19px;
}
.form-send__note {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-3);
}
.form-send__note button.link {
  background-color: transparent;
  border: 0;
  padding: 0 0 2px;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
}
.form-send__status {
  min-height: 1.2em;
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--copper);
}
.field__optional {
  margin-left: 8px;
  padding: 2px 7px 1px;
  border: 1px solid var(--rule-strong, rgba(26, 21, 18, 0.35));
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--ink-3);
  vertical-align: 1px;
}

/* Preferred date: a clear tappable box that opens the calendar */
.date-pick {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 58px;
  margin-top: 4px;
  padding: 0 16px 0 50px;
  border: 1px solid rgba(26, 21, 18, 0.45);
  cursor: pointer;
  transition: border-color 0.3s, background-color 0.3s;
}
.date-pick:hover,
.date-pick:focus-within {
  border-color: var(--ink);
  background-color: rgba(26, 21, 18, 0.03);
}
.date-pick__icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink);
  pointer-events: none;
}
.field .date-pick input[type="date"] {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 0;
  border: 0;
  box-shadow: none;
  background: transparent;
  font-size: 18px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.date-pick input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}
/* the browser's own calendar button covers the box, so a click anywhere opens it */
.date-pick input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}
.date-pick__text {
  position: absolute;
  left: 50px;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 17px;
  color: var(--ink-2);
  pointer-events: none;
}
/* until a date is chosen, show the prompt instead of an empty dd/mm/yyyy */
.date-pick:not(.is-filled) input[type="date"] {
  color: transparent;
}
.date-pick:not(.is-filled):focus-within input[type="date"] {
  color: var(--ink);
}
.date-pick.is-filled .date-pick__text,
.date-pick:focus-within .date-pick__text {
  display: none;
}