/* Verrow Salon, website concept for Protean Hollow LLC.
   Fictional business. Not a real salon.

   The direction is the room: warm plaster, one window, one chair. Everything
   here is either bone or plaster, and the only saturated thing on the page is
   the clay accent, used at the size of a word. Restraint is the brand, so the
   discipline has to show up as precision in spacing and type rather than as
   absence of content. */

/* ---------- tokens ---------- */

:root {
  --bone: #f8f5f0;
  --plaster: #ece4d9;
  --ink: #211e1a;
  --ink-soft: #6b625a;
  --clay: #9a7c5e;
  --rule: #ddd4c6;
  --rule-faint: #e8e0d5;

  --measure: 62ch;
  --shell: 1220px;
  --gutter: clamp(1.5rem, 5vw, 4.5rem);

  /* One vertical rhythm value for every band, so the page breathes evenly
     without each section inventing its own spacing. */
  --band: clamp(4.5rem, 9vw, 8rem);
}

/* ---------- reset ---------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* height:auto matters. The width and height attributes on every img here become
   presentational hints, and a hinted height of 1024px silently beats any
   aspect-ratio set in CSS. Frames that need a crop set their own ratio and give
   the image height:100% below. */
img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 { margin: 0; font-weight: 300; }

p { margin: 0; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bone);
  padding: 0.75rem 1.25rem;
  z-index: 100;
}

.skip:focus { left: 0; }

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

/* ---------- shared ---------- */

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

/* Letterspaced small caps. The only utility face on the page, used for every
   label, role and caption so the eye learns one signal for "this is an aside". */
.label {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0;
}

.band { padding-block: var(--band); }

.band--plaster { background: var(--plaster); }

.section__head {
  max-width: var(--measure);
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section__head .label { margin-bottom: 1.25rem; }

.section__lede {
  font-size: 1.0625rem;
  color: var(--ink-soft);
  max-width: 52ch;
}

.fineprint {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- hero ---------- */
/* Half the screen is the room. The photograph is the argument the copy is
   making, so it gets equal billing rather than a caption-sized crop lower down. */

.hero {
  display: grid;
  grid-template-columns: 1fr;
}

.hero__plate {
  order: -1;
  background: var(--rule-faint);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.hero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 38%;
}

.hero__panel {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding: clamp(2.5rem, 7vw, 5rem) var(--gutter);
}

.wordmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2.25rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.18em;
  margin: 0 0 0.75rem;
  text-indent: 0.18em;
}

.hero__sub { color: var(--ink-soft); }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.nav a {
  text-decoration: none;
  color: var(--ink-soft);
  padding-bottom: 0.35rem;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

.nav a:hover { color: var(--ink); border-bottom-color: var(--clay); }

.hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.1rem, 4.4vw, 3.5rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  max-width: 20ch;
  margin-bottom: 1.75rem;
}

.lede {
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 2.25rem;
}

.hero__foot { color: var(--ink-soft); }

/* The one button shape on the page. A rule under a word, not a filled pill:
   a salon that promises a quiet room should not shout at the door. */
.cta {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ink);
  transition: color 0.25s ease, border-color 0.25s ease;
}

.cta:hover { color: var(--clay); border-bottom-color: var(--clay); }

.cta--solid {
  font-family: inherit;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bone);
  padding: 1rem 2.25rem;
  cursor: pointer;
}

.cta--solid:hover { background: var(--clay); border-color: var(--clay); color: var(--bone); }

/* ---------- services ---------- */
/* Cutting, color and care are parallel choices rather than a sequence, so they
   sit side by side and a guest scanning for one price sees all three at once. */

.menu {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.menu__head {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.2;
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink);
}

.price { margin: 0; }

.price__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule-faint);
}

.price__row:last-child { border-bottom: 0; }

.price dt { font-size: 1rem; }

.price__note {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  max-width: 34ch;
}

.price dd {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.375rem;
  white-space: nowrap;
}

/* ---------- creed ---------- */
/* The single change of ground on the page, and the only place the display face
   is set in italic. It earns the interruption by carrying the sentence that
   explains the price of a haircut. */

.creed {
  background: var(--plaster);
  padding-block: var(--band);
}

.creed__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}

.creed__plate {
  margin: 0;
  max-width: 22rem;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--rule-faint);
}

.creed__plate img { width: 100%; height: 100%; object-fit: cover; }

.creed__quote { margin: 0; }

.creed__quote p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.25;
  max-width: 18ch;
  margin-bottom: 1.75rem;
}

.creed__quote cite { font-style: normal; display: block; }

/* ---------- stylists ---------- */

.people {
  display: grid;
  gap: clamp(2.5rem, 5vw, 3.5rem);
}

