/* ============================================================
   Studio Boe — one stylesheet for the whole site.

   The design brief is "look like the logo", and as of 2026-10-01 the
   logo is going blue. Both of the concepts Cassie picked out ("6.
   inline type" and "18. floral/organic") are the same two colours:

       ivory  #f2ece3   warm paper, in both references
       slate  #2f4a68   the lettering, the bow, everything (a deep take on the logo's #7391b1)

   That's the whole palette. There is no third colour — the olive and
   the dusty rose of the first logo are gone, and nothing here should
   reintroduce a warm accent.

   LIGHT ONLY. There is no dark mode -- see color-scheme below.

   CONTRAST. Every text pair below was measured against WCAG AA before
   it went in. The one deliberate failure is --blue-soft, which only
   reaches 1.8:1 on paper: it is for ORNAMENT ONLY — rules, borders, the
   bow. Anything a person has to read uses --blue-link (6.2:1) or
   darker. If you add a colour, measure it before you use it on text.

   NAMES. The variables say what colour they actually are. The first
   version of this site had a --rose-deep holding a green, which is how
   nobody noticed the site had drifted off the brand for weeks.
   ============================================================ */

:root {
  /* This site is light-only, on purpose -- the brand is ink on warm
     ivory paper and there is no dark version of paper. Declaring it
     here matters beyond the background: without it a phone set to dark
     mode still renders the form fields, dropdowns and scrollbars in
     dark chrome, so the booking page comes out ivory with black inputs
     sitting in it. There used to be a full dark palette below; it was
     inherited from the first version of the site and removed on
     2026-10-01. */
  color-scheme: light;

  /* paper — sampled out of both of Cassie's reference images, which
     agree on it to within a couple of values */
  --paper:        #f2ece3;   /* the page itself */
  --paper-tint:   #e8e0d4;   /* alternating bands, footer */
  --paper-raised: #f9f5ee;   /* form fields — lifts off the page */

  /* ink */
  --ink:          #26323f;   /* body copy and headings   11.4:1 */
  --ink-soft:     #4a5c6f;   /* secondary copy            6.0:1 */
  --ink-faint:    #516479;   /* captions, minutes, fine print 5.1:1 */

  /* the blues */
  --blue:         #2f4a68;   /* 7.7:1 — buttons, eyebrows, the closer */
  --blue-soft:    #9db4cc;   /* ORNAMENT ONLY — see the note above */
  --blue-link:    #35597d;   /* 6.2:1 — links and accents */

  /* hairlines */
  --line:         #ddd3c4;   /* the everyday warm rule */
  --line-blue:    #c3d2e1;   /* the ornamental one */

  --radius: 2px;

  --display: "Cormorant Garamond", ui-serif, Georgia, "Iowan Old Style", serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* One number for the whole vertical rhythm. Sections, the hero and the
     footer all derive from it, so the page can be loosened or tightened
     in one place. */
  --band: clamp(56px, 9vw, 104px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `height: auto` is load-bearing. Every <img> carries width= and height=
   attributes so the browser can reserve space before the file arrives,
   but those become presentational hints — a *definite* height — and CSS
   `aspect-ratio` is ignored whenever width and height are both definite.
   Without this line every cropped image renders at its full intrinsic
   height and the crop does nothing. */
img { max-width: 100%; display: block; height: auto; }

a { color: var(--blue-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--ink); }

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 28px; }
.narrow { max-width: 640px; }

@media (max-width: 560px) { .wrap { padding: 0 20px; } }

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

h1 {
  font-family: var(--display);
  /* 60px is the largest size at which the headline still breaks at its
     comma. At 70px it needed three lines and the middle one was two
     words long. */
  font-size: clamp(40px, 5.2vw, 60px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.012em;
  margin: 0;
  /* `pretty`, not `balance`: balancing this headline evens the line
     LENGTHS, which is what produced the stranded "gel, and". `pretty`
     only guards against a last line left on its own. */
  text-wrap: pretty;
}

h2 {
  font-family: var(--display);
  font-size: clamp(31px, 4.2vw, 43px);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.008em;
  margin: 0 0 14px;
  text-wrap: balance;
}

h3 {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.25;
  margin: 0 0 6px;
}

p { margin: 0 0 18px; max-width: 66ch; }

/* The small tracked-out capital line above a heading. It's the logo's
   own "S T U D I O" treatment, reused as a label. */
.eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 16px;
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-top: 22px;
}

/* ---------- the bow, as punctuation ---------- */

/* Cut out of the logo by tools/make-brand.py. It divides sections and
   sits under the hero headline — the one piece of decoration on the
   site, and it's the studio's own mark rather than a stock flourish. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 0 auto;
  max-width: 340px;
  color: var(--line-blue);
}
.ornament::before, .ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.ornament img { width: 34px; height: auto; }

/* The same thing, but ranged left and only ruled on one side, for the
   hero — a centred ornament under left-aligned text looks adrift. */
.hero-rule {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 34px 0 0;
  max-width: 380px;
  color: var(--line-blue);
}
.hero-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
}
.hero-rule img { width: 30px; height: auto; }

