/* =====================================================================
   Museum of Wonder – Global Styles (Savanna brown–yellow theme)
   File: /Museum/css/style.css
   Notes
   - Paths are root-relative so they work anywhere on GitHub Pages.
   ===================================================================== */

/* -------- 0) Base reset -------- */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* -------- 1) Design tokens -------- */
:root{
  /* Sands & ambers */
  --sand-050:#FFF9ED; --sand-100:#FFF7D6; --sand-200:#FFEAA3;
  --sand-300:#FFE38A; --sand-400:#FFD972;
  --amber-500:#C88924; --amber-600:#A86A1C;

  /* Browns / “ink” */
  --brown-900:#15110d; --brown-800:#2b221a; --brown-700:#22160e;
  --brown-600:#3a2b20; --brown-550:#4a3a2a; --brown-500:#514235;
  --brown-400:#6b5340; --brown-300:#806451; --brown-200:#9d816a;

  /* Text */
  --text-100:#FFF7D6; --text-200:#E9DBB6; --text-300:#CDBB95;
  --text-dim:#A08E74;

  /* Effects */
  --ring-focus:#F3C968;
  --shadow-1: 0 10px 20px rgba(0,0,0,.25);
  --shadow-2: 0 18px 40px rgba(0,0,0,.35);

  /* Layout widths */
  --container: 1200px;
}

/* -------- 2) Base typography & page chrome -------- */
html, body { height: 100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: var(--text-200);
  background:
    radial-gradient(1200px 500px at 85% 0%, rgba(255,199,98,.18), transparent 70%),
    radial-gradient(800px 400px at 15% 0%, rgba(255,199,98,.18), transparent 70%),
    linear-gradient(180deg, var(--brown-800), var(--brown-900));
  line-height:1.6;
}

h1,h2,h3{ color: var(--text-100); margin:0 0 .35em; line-height:1.15; }
h1{ font-size: clamp(2.2rem, 3vw + 1.2rem, 3.4rem); font-weight:800; letter-spacing:.02em; }
h2{ font-size: clamp(1.6rem, 1.4vw + 1rem, 2.1rem); font-weight:700; }
h3{ font-size: 1.25rem; font-weight:700; }
p{ margin:.35rem 0 .85rem; }
a{ color: var(--sand-300); text-decoration:none; }
a:hover{ text-decoration:underline; }

.muted{ color: var(--text-300); }
.container{ width:min(100%, var(--container)); margin:0 auto; padding:0 20px; }
.content-area{ padding: 28px 0 80px; }
.page-title{ margin: 6px 0 10px; }

/* Accessibility helpers */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:12px; top:12px; width:auto; height:auto; padding:.5rem .75rem;
  background: var(--amber-600); color:#111; border-radius:999px; z-index:9999;
}

/* -------- 3) Header / nav -------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,0));
  backdrop-filter: blur(3px);
}
.top-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:18px 0;
}
.brand{ font-weight:800; letter-spacing:.02em; color:var(--text-100); }

.top-nav__links{
  display:flex; gap:.6rem; list-style:none; margin:0; padding:0;
}
.top-nav__links a{
  display:inline-block; padding:.55rem .9rem; border-radius:999px;
  color:var(--text-200); background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.top-nav__links a:hover{ background: rgba(255,255,255,.12); }
.top-nav__links a[aria-current="page"]{
  background: linear-gradient(180deg, var(--sand-300), var(--amber-600));
  color:#2d1f12; font-weight:700; border-color: rgba(0,0,0,.15);
}

/* Buttons */
.btn{
  padding:.55rem .9rem; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, var(--sand-300), var(--amber-600));
  color:#1b120c; font-weight:700; cursor:pointer;
  box-shadow: var(--shadow-1), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn:hover{ filter:saturate(1.05) brightness(1.03); }
.btn:focus-visible{ outline:3px solid var(--ring-focus); outline-offset:2px; }

/* -------- 4) Card + media frame -------- */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px; padding:18px; box-shadow: var(--shadow-2);
}
.media-frame{ border-radius:16px; overflow:hidden; background:var(--brown-600); }
.media-frame img{ display:block; width:100%; height:auto; }

/* -------- 5) Home “Featured” grid (optional general grid) -------- */
.grid-3{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:24px;
}

/* -------- 6) Collections grids -------- */
.card-grid{
  display:grid; gap:24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 12px 0 36px;
}
.collection-section{ margin: 36px 0 56px; }
.section-title{ margin: 8px 0 14px; }

