/* ==========================================================================
   AVEN — avenmedicine.com
   Neutral ramp, 2026-09-19. Every gray is a TRUE neutral — equal R, G and B.
   The handoff's original palette was khaki (#C8C8BE, #B4B4A8, #56564F) with an
   olive CTA, which read as spa. Do not reintroduce a warm or green cast, and
   do not add an accent colour: this palette is ink on grey, nothing else.
   ========================================================================== */

:root {
  --ground:      #F4F4F4;  /* page ground, reversed text on dark */
  --ivory:       #F4F4F4;  /* legacy alias for --ground */
  --ink:         #1A1A1A;  /* headings, wordmark, primary text, dark buttons */
  --body:        #2E2E2E;  /* paragraph copy */
  --ink-soft:    #454545;  /* supporting lines under a name — dark, never pale */
  --muted:       #565656;  /* labels, captions, subtitle, footnotes */
  --rule:        #D6D6D6;  /* thin dividers, section rules */
  --border:      #C2C2C2;  /* input underlines, secondary button borders */
  --rule-hover:  #ADADAD;  /* link underline on hover */
  --cta:         #1A1A1A;  /* mobile primary CTA background (was olive) */
  --placeholder: #949494;
  --scrim:       rgba(26, 26, 26, 0.55);

  --serif:   'Cormorant Garamond', Georgia, serif;
  --text:    'Libre Caslon Text', Georgia, serif;
  --sans:    'Inter Tight', sans-serif;

  --gutter:  clamp(24px, 5vw, 72px);
  --shell:   1320px;
  --section: clamp(36px, 4vw, 52px);
  --section-major: clamp(40px, 4.5vw, 60px);
}

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

html, body { margin: 0; padding: 0; }

body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--ink); text-decoration: none; }
::selection { background: var(--rule); }
img { max-width: 100%; }

/* Visible focus ring everywhere — the prototype relied on browser defaults. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 18px;
  z-index: 200;
}
.skip-link:focus { left: 8px; top: 8px; }

/* --------------------------------------------------------------- Wordmark */

.wordmark {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  line-height: 1;
  color: var(--ink);
}
.wordmark--header   { font-size: clamp(30px, 3.4vw, 46px); }
.wordmark--mobile   { font-size: 26px; }
.wordmark--panel    { font-size: 24px; }
.wordmark--footer   { font-size: 24px; }

/* AVEN | Medicine lockup. "AVEN" alone is not available as a mark, so
   "Medicine" is part of the wordmark, not decoration — keep it on every
   instance. Cormorant regular, mixed case, untracked, sitting on the same
   baseline as AVEN, separated by a hairline rule. */
.lockup {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  line-height: 1;
}
.lockup--header { font-size: clamp(30px, 3.4vw, 46px); }
.lockup--mobile { font-size: 26px; }
.lockup--panel  { font-size: 24px; justify-content: flex-start; }
.lockup--footer { font-size: 24px; justify-content: flex-start; }
.lockup--access { font-size: clamp(22px, 2.6vw, 30px); justify-content: flex-start; margin: 0; }

.lockup .wordmark { font-size: 1em; }

.wordmark__suffix {
  position: relative;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 0.66em;
  letter-spacing: 0;
  text-indent: 0;
  line-height: 1;
  color: var(--ink);
  /* Partly cancels AVEN's trailing .3em letter-space. Do not increase this —
     over-cancelling pulls the rule into the N. */
  margin-left: -0.26em;
  padding-left: 1.3em;
  white-space: nowrap;
}
.wordmark__suffix::before {
  content: "";
  position: absolute;
  left: 0.65em;
  bottom: -0.14em;
  width: 1px;
  height: 1.62em;
  background: var(--border);
}
/* The wordmark IS the page heading on /access/ — no separate title. */
.wordmark--access   { font-size: clamp(22px, 2.6vw, 30px); margin: 0; font-weight: 300; }

