/* ==========================================================================
   Needful - site styles
   Single stylesheet on purpose: the site is small, and one file means one
   request and nothing to keep in sync.

   Fonts: system stack for now. The real display face should be SELF-HOSTED
   (woff2 in assets/fonts/ + <link rel=preload>), never pulled from Google's
   CDN - hotlinking it hands visitor IPs to a third party, which is a problem
   under GDPR and has been ruled on in the EU.
   ========================================================================== */

:root {
  --bg:        #FAF6EE;   /* header + hero cream */
  --band:      #FDFBF7;   /* filter strip */
  --surface:   #FFFFFF;   /* cards, panels */
  --ink:       #16120F;
  --muted:     #6E6862;
  --line:      #E8E0D3;
  --accent:    #EF5236;
  --accent-dk: #D8402A;
  --amber:     #E08A2E;

  --radius:    12px;
  --radius-sm: 8px;
  --wrap:      1240px;

  --font-display: "Archivo Black", "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* height:auto is not cosmetic. The width/height HTML attributes (kept so the
   browser can reserve space and avoid layout shift) become CSS width/height -
   and aspect-ratio is ignored when BOTH are set. Without this, every image
   renders at its attribute height instead of its intended crop. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff;
  padding: 10px 16px; border-radius: var(--radius-sm); z-index: 100;
}
.skip:focus { left: 16px; top: 16px; }

:where(a, button):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --- Header --------------------------------------------------------------- */

.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: 96px;
}

.logo img { width: auto; height: 62px; }

.site-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-list {
  display: flex;
  gap: clamp(18px, 3vw, 48px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list a {
  position: relative;
  display: inline-block;
  padding: 6px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-list a:hover { color: var(--accent); }

.nav-list a.is-active { color: var(--accent); }
.nav-list a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 3px;
  background: var(--accent);
  border-radius: 2px;
}

/* --- Shop dropdown -------------------------------------------------------- */

.shop { position: relative; }

.shop-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  cursor: pointer;
}

.shop-button:hover { background: var(--accent-dk); }

.shop-caret { transition: transform 0.15s ease; }
.shop-button[aria-expanded="true"] .shop-caret { transform: rotate(180deg); }

.shop-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 232px;
  padding: 14px 0 10px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px rgb(0 0 0 / 0.12);
  z-index: 40;
}

.shop-menu[hidden] { display: none; }

.shop-menu-label {
  margin: 0 18px 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.shop-menu ul { list-style: none; margin: 0; padding: 0; }

.shop-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  font-size: 15px;
  text-decoration: none;
}

.shop-menu a:hover { background: var(--bg); }

.shop-menu hr {
  margin: 8px 18px;
  border: 0;
  border-top: 1px solid var(--line);
}

.dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--dot, var(--accent));
  flex: none;
}

/* --- Mobile nav toggle ---------------------------------------------------- */

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}

.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  display: block;
  width: 20px; height: 2px;
  margin-inline: auto;
  background: var(--ink);
  content: "";
}
.nav-toggle-bar::before { transform: translateY(-6px); }
.nav-toggle-bar::after  { transform: translateY(4px); }

/* --- Hero ----------------------------------------------------------------- */

.hero { background: var(--bg); }

.hero-inner {
  display: grid;
  grid-template-columns: minmax(280px, 30fr) 62fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(32px, 5vw, 56px);
}

/* Grid and flex items default to min-width:auto, which means they refuse to
   shrink below the intrinsic width of an image inside them. Our images carry
   width attributes (and the real files are 2000 px wide), so without this the
   page scrolls sideways on anything narrower than the artwork. */
.hero-inner > * { min-width: 0; }

.eyebrow {
  margin: 0 0 12px;
  color: var(--amber);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.2vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.hero-teaser {
  margin: 18px 0 28px;
  max-width: 26ch;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  color: #37312C;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 24px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}

.button:hover { background: var(--accent-dk); }

/* The mock-up's hero is a wide cinematic band (~2.8:1), not the 16:9 the
   source renders come in. object-fit:cover crops top and bottom to get there,
   so if it ever cuts an avatar's head we either widen this back towards 16/9
   or give a creation its own hero image. One number, deliberately isolated. */
.hero-media img {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  object-fit: cover;
  border-radius: 14px;
  background: #E9E2D6;
}

/* --- Filter strip --------------------------------------------------------- */

/* The hairline runs the full width and the chip block sits on top of it,
   masking the middle - that is why the inner element carries a background. */
.filters {
  position: relative;
  background: linear-gradient(to bottom, var(--bg) 50%, var(--band) 50%);
}

.filters::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line);
}

.filters-inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  padding-block: 22px;
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  background: linear-gradient(to bottom, var(--bg) 50%, var(--band) 50%);
}

.chip {
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  background: #EFEADF;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.chip:hover { background: #E5DECF; }

.chip.is-active {
  background: var(--accent);
  color: #fff;
}

/* --- Creations grid ------------------------------------------------------- */

.creations {
  background: var(--band);
  padding-block: clamp(24px, 4vw, 40px) clamp(32px, 5vw, 56px);
}

.section-heading {
  margin: 0 0 22px;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-cell { min-width: 0; }
.card-cell[hidden] { display: none; }

.card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgb(0 0 0 / 0.09);
}

.card-media { min-width: 0; }

.card-media img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #E9E2D6;
}

.card-body { padding: 14px 18px 20px; }

