/* ==========================================================================
   Danish Bread Montreal
   ========================================================================== */

:root {
  /* Sampled from logo.jpg (averaged over the seal's red ink).
     Change it here and it changes everywhere. */
  --brand-red: #CF202B;
  --brand-red-dark: #A3161F;
  --brand-red-tint: #FBF0F0;

  --ink: #2B2B2B;
  --body-text: #5A5A5A;
  --muted: #8A8A8A;
  --rule: #E4E4E4;
  --band: #F4F2EF;
  --white: #FFFFFF;

  --wrap: 1100px;
  --header-h: 118px;

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

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

html {
  scroll-behavior: smooth;
  /* Always reserve the scrollbar track. The home page is long enough to
     scroll and the inner pages are not, so without this the scrollbar
     appears and disappears between pages, changing the usable width by
     ~15px and shifting the centered header sideways.

     overflow-y:scroll is what actually does the work. scrollbar-gutter
     alone was measured NOT to hold the width here: it only applies to a
     real scroll container, and the root's overflow was still `visible`,
     so the gutter was reported as "stable" while the width still jumped. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body-text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.25;
  margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

a {
  color: var(--brand-red);
  text-decoration: none;
}
a:hover,
a:focus-visible { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--brand-red);
  color: #fff;
  padding: 12px 20px;
  z-index: 200;
}
.skip-link:focus {
  left: 0;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--rule);
}

.header-inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand:hover,
.brand:focus-visible { text-decoration: none; }

.brand img {
  height: 94px;
  width: auto;
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand-name {
  font-family: var(--serif);
  font-size: 1.29rem;
  color: var(--ink);
  letter-spacing: .01em;
}
.brand-city {
  font-family: var(--sans);
  font-size: .83rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--brand-red);
  font-weight: 600;
}

/* --- Navigation --------------------------------------------------------- */

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 10px;
  cursor: pointer;
  color: var(--ink);
}
.nav-toggle svg { display: block; }

.site-nav ul {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  padding: 10px 13px;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--ink);
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

.site-nav a:hover,
.site-nav a:focus-visible {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
  text-decoration: none;
}

.site-nav a[aria-current="page"] {
  color: var(--brand-red);
  border-bottom-color: var(--brand-red);
}

/* --- Banner ------------------------------------------------------------- */

.banner {
  position: relative;
  min-height: clamp(360px, 58vh, 560px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: #1b2430;
  overflow: hidden;
}

/* The photo rides on its own layer purely so the filter below cannot reach
   the title sitting on top of it. The grade is deliberately gentle: measured
   against this image, contrast(1.06) is the most that adds tonal range
   without blowing any of the sky to flat white. */
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/banner.jpg?v=2");
  background-size: cover;
  background-position: center center;
  filter: contrast(1.06) saturate(1.14);
}

/* No scrim (2026-11-02, owner's request). The banner photo is a rye loaf
   rather than a bright skyline, so the white title now rests directly on
   the photograph and relies on its own text-shadow. If the title turns out
   to read poorly over the loaf, put a shaped scrim back here rather than a
   flat wash -- a flat wash is what made the old skyline read gray. */

.banner-inner {
  position: relative;
  z-index: 1;
  padding: 72px 24px;
  max-width: 900px;
}

.banner h1 {
  color: #fff;
  font-size: clamp(2rem, 5.6vw, 3.6rem);
  line-height: 1.15;
  margin: 0;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .5);
}

.banner-rule {
  width: 72px;
  height: 3px;
  background: var(--brand-red);
  border: 0;
  margin: 26px auto 0;
}

/* Inner pages get a shorter banner with the page name. */
.banner--page {
  min-height: clamp(200px, 30vh, 300px);
}
.banner--page .banner-inner { padding: 48px 24px; }
.banner--page h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); }

/* --- Sections ----------------------------------------------------------- */

.section {
  padding: 72px 0;
}
.section--band {
  background: var(--band);
}
.section--tight { padding: 52px 0; }

.section-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
}
.section-head p { color: var(--muted); }

/* --- Awaiting-copy placeholder ------------------------------------------
   Deliberately visible: these blocks mark where the owner's own text
   goes, so nothing reads as finished copy before it has been written. */