/* ---------- the strip at the very top ---------- */

.preopen {
  background: var(--blue);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 11px 24px;
}

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

header.site {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 20;
}

header.site .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 82px;
  flex-wrap: wrap;
}

.wordmark { display: block; text-decoration: none; }
.wordmark img {
  height: 58px;
  width: auto;
}
@media (max-width: 480px) { .wordmark img { height: 46px; } }

/* Pushed right so the nav and the booking button sit together on the
   right-hand side, with the wordmark alone on the left. */
nav.site { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; margin-left: auto; }

nav.site a {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 0.16s ease;
}
nav.site a:hover { color: var(--ink); }
nav.site a.here { color: var(--blue); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1;
  padding: 16px 30px;
  border-radius: var(--radius);
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--paper);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[aria-disabled="true"] { opacity: 0.5; }

.btn.ghost { background: transparent; color: var(--blue); }
.btn.ghost:hover { background: var(--blue); color: var(--paper); }

.btn.small { font-size: 11px; padding: 11px 18px; letter-spacing: 0.13em; }

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

/* Split hero: words on the left, one big photograph on the right that
   runs to the edge of the window. A centred logo over centred text read
   like a holding page -- the photo is the thing that says "this studio
   is real and here is the work". */
.hero {
  display: grid;
  /* 46vw matches the photo's `sizes` attribute, and stops the photo
     taking 600 of a 1000px window and crushing the headline. */
  grid-template-columns: 1fr minmax(0, min(600px, 46vw));
  gap: 0 70px;
  align-items: center;
  min-height: min(82vh, 760px);
}

/* The left padding puts the text's left edge on the same line as the
   logo and every section below — i.e. where `.wrap` (1020px + 28px
   padding) puts its content. Anything else and the hero floats loose
   of the page's column on wide screens. */
.hero-text {
  padding: 80px 44px 80px max(28px, calc((100vw - 1020px) / 2 + 28px));
  width: 100%;
}
.hero-text > * { max-width: 600px; }

.hero-photo {
  height: 100%;
  min-height: min(82vh, 760px);
  overflow: hidden;
  background: var(--paper-tint);
}
.hero-photo picture { display: block; height: 100%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero-text { padding: 52px 20px 48px; justify-self: stretch; max-width: none; order: 2; }
  .hero-photo { min-height: 0; aspect-ratio: 4 / 3; order: 1; }
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }

/* ---------- generic section ---------- */

section.band { padding: var(--band) 0; }

/* A faint wash so the page has more than one surface. Alternating tone
   does the job the old borders-between-everything did, without drawing
   a line across the page every 300px. */
section.band.tinted { background: var(--paper-tint); }

.section-head { margin-bottom: 42px; }
.section-head p { color: var(--ink-soft); margin: 0; }
.section-head h2 { margin-bottom: 10px; }

/* ---------- the menu ---------- */

.menu { border-top: 1px solid var(--line-blue); }

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--line-blue);
  align-items: baseline;
}

.menu-item .name {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 500;
  line-height: 1.2;
}

