/* Dough Rollers - farmhouse bakery, Murray River PEI
   Palette from her signage: cream, navy, barn board, logo red.
   Type: Playfair Display (display), Hanken Grotesk (body), Caveat (hand notes). */

@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-400i.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Playfair Display";
  src: url("fonts/PlayfairDisplay-500i.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("fonts/hanken-grotesk-italic.woff2") format("woff2");
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --cream: #F7F1E2;
  --paper: #FFFCF2;
  --navy: #1F2D4A;
  --navy-2: #28395C;
  --red: #C3352D;
  --red-dark: #A62B24;
  --brown: #6C3C2B;
  --line: rgba(108, 60, 43, 0.35);
  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", "Segoe UI", Arial, sans-serif;
  --hand: "Caveat", "Comic Sans MS", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
}

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

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.12; color: var(--navy); }

p { margin: 0 0 1em; }

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.wrap--narrow { max-width: 780px; }

/* Skip link */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--cream);
  padding: 0.75rem 1.25rem; z-index: 200; font-weight: 600;
}
.skip:focus { left: 0; }

/* Focus */
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 2px; }
.band :focus-visible, .site-footer :focus-visible { outline-color: var(--cream); }

/* Links */
a:not(.btn) { color: var(--red-dark); text-decoration: underline; text-underline-offset: 3px; }
a:not(.btn):hover { color: var(--red); }
.band a:not(.btn), .site-footer a:not(.btn) { color: var(--cream); }

/* Header: sticky at every width, shrinks past 90px and grows back under 30px (site.js).
   No transform, filter or will-change here, ever: any of them kills sticky on iOS. */
.site-header {
  position: -webkit-sticky; position: sticky; top: 0; z-index: 120;
  background: var(--cream);
  border-bottom: 1px solid var(--line);
  overflow-anchor: none;
  transition: box-shadow 0.25s ease;
}
.site-header .bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 0.6rem; padding-bottom: 0.6rem;
  transition: padding 0.25s ease;
}
.site-header.shrunk .bar { padding-top: 0.3rem; padding-bottom: 0.3rem; }
.site-header.shrunk { box-shadow: 0 1px 0 rgba(40, 40, 40, 0.10), 0 4px 14px rgba(31, 45, 74, 0.08); }
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img { width: 64px; height: auto; }
.brand .brand-name {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem;
  color: var(--navy); text-decoration: none;
}
a.brand, a.brand .brand-name { text-decoration: none; }
a.brand:hover .brand-name { color: var(--red-dark); }

.main-nav ul {
  display: flex; gap: 1.5rem; list-style: none; margin: 0; padding: 0;
  align-items: center; flex-wrap: wrap;
}
.main-nav a:not(.btn) {
  color: var(--navy); text-decoration: none; font-weight: 500; font-size: 1rem;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
}
.main-nav a:not(.btn):hover { border-bottom-color: var(--red); color: var(--navy); }
.main-nav a[aria-current="page"] { border-bottom-color: var(--red); }

/* Mobile nav (details/summary works without JS) */
.mnav { display: none; }
.mnav summary {
  list-style: none; cursor: pointer;
  font-weight: 600; color: var(--navy);
  border: 2px solid var(--navy); border-radius: 6px;
  padding: 0.45rem 1rem; background: var(--paper);
}
.mnav summary::-webkit-details-marker { display: none; }
.mnav[open] summary { background: var(--navy); color: var(--cream); }
.mnav nav {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--cream); border-bottom: 1px solid var(--line);
  padding: 0.5rem 24px 1rem;
}
.mnav nav ul { list-style: none; margin: 0; padding: 0; }
.mnav nav a:not(.btn) {
  display: block; padding: 0.7rem 0.25rem; color: var(--navy);
  text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--line);
}
.mnav nav a[aria-current="page"] { border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 var(--red); padding-left: 0.75rem; }

