/* ══════════════════════════════════════════════════════════
   AI ANGEL OF BOGOTA: stylesheet
   sensual · dramatic · magical · 18+
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:        #07060d;
  --ink-2:      #0d0a1a;
  --ink-3:      #141026;
  --gold:       #e9c37a;
  --gold-hi:    #f7e0ac;
  --amber:      #ffb35c;
  --rose:       #c85b8e;
  --violet:     #7a3bd6;
  --teal:       #53d6c8;
  --text:       #efe9e2;
  --muted:      #a89fae;
  --line:       rgba(233,195,122,.18);
  --serif:      "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --sans:       "Jost", "Helvetica Neue", Arial, sans-serif;
  --edge:       clamp(20px, 5vw, 90px);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--ink);
  color:var(--text);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

/* ── ambient layers ─────────────────────────────────────── */
#motes{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; opacity:.75;
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 40% at 15% 0%,  rgba(122,59,214,.22), transparent 70%),
    radial-gradient(50% 35% at 85% 10%, rgba(200,91,142,.16), transparent 70%),
    radial-gradient(70% 50% at 50% 100%,rgba(83,214,200,.10), transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 45%, var(--ink) 100%);
}

main,section,header,footer{ position:relative; z-index:2; }

/* ── type helpers ───────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-weight:400;
  font-size:.68rem; letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold); opacity:.85; margin:0 0 1.1rem;
}
h1,h2{ font-family:var(--serif); font-weight:300; line-height:1.05; margin:0; }
h2{ font-size:clamp(2rem, 5vw, 3.4rem); letter-spacing:.005em; }

/* ── buttons ────────────────────────────────────────────── */
.btn{
  display:inline-block; font-family:var(--sans); font-weight:400;
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  padding:1.05em 2.1em; border:1px solid var(--line);
  transition:all .45s cubic-bezier(.4,0,.2,1); cursor:pointer;
  background:transparent; color:var(--text);
}
.btn-gold{
  border-color:transparent; color:#1a1206; font-weight:500;
  background:linear-gradient(120deg,var(--gold-hi),var(--gold) 45%,var(--amber));
  box-shadow:0 0 0 1px rgba(233,195,122,.35), 0 14px 40px -18px rgba(255,179,92,.85);
}
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(247,224,172,.6), 0 22px 50px -18px rgba(255,179,92,1); }
.btn-ghost:hover{ border-color:var(--gold); color:var(--gold-hi); background:rgba(233,195,122,.06); }
.btn-lg{ padding:1.25em 2.8em; font-size:.78rem; }

/* ── age gate ───────────────────────────────────────────── */
.gate{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center; padding:24px;
  background:rgba(7,6,13,.86);
  backdrop-filter:blur(26px) saturate(120%);
  -webkit-backdrop-filter:blur(26px) saturate(120%);
  transition:opacity .7s ease, visibility .7s;
}
.gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
.gate-inner{
  max-width:520px; text-align:center; padding:clamp(28px,5vw,52px);
  border:1px solid var(--line);
  background:linear-gradient(180deg, rgba(20,16,38,.92), rgba(13,10,26,.92));
  box-shadow:0 40px 120px -40px rgba(122,59,214,.6);
}
.gate-mark{ font-size:1.6rem; color:var(--gold); margin-bottom:1.2rem; }
.gate-inner h2{ font-size:clamp(1.7rem,4vw,2.4rem); margin-bottom:1rem; }
.gate-sub{ color:var(--muted); font-size:.95rem; margin:0 0 2rem; }
.gate-actions{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }
.gate-note{ margin:1.8rem 0 0; font-size:.72rem; letter-spacing:.12em; color:var(--muted); opacity:.7; }