.menu-item .price {
  font-family: var(--display);
  font-size: 25px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--blue-link);
  white-space: nowrap;
  text-align: right;
}

.menu-item .blurb {
  grid-column: 1 / 2;
  color: var(--ink-soft);
  font-size: 15.5px;
  margin: 0;
  max-width: 54ch;
}

.menu-item .mins {
  grid-column: 2 / 3;
  text-align: right;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
}

@media (max-width: 560px) {
  .menu-item { grid-template-columns: 1fr; gap: 2px; }
  .menu-item .price, .menu-item .mins { text-align: left; }
  .menu-item .blurb, .menu-item .mins { grid-column: 1; }
  .menu-item .mins { margin-top: 6px; }
}

/* ---------- plain columns ---------- */

/* These used to be bordered, shadowed, rounded cards. On paper they're
   just columns with a rule over each one, which is how a printed page
   would set the same three notes. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 36px;
}

.card { border-top: 1px solid var(--blue); padding-top: 18px; }
.card h3 { font-size: 21px; }
.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

/* ---------- hours ---------- */

.hours { border-top: 1px solid var(--line-blue); max-width: 560px; }

.hours-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-blue);
}
/* The day name shouldn't be squeezed until its note wraps onto three
   lines -- that was tripling the height of every row. Let the day keep
   its natural width and the time keep its own. */
.hours-row .when {
  flex: 0 1 auto;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hours-row .time {
  flex: 0 0 auto;
  font-family: var(--display);
  font-size: 20px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.hours-row.highlight .when { color: var(--blue); }
.hours-row.highlight .time { color: var(--blue-link); }

/* The days she's shut. Deliberately quiet — it's the answer to "can I
   come Monday", not a third of the schedule. */
.hours-closed {
  margin: 16px 0 0;
  font-size: 14px;
  color: var(--ink-faint);
}

@media (max-width: 460px) {
  .hours-row { flex-direction: column; gap: 2px; }
  .hours-row .time { font-size: 18px; }
}

/* ---------- forms ---------- */

form.studio { max-width: 560px; }

.field { margin-bottom: 22px; }

.field label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.field .hint {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-faint);
  display: block;
  margin-top: 3px;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  transition: border-color 0.16s ease;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--blue-soft); }

.field textarea { min-height: 120px; resize: vertical; line-height: 1.6; }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--blue-link);
  outline-offset: 1px;
  border-color: var(--blue-link);
}

/* Side-by-side fields. One of them has a hint line under its label and
   the other doesn't, which would push its input a line lower than its
   neighbour. `subgrid` puts every label on one shared row and every
   input on the next, so they line up whatever the labels say. Browsers
   without subgrid just get the old slightly-uneven version. */
.two-up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0 16px;
}
.two-up .field {
  display: grid;
  grid-row: span 2;
  grid-template-rows: subgrid;
  align-content: end;
}
@media (max-width: 560px) {
  .two-up { grid-template-columns: 1fr; grid-template-rows: none; }
  .two-up .field { display: block; }
}

/* Not shown to people — only to the bots that fill in every field they
   find. A real person never sees this, so anything typed in it is spam. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.note {
  font-size: 15px;
  padding: 16px 18px;
  border-radius: var(--radius);
  margin: 0 0 22px;
  max-width: 560px;
}
.note.good { background: var(--paper-tint); border-left: 2px solid var(--blue); color: var(--ink); }
.note.bad  { background: var(--paper-tint); border-left: 2px solid var(--blue-link); color: var(--blue-link); }
.note.quiet { background: var(--paper-raised); border-left: 2px solid var(--line-blue); color: var(--ink-soft); }

/* ---------- picking a time ---------- */

.slot-picker { margin-top: 4px; }

.slot-empty {
  margin: 0;
  padding: 18px 0;
  font-size: 15px;
  color: var(--ink-faint);
}

.slot-day { margin-bottom: 22px; }

.slot-date {
  margin: 0 0 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
}

.slot-times { display: flex; flex-wrap: wrap; gap: 8px; }

/* Big enough to hit with a thumb. 44px is the floor Apple and Google
   both give for a touch target, and most of these are booked on a
   phone. */
