/* Wren Hair Studio · site.css
   Editorial move on warm white: a magazine column with margin facts,
   ink hairlines instead of boxes, pale sage bands for the hours and the
   booking note, deep sage kept for actions only. One trait borrowed from
   the catalog move: hairline price rows with prices aligned right.
   Mobile first; the 12-column grid starts at 60em. */

/* ---------- 1. Tokens ---------- */

:root {
  /* Palette: warm white, sage, ink */
  --color-bg: #fbfaf6;
  --color-fg: #1c2321;
  --color-muted: #4f5a55;
  --color-surface: #e6ece3;
  --color-accent: #3d5a47;
  --color-accent-fg: #fbfaf6;
  --color-border: #c3ccc4;
  --color-focus: #3d5a47;
  --rule: #1c2321;
  --rule-soft: rgba(28, 35, 33, 0.25);

  /* Type: Epilogue headings and figures, Newsreader for reading */
  --font-heading: "Epilogue", Arial, sans-serif;
  --font-body: "Newsreader", Georgia, serif;
  --weight-heading: 700;
  --leading-body: 1.6;
  --leading-heading: 1.08;
  --measure: 62ch;

  --step-0: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-1: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-display: clamp(2.2rem, 1.4rem + 3.6vw, 4.25rem);
  /* Captions and notes: never below 15 px (Newsreader runs small) */
  --step-caption: clamp(0.9375rem, 0.91rem + 0.12vw, 1rem);
  --leading-caption: 1.45;

  /* Shape */
  --radius: 2px;
  --wrap-max: 76rem;
}

/* ---------- 2. Base type ---------- */

body {
  font-optical-sizing: auto;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

h1 {
  font-size: var(--step-display);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-inline-size: 18ch;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-1);
}

abbr[title] {
  text-decoration: none;
}

.standfirst {
  font-size: var(--step-1);
  line-height: 1.45;
  max-inline-size: 40ch;
}

/* One caption style for every note, role and label */
.caption,
.small-print {
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
  color: var(--color-muted);
}

/* ---------- 3. Header and navigation ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
}

.site-header__inner {
  padding-block: var(--space-2xs);
}

.site-brand {
  gap: 0.6rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: var(--step-1);
}

.site-brand img {
  width: 2.2rem;
  height: auto;
}

.site-nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}

.nav-toggle {
  border-color: var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

/* The phone's one-tap call link; the full nav carries the rest on wide screens */
.header-call {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-inline-start: auto;
  padding: 0 0.8rem;
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-fg);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}

.header-call:hover {
  background: var(--color-fg);
}

@media (max-width: 47.99em) {
  .site-header__inner {
    column-gap: 0.5rem;
  }

  .site-brand {
    font-size: 1.1rem;
    gap: 0.45rem;
  }

  .site-brand img {
    width: 1.75rem;
  }

  .nav-toggle {
    padding-inline: 0.75rem;
  }

  .site-nav ul {
    gap: 0;
    padding-block: 0 var(--space-2xs);
  }

  .site-nav li + li {
    border-top: 1px solid var(--rule-soft);
  }
}

@media (min-width: 48em) {
  .header-call {
    display: none;
  }
}

/* ---------- 4. Buttons and links ---------- */

.button {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
  padding: 0.7rem 1.2rem;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.button:hover {
  background: var(--color-fg);
  border-color: var(--color-fg);
  color: var(--color-bg);
  text-decoration: none;
}

.button--quiet {
  background: transparent;
  color: var(--color-accent);
}

.button--quiet:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-fg);
}

.actions {
  --cluster-space: var(--space-xs);
}

.more-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1rem;
}

/* ---------- 5. Layout: the editorial grid ---------- */

.layout {
  display: grid;
  gap: var(--space-m);
}

.layout > * {
  min-width: 0;
}

/* A section opens on an ink rule across the column */
.ruled {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-m);
}

.section {
  --section-space: var(--space-xl);
}

@media (min-width: 60em) {
  .layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-l);
  }

  .col-main  { grid-column: 1 / span 7; }
  .col-wide  { grid-column: 1 / span 8; }
  .col-side  { grid-column: 9 / span 4; }
  .col-head  { grid-column: 1 / span 5; }
  .col-tail  { grid-column: 7 / span 6; }
  .col-label { grid-column: 1 / span 3; }
  .col-body  { grid-column: 4 / span 7; }
  .col-list  { grid-column: 4 / span 6; }
  .col-note  { grid-column: 10 / span 3; }
  .col-full  { grid-column: 1 / -1; }
}

/* Margin notes: muted; in the margin on wide screens, set off by a short rule */
.margin-note {
  color: var(--color-muted);
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
}

.margin-note p + p {
  margin-top: var(--space-2xs);
}

@media (min-width: 60em) {
  .margin-note {
    align-self: start;
    border-top: 1px solid var(--rule-soft);
    padding-top: var(--space-xs);
  }
}

/* ---------- 6. Bands (pale sage) ---------- */

.band {
  background: var(--color-surface);
  padding-block: var(--space-l);
}

