/* ============================================================
   Keshav Multispeciality Hospital, "Serene"
   Calm, airy, editorial. Sage + warm white, light serif + humanist sans.
   ============================================================ */

/* ---------- Tokens ---------- */
:root {
  /* Palette pulled from the hospital's own walls */
  --warm-white:  #faf8f3;
  --paper:       #f3f0e8;
  --sage-mist:   #e6ebe3;
  --sage:        #b9c7b8;
  --sage-deep:   #4a6b5d;
  --ink:         #1f2a26;   /* 13.9:1 on --warm-white */
  --ink-soft:    #4a5550;   /* 7.6:1  on --warm-white */
  --teak:        #8a6237;
  --gold:        #7d5f1c;   /* darkened from signage gold to clear AA at small sizes */
  --nicu-teal:   #2f6b5e;
  --alert:       #97331f;   /* muted, not a harsh saturated red */
  --alert-deep:  #85342a;   /* the strip fills a whole band, so it is deepened
                               and desaturated further to sit calmly */
  --line:        #ddd8cc;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua",
           Georgia, "Times New Roman", serif;
  --sans:  ui-sans-serif, "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;

  --shell: 68rem;
  --shell-wide: 84rem;
  --gutter: 1.5rem;
  --header-height: 4.3125rem;

  /* Generous vertical rhythm: whitespace is the design */
  --space-section: 5.5rem;
  --radius: 2px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

@media (min-width: 48em) {
  :root { --gutter: 2.5rem; --space-section: 8rem; }
}
@media (min-width: 75em) {
  :root { --gutter: 3rem; --space-section: 10rem; }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
/* Native anchor scrolling also drives the stethoscope; no separate animation. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
section[id], #main { scroll-margin-top: calc(var(--header-height) + 1rem); }

body {
  margin: 0;
  background: var(--warm-white);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
dl, dd { margin: 0; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

/* ---------- Focus & skip link ---------- */
:focus-visible {
  outline: 2px solid var(--nicu-teal);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--warm-white);
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Layout ---------- */
.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--wide { max-width: var(--shell-wide); }

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

.section__head { max-width: 34rem; margin-bottom: 3.5rem; }
.section__head--flush { margin-bottom: 0; }
.section__head--centred { margin-inline: auto; text-align: center; }
.section__head--centred .section__lede { margin-inline: auto; }

.eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: 1.25rem;
  font-weight: 500;
}

.section__title {
  font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem);
  margin-bottom: 1.25rem;
}

.section__lede {
  color: var(--ink-soft);
  font-size: 1.0625rem;
  max-width: 32rem;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--warm-white) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }

.header-inner {
  max-width: var(--shell-wide);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.wordmark {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.wordmark__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
}
.wordmark__sub {
  font-size: .625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: .25rem;
}

/* ---------- Section dot navigation ---------- */
/* Reserve the rail's lane, including on narrow phones, rather than covering
   text, gallery controls or contact links. Section backgrounds stay full bleed. */
main .shell, .site-footer .shell {
  padding-inline-end: max(var(--gutter), calc(2.75rem + env(safe-area-inset-right)));
}
.section-nav {
  position: fixed;
  z-index: 35;
  inset-inline-end: calc(.25rem + env(safe-area-inset-right));
  top: calc(50% + var(--header-height) / 2);
  transform: translateY(-50%);
  padding-block: .25rem;
}
/* Decorative only: it never captures clicks or changes the rail's geometry. */
.section-nav__stethoscope {
  position: absolute;
  inset-inline-start: 0;
  top: .25rem;
  width: 32px;
  height: calc(100% - .5rem);
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: rgb(85 90 87 / 55%);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.section-nav__head circle:first-child { fill: var(--warm-white); }
.section-nav__head circle:last-child { fill: var(--ink-soft); stroke: none; }
@media (prefers-reduced-motion: reduce), (max-height: 36rem) {
  .section-nav__stethoscope { display: none; }
}
.section-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  text-decoration: none;
  border-radius: 50%;
}
.section-nav__link::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgb(85 90 87 / 65%);
}
.section-nav__link[aria-current="location"]::before {
  transform: scale(2);
  background: rgb(85 90 87 / 90%);
}
.section-nav__link:focus-visible {
  outline-offset: -4px;
  border-radius: 50%;
}
.section-nav__label {
  position: absolute;
  inset-inline-end: calc(100% + .6rem);
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: calc(100vw - 5rem);
  padding: .4rem .75rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--warm-white);
  font-size: .75rem;
  line-height: 1.5;
  opacity: 0;
  pointer-events: none;
}
.section-nav__link:focus-visible .section-nav__label { opacity: 1; }
@media (hover: hover) {
  .section-nav__link:hover::before { background: rgb(85 90 87 / 90%); }
  .section-nav__link:hover .section-nav__label { opacity: 1; }
}
/* Short landscape screens use smaller, still distinct touch targets. At very
   short heights the list itself scrolls, keeping every link reachable. */