.slot {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  min-height: 44px;
  padding: 11px 16px;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.14s ease, background 0.14s ease, color 0.14s ease;
}
.slot:hover { border-color: var(--blue); }
.slot:focus-visible { outline: 2px solid var(--blue-link); outline-offset: 2px; }

.slot.is-chosen {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--paper);
}

.slot-more { margin-top: 4px; }

/* The privacy line under the booking form. Was three inline styles. */
.form-fine {
  margin: 30px 0 0;
  font-size: 13.5px;
  color: var(--ink-faint);
  max-width: 560px;
}

/* ---------- policies ---------- */

.policy-list { display: grid; }
.policy { padding: 24px 0; border-bottom: 1px solid var(--line-blue); }
.policy:first-child { border-top: 1px solid var(--line-blue); }
.policy h3 { margin-bottom: 4px; }
.policy p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }

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

footer.site {
  border-top: 1px solid var(--line);
  background: var(--paper-tint);
  padding: 56px 0 64px;
  font-size: 14.5px;
  color: var(--ink-soft);
}

footer.site .cols {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
footer.site strong {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
}
footer.site a { color: var(--ink-soft); text-decoration: none; }
footer.site a:hover { color: var(--blue-link); text-decoration: underline; }
footer.site .fine {
  margin-top: 38px;
  padding-top: 22px;
  border-top: 1px solid var(--line-blue);
  font-size: 12.5px;
  color: var(--ink-faint);
}

/* ---------- service cards ---------- */

/* Photograph, then the name and price under it on the page itself.
   The old version boxed each one in a bordered, shadowed, rounded card,
   which put a frame around a photograph that was already a rectangle. */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 34px;
}

.svc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.svc-card:hover { color: inherit; }

.svc-card picture {
  display: block;
  overflow: hidden;
  background: var(--paper-tint);
  border-radius: var(--radius);
}
.svc-card img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.svc-card:hover img { transform: scale(1.035); }

.svc-card-body { padding: 18px 0 0; display: flex; flex-direction: column; flex: 1; }
.svc-card-body h3 { font-size: 24px; margin-bottom: 7px; }
.svc-card-body p { color: var(--ink-soft); font-size: 15px; margin: 0 0 16px; }

.svc-card-price {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--line-blue);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  color: var(--blue-link);
  font-variant-numeric: tabular-nums;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.svc-card-price span {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- the portfolio grid ---------- */

/* Fixed three across rather than auto-fill. There are nine photos, and
   auto-fill picked four columns at desktop width, which left the ninth
   sitting alone on its own row looking like a mistake. */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) { .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.gallery figure {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--paper-tint);
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery figure:hover img { transform: scale(1.04); }

.gallery-note {
  margin: 30px 0 0;
  font-size: 15px;
  color: var(--ink-soft);
  max-width: none;
}

/* ---------- hours beside a photo ---------- */

.hours-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 52px;
  align-items: start;
}
.hours-split .hours { max-width: none; }
.hours-aside img { width: 100%; border-radius: var(--radius); object-fit: cover; }

@media (max-width: 860px) {
  .hours-split { grid-template-columns: 1fr; gap: 32px; }
}

/* ---------- closing band ---------- */

section.band.closer {
  background: var(--blue);
  color: var(--paper);
  text-align: center;
}
section.band.closer .wrap { margin: 0 auto; }
section.band.closer h2 { color: var(--paper); }
section.band.closer p { color: rgba(246, 239, 227, 0.8); margin-left: auto; margin-right: auto; }
section.band.closer .ornament { color: rgba(246, 239, 227, 0.35); margin-bottom: 30px; }
section.band.closer .btn {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--blue);
}
section.band.closer .btn:hover {
  background: transparent;
  border-color: var(--paper);
  color: var(--paper);
}

/* ---------- a photo dropped into a column of prose ---------- */

.wide-photo { margin: 36px 0 38px; }
.wide-photo img { width: 100%; border-radius: var(--radius); }
.wide-photo figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-faint);
  font-style: italic;
}

