/* wabi sabi — intrinsic ahotml gallery rules */
:root {
  color-scheme: light dark;
  --ink: CanvasText;
  --paper: Canvas;
  --line: color-mix(in srgb, CanvasText 26%, transparent);
  --shade: color-mix(in srgb, CanvasText 8%, transparent);
  --float: color-mix(in srgb, Canvas 92%, CanvasText 8%);
  --shadow: color-mix(in srgb, CanvasText 20%, transparent);
}
* { box-sizing: border-box; }
img { display: block; max-inline-size: 100%; block-size: auto; object-fit: contain; margin-inline: auto; }
a { overflow-wrap: anywhere; }
main { margin-block: clamp(1.5rem, 5vh, 4rem); }
.home-gallery, .art-grid, .detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: clamp(0.75rem, 2vw, 2rem);
  align-items: start;
}
.home-gallery { margin-block: clamp(1.5rem, 5vh, 4rem); }
.home-featured { margin-block: clamp(1.5rem, 4vh, 3rem); }
.art-grid > h2 { grid-column: 1 / -1; margin-block: 0; }
.art-card, .art-piece, .detail-image { min-inline-size: 0; }
.art-card h2, .art-piece h2 { margin-block: 0.5rem; }
.art-card p, .art-piece p { margin-block: 0.5rem; }
.art-piece { display: grid; gap: 0.35rem; align-content: start; }
.art-link { display: grid; place-items: center; }
.art-link img { max-block-size: min(78vh, 52rem); }
.detail-image img { max-block-size: min(82vh, 60rem); }
.title { font: inherit; }
.price { opacity: 0.7; }
#contact { scroll-margin-block-start: 1rem; }
.love { display: block; margin-block: 2rem 1rem; }

.buy-btn, .action-link, .basket-indicator, .basket-order {
  display: inline-flex;
  inline-size: fit-content;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.25rem;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.buy-btn:hover, .buy-btn:focus-visible, .buy-btn[aria-pressed="true"], .action-link:hover, .action-link:focus-visible, .basket-indicator:hover, .basket-indicator:focus-visible, .basket-order:hover, .basket-order:focus-visible { background: var(--ink); color: var(--paper); }

.menu-toggle { position: static; }
.menu-toggle.scrolled {
  position: fixed;
  inset-block-start: max(0.5rem, env(safe-area-inset-top));
  inset-inline-start: max(0.5rem, env(safe-area-inset-left));
  z-index: 110;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999rem;
  background: var(--float);
  box-shadow: 0 0.25rem 1rem var(--shadow);
}
#menu .menu-ahoxus { font-weight: 700; }

.basket-indicator {
  position: fixed;
  inset-block-end: max(0.5rem, env(safe-area-inset-bottom));
  inset-inline-end: max(0.5rem, env(safe-area-inset-right));
  z-index: 100;
  background: var(--float);
  box-shadow: 0 0.25rem 1rem var(--shadow);
}
.basket-indicator[hidden], #basket-overlay[hidden], #basket-panel[hidden] { display: none; }
#basket-overlay { position: fixed; inset: 0; z-index: 98; background: color-mix(in srgb, CanvasText 35%, transparent); }
#basket-panel {
  position: fixed;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 99;
  inline-size: min(32rem, calc(100% - 2rem));
  max-block-size: calc(100dvh - 2rem);
  overflow: auto;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid var(--line);
  border-radius: 0.5rem;
  background: var(--float);
  color: var(--ink);
  box-shadow: 0 0.75rem 3rem var(--shadow);
}
#basket-panel h2 { margin-block-start: 0; font-size: 1.1rem; }
#basket-items { margin: 0 0 1rem; padding-inline-start: 1.25rem; }
#basket-items li { margin-block: 0.5rem; }
.basket-remove, .basket-clear, .checkout-close {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.basket-remove, .basket-clear {
  inline-size: 1.75rem;
  block-size: 1.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999rem;
  line-height: 1;
}
.checkout-close { float: inline-end; }
#order-summary { padding-block-start: 0.75rem; border-block-start: 1px solid var(--line); }
#order-summary p { margin-block: 0.75rem; }
@media (prefers-color-scheme: dark) { :root { --float: color-mix(in srgb, Canvas 86%, CanvasText 14%); } }