/* ============================================================================
   NZ Pie Fest, Light System, 20 July 2026. The single source of truth for the
   site redesign. Load this on every page BEFORE the page's own <style>.
   Every text pair was contrast checked: body pairs pass WCAG AAA, interactive AA.
   House rule: no em or en dashes anywhere in copy. Ranges use the word "to".
   ============================================================================ */
:root {
  /* ground and surfaces */
  --pf-flour:   #FBF5EA;   /* page background, warm cream, never white */
  --pf-pastry:  #F4E9D3;   /* cards, panels, table stripes */
  --pf-butter:  #F7D690;   /* highlight tint, selected states */
  /* ink */
  --pf-toast:   #38271B;   /* all body text and headings, 13.1:1 on flour */
  --pf-toast-soft: #6B5544;/* secondary text, still >= 5:1 on flour */
  /* brand */
  --pf-crust:   #E8A63C;   /* the mark, rules, warm emphasis; toast text on it 6.7:1 */
  --pf-crust-deep: #C9862A;/* crust hover/border */
  --pf-sauce:   #C6402A;   /* THE buy/confirm button, one per screen; flour text 4.6:1 */
  --pf-sauce-deep: #A8331F;/* sauce hover */
  --pf-harbour: #1F6F8B;   /* links and the waterfront line, 5.2:1 on flour */
  --pf-harbour-deep: #175468;
  --pf-leaf:    #3E7C4F;   /* success and confirmations, 4.6:1 on flour */
  --pf-line:    #E4D6BE;   /* hairline borders on flour */
  /* type */
  --pf-font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --pf-font-body: 'Figtree', 'Helvetica Neue', Arial, sans-serif;
  /* shape + depth */
  --pf-radius: 14px;
  --pf-radius-sm: 10px;
  --pf-radius-pill: 999px;
  --pf-shadow: 0 8px 28px rgba(56, 39, 27, 0.10);
  --pf-shadow-sm: 0 2px 10px rgba(56, 39, 27, 0.08);
  --pf-maxw: 1080px;
}

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

body {
  margin: 0;
  background: var(--pf-flour);
  color: var(--pf-toast);
  font-family: var(--pf-font-body);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
  font-family: var(--pf-font-display);
  font-weight: 400;
  color: var(--pf-toast);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0 0 0.4em;
}
h1, .display { font-size: clamp(2.4rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }

a { color: var(--pf-harbour); text-decoration: none; }
a:hover { color: var(--pf-harbour-deep); text-decoration: underline; }

p { margin: 0 0 1rem; }
.pf-muted { color: var(--pf-toast-soft); }

/* labels: wide letterspaced caps, in sauce or toast */
.pf-label {
  font-family: var(--pf-font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pf-sauce);
}

/* layout helpers */
.pf-wrap { max-width: var(--pf-maxw); margin: 0 auto; padding: 0 22px; }
.pf-section { padding: clamp(48px, 8vw, 96px) 0; }

/* ---- buttons -------------------------------------------------------------
   .pf-btn base. ONE sauce button per screen (the buy/primary action).
   Secondary = harbour. Quiet = pastry. Never toast bg with sauce text. */
.pf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--pf-font-body); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: var(--pf-radius-pill);
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  min-height: 48px; line-height: 1;
}
.pf-btn:active { transform: translateY(1px); }
.pf-btn-buy { background: var(--pf-sauce); color: var(--pf-flour); box-shadow: var(--pf-shadow-sm); }
.pf-btn-buy:hover { background: var(--pf-sauce-deep); color: var(--pf-flour); text-decoration: none; }
.pf-btn-secondary { background: var(--pf-harbour); color: var(--pf-flour); }
.pf-btn-secondary:hover { background: var(--pf-harbour-deep); color: var(--pf-flour); text-decoration: none; }
.pf-btn-quiet { background: var(--pf-pastry); color: var(--pf-toast); border-color: var(--pf-line); }
.pf-btn-quiet:hover { background: #EEDFC4; color: var(--pf-toast); text-decoration: none; }
.pf-btn-ghost { background: transparent; color: var(--pf-toast); border-color: var(--pf-toast); }
.pf-btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--pf-harbour); outline-offset: 2px;
}

/* ---- cards + panels ------------------------------------------------------ */
.pf-card {
  background: var(--pf-pastry); border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius); padding: 22px; box-shadow: var(--pf-shadow-sm);
}