.band h2 {
  font-size: var(--step-2);
}

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

.band--book h2 {
  font-size: var(--step-3);
  max-inline-size: 16ch;
}

/* ---------- 7. Openings (the top of each page) ---------- */

.opening {
  display: grid;
  gap: var(--space-m);
  padding-block: var(--space-l) var(--space-xl);
}

.opening__wren {
  width: 4.5rem;
  height: auto;
}

/* Wide: text on the left; the wren perches directly on the two prices */
@media (min-width: 60em) {
  .opening {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 1fr auto;
    column-gap: var(--space-l);
    padding-block: var(--space-2xl) var(--space-xl);
  }

  .opening__text {
    grid-column: 1 / span 7;
    grid-row: 1 / span 2;
  }

  .opening__wren {
    grid-column: 9 / span 4;
    grid-row: 1;
    align-self: end;
    width: 8.5rem;
  }

  .opening__facts {
    grid-column: 9 / span 4;
    grid-row: 2;
  }
}

/* Margin facts: a price set as large as a heading */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
  gap: var(--space-s) var(--space-m);
}

.facts > div {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-2xs);
}

.facts dt {
  color: var(--color-muted);
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
}

.facts dd {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--step-4);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.facts .from {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-0);
  letter-spacing: 0;
  color: var(--color-muted);
}

@media (min-width: 60em) {
  .opening__facts {
    grid-template-columns: 1fr;
  }
}

.page-intro {
  padding-block: var(--space-l) var(--space-l);
}

@media (min-width: 60em) {
  .page-intro {
    padding-block: var(--space-2xl) var(--space-l);
  }
}

/* An intro with the wren: above the h1 on a phone; on wide screens it
   sits in the right half, standing on the line of the h1's last row. */
.intro-grid {
  display: grid;
  gap: var(--space-m);
}

.intro-grid__wren {
  width: 4rem;
  height: auto;
}

@media (min-width: 60em) {
  .intro-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--space-l);
  }

  .intro-grid > h1,
  .intro-grid > .standfirst {
    grid-column: 1 / span 7;
  }

  .intro-grid > h1 {
    grid-row: 1;
  }

  .intro-grid > .standfirst {
    grid-row: 2;
  }

  .intro-grid__wren {
    grid-column: 9 / span 4;
    grid-row: 1;
    align-self: end;
    width: 10rem;
    margin-bottom: 0.35rem;
  }
}

/* ---------- 8. The seven-day hours strip (signature) ----------
   Tight rows on phones and tablets; seven equal cells from 60em. */

.week {
  display: grid;
  margin-top: var(--space-s);
  max-inline-size: 32rem;
}

.week li {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto;
  align-items: baseline;
  gap: var(--space-xs);
  padding-block: 0.45rem;
  border-top: 2px solid transparent;
  box-shadow: inset 0 1px 0 var(--rule-soft);
  max-inline-size: none;
}

.week__day {
  font-family: var(--font-heading);
  font-weight: 700;
}

.week__time {
  font-variant-numeric: tabular-nums;
}

.week .is-closed .week__time {
  color: var(--color-muted);
}

.week .is-late {
  border-top-color: var(--color-accent);
  box-shadow: none;
}

.week__note {
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.875rem;
}

@media (min-width: 60em) {
  .week {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-s);
    max-inline-size: none;
  }

  .week li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding-block: var(--space-xs) 0;
    box-shadow: inset 0 1px 0 var(--rule);
  }

  .week__time {
    line-height: 1.35;
  }
}

.band__foot {
  margin-top: var(--space-s);
  color: var(--color-muted);
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
}

/* ---------- 9. Price rows (borrowed from the catalog) ---------- */

.prices {
  display: grid;
}

.price-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: var(--space-m);
  padding-block: var(--space-xs);
  border-bottom: 1px solid var(--rule);
}

.price-row:first-child {
  border-top: 1px solid var(--rule);
}

.price-row dt {
  max-inline-size: none;
}

.price-row .price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.price .from {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-muted);
  font-size: var(--step-caption);
  margin-right: 0.25em;
}

.price-row .price-note {
  grid-column: 1 / -1;
  color: var(--color-muted);
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
}

/* Beside a heading under a section rule, the list needs no outer rules:
   the section rules above and below close it. */
.ruled > .col-list.prices .price-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.ruled > .col-list.prices .price-row:last-child {
  border-bottom: 0;
}

/* The color caveat, set right under the list it qualifies */
.price-caveat {
  color: var(--color-muted);
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
  margin-top: calc(var(--space-xs) - var(--space-m));
}

/* ---------- 10. People rows ---------- */

.people {
  display: grid;
}

.person {
  display: grid;
  gap: var(--space-3xs) var(--space-l);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--rule);
  max-inline-size: none;
}

.person:first-child {
  border-top: 1px solid var(--rule);
}

.ruled > .col-body.people .person:first-child {
  border-top: 0;
  padding-top: 0;
}

.person h3 {
  font-size: var(--step-2);
  font-weight: 800;
}

.person__role {
  color: var(--color-muted);
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
}