.card-category {
  display: block;
  color: var(--cat, var(--muted));
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.card-title {
  display: block;
  margin-top: 5px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.15;
  text-transform: uppercase;
}

.card-teaser {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.45;
}

.empty {
  margin: 40px 0;
  text-align: center;
  color: var(--muted);
}
.empty[hidden] { display: none; }

/* --- Creation page -------------------------------------------------------- */

.creation-head {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding-block: 26px 34px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.back-link:hover { color: var(--accent); }

.creation-category { margin: 0 0 8px; }

.creation-category a {
  color: var(--cat, var(--muted));
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.creation-category a:hover { text-decoration: underline; }

.creation-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1;
  text-transform: uppercase;
}

.creation-subtitle {
  margin: 10px 0 0;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  color: #4A423B;
}

.creation-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.meta-sep { opacity: 0.5; }

.creation-body {
  background: var(--band);
  padding-block: clamp(28px, 4vw, 44px) clamp(32px, 5vw, 56px);
}

.creation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

.creation-grid > * { min-width: 0; }

.article-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  background: #E9E2D6;
  margin-bottom: 26px;
}

.article .lead {
  margin: 0 0 24px;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  color: #2C2621;
}

.article p { margin: 0 0 22px; line-height: 1.65; }

.article figure { margin: 0 0 26px; }

.article figure img {
  width: 100%;
  border-radius: 12px;
  background: #E9E2D6;
}

.article h2 {
  margin: 34px 0 12px;
  font-family: var(--font-display);
  font-size: 1.3rem;
  text-transform: uppercase;
}

.article-narrow { max-width: 68ch; }

/* An image that opens larger. The cursor and the hover lift are the only hint
   the visitor gets, so don't remove them without adding another one. */
.article a:has(> img) { display: block; cursor: zoom-in; }
.article a > img { transition: opacity 0.15s ease; }
.article a:hover > img { opacity: 0.92; }

/* --- Lightbox ------------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  background: rgb(14 11 9 / 0.92);
  border: 0;
}

.lightbox[hidden] { display: none; }

.lightbox img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 8px;
  object-fit: contain;
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.14);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.lightbox-close:hover,
.lightbox-nav:hover { background: rgb(255 255 255 / 0.26); }

.lightbox-close { top: 18px; right: 18px; }
.lightbox-prev  { left: 18px;  top: 50%; transform: translateY(-50%); }
.lightbox-next  { right: 18px; top: 50%; transform: translateY(-50%); }

.lightbox-count {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  color: rgb(255 255 255 / 0.72);
  font-size: 13px;
  letter-spacing: 0.08em;
}

@media (max-width: 620px) {
  .lightbox-prev { left: 10px; }
  .lightbox-next { right: 10px; }
  .lightbox-close { top: 10px; right: 10px; }
}

.article ul, .article ol { margin: 0 0 22px; padding-left: 1.25em; line-height: 1.65; }
.article a { color: var(--accent); }

/* Sidebar */

.aside { position: sticky; top: 24px; }

.buy-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}

.button-block {
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.buy-soon {
  margin: 0;
  padding: 15px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
  color: var(--muted);
  font-weight: 700;
}

.buy-inworld { margin-top: 14px; }

.facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 0.92rem;
}

.facts dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  align-self: center;
}

.facts dd { margin: 0; font-weight: 600; }

.guides {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.guides-label {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.guides-list { margin: 0; font-size: 0.92rem; line-height: 1.6; }

.more-creations { border-top: 1px solid var(--line); }

/* --- Bottom panels -------------------------------------------------------- */

.panels {
  background: var(--band);
  padding-bottom: clamp(40px, 6vw, 72px);
}

.panels-inner {
  display: grid;
  grid-template-columns: 1fr 1.12fr;
  gap: 24px;
  align-items: stretch;
}

.panels-inner > * { min-width: 0; }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px 26px;
}

.panel-heading {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.update-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.update-date {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 5px;
  color: var(--amber);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.update-text { margin: 0; font-size: 0.94rem; }

.panel-store {
  display: flex;
  align-items: center;
  gap: 26px;
}

.panel-store-art { flex: none; }
.panel-store-art img { width: 200px; height: auto; }

.panel-lead { margin: 0 0 6px; font-weight: 700; }
.panel-body { margin: 0 0 14px; color: var(--muted); font-size: 0.96rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}
.link-arrow:hover { text-decoration: underline; }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: 40px;
}

.footer-inner { text-align: center; }

.footer-tagline { margin: 0 0 14px; font-weight: 700; }

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 14px;
}

.footer-nav a {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.footer-nav a:hover { color: var(--accent); }

.footer-legal { margin: 0; color: var(--muted); font-size: 0.86rem; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .panels-inner { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .header-inner { min-height: 78px; gap: 16px; }
  .logo img { height: 50px; }
  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    z-index: 30;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 20px 24px 26px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }

  .site-nav.is-open { display: flex; }

  .site-header { position: relative; }

  .nav-list { flex-direction: column; gap: 4px; }
  .nav-list a { padding: 10px 0; font-size: 16px; }
  .nav-list a.is-active::after { display: none; }

  .shop-button { width: 100%; justify-content: space-between; }
  .shop-menu { right: auto; left: 0; width: 100%; }

  .hero-inner { grid-template-columns: 1fr; }
  .hero-teaser { max-width: none; }

  .creation-grid { grid-template-columns: 1fr; }
  .aside { position: static; }

  .panel-store { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 620px) {
  .card-grid { grid-template-columns: 1fr; }
  .update-list { grid-template-columns: 1fr; }
  .filters-inner { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}