:root{
  --ink:#0B0809;
  --gold:#C9A36A;
  --bordo:#5A1220;
}

html,body{ background:#0B0809; }

[x-cloak]{ display:none !important; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#0B0809; }
::-webkit-scrollbar-thumb{ background:#3A1018; border-radius:0; }
::-webkit-scrollbar-thumb:hover{ background:var(--bordo); }

.font-display{ font-feature-settings: "lnum","ss01"; }

.grain-layer{
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 0.9  0 0 0 0 0.8  0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}
  20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-1%)}
  80%{transform:translate(3%,2%)}
  100%{transform:translate(0,0)}
}

.vignette{
  background: radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(0,0,0,0.55) 100%);
}

.reveal{ opacity:0; transform: translateY(28px); will-change: transform, opacity; }
.reveal.is-visible{ opacity:1; transform:none; transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }

.hero-img{ will-change: transform; transform-origin: center center; }

select option{ background:#0B0809; color:#F2EBE0; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  .grain-layer{ animation:none; }
  *{ scroll-behavior:auto !important; }
}

@media (min-width: 1280px){
  body{ font-size: 17px; }
}

/* ───── Article body typography (blog/{slug}.html) ───── */
.prose-article{
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.78;
  color: rgba(242, 235, 224, 0.86);
}
@media (min-width: 768px){
  .prose-article{ font-size: 1.15rem; line-height: 1.8; }
}
.prose-article p{ margin: 0 0 1.35em; }
.prose-article p:first-of-type{
  font-size: 1.22rem;
  line-height: 1.6;
  color: rgba(242, 235, 224, 0.95);
  font-weight: 400;
}
@media (min-width: 768px){
  .prose-article p:first-of-type{ font-size: 1.4rem; line-height: 1.55; }
}
.prose-article p:first-of-type::first-letter{
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  float: left;
  font-size: 4.6em;
  line-height: 0.85;
  margin: 0.1em 0.12em 0 -0.05em;
  color: #C9A36A;
}
.prose-article em, .prose-article i{ color:#E8D4B0; font-style: italic; }
.prose-article strong, .prose-article b{ color:#F2EBE0; font-weight: 500; }
.prose-article blockquote{
  margin: 2em 0;
  padding: 0.25em 0 0.25em 1.6em;
  border-left: 2px solid #C9A36A;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 1.4rem;
  color: #E8D4B0;
}

/* Hero background image override layer */
.hero-bg-img{
  position: absolute; inset: 0; width:100%; height:100%;
  object-fit: cover; object-position: center;
  opacity: 0.55;
  mix-blend-mode: luminosity;
  filter: contrast(1.05) brightness(0.9);
}

/* ───────────────────── ANIMATION LAYER ───────────────────── */

/* Scroll progress (gold thin line at very top) */
.scroll-progress{
  position: fixed; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, #C9A36A 30%, #E8D4B0 50%, #C9A36A 70%, transparent);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 80; pointer-events:none;
  transition: transform 0.1s linear;
  opacity: 0.85;
}

/* Magnetic CTA buttons — subtle hover lift + sheen */
.magnetic{
  position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.magnetic::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 30%, rgba(232,212,176,0.18) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform .8s ease;
  pointer-events:none;
}
.magnetic:hover{ transform: translateY(-2px); box-shadow: 0 12px 30px -10px rgba(201,163,106,0.35); }
.magnetic:hover::before{ transform: translateX(120%); }

/* Animated underline for inline gold links */
.link-line{ position:relative; }
.link-line::after{
  content:''; position:absolute; left:0; right:0; bottom:-3px;
  height:1px; background: currentColor; opacity:.45;
  transform: scaleX(0); transform-origin: right center;
  transition: transform .55s cubic-bezier(.7,0,.3,1);
}
.link-line:hover::after{ transform: scaleX(1); transform-origin: left center; }

/* Section title — drawn underline ornament */
.title-ornament{ position: relative; display:inline-block; }
.title-ornament::after{
  content:''; position:absolute; left:0; bottom:-14px;
  width: 0; height:1px; background: linear-gradient(90deg, #C9A36A, transparent);
  transition: width 1.2s cubic-bezier(.2,.7,.2,1) .15s;
}
.title-ornament.is-visible::after{ width: 90px; }

/* Card hover — subtle gold border glow */
.card-glow{ transition: border-color .5s ease, transform .5s ease, box-shadow .5s ease; }
.card-glow:hover{
  border-color: rgba(201,163,106,0.55);
  box-shadow: 0 20px 50px -25px rgba(201,163,106,0.4), inset 0 0 0 1px rgba(201,163,106,0.08);
  transform: translateY(-3px);
}

/* Stagger reveal (children of [data-stagger]) */
[data-stagger] > * { opacity: 0; transform: translateY(34px); }
[data-stagger].is-staggered > *{
  animation: stagger-in .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes stagger-in{
  to{ opacity:1; transform:none; }
}

/* Split-anim: H2 letters fade-in (applied to .split-anim words) */
.split-word{ display:inline-block; opacity:0; filter: blur(8px); transform: translateY(0.4em); }
.split-word.is-visible{
  animation: word-in .9s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes word-in{
  to{ opacity:1; filter:blur(0); transform:none; }
}

/* Marquee strip — endless scrolling keywords */
.marquee{
  display:flex; gap: 3rem;
  animation: marquee 38s linear infinite;
  white-space: nowrap; will-change: transform;
}
.marquee:hover{ animation-play-state: paused; }
@keyframes marquee{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* Floating ornament */
.float-orn{ animation: float-orn 8s ease-in-out infinite; }
@keyframes float-orn{
  0%,100%{ transform: translateY(0) rotate(0); }
  50%{    transform: translateY(-12px) rotate(8deg); }
}

/* Soft pulse for accent dots */
.dot-pulse{ animation: dot-pulse 2.6s ease-in-out infinite; }
@keyframes dot-pulse{
  0%,100%{ opacity:.4; transform: scale(1); }
  50%{    opacity:1;  transform: scale(1.35); }
}

/* Counter — slight tabular */
.count-up{ font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .marquee, .float-orn, .dot-pulse{ animation: none !important; }
  [data-stagger] > *, .split-word{ opacity:1 !important; filter:none !important; transform:none !important; }
  .magnetic::before{ display:none; }
}