:root { --cream: #FBF8F2; --ink: #1a1a1a; --muted: #6b675e; --teal: #2f7d73; --m: clamp(16px, 6vw, 112px); }
* { box-sizing: border-box; }
html { background: var(--cream); }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--ink); text-decoration: none; }
a:hover { color: #555; }
.wrap { max-width: 2200px; margin: 0 auto; padding-left: var(--m); padding-right: var(--m); }

/* header + footer */
header { padding-top: max(var(--m), calc((100vw - 2200px) / 2 + 112px)); padding-bottom: 32px; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.brand { display: block; line-height: 0; }
.brand img { height: 30px; width: auto; display: block; }
nav { display: flex; flex-wrap: wrap; gap: 40px; font-size: 14px; letter-spacing: 0.02em; }
/* bold on hover without nudging neighbours: each link reserves its bold width */
nav a { display: inline-flex; flex-direction: column; align-items: center; }
nav a::after { content: attr(data-text); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }
nav a:hover { color: var(--ink); font-weight: 700; }
footer { padding-top: 48px; padding-bottom: max(var(--m), calc((100vw - 2200px) / 2 + 112px)); border-top: 1px solid rgba(26,26,26,0.12); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; font-size: 13px; color: var(--muted); }
footer a { color: var(--muted); }

/* homepage */
.hero { padding-top: 80px; padding-bottom: 112px; text-align: center; }
h1 { margin: 0; font-size: 40px; font-weight: 400; letter-spacing: -0.035em; line-height: 1.1; }
.shop { padding-bottom: 168px; }

/* poster grid + cards (homepage and "looks good with") */
.grid { display: grid; grid-template-columns: repeat(4, min(172px, 13.2%)); justify-content: space-between; row-gap: 104px; }
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(3, 20%); } }
@media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 36%); } }
.card { display: flex; flex-direction: column; gap: 20px; align-items: center; transition: opacity .35s ease; }
@media (hover: hover) {
  .grid:has(.card:hover) .card:not(:hover) { opacity: .5; }
  .card:hover .name { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
}
.frame { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; display: block; }
.name { font-size: 14px; letter-spacing: 0.01em; text-align: center; white-space: nowrap; }
.poster { display: flex; flex-direction: column; gap: 20px; align-items: center; width: 100%; }
.buy { display: flex; align-items: center; gap: 10px; margin-top: -16px; }
.price { font-size: 14px; font-weight: 700; color: var(--teal); }
.add { position: relative; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.add::after { content: ""; position: absolute; inset: -14px; }
.add svg { display: block; }
.add:hover, .add.added { background: var(--ink); border-color: var(--ink); color: var(--cream); }

/* product page */
.back { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; padding: 8px 0; position: relative; font-size: 16px; color: var(--muted); letter-spacing: -0.01em; }
.back .arrow { display: block; }
.back:hover { color: var(--ink); font-weight: 700; }
.back:hover .arrow path { stroke-width: 1.8; }
.back::after { content: ""; position: absolute; inset: -8px -12px; }
.product { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(40px, 8vw, 160px); padding-top: 56px; padding-bottom: 168px; }
.product-art { flex: 0 1 440px; }
.product-art img { width: 100%; aspect-ratio: 210 / 297; object-fit: cover; display: block; }
.product-info { flex: 0 1 360px; display: flex; flex-direction: column; gap: 40px; }
.title-group { display: flex; flex-direction: column; gap: 12px; }
.detail-group { display: flex; flex-direction: column; gap: 4px; }
.product-info h1 { font-size: 40px; }
.product-price { font-size: 18px; font-weight: 700; color: var(--teal); }
.specs { margin: 0; display: grid; grid-template-columns: auto 1fr; column-gap: 24px; row-gap: 10px; font-size: 14px; }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; }
.blurb { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; color: var(--ink); }
.size { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); }
.add-big { align-self: flex-start; height: 48px; padding: 0 32px; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); font: 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: background-color .2s ease, color .2s ease; }
.add-big:hover { background: transparent; color: var(--ink); }
.add-big svg { display: block; }
.related { padding-bottom: 168px; }
.related h2 { margin: 0 0 56px; font-size: 16px; font-weight: 400; letter-spacing: -0.01em; }
.not-found { padding: 120px 0 200px; text-align: center; }