/* ---------- handing over to a booking tool ---------- */

/* Shown instead of the built-in request form once Cassie's scheduling
   account is live, whichever tool she picks. Every one of them gives
   you a link rather than a real embed — the widget just sends the
   client to the tool's own hosted page — so this panel is what stands
   in for a booking form: it sets expectations, then hands over.
   See BOOKING in content.js. */
.booking-handover {
  border-top: 1px solid var(--blue);
  border-bottom: 1px solid var(--line-blue);
  padding: 32px 0 34px;
  margin: 0 0 30px;
  max-width: 560px;
}
.booking-handover h3 { font-size: 26px; margin-bottom: 10px; }
.booking-handover p { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 20px; }
.booking-handover .btn { margin-bottom: 14px; }
.booking-handover .fineprint {
  font-size: 13px;
  color: var(--ink-faint);
  margin: 0;
}

/* ---------- admin ---------- */

.admin-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.booking {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 14px;
}
.booking.is-new { border-left-color: var(--blue-link); }
.booking.is-confirmed { border-left-color: var(--blue); }
.booking.is-done, .booking.is-declined { opacity: 0.6; }

.booking-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.booking .who { font-family: var(--display); font-size: 25px; font-weight: 500; }
.booking .svc { color: var(--blue-link); font-weight: 600; font-size: 14px; }

/* A built set, itemised under the service name on /admin and on the
   client's confirm page. Only drawn when there's more than one line --
   a bare service would just repeat the heading above it. */
.booking .set-lines {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 13.5px;
  color: var(--ink-faint);
}
.booking .set-lines li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  max-width: 320px;
}
.booking .set-lines span { font-variant-numeric: lining-nums tabular-nums; }
.booking dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 18px;
  margin: 16px 0 0;
  font-size: 15px;
}
.booking dt { color: var(--ink-faint); }
.booking dd { margin: 0; }
.booking .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }

/* Timing: the sticker's record, and fixing it by hand. */
.booking .timing-fix {
  grid-column: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.booking details summary,
.timings summary {
  cursor: pointer;
  color: var(--blue-link);
  font-size: 14px;
}
.booking form.fix {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  margin-top: 10px;
}
.booking form.fix label { font-size: 13px; color: var(--ink-faint); display: grid; gap: 4px; }
.booking form.fix input { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); }