@media (max-height: 36rem) {
  .section-nav__link { height: 28px; }
}
@media (max-height: 22rem) {
  .section-nav ol {
    max-height: calc(100svh - var(--header-height) - 2rem);
    overflow-y: auto;
  }
}
body.is-locked .section-nav { visibility: hidden; }
@media print {
  .section-nav { display: none; }
  main .shell, .site-footer .shell { padding-inline-end: var(--gutter); }
}

/* ---------- Emergency strip ----------
   Full bleed, directly under the header, above the fold, and deliberately not
   sticky. Tuned for this direction: the brick is deepened and desaturated so
   it reads as a calm, solid band rather than a warning tape, and the label is
   set in the serif at a normal weight so it speaks rather than shouts. It is
   still the highest-contrast element above the fold, which is what makes it
   the most prominent thing on first paint. */
.emergency-strip {
  background: var(--alert-deep);
  color: #fff;
}

.emergency-strip__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .75rem;
  padding-block: .7rem;
  font-size: .95rem;
  line-height: 1.45;
}

.emergency-strip svg {
  width: 18px;
  height: 18px;
  flex: none;
  fill: currentColor;
  opacity: .9;
}

.emergency-strip__label {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: .01em;
}

/* Both numbers sit in one group so they wrap together and the separator can
   never be stranded at the end of a line on its own. */
.emergency-strip__numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem .6rem;
}

.emergency-strip__or {
  opacity: .75;
  font-size: .9rem;
}

.emergency-strip__link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  /* Comfortable tap target without making the band tall. */
  padding-block: .25rem;
  /* A phone number must never break across two lines. */
  white-space: nowrap;
}
.emergency-strip__link:hover { text-decoration-thickness: 2px; }
.emergency-strip__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* On a narrow phone the number drops to its own line so it can never be pushed
   off the edge. The icon stays alongside the question, which keeps the band to
   two lines rather than three. */
@media (max-width: 30em) {
  .emergency-strip__inner { gap: .1rem .5rem; }
  .emergency-strip__label { flex: 1; }
  .emergency-strip__numbers { flex: 1 1 100%; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font-size: .875rem;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  flex: none;
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease);
}