.wordmark-sub {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: var(--muted);
  text-transform: uppercase;
  margin-top: 16px;
}
.wordmark-sub--mobile { margin-top: 14px; }
.wordmark-sub--panel  { margin-top: 13px; letter-spacing: 0.22em; text-indent: 0.22em; }
.wordmark-sub--footer { margin-top: 9px; font-size: 9.5px; letter-spacing: 0.06em; text-indent: 0; }

/* ---------------------------------------------------------- Desktop header */

.site-header {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: clamp(28px, 3.4vw, 48px) var(--gutter) 0;
}
.site-header__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.brand { display: block; line-height: 1; }

.nav {
  font-family: var(--sans);
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 40px;
  padding: 22px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  gap: 16px clamp(24px, 4vw, 46px);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: #383838;
}
.nav a {
  color: inherit;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
  transition: border-bottom-color 150ms ease;
}
.nav a:hover { border-bottom-color: var(--rule-hover); }
/* aria-current is exposed to assistive tech only; the approved design has no
   persistent active-state underline in the desktop nav. */
.nav a[aria-current="page"] { color: var(--ink); }
.nav a.nav__request {
  color: var(--ink);
  border-bottom-color: var(--border);
}
.nav a.nav__request:hover { border-bottom-color: var(--ink); }

/* ----------------------------------------------------------- Mobile header */

.site-header--mobile {
  display: none;
  position: relative;
  width: 100%;
  padding: 26px 24px 0;
}
.site-header--mobile .site-header__inner { align-items: center; }

.hamburger {
  position: absolute;
  top: 19px;
  right: 8px;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--ink);
}
.site-header--mobile .header-rule {
  margin-top: 22px;
  border-bottom: 1px solid var(--rule);
}

/* ------------------------------------------------------------ Slide-out nav */

@keyframes avenSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
}
.menu-overlay[hidden] { display: none; }
.menu-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  border: 0;
  padding: 0;
  width: 100%;
  cursor: pointer;
}
.menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 83%;
  max-width: 420px;
  background: var(--ivory);
  box-shadow: -18px 0 44px rgba(26, 26, 26, 0.14);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: avenSlideIn 220ms ease-out both;
  padding: 26px 24px 48px;
}
@media (prefers-reduced-motion: reduce) {
  .menu-panel { animation: none; }
}
.menu-panel__head { position: relative; }
.menu-close {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.menu-nav {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.menu-nav a { display: block; padding: 4px 0; }
.menu-nav a.menu-nav__request {
  padding: 22px 0 4px;
  border-top: 1px solid var(--rule);
}

/* --------------------------------------------------------------------- Main */

.main {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(56px, 7vw, 96px);
}

.page-head { padding: clamp(28px, 5vh, 60px) 0 clamp(36px, 4.5vw, 56px); }
.page-head--tight { padding-bottom: clamp(32px, 4vw, 48px); }

h2.eyebrow { margin: 0; font-weight: 400; }

.eyebrow {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--wide {
  font-size: 9px;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
}

h1, h2 { font-weight: 400; }

.h1 {
  margin: 24px 0 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.4vw, 2.05rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
  max-width: 640px;
  text-wrap: pretty;
}
.h1--flush { margin-top: 0; }

.h1--hero {
  margin: 0;
  text-align: left;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: -0.004em;
  max-width: 20ch;
  text-wrap: balance;
}

.h2 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.35rem, 1.85vw, 1.55rem);
  line-height: 1.2;
}
.h2--lg   { font-size: clamp(1.45rem, 2vw, 1.75rem); }
.h2--fees { font-size: clamp(1.3rem, 1.75vw, 1.5rem); }

.prose {
  display: flex;
  flex-direction: column;
  gap: 18px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--body);
  /* .prose used to inherit its measure from .duo__body. Standing alone it had
     none, so long-form pages ran to the full container width. */
  max-width: 54ch;
}
.prose p { margin: 0; }

/* Two-column inner-page pattern */
.duo {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 56px);
}
.duo + .duo { margin-top: var(--section); }
.duo__head { flex: 0 1 240px; }
.duo__head.h2 { flex: 0 1 240px; }
.duo__body {
  flex: 1 1 340px;
  min-width: 0;
  max-width: 54ch;
}