.timings {
  border: 1px solid var(--line-blue);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 24px;
  background: var(--paper-raised);
}
.timings summary { font-size: 15px; font-weight: 600; }
.timings table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14px; }
.timings th { text-align: left; font-weight: 600; color: var(--ink-faint); font-size: 12px; }
.timings th, .timings td { padding: 6px 10px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.timings .fineprint { font-size: 13px; color: var(--ink-faint); margin: 12px 0 0; }
.timings small { color: var(--ink-faint); }
.timings form.add-time {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px 14px; align-items: end; margin: 18px 0 6px;
  padding-top: 16px; border-top: 1px solid var(--line);
}
.timings form.add-time .eyebrow { grid-column: 1 / -1; }
.timings form label { font-size: 13px; color: var(--ink-faint); display: grid; gap: 4px; }
.timings form input, .timings form select {
  font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.timings .entries { list-style: none; padding: 0; margin: 16px 0 0; }
.timings .entries li { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.timings .entry-top { display: flex; justify-content: space-between; gap: 12px; }
.timings .entry-what { color: var(--ink-faint); }
.timings .entries details summary { font-size: 13px; margin-top: 4px; }
.timings form.fix-entry { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; margin-top: 8px; }

/* Clients, referrals, and logging a job already done. */
.timings form.client-form, .booking form.job-form {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px 14px; align-items: end; margin: 12px 0 4px;
}
.timings form .wide, .booking form .wide { grid-column: 1 / -1; }
.booking form.job-form label { font-size: 13px; color: var(--ink-faint); display: grid; gap: 4px; }
.booking form.job-form input, .booking form.job-form textarea,
.timings form textarea {
  font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper); color: var(--ink);
}
.booking .job-details { margin-top: 12px; }
.booking .job-notes { white-space: pre-wrap; }
.timings details.client { padding: 10px 0; border-top: 1px solid var(--line); margin-top: 8px; }
.timings details.client summary { font-size: 15px; }
.timings details.client summary small { font-weight: 400; }
.timings .referrals { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.timings .referrals li { padding: 8px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.timings .ref-state { color: var(--ink-faint); }
.timings .ref-state.owed, .timings .owed { color: var(--blue-link); font-weight: 600; }
.timings .ref-state.given { color: var(--ink); }
.timings form.give { display: flex; gap: 8px; flex-wrap: wrap; }
.timings form.give input { min-width: 240px; }
.timings form.add-client {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: end;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.timings .owed-box { margin: 14px 0 0; }

/* /admin on a phone, which is where it mostly gets used. iOS Safari zooms
   into any field under 16px and doesn't zoom back out, and a thumb needs
   about 44px to hit a button reliably. */
@media (max-width: 760px) {
  #book input, #book select, #book textarea { font-size: 16px; }
  #book input, #book select { min-height: 44px; }
  #book .btn.small { min-height: 44px; }
  #book summary { padding: 10px 0; }
  .timings form.give input { min-width: 0; flex: 1 1 100%; }
}

/* ---------- /clock: one big button, read across the nail table ---------- */

.clock { min-height: 100svh; display: flex; align-items: center; text-align: center; }
.clock .wrap { width: 100%; max-width: 480px; }
.clock-who { font-family: var(--display); font-size: 56px; font-weight: 500; line-height: 1.05; margin-top: 8px; }
.clock-what { color: var(--blue-link); font-weight: 600; font-size: 16px; margin-top: 6px; }
.clock-elapsed { font-family: var(--display); font-size: 72px; font-weight: 400; margin-top: 18px; font-variant-numeric: tabular-nums; }
.clock-detail { color: var(--ink-faint); font-size: 15px; margin-top: 10px; min-height: 1.4em; }
.btn.clock-go { width: 100%; font-size: 20px; padding: 30px 20px; margin-top: 34px; }
/* .btn sets display, which beats the hidden attribute. */
.clock [hidden] { display: none !important; }
.btn.clock-go.is-stop { background: var(--ink); border-color: var(--ink); }
.clock .note { margin-top: 22px; text-align: left; }
.clock-foot { font-size: 13px; color: var(--ink-faint); margin-top: 40px; }

.clock-other { margin-top: 30px; text-align: left; border-top: 1px solid var(--line); padding-top: 18px; }
.clock-other summary { cursor: pointer; color: var(--blue-link); font-size: 15px; font-weight: 600; text-align: center; }
.clock-other form { display: grid; gap: 16px; margin-top: 18px; }
.clock-other label { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.clock-other label span { font-weight: 400; color: var(--ink-faint); font-size: 13px; }
.clock-other select, .clock-other input[type="text"], .clock-other input:not([type]) {
  font: inherit; font-weight: 400; padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--paper-raised); color: var(--ink);
}
.clock-kinds { display: flex; gap: 8px; }
.clock-kind { flex: 1; }
.clock-kind input { position: absolute; opacity: 0; }
.clock-other .clock-kind span {
  display: block; text-align: center; padding: 14px 6px; border: 1px solid var(--line-blue);
  border-radius: var(--radius); color: var(--blue); font-size: 14px; font-weight: 600; cursor: pointer;
}
.clock-other .clock-kind input:checked + span { background: var(--blue); color: var(--paper); border-color: var(--blue); }
.clock-kind input:focus-visible + span { outline: 2px solid var(--blue-link); outline-offset: 2px; }

.tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  white-space: nowrap;
}
.tag.new { background: var(--paper-tint); color: var(--blue-link); border-color: var(--line-blue); }
.tag.confirmed { background: var(--paper-tint); color: var(--blue); border-color: var(--line); }

.empty { color: var(--ink-faint); padding: 56px 0; text-align: center; }

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 50;
  background: var(--paper-raised);
  padding: 10px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--blue);
}

/* ---------- header on a phone ---------- */

/* Sticky is right on a laptop and wrong on a phone: wrapped onto three
   rows it took about a fifth of the screen, permanently. Below 700px it
   scrolls away with everything else and the rows are tightened up. */
@media (max-width: 700px) {
  header.site { position: static; }
  header.site .wrap {
    min-height: 0;
    padding-top: 14px;
    padding-bottom: 14px;
    gap: 12px 16px;
  }
  /* Two rows, not three: wordmark and the booking button share the top
     one, and the page links drop underneath them. */
  .wordmark { order: 1; margin-right: auto; }
  .header-cta { order: 2; }
  nav.site { order: 3; width: 100%; margin-left: 0; gap: 18px; }
  nav.site a { font-size: 11px; letter-spacing: 0.12em; }
}

/* ---------- /admin: block off time ---------- */
.time-off { margin-bottom: 16px; }
.off-day { margin-top: 18px; }
.off-date { margin: 0 0 8px; font-weight: 600; }
.off-windows { display: flex; flex-wrap: wrap; gap: 8px; }
.window {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 56px;
  min-width: 150px;
  padding: 10px 16px;
  text-align: left;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
  cursor: pointer;
}
.window small { font-size: 12px; opacity: 0.75; }
.window.is-off {
  background: transparent;
  border-style: dashed;
  text-decoration: line-through;
}
.window.is-off small { text-decoration: none; }
.window:disabled { opacity: 0.5; cursor: wait; }

.slot-fallback { margin: 6px 0 0; font-size: 15px; }

/* ---------- /admin: confirmation text ---------- */
.message-edit { margin-bottom: 16px; }
.message-edit textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 12px;
  padding: 12px 14px;
  font: inherit;
  font-size: 16px;
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--line);
}
.message-edit h3 { margin: 22px 0 2px; font-size: 16px; }

