/* Sanchia Hair — About page build
   Brand typography from the master reference:
   Schnyder Condensed Light / Work Sans / Perfectly Nineties.
   The CSS names are exact. If the licensed fonts are installed on the machine/site,
   the browser will use them; graceful fallbacks are included for local preview.
*/

:root {
  --cloud: #FBFBFB;
  --stone: #DFDBD6;
  --sage: #A8B1A4;
  --deep-sage: #62675A;
  --ink: #1D1D1D;
  --panel: rgba(251, 251, 251, 0.965);
  --line: rgba(29, 29, 29, 0.14);
  --display: "Schnyder Condensed Light", "Cormorant Garamond", "Bodoni 72", "Didot", "Times New Roman", serif;
  --sans: "Work Sans", "Helvetica Neue", Arial, sans-serif;
  --editorial: "Perfectly Nineties", "Iowan Old Style", Georgia, serif;
  --signature: "Snell Roundhand", "Segoe Script", "Bradley Hand", cursive;
  --panel-width: min(980px, calc(100vw - 64px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.about-page {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  background: #ded9cf;
}

img { display: block; width: 100%; height: 100%; object-fit: cover; }
button, a { font: inherit; color: inherit; }
a { text-decoration: none; }

.about-page {
  min-height: 100vh;
  padding: 0;
  background:
    linear-gradient(rgba(251,251,251,.12), rgba(251,251,251,.12)),
    url("/assets/images/about/floral_background_original.webp") center / cover fixed;
}

.page-panel {
  width: var(--panel-width);
  margin: 0 auto;
  min-height: 100vh;
  padding: 0 50px 64px;
  background: var(--panel);
}

.site-header {
  min-height: 132px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.65fr 1fr 1fr;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--line);
}

.nav-link,
.menu-button {
  justify-self: center;
  font-size: 10px;
  letter-spacing: .20em;
  text-transform: uppercase;
}

.brand {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.brand-mark {
  font-family: var(--display);
  font-size: 72px;
  font-weight: 300;
  line-height: .72;
  letter-spacing: -.14em;
  padding-right: .14em;
}

.brand-name {
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
}

.menu-button {
  border: 0;
  background: rgba(223,219,214,.58);
  padding: 13px 18px;
  cursor: pointer;
}

.hero-section {
  padding: 30px 0 0;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .23em;
  text-transform: uppercase;
}

.hero-headline h1 {
  max-width: 850px;
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 300;
  font-size: clamp(58px, 7vw, 88px);
  line-height: .92;
  letter-spacing: -.035em;
}

.hero-grid {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 52px;
  align-items: start;
}

.hero-support {
  max-width: 390px;
  margin: 0;
  font-family: var(--editorial);
  font-size: 30px;
  font-style: italic;
  line-height: 1.10;
  color: var(--deep-sage);
}

.short-rule {
  display: block;
  width: 42px;
  border-top: 1px solid var(--deep-sage);
  margin: 35px 0 30px;
}

.intro-copy {
  max-width: 385px;
}

.intro-copy h2 {
  margin: 0 0 10px;
  font-size: 18px;
  font-family: var(--sans);
  font-weight: 600;
}

.intro-copy p {
  margin: 0 0 22px;
  color: #4d5049;
  font-size: 15px;
  line-height: 1.52;
}

.story-button {
  margin-top: 5px;
  min-width: 255px;
  min-height: 49px;
  padding: 0 24px;
  border: 1px solid var(--deep-sage);
  background: transparent;
  color: var(--ink);
  letter-spacing: .20em;
  font-size: 10px;
  text-transform: uppercase;
  cursor: pointer;
}

.story-button span { margin-left: 18px; }

.portrait {
  margin: 0;
  aspect-ratio: .80;
  overflow: hidden;
}

.portrait img {
  object-position: center 45%;
}

.story-panel {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: 38px 0 0;
  padding: 34px 0;
}

.story-inner {
  max-width: 680px;
  margin: 0 auto;
  columns: 2;
  column-gap: 48px;
}

.story-inner p {
  break-inside: avoid;
  margin: 0 0 18px;
  color: #4d5049;
  font-size: 14px;
  line-height: 1.55;
}

.quote-media-grid {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 52px;
  align-items: center;
  padding: 54px 0 58px;
  border-bottom: 1px solid var(--line);
}

.pull-quote {
  margin: 0;
}

.pull-quote p {
  margin: 0;
  max-width: 400px;
  font-family: var(--editorial);
  font-style: italic;
  font-size: 31px;
  line-height: 1.08;
}

.signature {
  margin-top: 28px;
  font-family: var(--signature);
  font-size: 48px;
  line-height: 1;
  color: var(--deep-sage);
  transform: rotate(-3deg);
  transform-origin: left center;
}

.signature span {
  font-size: .62em;
  margin-left: 12px;
  letter-spacing: .03em;
}

.mirror-image {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
}

.mirror-image img {
  object-fit: contain;
  background: var(--cloud);
}

.closing-section {
  display: grid;
  grid-template-columns: 1.35fr .85fr;
  gap: 44px;
  padding-top: 34px;
}

.evie-card,
.values-card {
  min-width: 0;
}

.evie-layout {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 26px;
  align-items: center;
}

.evie-layout figure {
  margin: 0;
  aspect-ratio: 1.35;
  overflow: hidden;
}

.evie-layout h2,
.values-card h2 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-weight: 300;
  font-size: 35px;
  line-height: .98;
}

.evie-layout p,
.values-card > p:not(.eyebrow) {
  margin: 0 0 18px;
  color: #4d5049;
  font-size: 13px;
  line-height: 1.48;
}

.values-card {
  border-left: 1px solid var(--line);
  padding-left: 32px;
}

.text-link {
  display: inline-flex;
  gap: 18px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--deep-sage);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .20em;
  text-transform: uppercase;
}

/* Mobile lock */
@media (max-width: 760px) {
  :root { --panel-width: min(100% - 20px, 480px); }

  .about-page {
    background-attachment: scroll;
  }

  .page-panel {
    padding: 0 22px 38px;
  }

  .site-header {
    min-height: 100px;
    grid-template-columns: 1fr auto 1fr;
  }

  .site-header .nav-link { display: none; }
  .brand { grid-column: 2; }
  .menu-button {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    padding: 10px 12px;
    font-size: 0;
  }
  .menu-button span { font-size: 16px; }
  .brand-mark { font-size: 55px; }
  .brand-name { font-size: 7px; }

  .hero-section { padding-top: 24px; }

  .hero-headline h1 {
    font-size: clamp(48px, 14vw, 64px);
    line-height: .93;
    margin-bottom: 14px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .hero-support {
    max-width: 330px;
    font-size: 24px;
  }

  .portrait {
    order: -1;
    aspect-ratio: 1 / 1.06;
    margin-top: 4px;
  }

  .intro {
    display: contents;
  }

  .hero-support { order: -2; }
  .short-rule { display: none; }

  .intro-copy {
    max-width: none;
  }

  .intro-copy p {
    font-size: 14px;
    line-height: 1.50;
    margin-bottom: 18px;
  }

  .story-button {
    width: 100%;
  }

  .story-inner {
    columns: 1;
  }

  .quote-media-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 40px 0 42px;
  }

  .pull-quote p {
    font-size: 28px;
  }

  .signature {
    font-size: 44px;
  }

  .mirror-image {
    width: 88%;
    margin: 0 auto;
  }

  .closing-section {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .evie-layout {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .evie-layout figure {
    aspect-ratio: 1.55;
  }

  .values-card {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding: 30px 0 0;
  }

  .evie-layout h2,
  .values-card h2 {
    font-size: 34px;
  }
}

.about-page{background:linear-gradient(rgba(251,251,251,.12),rgba(251,251,251,.12)),url("/assets/images/about/floral_background_original.webp") center/cover fixed}.about-page>.site-header,.about-page>.site-footer{background:rgba(251,251,251,.965);width:var(--panel-width);padding-inline:50px}.about-page .portrait img{height:100%}.about-page .intro-copy p{font-size:16px}.about-page .page-panel{padding-top:0}.about-page>.site-footer{padding-block:24px}@media(max-width:760px){.about-page>.site-header,.about-page>.site-footer{padding-inline:22px}.about-page{background-attachment:scroll}}