/* ===== Direction 01 · The First Flame ===== */
:root {
  --bg: #080A0D; --bg-2: #0F1216; --surface: #15191D; --line: rgba(231,221,200,.12);
  --text: #E7DDC8; --text-dim: #85817A; --accent: #C44A20; --accent-2: #F28A2E; --highlight: #C9A45D; --on-accent: #FFF6E8;
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, serif; --font-body: "Cormorant Garamond", Garamond, serif; --font-ui: "Manrope", system-ui, sans-serif;
  --display-weight: 400; --display-tracking: .12em; --display-case: uppercase; --display-leading: 1.02; --eyebrow-tracking: .32em;
}
body { font-size: clamp(18px, .9vw + 11px, 22px); }
.grain { position: fixed; inset: -50%; z-index: 999; pointer-events: none; opacity: .07; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); 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%,3%)} 100%{transform:translate(0,0)} }
@media (prefers-reduced-motion: reduce) { .grain { animation: none; } }
.h2 { font-weight: 300; letter-spacing: .14em; }
.page-title { font-weight: 300; letter-spacing: .16em; }
.brand__main { letter-spacing: .34em; font-weight: 500; }
.eyebrow { color: var(--highlight); }
.section__head { position: relative; padding-top: 28px; }
.section__head::before { content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--accent-2), var(--highlight), transparent); box-shadow: 0 0 12px var(--accent-2); transition: width 1.6s var(--ease) .2s; }
.is-in .section__head::before, .section.is-in .section__head::before { width: min(280px, 60%); }
.btn { background: linear-gradient(135deg, #C44A20, #E0662A); border-color: transparent; box-shadow: 0 0 0 rgba(242,138,46,0); }
.btn:hover { background: linear-gradient(135deg, #D9582A, #F28A2E); box-shadow: 0 0 28px rgba(242,138,46,.45); }
.btn--ghost { background: transparent; border-color: rgba(201,164,93,.45); color: var(--text); box-shadow: none; }
.btn--ghost:hover { background: rgba(201,164,93,.08); color: var(--text); border-color: var(--highlight); box-shadow: 0 0 22px rgba(201,164,93,.18); }
.card { background: linear-gradient(180deg, #13171B, #0D1013); border-color: rgba(201,164,93,.14); }
a.card:hover { border-color: rgba(242,138,46,.6); box-shadow: 0 0 40px rgba(196,74,32,.14); }
.card__title { font-size: 1.55rem; letter-spacing: .02em; }
.page-head__img { filter: brightness(.55) saturate(.85) sepia(.15); }
.page-head__veil { background: radial-gradient(120% 90% at 50% 100%, rgba(242,138,46,.18), transparent 55%), linear-gradient(180deg, rgba(8,10,13,.7), rgba(8,10,13,.2) 40%, #080A0D); }
.quote p { font-style: italic; text-transform: none; letter-spacing: 0; font-weight: 400; }
.quote--turn { text-align: center; padding-block: clamp(80px, 14vw, 200px); }
.quote--turn p { margin-inline: auto; font-size: clamp(2rem, 4.6vw, 4rem); color: var(--text); text-shadow: 0 0 40px rgba(242,138,46,.25); }
.quote--turn figcaption { text-align: center; }
.portrait { background: #0B0D10; }
.portrait__img { filter: brightness(.82) contrast(1.05); transition: filter .8s; }
[data-candle]:hover .portrait__img { filter: brightness(1) contrast(1.05); }
.portrait__light { mix-blend-mode: screen; background: radial-gradient(circle at var(--mx,50%) var(--my,40%), rgba(242,138,46,.38) 0%, rgba(201,164,93,.12) 22%, transparent 48%); }
.portrait--empty { background: radial-gradient(90% 70% at 50% 35%, rgba(196,74,32,.22), #0B0D10 70%); }
.portrait__mono { color: var(--highlight); letter-spacing: .2em; font-weight: 300; }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: #FFF6E8; }
.flag { color: var(--accent-2); }

/* hero */
.hero--flame { display: block; overflow: clip; height: 220vh; min-height: 0; text-align: center; }
.hero__sticky { position: sticky; top: 0; width: 100%; max-width: 100vw; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.hero__keyart { position: absolute; inset: var(--header-h) 0 0; opacity: calc(max(0, var(--p, 0) - .55) * 2.2); transition: opacity .2s linear; }
.hero__keyart img { width: 100%; height: 100%; object-fit: contain; transform: scale(calc(.94 + var(--p, 0) * .06)); filter: brightness(calc(.55 + max(0, var(--p, 0) - .7) * 1.5)) saturate(.95); }
.hero__keyart::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 55%, transparent, #080A0D 90%); opacity: calc(1 - max(0, var(--p, 0) - .6) * 2.5); }
/* the key art carries its own title: the HTML title hands over to it as the art reaches full light */
.hero__content { opacity: calc(1 - max(0, var(--p, 0) - .5) * 3); }
.hero.is-keyart .hero__content { pointer-events: none; }
.hero .scroll-cue { transition: opacity .6s; } .hero.is-keyart .scroll-cue { opacity: 0; pointer-events: none; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__smoke span { position: absolute; left: 50%; top: 50%; width: 70vmax; height: 36vmax; margin: -18vmax 0 0 -35vmax; border-radius: 50%; background: radial-gradient(closest-side, rgba(133,129,122,.16), transparent); filter: blur(30px); animation: smoke 18s ease-in-out infinite; opacity: .8; }
.hero__smoke span:nth-child(2) { animation-duration: 24s; animation-delay: -8s; width: 50vmax; margin-left: -10vmax; }
.hero__smoke span:nth-child(3) { animation-duration: 30s; animation-delay: -16s; margin-left: -60vmax; }
@keyframes smoke { 0% { transform: translate(0, 12vh) scale(.8); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(6vw, -40vh) scale(1.4); opacity: 0; } }
.hero__content { position: relative; z-index: 2; padding: 0 var(--gutter); max-width: 100%; }
.hero--flame .hero__title { font-size: clamp(2.6rem, 10vw, 9.5rem); }
.hero__title { font-weight: 300; letter-spacing: .22em; margin-right: -.22em; color: #F3EADA; text-shadow: 0 0 60px rgba(242,138,46,.25); }
.hero__sub { font-family: var(--font-ui); font-weight: 500; font-size: clamp(.8rem, 1.6vw, 1.15rem); letter-spacing: .8em; margin-right: -.8em; color: var(--highlight); margin-top: 1.4em; }
.js .hero__title .hero__main { display: inline-block; opacity: 0; filter: blur(18px); letter-spacing: .34em; animation: emerge 3.6s var(--ease) 1.2s forwards; }
.js .hero__sub, .js .hero__line, .js .hero__kicker, .js .hero__content .actions { opacity: 0; animation: fadeup 1.8s var(--ease) forwards; }
.js .hero__sub { animation-delay: 3s; } .js .hero__line { animation-delay: 3.8s; } .js .hero__kicker { animation-delay: 4.4s; } .js .hero__content .actions { animation-delay: 4.8s; }
@keyframes emerge { to { opacity: 1; filter: blur(0); letter-spacing: .22em; } }
@keyframes fadeup { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.hero__line { font-style: italic; color: var(--text); text-transform: none; letter-spacing: .01em; }
@media (prefers-reduced-motion: reduce) { .js .hero__title .hero__main, .js .hero__sub, .js .hero__line, .js .hero__kicker, .js .hero__content .actions { animation: none; opacity: 1; filter: none; letter-spacing: .22em; } .hero--flame { height: 100vh; } .hero__keyart { opacity: .3; } .hero__content { opacity: 1; } }
.is-home .site-header { background: transparent; }
.is-home .site-header.is-scrolled { background: rgba(8,10,13,.86); }

/* story + ember line */
.home-story .section__head, .home-story .prose, .home-story .story-coda, .home-story .actions { margin-inline: auto; text-align: center; justify-content: center; }
.home-story .prose p { font-size: 1.15em; }
.story-coda { font-family: var(--font-display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--highlight); max-width: 30ch; margin: 1.6em auto 0; }
.ember-line { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.ember-line::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), var(--highlight), transparent); box-shadow: 0 0 14px var(--accent-2); transform-origin: left; transform: scaleX(0); transition: transform 2.6s var(--ease); }
.ember-line.is-in::before { transform: none; }
.ember-line__item { padding-right: 16px; display: flex; flex-direction: column; gap: 6px; }
.ember-line__spark { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #FFE3B0 0 18%, #F28A2E 30%, rgba(196,74,32,.4) 55%, transparent 70%); margin-bottom: 18px; animation: flicker 2.8s ease-in-out infinite; }
.ember-line__item:nth-child(2) .ember-line__spark { animation-delay: -.7s } .ember-line__item:nth-child(3) .ember-line__spark { animation-delay: -1.4s } .ember-line__item:nth-child(4) .ember-line__spark { animation-delay: -2.1s }
.ember-line__item:last-child .ember-line__spark { transform: scale(1.5); }
@keyframes flicker { 0%,100% { opacity: 1; transform: scale(1); } 45% { opacity: .75; transform: scale(.92); } 60% { opacity: .95; transform: scale(1.06); } }
.ember-line__date { font-family: var(--font-display); font-size: clamp(1.6rem, 2.6vw, 2.4rem); line-height: 1; color: var(--text); }
.ember-line__place { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .28em; text-transform: uppercase; color: var(--highlight); }
.ember-line__text { color: var(--text-dim); font-size: .95rem; }
@media (max-width: 800px) { .ember-line { grid-template-columns: 1fr; gap: 26px; } .ember-line::before { left: 10px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; transform-origin: top; transform: scaleY(0); background: linear-gradient(180deg, var(--accent), var(--highlight)); } .ember-line__item { display: grid; grid-template-columns: 22px 1fr; column-gap: 18px; } .ember-line__spark { grid-row: span 3; margin: 0; } }

/* heritage (ember stage) */
.home-heritage { background: radial-gradient(60% 70% at 25% 50%, rgba(196,74,32,.14), transparent 70%); }
.heritage__media { position: relative; box-shadow: 0 0 120px rgba(196,74,32,.18); }
.heritage__media img { filter: brightness(.9); }
.quote--heritage p { font-size: clamp(1.4rem, 2.4vw, 2rem); color: var(--highlight); }

/* fire: preview */
.home-preview { background: linear-gradient(180deg, transparent, rgba(196,74,32,.08) 50%, transparent); }
.video__frame { border: 1px solid rgba(242,138,46,.2); cursor: zoom-in; padding: 0; display: block; width: 100%; }
.video__frame:hover .video__poster { filter: saturate(1) brightness(.95); }
.video__poster { transition: filter .6s, transform 1.2s var(--ease); }
.video__play { border-color: var(--accent-2); box-shadow: 0 0 30px rgba(242,138,46,.4); }

/* timeline: flame line */
.tl__rail { background: rgba(231,221,200,.08); }
.tl__fill { background: linear-gradient(180deg, var(--highlight), var(--accent-2) 70%, #FFE3B0); box-shadow: 0 0 18px var(--accent-2), 0 0 4px #FFE3B0; }
.tl__item { opacity: .45; transition: opacity .8s; }
.tl__item.is-lit { opacity: 1; }
.tl__item.is-lit .tl__node { box-shadow: 0 0 18px var(--accent-2); }
.tl__date { font-weight: 500; }

/* chapters: smoke-dark vignette */
.chapter__img { filter: brightness(.6) saturate(.85); }
.chapter__title { font-weight: 300; letter-spacing: .14em; }
.map__route { stroke: var(--accent-2); filter: drop-shadow(0 0 6px #F28A2E); }
.map__land { fill: #151A1F; stroke: rgba(201,164,93,.35); }
.c-node.is-center .c-node__dot { box-shadow: 0 0 30px 6px rgba(242,138,46,.6); }
.site-footer { background: radial-gradient(60% 120% at 50% 120%, rgba(196,74,32,.16), transparent 60%), var(--bg); }