/* House of Parchment — Elegant stationery boutique. Soft, calmer, regal. */

html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
* { box-sizing: border-box; }
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
img { display: block; }
svg.icon { display: block; flex: none; }

.page {
  min-height: 100vh; padding-bottom: 88px;
  background:
    radial-gradient(ellipse 90% 50% at 15% 0%, rgba(253,250,244,.95) 0%, rgba(253,250,244,0) 60%),
    radial-gradient(ellipse 80% 60% at 85% 100%, rgba(176,141,87,.15) 0%, rgba(176,141,87,0) 60%),
    var(--paper);
}
.wrap { max-width: 1200px; margin: 0 auto; padding-left: clamp(20px,4vw,48px); padding-right: clamp(20px,4vw,48px); }
.stack { display: flex; flex-direction: column; }
.row-between { display: flex; justify-content: space-between; }
.strike { text-decoration: line-through; }
.center { text-align: center; }

/* ── Typography ── */
.smallcaps { font: 500 11px/1.5 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.eyebrow { display: flex; align-items: center; gap: 10px; color: var(--gold); }
.eyebrow > span:not(.orn) { font: 500 11px/1.5 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.orn { font: 400 12px/1 var(--font-serif); }
.h2 { margin: 0; font: 500 clamp(32px,4vw,46px)/1.08 var(--font-serif); letter-spacing: -.01em; text-wrap: balance; }
.h2-sm { margin: 0; font: 500 clamp(30px,3.8vw,42px)/1.1 var(--font-serif); letter-spacing: -.01em; text-wrap: balance; }
.lede { margin: 0; font: 400 17px/26px var(--font-sans); color: var(--muted); text-wrap: pretty; }
.label { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* ── Buttons ── */
.btn { border: 0; cursor: pointer; background: var(--ink); color: var(--paper); border-radius: 8px; font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transition: background .2s, transform .1s; }
.btn:hover { background: var(--ink-hover); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .6; cursor: progress; }
.btn-block { width: 100%; padding: 19px 24px; }
.btn-lg { padding: 22px 28px; font-size: 13px; }
.btn-icon { border: 0; background: transparent; cursor: pointer; padding: 6px; color: var(--muted); display: flex; }
.btn-ghost { border: 0; background: transparent; cursor: pointer; color: var(--muted); font: 400 15px/20px var(--font-sans); text-decoration: underline; padding: 6px; }

/* ── Navigation ── */
.nav { position: sticky; top: 0; z-index: 20; background: rgba(247,241,230,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--line-soft); }
.nav .wrap { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.wordmark { font: 700 15px/1.2 var(--font-wordmark); letter-spacing: .04em; color: var(--ink); }
.nav-links { display: flex; align-items: center; gap: 20px; }
.nav-links a { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.nav-links .btn { padding: 11px 18px; font-size: 11px; letter-spacing: .1em; white-space: nowrap; }

/* ── Hero ── */
.hero { padding-top: clamp(28px,5vw,64px); padding-bottom: clamp(64px,9vw,112px); display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,440px),1fr)); gap: clamp(32px,5vw,72px); align-items: start; }
.gallery { padding: 8px; background: var(--paper-card); border-radius: 12px; box-shadow: 0 2px 16px rgba(54,42,56,.06), inset 0 0 0 1px var(--line-soft); }
.gallery-main { position: relative; overflow: hidden; border-radius: 8px; background: var(--cream); }
.gallery-main img { width: 100%; height: auto; }
.gallery-main::after { content: ""; position: absolute; inset: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(54,42,56,.1); pointer-events: none; }
.gallery-tag { position: absolute; left: 14px; top: 14px; z-index: 1; background: rgba(253,250,244,.92); backdrop-filter: blur(6px); color: var(--ink); padding: 8px 12px; border-radius: 6px; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 1px 4px rgba(54,42,56,.08); }

/* Hover zoom */
@media (hover: hover) {
  .gallery-main { cursor: zoom-in; }
  .gallery-main img { transition: transform .25s ease; }
  .gallery-main.is-zoomed img { transform: scale(2.2); transition: transform .25s ease, transform-origin .08s linear; }
  .gallery-main.is-zoomed .gallery-tag { opacity: 0; }
  .gallery-tag { transition: opacity .2s; }
}

.buybox { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { margin: 0; font: 500 clamp(38px,5.2vw,60px)/1.04 var(--font-serif); letter-spacing: -.01em; text-wrap: balance; }
.hero h1 em { font-style: italic; font-weight: 400; }
.hero-copy { margin: 0; font: 400 18px/28px var(--font-sans); color: var(--muted); max-width: 520px; text-wrap: pretty; }

/* Swatches */
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; padding: 0; box-shadow: inset 0 0 0 1px rgba(54,42,56,.15); transition: box-shadow .15s, transform .15s; }
.swatch:hover { transform: scale(1.1); }
.swatch.is-selected { box-shadow: 0 0 0 2.5px var(--paper), 0 0 0 4px var(--gold); }
.colour-tones { font: 500 11px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.colour-desc { font: italic 400 18px/26px var(--font-serif); color: var(--ink); text-wrap: pretty; }

/* ── Signature Set card ── */
.set-card { background: var(--paper-card); border-radius: 12px; box-shadow: 0 2px 12px rgba(54,42,56,.05), inset 0 0 0 1px var(--line-soft); padding: 22px 24px; }
.set-card-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.set-card-name { font: 500 22px/1.1 var(--font-serif); display: block; }
.set-card-sub { font: 400 15px/21px var(--font-sans); color: var(--muted); display: block; margin-top: 4px; }
.set-card-price { font: 500 36px/1 var(--font-serif); color: var(--gold); flex: none; }

/* ── Trust strip ── */
.trust { display: flex; justify-content: center; gap: 4px 12px; flex-wrap: wrap; font: 400 15px/20px var(--font-sans); color: var(--muted); }
.trust span { white-space: nowrap; }

/* ── Sections ── */
.band { background: var(--band); box-shadow: 0 1px 0 var(--line-soft), inset 0 1px 0 var(--line-soft); }
.band-alt { background: var(--paper); }
.section-pad { padding-top: clamp(64px,9vw,120px); padding-bottom: clamp(64px,9vw,120px); }
#inside, #palettes { scroll-margin-top: 60px; }
.inside { max-width: 960px; display: flex; flex-direction: column; gap: 36px; }

/* ── Items grid (what's inside) ── */
.items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.item-card { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; background: var(--paper-card); border-radius: 10px; box-shadow: 0 1px 4px rgba(54,42,56,.04), inset 0 0 0 1px var(--line-soft); }
.item-check { color: var(--gold); flex: none; margin-top: 2px; }
.item-name { font: 400 16px/22px var(--font-sans); }
.item-value { font: 500 10px/1.3 var(--font-mono); letter-spacing: .06em; color: var(--gold); }

/* ── Palette cards ── */
.cards { display: grid; grid-template-columns: repeat(auto-fill,minmax(min(100%,260px),1fr)); gap: 16px; }
.card { padding: 7px; border: 0; cursor: pointer; text-align: left; background: var(--paper-card); border-radius: 12px; box-shadow: 0 2px 8px rgba(54,42,56,.05), inset 0 0 0 1px var(--line-soft); display: flex; flex-direction: column; color: var(--ink); transition: box-shadow .2s, transform .15s; }
.card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(54,42,56,.1), inset 0 0 0 1px var(--line); }
.card.is-selected { box-shadow: var(--frame); }
.card img { width: 100%; height: auto; border-radius: 8px; background: var(--cream); }
.card-head { padding: 14px 10px 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.card-name { display: flex; align-items: center; gap: 8px; font: 500 20px/1 var(--font-serif); }
.card-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(54,42,56,.15); }
.card-state { font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.card-body { padding: 0 10px 12px; }
.card-tones { font: 500 10px/1.5 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ── Guarantee ── */
.guarantee { max-width: 880px; margin: 0 auto; padding: clamp(64px,9vw,112px) clamp(20px,4vw,48px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.medallion { width: 56px; height: 56px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold), inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(176,141,87,.4); color: var(--gold); display: flex; align-items: center; justify-content: center; font: 400 20px/1 var(--font-serif); }

/* ── FAQ ── */
.faq { max-width: 760px; margin: 0 auto; padding: clamp(64px,9vw,112px) clamp(20px,4vw,48px); display: flex; flex-direction: column; gap: 28px; }
.faq-list { display: flex; flex-direction: column; box-shadow: inset 0 1px 0 var(--line-soft); }
.faq-item { box-shadow: inset 0 -1px 0 var(--line-soft); }
.faq-q { width: 100%; border: 0; background: transparent; cursor: pointer; padding: 22px 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; text-align: left; color: var(--ink); font: 500 19px/26px var(--font-serif); }
.faq-sign { font: 400 26px/1 var(--font-serif); color: var(--gold); flex: none; }
.faq-a { margin: 0; padding: 0 0 22px; font: 400 16px/24px var(--font-sans); color: var(--muted); text-wrap: pretty; }

/* ── Footer ── */
.footer { box-shadow: inset 0 1px 0 var(--line-soft); }
.footer .wrap { padding-top: 36px; padding-bottom: 36px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font: italic 400 16px/22px var(--font-serif); color: var(--muted); }
.footer .wordmark { font-size: 14px; font-style: normal; }

/* ── Sticky bar ── */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: rgba(247,241,230,.97); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 -1px 0 var(--line-soft); padding: 12px clamp(20px,4vw,48px) calc(12px + env(safe-area-inset-bottom)); }
.bar-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bar-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.thumb-sm { width: 44px; height: 44px; object-fit: cover; flex: none; border-radius: 6px; box-shadow: 0 0 0 1px var(--line-soft); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title { font: 500 17px/1.1 var(--font-serif); }
.bar-sub { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bar .btn { flex: none; padding: 14px 20px; font-size: 11px; }

/* ── Checkout sheet ── */
.scrim { position: fixed; inset: 0; background: rgba(54,42,56,.5); display: flex; }
.sheet { z-index: 60; justify-content: flex-end; }
.sheet-panel { background: var(--paper-sheet); width: min(100%,460px); height: 100%; overflow: auto; display: flex; flex-direction: column; box-shadow: -4px 0 24px rgba(54,42,56,.12); }
.sheet-head { position: sticky; top: 0; background: var(--paper-sheet); box-shadow: 0 1px 0 var(--line-soft); padding: 0 20px; height: 60px; display: flex; align-items: center; justify-content: space-between; z-index: 1; }
.sheet-head .wordmark { font-size: 13px; }
.sheet-body { padding: 24px 20px; display: flex; flex-direction: column; gap: 22px; }
.line { display: flex; gap: 14px; align-items: center; }
.line img { width: 72px; height: 72px; object-fit: cover; flex: none; border-radius: 8px; box-shadow: 0 0 0 1px var(--line-soft); }
.line-name { font: 500 20px/1.15 var(--font-serif); }
.line-price { font: 500 20px/1 var(--font-serif); color: var(--gold); }
.pack-sub-sm { font: 400 14px/20px var(--font-sans); color: var(--muted); }

/* ── Add-ons ── */
.addons-section { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid var(--line-soft); }
.addons-heading { font: 500 11px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.addon { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--paper-card); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-soft); cursor: pointer; transition: box-shadow .15s; }
.addon:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.addon-check { width: 20px; height: 20px; accent-color: var(--gold); cursor: pointer; flex: none; }
.addon-info { display: flex; justify-content: space-between; align-items: center; flex: 1; min-width: 0; }
.addon-name { font: 400 16px/22px var(--font-sans); }
.addon-price { font: 500 15px/1 var(--font-serif); color: var(--gold); white-space: nowrap; }

/* ── Totals ── */
.totals { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--line-soft); font: 400 15px/20px var(--font-sans); }
.totals div { display: flex; justify-content: space-between; color: var(--muted); }
.totals .total { font: 500 20px/26px var(--font-serif); color: var(--ink); }
.fineprint { margin: 0; font: italic 400 15px/21px var(--font-serif); color: var(--muted); text-align: center; }
.notice { margin: 0; padding: 14px 16px; font: 400 15px/21px var(--font-sans); background: var(--paper-card); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.notice.error { background: rgba(123,45,38,.08); box-shadow: inset 0 0 0 1px rgba(123,45,38,.3); color: var(--wax); }

/* ── Mobile ── */
@media (max-width: 600px) {
  .nav-links a:not(.btn) { display: none; }
  .set-card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .set-card-price { font-size: 30px; }
  .hero h1 { font-size: clamp(32px, 8vw, 42px); }
}