/* ============================================================
   AI ARCHITECT STUDIO — Project Catalog engine (Labs)
   Shared, themeable styles for full-screen scroll catalogs.
   Link AFTER styles.css. Theme via the :root vars below
   (default = Aura / gold / geometric caps). Maison Royale
   overrides them for terracotta / serif / mixed-case.
   ============================================================ */

:root {
  --cat-bg:        var(--aas-black);
  --cat-panel:     #0c0c0c;
  --cat-ink:       var(--aas-white);
  --cat-ink-2:     var(--aas-fg-2);
  --cat-ink-3:     var(--aas-fg-3);
  --cat-accent:    var(--aas-gold);
  --cat-rule:      var(--aas-line);

  --cat-display:   var(--font-display);
  --cat-title-tt:  uppercase;      /* Aura = caps; Maison = none */
  --cat-title-w:   800;
  --cat-title-ls:  0.005em;
  --cat-title-lh:  0.98;
  --cat-eyebrow-ls: 0.28em;
  --cat-pad:       clamp(28px, 4.4vw, 76px);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }

body.cat {
  background: var(--cat-bg);
  color: var(--cat-ink-2);
  font-family: var(--font-body);
  height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: none;
}
body.cat::-webkit-scrollbar { width: 0; height: 0; }

.slide {
  position: relative;
  min-height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  padding: var(--cat-pad);
  overflow: hidden;
  isolation: isolate;
}
.slide-in {
  position: relative; z-index: 2;
  width: 100%; max-width: 1320px; margin: 0 auto;
  flex: 1; display: flex; flex-direction: column;
}

/* thin inner frame line */
.frame::after {
  content: ""; position: absolute; inset: 16px; z-index: 3;
  border: 1px solid rgba(255,255,255,0.10); pointer-events: none;
}

/* ---- header / footer lockups ---- */
.chdr { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.lock { display: inline-flex; align-items: center; gap: 12px; }
.lock img { width: 40px; height: 40px; display: block; object-fit: contain; }
.lock .wm { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.lock .wm b { font-family: var(--font-display); font-weight: 600; font-size: 13px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--cat-accent); }
.lock .wm span { font-family: var(--font-display); font-weight: 500; font-size: 8px;
  letter-spacing: 0.32em; text-transform: uppercase; color: var(--cat-ink-3); }
.caseno { font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: 0.34em; text-transform: uppercase; color: var(--cat-accent); white-space: nowrap; }

.cfoot { display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-top: 14px; border-top: 1px solid var(--cat-rule); }
.cfoot span { font-family: var(--font-display); font-weight: 600; font-size: 9.5px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cat-ink-3); }
.cfoot .pow { display: inline-flex; align-items: center; gap: 7px; color: var(--cat-ink-2); }
.cfoot .pow i { width: 5px; height: 5px; border-radius: 999px; background: var(--cat-accent); font-style: normal; }

/* ---- type ---- */
.eyebrow { display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(10px, 0.85vw, 12px);
  letter-spacing: var(--cat-eyebrow-ls); text-transform: uppercase; color: var(--cat-accent); }
.eyebrow .r { width: 34px; height: 1px; background: var(--cat-accent); }
.sec-idx { font-family: var(--cat-display); font-weight: var(--cat-title-w); color: var(--cat-accent);
  font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.1em; }
.title {
  margin: 0; font-family: var(--cat-display); font-weight: var(--cat-title-w);
  text-transform: var(--cat-title-tt); letter-spacing: var(--cat-title-ls);
  line-height: var(--cat-title-lh); color: var(--cat-ink); text-wrap: balance;
}
.t-hero { font-size: clamp(52px, 8.5vw, 128px); }
.t-1    { font-size: clamp(30px, 4.4vw, 62px); }
.t-2    { font-size: clamp(24px, 3vw, 40px); }
.gold   { color: var(--cat-accent); }
.lead { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.62; color: var(--cat-ink-2); max-width: 60ch; }
.body { font-size: clamp(13px, 1.05vw, 16px); line-height: 1.62; color: var(--cat-ink-2); max-width: 62ch; }
.label { font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cat-ink-3); }
.cap { font-family: var(--font-display); font-weight: 600; font-size: 10px;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--cat-ink); }

/* ---- imagery ---- */
.fill { position: absolute; inset: 0; z-index: 0; }
.fill img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scrim { position: absolute; inset: 0; z-index: 1; }
.scrim.b { background: linear-gradient(180deg, rgba(5,5,5,0) 40%, rgba(5,5,5,0.86) 100%); }
.scrim.l { background: linear-gradient(90deg, rgba(5,5,5,0.92) 0%, rgba(5,5,5,0.55) 42%, rgba(5,5,5,0.1) 100%); }
.scrim.tb { background: linear-gradient(180deg, rgba(5,5,5,0.6) 0%, rgba(5,5,5,0) 30%, rgba(5,5,5,0) 62%, rgba(5,5,5,0.72) 100%); }
.scrim.dim { background: rgba(5,5,5,0.5); }

.figure { position: relative; overflow: hidden; background: var(--cat-panel);
  border: 1px solid var(--cat-rule); }
.figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.figure .fcap { position: absolute; left: 14px; bottom: 12px; z-index: 2;
  background: rgba(5,5,5,0.6); border: 1px solid rgba(230,178,97,0.28);
  backdrop-filter: blur(6px); padding: 5px 11px; }
.figure .fnum { position: absolute; left: 16px; top: 14px; z-index: 2; }

/* ---- layout helpers ---- */
.center { justify-content: center; }
.mt-auto { margin-top: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 1.6vw, 26px); }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 22px); }
.stack { display: flex; flex-direction: column; }
.hairline { height: 1px; background: var(--cat-rule); border: 0; width: 100%; }
.gline { height: 2px; width: 64px; background: var(--cat-accent); border: 0; }

/* stat block */
.stat .n { font-family: var(--cat-display); font-weight: var(--cat-title-w);
  font-size: clamp(34px, 4.4vw, 62px); line-height: 1; color: var(--cat-ink); }
.stat .n em { font-style: normal; color: var(--cat-accent); font-size: 0.42em; }
.stat .k { margin-top: 8px; }

/* materials + palette */
.swatch { display: flex; align-items: center; gap: 14px; }
.swatch i { width: 30px; height: 30px; border-radius: 2px; border: 1px solid rgba(255,255,255,0.12); display: block; }

/* ---- fixed chrome ---- */
.cat-nav { position: fixed; right: 22px; bottom: 20px; z-index: 40;
  display: flex; align-items: center; gap: 10px; }
.cat-nav button { width: 40px; height: 40px; border-radius: 999px; cursor: pointer;
  background: rgba(5,5,5,0.55); border: 1px solid var(--cat-accent); color: var(--cat-accent);
  font-size: 15px; display: inline-flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px); transition: background .2s, color .2s; }
.cat-nav button:hover { background: var(--cat-accent); color: var(--aas-black); }
.cat-count { position: fixed; left: 22px; bottom: 24px; z-index: 40;
  font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: 0.2em;
  color: var(--cat-ink); }
.cat-count b { color: var(--cat-accent); font-weight: 700; }
.cat-count s { text-decoration: none; color: var(--cat-ink-3); }
.cat-prog { position: fixed; top: 0; left: 0; height: 3px; z-index: 41;
  background: var(--cat-accent); width: 0; transition: width .25s var(--ease-out); }

a { color: var(--cat-accent); }