@media (min-width: 48em) {
  .person {
    grid-template-columns: minmax(9rem, 1fr) minmax(0, 2.4fr);
    align-items: baseline;
  }

  .person__role {
    grid-column: 1;
    grid-row: 2;
  }

  .person > p:last-child {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ---------- 11. Services page ---------- */

.contents ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-l);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.contents a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-weight: 700;
}

.price-section {
  padding-block: var(--space-l) 0;
  scroll-margin-top: var(--space-s);
}

.price-section h2 {
  font-size: var(--step-3);
}

/* ---------- 12. First visit page ---------- */

.who {
  width: 100%;
  border-top: 1px solid var(--rule);
}

.who th,
.who td {
  text-align: left;
  padding: var(--space-xs) var(--space-s) var(--space-xs) 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
}

.who thead th {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-caption);
  color: var(--color-muted);
}

.who tbody th {
  width: 50%;
  font-weight: 400;
}

.who tbody td {
  font-family: var(--font-heading);
  font-weight: 700;
}

.who tbody td.who__plain {
  font-family: var(--font-body);
  font-weight: 400;
}

/* On a phone the wren perches at the end of the first heading;
   on wide screens it sits large in the margin. */
.visit-wren {
  grid-row: 1;
  grid-column: 1;
  justify-self: end;
  align-self: start;
  width: 5.5rem;
  height: auto;
}

.layout > .visit-wren + h2 {
  grid-row: 1;
  grid-column: 1;
  align-self: center;
}

@media (min-width: 60em) {
  .visit-wren {
    grid-column: 9 / span 4;
    grid-row: 1 / span 2;
    justify-self: start;
    width: 15rem;
  }

  .layout > .visit-wren + h2 {
    grid-column: 1 / span 7;
    align-self: start;
  }
}

/* The questions read as one FAQ: tight rows, answer right beside its question */
.qa-list {
  padding-block: 0 var(--space-2xl);
}

.qa-list > .wrap {
  --stack-space: var(--space-m);
}

.qa {
  padding-top: var(--space-s);
}

.qa h2 {
  font-size: var(--step-2);
}

.qa .stack {
  --stack-space: var(--space-xs);
}

@media (min-width: 60em) {
  .qa > .col-head {
    grid-column: 1 / span 5;
  }

  .qa > .col-tail {
    grid-column: 6 / span 7;
  }
}

/* ---------- 13. About page ---------- */

.pullout {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--step-2);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.pullout span {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0;
  color: var(--color-muted);
}

/* ---------- 14. Contact page ---------- */

.big-number {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--step-display);
  letter-spacing: -0.035em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.big-number a {
  color: var(--color-accent);
  text-decoration: none;
  display: inline-block;
  min-height: var(--tap);
}

.big-number a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
}

.address {
  font-style: normal;
  font-size: var(--step-1);
  line-height: 1.4;
}

/* Stacked on a phone, the questions column gets its own rule */
@media (max-width: 59.99em) {
  .form-col {
    border-top: 1px solid var(--rule);
    padding-top: var(--space-m);
    margin-top: var(--space-s);
  }
}

/* The written-question form: its own quiet, secondary section */
.write-section h2 {
  font-size: var(--step-2);
}

.form label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
}

.form input:not([type="hidden"]),
.form textarea {
  border-color: var(--color-muted);
  background: #fff;
}

/* ---------- 15. 404 ---------- */

.lost {
  padding-block: var(--space-2xl);
}

.lost__wren {
  width: 8rem;
  height: auto;
}

.lost-links {
  list-style: none;
  padding: 0;
  display: grid;
  max-inline-size: 28rem;
}

.lost-links li {
  border-bottom: 1px solid var(--rule);
}

.lost-links li:first-child {
  border-top: 1px solid var(--rule);
}

.lost-links a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-weight: 700;
}

/* ---------- 16. Footer (pale sage) ----------
   Follows main directly, one ink rule between it and the band above. */

.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--rule);
  margin-block-start: 0;
  padding-block: var(--space-xl) var(--space-l);
  font-size: 1rem;
}

.footer-grid {
  display: grid;
  gap: var(--space-l);
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--step-1);
  letter-spacing: -0.025em;
}

.footer-brand img {
  width: 2.2rem;
  height: auto;
}

.site-footer address {
  margin-top: var(--space-s);
  line-height: 1.5;
}

.footer-call {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-heading);
  font-weight: 700;
}

.footer-h {
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-2xs);
}

.footer-week {
  max-inline-size: 22rem;
}

.footer-week div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block: 0.3rem;
  border-bottom: 1px solid var(--rule-soft);
}

.footer-week dd {
  font-variant-numeric: tabular-nums;
}

/* On the contact page the full week is already on screen above */
@media (max-width: 47.99em) {
  .footer-hours--repeat {
    display: none;
  }
}

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3xs) var(--space-m);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-s);
  font-size: var(--step-caption);
  line-height: var(--leading-caption);
}

.demo-line {
  color: var(--color-muted);
}

@media (min-width: 48em) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-base {
    grid-column: 1 / -1;
  }
}