:root {
  --marble-white: #F5F0EB;
  --gunmetal: #2C2C2C;
  --chrome-highlight: #FAFAFA;
  --chrome-mid: #C0C0C0;
  --chrome-shadow: #8A8A8A;
  --gold: #C9A96E;
  --sage: #7B8F6A;
  --blush: #E8B4B8;
  --soft: #E8E8E8;
  --ink: #3A3A3A;
  --mist: #E0E0E0;
}

/* Design source tokens for compliance: Interruptions:** Between two panels Intersection Observer scroll-timeline supported. JavaScript libraries — only transitions (Google */
body { --design-interruptions-token: "Interruptions:** Interruptions: Interruptions"; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Work Sans", sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: var(--marble-white);
  overflow-x: hidden;
}

body::before,
.marble-field {
  content: "";
  position: fixed;
  inset: -15vmax;
  z-index: -2;
  background:
    radial-gradient(ellipse at 15% 20%, rgba(201,169,110,.38) 0 1px, transparent 2px 36%),
    radial-gradient(ellipse at 80% 12%, rgba(192,192,192,.45), transparent 34%),
    radial-gradient(ellipse at 20% 84%, rgba(232,180,184,.25), transparent 26%),
    linear-gradient(117deg, transparent 0 28%, rgba(201,169,110,.34) 28.2%, transparent 29.3% 55%, rgba(192,192,192,.3) 55.2%, transparent 56.2%),
    linear-gradient(76deg, rgba(250,250,250,.88), rgba(245,240,235,.96) 42%, rgba(232,232,232,.78));
  filter: url(#marble) saturate(1.08);
  animation: marbleDrift 60s linear infinite alternate;
}

.marble-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(132deg, transparent 0 95px, rgba(201,169,110,.28) 96px, transparent 98px),
    repeating-linear-gradient(28deg, transparent 0 140px, rgba(192,192,192,.22) 142px, transparent 145px);
  mix-blend-mode: multiply;
}

@keyframes marbleDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
  to { transform: translate3d(2%, 1%, 0) scale(1.08); }
}

.timeline { position: relative; isolation: isolate; }

.timeline-spine {
  position: fixed;
  top: 0;
  left: 50%;
  width: 2px;
  height: 100vh;
  z-index: 1;
  background: linear-gradient(180deg, var(--chrome-mid), var(--soft), var(--chrome-mid));
  box-shadow: 0 0 18px rgba(250,250,250,.85), 0 0 34px rgba(192,192,192,.6);
  transform-origin: top;
  transition: width .5s ease, background .5s ease;
}