.btn--primary { background: var(--sage-deep); color: #fff; }
.btn--primary:hover { background: #3c5a4d; }

.btn--ghost { border-color: var(--sage); color: var(--ink); }
.btn--ghost:hover { border-color: var(--sage-deep); color: var(--sage-deep); }

.btn--emergency { background: var(--alert); color: #fff; }
.btn--emergency:hover { background: #7d2818; }

/* The large call button carries a full phone number, which is too long to keep
   on one line on a narrow phone, so it is allowed to wrap and centre. */
.btn--large {
  padding: 1rem 1.9rem;
  font-size: 1rem;
  white-space: normal;
  text-align: center;
  border-radius: 1.75rem;
}

.btn__dot {
  width: .5rem; height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

/* ---------- Temporary experimental hero ---------- */
.hero {
  padding-block: 2.5rem 3rem;
  background: linear-gradient(180deg, var(--warm-white) 60%, var(--sage-mist));
}
.hero__layout { display: grid; gap: 2rem; max-width: 75rem; }
.hero__layout > * { min-width: 0; }
.hero__intro { text-align: center; }
.hero__intro .eyebrow { margin-bottom: 1rem; }
.hero__title {
  font-size: clamp(2.5rem, 1.4rem + 3.4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero__triptych {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "brand brand" "left right";
  gap: 1.75rem 1rem;
  align-items: center;
}
.hero__doctor { align-self: start; min-width: 0; }
.hero__doctor--left { grid-area: left; }
.hero__doctor--right { grid-area: right; }
.hero__doctor picture { display: block; }
/* Equal-height transparent canvases keep both complete figures bottom-aligned.
   No background or rounded frame: the supplied cutouts sit directly on the page. */
.hero__doctor img {
  width: 100%;
  height: auto;
}
.hero__doctor figcaption {
  padding-top: .75rem;
  font-family: var(--serif);
  font-size: clamp(1rem, .8rem + .5vw, 1.25rem);
  line-height: 1.35;
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}
.hero__brand { grid-area: brand; min-width: 0; }
.hero__brand picture { display: block; }
.hero__brand img { width: 240px; height: auto; margin-inline: auto; }
.hero__caption {
  color: var(--sage-deep);
  font-size: .875rem;
  text-align: center;
}
/* Keep the complete logo readable on phones: centered above the paired
   portraits instead of shrinking its lettering into a narrow third column. */
@media (min-width: 40em) {
  .hero { padding-block: 3rem 3.5rem; }
  .hero__triptych {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "left brand right";
    column-gap: 2rem;
  }
  .hero__brand { padding-bottom: 2.5rem; }
  .hero__brand img { width: 280px; }
  .hero__title br { display: none; }
}

/* ---------- Doctors ---------- */
.section--doctors { background: var(--paper); padding-block: 4rem; }
.section--doctors .section__head { margin-bottom: 2.5rem; }

.doctors {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 48em) {
  .doctors { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

.doctor {
  padding: 1.5rem;
  background: var(--warm-white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--sage);
  border-radius: .75rem;
}
.doctor__note { padding-top: 1rem; border-top: 1px solid var(--line); }

/* New photographs use square head-and-shoulder crops and responsive sources.
   Keep the existing circular framing and stable display dimensions. */
.doctor__portrait {
  width: 7.5rem;
  height: 7.5rem;
  max-width: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  border-radius: 50%;
  background: var(--sage-mist);
  border: 1px solid var(--sage);
  padding: 4px;
  margin-bottom: 1.5rem;
  filter: saturate(.94);
}
@media (min-width: 48em) {
  .doctor__portrait { width: 8.5rem; height: 8.5rem; }
}

.doctor__name { font-size: 1.625rem; margin-bottom: .5rem; }

.doctor__quals {
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .35rem;
}

.doctor__field {
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 1rem;
}

.doctor__note { color: var(--ink-soft); font-size: .9375rem; max-width: 28rem; }

.doctors__media {
  display: grid;
  gap: 2rem;
  margin-top: 4.5rem;
}
@media (min-width: 48em) {
  .doctors__media { grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
}

/* ---------- Figures ---------- */
.figure img {
  width: 100%;
  border-radius: var(--radius);
  background: var(--sage-mist);
}
.doctors__media .figure img { aspect-ratio: 3 / 2; object-fit: cover; }

.figure figcaption,
.gallery figcaption {
  margin-top: .875rem;
  font-size: .8125rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
}

.figure--wide {
  margin-top: 4.5rem;
  max-width: 100%;
}
.figure--wide img { aspect-ratio: 3 / 2; object-fit: cover; }

/* ---------- Journey ---------- */
.journey__intro {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 4rem;
}
@media (min-width: 52em) {
  .journey__intro {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4rem;
    margin-bottom: 5rem;
  }
}

/* The framed line drawing that hangs in the hospital. Black on white, so it
   needs no treatment beyond room to breathe. */
.motif img {
  width: 100%;
  max-width: 13rem;
  height: auto;
  border-radius: var(--radius);
  mix-blend-mode: multiply;
}
@media (min-width: 52em) {
  .motif { justify-self: end; }
  .motif img { max-width: 15rem; }
}

.journey {
  display: grid;
  gap: 2.25rem;
  counter-reset: step;
}
@media (min-width: 40em) { .journey { grid-template-columns: 1fr 1fr; gap: 3rem 2.5rem; } }
@media (min-width: 64em) { .journey { grid-template-columns: repeat(4, 1fr); } }

.journey__step { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.journey__step--emergency { grid-column: 1 / -1; }
.journey__step--emergency p:not(.journey__num) { max-width: 68ch; }

.journey__num {
  font-family: var(--serif);
  font-size: .9375rem;
  color: var(--sage-deep);
  margin-bottom: .75rem;
  letter-spacing: .08em;
}

.journey__step h3 { font-size: 1.25rem; margin-bottom: .6rem; }
.journey__step p { color: var(--ink-soft); font-size: .9375rem; }

/* ---------- Services ---------- */
.services { display: grid; gap: 2rem; }
@media (min-width: 40em) { .services { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
@media (min-width: 64em) { .services { grid-template-columns: repeat(3, 1fr); } }

.service { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.service h3 { font-size: 1.1875rem; margin-bottom: .5rem; }
.service p { color: var(--ink-soft); font-size: .9375rem; }

/* ---------- Intensive care ---------- */
.intensive {
  margin-top: 4.5rem;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.intensive__title { font-size: 1.5rem; margin-bottom: .875rem; }
.intensive__lede {
  color: var(--ink-soft);
  font-size: .9375rem;
  max-width: 34rem;
  margin-bottom: 2.5rem;
}
.intensive__list { display: grid; gap: 1.75rem; }
@media (min-width: 40em) { .intensive__list { grid-template-columns: 1fr 1fr; gap: 2rem 2.5rem; } }
@media (min-width: 64em) { .intensive__list { grid-template-columns: repeat(4, 1fr); } }

.intensive__list h4 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.0625rem;
  margin: 0 0 .4rem;
  color: var(--nicu-teal);
}
.intensive__list p { color: var(--ink-soft); font-size: .875rem; }

/* ---------- Tour (video) ---------- */
.section--tour { background: var(--paper); }

/* The walkthrough is vertical 9:16, so it sits in a phone-shaped frame with
   plenty of space around it rather than stretching across the page. */
.tour__frame {
  margin-inline: auto;
  max-width: 21rem;
  padding-block: 1rem;
}
.tour__frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  border-radius: 6px;
}
/* Click-to-play poster, substituted for the video by JS. */
.tour__poster {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--ink);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  line-height: 0;
}
.tour__poster img {
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  transition: opacity .35s var(--ease);
}
.tour__poster:hover img { opacity: .88; }

.tour__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.tour__play svg {
  width: 3.75rem;
  height: 3.75rem;
  padding: 1rem;
  box-sizing: border-box;
  fill: var(--ink);
  background: rgba(250, 248, 243, .92);
  border-radius: 50%;
  transition: transform .3s var(--ease);
}
.tour__poster:hover .tour__play svg { transform: scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .tour__poster:hover .tour__play svg { transform: none; }
}

.tour__fallback { padding: 1.5rem; color: var(--paper); font-size: .9375rem; }
.tour__fallback a { color: var(--paper); }

.tour__note {
  margin-inline: auto;
  margin-top: 2.5rem;
  max-width: 30rem;
  text-align: center;
  font-size: .875rem;
  color: var(--ink-soft);
}

.pmjay {
  margin-top: 4.5rem;
  padding: 2.25rem;
  background: var(--sage-mist);
  border-radius: var(--radius);
  max-width: 44rem;
}
.pmjay__title { font-size: 1.25rem; margin-bottom: .75rem; color: var(--sage-deep); }
.pmjay p { color: var(--ink-soft); font-size: .9375rem; }

/* ---------- Gallery ---------- */
.section--gallery { background: var(--paper); }

.gallery {
  display: grid;
  gap: 1.75rem;
}
@media (min-width: 40em) { .gallery { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (min-width: 64em) { .gallery { grid-template-columns: repeat(3, 1fr); gap: 2.5rem 2rem; } }

.gallery__item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--sage-mist);
}

/* JS-enhanced: each figure becomes a button */
.gallery__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
}
.gallery__btn img { transition: opacity .35s var(--ease); }
.gallery__btn:hover img { opacity: .82; }

/* ---------- FAQ ----------
   A quiet definition list rather than an accordion: everything is visible at
   once, there is nothing to click, and it needs no JavaScript. The question
   carries the serif so it reads as a small heading without becoming one. */
.section--faq { background: var(--paper); }

.faq { display: grid; gap: 0; max-width: 44rem; }

.faq__item {
  border-top: 1px solid var(--line);
  padding-block: 1.75rem;
}
.faq__item:last-child { border-bottom: 1px solid var(--line); }

.faq dt {
  font-family: var(--serif);
  font-size: 1.1875rem;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: .6rem;
}

.faq dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: .9375rem;
  max-width: 40rem;
}

@media (min-width: 48em) {
  .faq__item {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 2rem;
    padding-block: 2rem;
  }
  .faq dt { margin-bottom: 0; }
}

/* ---------- Contact ---------- */
.contact {
  display: grid;
  gap: 3rem;
}
/* Grid items default to min-width:auto, which lets long content push the
   track wider than the viewport. */
.contact > * { min-width: 0; }
@media (min-width: 56em) {
  .contact { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}

.contact__emergency {
  padding: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
}
.contact__emergency h3 { font-size: 1.5rem; margin-bottom: .75rem; }
.contact__emergency .btn { max-width: 100%; }
.contact__emergency p { color: var(--ink-soft); font-size: .9375rem; margin-bottom: 1.5rem; }
.contact__hint { font-size: .8125rem; margin-top: 1.25rem; margin-bottom: 0; }

.contact__details > div {
  border-top: 1px solid var(--line);
  padding-block: 1.125rem;
}
.contact__details dt {
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage-deep);
  margin-bottom: .4rem;
}
.contact__details dd { font-size: 1rem; }
.contact__details address { font-style: normal; line-height: 1.6; }
.contact__details a { text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: 4rem;
}
.footer-inner { display: grid; gap: 1.5rem; }

.site-footer .wordmark__name { color: var(--paper); display: block; font-size: 1.25rem; }
.site-footer .wordmark__sub  { color: #b9c2bd; display: block; margin-top: .3rem; }

.footer__tag {
  font-family: var(--serif);
  font-style: italic;
  color: #cbb98a;
  font-size: 1.0625rem;
}

.footer__nav ul { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.footer__nav a { font-size: .875rem; color: #ced5d1; text-decoration: none; }
.footer__nav a:hover { color: #fff; text-decoration: underline; }

.footer__address {
  font-style: normal;
  font-size: .875rem;
  line-height: 1.7;
  color: #ced5d1;
  max-width: 30rem;
}
.footer__address a { color: #ced5d1; text-underline-offset: 3px; overflow-wrap: anywhere; }
.footer__address a:hover { color: #fff; }

.footer__legal { font-size: .8125rem; color: #a7b0ab; max-width: 30rem; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: rgba(24, 30, 28, .96);
  color: var(--paper);
}
.lightbox[hidden] { display: none; }

.lightbox__bar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.lightbox__count { font-size: .8125rem; letter-spacing: .1em; color: #b9c2bd; }

.lightbox__close {
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: var(--paper);
  font: inherit;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1.1rem;
  cursor: pointer;
}
.lightbox__close:hover { border-color: #fff; }

.lightbox__figure {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 0;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__figure figcaption {
  font-size: .875rem;
  color: #ced5d1;
  text-align: center;
}

.lightbox__nav {
  grid-row: 3;
  background: none;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: var(--paper);
  font-size: 1.5rem;
  line-height: 1;
  width: 3rem; height: 3rem;
  cursor: pointer;
}
.lightbox__nav:hover { border-color: #fff; }
.lightbox__nav--prev { grid-column: 1; justify-self: start; }
.lightbox__nav--next { grid-column: 3; justify-self: end; }

@media (min-width: 48em) {
  .lightbox { padding: 1.5rem 2rem; }
  .lightbox__nav { grid-row: 2; }
  .lightbox__figure { grid-column: 2; }
  .lightbox__figure img { max-height: 76vh; }
}

body.is-locked { overflow: hidden; }

/* Scroll reveal was removed on purpose. Content is painted in full on load
   rather than fading in as you scroll: it is simpler, faster on a slow phone,
   and does not hide text from in-page search or from a user who scrolls
   quickly. The .reveal class no longer exists in the markup. */
/* No timed transitions or keyframes. Only the decorative SVG follows scrolling,
   directly in JavaScript, with no idle animation or content reveal. */
*, *::before, *::after { animation: none !important; transition: none !important; }