/* Fern & Flour: the Refresh.
   Loaded on top of shared/base.css, which is unchanged. Everything in this file
   is traceable to one of the three agreed improvements, so the whole scope of
   the job is readable in one place.

   1. Opening message
   2. Menu discovery
   3. Mobile visit information

   The palette, the two typefaces, the photographs, the section order and the
   body copy are the existing ones. No new design system, no new platform, no
   decorative animation, no extra pages. */

/* ============================================================
   1. OPENING MESSAGE
   The hero was four navigation links over a photograph, each one a level-one
   heading. It becomes a headline, a sentence and a single action. The picture
   and its crop do not change; the overlay darkens only so the words are
   legible, which the improvement requires.
   ============================================================ */

.hero__veil { background: linear-gradient(90deg, rgba(18,18,18,.72) 0%, rgba(18,18,18,.55) 48%, rgba(18,18,18,.25) 100%); }

.hero__say {
  position: relative;
  padding: 56px 24px 56px 90px;
  max-width: 760px;
}
.hero__say h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.12;
  color: #fff;
  letter-spacing: .005em;
  text-wrap: balance;
}
.hero__sub {
  margin: 16px 0 0;
  max-width: 46ch;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  line-height: 1.75;
}

/* The one primary action. Bigger than the existing 11px buttons because it is
   the thing the page is asking for, and it meets a 44px target. */
.btn--lead {
  margin-top: 26px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 26px;
  background: var(--plum);
  color: #fff;
  font-size: 13px;
  letter-spacing: .08em;
}
.btn--lead:hover { background: #964061; }
.btn--lead:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The band heading follows the new h1, so it is a level two. */
.band__h { font-family: var(--display); font-weight: 400; font-size: 26px; margin: 0 0 14px; }

/* ============================================================
   2. MENU DISCOVERY
   The menu was an 11px link among four, in a mono face, third from the left.
   It now leads the navigation, is the only item styled as an action, and every
   route to it says what it is rather than just "Menu". The burger, which
   previously did nothing, opens those same links so the menu stays reachable
   on a phone.
   ============================================================ */

.bar__nav { align-items: center; gap: 20px; }
.bar__nav a { font-size: 12px; }
.bar__nav-menu {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--plum);
  border-radius: 999px;
  color: var(--plum);
  font-weight: 600;
  letter-spacing: .08em;
}
.bar__nav-menu:hover { background: var(--plum); color: #fff; text-decoration: none; }

.bar__burger {
  min-height: 44px;
  min-width: 44px;
  padding: 0 14px;
  border: 1px solid var(--plum);
  border-radius: 999px;
  color: var(--plum);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
}
.bar__sheet { display: none; }
.bar__sheet a {
  display: block;
  padding: 14px 24px;
  border-top: 1px solid rgba(18,18,18,.1);
  font-size: 13px;
  letter-spacing: .04em;
  text-decoration: none;
}
.bar__sheet a:first-child { font-weight: 600; color: var(--plum); }

/* Every route to the menu is a primary action, so all of them meet the 44px
   target. Buttons that lead somewhere else keep the existing 37px, because
   changing those is not part of any agreed improvement. */
.btn--menu {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 22px;
}

/* ============================================================
   3. MOBILE VISIT INFORMATION
   Hours, address and phone were spread over two plum blocks. The address and
   the phone number were headings picked for their type size, the number was
   not a link, and on a phone the two hours blocks sat in a row that squeezed
   instead of stacking. Same facts, same block, in the order people ask for
   them, and both the address and the number are now tappable.
   ============================================================ */

.visit { background: var(--plum); color: #fff; padding: 56px 0 60px; }
.visit__h { font-family: var(--display); font-weight: 400; font-size: 30px; margin: 0 0 26px; }
.visit__list { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.visit__item { border-top: 1px solid rgba(255,255,255,.35); padding-top: 14px; }
.visit__item dt {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.8); margin-bottom: 8px;
}
.visit__item dd { margin: 0; font-size: 14px; line-height: 1.7; }
.visit__item dd b { font-weight: 600; }

.visit__link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #fff; text-decoration: underline; text-underline-offset: 4px;
}
.visit__link:hover { text-decoration-thickness: 2px; }
.visit__link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.foot a { color: inherit; }

@media (max-width: 800px) {
  /* The hero reads from the left margin like the rest of the page. */
  .hero__say { padding: 44px 24px; }

  .bar__nav { display: none; }
  .bar__burger { display: inline-flex; align-items: center; justify-content: center; }
  .bar__sheet[hidden] { display: none; }
  .bar__sheet:not([hidden]) { display: block; background: var(--page); }

  /* One column, so nothing squeezes, and the three facts keep their order. */
  .visit__list { grid-template-columns: 1fr; gap: 22px; }
  .visit { padding: 44px 0 48px; }
}