/* ============================================================
   BEATRICE TURIN — Design System
   Elegant Gold / Black · Society & Gala glamour
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root{
  /* --- Surfaces (warm near-black) --- */
  --ink:        oklch(0.145 0.006 60);   /* deepest bg */
  --ink-2:      oklch(0.185 0.008 62);   /* raised surface */
  --ink-3:      oklch(0.235 0.010 64);   /* card / hover */
  --line:       oklch(0.32 0.012 66);    /* hairline */
  --line-soft:  oklch(0.27 0.010 66);

  /* --- Light surfaces (editorial contrast sections) --- */
  --cream:      oklch(0.965 0.010 85);
  --cream-2:    oklch(0.925 0.012 84);
  --cream-ink:  oklch(0.20 0.010 60);

  /* --- Text --- */
  --fg:         oklch(0.955 0.008 85);
  --fg-dim:     oklch(0.78 0.010 80);
  --fg-mute:    oklch(0.62 0.010 78);

  /* --- Gold --- */
  --gold:       #c9a14a;
  --gold-bright:#e9cf86;
  --gold-deep:  #9c7b2e;
  --gold-pale:  oklch(0.86 0.07 88);
  --gold-grad:  linear-gradient(135deg,#9c7b2e 0%,#e9cf86 28%,#fff4cf 48%,#d9b85f 64%,#8f6f28 100%);
  --gold-grad-soft: linear-gradient(120deg,#b8923f,#e9cf86 55%,#b8923f);

  /* --- Type --- */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Manrope', -apple-system, system-ui, sans-serif;

  /* --- Rhythm --- */
  --container: 1280px;
  --gutter: clamp(20px, 5vw, 80px);
  --radius: 4px;

  --ease: cubic-bezier(0.22,0.61,0.36,1);
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--sans);font-weight:400;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--gold);color:#1a1408;}

/* custom scrollbar */
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-track{background:var(--ink);}
::-webkit-scrollbar-thumb{background:var(--ink-3);border-radius:8px;border:3px solid var(--ink);}
::-webkit-scrollbar-thumb:hover{background:var(--gold-deep);}

/* ---------- Typography ---------- */
.display{
  font-family:var(--serif);font-weight:500;line-height:0.96;
  letter-spacing:-0.01em;
  font-size:clamp(3rem,9vw,8.5rem);
}
.h1{font-family:var(--serif);font-weight:500;line-height:1.02;letter-spacing:-0.01em;font-size:clamp(2.4rem,5.5vw,5rem);}
.h2{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-0.005em;font-size:clamp(2rem,4vw,3.6rem);}
.h3{font-family:var(--serif);font-weight:500;line-height:1.1;font-size:clamp(1.5rem,2.4vw,2.2rem);}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:400;}

.kicker{
  font-family:var(--sans);font-weight:600;
  font-size:0.74rem;letter-spacing:0.32em;text-transform:uppercase;
  color:var(--gold-bright);
  display:inline-flex;align-items:center;gap:0.9em;
}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold-grad-soft);display:inline-block;}
.kicker.center::after{content:"";width:34px;height:1px;background:var(--gold-grad-soft);display:inline-block;}
.kicker.center{justify-content:center;}
.kicker.center::before{content:"";}

.lead{font-size:clamp(1.05rem,1.4vw,1.3rem);color:var(--fg-dim);line-height:1.7;font-weight:300;}
.muted{color:var(--fg-mute);}

.gold-text{
  background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-bright);
}

/* ---------- Layout ---------- */
.container{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}
.section{padding-block:clamp(72px,11vw,170px);position:relative;}
.section.tight{padding-block:clamp(48px,7vw,96px);}
.light{background:var(--cream);color:var(--cream-ink);}
.light .lead{color:oklch(0.4 0.01 60);}
.light .muted{color:oklch(0.5 0.01 60);}
.light .kicker{color:var(--gold-deep);}