.awaiting {
  border: 1px dashed #C9BFAE;
  background: #FCFAF6;
  border-radius: 4px;
  padding: 36px 32px;
  text-align: center;
  color: #8A7E6B;
}
.awaiting strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.15rem;
  color: #6F6454;
  margin-bottom: 6px;
  font-weight: 400;
}
.awaiting p { margin: 0; font-size: .95rem; }

/* --- Cards / photo grid -------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}

.card {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}
.card figure { margin: 0; }
.card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
}
/* The subject of this one sits high in the frame. */
.card img.focus-high { object-position: center 28%; }
.card-body { padding: 22px 24px 26px; }
.card-body h3 { margin-bottom: .4em; }
.card-body p:last-child { margin-bottom: 0; }

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

.btn {
  display: inline-block;
  background: var(--brand-red);
  color: #fff;
  font-size: .95rem;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: 3px;
  border: 0;
  cursor: pointer;
  transition: background .15s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--brand-red-dark);
  color: #fff;
  text-decoration: none;
}

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

.site-footer {
  background: var(--brand-red);
  color: rgba(255, 255, 255, .92);
  padding: 56px 0 0;
}
.site-footer a { color: #fff; text-decoration: underline; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: start;
  padding-bottom: 46px;
}
/* The footer repeats the header's brand lockup exactly: the same markup and
   the same .brand-text / .brand-name / .brand-city rules, so the two can
   never drift apart. align-items:center is what the old hand-measured -18px
   lift was imitating; the flexbox does it honestly. Only the colors change
   for the red ground -- the seal knocked out to white, and the type taking
   white where the header takes ink and red. */
.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.footer-brand img {
  height: 94px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .95;
}
.footer-brand .brand-name,
.footer-brand .brand-city { color: #fff; }
.footer-contact {
  font-size: .95rem;
  line-height: 1.9;
}
.footer-contact strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  color: #fff;
}

.footer-bar {
  border-top: 1px solid rgba(255, 255, 255, .22);
  padding: 18px 0;
  font-size: .82rem;
  color: rgba(255, 255, 255, .82);
}
.footer-bar .wrap {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* The row has to switch to the hamburger before the brand and the seven
   nav items stop fitting side by side. With the 94px seal and the larger
   brand type that happens at about 976px, so the switch sits at 1000px.
   It was 860px, which left a band of widths where the nav overflowed. */
@media (max-width: 1000px) {
  :root { --header-h: 94px; }

  .nav-toggle { display: block; }

  .brand img { height: 72px; width: auto; }
  .brand-name { font-size: 1.15rem; }
  .brand-city { font-size: .76rem; }

  .site-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    background: var(--white);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .09);
    display: none;
  }
  .site-nav.is-open { display: block; }

  .site-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 14px;
    max-width: var(--wrap);
    margin: 0 auto;
  }
  .site-nav li { border-top: 1px solid var(--rule); }
  .site-nav li:first-child { border-top: 0; }

  .site-nav a {
    padding: 14px 24px;
    font-size: .95rem;
    border-bottom: 0;
    border-left: 3px solid transparent;
  }
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    border-bottom: 0;
    border-left-color: var(--brand-red);
    background: var(--brand-red-tint);
  }
}

@media (max-width: 520px) {
  body { font-size: 16px; }
  .section { padding: 52px 0; }
  .site-header .brand-text { display: none; }
  .banner-inner { padding: 56px 20px; }
  .awaiting { padding: 28px 20px; }
}

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

/* --- Lockup and inner-page framing (2026-11-02) -------------------------- */

/* Logo lift. Geometric alignment -- the score cuts bottoming out exactly on
   MONTREAL's baseline -- measured out at 2.23%, but the user read that as
   still sitting low, so this is set by eye above that. The cuts end at
   y=114 of the 160 viewBox if it ever needs recomputing. Kept as a
   percentage of the image's own height, not pixels, so it stays in
   proportion at the smaller header size used on narrow screens. */
.brand img,
.footer-brand img {
  transform: translateY(-6.4%);
}

/* Inner pages crop the photo to roughly half its height, which lands on the
   middle of the loaf and reads as texture rather than bread. Pushing the
   framing down the image brings an edge of the loaf into the frame. The home
   page is untouched -- it is tall enough to show the whole loaf. */
.banner--page::before {
  background-position: center 69%;
}

/* Wordmark sits a touch closer to the mark than the original 14px (2026-11-02,
   by eye). Header and footer together so the two lockups cannot drift. */
.brand,
.footer-brand {
  gap: 12px;
}