/* ---------- /admin: cancel, reschedule, texts ---------- */
.booking .danger { color: #8a3b32; border-color: #c9a39e; }
.booking .danger:hover { background: #8a3b32; border-color: #8a3b32; color: var(--paper); }
.booking .actions a.btn { text-decoration: none; }
.booking .texts { margin-top: 14px; }
.booking .texts summary { font-size: 14px; }
.booking .texts .actions { margin-top: 10px; }
.booking .reschedule { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ---------- one appointment (/appointment, owner only) ---------- */
.appt-name { margin: 6px 0 2px; }
.appt-when { margin: 0 0 6px; font-family: var(--display); font-size: 22px; color: var(--ink-soft); }
.appt-contact { margin: 0 0 22px; font-size: 15px; }
.appt-card { margin: 0 0 16px; padding: 18px 20px; background: var(--paper); border: 1px solid var(--line-blue); border-radius: 10px; }
.appt-card h3 { margin: 0 0 10px; font-size: 22px; }
.appt-lines { list-style: none; margin: 0 0 8px; padding: 0; }
.appt-lines li, .appt-credit { display: flex; justify-content: space-between; gap: 16px; padding: 4px 0; }
.appt-charge { margin: 10px 0 0; font-size: 20px; }
.appt-charge strong { font-family: var(--display); font-size: 30px; color: var(--blue); }
.appt-sub { display: block; font-size: 13px; color: var(--ink-faint); }
#after-status.appt-sub { display: inline; margin-left: 10px; }
.appt-flag { margin: 12px 0 0; padding: 10px 12px; background: #f3e6d6; border-radius: 8px; font-size: 14.5px; }
.appt-notes { margin: 6px 0 0; white-space: pre-wrap; color: var(--ink); }
.appt-empty { color: var(--ink-faint); margin: 0; }
.appt-bits { margin: 0; padding-left: 18px; }
.appt-more { margin-top: 12px; }
.appt-more ul { padding-left: 18px; }
.appt-more li { margin: 8px 0; }
.appt .job-form { display: grid; gap: 14px; }
.appt .job-form label { display: grid; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.appt .job-form input, .appt .job-form textarea { font: inherit; padding: 10px 12px; border: 1px solid var(--line-blue); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
.appt .job-form input[type=number] { max-width: 160px; }
.appt .job-form button { justify-self: start; }