/* Face: card — The Kae Effect
   ============================================================================
   A nail artist's service menu, designed as a printed one rather than laid out
   as a form.

   Three decisions this file is built on:

   1. THE TYPE IS THE IDENTITY. Her logo is a high-contrast serif name over
      letterspaced caps. The page repeats exactly that pairing — Cormorant
      Garamond at 300 for anything that carries meaning, Jost in wide caps for
      anything that labels. The face brings its own fonts (FACE_FONTS in
      faces.mjs) because borrowing the Look's slab is what made the first
      attempt look like every other site on the estate.

   2. THE MENU IS NOT IN A BOX. Hairlines and space, no card, no border, no
      radius. That only works if the spacing is exact, which is the point —
      there is nothing to hide behind.

   3. ONE LOUD THING. The swatch band at the top, made entirely of her own
      work. Everything after it is quiet.

   Colours are theme tokens throughout; no hex is written here, so the next
   salon to pick this face gets its own brand rather than hers. */

/* --- type ---------------------------------------------------------------- */
/* Set on the body class. body sits below :root, so these win by inheritance
   over the Look's variables without a specificity fight. */
/* Fonts only. Setting a colour here was a mistake worth recording: the body is
   the ancestor of the kit's masthead and footer, which are DARK surfaces, so
   painting it with the light-surface foreground turned the nav links dark-on-
   dark at 1.1:1 and the footer motto at 1.06:1. A face composes the page
   between the chrome; it does not get to recolour the chrome from above. Each
   section below paints its own surface and its own text together. */
body.face-card {
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --body: 'Jost', system-ui, -apple-system, sans-serif;
  --mono: 'Jost', system-ui, -apple-system, sans-serif;
}
.face-card .wrap { width: min(1080px, 100% - 2.4rem); margin-inline: auto; }
.face-card .kc-lbl {
  display: block; font-family: var(--body); font-size: .64rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--accent-text);
}


/* --- the chrome the face sits between ------------------------------------- */
/* On this face the logo is the hero, at full size. Repeating it as a 44px
   chip in the bar above would be a second, worse copy of the same thing — and
   a stacked lockup squeezed into 44px is the "logo so small you can't read it"
   problem by another route. So the bar carries the name as type instead, set
   in the face's own letterspaced caps, and the mark appears exactly once per
   screen: big in the hero, and again at readable size in the footer.

   Nothing here sets a colour. The masthead and footer are the kit's dark
   surfaces and they already paint their own text; a face that repaints them
   from above is how this file previously put nav links at 1.1:1. */
.face-card .masthead .brand-logo, .face-card .masthead .mark { display: none; }
.face-card .masthead .brand-txt b {
  font-family: var(--body); font-weight: 400; font-size: .92rem;
  letter-spacing: .34em; text-transform: uppercase;
}
.face-card .footer .brand-logo { height: auto; width: 190px; max-width: 62vw; }

/* The kit sets the tagline as a pull quote attributed to the owner. That works
   for a breeder's line about their dogs; set against a list of services it
   reads as a person being quoted saying "Hair · Nails · Brows · Skin". This
   face already opens with the same line as the hero's eyebrow, where it is
   labelled rather than quoted, so both copies of the quote come out. */
.face-card .masthead .motto, .face-card .footer .footer-motto { display: none; }

/* The kit's nav call-to-action is a pill. Nothing else on this face has a
   radius — not the hero buttons, not the swatch band, not the menu. */
.face-card .nav .nav-cta { border-radius: 0; }

/* --- the hero ------------------------------------------------------------- */
/* The signature. A dark full-bleed station towel with her tools laid on it,
   her mark centred over the top.

   It is drawn (tools/make-card-tools.mjs), not photographed, and that is the
   whole reason it exists: this face was built for someone still in school who
   has no product photography, and every stock flat-lay of brass shears on
   charcoal is on a thousand other salon sites already. A hero that depends on
   a picture she does not have is a hero that ships as a grey box.

   The drawing is applied as a MASK, not as a background image, so the SVG
   contributes shape only and the colour comes from the theme's accent. The
   next salon to take this face gets its own palette on the same tools instead
   of inheriting hers — which is the rule the rest of this file follows too. */
