/* ============================================================================
   Atlas Psychiatry
   ----------------------------------------------------------------------------
   A print-feature art direction: ivory paper, espresso ink, a single brass
   accent, hairline rules, an asymmetric grid, and one dark band.

   Contents
     01  Design Tokens
     02  Reset & Base
     03  Typography Primitives
     04  Layout Shells & Section Rhythm
     05  Buttons, Links, Focus
     06  Masthead & Navigation
     07  Hero
     08  About / Credentials
     09  Patient Notes
     10  Contact
     11  Colophon (Footer)
     12  Scroll Reveals — Fail Safe By Construction
     13  Reduced Motion & Print
     14  Atlas Psychiatry
   ========================================================================= */


/* ==========================================================================
   01  DESIGN TOKENS
   ========================================================================== */
:root {
  /* ---- Colour -------------------------------------------------------------
     Contrast audited against the surfaces they are used on (WCAG 2.1):
       ink        #2A211B on paper #F7F4EE .......... 14.1 : 1   AAA
       ink-body   #57493E on paper #F7F4EE ...........  7.9 : 1   AAA
       ink-muted  #6B5B4D on paper #F7F4EE ...........  5.9 : 1   AA  (body)
       brass      #8A6A2F on paper #F7F4EE ...........  4.6 : 1   AA  (body)
       brass-deep #6E5324 on paper #F7F4EE ...........  6.5 : 1   AAA
       paper      #F7F4EE on ink   #2A211B ........... 14.1 : 1   AAA
       brass-lit  #C9A961 on ink   #2A211B ...........  6.9 : 1   AAA
       danger     #A03328 on paper #F7F4EE ...........  6.4 : 1   AAA
       success    #2F6B4F on paper #F7F4EE ...........  5.7 : 1   AA  (body)
     No decorative low-contrast greys are used for text anywhere.
  -------------------------------------------------------------------------- */
  --paper:          #F7F4EE;   /* bone / ivory page */
  --paper-warm:     #F2EDE4;   /* alternating band  */
  --surface:        #FFFDF8;   /* raised card       */
  --ink:            #2A211B;   /* espresso display  */
  --ink-body:       #57493E;   /* running text      */
  --ink-muted:      #6B5B4D;   /* captions, meta    */
  --brass:          #8A6A2F;   /* single accent     */
  --brass-deep:     #6E5324;   /* accent, pressed   */
  --brass-lit:      #C9A961;   /* accent on dark    */
  --danger:         #A03328;
  --success:        #2F6B4F;

  /* Hairlines, always warm — never neutral grey */
  --rule:           rgba(42, 33, 27, 0.16);
  --rule-strong:    rgba(42, 33, 27, 0.30);
  --rule-faint:     rgba(42, 33, 27, 0.09);
  --rule-invert:    rgba(247, 244, 238, 0.24);

  /* ---- Spacing scale (4px base) ------------------------------------------ */
  --s-1:  0.25rem;   /*  4 */
  --s-2:  0.5rem;    /*  8 */
  --s-3:  0.75rem;   /* 12 */
  --s-4:  1rem;      /* 16 */
  --s-5:  1.5rem;    /* 24 */
  --s-6:  2rem;      /* 32 */
  --s-7:  3rem;      /* 48 */
  --s-8:  4rem;      /* 64 */
  --s-9:  6rem;      /* 96 */
  --s-10: 8rem;      /* 128 */

  /* Vertical rhythm between sections — one value, fluid */
  --section-y: clamp(4rem, 9vw, 8rem);

  /* ---- Type scale (modular, fluid) --------------------------------------- */
  --t-display: clamp(2.75rem, 1.4rem + 6.0vw, 6.25rem);
  --t-h2:      clamp(2rem,   1.35rem + 2.6vw, 3.5rem);
  --t-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-lede:    clamp(1.0625rem, 1rem + 0.5vw, 1.375rem);
  --t-body:    clamp(1rem, 0.97rem + 0.14vw, 1.0625rem);
  --t-small:   0.9375rem;
  --t-micro:   0.75rem;
  --t-figure:  clamp(2.75rem, 1.6rem + 4.4vw, 4.75rem);

  --lh-tight:  1.03;
  --lh-snug:   1.18;
  --lh-body:   1.68;

  --measure:   65ch;

  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* ---- Elevation ----------------------------------------------------------
     Light reads as coming from above: every shadow pairs a tight contact
     shadow with a wide ambient one, and raised surfaces get a top highlight.
  -------------------------------------------------------------------------- */
  --shadow-1:
      0 1px 1px rgba(42, 33, 27, 0.045),
      0 2px 6px -2px rgba(42, 33, 27, 0.055);
  --shadow-2:
      0 1px 1px rgba(42, 33, 27, 0.05),
      0 6px 14px -8px rgba(42, 33, 27, 0.10),
      0 20px 36px -26px rgba(42, 33, 27, 0.16);
  --shadow-3:
      0 1px 2px rgba(42, 33, 27, 0.06),
      0 10px 24px -12px rgba(42, 33, 27, 0.14),
      0 40px 64px -40px rgba(42, 33, 27, 0.26);
  --highlight-top: inset 0 1px 0 rgba(255, 255, 255, 0.72);

  /* ---- Motion ------------------------------------------------------------- */
  --ease:      cubic-bezier(0.22, 0.68, 0.30, 1);
  --dur-fast:  160ms;
  --dur:       280ms;
  --dur-slow:  420ms;   /* reveal ceiling is 450ms */

  --radius-sm: 2px;
  --radius:    3px;
}