/* “chip” links used as subnav */
.chip{
  display:inline-block; padding:.5rem .85rem; border-radius:999px;
  background: rgba(255,255,255,.08); color:var(--text-200);
  border:1px solid rgba(255,255,255,.10); margin-right:.35rem;
}
.chip:hover{ background: rgba(255,255,255,.14); }

/* -------- 7) Histories layout (image + text card) -------- */
.history-item{
  display:grid; gap:26px; align-items:start;
  grid-template-columns: minmax(260px, 560px) 1fr;
  padding:22px; border-radius:22px; background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.10);
}
.history-item .media-frame{ aspect-ratio:5/4; }
.history-text h4{ margin:.6rem 0 .2rem; color:var(--text-100); }
.history-text .courtesy{ color:var(--text-300); }
.back-link a{ color:var(--sand-300); }
@media (max-width: 880px){
  .history-item{ grid-template-columns: 1fr; }
}

/* -------- 8) Staff grid (uniform card sizes) -------- */
:root{
  --staff-card-min: 560px;      /* large screens total card height */
  --staff-image-ratio: 3 / 4;   /* portrait ratio */
}
.staff-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(240px,1fr));
  gap: 24px; align-items: stretch;
}
@media (max-width: 1200px){
  .staff-grid{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
}
@media (max-width: 680px){
  .staff-grid{ grid-template-columns: 1fr; }
}
.staff-card.card{
  min-height: var(--staff-card-min);
  height: 100%; display:flex; flex-direction:column;
}
.staff-card .media-frame{
  aspect-ratio: var(--staff-image-ratio);
  border-radius:18px; overflow:hidden; background: var(--brown-600);
  box-shadow: var(--shadow-1);
}
.staff-card .media-frame > img{ width:100%; height:100%; object-fit:cover; }
.staff-card .content{ display:flex; flex-direction:column; gap:.35rem; padding:16px; flex:1 1 auto; }
.staff-card .bio{ color: var(--text-200); }
.staff-card .push{ margin-top:auto; }
@media (max-width: 1100px){ .staff-card.card{ min-height:520px; } }
@media (max-width: 680px){ .staff-card.card{ min-height:unset; } }

/* -------- 9) SHOP GRID / CARDS ================= */
.shop-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-block: 24px 64px;
}
.shop-card.card{ display:flex; flex-direction:column; }
.shop-card .media-frame{ aspect-ratio: 4/3; overflow:hidden; border-radius:18px; }
.shop-card img{ width:100%; height:100%; object-fit:cover; }
.shop-card .price-row{ display:flex; justify-content:space-between; align-items:center; margin-top:.5rem; }
.qty-badge{ display:inline-block; margin-top:.25rem; font-size:.9rem; opacity:.8; }

/* ================= CART VIEW ================= */
.cart-list{ display:flex; flex-direction:column; gap:12px; margin-bottom:20px; }
.cart-row{ display:flex; justify-content:space-between; align-items:center; padding:12px; border-radius:14px; background:rgba(255,255,255,.03); }
.cart-left{ display:flex; gap:12px; align-items:center; }
.cart-left .thumb{ width:72px; height:72px; border-radius:10px; object-fit:cover; }
.cart-right{ display:flex; align-items:center; gap:12px; }
.amount{ text-align:right; font-variant-numeric: tabular-nums; min-width: 96px; }
.summary{ border-top:1px dashed rgba(255,255,255,.2); padding-top:14px; margin-top:4px; }
.summary > div{ display:flex; justify-content:space-between; padding:6px 0; }
.summary .total{ font-weight:700; border-top:1px solid rgba(255,255,255,.15); margin-top:8px; padding-top:10px; }
.cart-controls{ display:flex; align-items:center; gap:12px; margin-top:16px; }
.cart-controls .spacer{ flex:1; }
.switch{ display:flex; align-items:center; gap:8px; }


/* -------- 10) Tables / amounts (cart) -------- */
.amounts, .mono{
  font-variant-numeric: tabular-nums lining-nums; font-feature-settings:"tnum","lnum";
}
.summary{
  border-collapse: collapse; width:100%;
}
.summary th, .summary td{
  padding: .65rem .25rem; border-bottom:1px dashed rgba(255,255,255,.10);
}
.summary td.amounts{ text-align:right; }
.summary tfoot td{ font-weight:800; color:var(--text-100); }

/* -------- 11) Footer -------- */
.site-footer{ padding: 40px 0 60px; color: var(--text-300); }

/* -------- 12) Utility spacing -------- */
.mt-1{ margin-top:.5rem; } .mt-2{ margin-top:1rem; } .mt-3{ margin-top:1.5rem; }
.mb-1{ margin-bottom:.5rem; } .mb-2{ margin-bottom:1rem; } .mb-3{ margin-bottom:1.5rem; }