@media (max-width: 640px) {
  nav { gap: 24px; }
  .hero { padding-top: 44px; padding-bottom: 60px; }
  h1, .product-info h1 { font-size: 30px; }
  .grid { grid-template-columns: min(100%, 320px); justify-content: center; row-gap: 64px; }
  .shop, .related { padding-bottom: 120px; }
  .product { padding-top: 32px; padding-bottom: 120px; }
  .add-big { align-self: stretch; justify-content: center; }
}

/* page-load fade: header, then heading, then posters one by one (~2.5s in all) */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
header, .back { animation: fade 1s ease backwards; }
.hero h1, .product-art { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .25s backwards; }
.product-info { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .45s backwards; }
.related h2 { animation: fade 1s ease .8s backwards; }
/* the fade runs on the card's contents, so it never fights the hover-dimming on the card itself */
.grid .card > * { animation: rise 1.1s cubic-bezier(.2,.7,.2,1) backwards; animation-delay: calc(.55s + var(--i, 0) * .12s); }
.related .grid .card > * { animation-delay: calc(.95s + var(--i, 0) * .12s); }
footer { animation: fade 1s ease 1.4s backwards; }
@media (prefers-reduced-motion: reduce) {
  header, .back, .hero h1, .product-art, .product-info, .related h2, .grid .card > *, footer { animation: none; }
}

