/* The shop's own light design from Claude Design: cream paper, gold, Gilda Display over Jost. */
:root {
  --cream: #f5efe3; --paper: #fbf8f1; --sand: #ebe3d2; --line: #e2d8c3; --line-2: #cfc2a6;
  --ink: #17130e; --ink-2: #4a4235; --ink-3: #6b6152;
  --gold: #7d6618; --gold-deep: #5e4d12; --gold-bright: #a88a22;
  --display: 'Gilda Display', Georgia, 'Times New Roman', serif;
  --body: 'Jost', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); font-size: 15px; -webkit-font-smoothing: antialiased }
img { max-width: 100%; display: block }
a { color: var(--gold); text-decoration: none }
button { font-family: var(--body) }
[hidden] { display: none !important }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.wrap { max-width: 1240px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)) }
@media (max-width: 480px) { .wrap { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)) } }

.announce { background: var(--sand); color: var(--gold-deep); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; text-align: center; padding: 10px 16px; border-bottom: 1px solid var(--line) }

header { position: sticky; top: 0; z-index: 20; background: var(--cream); border-bottom: 1px solid var(--line) }
header .wrap { padding-block: 14px; display: flex; align-items: center; justify-content: space-between; gap: 24px }
.mark { display: flex; align-items: center; gap: 12px; color: var(--ink) }
.cr { display: flex; align-items: center; font-family: var(--display); line-height: 1 }
.cr .amp { font-size: .5em; margin: 0 .04em; position: relative; top: -.1em }
.mark .cr { font-size: 34px; color: var(--gold) }
.mark .word { font-size: 12px; font-weight: 300; letter-spacing: .34em; text-transform: uppercase }
nav { display: flex; gap: 28px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase }
nav a { color: var(--ink) } nav a:hover { color: var(--gold) }
@media (max-width: 480px) { .mark .word { display: none } nav { gap: 18px } }

.thanks { background: var(--paper); border-bottom: 1px solid var(--line) }
.thanks .wrap { padding-block: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; line-height: 1.5 }
.thanks strong { font-family: var(--display); font-weight: 400; font-size: 22px; display: block }
.thanks b { font-weight: 500; font-variant-numeric: tabular-nums; word-break: break-all }

.hero { background: var(--paper); border-bottom: 1px solid var(--line) }
.hero .wrap { padding-block: 72px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 56px; align-items: center }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; min-width: 0 }
.lockup { display: flex; flex-direction: column; align-items: center; gap: 6px }
.lockup .cr { font-size: clamp(88px, 14vw, 132px); line-height: .9; color: var(--gold-bright) }
.lockup .cr .amp { font-size: .48em; margin: 0 .02em; top: -.12em; -webkit-text-stroke: 1px var(--paper) }
.lockup .word { font-size: 20px; font-weight: 300; letter-spacing: .42em; padding-left: .42em; color: var(--gold) }
h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; max-width: 14ch; text-wrap: balance }
.lede { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 42ch }
.hero-photo { aspect-ratio: 4/5 }

.btn { display: inline-block; padding: 16px 32px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-align: center; border: 1px solid transparent; cursor: pointer }
.btn-solid { background: var(--gold); color: var(--paper) } .btn-solid:hover { background: var(--gold-deep); color: var(--paper) }
.btn-line { background: transparent; border-color: var(--gold); color: var(--gold) } .btn-line:hover { background: var(--sand); color: var(--ink) }
.btn:disabled { background: var(--sand); border-color: var(--line-2); color: var(--ink-3); cursor: not-allowed }

/* Until the shop photographs a garment, its frame is an empty swatch with a label. */
.photo { position: relative; width: 100%; max-width: 100%; overflow: hidden; background: var(--sand) }
.photo img { width: 100%; height: 100%; object-fit: cover }
.photo .pending { position: absolute; left: 12px; bottom: 12px; padding: 5px 10px; background: rgba(251, 248, 241, .9); color: var(--ink-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase }

main { padding-block: 72px 96px }
.shop-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 24px; margin-bottom: 36px }
h2 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 40px }
.chips { display: flex; flex-wrap: wrap; gap: 8px }
.chip { font-size: 13px; letter-spacing: .08em; padding: 9px 18px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer }
.chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--paper) }
.empty { color: var(--ink-3); margin: 0 0 24px }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 40px 24px }
.card { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 14px; min-width: 0 }
.card:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px }
.card .frame { aspect-ratio: 3/4 }
.card:hover .meta { opacity: .7 }
.meta { display: flex; flex-direction: column; gap: 6px }
.cat { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold) }
.name { font-family: var(--display); font-size: 20px; line-height: 1.25 }
.price { font-size: 15px; font-variant-numeric: tabular-nums }
.stock { font-size: 13px; color: var(--ink-3) }

footer { background: var(--sand); color: var(--ink-2) }
footer .wrap { padding-block: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px }
.foot-mark { display: flex; flex-direction: column; gap: 10px }
footer .cr { font-size: 48px; color: var(--gold-bright) }
footer .word { font-size: 12px; font-weight: 300; letter-spacing: .38em; color: var(--gold) }
.contact { display: flex; flex-direction: column; gap: 12px }
.contact .label { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold) }
.contact a { color: var(--ink) } .contact a:hover { color: var(--gold) }
.copy { border-top: 1px solid #d8cdb5; padding: 18px 16px; text-align: center; font-size: 12px; color: var(--ink-3) }

.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(94, 77, 18, .35); display: flex; justify-content: center; align-items: flex-start; overflow: auto; padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)) }
.sheet { position: relative; margin: auto; background: var(--cream); width: 100%; max-width: 960px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) }
.sheet .frame { aspect-ratio: 3/4 }
.sheet-body { padding: 40px 36px; display: flex; flex-direction: column; gap: 22px; min-width: 0 }
@media (max-width: 480px) { .sheet-body { padding: 28px 20px } }
.close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border: none; background: var(--cream); font-size: 24px; line-height: 1; cursor: pointer; color: var(--ink); z-index: 2 }
.sel-head, .sel-sizes { display: flex; flex-direction: column; gap: 10px }
h3 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.15; text-wrap: balance }
.sheet .price { font-size: 20px }
.desc { margin: 0; font-size: 15px; font-weight: 300; line-height: 1.65; color: var(--ink-2); max-width: 60ch }
.sizes-label { font-size: 12px; letter-spacing: .14em; text-transform: uppercase }
.sizes { display: flex; flex-wrap: wrap; gap: 8px }
.size { min-width: 48px; height: 44px; padding: 0 14px; font-size: 14px; border: 1px solid var(--line-2); background: transparent; color: var(--ink); cursor: pointer }
.size[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--paper) }
.actions { display: flex; flex-direction: column; gap: 10px; margin-top: auto }
.actions .btn { display: block; width: 100% }
.hint { font-size: 13px; color: var(--ink-3); line-height: 1.5; margin: 0 }
.hint.error { color: #9b2c1f }
.buyer { display: flex; flex-direction: column; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0 }
.buyer legend { padding: 0; margin-bottom: 8px }
.buyer input { width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); border-radius: 0 }
.buyer input:focus { border-color: var(--gold) }
@media (prefers-reduced-motion: no-preference) { .chip, .size, .btn, .meta { transition: background-color .15s, color .15s, opacity .15s } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }