/* Gallery layout modeled on Shopify's Exhibit theme: black on white, full-bleed with 15 px
   gutters, system text, Inter 500 headings with tight tracking. The artwork carries the colour. */
:root {
  --bg: #fff;
  --fg: #000;
  --accent: #ff1086;
  --gutter: 15px;
  --gap: 7.5px;
  --heading: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

@media (min-width: 990px) {
  :root { --gap: 15px; }
}

* { box-sizing: border-box; }

html { font-size: 18px; }
@media (min-width: 990px) { html { font-size: 20px; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 1rem/1.2 var(--text);
}

a { color: inherit; text-decoration: none; }
a:hover, a[aria-current] { text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, .statement, .wordmark {
  font-family: var(--heading);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.05em;
  margin: 0;
}

h1 { font-size: 1.777rem; }
h2 { font-size: 1.333rem; }

@media (min-width: 990px) {
  h1 { font-size: 3.157rem; }
  h2 { font-size: 1.777rem; }
}

main, .site-header, .site-footer { padding: 0 var(--gutter); }
section, .statement, .collage, .artwork { margin-top: 42px; }

@media (min-width: 990px) {
  section, .statement, .collage, .artwork { margin-top: 75px; }
}

/* Header: one row of text columns on desktop, name + Menu on phones. */
.site-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-header .name { font-family: var(--heading); font-weight: 500; letter-spacing: -0.03em; margin-right: auto; }
.place, .header-links { display: none; }

.menu summary { list-style: none; cursor: pointer; position: relative; z-index: 11; }
.drawer-gap { height: 12px; }
.menu summary::-webkit-details-marker { display: none; }

.menu[open] .drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: 92%;
  max-width: 420px;
  padding: 64px 24px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.4);
  z-index: 10;
}

@media (min-width: 990px) {
  .site-header { display: grid; grid-template-columns: 1fr auto auto auto; gap: 0 30px; align-items: start; padding-top: 24px; padding-bottom: 24px; }
  .site-header .name { white-space: nowrap; }
  .header-links { display: flex; flex-direction: column; white-space: nowrap; }
  .menu { display: none; }
}

@media (min-width: 1200px) {
  .site-header { grid-template-columns: 1fr 1fr auto auto auto; gap: 0 45px; }
  .place { display: block; }
}

/* Giant wordmark, sized from its container (not the viewport, which includes any scrollbar) so it
   always spans the content width exactly. Phones stack it on two lines so it stays large. */
main, .site-footer { container-type: inline-size; }

.wordmark {
  font-size: 31.5cqw;
  line-height: 0.8;
  padding-bottom: 0.2em;
  letter-spacing: -0.07em;
  margin-left: -0.035em;
  white-space: nowrap;
  overflow: hidden;
}

main > .wordmark { margin-top: 12px; }
.wordmark span { display: block; }

@media (min-width: 600px) {
  .wordmark { font-size: 17.3cqw; }
  .wordmark span { display: inline; }
}

.statement { font-size: 1.777rem; max-width: 30ch; }
@media (min-width: 990px) { .statement { font-size: 4.209rem; } }

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px var(--gutter);
  margin-bottom: 18px;
}

.filters { margin: 0; }

.filters button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.filters button:hover, .filters button[aria-pressed="true"] { text-decoration: underline; }

.search {
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--fg);
  border-radius: 0;
  padding: 8px 0;
  margin-bottom: 18px;
}

.search:focus { outline: none; border-bottom-color: var(--accent); }
.no-results { margin: 0 0 18px; }

/* Product grid: masonry columns, 2 on phones up to 6 on wide screens; images keep their shape. */
.grid { columns: 2; column-gap: var(--gap); }

@media (min-width: 600px) { .grid { columns: 3; } }
@media (min-width: 990px) { .grid { columns: 4; } }
@media (min-width: 1300px) { .grid { columns: 6; } }
.grid.related { columns: 2; }
@media (min-width: 990px) { .grid.related { columns: 4; } }

