/* Alphabelle prototype shared layer. Every concept page links this file. */
:root{
  --ab-ink:#0E0D0C;
  --ab-ivory:#F6F1E9;
  --ab-paper:#FBF8F3;
  --ab-gold:#C9A46A;
  --ab-gold-light:#E8D3A6;
  --ab-gold-deep:#9C7A43;
  --ab-rose:#D9A99A;
  --ab-stone:#8C8279;
  --ab-line:rgba(14,13,12,.12);
  --ab-serif:"Cormorant Garamond","Times New Roman",serif;
  --ab-sans:"Inter",system-ui,-apple-system,sans-serif;
  --ab-script:"Pinyon Script",cursive;
  --ab-ease:cubic-bezier(.22,1,.36,1);
  --ab-pad:clamp(16px,4vw,48px);
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:var(--ab-sans);color:var(--ab-ink);background:var(--ab-paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,canvas{display:block;max-width:100%}
a{color:inherit}

/* Navigation. Pages can set --ab-nav-color on body for dark heroes. */
.ab-nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px var(--ab-pad);color:var(--ab-nav-color,var(--ab-ink));transition:color .4s var(--ab-ease),background .4s var(--ab-ease)}
.ab-nav.solid{background:rgba(251,248,243,.86);backdrop-filter:blur(14px);color:var(--ab-ink)}
.ab-logo{font-family:var(--ab-serif);font-weight:400;font-size:28px;letter-spacing:.01em;text-decoration:none}
.ab-links,.ab-right{display:flex;gap:28px;font:500 12px/1 var(--ab-sans);letter-spacing:.14em;text-transform:uppercase}
.ab-links a,.ab-right a{text-decoration:none;opacity:.88}
.ab-links a:hover,.ab-right a:hover{opacity:1}
@media (max-width:820px){.ab-links{display:none}.ab-right .ab-track{display:none}}

/* Buttons */
.ab-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 28px;border-radius:999px;background:var(--ab-ink);color:var(--ab-ivory);font:500 12px/1 var(--ab-sans);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:transform .3s var(--ab-ease),background .3s var(--ab-ease)}
.ab-btn:hover{transform:translateY(-2px)}
.ab-btn.gold{background:var(--ab-gold);color:var(--ab-ink)}
.ab-btn.light{background:var(--ab-ivory);color:var(--ab-ink)}
.ab-btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}

/* Film grain overlay: add class ab-grain to body */
.ab-grain::after{content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:ab-grain 7s steps(8) infinite}
@keyframes ab-grain{0%{transform:translate(0,0)}25%{transform:translate(-4%,3%)}50%{transform:translate(3%,-5%)}75%{transform:translate(-2%,4%)}100%{transform:translate(0,0)}}

/* Footer stub */
.ab-foot{padding:64px var(--ab-pad) 120px;border-top:1px solid var(--ab-line);display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;font-size:13px;color:var(--ab-stone)}
.ab-foot strong{font-family:var(--ab-serif);font-weight:400;font-size:24px;color:var(--ab-ink)}

/* Concept switcher injected by ab.js */
.ab-switch{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:90;display:flex;gap:4px;align-items:center;padding:5px;border-radius:999px;background:rgba(14,13,12,.8);backdrop-filter:blur(12px);color:#F6F1E9;font:500 12px/1 var(--ab-sans);box-shadow:0 10px 30px rgba(0,0,0,.25);max-width:calc(100vw - 24px)}
.ab-switch a{text-decoration:none;padding:9px 12px;border-radius:999px;white-space:nowrap;color:inherit}
.ab-switch a.on{background:var(--ab-gold);color:var(--ab-ink)}
@media (max-width:620px){.ab-switch .lbl{display:none}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}