/* Concept: "A light left on." The page is the MRM lighthouse and its beam: the hero photograph is what the beam lights (an open door at dusk), and at the close the same beam lands on 1305 Clinton Street. Form from their own logo: white tower, cross on the lantern, one wedge of light across navy, the swell of ground under it. */
:root {
  /* colour: sampled from the MRM logo and the lamplight in the hero photograph */
  --night: #22245E;      /* logo navy #33368B deepened: the dark the light is on in */
  --navy: #33368B;       /* the logo's square, exact */
  --beam: #838AC2;       /* the logo's periwinkle rule: rules and large type only */
  --beam-lit: #AEB3DC;   /* periwinkle lifted for small text on night (6.6:1) */
  --lamp: #F4B860;       /* the sconce glow by the open door: on night only, or under ink */
  --fog: #ECEDF4;        /* page ground, biased to the navy (not cream, not grey) */
  --ink: #1B1C3A;        /* body text, navy-black */
  --slate: #4A4C6B;      /* secondary text on fog (7:1) */
  --white: #FFFFFF;

  /* type: Belleza is the flared, Optima-built letter of the MRM mark on their logo;
     Inclusive Sans was drawn so that anyone can read it, which is radical hospitality set in type */
  --display: "Belleza", "Optima", "Candara", "Segoe UI", sans-serif;
  --body: "Inclusive Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* scale */
  --hero: clamp(2.6rem, 0.6rem + 4.6vw, 4.75rem);   /* 42 to 76 px */
  --h2: clamp(2rem, 1.45rem + 1.7vw, 2.75rem);      /* 32 to 44 px */
  --quote: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  --text: 1.125rem;                                 /* 18 px */
  --small: 0.95rem;

  --gutter: 16px;
  --edge: max(var(--gutter), calc((100% - 1288px) / 2));
  --head-h: 60px;
  --space: clamp(72px, 9vw, 136px);
}

@media (min-width: 640px) { :root { --gutter: 32px; } }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); }
body {
  margin: 0;
  background: var(--fog);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text);
  line-height: 1.6;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
h2 { font-size: var(--h2); color: var(--navy); }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: var(--navy); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--lamp); }

.skip {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  background: var(--white); color: var(--navy); padding: 12px 16px; font-weight: 700;
}
.skip:focus { top: 8px; }

.wrap { padding-inline: var(--edge); }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* buttons: one primary action per screen */
.call {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 12px 22px;
  background: var(--lamp); color: var(--ink);
  font-weight: 700; font-size: 1.125rem; text-decoration: none;
  border-radius: 999px;
}
.call:hover { background: #FFD08A; }
.call svg { width: 20px; height: 20px; flex: none; }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 10px 22px;
  background: var(--navy); color: var(--white); font-weight: 700; text-decoration: none; border-radius: 999px;
}
.btn:hover { background: var(--night); }

