/* Erika Loftis Art Studio project journey — an editorial, connected board. */
.erika-journey {
  --erika-cream: #fffaf1;
  --erika-paper: #fffdf8;
  --erika-navy: #082b52;
  --erika-ink: #123354;
  --erika-pink: #ef3f74;
  --erika-pink-soft: #ffd6e3;
  --erika-yellow: #ffd153;
  --erika-muted: #526b80;
  --erika-line: rgba(8, 43, 82, .18);
  background: var(--erika-cream);
  color: var(--erika-ink);
  overflow-x: hidden;
}

.erika-journey .site-header-mockup {
  background: rgba(255, 250, 241, .95);
  border-bottom-color: rgba(8, 43, 82, .1);
}

.erika-journey .site-header-mockup .top-nav a:not(.nav-cta) { color: var(--erika-navy); }
.erika-journey .site-header-mockup .top-nav a:not(.nav-cta):hover { color: var(--erika-pink); }
.erika-journey h1, .erika-journey h2, .erika-journey h3 { color: var(--erika-navy); }
.erika-shell { width: min(1220px, calc(100% - 3rem)); margin-inline: auto; }
.erika-eyebrow, .erika-step { margin: 0; color: var(--erika-pink); font-size: .74rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.erika-step { display: flex; align-items: center; gap: .65rem; }
.erika-step::before { content: ""; width: 1.8rem; height: 2px; background: var(--erika-pink); }
.erika-back { display: inline-flex; color: var(--erika-navy); font-size: .92rem; font-weight: 800; }
.erika-back:hover, .erika-text-link:hover { color: var(--erika-pink); }
.erika-text-link { color: var(--erika-navy); font-weight: 800; }
.erika-text-link span { display: inline-block; margin-left: .35rem; transition: transform 180ms ease; }
.erika-text-link:hover span { transform: translateX(4px); }

/* Hero collage */
.erika-hero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(4rem, 7vw, 7rem) 0 5.5rem; background: var(--erika-cream); }
.erika-hero::before { content: ""; position: absolute; z-index: -1; right: -7rem; bottom: -7rem; width: 31rem; height: 16rem; border-radius: 50%; background: rgba(255, 209, 83, .3); transform: rotate(-11deg); }
.erika-hero-brush { position: absolute; z-index: -1; inset: 0 0 auto 37%; width: 70%; height: 42rem; overflow: visible; pointer-events: none; }
.erika-hero-brush path { fill: none; stroke: var(--erika-pink); stroke-linecap: round; stroke-width: 28; opacity: .58; }
.erika-hero-brush path:nth-child(2) { stroke-width: 11; opacity: .34; }
.erika-hero-brush path:nth-child(3) { stroke-width: 22; opacity: .35; }
.erika-hero-grid { display: grid; grid-template-columns: minmax(290px, .72fr) minmax(540px, 1.28fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.erika-hero-copy { position: relative; z-index: 3; max-width: 35rem; }
.erika-hero-copy .erika-back { margin-bottom: 2.2rem; }
.erika-hero h1 { max-width: 8ch; margin: .8rem 0 1rem; font-family: "Caveat", "Segoe Print", cursive; font-size: clamp(4.2rem, 7.4vw, 7.5rem); font-weight: 700; letter-spacing: -.04em; line-height: .78; }
.erika-hero h1 em { color: var(--erika-pink); font-style: normal; }
.erika-hero-lead { max-width: 27rem; margin: 0; color: var(--erika-navy); font-family: "Caveat", "Segoe Print", cursive; font-size: clamp(1.8rem, 2.7vw, 2.65rem); font-weight: 600; line-height: 1.02; }
.erika-hero-underline { width: 9rem; height: .55rem; margin: 1rem 0 1.15rem; border-radius: 50%; background: var(--erika-yellow); transform: rotate(-2deg); }
.erika-hero-body { max-width: 25rem; margin: 0; color: var(--erika-muted); font-size: .94rem; line-height: 1.6; }
.erika-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.1rem; margin-top: 1.8rem; }
.erika-button { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 2.9rem; padding: .7rem 1.1rem; border: 1px solid transparent; font-size: .78rem; font-weight: 800; transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }
.erika-button:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(8, 43, 82, .15); }
.erika-button-dark { background: var(--erika-navy); color: #fff; }
.erika-button-pink { background: var(--erika-pink); color: #fff; }
.erika-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 30rem; margin: 2.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--erika-line); }
.erika-facts dt { color: var(--erika-muted); font-size: .63rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.erika-facts dd { margin: .3rem 0 0; color: var(--erika-navy); font-size: .78rem; font-weight: 800; line-height: 1.35; }
.erika-hero-collage { position: relative; min-height: 42rem; margin: 0; }
.erika-paper { position: absolute; overflow: hidden; border: .65rem solid #fff; background: #fff; box-shadow: 0 22px 45px rgba(37, 42, 59, .2); }
.erika-paper img, .erika-shot img, .erika-browser-shot img, .erika-admin-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.erika-hero-home { z-index: 2; top: 3%; right: 4%; width: 69%; height: 30rem; transform: rotate(2deg); }
.erika-hero-home img { object-position: center top; }
.erika-hero-portrait { z-index: 4; bottom: 4%; left: 1%; width: 28%; height: 15rem; transform: rotate(-7deg); }
.erika-hero-portrait img { object-position: center 44%; }
.erika-hero-art { z-index: 5; top: 50%; left: 15%; width: 22%; height: 10.5rem; transform: rotate(-8deg); }
.erika-hero-art img { object-position: 9% 15%; }
.erika-hero-art-two { z-index: 6; top: 48%; left: 39%; transform: rotate(7deg); }
.erika-hero-art-two img { object-position: 72% 15%; }
.erika-handnote { display: block; color: var(--erika-pink); font-family: "Caveat", "Segoe Print", cursive; font-size: 1.7rem; font-weight: 700; line-height: .9; transform: rotate(-6deg); }
.erika-handnote-hero { position: absolute; z-index: 7; top: 1%; left: 3%; color: var(--erika-navy); font-size: 1.75rem; transform: rotate(-9deg); }
.erika-heart { color: var(--erika-pink); font-family: "Caveat", cursive; font-size: 4rem; line-height: 1; }
.erika-heart-hero { position: absolute; z-index: 8; top: 8%; right: -1%; transform: rotate(12deg); }
.erika-hero-collage figcaption { position: absolute; z-index: 8; right: 6%; bottom: -1.5rem; max-width: 17rem; color: var(--erika-muted); font-size: .74rem; line-height: 1.45; }

/* Continuous five-stage board */
.erika-journey-board { position: relative; isolation: isolate; overflow: hidden; padding: 6rem 0 5rem; background: #fffdf7; }
.erika-board-intro { position: relative; z-index: 2; max-width: 52rem; margin-bottom: 1rem; }
.erika-board-intro h2 { max-width: 9ch; margin: .7rem 0 .55rem; font-family: "Caveat", "Segoe Print", cursive; font-size: clamp(3.5rem, 6vw, 6.2rem); line-height: .8; letter-spacing: -.03em; }
.erika-board-intro > p:last-child { margin: 0; color: var(--erika-muted); font-size: .95rem; }
.erika-route { position: absolute; z-index: 0; top: 11rem; right: 0; bottom: 18rem; left: 0; pointer-events: none; }
.erika-route svg { width: 100%; height: 100%; overflow: visible; }
.erika-route path { fill: none; stroke: var(--erika-pink); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 3 18; opacity: .62; }
.erika-route marker path, .erika-stage-arrow marker path { fill: var(--erika-pink); stroke: none; }
.erika-route-mobile { display: none; }
.erika-stages { position: relative; z-index: 1; display: grid; gap: 2rem; }
.erika-stage { position: relative; display: grid; grid-template-columns: minmax(250px, .78fr) minmax(500px, 1.22fr); min-height: 510px; align-items: center; }
.erika-stage-copy { position: relative; z-index: 5; max-width: 28rem; padding: 1rem 0; }
.erika-stage:nth-child(even) .erika-stage-copy { grid-column: 2; grid-row: 1; justify-self: end; }
.erika-stage:nth-child(even) .erika-stage-visual { grid-column: 1; grid-row: 1; }
.erika-stage-mark { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.erika-stage-mark span { display: grid; place-items: center; width: 4.1rem; height: 4.1rem; border: .45rem solid #fffdf7; border-radius: 50%; background: var(--erika-pink-soft); color: var(--erika-pink); font-family: "Caveat", cursive; font-size: 1.8rem; font-weight: 700; box-shadow: 0 7px 18px rgba(239, 63, 116, .12); }
.erika-stage-mark i { width: 2.8rem; height: .35rem; border-radius: 50%; background: var(--erika-pink); transform: rotate(-7deg); }
.erika-stage h3 { max-width: 10ch; margin: .55rem 0 .9rem; font-family: "Caveat", "Segoe Print", cursive; font-size: clamp(3rem, 5vw, 5.2rem); font-weight: 700; letter-spacing: -.02em; line-height: .8; }
.erika-stage-text { max-width: 25rem; margin: 0; color: var(--erika-muted); font-size: .95rem; line-height: 1.6; }
.erika-stage-copy > .erika-handnote { margin-top: 1.2rem; }
.erika-stage-five .erika-button { margin-top: 1.2rem; }
.erika-stage-visual { position: relative; min-height: 28rem; }
.erika-shot, .erika-browser-shot, .erika-admin-shot { position: absolute; overflow: hidden; margin: 0; border: .65rem solid #fff; background: #fff; box-shadow: 0 22px 42px rgba(37, 42, 59, .18); }
.erika-shot figcaption, .erika-admin-shot figcaption { position: absolute; right: .55rem; bottom: .55rem; left: .55rem; width: max-content; max-width: calc(100% - 1.1rem); padding: .25rem .45rem; background: rgba(8, 43, 82, .88); color: #fff; font-size: .65rem; font-weight: 800; }
.erika-discovery-collage { min-height: 31rem; }
.erika-portrait-shot { z-index: 2; top: 1rem; left: 5%; width: 39%; height: 21rem; transform: rotate(-5deg); }
.erika-portrait-shot img { object-position: center 44%; }
.erika-artwork-shot { z-index: 4; top: 7rem; right: 7%; width: 47%; height: 17rem; transform: rotate(5deg); }
.erika-artwork-shot img { object-position: 11% 15%; }
.erika-journal-shot { z-index: 3; right: 24%; bottom: .2rem; width: 42%; height: 15rem; transform: rotate(-2deg); }
.erika-journal-shot img { object-position: center 13%; }
.erika-direction-collage { min-height: 31rem; }
.erika-browser-shot { z-index: 2; border-radius: .45rem; }
.erika-window-bar { display: flex; align-items: center; gap: .28rem; height: 1.5rem; padding: 0 .35rem; background: #fff; color: var(--erika-muted); font-size: .58rem; }
.erika-window-bar b { width: .38rem; height: .38rem; border-radius: 50%; background: var(--erika-pink); }
.erika-window-bar b:nth-child(2) { background: var(--erika-yellow); }
.erika-window-bar b:nth-child(3) { background: #8ed0ae; }
.erika-window-bar small { margin-left: .4rem; font-size: .58rem; }
.erika-shop-shot { top: 2rem; left: 7%; width: 72%; height: 22rem; transform: rotate(-3deg); }
.erika-shop-shot img { height: calc(100% - 1.5rem); object-position: center top; }
.erika-mini-art-one, .erika-mini-art-two { z-index: 4; width: 7.5rem; height: 7.5rem; }
.erika-mini-art-one { right: 1%; bottom: 2rem; transform: rotate(8deg); }
.erika-mini-art-one img { object-position: 9% 15%; }
.erika-mini-art-two { right: 21%; bottom: .1rem; transform: rotate(-7deg); }
.erika-mini-art-two img { object-position: 73% 15%; }
.erika-website-collage { min-height: 31rem; }
.erika-home-shot { top: 1rem; left: 1%; width: 70%; height: 23rem; transform: rotate(2deg); }
.erika-home-shot img { height: calc(100% - 1.5rem); object-position: center top; }
.erika-journal-screen { right: 1%; bottom: 1.3rem; width: 48%; height: 16rem; transform: rotate(-4deg); }
.erika-journal-screen img { height: calc(100% - 1.5rem); object-position: center 14%; }
.erika-sticker { position: absolute; z-index: 5; right: 2%; top: 2.1rem; padding: .6rem; background: var(--erika-yellow); color: var(--erika-navy); font-family: "Caveat", cursive; font-size: 1.4rem; font-weight: 700; line-height: .78; transform: rotate(9deg); }
.erika-admin-collage { min-height: 34rem; }
.erika-admin-shot { border-width: .55rem; }
.erika-dashboard-shot { z-index: 2; top: .2rem; left: 0; width: 73%; height: 27rem; transform: rotate(-2deg); }
.erika-dashboard-shot img { object-position: top left; }
.erika-artworks-shot { z-index: 4; right: 1%; bottom: 1rem; width: 51%; height: 18rem; transform: rotate(3deg); }
.erika-artworks-shot img { object-position: top left; }
.erika-invoice-shot { z-index: 5; right: 28%; bottom: -1rem; width: 32%; height: 13rem; transform: rotate(-5deg); }
.erika-invoice-shot img { object-position: 88% 79%; }
.erika-launch-collage { min-height: 32rem; }
.erika-launch-home { z-index: 2; top: 1rem; left: 7%; width: 65%; height: 26rem; transform: rotate(2deg); }
.erika-launch-home img { object-position: center top; }
.erika-launch-frame { z-index: 4; right: 2%; bottom: 1rem; width: 42%; height: 16rem; transform: rotate(-5deg); }
.erika-launch-frame img { object-position: center top; }
.erika-launch-collage > .erika-handnote { position: absolute; z-index: 6; left: 1%; bottom: 0; font-size: 1.8rem; transform: rotate(-8deg); }
.erika-stage-arrow { position: absolute; z-index: 6; right: -3%; bottom: -2rem; width: 9rem; height: 5rem; overflow: visible; }
.erika-stage-arrow path { fill: none; stroke: var(--erika-pink); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 11; }
.erika-stage:nth-child(even) .erika-stage-arrow { right: auto; left: -2%; transform: scaleX(-1); }

/* Delivered and closing remain on the same canvas instead of becoming another hero band. */
.erika-delivered { position: relative; z-index: 2; margin-top: 2rem; padding: 3rem 0; }
.erika-delivered::before { content: ""; position: absolute; z-index: -1; inset: 1rem 5% .5rem; border-radius: 48% 52% 45% 55%; background: linear-gradient(120deg, rgba(255, 214, 227, .9), rgba(255, 245, 207, .86)); transform: rotate(-2deg); }
.erika-delivered-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); gap: 3rem; align-items: center; padding-inline: 4rem; }
.erika-delivered h2 { max-width: 8ch; margin: .55rem 0 0; font-family: "Caveat", cursive; font-size: clamp(3rem, 5vw, 5.2rem); line-height: .8; }
.erika-delivery-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.erika-delivery-list span { display: flex; align-items: center; gap: .5rem; min-height: 3.6rem; padding: .65rem .75rem; border: 1px solid rgba(8, 43, 82, .1); border-radius: .75rem; background: rgba(255, 255, 255, .75); color: var(--erika-navy); font-size: .78rem; font-weight: 800; box-shadow: 0 7px 16px rgba(79, 46, 47, .06); }
.erika-delivery-list b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: 0 0 auto; border-radius: 50%; background: var(--erika-pink); color: #fff; font-size: .72rem; }
.erika-closing { padding: 4.5rem 0 6rem; background: var(--erika-cream); text-align: center; }
.erika-closing-inner { display: grid; justify-items: center; }
.erika-closing h2 { max-width: 9ch; margin: .6rem 0 1rem; font-family: "Caveat", cursive; font-size: clamp(3.5rem, 6vw, 6rem); line-height: .8; }

@media (max-width: 1000px) {
  .erika-hero-grid { grid-template-columns: minmax(260px, .75fr) minmax(390px, 1.25fr); gap: 2rem; }
  .erika-hero-collage { min-height: 35rem; }
  .erika-hero-home { height: 25rem; }
  .erika-hero-portrait { height: 12rem; }
  .erika-hero-art { height: 8.5rem; }
  .erika-stage { grid-template-columns: minmax(220px, .72fr) minmax(390px, 1.28fr); }
  .erika-stage h3 { font-size: 3.8rem; }
  .erika-stage-arrow { display: none; }
  .erika-delivered-inner { padding-inline: 2rem; }
}

@media (max-width: 820px) {
  .erika-shell { width: calc(100% - 2rem); }
  .erika-hero { padding-block: 3.5rem 4.5rem; }
  .erika-hero-brush { left: 0; width: 100%; height: 38rem; opacity: .7; }
  .erika-hero-grid { grid-template-columns: 1fr; }
  .erika-hero-copy { max-width: 38rem; }
  .erika-hero-collage { width: min(100%, 650px); min-height: 36rem; margin-inline: auto; }
  .erika-hero-home { width: 70%; height: 25rem; }
  .erika-journey-board { padding-top: 4.5rem; }
  .erika-route { top: 15rem; bottom: 15rem; }
  .erika-route-desktop { display: none; }
  .erika-route-mobile { display: block; }
  .erika-stages { gap: 4rem; }
  .erika-stage, .erika-stage:nth-child(even) { display: grid; grid-template-columns: 1fr; gap: 1.4rem; min-height: 0; }
  .erika-stage:nth-child(even) .erika-stage-copy, .erika-stage:nth-child(even) .erika-stage-visual { grid-column: 1; grid-row: auto; justify-self: initial; }
  .erika-stage-copy { max-width: 36rem; padding-left: 1rem; }
  .erika-stage-visual { min-height: 28rem; }
  .erika-stage h3 { max-width: 11ch; }
  .erika-delivered-inner { grid-template-columns: 1fr; gap: 2rem; padding-inline: 2rem; }
  .erika-delivery-list { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .erika-hero h1 { font-size: clamp(4rem, 18vw, 5.8rem); }
  .erika-hero-lead { font-size: 2rem; }
  .erika-hero-actions { align-items: flex-start; flex-direction: column; }
  .erika-facts { grid-template-columns: 1fr; }
  .erika-hero-collage { min-height: 28rem; }
  .erika-hero-home { top: 3%; right: 0; width: 77%; height: 20rem; }
  .erika-hero-portrait { bottom: 2%; left: 0; width: 34%; height: 10rem; border-width: .4rem; }
  .erika-hero-art { top: 51%; left: 16%; width: 25%; height: 7rem; border-width: .4rem; }
  .erika-hero-art-two { left: 42%; }
  .erika-handnote-hero { top: 0; left: 2%; font-size: 1.35rem; }
  .erika-heart-hero { top: 5%; right: -1%; font-size: 3rem; }
  .erika-hero-collage figcaption { right: 0; bottom: -1.3rem; max-width: 14rem; font-size: .68rem; }
  .erika-board-intro h2 { font-size: 4rem; }
  .erika-stage-copy { padding-left: 0; }
  .erika-stage-mark span { width: 3.6rem; height: 3.6rem; }
  .erika-stage h3 { font-size: 3.65rem; }
  .erika-stage-text { font-size: .9rem; }
  .erika-stage-visual { min-height: 22rem; }
  .erika-portrait-shot { width: 45%; height: 15rem; }
  .erika-artwork-shot { width: 54%; height: 13rem; right: 0; }
  .erika-journal-shot { width: 49%; height: 11rem; right: 19%; }
  .erika-shop-shot { width: 82%; height: 16rem; left: 0; }
  .erika-mini-art-one, .erika-mini-art-two { width: 5.8rem; height: 5.8rem; }
  .erika-mini-art-two { right: 19%; }
  .erika-home-shot { width: 84%; height: 17rem; left: 0; }
  .erika-journal-screen { width: 60%; height: 12rem; }
  .erika-sticker { top: 1rem; right: 0; font-size: 1.1rem; }
  .erika-admin-collage { min-height: 23rem; }
  .erika-dashboard-shot { width: 82%; height: 18rem; }
  .erika-artworks-shot { width: 61%; height: 12rem; }
  .erika-invoice-shot { right: 27%; width: 37%; height: 8rem; }
  .erika-launch-collage { min-height: 22rem; }
  .erika-launch-home { width: 78%; height: 18rem; left: 0; }
  .erika-launch-frame { width: 50%; height: 11rem; }
  .erika-launch-collage > .erika-handnote { font-size: 1.35rem; }
  .erika-delivered { padding: 2.5rem 0; }
  .erika-delivered::before { inset: 1rem 0 .5rem; }
  .erika-delivered-inner { padding-inline: 1rem; }
  .erika-delivery-list { grid-template-columns: 1fr 1fr; }
  .erika-delivery-list span { font-size: .72rem; }
  .erika-closing { padding-block: 4rem 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .erika-button, .erika-text-link span { transition: none; }
  .erika-paper, .erika-shot, .erika-browser-shot, .erika-admin-shot { transform: none; }
}