/* ==========================================================================
   02  RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Offset for in-page anchors so headings clear the sticky masthead */
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background-color: var(--paper);
  /* A whisper of paper tooth. Cheap, GPU-free, invisible until you look. */
  background-image:
    radial-gradient(1200px 600px at 12% -10%, rgba(255, 255, 255, 0.85), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(201, 169, 97, 0.07), transparent 55%);
  background-attachment: scroll;
  color: var(--ink-body);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Skip link — invisible until focused, then a proper editorial tab */
.skip-link {
  position: fixed;
  top: var(--s-3);
  left: var(--s-3);
  z-index: 200;
  padding: var(--s-3) var(--s-5);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-3);
  transform: translateY(calc(-100% - var(--s-5)));
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus,
.skip-link:focus-visible { transform: translateY(0); }


/* ==========================================================================
   03  TYPOGRAPHY PRIMITIVES
   ========================================================================== */

/* Small-caps eyebrow — looser tracking, as small type wants */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-5);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.eyebrow--accent { color: var(--brass-deep); }
/* The opening announcement is the one thing a first-time visitor must not miss
   while the practice is still pre-opening, so it runs larger than a standard
   eyebrow. Tracking eases off as the size grows, or it reads as gappy. */
.eyebrow--lg {
  font-size: clamp(0.875rem, 0.78rem + 0.42vw, 1.125rem);
  letter-spacing: 0.13em;
}
.eyebrow--lg .eyebrow__dot {
  width: 9px; height: 9px;
  box-shadow: 0 0 0 5px rgba(138, 106, 47, 0.14);
}
/* Keeps the whole label as a single flex item, so it wraps as running text
   instead of splitting into columns with the flex gap between them. Balanced
   so a two-line label breaks evenly rather than leaving one word stranded. */
.eyebrow__text { text-wrap: balance; }
/* On a narrow screen the label wraps; hold the dot to the first line rather
   than letting it float to the vertical centre of the block. */
.eyebrow--lg { align-items: flex-start; }
.eyebrow--lg .eyebrow__dot { margin-top: 0.34em; }
.eyebrow__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(138, 106, 47, 0.14);
  flex: none;
}

.section__title {
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  letter-spacing: -0.015em;   /* tighter as size grows */
  max-width: 18ch;
}

.prose {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink-body);
}
.prose + .prose { margin-top: var(--s-5); }

/* Drop cap — set in the display serif, optically nudged */
.prose--dropcap::first-letter {
  float: left;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 4.2em;
  line-height: 0.78;
  padding: 0.06em var(--s-3) 0 0;
  margin-top: 0.06em;
  color: var(--ink);
}


/* ==========================================================================
   04  LAYOUT SHELLS & SECTION RHYTHM
   ========================================================================== */
.shell {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 4.5rem);
}

.section { padding-block: var(--section-y); }

/* Contact follows the dark band — a hairline keeps the edge from reading hard */
.section--contact { border-top: 1px solid var(--rule-faint); }

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

