/* ═══════════════════════════════════════════════════════
   FORGE — The Story (page-specific styles)
   ═══════════════════════════════════════════════════════ */

/* ── Opening ────────────────────────────────────────── */
.opening {
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--space-24) + 56px) var(--side-pad) var(--space-24);
  text-align: center;
}

.opening__inner {
  max-width: 680px;
  margin: 0 auto;
}

.opening__line {
  margin: 0 auto;
  max-width: 16ch;
  color: var(--bone);
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 4.75rem);
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.opening__sub {
  margin: var(--space-8) auto 0;
  max-width: 38ch;
  color: var(--n7);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0.18em;
  line-height: var(--leading-relaxed);
}

.promise {
  max-width: 24ch;
  margin: 0 auto;
  color: var(--bone);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 4rem);
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-align: center;
}

.architecture-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10);
  margin-top: var(--space-12);
}

.arch-item__mark {
  min-height: 48px;
  display: flex;
  align-items: flex-end;
  margin-bottom: var(--space-5);
}

.arch-item__title {
  margin: 0 0 var(--space-3);
  color: var(--bone);
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--weight-regular);
  line-height: var(--leading-tight);
}

.arch-item__body {
  max-width: 36ch;
  color: var(--n7);
  font-family: var(--font-serif);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-relaxed);
}

.home-begin {
  text-align: center;
}

.home-begin .section__inner {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.home-begin__title {
  width: 100%;
  margin: 0 auto;
  color: var(--bone);
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4.2vw, 3.35rem);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  text-align: center;
}

.home-begin__body {
  width: 100%;
  margin: var(--space-4) auto var(--space-8);
  color: var(--n6);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  text-align: center;
}

@media (max-width: 900px) {
  .architecture-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .arch-item__body {
    max-width: 48ch;
  }
}

@media (max-width: 640px) {
  .opening {
    min-height: 92svh;
    padding-top: calc(var(--space-20) + 56px);
  }

  .opening__line {
    font-size: clamp(2.2rem, 11vw, 3.4rem);
  }

  .opening__sub {
    letter-spacing: 0.12em;
  }

  .home-begin .btn-primary {
    width: min(100%, 360px);
  }
}

.story-opening {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100px 32px;
  position: relative;
}

.story-opening__inner {
  text-align: center;
  max-width: 680px;
}

.story-opening__headline {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.25;
  color: var(--forge-bone);
  letter-spacing: -0.015em;
}

.story-opening__sub {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  color: var(--n6);
  margin-top: 16px;
}

.story-opening__ember {
  position: absolute;
  bottom: 28%;
  left: 50%;
  transform: translateX(-50%);
}

/* ── Story Gradient Display ─────────────────────────── */
.story-gradient {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 24px 0 8px;
  padding-left: 20px;
  border-left: 1px solid var(--n4);
}

.story-gradient__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.story-gradient__label {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--forge-bone);
}

.story-gradient__desc {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--n6);
}

/* ── Brand Promise ──────────────────────────────────── */
.story-promise {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 3.5vw, 2.2rem);
  color: var(--forge-bone);
  line-height: 1.35;
  max-width: 42ch;
  margin: 0 auto;
  text-align: center;
  border: none;
  padding: 0;
}

/* ── Arc SVG Animation ──────────────────────────────── */
.arc-svg .arc-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

.arc-svg.visible .arc-path:nth-child(1) {
  animation: arc-draw 2000ms ease-in-out forwards;
}

.arc-svg.visible .arc-path:nth-child(2) {
  animation: arc-draw 2000ms ease-in-out 500ms forwards;
}

.arc-svg.visible .arc-path:nth-child(3) {
  animation: arc-draw 2000ms ease-in-out 1000ms forwards;
}

.arc-svg.visible .arc-path:nth-child(4) {
  animation: arc-draw 2000ms ease-in-out 1500ms forwards;
}

.arc-svg .arc-ember-dot {
  opacity: 0;
}

.arc-svg.visible .arc-ember-dot {
  animation: ember-appear 500ms ease-out 3500ms forwards, ember-breathe 5s ease-in-out 4000ms infinite;
}

@keyframes arc-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes ember-appear {
  from { opacity: 0; }
  to { opacity: 0.7; }
}

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .story-opening { padding: 80px 16px; }
  .story-opening__ember { bottom: 22%; }
  .arc-svg { height: 80px; }
}