/* Hero: the exported file is the only crop (2.40:1); no max-height, no object-fit. */
.hero { position: relative; padding: 0; }
.hero img { width: 100%; height: auto; display: block; }
.hero-word { position: relative; margin-top: -0.55em; padding-bottom: 1.5rem; }
.hero-word h1 {
  font-size: clamp(3.4rem, 11.5vw, 8.75rem);
  margin: 0; font-weight: 600; letter-spacing: 0;
}
.hero-sub { font-size: 1.2rem; max-width: 40rem; margin-top: 0.75rem; }

/* Page head for inner pages */
.page-head { padding: 3.5rem 0 1rem; }
.page-head h1 { font-size: clamp(2.6rem, 6vw, 4.25rem); margin: 0 0 0.5rem; }
.page-head p { font-size: 1.2rem; max-width: 44rem; }

/* Pie-crimp sawtooth dividers */
.crimp {
  height: 14px;
  background:
    linear-gradient(135deg, var(--tooth, var(--cream)) 25%, transparent 25%) -7px 0,
    linear-gradient(225deg, var(--tooth, var(--cream)) 25%, transparent 25%) -7px 0;
  background-size: 14px 14px;
  background-repeat: repeat-x;
}
.crimp-ribbon {
  height: 28px;
  background:
    linear-gradient(135deg, var(--cream) 25%, transparent 25%) -7px 0,
    linear-gradient(225deg, var(--cream) 25%, transparent 25%) -7px 0,
    linear-gradient(315deg, var(--cream) 25%, transparent 25%) -7px 100%,
    linear-gradient(45deg, var(--cream) 25%, transparent 25%) -7px 100%;
  background-color: var(--red);
  background-size: 14px 14px;
  background-repeat: repeat-x;
}

/* Bands */
.band { background: var(--navy); color: var(--cream); }
.band h2, .band h3 { color: var(--cream); }
.band .quiet { color: rgba(247, 241, 226, 0.82); }
.band hr, .band .rule { border-color: rgba(247, 241, 226, 0.35); }

section { padding: 3.5rem 0; }
section h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0 0 1rem; }
.kicker { font-weight: 600; color: var(--brown); margin: 0 0 0.4rem; font-size: 1rem; }
.band .kicker { color: rgba(247, 241, 226, 0.82); }

/* The note on the door */
.note {
  position: relative;
  background: var(--paper);
  color: var(--navy);
  max-width: 620px;
  margin: 0 auto;
  padding: 2.25rem 2rem 1.75rem;
  border-radius: 3px;
  box-shadow: 0 10px 24px rgba(20, 25, 40, 0.35);
  transform: rotate(-1.2deg);
  transform-origin: 50% -12px;
  animation: note-swing 7s ease-in-out infinite alternate;
}
.note::before {
  content: "";
  position: absolute; top: -11px; left: 50%; margin-left: -11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #D9503F, var(--red-dark) 70%);
  box-shadow: 0 3px 5px rgba(20, 25, 40, 0.45);
}
@keyframes note-swing {
  from { transform: rotate(-1.7deg); }
  to { transform: rotate(-0.7deg); }
}
.note h2 { font-size: 1.6rem; margin: 0 0 1rem; color: var(--navy); }
.note dl { margin: 0; }
.note dt { font-weight: 600; color: var(--brown); font-size: 0.98rem; }
.note dd { margin: 0 0 0.9rem; font-size: 1.15rem; }
.note .note-foot { margin: 0.4rem 0 0; font-size: 0.98rem; color: var(--brown); }
.note .note-foot a:not(.btn) { color: var(--red-dark); }

/* Signature product block */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
.split--wide-media { grid-template-columns: 5fr 7fr; }
.price-tag {
  font-family: var(--serif); font-weight: 600; font-size: 1.5rem; color: var(--red-dark);
}
.pullquote {
  font-family: var(--serif); font-style: italic; font-weight: 500;
  font-size: 1.45rem; line-height: 1.35;
  border-left: 4px solid var(--red); padding-left: 1.1rem; margin: 1.5rem 0 0.5rem;
}
.pullquote-attrib { font-style: normal; font-family: var(--sans); font-size: 1rem; color: var(--brown); }
.pullquote--small { font-size: 1.2rem; }