/* Compass mark set beside a section heading. Wraps rather than squeezing the
   heading, and the hairline only appears once the two sit side by side. */
.section__head--marked {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.4vw, 1.75rem);
}
.section__logo {
  flex: none;
  height: clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem);
  width: auto;
}
@media (min-width: 40rem) {
  .section__head--marked .section__title {
    padding-left: clamp(1rem, 2.4vw, 2rem);
    border-left: 1px solid var(--rule);
  }
}


/* ==========================================================================
   05  BUTTONS, LINKS, FOCUS
   ========================================================================== */

/* One focus treatment everywhere, brass on paper, legible on both bands */
:where(a, button, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--brass-deep);
  outline-offset: 3px;
}
.colophon :where(a, button):focus-visible { outline-color: var(--brass-lit); }

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-bd: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-6);
  min-height: 3rem;
  border: 1px solid var(--btn-bd);
  border-radius: var(--radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease);
}
.btn__icon { flex: none; }

.btn--primary {
  box-shadow: var(--shadow-2), var(--highlight-top);
}
.btn--primary:hover {
  --btn-bg: #17110D;
  --btn-bd: #17110D;
  box-shadow: var(--shadow-3), var(--highlight-top);
}
.btn--primary:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-1);
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: var(--rule-strong);
  box-shadow: var(--shadow-1);
}
.btn--ghost:hover {
  --btn-bg: rgba(138, 106, 47, 0.08);
  --btn-bd: var(--brass);
  --btn-fg: var(--brass-deep);
}
.btn--ghost:active { transform: translateY(1px); box-shadow: none; }

.btn--sm { padding: var(--s-3) var(--s-5); min-height: 2.5rem; font-size: var(--t-micro); }

.btn[disabled],
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.55;
  box-shadow: none;
  transform: none;
  filter: saturate(0.6);
}

/* --- Animated left-origin underline (nav + inline links) ----------------- */
.nav__link,
.ilink {
  position: relative;
  text-decoration: none;
}
.nav__link::after,
.ilink::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -0.15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after,
.ilink:hover::after,
.ilink:focus-visible::after { transform: scaleX(1); }

.nav__link {
  display: inline-block;
  padding-block: var(--s-1);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.02em;
}
.nav__link:hover { color: var(--brass-deep); }
.nav__link:active { color: var(--ink); }

/* Inline links in running text stay underlined by default (a11y), and grow a
   second brass rule from the left on hover. */
.ilink {
  color: var(--brass-deep);
  font-weight: 500;
  box-shadow: inset 0 -1px 0 rgba(110, 83, 36, 0.35);
}
.ilink:hover { color: var(--ink); }
.ilink:active { color: var(--brass-deep); }


/* ==========================================================================
   06  MASTHEAD & NAVIGATION
   ========================================================================== */
.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 244, 238, 0.90);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  transition: box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.masthead.is-stuck {
  background: rgba(247, 244, 238, 0.96);
  box-shadow: 0 1px 0 var(--rule-faint), 0 10px 24px -20px rgba(42, 33, 27, 0.45);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  min-height: 4.5rem;
  padding-block: var(--s-3);
}
.masthead__rule { height: 1px; background: var(--rule-faint); }

/* --- Wordmark ------------------------------------------------------------ */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

/* 360px and below: shed tracking and the hamburger's word so the bar holds */
@media (max-width: 24rem) {
  .masthead__inner { gap: var(--s-3); }
  .wordmark { gap: var(--s-2); }
  .hamburger { padding: var(--s-3); }
  .hamburger__label { display: none; }
}