/* ── nav ────────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.5rem var(--edge);
  transition:background .5s, backdrop-filter .5s, padding .5s;
}
.nav.scrolled{
  background:rgba(7,6,13,.72); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  padding-top:1rem; padding-bottom:1rem; border-bottom:1px solid rgba(233,195,122,.10);
}
.nav-mark{ display:flex; align-items:center; gap:.7rem; }
.mark-glyph{ color:var(--gold); font-size:1rem; }
.mark-text{ font-family:var(--serif); font-size:.95rem; letter-spacing:.22em; }
.mark-text em{ font-style:italic; color:var(--gold); }
.nav-links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,34px); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.nav-links a:hover{ color:var(--gold-hi); }
.tag-18{ border:1px solid var(--line); padding:.25em .6em; font-size:.62rem; color:var(--gold); }

/* ── hero ───────────────────────────────────────────────── */
.hero{
  min-height:100svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:9rem var(--edge) 6rem; position:relative; overflow:hidden;
}
.halo{
  position:absolute; width:min(120vw,1100px); aspect-ratio:1;
  border-radius:50%; pointer-events:none; filter:blur(90px); opacity:.5;
  background:radial-gradient(circle at 50% 50%, rgba(122,59,214,.55), transparent 62%);
  top:50%; left:50%; transform:translate(-50%,-58%);
}
.halo-2{
  width:min(90vw,760px); opacity:.45;
  background:radial-gradient(circle at 50% 50%, rgba(255,179,92,.42), transparent 60%);
  transform:translate(-50%,-46%);
}
.hero > *{ position:relative; z-index:2; }
.brand{ display:flex; flex-direction:column; align-items:center; gap:.2em; margin:.6rem 0 1.6rem; }
.brand-ai{
  font-family:var(--sans); font-weight:200;
  font-size:clamp(.9rem,2.4vw,1.3rem); letter-spacing:.9em;
  color:var(--gold); text-indent:.9em;
}
.brand-name{
  font-family:var(--serif); font-weight:300; font-style:italic;
  font-size:clamp(2.6rem,10vw,7rem); line-height:.98; letter-spacing:-.01em;
  background:linear-gradient(100deg,#fff5e2 0%,var(--gold-hi) 30%,var(--gold) 55%,var(--rose) 88%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 90px rgba(255,179,92,.22);
}
.brand-name em{ font-style:italic; opacity:.85; }
.lede{
  max-width:34ch; margin:0 auto 2.6rem; color:var(--muted);
  font-size:clamp(.95rem,1.6vw,1.12rem); line-height:1.8;
}
.hero-cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }
.scroll-hint{
  position:absolute; bottom:2.2rem; left:50%; transform:translateX(-50%);
  font-size:.6rem; letter-spacing:.4em; text-transform:uppercase; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:.7rem; opacity:.6;
}
.scroll-hint span{ width:1px; height:44px; background:linear-gradient(180deg,var(--gold),transparent); }

/* ── disclosure strip ───────────────────────────────────── */
.disclosure{
  padding:1.8rem var(--edge); text-align:center;
  border-top:1px solid rgba(233,195,122,.10); border-bottom:1px solid rgba(233,195,122,.10);
  background:rgba(122,59,214,.05);
}
.disclosure p{ margin:0 auto; max-width:70ch; font-size:.82rem; letter-spacing:.05em; color:var(--muted); }
.disclosure strong{ color:var(--gold-hi); font-weight:500; }

/* ── archive ────────────────────────────────────────────── */
.archive{ padding:clamp(5rem,10vw,9rem) var(--edge); }
.section-head{ text-align:center; max-width:60ch; margin:0 auto clamp(3rem,6vw,5rem); }
.section-sub{ color:var(--muted); font-size:.92rem; margin-top:1.1rem; }

