@charset "UTF-8";
body { margin: 0; background: #fff; background-image: none; color: #5c4444; font-family: sans-serif; line-height: 1.8; }
main { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 2.5rem 0; }
section { margin-bottom: 3rem; scroll-margin-top: 6rem; }
h1, h2, h3 { color: #7f5555; line-height: 1.5; }
h1 { font-size: clamp(2rem, 5vw, 3rem); margin: .4rem 0 1rem; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 1rem; }
h3 { font-size: 1.1rem; margin: 1.5rem 0 .6rem; }
p { margin: .6rem 0 1rem; }
a { color: #8c4c25; text-underline-offset: .2em; }
.hero { text-align: center; }
.eyebrow { color: #a45523; letter-spacing: .15em; font-weight: 700; font-size: .8rem; }
.lead { font-weight: 700; }
.panel, .featured { border: 1px solid #edd7c3; padding: clamp(1rem, 3vw, 1.75rem); border-radius: 12px; }
.panel { background: #fffaf5; }
.featured { background: #fff5e8; border-left: 5px solid #F2B782; }
.availability { display: grid; gap: .35rem; margin: 0 0 1rem; }
.availability p { margin: 0; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: .8rem 1.5rem; border: 1px solid #bc8055; border-radius: 8px; font: inherit; font-weight: 700; text-decoration: none; color: #503628; background: #fff; cursor: pointer; min-height: 48px; box-sizing: border-box; }
.primary { background: #FAD18F; }
.button:hover { background: #ffe9ce; }
:focus-visible { outline: 3px solid #a45523; outline-offset: 3px; }
.section-nav, .actions { display: flex; justify-content: center; gap: .75rem 1.5rem; flex-wrap: wrap; margin: 1rem 0; }
.commission-nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.samples { width: 100%; margin: 0; }
.samples img { display: block; width: 100%; height: auto; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
figcaption { font-size: .9rem; text-align: center; margin-top: .5rem; }
.price-notes { margin: 1rem 0; padding-left: 1.25rem; }
.price-notes li { margin-bottom: .35rem; }
.price-heading { background: #fff5e8; padding: .75rem 1rem; }
table { width: 100%; border-collapse: collapse; table-layout: fixed; margin: 1rem 0; }
th, td { padding: .8rem 1rem; border-bottom: 1px solid #ead9cc; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
thead { background: #fff5e8; }
th { width: 58%; font-weight: 700; }
small, .note, .preview-note { font-size: .9rem; }
.flow { padding-left: 1.5rem; }
.flow h3 { margin: 0 0 .25rem; }
.flow li { padding: .85rem 1rem; background: #fff; border-radius: 8px; }
.flow li:nth-child(even) { background: #fff5e8; }
.flow li p { margin-bottom: 0; }
li { margin-bottom: .6rem; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.5rem; }
form label { display: block; font-weight: 700; margin: .75rem 0; }
input, select, textarea { display: block; width: 100%; box-sizing: border-box; border: 1px solid #aa8d7b; border-radius: 6px; padding: .75rem; font: inherit; background: #fff; color: #503628; margin-top: .35rem; }
textarea { resize: vertical; }
#message-preview { font-weight: 400; background: #fffaf5; }
#form-status { min-height: 1.8em; }
.commission-footer { text-align: center; padding: 1.5rem 1rem; background: #fff5e8; font-size: .9rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
[hidden] { display: none !important; }
@media (max-width: 600px) { .fields { grid-template-columns: 1fr; gap: 0; } main { padding-top: 1.5rem; } .site-header__inner { flex-wrap: wrap; gap: .75rem; } .commission-nav { font-size: .85rem; } th, td { padding: .65rem .5rem; } .actions .button { width: 100%; } section { scroll-margin-top: 8rem; } }