/* --- Desktop nav --------------------------------------------------------- */
.nav { display: none; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

@media (min-width: 54rem) {  /* ~864px */
  .nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
  .hamburger { display: none !important; }
}
@media (max-width: 71.9375rem) {
  .nav__cta { display: none; }   /* keep the bar from crowding on mid widths */
}

/* --- Hamburger ----------------------------------------------------------- */
.hamburger {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-1), var(--highlight-top);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.hamburger:hover { border-color: var(--brass); background: #FFF; }
.hamburger:active { box-shadow: none; }
.hamburger__bars { display: grid; gap: 4px; width: 18px; }
.hamburger__bars i {
  display: block; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger[aria-expanded="true"] .hamburger__bars i:first-child { transform: translateY(2.75px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__bars i:last-child  { transform: translateY(-2.75px) rotate(-45deg); }

/* --- Mobile drawer ------------------------------------------------------- */
@media (max-width: 53.9375rem) {
  .nav {
    position: fixed;
    inset: 4.5rem 0 auto 0;
    display: block;
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;
    padding: var(--s-6) clamp(1.25rem, 5vw, 2rem) var(--s-7);
    background: var(--surface);
    border-block-end: 1px solid var(--rule);
    box-shadow: var(--shadow-3);
    /* Closed state — visibility:hidden takes it out of the a11y tree and the
       tab order, so no JS is needed to keep the links unreachable. */
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      transform var(--dur) var(--ease),
      opacity var(--dur) var(--ease),
      visibility 0s linear var(--dur);
    z-index: 99;
  }
  .nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }
  .nav__list { display: grid; gap: 0; }
  .nav__list li + li { border-top: 1px solid var(--rule-faint); }
  .nav__link { display: block; padding: var(--s-4) 0; font-size: 1.0625rem; }
  .nav__link::after { bottom: var(--s-3); }
  .nav__cta { display: inline-flex; margin-top: var(--s-6); width: 100%; }
}

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 98;
  background: rgba(42, 33, 27, 0.32);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.nav-scrim.is-visible { opacity: 1; }


/* ==========================================================================
   07  HERO
   --------------------------------------------------------------------------
   Renders at full opacity on first paint. Nothing here fades or slides in.
   Capped near 85vh on desktop so the figures strip peeks above the fold.
   ========================================================================== */
.hero {
  position: relative;
  padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem);
  /* No overflow clipping on the section itself — that would clip focus rings.
     The decorative layer clips itself instead. */
}

/* --- Full-bleed sunset wash ---------------------------------------------
   Sits behind the hero content at low opacity: a dusk gradient, a low sun and
   two ridgelines. The copy reads directly on top of it, so the wash stays pale.

   Measured (not estimated) against the single darkest background pixel inside
   each text block's box at 1440 / 1280 / 390 wide — the worst case, which is
   the ridge rather than anything actually under a glyph:

     headline  --ink        12.4 : 1   (needs 3.0, large text)
     lede      --ink-body    6.7 : 1   (needs 4.5)
     eyebrow   --brass-deep  6.4 : 1   (needs 4.5)
     badges    --ink-body    4.8 : 1   (needs 4.5)  <- tightest by a long way

   The badges sit lowest, where the ridge and the sun's glow overlap, and clear
   AA by only 0.3. Darkening the ridge, deepening the dusk gradient, or moving
   the sun back over them will push that under 4.5 — re-measure if any of those
   change. Cheapest fix if it ever fails: take the badge text to --ink.
------------------------------------------------------------------------- */
.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;          /* clips the bleed without clipping focus rings */
  pointer-events: none;
  z-index: 0;
}
.hero__bg-inner {
  position: absolute;
  inset: -8%;                /* bleed, so the parallax never exposes an edge */
  will-change: transform;
}
.hero__bg-art { width: 100%; height: 100%; display: block; }

/* Below the two-column breakpoint the copy sits over the motif rather than
   beside it, so pull the wash back further. */
@media (max-width: 61.99rem) {
  .hero__bg { opacity: 0.62; }
}
.hero::before {
  /* A single hairline running the full width behind the grid — print feel */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--rule-faint);
}

.hero__grid {
  position: relative;        /* above the decorative layer */
  z-index: 1;
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  align-items: center;
}

@media (min-width: 62rem) {  /* 992px */
  .hero {
    display: flex;
    align-items: center;
    /* Capped near 85vh — never 100vh — so the figures strip peeks through.
       min-height only: content can always grow past it, so nothing is ever
       clipped on short or zoomed viewports. */
    min-height: min(85vh, 54rem);
  }
  .hero__grid {
    width: 100%;
    /* Asymmetric editorial split: copy wider than the plate */
    grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.78fr);
    gap: clamp(3rem, 6vw, 6rem);
  }
}

.hero__title {
  margin: 0 0 var(--s-5);
  font-size: var(--t-display);
  font-weight: 300;
  line-height: var(--lh-tight);
  letter-spacing: -0.028em;   /* display sizes want it tight */
  color: var(--ink);
  max-width: 14ch;
}
.hero__title em {
  font-style: italic;
  font-weight: 400;
  color: var(--brass-deep);
}

