:root {
  --ink: #242322;
  --paper: #fbfbf8;
  --blue: #4d91df;
  --line: #d9d9d3;
  --soft: #f1f1ec;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible { outline: 0; }

.site-header { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding: .75rem clamp(1rem, 3vw, 3rem); border-bottom: 1px solid var(--line); background: rgba(251, 251, 248, .95); backdrop-filter: blur(12px); }
.wordmark, .collection, .eyebrow { letter-spacing: .16em; text-transform: uppercase; }
.wordmark { color: inherit; font-family: Cochin, "Cochin LT Std", Georgia, serif; font-size: 1.18rem; line-height: 1; text-decoration: none; }
.collection { margin: 0; color: #5a5a57; font: .66rem/1.2 Georgia, "Times New Roman", serif; text-align: center; }
.collection-switcher { align-self: center; justify-self: center; transform: translateY(-1px); }.collection-label { display: none; }.linesheet-select { appearance: none; max-width: 17rem; padding: .15rem 1.35rem .15rem .25rem; border: 0; border-radius: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='m1 1 4 4 4-4' fill='none' stroke='%2354544f' stroke-width='1'/%3E%3C/svg%3E") no-repeat right .25rem center / .55rem auto; color: #54544f; font: .66rem/1.2 Georgia, "Times New Roman", serif; letter-spacing: .16em; text-align: center; text-align-last: center; text-transform: uppercase; }.linesheet-select:focus-visible { outline: 0; }.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.order-trigger { justify-self: end; padding: .58rem .8rem; border: 1px solid var(--ink); border-radius: 0; background: var(--ink); color: white; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.order-trigger-label-mobile { display: none; }.order-trigger span#order-count { display: inline-grid; min-width: 1.4rem; height: 1.4rem; place-items: center; margin-left: .35rem; border-radius: 100%; background: white; color: var(--ink); font-size: .68rem; }

.intro { width: min(100% - 2rem, 68rem); margin: clamp(3.5rem, 8vw, 7rem) auto clamp(3rem, 7vw, 6rem); text-align: center; }
.eyebrow { margin: 0 0 .75rem; color: #70706c; font-size: .65rem; font-weight: 600; }
h1, h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: .03em; }
h1 { font-size: clamp(2.2rem, 5.4vw, 4.8rem); line-height: 1.02; }
.intro > p:last-child { width: min(100%, 36rem); margin: 1.5rem auto 0; color: #555550; font-size: .95rem; line-height: 1.6; }

.spreads { width: min(100% - 1.25rem, 106rem); margin: 0 auto 8rem; display: grid; gap: clamp(2.5rem, 7vw, 7rem); }
.site-footer { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; margin: -4.5rem clamp(1rem, 3vw, 3rem) 2rem; color: var(--ink); font: .8rem/1.3 Cochin, "Cochin LT Std", Georgia, serif; letter-spacing: .04em; }.site-footer a { color: inherit; text-decoration: none; }.site-footer > :nth-child(2) { text-align: center; }.site-footer > :last-child { text-align: right; }
.spread { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid #e4e4df; background: #fff; box-shadow: 0 12px 45px rgba(20, 20, 16, .07); }
.single-page-spread .linesheet-page { grid-column: 1 / -1; }
.linesheet-page { position: relative; min-width: 0; }
.spread-image { display: block; width: 100%; height: auto; }
.hotspot { position: absolute; z-index: 1; border: 0; background: transparent; }
.hotspot::after { position: absolute; right: 5px; top: 5px; display: grid; width: 1.4rem; height: 1.4rem; place-items: center; border-radius: 50%; background: #a6a6a1; color: white; content: attr(data-quantity); font-size: .67rem; font-weight: 700; opacity: 0; transform: scale(.7); transition: opacity .18s, transform .18s; }
.hotspot:hover, .hotspot:focus-visible { outline: 0; background: rgba(42, 42, 39, .09); }
.hotspot.has-selection::after, .hotspot:hover::after, .hotspot:focus-visible::after { opacity: 1; transform: scale(1); }

dialog { width: min(100% - 2rem, 37rem); max-height: min(42rem, calc(100vh - 2rem)); padding: 0; border: 0; color: var(--ink); background: var(--paper); box-shadow: 0 18px 65px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(27, 27, 23, .45); backdrop-filter: blur(3px); }
.dialog-shell, .order-shell { position: relative; padding: clamp(1.5rem, 5vw, 3rem); }
.close-dialog { position: absolute; top: .8rem; right: .8rem; width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; color: #666661; font-family: Arial, sans-serif; font-size: 1.5rem; font-weight: 300; line-height: 1; }
.product-dialog h2, .order-dialog h2 { font: 1.5rem/1.1 Cochin, "Cochin LT Std", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; }
.product-details { display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; margin: 1.2rem 0 1.8rem; color: #555550; font-size: .82rem; line-height: 1.5; }
.product-details dt { color: #898983; }.product-details dd { margin: 0; }
.sku-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin: -1rem 0 1.8rem; }
.sku-option { display: grid; gap: .28rem; padding: .8rem; border: 1px solid var(--line); background: transparent; color: var(--ink); text-align: left; }
.sku-option strong { font-size: .78rem; letter-spacing: .07em; }.sku-option span { color: #666661; font-size: .73rem; }.sku-option.is-selected { border-color: #777772; background: var(--soft); }
.size-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.size-control { display: grid; gap: .5rem; padding: .8rem; background: var(--soft); }
.size-control label { font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.size-control input { width: 100%; padding: .3rem; border: 0; border-bottom: 1px solid #898983; border-radius: 0; background: transparent; font-size: 1.1rem; }
.size-control input::-webkit-outer-spin-button, .size-control input::-webkit-inner-spin-button { margin: 0; appearance: none; }.size-control input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.dialog-actions, .order-actions { display: flex; justify-content: flex-end; gap: .7rem; margin-top: 2rem; }
.order-actions { margin-top: 2.3rem; }
.button { display: inline-block; padding: .8rem 1rem; border: 1px solid var(--ink); border-radius: 0; color: inherit; font-size: .70rem; font-weight: 600; letter-spacing: .08em; text-align: center; text-decoration: none; text-transform: uppercase; }
.order-actions .button { padding: .72rem .65rem; font-size: .70rem; }
@media (min-width: 761px) { .order-actions .button { flex: 1 1 0; } }
.button.is-disabled { cursor: not-allowed; opacity: .45; }
.button-primary { background: var(--ink); color: white; }.button-quiet { background: transparent; color: var(--ink); }
.order-details { display: grid; gap: .3rem; margin: .8rem 0 1.5rem; }.order-detail { width: fit-content; max-width: 100%; padding: 0; border: 0; background: transparent; color: var(--ink); font: .95rem/1.4 Georgia, "Times New Roman", serif; text-align: left; }.order-comment { color: #666661; font-size: .82rem; }.order-detail.is-placeholder { color: #777772; }.order-detail-input { width: min(100%, 28rem); box-sizing: border-box; padding: .3rem 0; border: 0; border-bottom: 1px solid #898983; border-radius: 0; background: transparent; color: var(--ink); font: inherit; line-height: 1.4; outline: 0; resize: vertical; }.order-detail-input::placeholder { color: #777772; }
.order-lines { max-height: 50vh; overflow: auto; border-top: 1px solid var(--line); }
.order-line { display: grid; width: 100%; grid-template-columns: 1fr auto; gap: .6rem; padding: 1rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: inherit; text-align: left; }.order-line:hover, .order-line:focus-visible { background: var(--soft); outline: 0; }.order-line strong { display: block; font: 1rem Georgia, "Times New Roman", serif; }.order-line span { display: grid; grid-template-columns: 12rem auto; gap: .8rem; min-width: 0; margin-top: .25rem; color: #666661; font-size: .74rem; }.order-line span em, .order-line span i { color: inherit; font: inherit; font-style: normal; }.order-line-qty { align-self: center; font-size: .8rem; font-weight: 700; }.empty-order { margin: 1.2rem 0; color: #666661; font-size: .9rem; }
.order-totals { display: grid; gap: .55rem; padding-top: 1rem; font-size: .85rem; }.order-totals > div { display: flex; justify-content: space-between; }.order-totals strong { font-size: 1.05rem; }
.print-sheet { display: none; }
.welcome-dialog { width: min(100% - 2rem, 33rem); }.welcome-shell { position: relative; display: grid; gap: 1.15rem; padding: clamp(2rem, 6vw, 3.5rem); }.welcome-shell h2 { font: 1.5rem/1.1 Cochin, "Cochin LT Std", Georgia, serif; letter-spacing: .06em; }.welcome-shell p { max-width: 30rem; margin: 0; color: #4f4f4b; font: .95rem/1.55 Georgia, "Times New Roman", serif; }.welcome-linesheet-select { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: .78rem Georgia, "Times New Roman", serif; letter-spacing: .08em; text-transform: uppercase; }.welcome-hint { margin-top: -.65rem !important; color: #777772 !important; font-size: .8rem !important; font-style: italic !important; }

@media (max-width: 760px) { .site-header { grid-template-columns: auto minmax(0, 1fr) auto; gap: .25rem; min-height: 2.7rem; padding: .65rem .75rem; }.wordmark { align-self: center; font-size: .78rem; line-height: 1; }.collection-switcher { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; grid-column: auto; grid-row: auto; transform: translate(-50%, -50%); }.collection-label { position: relative; display: inline-flex; align-items: center; gap: .35rem; color: #54544f; font: .54rem/1 Georgia, "Times New Roman", serif; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; pointer-events: none; }.collection-label::after { width: .42rem; height: .42rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; content: ""; transform: translateY(-.1rem) rotate(45deg); }.linesheet-select { position: absolute; z-index: 1; inset: 0; width: 100%; min-width: 100%; max-width: none; margin: 0; padding: 0; opacity: 0; cursor: pointer; }.order-trigger { display: inline-flex; grid-column: 3; grid-row: 1; align-items: center; justify-content: center; padding: .42rem .42rem; font-size: .57rem; line-height: 1; }.order-trigger-label-desktop { display: none; }.order-trigger-label-mobile { display: inline; }.order-trigger span#order-count { min-width: 1.25rem; height: 1.25rem; margin-left: .25rem; font-size: .62rem; }.spreads { width: 100%; gap: 0; }.spread { grid-template-columns: 1fr; gap: 0; border: 0; background: transparent; box-shadow: none; }.linesheet-page { margin: 0; padding: 0; background: white; font-size: 0; line-height: 0; }.size-grid { grid-auto-flow: column; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); }.dialog-actions, .order-actions { align-items: stretch; flex-direction: column-reverse; }.button { width: 100%; } }

@media print { @page { size: A4; margin: 15mm; } #app, dialog { display: none !important; } .print-sheet { display: block; color: #000; } .print-sheet .print-wordmark { margin: 0 0 8mm; font: 14pt/1 Cochin, "Cochin LT Std", Georgia, serif; letter-spacing: .16em; text-align: center; } .print-sheet h1 { margin-bottom: .3rem; font-size: 22pt; } .print-sheet p { margin: 0 0 8mm; font-size: 9pt; } .print-sheet table { width: 100%; border-collapse: collapse; font-size: 9pt; } .print-sheet th, .print-sheet td { padding: 2.5mm 1mm; border-bottom: 1px solid #aaa; text-align: left; } .print-sheet th:last-child, .print-sheet td:last-child { text-align: right; } .print-sheet .print-total { margin-top: 7mm; text-align: right; font-size: 11pt; font-weight: 700; } }