.face-card .kc-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--marsh); color: var(--on-dark);
  min-height: 74svh; display: grid; align-items: center;
  padding: clamp(4rem, 11vw, 7.5rem) 0 clamp(3.4rem, 9vw, 6rem);
}
@supports not (min-height: 1svh) { .face-card .kc-hero { min-height: 74vh; } }
@media (min-width: 860px) { .face-card .kc-hero { min-height: min(86svh, 780px); } }

.face-card .kc-hero-art {
  position: absolute; inset: 0; z-index: 0; background: var(--accent-text-dark);
  -webkit-mask: url(/assets/face-card-tools.svg) center / cover no-repeat;
          mask: url(/assets/face-card-tools.svg) center / cover no-repeat;
  opacity: .5;
}
/* Cover on a portrait viewport crops to the middle vertical strip, which is
   the part of the lay deliberately left sparse for the type — so a phone would
   get the empty third. Slide the crop left onto the shears and the brush. */
@media (max-width: 700px) {
  .face-card .kc-hero-art {
    -webkit-mask-position: 26% 50%; mask-position: 26% 50%; opacity: .42;
  }
}

/* A halo, not a curtain. It darkens the middle where the words are and lets
   the drawing keep its full strength at the edges; a flat scrim strong enough
   to carry text would have erased the tools everywhere. */
.face-card .kc-hero-scrim {
  position: absolute; inset: -10%; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 62% 54% at 50% 50%,
              var(--marsh) 0%, color-mix(in srgb, var(--marsh) 82%, transparent) 46%, transparent 74%);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .face-card .kc-hero-scrim { background: radial-gradient(ellipse 62% 54% at 50% 50%, var(--marsh) 0%, transparent 76%); opacity: .92; }
}

.face-card .kc-hero-in { position: relative; z-index: 2; text-align: center; }
.face-card .kc-hero .kc-lbl { color: var(--accent-text-dark); }

/* The mark is the display type. Her logo is a lockup, not a badge, so it is
   set at headline size and nothing else competes with it — no second heading,
   no rule, no card. A site with no logo uploaded falls back to the name in the
   same serif at the same size, so the composition holds either way. */
.face-card .kc-mark { margin: clamp(1.4rem, 3vw, 2.2rem) 0 0; line-height: 1; }
.face-card .kc-mark img {
  display: block; margin: 0 auto; width: min(560px, 84%); height: auto;
}
.face-card .kc-mark span {
  display: block; font-family: var(--display); font-weight: 300; color: var(--on-dark);
  font-size: clamp(3rem, 10vw, 6.5rem); letter-spacing: -.02em; text-wrap: balance;
}
.face-card .kc-hero-in > p {
  max-width: 42ch; margin: clamp(1.4rem, 3.5vw, 2.2rem) auto 0;
  color: var(--on-dark-mut); font-size: 1.03rem; line-height: 1.8;
}