.hero__lede {
  max-width: 46ch;
  font-size: var(--t-lede);
  line-height: 1.58;
  color: var(--ink-body);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule-faint);
}
.badges__item {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink-body);
}
.badges__item::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  flex: none;
  /* optical: nudge the dot to the x-height centre of the label */
  transform: translateY(0.5px);
}

/* --- Portrait plate ------------------------------------------------------- */
.portrait { margin: 0; }
.portrait__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--paper-warm);
  box-shadow: var(--shadow-3), var(--highlight-top);
  /* Reserved ratio — zero layout shift when the photograph lands */
  aspect-ratio: 4 / 5;
  margin-inline: auto;
  max-width: 28rem;
}
/* The photograph, once supplied. object-fit keeps any crop from squashing. */
.portrait__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Holding plate. Deliberately legible as a placeholder rather than a broken
   image, so it cannot ship unnoticed — but still composed, in case it does. */
.portrait__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  background:
    linear-gradient(160deg, rgba(247, 244, 238, 0.85), rgba(226, 213, 190, 0.55));
  color: var(--brass-deep);
}
.portrait__mark { width: clamp(4.5rem, 9vw, 6.5rem); height: auto; opacity: 0.5; }
.portrait__hint {
  margin: 0;
  text-align: center;
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ==========================================================================
   08  ABOUT / CREDENTIALS
   ========================================================================== */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 62rem) {
  .about__grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    align-items: start;
  }
}

.credentials {
  position: relative;
  padding: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2), var(--highlight-top);
}
.credentials__title {
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-faint);
  font-family: var(--sans);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.credentials__list { display: grid; gap: var(--s-5); }
.credentials__row dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
}
.credentials__row dd {
  margin-top: var(--s-1);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.34;
  color: var(--ink);
}


/* ==========================================================================
   09  PATIENT NOTES
   ========================================================================== */
.notes { display: grid; gap: var(--s-6); }
@media (min-width: 52rem) { .notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.note {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2), var(--highlight-top);
}
.note__title {
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule-faint);
  font-size: 1.375rem;
  line-height: 1.24;
}
.note__text, .note__foot { font-size: var(--t-small); color: var(--ink-body); }
.note__foot { margin-top: auto; padding-top: var(--s-2); }

.note__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.note__list--tags li {
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--ink);
}
.hours { font-size: var(--t-small); }
.hours th, .hours td {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule-faint);
  text-align: left;
  vertical-align: baseline;
}
.hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; }
.hours th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.hours td {
  text-align: right;
  color: var(--ink-body);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   10  CONTACT
   ========================================================================== */
.contact__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) {
  .contact__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.contact__list {
  display: grid;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--rule-faint);
}
.contact__row dt {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.contact__row dd {
  margin-top: var(--s-2);
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--ink);
}
.contact__row dd .ilink { font-family: var(--sans); font-size: 1.0625rem; }

.mapblock {
  overflow: hidden;
  aspect-ratio: 16 / 9;         /* reserved — no layout shift */
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2), var(--highlight-top);
}

/* ==========================================================================
   11  COLOPHON (footer)
   ========================================================================== */
.colophon {
  padding-block: clamp(3rem, 6vw, 5rem) var(--s-6);
  background: var(--ink);
  color: rgba(247, 244, 238, 0.86);
}
.colophon__inner {
  display: grid;
  gap: var(--s-7);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--rule-invert);
}
@media (min-width: 52rem) {
  .colophon__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--s-8);
  }
}

.wordmark--footer { color: var(--paper); }
.colophon__addr {
  margin-top: var(--s-5);
  max-width: 44ch;
  font-size: var(--t-small);
  line-height: 1.8;
  color: rgba(247, 244, 238, 0.86);
}
.colophon .ilink {
  color: var(--brass-lit);
  box-shadow: inset 0 -1px 0 rgba(201, 169, 97, 0.4);
}
.colophon .ilink:hover { color: var(--paper); }