.person__plate {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--rule-faint);
  margin-bottom: 1.75rem;
}

.person__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform 0.6s ease;
}

.person:hover .person__plate img { transform: scale(1.02); }

.person h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  line-height: 1.2;
}

.person__role { margin: 0.5rem 0 1rem; }

.person__bio { font-size: 0.9375rem; color: var(--ink-soft); }

/* ---------- booking ---------- */

.booking {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.booking__aside .label { margin-bottom: 1.25rem; }

.booking__call { margin-top: 1.75rem; }

.booking__call a { color: var(--ink); }

.form {
  display: grid;
  gap: 1.5rem 1.75rem;
}

.field { display: flex; flex-direction: column; }

.field label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}

.field__opt { text-transform: none; letter-spacing: 0.05em; font-size: 0.75rem; }

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  padding: 0.6rem 0;
  width: 100%;
}

.field textarea { resize: vertical; line-height: 1.7; }

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 0.7rem center, right 0.35rem center;
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
  padding-right: 1.75rem;
}

.field input::placeholder,
.field textarea::placeholder { color: #a89d90; }

.field .is-invalid,
.field input.is-invalid { border-bottom-color: #a8443a; }

.field__error {
  font-size: 0.8125rem;
  color: #a8443a;
  margin-top: 0.5rem;
}

.form__foot { gap: 1.25rem; align-items: flex-start; }

.form__foot .fineprint { margin-top: 0.25rem; }

.form__status {
  font-size: 0.9375rem;
  color: var(--ink);
  border-left: 1px solid var(--clay);
  padding-left: 1rem;
}

.form__status.is-error { border-left-color: #a8443a; color: #a8443a; }

/* ---------- visit ---------- */

.visit {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.visit__block .label { margin-bottom: 1.25rem; }

.hours { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.hours th,
.hours td {
  text-align: left;
  font-weight: 300;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--rule-faint);
}

.hours td { text-align: right; color: var(--ink-soft); }

.hours tr:last-child th,
.hours tr:last-child td { border-bottom: 0; }

address { font-style: normal; font-size: 0.9375rem; }

.visit__line {
  font-size: 0.9375rem;
  color: var(--ink-soft);
  margin-top: 1.25rem;
}

.visit__line a { color: var(--ink); }

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

.footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 6vw, 5rem);
}

.footer__mark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  letter-spacing: 0.18em;
  text-indent: 0.18em;
  margin-bottom: 1rem;
}

.footer__line { font-size: 0.9375rem; margin-bottom: 1.5rem; }

.footer__line a { color: var(--ink); }

.footer__note {
  font-size: 0.8125rem;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ---------- wide ---------- */

@media (min-width: 600px) {
  .menu { grid-template-columns: repeat(2, 1fr); }
  .people { grid-template-columns: repeat(2, 1fr); }
  .visit { grid-template-columns: repeat(2, 1fr); }
  .form { grid-template-columns: repeat(2, 1fr); }
  .field--wide { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  /* The room takes the right side of the screen and runs the full height of the
     viewport. Below this width it goes back on top, where a tall photograph
     works better than a short one. */
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
    min-height: 100svh;
  }

  .hero__plate { order: 0; aspect-ratio: auto; height: 100svh; position: sticky; top: 0; }

  .hero__plate img { object-position: 50% 50%; }

  /* Centre the stack inside its column rather than letting it hug the left
     gutter, so the empty space reads as margin on both sides instead of a gap
     on one. */
  .hero__panel {
    justify-content: center;
    padding-block: var(--band);
    max-width: 44rem;
    margin-inline: auto;
  }

  .menu { grid-template-columns: repeat(3, 1fr); }
  .people { grid-template-columns: repeat(3, 1fr); }
  .visit { grid-template-columns: repeat(3, 1fr); }

  .creed__inner { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }

  .booking { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
}

@media (min-width: 1100px) {
  .menu { gap: clamp(3rem, 4vw, 4.5rem); }
}

/* ---------- concept backlink ---------- */

/* Deliberately foreign to this site's design system: it is a frame around the
   demonstration, not part of it, so it uses none of the type, colour or radius
   above. Fixed because the footer credit sits at the bottom of a long page,
   which in practice means a visitor has no route back at all. */
.ph-backlink {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(18, 18, 20, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Arial, sans-serif;
  font-size: 12.5px;
  line-height: 1;
  color: #d4d4d8;
  text-decoration: none;
}

.ph-backlink strong { color: #fff; font-weight: 600; }
.ph-backlink:hover { background: rgba(18, 18, 20, 0.98); color: #fff; }

@media (max-width: 480px) {
  .ph-backlink { right: 10px; bottom: 10px; padding: 8px 12px; font-size: 11.5px; }
}