/* ------------------------------------------------------------------ Buttons */

.btn {
  font-family: var(--sans);
  white-space: nowrap;
  flex: 0 0 auto;
  width: fit-content;
  text-transform: uppercase;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn--ink {
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 15px 34px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.btn--ink:hover { background: var(--ink); color: var(--ivory); }

.btn--ink-sm {
  align-self: flex-start;
  margin-top: 14px;
  border: 1px solid var(--ink);
  color: var(--ink);
  padding: 14px 30px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
}
.btn--ink-sm:hover { background: var(--ink); color: var(--ivory); }

.btn--quiet {
  border: 1px solid var(--border);
  padding: 15px 28px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.btn--quiet:hover { border-color: var(--ink); }

.btn--solid {
  align-self: flex-start;
  margin-top: 6px;
  border: 0;
  background: var(--ink);
  color: var(--ivory);
  padding: 15px 25px;
  font-size: 10.5px;
  letter-spacing: 0.05em;
  cursor: pointer;
}

.btn--cta {
  box-sizing: border-box;
  width: 100%;
  margin-top: 14px;
  background: var(--cta);
  color: var(--ivory);
  padding: 19px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.btn--cta .arrow { text-indent: 0; font-size: 14px; line-height: 1; }

.textlink {
  font-family: var(--sans);
  display: inline-block;
  border-bottom: 1px solid var(--rule-hover);
  padding-bottom: 5px;
  text-transform: uppercase;
}
.textlink--wide { margin-top: 26px; font-size: 9.5px; letter-spacing: 0.2em; text-indent: 0.2em; }
.textlink--tight { margin-top: 26px; font-size: 10.5px; letter-spacing: 0.05em; }

/* --------------------------------------------------------------- Home page */

.hero { padding: clamp(28px, 4.5vh, 56px) 0 clamp(32px, 3.5vw, 44px); }

.center-band { display: flex; justify-content: flex-start; }
.center-col {
  max-width: 56ch;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  font-size: 18px;
  line-height: 1.58;
  color: var(--body);
}
.center-col p { margin: 0; }

.mobile-cta-block {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.mobile-cta-block .divider {
  width: 66%;
  margin-top: 34px;
  border-top: 1px solid var(--rule);
}

.practice-note {
  margin-top: clamp(48px, 5.5vw, 76px);
  border-top: 1px solid var(--rule);
  padding-top: clamp(28px, 3vw, 40px);
}
.practice-note__col { margin: 0; max-width: 54ch; text-align: left; }

.focus-band { margin-top: clamp(22px, 2.4vw, 30px); }
.focus-col { margin: 0; max-width: 560px; width: 100%; }
.focus-list {
  margin-top: 12px;
  text-align: left;
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.7;
}
.eyebrow--center { text-align: left; }

.physician {
  margin-top: var(--section-major);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  align-items: flex-start;
  text-align: left;
}
.physician__portrait {
  flex: 0 0 auto;
  width: clamp(150px, 17vw, 200px);
  max-width: 100%;
  height: auto;
  filter: saturate(0.75);
  display: block;
}
.physician__body { flex: 1 1 380px; min-width: 0; max-width: 52ch; }

/* --------------------------------------------- Physician introduction block
   Sizes, spacing and colours are to the practice's written spec. The spec said
   sans for the supporting lines, but the site sets all reading text in the body
   serif and uses sans only for nav, small uppercase labels and buttons — a sans
   block here read as foreign to the page, so these use the body serif.
   Regular weight, dark neutral — never pale grey, never bold, no badges,
   logos or icons. Type does not shrink on mobile; lines wrap. */

.person-name {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.18;
  letter-spacing: normal;
  color: var(--ink);
  text-wrap: pretty;
}
.person-name__degrees {
  font-size: 16px;
  white-space: nowrap;
}

.person-cert {
  margin: 8px 0 0;
  font-family: var(--text);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  color: var(--body);
  max-width: 46ch;
}

.person-edu {
  margin-top: 14px;
  font-family: var(--text);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 46ch;
}
.person-edu div + div { margin-top: 3px; }

@media (max-width: 900px) {
  .person-name          { font-size: 24px; }
  .person-name__degrees { font-size: 14px; white-space: normal; }
  .person-cert          { font-size: 15px; }
  .person-edu           { font-size: 14px; }
}
/* Patient review excerpt (/dr-elias/ only). Ordinary body text — deliberately
   NOT a testimonial treatment: no stars, no oversized quote marks, no shaded
   box, no carousel, no "verified" claim. See CLAUDE.md. */
.review-note {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 52ch;
}

.fees-teaser { margin-top: var(--section-major); }
.fees-teaser__col { margin: 0; max-width: 56ch; text-align: left; }
.fees-teaser__row {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
}

/* --------------------------------------------------------- Editorial pages
   Unlisted long-form pages linked only from the relevant Care section. No
   dates, bylines, categories, tags, related posts or share buttons — these are
   part of the practice site, not a content-marketing section. */

/* The quiet link beneath a Care section. Plain text with a hairline rule —
   never a button, card or teaser. */
.readmore {
  align-self: flex-start;
  margin-top: 4px;
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.01em;
  color: var(--ink);
  border-bottom: 1px solid var(--rule-hover);
  padding-bottom: 3px;
  transition: border-bottom-color 150ms ease;
}
.readmore:hover { border-bottom-color: var(--ink); }
.readmore__arrow { margin-left: 7px; font-size: 13px; }

.essay { padding: clamp(24px, 4vh, 40px) 0 0; }
.essay__back {
  display: inline-block;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--muted);
  transition: color 150ms ease;
}
.essay__back:hover { color: var(--ink); }
.essay .h1 { margin-top: 24px; max-width: 30ch; }
.essay__body { margin-top: 28px; }
.essay__back--foot {
  margin-top: clamp(40px, 5vw, 60px);
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  width: 100%;
  max-width: 54ch;
}

/* ------------------------------------------------------------------ Longform
   Stacked heading above text, for pages whose section headings are full
   sentences. The .duo pattern puts a heading in a 240px rail, which breaks a
   sentence-length heading across seven lines. */
.longform > section { margin-top: clamp(52px, 5.5vw, 80px); }
/* Headings were only a little larger than body copy, so a long one read as
   another paragraph. Larger, but still Cormorant Garamond at regular 400 —
   never bold, never sans. Generous space above, tight space below, so each
   heading belongs to the text beneath it. */
.longform h2 {
  margin: 0 0 14px;
  max-width: 34ch;
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.18;
}
@media (max-width: 900px) {
  .longform h2 { font-size: 1.55rem; }
}

/* --------------------------------------------------------------- Eligibility */

.closing-band {
  margin-top: clamp(64px, 8vw, 104px);
  border-top: 1px solid var(--ink);
  padding-top: clamp(32px, 3.5vw, 44px);
}

/* ------------------------------------------------------------- Dr. Elias page */

.bio-head {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 36px);
  align-items: flex-start;
}
.bio-head__portrait {
  flex: 0 0 auto;
  width: clamp(132px, 13vw, 168px);
  max-width: 100%;
  /* height:auto is required — the img's height attribute is a presentational
     hint that otherwise beats aspect-ratio and stretches the portrait. */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
  display: block;
}
/* 54ch matches the measure used by Professional Background below, so the page
   reads at one text width. 44ch was set when this block held two paragraphs. */
.bio-head__body { flex: 1 1 340px; min-width: 0; max-width: 54ch; }

/* Each institution sits with its qualification as one entry: 4px inside a
   pair, 20px between pairs. The old two-column rows read as eight separate
   items rather than four. Pairs never split across a line break. */
.rows {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-width: 64ch;
}
.row {
  padding: 0;
  border: 0;
  break-inside: avoid;
}
.row__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.3;
  color: var(--ink);
}
.row__role {
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-soft);
}

.affiliations {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 64ch;
}
.affiliation__name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.3;
}
.affiliation__system { margin-top: 3px; font-size: 13.5px; color: var(--muted); }

