/* Lidwell site: shared primitives that Tailwind utilities don't express cleanly. Single light theme by design. */
:root { color-scheme: light; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { background: #fcf9f3; color: #1c1c18; font-family: Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4 { text-wrap: balance; }

.gutter { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
@media (min-width: 1024px) { .gutter { padding-left: max(64px, env(safe-area-inset-left, 0px)); padding-right: max(64px, env(safe-area-inset-right, 0px)); } }

.cap { font-size: 11px; line-height: 16px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.mono { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.wm { font-family: "EB Garamond", Garamond, Georgia, serif; text-transform: uppercase; letter-spacing: .18em; color: #16241e; line-height: 1; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: #2b3a33; color: #fcf9f3; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 15px 26px; border: 1px solid #2b3a33; transition: background .15s ease; cursor: pointer; text-decoration: none; }
.btn:hover { background: #191b1a; border-color: #191b1a; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: transparent; color: #16241e; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: 14px 24px; border: 1px solid #c3c8c3; transition: background .15s ease; cursor: pointer; text-decoration: none; }
.btn-ghost:hover { background: #ebe8e2; }
.link-u { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

.chip { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 9px 14px; border: 1px solid #c3c8c3; color: #434845; background: transparent; cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: #2b3a33; color: #16241e; }
.chip[aria-pressed="true"] { background: #16241e; border-color: #16241e; color: #fcf9f3; }

.disc { width: 36px; height: 36px; border-radius: 9999px; box-shadow: 0 0 0 2px #fcf9f3, 0 0 0 3px #c3c8c3; cursor: pointer; border: 0; padding: 0; }
.disc[aria-pressed="true"] { box-shadow: 0 0 0 2px #fcf9f3, 0 0 0 3.5px #16241e; }
.disc.sm { width: 14px; height: 14px; box-shadow: 0 0 0 1px #c3c8c3; cursor: default; }

.field label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #5f6b63; margin-bottom: 2px; }
.field input, .field select { width: 100%; border: 0; border-bottom: 1px solid #c3c8c3; background: transparent; padding: 10px 0; font-size: 15px; color: #1c1c18; border-radius: 0; outline: none; }
.field input::placeholder { color: #8b9b90; }
.field input:focus, .field select:focus { border-bottom: 1.5px solid #2b3a33; }
.field .err { display: none; font-size: 12px; color: #93000a; margin-top: 4px; }
.field.invalid input, .field.invalid select { border-bottom-color: #ba1a1a; }
.field.invalid .err { display: block; }

.radio-card { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #e5e2dc; padding: 16px; cursor: pointer; background: #fcf9f3; }
.radio-card:has(input:checked) { border-color: #2b3a33; background: #f6f3ed; }
.radio-card input { accent-color: #2b3a33; margin-top: 3px; }

.spec tr { border-bottom: 1px solid #e5e2dc; }
.spec th { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #434845; text-align: left; padding: 13px 16px 13px 0; vertical-align: top; width: 44%; }
.spec td { font-size: 13.5px; padding: 13px 0; color: #1c1c18; font-variant-numeric: tabular-nums; }

.hover-zoom img { transition: transform .7s ease; }
.hover-zoom:hover img { transform: scale(1.025); }
@media (prefers-reduced-motion: reduce) { .hover-zoom img, .btn, .btn-ghost { transition: none; } .hover-zoom:hover img { transform: none; } html { scroll-behavior: auto; } }
:focus-visible { outline: 1.5px solid #16241e; outline-offset: 3px; }