/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V5 */
/* Hallmark · genre: editorial · macrostructure: Letter · theme: custom PBC Garden · enrichment: none · nav: N9 · footer: Ft6 · contrast: static-pass (40–41) · slop: static-pass (42–45) · honest: pass (46) · chrome: pass (47) · tokens: pass (48) · responsive: static-pass (34, 49, 50–57) · visual QA: pending */
@import url("tokens.css?v=20260824-22");

* { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; }
body { margin: 0; overflow-x: clip; color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
button, input { font: inherit; }
h1, h2, h3 { min-width: 0; text-wrap: balance; }
p { max-width: 65ch; text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

.site-header { padding: var(--space-md) var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.site-header__inner { width: min(var(--content-max), 100%); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-green); font-weight: 700; letter-spacing: .015em; text-decoration: none; white-space: nowrap; }
.wordmark img { width: 44px; height: 40px; object-fit: contain; }
.header-action { min-height: 44px; display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-green); font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; }
.header-action span { color: var(--color-blue); font-size: var(--text-md); }

.letter-hero { padding: var(--space-3xl) var(--space-lg) var(--space-2xl); }
.letter-hero__inner { width: min(760px, 100%); margin-inline: auto; }
.salutation { margin: 0 0 var(--space-lg); color: var(--color-green); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; }
.letter-hero h1 { margin: 0 0 var(--space-lg); color: var(--color-green); font-family: var(--font-display); font-size: var(--text-display); font-weight: 650; line-height: 1.08; letter-spacing: -.035em; overflow-wrap: anywhere; }
.letter-hero__body { padding-left: var(--space-lg); border-left: 3px solid var(--color-gold); }
.letter-hero__body p { margin: 0 0 var(--space-md); color: var(--color-muted); font-size: var(--text-md); line-height: 1.55; }
.text-link { display: inline-block; color: var(--color-green); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link:hover { color: var(--color-blue); }

.current-section { padding: 0 var(--space-lg) var(--space-3xl); }
.section-inner { width: min(var(--content-max), 100%); margin-inline: auto; }
.section-line { height: 1px; background: var(--color-rule); }
.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); padding: var(--space-xl) 0 var(--space-lg); }
.section-heading h2 { margin: 0; color: var(--color-green); font-size: var(--text-xl); line-height: 1.15; letter-spacing: -.025em; }
.section-heading p { margin: 0; color: var(--color-muted); font-size: var(--text-sm); }
.mums-sheet { border-top: 3px solid var(--color-green); background: var(--color-white); }
.mums-sheet__meta { display: flex; justify-content: space-between; gap: var(--space-md); padding: var(--space-xs) var(--space-lg); color: var(--color-green); background: var(--color-green-pale); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mums-sheet__content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .7fr); gap: var(--space-2xl); padding: var(--space-2xl); border: 1px solid var(--color-rule); border-top: 0; }
.mums-sheet__copy h3 { margin: 0; color: var(--color-green); font-family: var(--font-display); font-size: clamp(2.75rem, 5vw, 4.25rem); font-weight: 650; line-height: 1; }
.price { margin: var(--space-sm) 0 var(--space-md); color: var(--color-muted); font-size: var(--text-lg); }.price strong { color: var(--color-green); font-weight: 700; }.mums-sheet__copy > p:not(.price) { max-width: 58ch; margin: 0 0 var(--space-lg); color: var(--color-muted); }
.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 var(--space-md); color: var(--color-white); background: var(--color-green); border: 1px solid var(--color-green); border-radius: var(--radius-input); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }.button:hover { background: var(--color-green-2); }.button:active { transform: translateY(1px); }.button:disabled { opacity: .55; cursor: not-allowed; }
.mums-facts { align-self: center; display: grid; grid-template-columns: 1fr 1fr; border-top: 3px solid var(--color-blue); border-bottom: 1px solid var(--color-rule); }.mums-facts div { padding: var(--space-md) 0; }.mums-facts div + div { padding-left: var(--space-md); border-left: 1px solid var(--color-rule); }.mums-facts strong { display: block; color: var(--color-blue); font-variant-numeric: tabular-nums; font-size: var(--text-2xl); line-height: 1; }.mums-facts span { display: block; margin-top: var(--space-2xs); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.25; }
.mums-source { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:var(--space-xl); padding:var(--space-xl); border:1px solid var(--color-rule); border-top:0; background:var(--color-paper); }.mums-source__copy { grid-column:1; }.source-label { margin:0 0 var(--space-2xs); color:var(--color-blue); font-size:var(--text-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }.mums-source__copy h4 { margin:0 0 var(--space-sm); color:var(--color-green); font-family:var(--font-display); font-size:var(--text-lg); font-weight:500; line-height:1.15; }.mums-source__copy > p:not(.source-label) { margin:0; color:var(--color-muted); }.pickup-details { display:grid; gap:var(--space-sm); margin:var(--space-lg) 0 0; }.pickup-details div { padding-top:var(--space-sm); border-top:1px solid var(--color-rule); }.pickup-details dt { color:var(--color-green); font-size:var(--text-xs); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }.pickup-details dd { margin:var(--space-2xs) 0 0; color:var(--color-muted); font-size:var(--text-sm); }.mums-gallery { grid-column:2; min-width:0; }.mums-gallery__viewport { display:flex; width:100%; min-width:0; aspect-ratio:16 / 10; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; background:var(--color-paper-2); }.mums-gallery__viewport::-webkit-scrollbar { display:none; }.mums-gallery__slide { flex:0 0 100%; width:100%; min-width:0; height:100%; margin:0; scroll-snap-align:start; scroll-snap-stop:always; }.mums-gallery__slide img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }.mums-gallery__dots { display:flex; align-items:center; justify-content:center; gap:var(--space-2xs); min-height:44px; }.mums-gallery__dots button { position:relative; width:44px; height:44px; padding:0; border:0; background:transparent; cursor:pointer; }.mums-gallery__dots button::before { position:absolute; inset:50% auto auto 50%; width:8px; height:8px; content:""; border-radius:50%; background:var(--color-rule); transform:translate(-50%,-50%); transition:background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }.mums-gallery__dots button[aria-current="true"]::before { background:var(--color-green); transform:translate(-50%,-50%) scale(1.25); }.mums-gallery__dots button:active::before { transform:translate(-50%,-50%) scale(.9); }.mums-gallery__dots button:disabled { opacity:.55; cursor:not-allowed; }