/* ---- inputs -------------------------------------------------------------- */
.pf-input, input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search], select, textarea {
  font-family: var(--pf-font-body); font-size: 1rem; color: var(--pf-toast);
  background: var(--pf-flour); border: 1.5px solid var(--pf-line);
  border-radius: var(--pf-radius-sm); padding: 12px 14px; width: 100%;
}
.pf-input:focus, input:focus, select:focus, textarea:focus { border-color: var(--pf-harbour); outline: none; box-shadow: 0 0 0 3px rgba(31,111,139,.18); }

/* ---- badges -------------------------------------------------------------- */
.pf-badge { display:inline-block; font-weight:600; font-size:.72rem; letter-spacing:.04em;
  padding: 4px 10px; border-radius: var(--pf-radius-pill); background: var(--pf-butter); color: var(--pf-toast); }
.pf-badge-soldout { background: #EAD9D4; color: var(--pf-sauce-deep); }
.pf-badge-ok { background: #DCEBE0; color: var(--pf-harbour-deep); }

/* ---- the crimp: the ownable scalloped crust edge, used as a section divider.
   A repeating radial "bite" along the top edge of a band. Never a plain rule. */
.pf-crimp {
  height: 18px; width: 100%; border: 0;
  background:
    radial-gradient(circle at 11px -3px, transparent 12px, var(--pf-crust) 12px 13px, transparent 13px) repeat-x;
  background-size: 22px 18px; opacity: .9;
}
.pf-rule { height: 3px; border: 0; background: var(--pf-crust); border-radius: 3px; width: 64px; margin: 0 0 1.2rem; }

/* ---- nav + footer -------------------------------------------------------- */
.pf-nav { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding: 16px 0; }
.pf-nav .pf-brandmark { font-family: var(--pf-font-display); font-size: 1.3rem; color: var(--pf-toast); display:flex; align-items:center; gap:10px; }
.pf-nav-links { display:flex; gap:22px; align-items:center; }
.pf-nav-links a { color: var(--pf-toast); font-weight: 500; }

.pf-footer { background: var(--pf-toast); color: var(--pf-flour); padding: 40px 0 30px; }
.pf-footer a { color: var(--pf-butter); }
/* the subtle "company behind" credit: supportive, quiet, reassuring, never loud */
.pf-by-rh { font-size: .82rem; color: rgba(247,245,236,.72); letter-spacing:.02em; }
.pf-by-rh strong { color: var(--pf-flour); font-weight:600; }

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

/* ==== PF KIT v2, appended 20 Jul 2026. The identity layer: crimp v2, mark
   sizing + steam motion, grain, hover system, status + spacing tokens.
   Appended AFTER the original rules so the cascade overrides .pf-crimp and
   .pf-rule cleanly. Do not edit the token block above; do not re-declare
   these classes in page styles. ============================================ */

/* -- new tokens: status tints, spacing scale, dark band -------------------- */
:root{
  --pf-ok-bg:#DCEBE0;   --pf-ok-ink:var(--pf-leaf);
  --pf-warn-bg:#F3E2C0; --pf-warn-ink:#8A5210;
  --pf-err-bg:#EAD9D4;  --pf-err-ink:var(--pf-sauce-deep);
  --pf-space-2:0.75rem; --pf-space-3:1.25rem; --pf-space-4:2rem; --pf-space-5:3.25rem;
  --pf-toast-band:#4A3627;
}

/* -- selection, scrollbars, form accents ----------------------------------- */
::selection{background:var(--pf-butter);color:var(--pf-toast);}
html{scrollbar-color:var(--pf-crust-deep) var(--pf-pastry);}
*::-webkit-scrollbar{height:10px;width:10px;}
*::-webkit-scrollbar-thumb{background:var(--pf-crust-deep);border-radius:99px;border:2px solid var(--pf-pastry);}
*::-webkit-scrollbar-track{background:var(--pf-pastry);}
input[type=checkbox],input[type=radio]{accent-color:var(--pf-sauce);}

/* -- flour grain: fixed full-page paper texture ----------------------------- */
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.22 0 0 0 0 0.15 0 0 0 0 0.1 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:240px 240px;}

/* -- crimp v2: FILLED scallops that terminate a band. Set --crimp to the
      color of the band ABOVE the divider. Only use where two DIFFERENT
      surface colors meet. .pf-crimp-up flips it for a band's TOP edge. ----- */
.pf-crimp{--crimp:var(--pf-pastry);
  height:16px;width:100%;border:0;margin:-1px 0 0;display:block;opacity:1;
  background:radial-gradient(circle at 12px 0,var(--crimp) 11px,transparent 11.5px) repeat-x;
  background-size:24px 16px;}
.pf-crimp-up{margin:0 0 -1px;
  background:radial-gradient(circle at 12px 16px,var(--crimp) 11px,transparent 11.5px) repeat-x;
  background-size:24px 16px;}

/* -- pf-rule v2: three crust scallops, never a plain bar -------------------- */
.pf-rule{height:10px;width:64px;border:0;border-radius:0;margin:0 0 1.2rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 10'%3E%3Cpath d='M2 8.5a12 12 0 0 1 20 0M22 8.5a12 12 0 0 1 20 0M42 8.5a12 12 0 0 1 20 0' fill='none' stroke='%23E8A63C' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain;}

/* -- band utilities: deliberate section rhythm ------------------------------ */
.pf-band-pastry{background:var(--pf-pastry);}
.pf-band-butter{background:var(--pf-butter);}
.pf-band-toast{background:var(--pf-toast-band);color:var(--pf-flour);}
.pf-band-toast h1,.pf-band-toast h2,.pf-band-toast h3{color:var(--pf-flour);}
.pf-band-toast .pf-muted{color:rgba(251,245,234,.75);}
.pf-band-toast a{color:var(--pf-butter);}

/* -- hover system: pastry behaves like pastry ------------------------------- */
.pf-card{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.pf-card:hover{transform:translateY(-3px);box-shadow:var(--pf-shadow);border-color:var(--pf-crust);}
.pf-card.pf-still,.pf-card.pf-still:hover{transform:none;box-shadow:var(--pf-shadow-sm);border-color:var(--pf-line);}
.pf-btn:hover{transform:translateY(-1px);}
.pf-btn:active{transform:translateY(1px);}
.pf-btn-ghost:hover{background:var(--pf-toast);color:var(--pf-flour);border-color:var(--pf-toast);text-decoration:none;}

/* -- the mark: sizing + steam motion. Wrap any mark instance in an element
      with class pf-mark-live to animate its steam (hero, success page).
      Nav and footer marks stay still. ---------------------------------------- */
.pf-mark{flex:0 0 auto;display:inline-block;vertical-align:-8px;}
.pf-mark-live .pf-steam{stroke-dasharray:10 12;animation:pf-steam 3s ease-in-out infinite alternate;}
.pf-mark-live .pf-steam+.pf-steam{animation-delay:.4s;}
.pf-mark-live .pf-steam+.pf-steam+.pf-steam{animation-delay:.8s;}
@keyframes pf-steam{from{transform:translateY(0);stroke-dashoffset:10;opacity:.35}to{transform:translateY(-4px);stroke-dashoffset:0;opacity:1}}

/* -- spot roundels: 44px butter circle, dashed crimp rim, icon or numeral -- */
.pf-spot{width:44px;height:44px;flex:0 0 auto;border-radius:50%;background:var(--pf-butter);
  border:1.75px dashed var(--pf-crust-deep);display:inline-flex;align-items:center;justify-content:center;
  color:var(--pf-toast);margin-bottom:.7rem;}
.pf-spot svg{width:26px;height:26px;}
.pf-spot-num{font-family:var(--pf-font-display);font-size:1.05rem;}

/* -- ticket stubs: punched side notches + tear line. NOTE: the mask clips
      box-shadow, so stub cards rely on their border, not shadow. To use on
      script-rendered rows (.tt, .tk) copy these declarations onto that
      selector in the page style; never edit the render script. -------------- */
.pf-stub{--notch-y:65%;position:relative;box-shadow:none;
  -webkit-mask:radial-gradient(circle 10px at left var(--notch-y),transparent 9.5px,#000 10px) left/51% 100% no-repeat,
    radial-gradient(circle 10px at right var(--notch-y),transparent 9.5px,#000 10px) right/51% 100% no-repeat;
  mask:radial-gradient(circle 10px at left var(--notch-y),transparent 9.5px,#000 10px) left/51% 100% no-repeat,
    radial-gradient(circle 10px at right var(--notch-y),transparent 9.5px,#000 10px) right/51% 100% no-repeat;}
.pf-tear{height:0;border:0;border-top:2px dashed var(--pf-line);margin:14px 0;}

/* -- watermark helper: oversized faint brand drawing in empty regions ------- */
.pf-watermark{position:absolute;pointer-events:none;opacity:.05;color:var(--pf-toast);}

/* -- print: only the content matters ---------------------------------------- */
@media print{
  body{background:#fff;color:#000;}
  body::after,.pf-footer,.pf-nav,.pf-btn,.pf-crimp,.pf-crimp-up{display:none!important;}
}