.colophon__nav ul {
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 30rem) {
  .colophon__nav ul { grid-template-columns: repeat(2, minmax(8rem, auto)); gap: var(--s-3) var(--s-7); }
}
.colophon__nav .nav__link { color: rgba(247, 244, 238, 0.86); }
.colophon__nav .nav__link:hover { color: var(--brass-lit); }

.colophon__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-3) var(--s-6);
  padding-top: var(--s-6);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
  color: rgba(247, 244, 238, 0.78);
}
.colophon__base p { margin: 0; }
.colophon__legal { max-width: 52ch; }


/* ==========================================================================
   12  SCROLL REVEALS — fail safe by construction
   --------------------------------------------------------------------------
   Default state below is fully visible. JS *opts in* by adding .is-armed to
   elements that start below the fold; the observer then adds .is-revealed.
   If JS never runs, nothing is hidden and the page is perfect.
   ========================================================================== */
[data-reveal] { opacity: 1; transform: none; }

[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(14px);   /* <= 16px */
  transition:
    opacity 420ms var(--ease),
    transform 420ms var(--ease);
}
[data-reveal].is-armed.is-revealed { opacity: 1; transform: none; }

/* Small stagger inside grouped lists, capped so nothing lags noticeably */
.notes .note.is-armed:nth-child(2),
.notes .note.is-armed:nth-child(3),


/* ==========================================================================
   13  REDUCED MOTION & PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  /* Belt and braces: never hide content, never parallax */
  [data-reveal],
  [data-reveal].is-armed { opacity: 1 !important; transform: none !important; }
  .hero__bg-inner { transform: none !important; }
}

@media print {
  .masthead, .nav-scrim, .hero__actions, .skip-link, .hero__bg { display: none !important; }
  body { background: #fff; color: #000; background-image: none; }
  .colophon { background: #fff; color: #000; }
  .colophon__addr, .colophon__base, .colophon__nav .nav__link,
  .wordmark--footer { color: #000; }
  .colophon .ilink { color: #000; box-shadow: none; }
  .section { padding-block: 1.5rem; }
  .note, .credentials, .mapblock, .portrait__frame { box-shadow: none; }
  /* Hover underlines have no meaning on paper */
  .ilink::after, .nav__link::after { content: none; }
  /* The footer lockup is ivory artwork; invert it so it reads on white paper. */
  .wordmark--footer .wordmark__img { filter: invert(1); }
}


/* ==========================================================================
   14  ATLAS PSYCHIATRY
   --------------------------------------------------------------------------
   Additions to the base art direction: the supplied logo lockup (used in
   place of the original SVG monogram) and the crisis notice.
   ========================================================================== */

/* --- Logo lockup ---------------------------------------------------------
   Two colourways of the same artwork, generated with alpha taken from the
   drawing's darkness so the anti-aliased edges stay clean on ivory:
     atlas-logo-ink.png    espresso, for the masthead
     atlas-logo-paper.png  ivory, for the dark footer
   Intrinsic size is 536x193; width/height are set on the <img> so the box is
   reserved before the file loads and the masthead never shifts.
------------------------------------------------------------------------- */
.wordmark__img {
  display: block;
  height: clamp(1.75rem, 1.2rem + 1.5vw, 2.375rem);
  width: auto;
  transition: opacity var(--dur) var(--ease);
}
.wordmark:hover .wordmark__img,
.wordmark:focus-visible .wordmark__img { opacity: 0.74; }

.wordmark--footer .wordmark__img { height: 2.25rem; }

@media (max-width: 24rem) {
  .wordmark__img { height: 1.625rem; }
}

/* --- Contact: details beside the locator, no form card ------------------- */
@media (min-width: 62rem) {
  .contact__grid--simple { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* --- Crisis notice -------------------------------------------------------
   A psychiatric practice needs this above the footer, not buried in it. Warm
   wash rather than a loud alert box, so it reads as care instead of alarm.
   Contrast: danger #A03328 on #FBF3EF = 6.2:1, body #57493E = 7.6:1 — AA.
------------------------------------------------------------------------- */
.crisis {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.25rem, 3vw, 2.25rem);
  background: #FBF3EF;
  border: 1px solid rgba(160, 51, 40, 0.20);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1, none);
}
.crisis__title {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin: 0 0 var(--s-3);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--danger);
}
.crisis__title svg { flex: none; }
.crisis__text {
  margin: 0 0 var(--s-4);
  max-width: 62ch;
  color: var(--ink-body);
  line-height: var(--lh-body);
}
.crisis__list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}
.crisis__list li {
  position: relative;
  padding-left: var(--s-5);
  color: var(--ink-body);
  line-height: var(--lh-body);
}
.crisis__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 10px;
  height: 1px;
  background: var(--danger);
  opacity: 0.75;
}
.crisis__list strong { color: var(--ink); font-weight: 600; }

/* --- Dark band: the Visit section ---------------------------------------
   The espresso band that used to carry the pull quote now sits behind the
   insurance / hours / booking cards, so the page still breaks into light and
   dark thirds. Cards become translucent rather than solid, so they read as
   panels lit from above instead of white boxes dropped on a dark ground.

   Contrast on the card surface (#352D27, ivory at 5.5% over ink):
     paper       #F7F4EE ......... 12.3 : 1   AAA
     body 80%    ~#D0CCC6 .........  8.5 : 1   AAA
     brass-lit   #C9A961 .........  6.0 : 1   AA
------------------------------------------------------------------------- */
.section--dark {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  border-block: 0;
}
.section--dark::after {
  /* Same warm top-left glow the quote band used, agreeing with the page light */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70rem 32rem at 18% 0%, rgba(201, 169, 97, 0.16), transparent 62%);
  pointer-events: none;
}
.section--dark > .shell { position: relative; z-index: 1; }