.order-section { padding: var(--space-3xl) var(--space-lg); background: var(--color-blue-pale); }.order-inner { width: min(var(--content-max), 100%); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr); gap: var(--space-3xl); align-items: start; }.accent-rule { width: 64px; height: 3px; margin-bottom: var(--space-lg); background: var(--color-gold); }.order-copy h2 { max-width: 12ch; margin: 0 0 var(--space-md); color: var(--color-green); font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.08; letter-spacing: -.03em; }.order-copy p { margin: 0 0 var(--space-md); color: var(--color-muted); }.estimate-sheet { max-width: 700px; padding: var(--space-xl); border: 1px solid var(--color-rule); border-left: 3px solid var(--color-blue); background: var(--color-white); }.sheet-label { margin: 0 0 var(--space-lg); color: var(--color-green); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.order-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-sm); }.field { display: grid; gap: var(--space-2xs); }.field--wide, .turnstile-field, .order-total, .form-note, .form-status { grid-column: span 2; }.turnstile-field { display: block; width: 100%; padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }.turnstile-field .cf-turnstile { width: 100%; min-height: 84px; }label { font-size: var(--text-sm); font-weight: 600; }label span { color: var(--color-ochre); }input { width: 100%; min-height: 44px; padding: 0 var(--space-xs); border: 1px solid var(--color-rule); outline: 2px solid transparent; outline-offset: 1px; border-radius: var(--radius-input); color: var(--color-ink); background: var(--color-paper); }input:hover { background: var(--color-paper-2); }input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-green); }input[aria-invalid="true"] { border-color: var(--color-earth); outline-color: var(--color-gold); }.field--trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }.turnstile-field { min-width:0; }.turnstile-field .cf-turnstile { width:100%; }.turnstile-field p { min-height:1lh; margin:var(--space-2xs) 0 0; color:var(--color-muted); font-size:var(--text-sm); }small,.form-note { min-height: 1lh; color: var(--color-muted); font-size: var(--text-sm); }.order-total { display: flex; justify-content: space-between; align-items: baseline; padding: var(--space-sm) 0; border-top: 1px solid var(--color-rule); border-bottom: 1px solid var(--color-rule); }.order-total strong { color: var(--color-blue); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 500; font-variant-numeric: tabular-nums; }.button[aria-busy="true"] { opacity:.72; cursor:wait; }.form-status { padding:var(--space-lg); border:1px solid var(--color-rule); background:var(--color-paper); }.form-status[data-state="success"] { border-top:3px solid var(--color-green); }.form-status[data-state="error"] { border-top:3px solid var(--color-earth); }.form-status h3 { margin:0 0 var(--space-sm); color:var(--color-green); font-family:var(--font-display); font-size:var(--text-lg); font-weight:650; }.form-status p { margin:0 0 var(--space-sm); color:var(--color-muted); }.payment-reference { font-size:var(--text-sm); font-variant-numeric:tabular-nums; }.payment-email { display:inline-block; margin-bottom:var(--space-md); color:var(--color-green); font-size:var(--text-md); font-weight:700; overflow-wrap:anywhere; }.copy-control { min-height:36px; margin:0 0 var(--space-md); padding:0 var(--space-sm); color:var(--color-green); background:transparent; border:1px solid var(--color-rule); border-radius:var(--radius-input); font:inherit; font-size:var(--text-sm); font-weight:600; cursor:pointer; }.copy-control:hover { border-color:var(--color-green); background:var(--color-paper-2); }.copy-control:focus-visible { outline:2px solid var(--color-focus); outline-offset:3px; }.payment-message-label { margin-bottom:var(--space-2xs) !important; font-size:var(--text-sm); }.payment-message { display:block; padding:var(--space-sm); color:var(--color-ink); background:var(--color-green-pale); font-family:var(--font-body); font-weight:700; overflow-wrap:anywhere; }.payment-reminder { margin:var(--space-sm) 0 0 !important; font-size:var(--text-sm); }
.letter-footer { padding: var(--space-2xl) var(--space-lg) var(--space-3xl); border-top: 1px solid var(--color-rule); background: var(--color-paper); }.letter-footer__inner { width: min(var(--content-max), 100%); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-md) var(--space-lg); }.letter-footer__signoff { display: grid; gap: var(--space-2xs); }.footer-social { min-height: 40px; display: inline-flex; align-items: center; gap: var(--space-2xs); padding: 0 var(--space-sm); color: var(--color-green); border: 1px solid var(--color-rule); border-radius: 999px; background: var(--color-white); text-decoration: none; transition: color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }.footer-social svg { width: 18px; height: 18px; display: block; }.footer-social span { font-size: var(--text-sm); font-weight: 600; }.footer-social:hover { color: var(--color-blue); border-color: var(--color-blue); background: var(--color-paper-2); }.letter-footer p { margin: 0; color: var(--color-muted); }.letter-footer strong { color: var(--color-green); font-family: var(--font-display); font-size: var(--text-lg); font-weight: 500; }@media (max-width: 48rem) { .site-header { padding-inline: var(--space-md); }.site-header__inner { align-items: flex-start; }.header-action { white-space: normal; text-align: right; }.letter-hero,.current-section,.order-section,.letter-footer { padding-inline: var(--space-md); }.letter-hero { padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }.letter-hero h1 { font-size: clamp(2.75rem, 11vw, 4.25rem); }.letter-hero__body { padding-left: var(--space-md); }.section-heading { display: block; }.section-heading p { margin-top: var(--space-2xs); }.mums-sheet__content { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding: var(--space-lg); }.mums-facts { max-width: 360px; }.mums-source { grid-template-columns: minmax(0, 1fr); padding: var(--space-lg); }.mums-source__copy { grid-column: auto; }.mums-gallery { grid-column: 1; } .order-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }.order-copy h2 { max-width: none; font-size: var(--text-xl); }.estimate-sheet { padding: var(--space-lg); }.turnstile-field { width: 100%; }.turnstile-field .cf-turnstile { transform: none; min-height: 92px; }.letter-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }.footer-social { width: 40px; min-height: 40px; padding: 0; justify-content: center; }.footer-social span { display: none; }.letter-footer__signoff { gap: 0; }}
@media (max-width: 32.5rem) { .wordmark span { max-width: 170px; white-space: normal; line-height: 1.15; }.header-action { max-width: 112px; }.mums-sheet__meta { display: block; }.mums-sheet__meta span + span { display: block; margin-top: var(--space-2xs); }.future-row { grid-template-columns: 32px minmax(0, 1fr); }.future-row__status { grid-column: 2; text-align: left; }.order-form { grid-template-columns: minmax(0, 1fr); }.field--wide,.turnstile-field,.order-total,.form-note,.form-status { grid-column: auto; }.order-form .button { width: 100%; }.mums-facts { grid-template-columns: minmax(0, 1fr); }.mums-facts div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-rule); } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: 150ms !important; transition-duration: 150ms !important; } }