/* =========================================================================
   Museum of Arcadia — Base Reset & Typography
   ========================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Off-screen fixed-position drawers (cart, mobile menu) translate past
   the viewport's right edge when closed. Without overflow-x:hidden on
   the document root, those translated bounding boxes extend the
   scrollable width, producing phantom horizontal scroll and skewing
   layout calculations on pages with sticky/grid content (notably
   /checkout/). One global rule kills it for every drawer pattern. */
html, body { overflow-x: clip; }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--moa-black);
  background-color: var(--moa-white);
  min-height: 100vh;
}

/* Block-level reset */
h1, h2, h3, h4, h5, h6,
p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* ----- Caps text utility ----- */
.caps {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 500;
}

.caps-tight {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-tight);
  font-weight: 500;
}

.caps-bold {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 700;
}

/* ----- Italic body ----- */
.italic {
  font-style: italic;
}

/* ----- Container ----- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--container-pad-d);
  padding-right: var(--container-pad-d);
}

@media (max-width: 768px) {
  .container {
    padding-left: var(--container-pad-m);
    padding-right: var(--container-pad-m);
  }
}

/* ----- Visibility utilities ----- */
.desktop-only {
  display: block;
}

.mobile-only {
  display: none;
}

@media (max-width: 968px) {
  .desktop-only {
    display: none;
  }
  .mobile-only {
    display: block;
  }
}

/* ----- Visually hidden but accessible ----- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ----- Page title with animation hook ----- */
.page-title {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  font-weight: 500;
  font-size: var(--fs-page-title);
  line-height: var(--lh-tight);
  text-align: center;
  position: relative;
  display: inline-block;
}

/* Title animation: black underline draws from left to right on first paint.
   Per brief: applies to LIFE AT MOA, A NEW DAWN COLLECTION, THE NEW DAWN
   MANIFESTO, ART AT MOA, CONDITIONS OF SALE, ABOUT ARTWORKS, TERMS OF USE,
   PRIVACY POLICY, MY PROFILE, MY PASSWORD, MY ORDERS, MY ADDRESSES,
   MY SUBSCRIPTIONS. Reference video defines exact timing — placeholder
   here pending that asset. */
.page-title--animated::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 3px;
  width: 100%;
  background-color: var(--moa-nav-active);
  transform: scaleX(0);
  transform-origin: left center;
  animation: titleUnderline 700ms var(--ease-out) 200ms forwards;
}

@keyframes titleUnderline {
  to { transform: scaleX(1); }
}