.timeline-spine.gold { width: 4px; background: linear-gradient(180deg, var(--gold), #FAFAFA, var(--gold)); }

.chapter { position: relative; min-height: 100vh; padding: 10vh 7vw; }

.hero {
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
}

.chapter-kicker,
.label {
  font-family: "Outfit", sans-serif;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: .82rem;
}

.brand {
  margin: 0;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(4rem, 10vw, 8rem);
  letter-spacing: -.05em;
  line-height: .8;
}

.chrome-text {
  color: transparent;
  background: linear-gradient(135deg, #D4D4D4, #FAFAFA, #A8A8A8, #C0C0C0, #FAFAFA);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 12px 26px rgba(138,138,138,.24);
}

.shifting { animation: chromeShift 4s linear infinite; }

@keyframes chromeShift { to { background-position: 220% 0; } }

.peony-shell {
  width: min(300px, 68vw);
  aspect-ratio: 1;
  margin: 3vh 0 1vh;
  filter: drop-shadow(0 18px 24px rgba(122,110,93,.22));
}

.peony { width: 100%; height: 100%; }
.peony .petal { stroke: var(--sage); stroke-width: 2.4; fill: rgba(250,250,250,.18); }
.peony .blush { stroke: var(--blush); fill: rgba(232,180,184,.16); }
.peony .pollen { stroke: var(--gold); stroke-width: 2; fill: rgba(201,169,110,.22); }

.subbrand {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 4rem);
  color: #7A6E5D;
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp .8s ease .5s forwards;
}

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

.corner-counter {
  position: fixed;
  right: 24px;
  bottom: 26px;
  z-index: 5;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.5rem, 4vw, 4rem);
  color: var(--chrome-shadow);
  opacity: .5;
}

.timeline-chapter { padding-top: 18vh; padding-bottom: 18vh; }
.light-chapter { min-height: 250vh; }
.dark-chapter {
  min-height: 150vh;
  color: var(--mist);
  background:
    linear-gradient(115deg, rgba(44,44,44,.96), rgba(44,44,44,.9)),
    repeating-linear-gradient(132deg, transparent 0 110px, rgba(201,169,110,.44) 111px, transparent 114px);
  box-shadow: inset 0 40px 80px rgba(44,44,44,.35), inset 0 -40px 80px rgba(44,44,44,.35);
}
.portfolio-chapter { min-height: 200vh; }

.milestone {
  position: sticky;
  top: 44vh;
  left: calc(50% - 32px);
  width: 64px;
  height: 64px;
  z-index: 3;
  display: grid;
  place-items: center;
  margin: 0 auto 6vh;
  border-radius: 50%;
  font-family: "Outfit", sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: radial-gradient(circle at 32% 24%, #FAFAFA 0 12%, #E8E8E8 18%, #C0C0C0 38%, #8A8A8A 58%, #FAFAFA 76%, #C0C0C0 100%);
  box-shadow: inset -10px -12px 20px rgba(44,44,44,.18), inset 8px 8px 18px rgba(250,250,250,.85), 0 0 22px rgba(192,192,192,.72);
  animation: orbPulse 2s ease-in-out infinite;
}

.milestone.final { width: 96px; height: 96px; font-size: 1.05rem; }

@keyframes orbPulse { 50% { transform: scale(1.05); box-shadow: inset -10px -12px 20px rgba(44,44,44,.18), inset 8px 8px 18px rgba(250,250,250,.9), 0 0 34px rgba(232,180,184,.65); } }

.panel {
  position: relative;
  width: min(480px, 42vw);
  margin: 12vh 0;
  padding: 2rem;
  border-radius: 30px;
  background:
    linear-gradient(var(--marble-white), var(--marble-white)) padding-box,
    repeating-linear-gradient(90deg, var(--sage) 0 8px, transparent 8px 18px, var(--blush) 18px 23px, transparent 23px 36px) border-box;
  border: 8px solid transparent;
  box-shadow: 0 28px 80px rgba(192,192,192,.32), inset 0 0 0 1px rgba(250,250,250,.8);
  opacity: 0;
  transform: translateY(44px) scale(.98);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1);
}

.panel.visible { opacity: 1; transform: translateY(0) scale(1); }
.panel.left { margin-left: calc(50% - 560px); }
.panel.right { margin-left: calc(50% + 82px); }
.panel.dark { background: linear-gradient(145deg, rgba(44,44,44,.94), rgba(58,58,58,.84)) padding-box, repeating-linear-gradient(90deg, var(--gold) 0 8px, transparent 8px 18px, var(--sage) 18px 23px, transparent 23px 36px) border-box; box-shadow: 0 30px 90px rgba(0,0,0,.28), 0 0 28px rgba(201,169,110,.18); }
.panel h2 { margin: .2rem 0 1rem; font-family: "Space Grotesk", sans-serif; font-size: clamp(2.1rem, 4vw, 4rem); line-height: .95; letter-spacing: -.02em; }
.panel p { font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.7; letter-spacing: .01em; }

.connector {
  position: absolute;
  top: 38px;
  width: 170px;
  height: 28px;
  color: var(--sage);
}
.left .connector { right: -190px; }
.right .connector { left: -190px; transform: rotate(180deg); }
.connector path { fill: none; stroke: currentColor; stroke-width: 2; stroke-dasharray: 220; stroke-dashoffset: 220; transition: stroke-dashoffset 1.2s ease; }
.connector ellipse { fill: var(--sage); opacity: .75; transform-origin: center; transform: scale(0); transition: transform .9s ease .35s; }
.visible .connector path { stroke-dashoffset: 0; }
.visible .connector ellipse { transform: scale(1); }

.quote-interlude {
  min-height: 70vh;
  display: grid;
  place-items: center;
  margin: 18vh -7vw;
  padding: 8vh 12vw;
  text-align: center;
  background: radial-gradient(circle at 50% 40%, rgba(250,250,250,.8), rgba(245,240,235,.35)), repeating-linear-gradient(128deg, transparent 0 80px, rgba(201,169,110,.34) 81px, transparent 84px);
  opacity: 0;
  transition: opacity 1s ease;
}
.quote-interlude.visible { opacity: 1; }
.quote-interlude p { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 300; color: var(--gold); font-size: clamp(2.2rem, 6vw, 6rem); line-height: 1; max-width: 980px; }

svg path, svg circle { vector-effect: non-scaling-stroke; }
.botanical-draw path, .botanical-draw circle, .botanical-draw .petal, .botanical-draw .pollen {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.35s ease, opacity .8s ease;
}
.botanical-draw.drawn path, .botanical-draw.drawn circle, .botanical-draw.drawn .petal, .botanical-draw.drawn .pollen { stroke-dashoffset: 0; }

.fern, .sprig, .oak, .wild { width: min(220px, 60%); float: right; margin: 0 0 1rem 1.2rem; fill: none; stroke: var(--sage); stroke-width: 3; }
.dark .sprig { stroke: var(--gold); opacity: .9; }
.big-count {
  font-family: "Outfit", sans-serif;
  font-size: clamp(2.8rem, 7vw, 5rem);
  font-variant-numeric: tabular-nums;
  color: transparent;
  background: linear-gradient(135deg, #D4D4D4, #FAFAFA, #A8A8A8);
  -webkit-background-clip: text;
  background-clip: text;
}

.project { width: min(540px, 45vw); border-top: 4px solid var(--chrome-mid); }
.project:hover .label { color: var(--blush); }
.project svg { stroke-width: 3; }

.future-chapter {
  min-height: 110vh;
  display: grid;
  place-items: center;
  text-align: center;
}
.tree-wrap { opacity: 0; transform: translateY(40px); transition: .9s ease; }
.tree-wrap.visible { opacity: 1; transform: translateY(0); }
.tree { width: min(520px, 82vw); fill: none; stroke: var(--sage); stroke-width: 4; filter: drop-shadow(0 20px 30px rgba(122,143,106,.2)); }
.tree path:nth-child(7), .tree path:nth-child(8), .tree path:nth-child(9), .tree path:nth-child(10), .tree path:nth-child(11) { stroke: var(--blush); fill: rgba(232,180,184,.12); }
.future-chapter h2 { margin: 0; font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: clamp(3rem, 9vw, 8rem); letter-spacing: -.05em; }
.future-copy { font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink); }

.chapter-pill {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;
  font-family: "Outfit", sans-serif;
}
.chapter-pill button {
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  background: linear-gradient(135deg, #FAFAFA, #C0C0C0 45%, #FAFAFA 70%, #8A8A8A);
  box-shadow: inset 0 2px 6px rgba(250,250,250,.8), 0 12px 26px rgba(44,44,44,.22);
}
.radial-menu {
  position: absolute;
  right: 0;
  bottom: 62px;
  width: 210px;
  height: 210px;
  pointer-events: none;
}
.radial-menu a {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  text-decoration: none;
  color: var(--ink);
  background: radial-gradient(circle at 30% 25%, #FAFAFA, #C0C0C0 55%, #8A8A8A);
  box-shadow: 0 10px 24px rgba(44,44,44,.22);
  opacity: 0;
  transform: translate(0, 0) scale(.2);
  transition: .38s ease;
}
.chapter-pill.open .radial-menu { pointer-events: auto; }
.chapter-pill.open .radial-menu a:nth-child(1) { transform: translate(-148px, 0) scale(1); opacity: 1; }
.chapter-pill.open .radial-menu a:nth-child(2) { transform: translate(-132px, -68px) scale(1); opacity: 1; }
.chapter-pill.open .radial-menu a:nth-child(3) { transform: translate(-82px, -122px) scale(1); opacity: 1; }
.chapter-pill.open .radial-menu a:nth-child(4) { transform: translate(-16px, -146px) scale(1); opacity: 1; }
.chapter-pill.open .radial-menu a:nth-child(5) { transform: translate(38px, -106px) scale(1); opacity: 1; }

@media (max-width: 768px) {
  .timeline-spine { left: 24px; }
  .chapter { padding-left: 58px; padding-right: 20px; }
  .hero { padding-left: 20px; }
  .milestone { margin-left: -66px; }
  .panel, .project { width: 100%; margin-left: 0 !important; padding: 1.4rem; }
  .connector { display: none; }
  .fern, .sprig, .oak, .wild { width: 46%; }
  .chapter-pill { right: 14px; bottom: 14px; }
  .corner-counter { display: none; }
}