/* Pea-Fections brand layer, shared by every page.
   Tokens, the script wordmark, gold ornaments and the loading overlay.
   Page layout stays in each page's own <style> block. */

/* Niconne (SIL OFL 1.1, see fonts/Niconne-OFL.txt), latin subset.
   Closest open-licence match to the italic chancery "Pea-Fections" lettering. */
@font-face {
  font-family: 'Niconne';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('fonts/niconne-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF;
}

:root {
  --brand-red: #8f3a41;        /* sampled from the burgundy "Pea-Fections" sign */
  --brand-red-deep: #6e2b31;
  --regal-gold: #b08a3e;       /* flyer gold, corrected for the photo's lighting */
  --gold-soft: #d8bd7e;        /* gold that reads on burgundy */
  --gold-hair: rgba(176, 138, 62, .45);
  --warm-cream: #fbf6ee;
  --dark-brown: #8B4513;       /* the site's existing heading brown */
  --ink: #333;
  --header-h: 70px;
  --ease-regal: cubic-bezier(.22, .61, .36, 1);

  --orn-fleur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.6c1.8 2.1 2.6 4.3 2.2 6.6-.3 1.8-1.1 3.3-2.2 4.5-1.1-1.2-1.9-2.7-2.2-4.5C9.4 5.9 10.2 3.7 12 1.6z'/%3E%3Cpath d='M10.7 13c-1.9.3-3.8-.2-5-1.5-1.3-1.5-1.2-3.6.3-4.4 1.2-.6 2.6.2 2.5 1.4-.1.8-.7 1.2-1.3 1.1.7 1.4 2 2.4 3.5 3.4z'/%3E%3Cpath d='M13.3 13c1.9.3 3.8-.2 5-1.5 1.3-1.5 1.2-3.6-.3-4.4-1.2-.6-2.6.2-2.5 1.4.1.8.7 1.2 1.3 1.1-.7 1.4-2 2.4-3.5 3.4z'/%3E%3Crect x='8.4' y='13.1' width='7.2' height='1.5' rx='.6'/%3E%3Cpath d='M12 14.8c-.2 2.3-1.3 4.1-3.1 5.5 1.8-.2 2.8-1 3.1-2.2.3 1.2 1.3 2 3.1 2.2-1.8-1.4-2.9-3.2-3.1-5.5z'/%3E%3C/svg%3E");
  --orn-corner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Cpath d='M1 47V1h46' stroke-width='1.2'/%3E%3Cpath d='M5 47V5h42' stroke-width='.8'/%3E%3Cpath d='M5 18c3.5 0 6-2.5 6-6s-2.6-6.3-6-6.3M18 5c0 3.5-2.5 6-6 6' stroke-width='1.1'/%3E%3Cpath d='M11 11c3.2 3.2 7.8 4.2 11.3 2.4 2.4-1.2 2.6-4.3.4-5.2-1.6-.7-3.2.6-2.6 2' stroke-width='1.1'/%3E%3Cpath d='M11 11c3.2 3.2 4.2 7.8 2.4 11.3-1.2 2.4-4.3 2.6-5.2.4-.7-1.6.6-3.2 2-2.6' stroke-width='1.1'/%3E%3Ccircle cx='11' cy='11' r='1.5' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* ---------- Wordmark ---------- */
.pf-wordmark {
  font-family: 'Niconne', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: 1;
  color: var(--brand-red);
}

/* ---------- Ornaments ---------- */
/* Centered divider: tapered gold rules either side of a small fleur-de-lis. */
.pf-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(280px, 72%);
  margin: -1.1rem auto 2.25rem;
  color: var(--regal-gold);
}
.pf-divider::before,
.pf-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to left, currentColor, transparent);
}
.pf-divider::after { background: linear-gradient(to right, currentColor, transparent); }
.pf-divider > span,
.pf-fleur {
  flex: none;
  width: 26px;
  height: 26px;
  background: currentColor;
  -webkit-mask: var(--orn-fleur) center / contain no-repeat;
          mask: var(--orn-fleur) center / contain no-repeat;
}
.pf-divider--light { color: var(--gold-soft); margin: .25rem auto 1.1rem; }

/* Corner flourishes for framed cards: put .pf-framed on a positioned box. */
.pf-framed::before,
.pf-framed::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 30px;
  height: 30px;
  pointer-events: none;
  background: var(--regal-gold);
  -webkit-mask: var(--orn-corner) center / contain no-repeat;
          mask: var(--orn-corner) center / contain no-repeat;
}
/* Sized to stay inside an 18px mat so the scrolls never sit on a photo. */
.pf-framed::before { top: 3px; left: 3px; }
.pf-framed::after { right: 3px; bottom: 3px; transform: rotate(180deg); }

/* ---------- Shared accents ---------- */
:focus-visible {
  outline: 2px solid var(--brand-red);
  outline-offset: 3px;
}
header nav ul:not(.nav-mobile) a {
  padding-bottom: 3px;
  background: linear-gradient(var(--regal-gold), var(--regal-gold)) 50% 100% / 0 1px no-repeat;
  transition: color .3s, background-size .35s var(--ease-regal);
}
header nav ul:not(.nav-mobile) a:hover,
header nav ul:not(.nav-mobile) a:focus-visible { background-size: 100% 1px; }
.hamburger { background: transparent; color: inherit; }
footer { border-top: 1px solid var(--gold-hair); }

.pf-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Loading overlay ----------
   Hidden by default (and always without JS). pf-loader.js adds
   html.pf-loading to show it, then html.pf-leaving to fade it out. */
.pf-loader {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--brand-red);
  color: var(--warm-cream);
  opacity: 1;
  transition: opacity .45s var(--ease-regal), visibility 0s linear 0s;
}
html.pf-loading .pf-loader { display: flex; }
html.pf-leaving .pf-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s var(--ease-regal), visibility 0s linear .45s;
}

/* Double gold frame with flyer-style corners. */
.pf-loader__frame {
  position: absolute;
  inset: clamp(14px, 3.2vw, 32px);
  border: 1px solid rgba(216, 189, 126, .55);
  opacity: 0;
  animation: pf-fade .9s var(--ease-regal) .05s forwards;
}
.pf-loader__frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(216, 189, 126, .28);
}
.pf-loader__frame i {
  position: absolute;
  width: clamp(38px, 6vw, 56px);
  height: clamp(38px, 6vw, 56px);
  background: var(--gold-soft);
  -webkit-mask: var(--orn-corner) center / contain no-repeat;
          mask: var(--orn-corner) center / contain no-repeat;
}
.pf-loader__frame i:nth-child(1) { top: -1px; left: -1px; }
.pf-loader__frame i:nth-child(2) { top: -1px; right: -1px; transform: scaleX(-1); }
.pf-loader__frame i:nth-child(3) { bottom: -1px; right: -1px; transform: rotate(180deg); }
.pf-loader__frame i:nth-child(4) { bottom: -1px; left: -1px; transform: scaleY(-1); }

.pf-loader__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 24px;
}
.pf-loader__mark {
  font-family: 'Niconne', Georgia, 'Times New Roman', serif;
  font-size: clamp(3rem, 11vw, 5.5rem);
  line-height: 1.1;
  color: #f7ebe0;
  opacity: 0;
  transform: translateY(10px);
  animation: pf-rise .9s var(--ease-regal) .1s forwards;
}
.pf-loader__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(340px, 76vw);
  margin-top: 10px;
  color: var(--gold-soft);
}
.pf-loader__rule::before,
.pf-loader__rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  animation: pf-draw .75s var(--ease-regal) .3s forwards;
}
.pf-loader__rule::before { transform-origin: 100% 50%; }
.pf-loader__rule::after { transform-origin: 0 50%; }
.pf-loader__rule > span {
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: var(--orn-fleur) center / contain no-repeat;
          mask: var(--orn-fleur) center / contain no-repeat;
  opacity: 0;
  transform: scale(.7);
  animation: pf-bloom .6s var(--ease-regal) .2s forwards;
}

@keyframes pf-fade { to { opacity: 1; } }
@keyframes pf-rise { to { opacity: 1; transform: none; } }
@keyframes pf-draw { to { transform: scaleX(1); } }
@keyframes pf-bloom { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .pf-loader__frame,
  .pf-loader__mark,
  .pf-loader__rule::before,
  .pf-loader__rule::after,
  .pf-loader__rule > span {
    animation: none;
    opacity: 1;
    transform: none;
  }
  html.pf-leaving .pf-loader { transition: opacity .2s linear, visibility 0s linear .2s; }
  header nav ul:not(.nav-mobile) a { transition: none; }
}