/* Lifted from web/order_forms.py's CSS constant, plus small additions for
   client-side error/success banners and the honeypot field. */
*{box-sizing:border-box}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;margin:0;
background:#e9e6df;color:#1a1a1a;line-height:1.5}
nav{background:#141414;color:#fff;padding:.6rem 1.2rem;font-size:.95rem}
nav a{color:#ffd97a;margin-right:1rem;text-decoration:none}
nav a:hover{text-decoration:underline}
main{max-width:960px;margin:0 auto;padding:1.2rem}
.banner{background:#fff8e1;border:1px solid #8a6d00;border-radius:6px;
padding:.6rem 1rem;margin-bottom:1rem;font-size:.9rem}
.paper{background:#fff;border:1px solid #8a8a8a;
box-shadow:0 2px 10px rgba(0,0,0,.18);padding:1.8rem 2rem;margin-bottom:1rem}
.masthead{display:flex;justify-content:space-between;align-items:flex-end;
gap:1rem;border-bottom:4px double #111;padding-bottom:.5rem}
.brand{font-family:Georgia,'Times New Roman',serif;font-size:2.1rem;
font-weight:700;letter-spacing:.3em;line-height:1}
.brand small{display:block;font-size:.78rem;letter-spacing:.18em;
font-weight:400;margin-top:.25rem}
.contact{font-size:.82rem;text-align:right;white-space:nowrap}
.sheet-title{font-family:Georgia,'Times New Roman',serif;font-size:1.25rem;
letter-spacing:.08em;text-transform:uppercase;margin:.7rem 0 .2rem}
.hgrid{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1.6rem;
margin:.6rem 0}
.field{display:block;font-size:.8rem;text-transform:uppercase;
letter-spacing:.05em;color:#333;margin:.3rem 0}
.field input,.field textarea{border:none;border-bottom:1px solid #111;
border-radius:0;padding:.25rem .1rem;width:100%;font:inherit;
font-size:1rem;text-transform:none;letter-spacing:normal;color:#111;
background:transparent}
.field textarea{border:1px solid #888}
fieldset{border:1.5px solid #111;border-radius:0;margin:1rem 0;
padding:.7rem 1rem 1rem}
legend{font-weight:700;text-transform:uppercase;letter-spacing:.12em;
padding:0 .5rem;font-size:.85rem}
fieldset>p{font-size:.82rem;font-weight:700;text-transform:uppercase;
letter-spacing:.06em;margin:.7rem 0 .3rem}
.sect-label{font-size:.82rem;font-weight:700;text-transform:uppercase;
letter-spacing:.08em;margin:.7rem 0 .3rem}
.opts{display:flex;flex-wrap:wrap;gap:.35rem .7rem;margin:.2rem 0 .5rem}
.opt{display:inline-flex;align-items:center;gap:.4rem;
border:1px solid #777;padding:.28rem .6rem;font-size:.93rem;cursor:pointer;
background:#fff}
.opt input{accent-color:#111;width:1rem;height:1rem}
.fine{font-size:.82rem;color:#333;border-top:1px solid #111;
padding-top:.6rem;margin-top:1rem}
.storeonly{font-size:.8rem;font-style:italic;color:#555;margin-top:.8rem}
.card{background:#fff;border:1px solid #dfe3e8;border-radius:8px;
padding:1rem;margin-bottom:1rem}
.muted{color:#555}.small{font-size:.85rem}.error{color:#a4262c}
button{font:inherit;padding:.5rem 1.2rem;cursor:pointer;background:#111;
color:#fff;border:1px solid #111}
button:hover{background:#333}
button:disabled{opacity:.6;cursor:default}
footer{color:#555;font-size:.8rem;padding:1rem;text-align:center}

/* Client-side submit feedback (Cloudflare Pages Function returns JSON;
   there is no server-rendered error/success page to redirect to). */
.field-error{color:#a4262c;font-size:.8rem;margin:.15rem 0 .5rem}
.success-banner{background:#e6f4ea;border:1px solid #1e7d34;border-radius:6px;
padding:.8rem 1rem;margin-bottom:1rem}
.error-banner{background:#fdecea;border:1px solid #a4262c;border-radius:6px;
padding:.8rem 1rem;margin-bottom:1rem}

/* Honeypot: off-screen rather than display:none, since some bots skip
   display:none fields but still fill visually-hidden ones. Humans never
   tab into it (tabindex=-1) or see it. */
.hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;
overflow:hidden}

@media print{
nav,.banner,button,footer{display:none}
body{background:#fff}
main{max-width:none;padding:0}
.paper{border:none;box-shadow:none;padding:0}
}
@media (max-width:640px){.hgrid{grid-template-columns:1fr}.paper{padding:1rem}}