/* ---------- header (sticky, 60 px, white like the paper the logo sits on) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 3px solid var(--navy);
}
.bar {
  display: flex; align-items: center; gap: 8px;
  height: calc(var(--head-h) - 3px);
  padding-inline: var(--edge);
  position: relative;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; margin-right: auto;
  color: var(--navy); text-decoration: none;
}
.brand__mark { position: relative; width: 52px; height: 40px; overflow: hidden; flex: none; }
.brand__mark img { position: absolute; width: 62px; max-width: none; height: auto; left: -5px; top: -4px; }
.brand__name { font-family: var(--display); font-size: 1rem; line-height: 1.05; }
.brand__name span { display: block; }
@media (max-width: 369px) { .brand__name { display: none; } }
@media (min-width: 1024px) and (max-width: 1179px) { .brand__name { display: none; } }

.menu-btn {
  display: none; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  background: transparent; color: var(--navy);
  border: 2px solid var(--navy); border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.menu-btn svg { width: 18px; height: 18px; display: none; }
.js .menu-btn { display: inline-flex; }
@media (min-width: 480px) { .menu-btn svg { display: block; } }

.head-call {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 12px;
  background: var(--navy); color: var(--white);
  font-weight: 700; font-size: 1rem; text-decoration: none; border-radius: 999px;
}
.head-call:hover { background: var(--night); }
.head-call svg { width: 18px; height: 18px; flex: none; }
.head-call .digits { display: none; }

.nav ul { list-style: none; margin: 0; padding: 0; }
.nav a {
  display: flex; align-items: center; min-height: 48px;
  color: var(--ink); text-decoration: none; font-size: 1.05rem;
}
.nav a[aria-current="page"] { color: var(--navy); font-weight: 700; text-decoration: underline; text-decoration-color: var(--beam); text-decoration-thickness: 3px; text-underline-offset: 0.35em; }
.nav a:hover { color: var(--navy); text-decoration: underline; }

/* phone and tablet: the menu is a panel under the bar */
@media (max-width: 1023px) {
  .nav { order: 5; }
  .js .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: calc(100% + 3px);
    background: var(--white);
    border-bottom: 3px solid var(--navy);
    padding: 8px var(--edge) 16px;
    box-shadow: 0 18px 30px rgba(27, 28, 58, 0.18);
  }
  .js .nav.is-open { display: block; }
  .nav li + li { border-top: 1px solid #D5D7E6; }
  html:not(.js) .bar { flex-wrap: wrap; height: auto; padding-block: 8px; }
  html:not(.js) .nav { width: 100%; }
}

@media (min-width: 540px) { .head-call .digits { display: inline; } .head-call .word { display: none; } }

@media (min-width: 1024px) {
  .js .menu-btn { display: none; }
  .nav ul { display: flex; gap: 2px; }
  .nav a { padding-inline: 8px; font-size: 0.98rem; min-height: 44px; }
  .brand { margin-right: 12px; }
  .nav { margin-right: auto; }
}
@media (min-width: 1180px) {
  .nav ul { gap: 8px; }
  .brand__name { font-size: 1.1rem; }
}

/* ---------- hero: the beam ---------- */
.hero {
  --stage-h: clamp(270px, 80vw, 470px);
  --tower-h: calc(var(--stage-h) * 0.76);
  --tower-w: calc(var(--tower-h) / 3);
  --lx: calc(var(--gutter) + var(--tower-w) / 2);
  position: relative; background: var(--night); color: var(--white); overflow: hidden;
}
.hero__stage { position: relative; height: var(--stage-h); }
.hero__beam {
  position: absolute; top: 0; bottom: 0; right: 0; left: var(--lx);
  clip-path: polygon(0 33%, 100% 0, 100% 100%, 0 46%);
  margin: 0;
}
.hero__beam img { width: 100%; height: 100%; object-fit: cover; object-position: 64% 58%; }
.hero__beam::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 184, 96, 0.62), rgba(244, 184, 96, 0.18) 22%, rgba(244, 184, 96, 0) 46%);
}
.hero__tower {
  position: absolute; bottom: 0;
  left: var(--gutter);
  width: var(--tower-w); height: var(--tower-h);
  color: var(--white);
}
.hero__glow {
  position: absolute; pointer-events: none;
  left: calc(var(--lx) - 60px); top: calc(var(--stage-h) * 0.395 - 60px);
  width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 184, 96, 0.55), rgba(244, 184, 96, 0));
}
.hero__tag {
  position: absolute; right: var(--gutter); top: 10px; z-index: 2;
  margin: 0; padding: 3px 10px; border-radius: 999px;
  background: rgba(27, 28, 58, 0.82); color: var(--white); font-size: 0.8rem;
}
.hero__words { padding: 22px var(--gutter) 40px; display: grid; gap: 22px; }
.hero__lead { display: grid; gap: 22px; justify-items: start; }
/* the swell of ground under the tower, from the logo */
.hero__stage::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  background: linear-gradient(90deg, var(--white) 0, var(--white) calc(var(--gutter) + var(--tower-w) + 12px), var(--beam) calc(var(--gutter) + var(--tower-w) + 12px), rgba(131, 138, 194, 0) 85%);
}
.hero h1 { font-size: var(--hero); max-width: 13ch; }
.hero__deck { margin: 0; font-size: 1.15rem; max-width: 34em; }
.hero__hours { margin: 6px 0 0; color: var(--beam-lit); font-size: var(--small); }
.hero__hours a { color: var(--white); }