.photo-row { display: grid; gap: 1rem; align-items: start; }
.photo-row--3 { grid-template-columns: repeat(3, 1fr); }
.photo-row--2 { grid-template-columns: repeat(2, 1fr); }
.photo-row img { width: 100%; border-radius: 4px; }

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; align-items: start; }
.cat-grid a { text-decoration: none; color: var(--navy); display: block; }
.cat-grid a:not(.btn) { text-decoration: none; color: var(--navy); }
.cat-grid img { width: 100%; border-radius: 4px; }
.cat-grid h3 { font-size: 1.3rem; margin: 0.75rem 0 0.15rem; font-weight: 600; }
.cat-grid a:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--red); }
.cat-grid p { margin: 0; font-size: 1rem; color: var(--brown); }

/* Price board */
.price-list { list-style: none; margin: 0; padding: 0; max-width: 700px; }
.price-list li {
  display: flex; align-items: baseline; gap: 0.6rem;
  padding: 0.55rem 0; border-bottom: 1px solid var(--line);
}
.band .price-list li { border-bottom-color: rgba(247, 241, 226, 0.3); }
.price-list .dots { flex: 1; border-bottom: 2px dotted var(--line); transform: translateY(-5px); }
.band .price-list .dots { border-bottom-color: rgba(247, 241, 226, 0.4); }
.price-list .price { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; }

/* Hand-written annotation */
.hand {
  font-family: var(--hand); font-weight: 700; color: var(--red-dark);
  font-size: 1.45rem; line-height: 1.25; display: inline-block;
  transform: rotate(-1.5deg);
}
.band .hand { color: #F0B7AC; }
.hand.stamp { animation: stamp-in 480ms cubic-bezier(0.2, 1.4, 0.4, 1) 1; }
@keyframes stamp-in {
  from { transform: rotate(-1.5deg) scale(1.35); opacity: 0; }
  to { transform: rotate(-1.5deg) scale(1); opacity: 1; }
}

/* Photo placeholder (labelled, in-site style) */
.photo-placeholder {
  border: 2px dashed var(--brown); border-radius: 6px;
  background: var(--paper);
  padding: 2.5rem 1.75rem; text-align: center; color: var(--brown);
  min-height: 240px; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
}
.photo-placeholder .pp-label { font-weight: 600; color: var(--navy); font-size: 1.05rem; }
.photo-placeholder p { margin: 0; font-size: 0.98rem; }
.band .photo-placeholder { background: transparent; color: rgba(247,241,226,0.82); border-color: rgba(247,241,226,0.6); }
.band .photo-placeholder .pp-label { color: var(--cream); }

.tri .photo-placeholder { aspect-ratio: 3 / 4; margin-bottom: 0.9rem; }

/* Three-up info blocks */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; align-items: start; }
.tri h3 { font-size: 1.35rem; margin: 0 0 0.4rem; }
.tri img { width: 100%; border-radius: 4px; margin-bottom: 0.9rem; }

/* Buttons */
.btn {
  display: inline-block; background: var(--red); color: #fff;
  font-weight: 600; font-size: 1.05rem; text-decoration: none;
  padding: 0.8rem 1.5rem; border-radius: 6px; border: 2px solid var(--red);
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn--ghost { background: transparent; color: var(--cream); border-color: var(--cream); }
.btn--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: var(--cream); border-color: var(--navy); }
.hero-btns { margin-top: 1.25rem; }
.btn--ghost:hover { background: rgba(247, 241, 226, 0.12); border-color: var(--cream); }
.btn-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Menu page */
.menu-section { display: grid; grid-template-columns: 7fr 5fr; gap: 2.5rem; align-items: start; padding: 2.75rem 0; border-top: 1px solid var(--line); }
.menu-section:first-of-type { border-top: 0; }
.menu-section h2 { margin-top: 0; }
.menu-section img { width: 100%; border-radius: 4px; }
.menu-note {
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px;
  padding: 1.5rem 1.75rem; max-width: 780px; margin-bottom: 3.5rem;
}