/* ---------- Buttons ---------- */
.btn{
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:0.7em;
  font-family:var(--sans);font-weight:600;font-size:0.82rem;
  letter-spacing:0.14em;text-transform:uppercase;
  padding:1.05em 2.1em;border:1px solid transparent;border-radius:var(--radius);
  position:relative;overflow:hidden;transition:all .5s var(--ease);
  white-space:nowrap;
}
.btn .ico{transition:transform .5s var(--ease);}
.btn:hover .ico{transform:translateX(4px);}
.btn-gold{
  color:#211904;
  background:var(--gold-grad);background-size:200% 200%;background-position:0% 50%;
  box-shadow:0 8px 30px -10px rgba(201,161,74,.6);
}
.btn-gold:hover{background-position:100% 50%;box-shadow:0 14px 40px -10px rgba(233,207,134,.75);transform:translateY(-2px);}
.btn-ghost{color:var(--fg);border-color:var(--line);background:transparent;}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold-bright);background:rgba(201,161,74,.06);transform:translateY(-2px);}
.light .btn-ghost{color:var(--cream-ink);border-color:rgba(0,0,0,.18);}
.light .btn-ghost:hover{border-color:var(--gold-deep);color:var(--gold-deep);transform:translateY(-2px);}

/* magnetic wrapper */
.magnetic{display:inline-block;}

/* link with animated underline */
.ul-link{position:relative;display:inline-block;cursor:pointer;}
.ul-link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:var(--gold-grad-soft);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);}
.ul-link:hover{color:var(--gold-bright);}
.ul-link:hover::after{transform:scaleX(1);transform-origin:left;}

/* ---------- Reveal animations ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);}
[data-reveal].in{opacity:1;transform:none;}
[data-reveal-d="1"]{transition-delay:.08s;}
[data-reveal-d="2"]{transition-delay:.16s;}
[data-reveal-d="3"]{transition-delay:.24s;}
[data-reveal-d="4"]{transition-delay:.32s;}
[data-reveal-d="5"]{transition-delay:.40s;}
[data-reveal-d="6"]{transition-delay:.48s;}

.clip-reveal{overflow:hidden;}
.clip-reveal>*{display:block;transform:translateY(110%);transition:transform 1.1s var(--ease-out);}
.clip-reveal.in>*{transform:none;}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;}
  [data-reveal]{opacity:1;transform:none;}
  .clip-reveal>*{transform:none;}
}

/* ---------- Hairlines / dividers ---------- */
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);border:0;}
.gold-rule{height:1px;background:var(--gold-grad-soft);opacity:.6;border:0;}

/* ---------- Image frames ---------- */
.imgwrap{position:relative;overflow:hidden;background:var(--ink-2);}
.imgwrap img{width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease-out);}
.imgwrap:hover img{transform:scale(1.05);}
.imgwrap.gild::after{content:"";position:absolute;inset:0;border:1px solid rgba(233,207,134,.18);pointer-events:none;}

/* placeholder image (striped) */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg,var(--ink-2) 0 14px,var(--ink-3) 14px 28px);
  display:flex;align-items:flex-end;justify-content:flex-start;color:var(--fg-mute);
}
.ph .ph-tag{font-family:'SF Mono',ui-monospace,monospace;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;padding:.6em .8em;background:rgba(0,0,0,.45);margin:10px;border:1px solid var(--line-soft);}

/* badge / pill */
.pill{display:inline-flex;align-items:center;gap:.55em;font-size:.74rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:.5em 1em;border:1px solid var(--line);
  border-radius:100px;color:var(--fg-dim);background:rgba(255,255,255,.02);}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);}

/* card */
.card{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:var(--radius);
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);}
.card:hover{border-color:rgba(201,161,74,.4);transform:translateY(-4px);}

/* number ticker style */
.stat-num{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,5vw,4.4rem);line-height:1;}

/* ---------- Grain / vignette overlays ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* marquee */
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.marquee-track{display:flex;gap:3.5rem;align-items:center;white-space:nowrap;animation:marquee 38s linear infinite;padding-right:3.5rem;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{to{transform:translateX(-50%);}}

.spin-slow{animation:spin 26s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* utility */
.grid{display:grid;}
.flex{display:flex;}
.center{text-align:center;}
.eyebrow-num{font-family:var(--sans);font-size:.72rem;letter-spacing:.18em;color:var(--gold);font-weight:600;}