/* The last line of her biography, inside the text column and sharing its
   measure — not a feature. Body font, regular-weight italic, a step below body
   size. No box, divider, oversized quotation marks, centring or attribution:
   it already sits inside her own biography. */
.conviction {
  margin: 20px 0 0;
  font-family: var(--text);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body);
}

/* -------------------------------------------------------------------- Fees */

/* Widened for the longer fee descriptions — at 64ch the copy column was only
   ~300px, so a full paragraph ran as a tall narrow ribbon. */
.fee-table { max-width: 88ch; }
.fee-row {
  border-top: 1px solid var(--rule);
  padding: clamp(24px, 3vw, 36px) 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 56px;
}
.fee-row:last-child { border-bottom: 1px solid var(--rule); }
.fee-row__head {
  flex: 0 1 260px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
.fee-row__figure {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.3rem, 1.75vw, 1.5rem);
}
.fee-row__copy {
  flex: 1 1 380px;
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  color: var(--body);
  max-width: 54ch;
}

/* -------------------------------------------------------------------- Form */

.request {
  padding: clamp(28px, 5vh, 60px) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(32px, 5vw, 72px);
  align-items: flex-start;
}
.request__intro { flex: 1 1 300px; min-width: 0; max-width: 40ch; }

.form {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.field { display: flex; flex-direction: column; gap: 9px; }
.field__label {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Guidance sits with its field, above the input, so it is read at the moment
   of typing rather than after. */
.field__hint {
  font-family: var(--text);
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  margin-top: -2px;
}
/* 16px minimum — anything smaller makes iOS zoom on focus. */
.field input,
.field textarea {
  border: 0;
  border-bottom: 1px solid var(--border);
  background: transparent;
  padding: 9px 0;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  border-radius: 0;
}
.field textarea { resize: vertical; }
.field input:focus,
.field textarea:focus { border-bottom-color: var(--ink); }
.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }

.field--error input,
.field--error textarea { border-bottom-color: #8A3A2E; }
.field__error {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #8A3A2E;
}
.field__error[hidden] { display: none; }

.form__note {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 44ch;
}
.hp { position: absolute; left: -9999px; opacity: 0; }

.form-success {
  flex: 1 1 360px;
  min-width: 0;
  max-width: 480px;
  border-top: 1px solid var(--ink);
  padding-top: 28px;
}
.form-success[hidden] { display: none; }

/* ------------------------------------------------------------------ Access */

.access { padding: clamp(28px, 5vh, 60px) 0 0; max-width: 60ch; }
.access__links {
  margin-top: clamp(32px, 4vw, 44px);
  display: flex;
  flex-direction: column;
}
.access__link {
  border-top: 1px solid var(--rule);
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: color 150ms ease;
}
.access__link:last-child { border-bottom: 1px solid var(--rule); }
.access__link:hover { border-top-color: var(--rule-hover); }
.access__link-label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.45rem);
}
.access__link-arrow { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.access__note {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 46ch;
}

/* ------------------------------------------------------------------ Footer */

.site-footer { margin-top: auto; border-top: 1px solid var(--rule); }
.site-footer__inner {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 44px var(--gutter) 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
}
.site-footer__contact {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: right;
  line-height: 2.1;
}
.site-footer__contact a { color: var(--ink); }
.site-footer__hint { color: var(--muted); }
.site-footer__contact a:hover { border-bottom: 1px solid var(--rule-hover); }
@media (max-width: 640px) {
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
  .site-footer__contact { text-align: left; }
}
.site-footer p {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 38ch;
}
.footer-link {
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-indent: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: color 150ms ease;
}
.footer-link:hover { color: var(--ink); }

/* ------------------------------------------------------- Breakpoint: 900px */

.only-desktop { display: inline-block; }
.only-mobile  { display: none; }

@media (max-width: 900px) {
  .site-header          { display: none; }
  .site-header--mobile  { display: block; }
  .main                 { padding-left: 24px; padding-right: 24px; }
  .only-desktop         { display: none; }
  .only-mobile          { display: flex; }
  .site-footer__inner   { padding-left: 24px; padding-right: 24px; }
}

body.menu-open { overflow: hidden; }