/* account page */
.page-account { min-height: 100vh; display: flex; flex-direction: column; }
.page-account > header, .page-account > div, .page-account > main, .page-account > footer { width: 100%; }
.page-account main { flex: 1; }
.account { display: flex; justify-content: center; padding-top: 56px; padding-bottom: 168px; }
.step { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 40px; animation: rise .9s cubic-bezier(.2,.7,.2,1) .2s backwards; }
.step[hidden] { display: none; }
.step form { display: flex; flex-direction: column; gap: 28px; margin: 0; }
.muted { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; color: var(--muted); }
.body { margin: 0; font-size: 16px; line-height: 1.5; letter-spacing: -0.01em; }
.small { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.field { display: flex; flex-direction: column; gap: 4px; border-bottom: 1px solid rgba(26,26,26,0.25); transition: border-color .2s ease; }
.field:focus-within { border-bottom-color: var(--ink); }
.field > span:first-child { font-size: 13px; color: var(--muted); }
.field input { all: unset; box-sizing: border-box; width: 100%; font: 16px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: -0.01em; color: var(--ink); padding: 10px 0; }
.field input::placeholder { color: #a8a397; }
.phone-row { display: flex; align-items: center; gap: 10px; }
.prefix { font-size: 16px; color: var(--muted); }
.hidden-field { position: absolute; left: -9999px; }
.form-error { margin: -12px 0 0; min-height: 0; font-size: 13px; color: #a3322a; }
.form-error:empty { display: none; }
.actions { display: flex; flex-direction: column; gap: 16px; }
.btn { height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ink); background: var(--ink); color: var(--cream); font: 14px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.02em; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.btn:hover { background: transparent; color: var(--ink); }
.btn:disabled { opacity: .6; cursor: default; }
.textlink { all: unset; align-self: flex-start; cursor: pointer; font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.textlink:hover { color: var(--ink); font-weight: 700; }
nav a[aria-current="page"] { font-weight: 700; }
.one-line { white-space: nowrap; }
@media (max-width: 640px) { .account { padding-top: 56px; padding-bottom: 120px; } .one-line { white-space: normal; } }
@media (prefers-reduced-motion: reduce) { .step { animation: none; } }

/* about page */
.about { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(40px, 8vw, 160px); padding-top: 56px; padding-bottom: 168px; }
.about-photo { flex: 0 1 496px; animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .25s backwards; }
.about-photo img { width: 100%; height: auto; display: block; }
.about-text { flex: 0 1 400px; display: flex; flex-direction: column; gap: 24px; animation: rise 1.1s cubic-bezier(.2,.7,.2,1) .45s backwards; }
.about-text h1 { font-size: 40px; }
.about-text .body { line-height: 1.32; }
.about-text .signoff { margin-top: -12px; white-space: nowrap; }
@media (max-width: 640px) { .about { padding-top: 40px; padding-bottom: 120px; } }
@media (prefers-reduced-motion: reduce) { .about-photo, .about-text { animation: none; } }

/* cart page */
.cart-page { padding-top: 56px; padding-bottom: 168px; }
.cart-step { display: flex; flex-direction: column; gap: 56px; max-width: 1040px; margin: 0 auto; animation: rise .9s cubic-bezier(.2,.7,.2,1) .2s backwards; }
.cart-step[hidden] { display: none; }
.cart-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 6vw, 120px); }
.cart-layout[hidden] { display: none; }
.cart-items { list-style: none; margin: 0; padding: 0; flex: 1 1 480px; min-width: 0; border-top: 1px solid rgba(26,26,26,0.12); }
.cart-item { display: flex; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid rgba(26,26,26,0.12); }
.cart-thumb { flex: 0 0 72px; }
.cart-thumb img { width: 72px; aspect-ratio: 210 / 297; object-fit: cover; display: block; }
.cart-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-name { font-size: 16px; letter-spacing: -0.01em; }
.cart-name:hover { color: var(--ink); font-weight: 700; }
.qty { display: flex; align-items: center; gap: 14px; }
.line-price { font-size: 16px; min-width: 64px; text-align: right; }
.qty-n { font-size: 14px; min-width: 1ch; text-align: center; }
.cart-right { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.cart-right .price { font-size: 16px; }
.cart-right .textlink { align-self: flex-end; }
.summary { flex: 0 1 320px; display: flex; flex-direction: column; gap: 20px; }
.totals { margin: 0; display: grid; grid-template-columns: 1fr auto; row-gap: 12px; font-size: 16px; letter-spacing: -0.01em; }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; text-align: right; }
.totals .total { color: var(--ink); font-weight: 700; padding-top: 12px; border-top: 1px solid rgba(26,26,26,0.12); }
.mini-items { list-style: none; margin: 0; padding: 0 0 20px; border-bottom: 1px solid rgba(26,26,26,0.12); display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.mini-items li { display: flex; justify-content: space-between; gap: 16px; }
.cart-empty { display: flex; flex-direction: column; gap: 32px; max-width: 320px; margin-top: -40px; }
.cart-empty[hidden] { display: none; }
.address { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 28px; margin: 0; }
.field-row { display: flex; gap: 24px; }
.field-row .field { flex: 1; min-width: 0; }
.placeholder-note { color: var(--teal); }
@media (max-width: 640px) {
  .cart-page { padding-top: 32px; padding-bottom: 120px; }
  .cart-step { gap: 36px; }
  .cart-item { display: grid; grid-template-columns: 72px 1fr auto; column-gap: 16px; row-gap: 14px; align-items: center; }
  .cart-thumb { grid-row: 1 / span 2; align-self: start; }
  .cart-info { grid-column: 2 / span 2; align-self: end; }
  .qty { grid-column: 2; align-self: start; }
  .line-price { grid-column: 3; align-self: start; }
  .field-row { flex-direction: column; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) { .cart-step { animation: none; } }

/* empty cart: everything centred */
.cart-step.is-empty { align-items: center; text-align: center; padding-top: 48px; }
.cart-step.is-empty .cart-empty { align-items: stretch; width: 100%; }