.face-card .kc-acts {
  display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
@media (max-width: 520px) {
  .face-card .kc-acts { flex-direction: column; align-items: stretch; max-width: 300px; margin-inline: auto; }
}
.face-card .kc-acts a {
  font-family: var(--body); font-size: .68rem; letter-spacing: .22em;
  text-transform: uppercase; font-weight: 500; text-decoration: none;
  padding: 1.05rem 2.2rem; border: 1px solid transparent;
}
.face-card .kc-acts .kc-go { background: var(--rust); color: var(--on-accent, #fff); }
.face-card .kc-acts .kc-go:hover { background: var(--rust-hi); }
.face-card .kc-acts .kc-alt { color: var(--on-dark); border-color: color-mix(in srgb, var(--on-dark) 45%, transparent); }
@supports not (border-color: color-mix(in srgb, red 50%, transparent)) {
  .face-card .kc-acts .kc-alt { border-color: var(--marsh-3); }
}
.face-card .kc-acts .kc-alt:hover { border-color: var(--on-dark); }

/* --- the swatch band ------------------------------------------------------ */
/* Five finishes butted together with no gutter, the way a swatch card is
   printed. It used to open the page; now it lands directly under the hero, so
   the sequence is statement, then proof, then prices. Shorter than it was —
   the hero is the loud thing on this page and the band is corroborating it. */
.face-card .kc-swatch {
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: clamp(140px, 22vw, 260px); width: 100%;
}
.face-card .kc-swatch span {
  display: block; background-size: cover; background-position: center;
  background-color: var(--canvas-2);
}
/* Below 620px five slivers are unreadable, so it drops to three wider ones. */
@media (max-width: 620px) {
  .face-card .kc-swatch { grid-template-columns: repeat(3, 1fr); height: 150px; }
  .face-card .kc-swatch span:nth-child(n+4) { display: none; }
}

/* --- the opening --------------------------------------------------------- */
/* This block used to carry the name, the tagline and the intro. The hero says
   all three now, so what is left is the one line that introduces the menu —
   kept small on purpose. Repeating the headline here is what made the home
   page read as a worse copy of the services page. */
.face-card .kc-open {
  padding: clamp(2.6rem, 6vw, 4.4rem) 0 clamp(1.2rem, 3vw, 2rem);
  background: var(--canvas); color: var(--on-light); text-align: center;
}
.face-card .kc-open h2 {
  font-family: var(--display); font-weight: 300; color: var(--on-light);
  font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -.015em;
  margin: .8rem 0 0; text-wrap: balance;
}
.face-card .kc-open p {
  max-width: 46ch; margin: 1.1rem auto 0; line-height: 1.75;
  color: var(--on-light-mut); font-size: 1.02rem;
}

/* --- the menu ------------------------------------------------------------ */
.face-card .kc-body { background: var(--canvas); color: var(--on-light); }
.face-card .kc-menu { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.face-card .kc-group { padding: clamp(1.8rem, 5vw, 3rem) 0; border-top: 1px solid var(--canvas-3); }
.face-card .kc-group:first-child { border-top: 0; }

.face-card .kc-ghead h2 {
  font-family: var(--display); font-weight: 300; color: var(--on-light);
  font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.05; margin: 0;
  letter-spacing: -.01em;
}
.face-card .kc-ghead p {
  color: var(--on-light-mut); font-size: .95rem; line-height: 1.65;
  margin: .6rem 0 0; max-width: 34ch;
}
/* On a wide screen the heading holds its own column so the eye reads straight
   down the service names instead of stepping around headings.

   The heading used to be sticky. It was not worth it: a short heading beside a
   long list slid out of its own grid row and printed itself across the proof
   photographs below — "root touch-up to a full head of lightening" laid over
   the pictures of the work. A heading that stays where it was put cannot do
   that. */
@media (min-width: 860px) {
  .face-card .kc-group { display: grid; grid-template-columns: 1fr 1.55fr; gap: 3.2rem; align-items: start; }
  .face-card .kc-strip { grid-column: 1 / -1; margin-top: 0; }
}

.face-card .kc-rows { display: grid; }
/* Name, leader, figure. The dotted leader is a real element rather than a
   border, so it stretches between the two and stops cleanly at both ends —
   which is what makes it read as a printed menu instead of an underline. */
.face-card .kc-row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline;
  gap: 0 .7rem; padding: .85rem 0;
}
.face-card .kc-row + .kc-row { border-top: 1px solid var(--canvas-2); }
.face-card .kc-n {
  font-family: var(--display); font-size: 1.3rem; font-weight: 400;
  color: var(--on-light); line-height: 1.2;
}
.face-card .kc-n i {
  display: block; font-style: normal; font-family: var(--body); font-weight: 300;
  font-size: .84rem; color: var(--on-light-mut); margin-top: .25rem; letter-spacing: .01em;
}
.face-card .kc-lead {
  border-bottom: 1px dotted var(--canvas-3); transform: translateY(-.3em); min-width: 1.5rem;
}
.face-card .kc-v {
  font-family: var(--body); font-variant-numeric: tabular-nums; font-weight: 500;
  font-size: .95rem; letter-spacing: .06em;
  color: var(--accent-text); white-space: nowrap; text-align: right;
}
/* The time sits under the price, quieter and in the label face — the same
   relationship the service name has with its own one-line summary, so the two
   columns of the menu read at the same two levels. */
.face-card .kc-v i {
  display: block; font-style: normal; font-weight: 400; font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--on-light-mut);
  margin-top: .2rem;
}

/* Proof: a thin strip, not a grid. The menu is the object; these corroborate. */
/* Two across on a phone, four above it. Four 85px squares on a 390px screen is
   a row of thumbnails nobody can see the work in — and the work is the point. */
/* Sized from how many pictures there actually are (--n, set on the element),
   not always four: three photographs in a four-column grid left a hole at the
   end that read as a missing image. */
.face-card .kc-strip { display: grid; grid-template-columns: repeat(min(var(--n, 4), 2), 1fr); gap: 3px; margin-top: 1.4rem; }
/* A group with two photographs gets two photographs' worth of width, not two
   half-page squares. The strip corroborates the menu; it does not outrank it. */
/* Three photographs in a two-column phone grid leave the third stranded at half
   width — the same hole the desktop grid used to have. The odd one out spans
   instead, as a band. */
@media (max-width: 619px) {
  .face-card .kc-strip figure:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 2; }
}
@media (min-width: 620px) {
  .face-card .kc-strip {
    grid-template-columns: repeat(var(--n, 4), 1fr);
    max-width: calc(var(--n, 4) / 4 * 100%);
  }
}
.face-card .kc-strip figure { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--canvas-2); }
.face-card .kc-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- her ----------------------------------------------------------------- */
.face-card .kc-her {
  display: grid; gap: 1.6rem; align-items: center;
  padding: clamp(2rem, 6vw, 3.6rem) 0; border-top: 1px solid var(--canvas-3);
}
@media (min-width: 780px) { .face-card .kc-her { grid-template-columns: .62fr 1.38fr; gap: 3rem; } }
.face-card .kc-her figure { margin: 0; aspect-ratio: 3/4; overflow: hidden; background: var(--canvas-2); }
/* Bias the crop upward. A 3:4 window over a portrait taken at arm's length
   centres on the sitter's chest, which is a photograph of a shirt. */
.face-card .kc-her img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.face-card .kc-hertx h2 {
  font-family: var(--display); font-weight: 300; color: var(--on-light);
  font-size: clamp(1.9rem, 4.4vw, 2.7rem); margin: .7rem 0 .4rem; line-height: 1.05;
}
.face-card .kc-hertx p { line-height: 1.8; color: var(--on-light-mut); max-width: 50ch; }

/* --- the ask ------------------------------------------------------------- */
.face-card .kc-ask {
  background: var(--marsh); color: var(--on-dark); text-align: center;
  padding: clamp(2.4rem, 7vw, 4.5rem) 0;
}
.face-card .kc-ask .kc-lbl { color: var(--accent-text-dark); }
.face-card .kc-ask h2 {
  font-family: var(--display); font-weight: 300; color: var(--on-dark);
  font-size: clamp(2rem, 5.4vw, 3.2rem); margin: .8rem 0 0; line-height: 1.05;
}
.face-card .kc-ask p { max-width: 44ch; margin: 1rem auto 0; color: var(--on-dark-mut); line-height: 1.75; }
.face-card .kc-btn {
  display: inline-block; margin-top: 1.8rem; background: var(--rust); color: var(--on-accent, #fff);
  text-decoration: none; padding: 1.05rem 2.4rem; font-family: var(--body); font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; font-weight: 500;
}
.face-card .kc-btn:hover { background: var(--rust-hi); }