/* FAQ: native details/summary, click to open, no JS */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1rem 2.5rem 1rem 0;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: 1.2rem; margin: 0; font-weight: 600; }
.faq-item summary::after {
  content: ""; position: absolute; right: 0.6rem; top: 50%;
  width: 0.6rem; height: 0.6rem; margin-top: -0.5rem;
  border-right: 2px solid var(--red-dark); border-bottom: 2px solid var(--red-dark);
  transform: rotate(45deg); transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -0.15rem; }
.faq-item summary:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
.faq-a { padding: 0 2.5rem 1.1rem 0; }
.faq-a p { margin: 0; }

/* Form */
form.contact { max-width: 620px; }
form.contact label { display: block; font-weight: 600; margin: 1.1rem 0 0.3rem; }
form.contact input, form.contact textarea {
  width: 100%; font: inherit; color: var(--navy);
  background: var(--paper); border: 2px solid var(--brown); border-radius: 6px;
  padding: 0.7rem 0.85rem;
}
form.contact input:focus, form.contact textarea:focus { outline: 3px solid var(--red); outline-offset: 1px; border-color: var(--red); }
form.contact .hp { position: absolute; left: -9999px; height: 1px; overflow: hidden; }
form.contact button { margin-top: 1.4rem; cursor: pointer; font-family: var(--sans); }

/* Footer */
.site-footer { background: var(--navy); color: var(--cream); padding: 3rem 0 2rem; }
.site-footer .foot-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; align-items: start; }
.site-footer img { width: 120px; height: auto; margin-bottom: 0.75rem; }
.site-footer h2 { font-size: 1.15rem; margin: 0 0 0.6rem; font-family: var(--sans); font-weight: 600; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 0.1rem; }
.site-footer li a:not(.btn) { display: inline-block; padding: 0.55rem 0; }
.site-footer a:not(.btn) { color: var(--cream); text-decoration-color: rgba(247, 241, 226, 0.55); }
.foot-base {
  margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(247, 241, 226, 0.25);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.95rem;
}
.foot-base .credit a:not(.btn) { color: rgba(247, 241, 226, 0.75); }
.foot-base--flat { border-top: 0; margin-top: 0; padding-top: 0; }

/* Sticky bottom call bar (phones) */
.call-bar {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 150;
  background: var(--navy); padding: 0.55rem 12px calc(0.55rem + env(safe-area-inset-bottom));
  gap: 0.6rem;
}
.call-bar .btn { flex: 1; text-align: center; padding: 0.7rem 0.5rem; font-size: 1rem; }
.call-bar .btn--ghost { background: transparent; }

/* Utility */
.center { text-align: center; }
.lead { font-size: 1.25rem; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.measure { max-width: 44rem; }
.mt-125 { margin-top: 1.25rem; }
.mt-15 { margin-top: 1.5rem; }
.mt-175 { margin-top: 1.75rem; }
.pt-0 { padding-top: 0; }
.img-round { border-radius: 4px; }
.flush { margin: 0; padding: 0; }
.pb-35 { padding-bottom: 3.5rem; }

/* Responsive */
@media (max-width: 960px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .tri { grid-template-columns: 1fr 1fr; }
  .split, .split--wide-media, .menu-section { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .main-nav { display: none; }
  .mnav { display: block; position: relative; }
  .call-bar { display: flex; }
  body { padding-bottom: 66px; }
  .hero-word { margin-top: 0.75rem; }
  .hero-btns { display: none; }   /* the call bar carries both actions on phones */
  .hero-word h1 { font-size: clamp(3rem, 16vw, 5.5rem); }
  section { padding: 2.5rem 0; }
}
@media (max-width: 620px) {
  .tri { grid-template-columns: 1fr; }
  .photo-row--3 { grid-template-columns: 1fr 1fr; }
  .site-footer .foot-grid { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .cat-grid { grid-template-columns: 1fr; }
  .photo-row--3 { grid-template-columns: 1fr; }
  .note { padding: 2rem 1.4rem 1.5rem; }
}