.grid{
  display:grid; gap:clamp(14px,1.8vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
}
.card{
  position:relative; overflow:hidden; cursor:pointer;
  background:var(--ink-3); aspect-ratio:3/4;
  border:1px solid rgba(233,195,122,.10);
  transition:border-color .5s, transform .6s cubic-bezier(.2,.8,.2,1);
}
.card:nth-child(4n+1){ aspect-ratio:3/4.4; }
.card:hover{ border-color:rgba(233,195,122,.45); transform:translateY(-4px); }
.card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.8,.2,1), filter .6s;
  filter:saturate(.92) contrast(1.04);
}
.card:hover img{ transform:scale(1.06); filter:saturate(1.05) contrast(1.06); }
.card::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 42%, rgba(7,6,13,.55) 74%, rgba(7,6,13,.92) 100%);
  opacity:.9; transition:opacity .5s;
}
.card:hover::after{ opacity:1; }
.card-meta{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:clamp(16px,2vw,26px); text-align:left;
  transform:translateY(6px); transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.card:hover .card-meta{ transform:translateY(0); }
.card-idx{ font-size:.6rem; letter-spacing:.4em; color:var(--gold); opacity:.8; display:block; margin-bottom:.5rem; }
.card-title{ font-family:var(--serif); font-size:clamp(1.25rem,2.2vw,1.7rem); font-style:italic; display:block; line-height:1.1; }
.card-line{
  display:block; color:var(--muted); font-size:.8rem; margin-top:.55rem;
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .55s ease, opacity .45s ease;
}
.card:hover .card-line{ max-height:5em; opacity:1; }

/* ── lore ───────────────────────────────────────────────── */
.lore{ padding:clamp(5rem,10vw,8rem) var(--edge); border-top:1px solid rgba(233,195,122,.08); }
.lore-inner{ max-width:62ch; margin:0 auto; }
.lore p{ color:var(--muted); font-size:1rem; line-height:1.85; }
.lore p + p{ margin-top:1.4rem; }
.lore h2{ margin-bottom:1.6rem; }

/* ── studio ─────────────────────────────────────────────── */
.studio{
  padding:clamp(5rem,11vw,9rem) var(--edge); text-align:center;
  background:
    radial-gradient(60% 60% at 50% 0%, rgba(200,91,142,.16), transparent 70%),
    linear-gradient(180deg, rgba(20,16,38,.6), rgba(7,6,13,.9));
  border-top:1px solid rgba(233,195,122,.10);
}
.studio-inner{ max-width:64ch; margin:0 auto; }
.studio h2{ font-style:italic; margin-bottom:1.6rem; }
.studio p{ color:var(--muted); font-size:1rem; line-height:1.85; margin-bottom:2.4rem; }
.studio strong{ color:var(--gold-hi); font-weight:500; }
.studio-note{ font-size:.68rem; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); opacity:.6; margin:1.6rem 0 0; }

/* ── footer ─────────────────────────────────────────────── */
.foot{
  padding:clamp(3rem,6vw,5rem) var(--edge) 4rem; text-align:center;
  border-top:1px solid rgba(233,195,122,.08);
}
.foot-mark{ color:var(--gold); margin-bottom:1rem; }
.foot-brand{ font-family:var(--serif); letter-spacing:.34em; font-size:.82rem; margin:0 0 1.4rem; }
.foot-note{ max-width:62ch; margin:0 auto 1.6rem; font-size:.72rem; line-height:1.9; color:var(--muted); opacity:.75; }
.foot-fine{ font-size:.68rem; letter-spacing:.2em; color:var(--muted); opacity:.5; margin:0; }

/* ── lightbox ───────────────────────────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:90; display:none;
  align-items:center; justify-content:center; padding:clamp(16px,4vw,60px);
  background:rgba(4,3,9,.94); backdrop-filter:blur(10px);
}
.lightbox.open{ display:flex; }
.lb-figure{ margin:0; max-width:min(92vw,900px); max-height:92svh; text-align:center; }
.lb-figure img{ max-height:76svh; width:auto; margin:0 auto; border:1px solid rgba(233,195,122,.18); }
.lb-figure figcaption{ margin-top:1.2rem; }
.lb-title{ font-family:var(--serif); font-style:italic; font-size:1.5rem; display:block; color:var(--gold-hi); }
.lb-line{ display:block; color:var(--muted); font-size:.85rem; margin-top:.4rem; }
.lb-close,.lb-prev,.lb-next{
  position:absolute; background:none; border:0; color:var(--gold);
  font-size:2rem; cursor:pointer; line-height:1; opacity:.7;
  transition:opacity .3s, transform .3s; font-family:var(--sans); font-weight:200;
}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{ opacity:1; transform:scale(1.08); }
.lb-close{ top:clamp(14px,3vw,34px); right:clamp(18px,3.4vw,40px); font-size:2.4rem; }
.lb-prev{ left:clamp(10px,2.4vw,34px); top:50%; transform:translateY(-50%); font-size:3rem; }
.lb-next{ right:clamp(10px,2.4vw,34px); top:50%; transform:translateY(-50%); font-size:3rem; }

/* ── reveal ─────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1.1s cubic-bezier(.2,.8,.2,1); }
.reveal.in{ opacity:1; transform:none; }

/* ── responsive ─────────────────────────────────────────── */
@media (max-width:720px){
  .nav-links a:not(.tag-18){ display:none; }
  .card, .card:nth-child(4n+1){ aspect-ratio:3/4; }
  .card-line{ max-height:5em; opacity:1; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
  #motes{ display:none; }
  *{ animation:none !important; }
}