/* Inspired by the supplied uncoated kraft business cards. */
:root {
  --paper: #ceb18a;
  --cream: #bea079;
  --green: #26211b;
  --ink: #26211b;
  --muted: #3b3026;
  --clay: #5e3d2b;
  --line: #8c7255;
}

body {
  background-color: var(--paper);
  background-image: url('assets/kraft-grain.svg');
  background-repeat: repeat;
}
::selection { background: #eee0c5; color: var(--ink); }
.site-header {
  background-color: var(--paper);
  background-image: url('assets/kraft-grain.svg');
  border-bottom-color: #7c644966;
}
.brand-mark { width: 39px; height: 45px; }
.brand-type { min-width: 166px; }
.brand-type > .brand-first-name {
  font-family: var(--serif);
  color: var(--ink);
  font-size: 9px;
  letter-spacing: .2em;
  margin: 0 0 1px 4px;
}
.brand-wordmark {
  width: 166px;
  height: auto;
  mix-blend-mode: multiply;
}
.brand-type > .brand-subtitle {
  color: var(--ink);
  font-family: var(--serif);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: .12em;
  margin: 3px 0 0 4px;
}
.eyebrow {
  font-family: var(--serif);
  color: var(--ink);
  letter-spacing: .17em;
}
.button { border-radius: 0; color: #f5ead5; }
.button:hover { background: #403629; }
.text-link { border-color: #6b523c; }
.hero-art > img {
  border-radius: 0;
  border: 9px solid #e0c6a0;
  box-shadow: 0 2px 5px #4c352017;
}
.art-vertical {
  color: var(--ink);
  background: #dfc29be8;
  border-radius: 0;
  padding: 17px 9px;
}
.language-note {
  background-color: #ddc3a0;
  background-image: url('assets/kraft-grain.svg');
  border-color: #927653;
  box-shadow: 1px 3px 6px #47341f17;
}
.values-strip { border-color: #7c644966; }
.about-section {
  background-color: #bea079;
  background-image: url('assets/kraft-grain.svg');
  border-top: 1px solid #7c64493b;
  border-bottom: 1px solid #7c64493b;
}
.portrait img {
  border-radius: 0;
  border: 8px solid #ddc3a0;
  filter: grayscale(1);
  box-shadow: 0 2px 5px #4c352017;
}
.about-copy p:not(.eyebrow) { color: #40372c; }
.signature { width: 154px; }
.first-visit-section {
  background-color: #dcc3a0;
  background-image: url('assets/kraft-grain.svg');
  border-top: 1px solid #7c64493b;
  border-bottom: 1px solid #7c64493b;
}
.first-intro > p, .visit-steps p, .faq-list details > p { color: var(--muted); }
.visit-steps article, .faq-grid, .faq-list, .faq-list details { border-color: #a88d69; }
.faq-list details > .faq-source { margin-top: -8px; }
.faq-source .text-link { max-width: 100%; font-size: 12px; overflow-wrap: anywhere; }
.care-finder { border-radius: 0; border-color: #967952; }
.care-tabs {
  background-color: #bea079;
  background-image: url('assets/kraft-grain.svg');
  border-color: #967952;
}
.care-tabs button { border-radius: 0; border-color: #9e805d; }
.care-tabs button[aria-selected=true] {
  background-color: #ddc3a0;
  background-image: url('assets/kraft-grain.svg');
  box-shadow: none;
}
.care-tabs button:hover { background-color: #d5b991; }
.location-panel {
  background-color: #d8bc97;
  background-image: url('assets/kraft-grain.svg');
}
.closing-section {
  background-color: var(--ink);
  background-image: linear-gradient(90deg,#26211bf2 0%,#26211bd9 40%,#26211b80 72%,#26211b40 100%), url('assets/sunrise-gateway.jpg');
  color: #f4e7d2;
}
.closing-section .eyebrow, .closing-section p:not(.eyebrow) { color: #dcc6a6; }
.closing-section em { color: #e6ccaa; }
.button-light { background: #e7d0ad; border-color: #e7d0ad; color: var(--ink); }
.button-light:hover { background: #d5b78e; }
.closing-email { color: #f4e7d2; border-color: #bfa37f; }
.footer-top, #privacy-note { border-color: #8c7255; }
.footer-top .brand-type { min-width: 166px; }

/* The supplied monochrome arch blends into the kraft navigation bar. */
.site-header .header-inner { min-height: 84px; gap: 28px; }
.site-header .brand { gap: 15px; min-width: 0; }
.site-header .brand-mark { width: 74px; height: 62px; }
.header-brand-copy {
  display: block;
  width: 190px;
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.site-header .desktop-nav { margin-left: auto; }
.site-header .header-actions { margin-left: 8px; }
html[lang=zh-Hans] .header-brand-copy { font-size: 20px; letter-spacing: .12em; }
@media(max-width:1100px) {
  .site-header .header-inner { gap: 18px; }
  .header-brand-copy { width: 170px; font-size: 17px; }
  .site-header .header-actions { margin-left: 0; }
}
@media(max-width:850px) {
  .site-header .header-inner { min-height: 80px; }
  .site-header .header-actions { margin-left: auto; }
}
@media(max-width:620px) {
  .site-header .header-inner { min-height: 74px; gap: 14px; }
  .site-header .brand { gap: 11px; }
  .site-header .brand-mark { width: 50px; height: 42px; }
  .header-brand-copy { width: 138px; font-size: 14px; line-height: 1.3; }
  html[lang=zh-Hans] .header-brand-copy { font-size: 17px; letter-spacing: .08em; }
}
@media(max-width:360px) {
  .site-header .header-inner { gap: 10px; }
  .header-brand-copy { width: 126px; font-size: 13px; }
}

@media(max-width:850px) {
  .brand-type { min-width: 151px; }
  .brand-wordmark { width: 151px; }
}
@media(max-width:620px) {
  .brand-mark { width: 30px; height: 37px; }
  .brand-type { min-width: 132px; }
  .brand-wordmark { width: 132px; }
  .brand-type > .brand-first-name { font-size: 8px; margin-bottom: 0; }
  .brand-type > .brand-subtitle { font-size: 6px; letter-spacing: .09em; margin-top: 2px; }
  .hero-art > img { border-width: 7px; }
  .art-vertical { left: 30px; top: 34px; font-size: 21px; }
  .portrait img { border-width: 7px; }
  .signature { width: 145px; }
  .closing-section {
    background-image: linear-gradient(90deg,#26211bee,#26211bb3), url('assets/sunrise-gateway.jpg');
  }
  .footer-top .brand-type > .brand-first-name { font-size: 9px; }
  .footer-top .brand-wordmark { width: 166px; }
  .footer-top .brand-type > .brand-subtitle { font-size: 8px; }
}

/* Introduce the practitioner immediately, including on narrow screens. */
.portrait-frame { position: relative; }
.portrait-frame > img { display: block; width: 100%; height: 572px; object-fit: cover; object-position: 50% 24%; border: 9px solid #e0c6a0; background: var(--cream); box-shadow: 0 2px 5px #4c352017; }
.hero-portrait figcaption { font-family: var(--serif); font-size: 15px; color: var(--ink); }
.hero-portrait .portrait-notes { position: absolute; inset: auto 16px 18px; display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: space-between; gap: 20px; }
.hero-portrait .art-vertical { position: static; flex-shrink: 0; writing-mode: vertical-rl; transform: rotate(3deg); background: #dfc29bf2; padding: 12px 8px; border: 1px solid #927653; box-shadow: 1px 3px 6px #47341f17; font-size: 22px; line-height: 1.3; letter-spacing: .2em; }
.hero-portrait .language-note { position: static; flex-shrink: 0; transform: rotate(-3deg); width: 154px; min-height: 0; margin: 0; padding: 12px 14px; border: 1px solid #927653; box-shadow: 1px 3px 6px #47341f17; background-color: #ddc3a0; background-image: url('assets/kraft-grain.svg'); }
.hero-portrait .note-symbol { font-size: 22px; margin: 0 0 6px; }
.hero-portrait .note-detail { margin-top: 5px; }
.hero-byline p { font-family: var(--serif); font-size: 19px; line-height: 1.4; }
.hero-byline p > span { font-family: var(--sans); font-size: 11px; }
@media(min-width:1500px) { .portrait-frame > img { height: 620px; } }
@media(max-width:1100px) { .portrait-frame > img { height: 530px; } }
@media(max-width:850px) { .portrait-frame > img { height: 476px; } }
@media(max-width:620px) {
  .hero { padding-top: 26px; gap: 30px; }
  .hero-portrait { grid-row: 1; margin: 0; }
  .portrait-frame > img { height: clamp(340px, 100vw, 460px); border-width: 7px; }
  .hero-portrait figcaption { font-size: 14px; }
  .hero-portrait .portrait-notes { inset: auto 14px 16px; gap: 14px; }
  .hero-portrait .art-vertical { font-size: 19px; padding: 10px 7px; }
  .hero-portrait .language-note { width: 140px; padding: 10px 12px; }
  .hero-portrait .note-symbol { font-size: 20px; }
  .hero-byline p { font-size: 18px; }
}

/* Supplied portraits and greenhouse photograph, in simple kraft frames. */
.portrait img { height: 480px; object-position: 50% 22%; filter: none; }
.about-photo-collection { margin-top: 49px; }
.photo-collection-label { margin-bottom: 17px; font-size: 9px; }
.about-photo-grid { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 21px; }
.about-photo-grid figure { min-width: 0; padding: 7px; background: #ddc3a0; box-shadow: 0 2px 5px #4c352017; }
.about-photo-grid img { width: 100%; height: 300px; object-fit: cover; }
.photo-clinic img { object-position: 50% 25%; }
.photo-playful img { object-position: 58% 35%; }
.photo-greenhouse img { object-position: 50% 0%; }
@media(max-width:850px) {
  .portrait img { height: 420px; }
  .about-photo-collection { margin-top: 40px; }
  .about-photo-grid { gap: 16px; }
  .about-photo-grid img { height: 250px; }
}
@media(max-width:620px) {
  .portrait img { height: auto; aspect-ratio: 4 / 5; object-position: 50% 22%; }
  .about-photo-collection { margin-top: 37px; }
  .photo-collection-label { font-size: 9px; margin-bottom: 15px; }
  .about-photo-grid { grid-template-columns: 1fr 1fr; gap: 15px; }
  .about-photo-grid figure { padding: 6px; }
  .about-photo-grid img { height: 205px; }
  .photo-greenhouse { grid-column: 1 / -1; }
  .photo-greenhouse img { height: 240px; }
}