.section--dark :where(a, button):focus-visible { outline-color: var(--brass-lit); }

.section--dark .note {
  background: rgba(247, 244, 238, 0.055);
  border-color: rgba(247, 244, 238, 0.16);
  box-shadow: 0 1px 0 rgba(247, 244, 238, 0.07) inset,
              0 18px 40px -28px rgba(0, 0, 0, 0.75);
}
.section--dark .note__title {
  color: var(--paper);
  border-bottom-color: rgba(247, 244, 238, 0.18);
}
.section--dark .note__text,
.section--dark .note__foot { color: rgba(247, 244, 238, 0.80); }

.section--dark .note__list--tags li {
  background: rgba(247, 244, 238, 0.07);
  border-color: rgba(247, 244, 238, 0.22);
  color: var(--paper);
}

/* "More coming soon" is a status, not a plan name. A dashed, unfilled pill
   keeps it in the row without letting it read as another insurer.
   Contrast on the dark card: 7.2 : 1 — AAA. */
.note__list--tags li.tag--soon {
  background: transparent;
  border-style: dashed;
  color: var(--ink-muted);
  font-weight: 400;
  font-style: italic;
}
.section--dark .note__list--tags li.tag--soon {
  background: transparent;
  border-color: rgba(247, 244, 238, 0.30);
  color: rgba(247, 244, 238, 0.72);
}

.section--dark .hours th { color: var(--paper); }
.section--dark .hours td { color: rgba(247, 244, 238, 0.80); }
.section--dark .hours th,
.section--dark .hours td { border-bottom-color: rgba(247, 244, 238, 0.14); }

.section--dark .ilink {
  color: var(--brass-lit);
  box-shadow: inset 0 -1px 0 rgba(201, 169, 97, 0.4);
}
.section--dark .ilink:hover { color: var(--paper); }

/* --- Live Google map -----------------------------------------------------
   The frame keeps the same reserved 16/9 box as the previous illustration, so
   nothing shifts while the map loads.
------------------------------------------------------------------------- */
.mapblock--live { background: var(--paper-warm); }
.mapblock iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.mapblock__link {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--ink-muted);
}

@media print {
  /* Keep the crisis information on paper. */
  .crisis { border-color: #000; background: #fff; }
  .crisis__title, .crisis__list li::before { color: #000; background-color: #000; }
  /* An interactive map is meaningless on paper; the address above carries it. */
  .mapblock--live { display: none; }
  /* The dark band would waste a cartridge. */
  .section--dark { background: #fff; color: #000; }
  .section--dark::after { display: none; }
  .section--dark .note,
  .section--dark .note__list--tags li { background: #fff; border-color: #999; }
  .section--dark .note__title,
  .section--dark .note__text,
  .section--dark .note__foot,
  .section--dark .hours th,
  .section--dark .hours td { color: #000; }
  .section--dark .ilink { color: #000; box-shadow: none; }
}