@media (prefers-reduced-motion: no-preference) {
  .hero__beam { animation: beam-on 1.1s ease-out both; }
  .hero__glow { animation: glow-on 1.4s ease-out both; }
  @keyframes beam-on { from { clip-path: polygon(0 38%, 0 38%, 0 41%, 0 41%); } }
  @keyframes glow-on { from { opacity: 0; } }
}

/* desktop: the logo's own composition. Tower at the left, the beam (the photograph) to the right of the lantern,
   the headline under the beam beside the tower where MRM sits in the mark, the ground swell under the tower. */
@media (min-width: 1024px) {
  .hero {
    --stage-h: clamp(660px, calc(100svh - var(--head-h)), 900px);
    --tower-h: calc(var(--stage-h) * 0.40);
    --lx: calc(var(--edge) + var(--tower-w) / 2);
    height: var(--stage-h);
  }
  .hero__stage { position: absolute; inset: 0; height: auto; }
  /* beam box is the top 64%; its lower edge runs from 25.6% (at the lantern) to 64% (at the right edge) */
  .hero__beam { bottom: 36%; clip-path: polygon(0 26%, 100% 0, 100% 100%, 0 40%); }
  @keyframes beam-on { from { clip-path: polygon(0 31%, 0 31%, 0 35%, 0 35%); } }
  /* lantern window sits 20.3% down the tower: 13% + 0.203 x 40% = 21.1%, the middle of the beam's left edge */
  .hero__tower { left: var(--edge); bottom: auto; top: calc(var(--stage-h) * 0.13); }
  .hero__glow { left: calc(var(--lx) - 90px); top: calc(var(--stage-h) * 0.211 - 90px); width: 180px; height: 180px; }
  .hero__tag { right: var(--edge); top: 16px; }
  .hero__stage::after {
    top: calc(var(--stage-h) * 0.53); bottom: auto; right: auto;
    left: calc(var(--edge) - 24px); width: calc(var(--tower-w) + 48px);
    background: var(--white);
  }
  .hero__words {
    position: absolute; left: var(--edge); right: var(--edge); bottom: 44px;
    padding: 0;
    grid-template-columns: calc(var(--tower-w) + 32px) minmax(0, 1.15fr) minmax(0, 1fr);
    column-gap: 56px; align-items: end;
  }
  .hero__lead { grid-column: 2; gap: 24px; }
  .hero__side { grid-column: 3; padding-bottom: 6px; }
  .hero h1 { max-width: none; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .hero__words { grid-template-columns: calc(var(--tower-w) + 32px) minmax(0, 1fr) minmax(0, 1fr); }
  .hero__deck { font-size: 1.05rem; }
}

/* ---------- shared section pieces ---------- */
.section { padding-block: var(--space) 0; }
.photo { margin: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo figcaption { font-size: 0.86rem; color: var(--slate); padding: 8px var(--gutter) 0; }
.photo figcaption b { font-weight: 700; color: var(--navy); }
.copy { padding-inline: var(--gutter); }
.copy > h2 { margin-bottom: 20px; }
.copy p { max-width: 36em; }

/* the beam tick: the logo's wedge of light, used as a list mark */
.lit { list-style: none; margin: 8px 0 24px; padding: 0; border-top: 1px solid #C9CBE0; }
.lit li { position: relative; padding: 12px 0 12px 30px; border-bottom: 1px solid #C9CBE0; }
.lit li::before {
  content: ""; position: absolute; left: 0; top: 0.95em;
  width: 18px; height: 12px; background: var(--beam);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
}
.lit strong { color: var(--navy); }

/* ---------- tonight: a bed (photo bleeds left) ---------- */
.tonight .photo img { aspect-ratio: 4 / 3; }
.tonight .copy { padding-top: 28px; }
.tonight__go { font-weight: 700; }
@media (min-width: 900px) {
  .tonight { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: center; padding-right: var(--edge); }
  .tonight .photo figcaption { padding-left: var(--edge); }
  .tonight .copy { padding: 0; }
}

/* ---------- the table: full-bleed room, then the words and the counter ---------- */
.table .wide img { aspect-ratio: 4 / 3; object-position: 40% 50%; }
.table__body { padding: 32px var(--gutter) 0; display: grid; gap: 40px; }
.table__note p { max-width: 30em; }
.table__counter img { aspect-ratio: 3 / 2; }
.table__counter figcaption { padding-left: 0; }
.big-quote { margin: 0; }
.big-quote p { font-family: var(--display); font-size: var(--quote); line-height: 1.22; color: var(--navy); margin: 0 0 16px; text-indent: -0.42em; }
.big-quote footer { color: var(--slate); font-size: var(--small); }
@media (min-width: 640px) { .table .wide img { aspect-ratio: 21 / 9; } }
@media (min-width: 900px) {
  .table__body {
    padding-inline: var(--edge);
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px;
    margin-top: -96px; position: relative;
  }
  .table__note { position: relative; z-index: 0; padding: 40px 40px 0 0; }
  .table__note::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; right: 0; left: -100vw; background: var(--fog); }
  .table__quote { padding-top: 160px; }
}

/* ---------- programs: the long road ---------- */
.programs__top { display: grid; gap: 28px; }
.programs__shop img { aspect-ratio: 4 / 3; }
.programs__room img { aspect-ratio: 1 / 1; }
.programs__low { display: grid; gap: 28px; padding-top: 40px; }
.small-quote { margin: 0; padding: 0 var(--gutter); }
.small-quote p { font-family: var(--display); font-size: 1.6rem; line-height: 1.25; color: var(--navy); margin: 0 0 10px; }
.small-quote footer { color: var(--slate); font-size: var(--small); }
@media (min-width: 900px) {
  .programs__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; padding-left: var(--edge); align-items: start; }
  .programs__top .copy { padding: 0; }
  .programs__low { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); column-gap: 64px; padding-inline: var(--edge); align-items: end; padding-top: 56px; }
  .programs__room { max-width: 400px; }
  .programs__room figcaption { padding-left: 0; }
  .small-quote { padding: 0 0 48px; max-width: 26em; }
}

/* ---------- what people say: one night band ---------- */
.word { margin-top: var(--space); background: var(--night); color: var(--white); padding: var(--space) var(--gutter); }
.word__grid { display: grid; gap: 40px; }
.word .big-quote p { color: var(--white); font-size: clamp(1.75rem, 1.15rem + 2vw, 2.85rem); }
.word .big-quote footer { color: var(--beam-lit); }
.word__side { border-top: 2px solid var(--beam); padding-top: 20px; }
.word__side p { color: #E4E5F2; max-width: 30em; }
.word__side .soft { font-family: var(--display); font-size: 1.35rem; color: var(--white); line-height: 1.3; margin-bottom: 6px; }
.word__side .who { color: var(--beam-lit); font-size: var(--small); }
@media (min-width: 900px) {
  .word { padding-inline: var(--edge); }
  .word__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: 72px; align-items: end; }
}

/* ---------- keep the light on: give and volunteer (photo bleeds right) ---------- */
.keep .photo img { aspect-ratio: 3 / 2; }
.keep .copy { padding-top: 28px; }
.ways { display: grid; gap: 0; margin: 8px 0 28px; border-top: 2px solid var(--navy); }
.ways > div { padding: 18px 0; border-bottom: 1px solid #C9CBE0; }
.ways h3 { font-size: 1.6rem; color: var(--navy); margin-bottom: 6px; }
.ways p { margin: 0; }
@media (min-width: 900px) {
  .keep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: center; padding-left: var(--edge); }
  .keep .photo { order: 2; }
  .keep .copy { order: 1; padding: 0; }
  .keep .photo figcaption { padding-right: var(--edge); }
}

/* ---------- news from Clinton Street ---------- */
.news { padding: var(--space) var(--gutter) 0; }
.news__list { list-style: none; margin: 20px 0 0; padding: 0; border-top: 2px solid var(--navy); }
.news__list li { border-bottom: 1px solid #C9CBE0; }
.news__list a { display: grid; gap: 2px; padding: 14px 0; min-height: 48px; text-decoration: none; color: var(--ink); }
.news__list time { color: var(--slate); font-size: var(--small); }
.news__list .t { font-family: var(--display); font-size: 1.4rem; color: var(--navy); line-height: 1.2; }
.news__list a:hover .t { text-decoration: underline; }
@media (min-width: 900px) {
  .news { padding-inline: var(--edge); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
  .news__list { margin-top: 6px; }
  .news__list a { grid-template-columns: 10em 1fr; align-items: baseline; }
}

/* ---------- the close: the beam lands on the address ---------- */
.visit { margin-top: var(--space); background: var(--night); color: var(--white); position: relative; overflow: hidden; }
.visit__inner { position: relative; z-index: 1; display: grid; gap: 32px; padding: 64px var(--gutter) 72px; }
.visit__ray {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 184, 96, 0.22), rgba(244, 184, 96, 0.06) 70%);
  clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 30%);
}
.visit__logo { width: 180px; background: var(--white); padding: 12px; border-radius: 10px; }
.visit h2 { color: var(--white); font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.6rem); margin-bottom: 18px; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; margin: 0 0 24px; }
.hours dt { color: var(--white); font-weight: 700; }
.hours dd { margin: 0; }
.visit p { color: #E4E5F2; max-width: 34em; }
.visit a:not(.call) { color: var(--white); }
@media (min-width: 900px) {
  .visit__inner { padding: 96px var(--edge) 104px; grid-template-columns: 220px minmax(0, 1fr); column-gap: 72px; align-items: start; }
  .visit__logo { width: 220px; }
  .visit__ray { clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 34%); }
}

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: #D9DAEA; padding: 48px var(--gutter) 32px; font-size: var(--small); }
.site-footer a { color: var(--white); display: inline-flex; align-items: center; min-height: 44px; }
.foot { display: grid; gap: 28px; }
.foot ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 24px; }
.foot p { margin: 0 0 6px; }
.foot__name { font-family: var(--display); font-size: 1.4rem; color: var(--white); }
.mockup-line { margin: 32px 0 0; padding-top: 16px; border-top: 1px solid #3A3C66; color: #B9BBD4; font-size: 0.85rem; }
@media (min-width: 900px) {
  .site-footer { padding-inline: var(--edge); }
  .foot { grid-template-columns: 1.2fr 1fr 1fr; column-gap: 48px; }
}

/* ---------- stub pages ---------- */
.stub { padding: 72px var(--gutter) 96px; }
.stub h1 { font-size: clamp(2.6rem, 1.6rem + 3vw, 4.25rem); color: var(--navy); margin-bottom: 20px; max-width: 14ch; }
.stub p { max-width: 34em; font-size: 1.2rem; }
.stub .note { color: var(--slate); font-size: var(--small); margin-top: 28px; }
.stub .btn { margin-top: 8px; }
@media (min-width: 900px) { .stub { padding-inline: var(--edge); padding-block: 120px 140px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}