.work { display: block; break-inside: avoid; margin-bottom: var(--gap); }
.work[hidden] { display: none; }
.work .frame { display: block; overflow: hidden; position: relative; }
.work img { width: 100%; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.work:hover { text-decoration: none; }
.work:hover img { transform: scale(1.03); }
.work .caption {
  position: absolute;
  left: 0;
  bottom: 0;
  max-width: 100%;
  padding: 4px 8px;
  background: var(--bg);
  color: var(--fg);
  opacity: 0;
  transition: opacity 0.2s;
}

.work:hover .caption, .work:focus-visible .caption { opacity: 1; }

/* Artwork page: swipeable images on phones; stacked images and a sticky buy column on desktop. */
.artwork { display: grid; gap: 30px; }

.slides {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
}

.slides img {
  flex: 0 0 100%;
  max-height: 80vh;
  object-fit: contain;
  scroll-snap-align: center;
}

@media (min-width: 990px) {
  .artwork { grid-template-columns: 7fr 5fr; gap: 60px; }
  .slides { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 60px; }
  .slides img { flex: none; width: 100%; max-height: none; }
  .details { position: sticky; top: 24px; align-self: start; }
}

.details .price { margin: 12px 0 24px; }

.specs { width: 100%; border-collapse: collapse; margin-bottom: 24px; }
.specs th, .specs td { text-align: left; font-weight: 400; padding: 8px 0; border-top: 1px solid var(--fg); vertical-align: top; }
.specs tr:last-child th, .specs tr:last-child td { border-bottom: 1px solid var(--fg); }
.specs th { width: 40%; }

.buy-form fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.buy-form legend { margin-bottom: 8px; }
.buy-form label { display: inline-block; margin: 0 6px 8px 0; }
.buy-form input { position: absolute; opacity: 0; }

.buy-form label span {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--fg);
  border-radius: 9999px;
  cursor: pointer;
}

.buy-form input:checked + span { background: var(--fg); color: var(--bg); }
.buy-form input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.buy-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.buy-form button, .button {
  display: block;
  text-align: center;
  width: 100%;
  font: inherit;
  padding: 12px;
  border: 1px solid var(--fg);
  border-radius: 9999px;
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
}

.buy-form button:hover, .button:hover { background: var(--accent); border-color: var(--accent); text-decoration: none; }
.buy-form .add-to-cart { background: var(--bg); color: var(--fg); }
.buy-form .add-to-cart:hover { color: var(--bg); }
.added { margin: 8px 0 0; }

/* Cart and checkout: one row per print, then right-aligned totals. */
.order-lines { list-style: none; padding: 0; margin: 0 0 18px; }
.order-lines li {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 4px 12px;
  align-items: start;
  padding: 12px 0;
  border-top: 1px solid var(--fg);
}
.order-lines img { width: 64px; }
.order-lines .qty { grid-column: 2; display: flex; gap: 12px; align-items: center; }
.order-lines .amount { grid-column: 3; grid-row: 1; text-align: right; }
.order-lines select { font: inherit; }
.order-total { display: flex; justify-content: space-between; margin: 0; padding: 8px 0; border-top: 1px solid var(--fg); }
.order-total.grand { font-weight: 600; border-bottom: 1px solid var(--fg); }
.cart-footer .button { margin-top: 18px; }
button.link { font: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; color: inherit; }

.checkout { display: grid; gap: 30px; margin-top: 42px; }
.checkout .prose { margin-top: 0; }
@media (min-width: 990px) {
  .checkout { grid-template-columns: 5fr 7fr; gap: 60px; margin-top: 75px; }
  .checkout .summary { position: sticky; top: 24px; align-self: start; }
}
.assurance { font-size: 0.8rem; margin: 8px 0 0; }

.description { margin-top: 30px; line-height: 1.4; }
.description h2 { font-size: 1.333rem; margin: 24px 0 8px; }

.prose { max-width: 40rem; margin-top: 42px; line-height: 1.4; }
.prose h1 { margin-bottom: 24px; }
.prose h2 { margin: 30px 0 10px; }
.posts { padding: 0; list-style: none; }
.posts li { padding: 8px 0; border-top: 1px solid var(--fg); }
.posts time { display: block; font-size: 0.8rem; }
.posts a { display: flex; gap: 12px; align-items: center; }
.posts img { width: 96px; aspect-ratio: 1; object-fit: cover; flex: none; }
.prose .featured { width: 100%; margin-bottom: 24px; }

/* Footer: four text columns, then the wordmark again. */
.site-footer { margin-top: 90px; }
.site-footer .blurb { max-width: 40rem; }
.site-footer p { margin: 0; }
.site-footer .policy-links { margin: 18px 0 6px; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.legal { margin-top: 24px !important; font-size: 0.8rem; }
.site-footer .wordmark { margin: 24px 0 0 -0.035em; }