/* Green Lebanon story page — scoped design system */
.story-page {
  --story-green: #006233;
  --story-green-dark: #004523;
  --story-forest: #063725;
  --story-cream: #ffe5c7;
  --story-paper: #fffaf4;
  --story-ink: #153c2b;
  --story-muted: #5b7165;
  --story-gold: #c79a55;
  --story-line: rgba(0, 98, 51, .16);
  --story-shell: min(1180px, calc(100% - 3rem));
  --story-section: clamp(4.5rem, 9vw, 8.5rem);
  --story-radius: 1.4rem;
  --story-transition: cubic-bezier(.22, 1, .36, 1);
  overflow-x: clip;
  color: var(--story-ink);
  background: var(--story-paper);
  font-weight: 400;
}
.story-page *, .story-page *::before, .story-page *::after { box-sizing: border-box; }
.story-page img { max-width: 100%; }
.story-page h1, .story-page h2, .story-page h3, .story-lead { text-wrap: balance; }
.story-shell { width: var(--story-shell); margin-inline: auto; }
.story-section { position: relative; padding-block: var(--story-section); }
.skip-link { position: fixed; top: .75rem; right: 1rem; z-index: 100; padding: .7rem 1rem; color: var(--story-green-dark); font-weight: 800; text-decoration: none; border-radius: 999px; background: #fff; transform: translateY(-160%); transition: transform .2s ease; }
.skip-link:focus { transform: none; }

/* Shared editorial language */
.story-kicker { margin: 0 0 1rem; display: inline-flex; align-items: center; gap: .65rem; color: var(--story-gold); font-size: .78rem; font-weight: 800; letter-spacing: .02em; }
.story-kicker::after { content: ""; width: 38px; height: 1px; background: currentColor; opacity: .65; }
.story-kicker span { color: var(--story-green); }
.story-kicker.light { color: rgba(255,255,255,.8); }
.story-kicker.light span { color: var(--story-cream); }
.story-kicker.dark { color: var(--story-green); }
.story-kicker.dark span { color: var(--story-gold); }
.story-page h2 { margin: 0; color: var(--story-green-dark); font-size: clamp(1.9rem, 3.2vw, 3rem); font-weight: 700; line-height: 1.3; letter-spacing: normal; }
.story-page h3 { margin: 0; color: var(--story-green-dark); font-size: clamp(1.38rem, 2vw, 1.75rem); line-height: 1.45; }
.story-page p { line-height: 2; }
.story-lead { color: var(--story-green-dark) !important; font-size: clamp(1.04rem, 1.3vw, 1.18rem) !important; font-weight: 500; }
.story-media { position: relative; margin: 0; overflow: hidden; border-radius: var(--story-radius); background: #e4e1d9; box-shadow: 0 24px 60px rgba(0, 63, 37, .12); }
.story-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform 1.2s var(--story-transition); }
@media (hover: hover) and (pointer: fine) { .story-media:hover img { transform: scale(1.035); } }

/* Hero */
.story-hero { min-height: min(800px, 100svh); position: relative; display: grid; align-items: end; isolation: isolate; overflow: hidden; color: #fff; background: var(--story-green-dark); }
.story-hero-media, .story-hero-shade, .story-hero-grain { position: absolute; inset: 0; }
.story-hero-media { z-index: -3; overflow: hidden; }
.story-hero-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 51%; }
.story-hero-shade { z-index: -2; background: linear-gradient(90deg, rgba(0,53,31,.12), rgba(0,53,31,.77) 70%, rgba(0,53,31,.9)), linear-gradient(180deg, rgba(0,34,20,.18), rgba(0,34,20,.7)); }
.story-hero-grain { z-index: -1; opacity: .09; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,.8) .5px, transparent .65px); background-size: 5px 5px; }
.story-hero-content { padding-block: 10rem clamp(6.5rem, 12vh, 8rem); }
.story-hero h1 { max-width: 11ch; color: #fff; font-size: clamp(2.65rem, 5vw, 4.5rem); font-weight: 800; line-height: 1.18; letter-spacing: normal; }
.story-hero-line { max-width: 25ch; margin: 1.2rem 0 0; color: var(--story-cream); font-size: clamp(1.06rem, 1.7vw, 1.4rem); font-weight: 500; line-height: 1.7; }
.story-scroll-cue { position: absolute; left: max(1rem, calc((100% - min(1180px, calc(100% - 3rem))) / 2)); bottom: 1.7rem; display: inline-flex; align-items: center; gap: .7rem; color: rgba(255,255,255,.8); font-size: .74rem; font-weight: 700; text-decoration: none; }
.story-scroll-cue i { width: 42px; height: 1px; position: relative; overflow: hidden; background: rgba(255,255,255,.35); }
.story-scroll-cue i::after { content: ""; width: 18px; height: 1px; position: absolute; inset: 0 auto 0 0; background: var(--story-cream); animation: storyCue 1.8s ease-in-out infinite; }

/* Beginning and craft */
.editorial-grid { min-height: 630px; position: relative; display: grid; grid-template-columns: minmax(280px, .82fr) minmax(360px, 1.18fr); align-items: center; gap: clamp(3rem, 9vw, 9rem); }
.story-opening { overflow: hidden; }
.opening-media { aspect-ratio: 4 / 5; max-height: 590px; }
.opening-media::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(transparent, rgba(0,55,32,.72)); }
.opening-media figcaption { position: absolute; right: 1.2rem; bottom: 1rem; z-index: 1; color: #fff; font-size: .76rem; font-weight: 700; }
.editorial-copy { max-width: 630px; position: relative; z-index: 1; }
.editorial-copy > p:not(.story-kicker) { margin: 1.1rem 0 0; color: var(--story-muted); font-size: clamp(.98rem, 1.35vw, 1.1rem); }
.opening-word { position: absolute; left: -2%; bottom: 3%; z-index: 0; color: transparent; font-size: clamp(7rem, 18vw, 15rem); font-weight: 800; line-height: 1; -webkit-text-stroke: 1px rgba(0, 98, 51, .09); pointer-events: none; }
.craft-section { overflow: hidden; color: #fff; background: var(--story-forest); }
.craft-section::before { content: ""; width: 58vw; aspect-ratio: 1; position: absolute; top: -28vw; left: -20vw; border: 1px solid rgba(255,229,199,.14); border-radius: 50%; box-shadow: 0 0 0 6vw rgba(255,229,199,.025); }
.craft-grid { grid-template-columns: minmax(360px, 1.05fr) minmax(280px, .82fr); }
.light-copy h2, .light-copy h3 { color: #fff; }
.light-copy > p:not(.story-kicker) { color: rgba(255,255,255,.73); }
.craft-statement { margin: 1.7rem 0; padding: .25rem 1.1rem .25rem 0; color: var(--story-cream) !important; font-size: clamp(1.08rem, 1.65vw, 1.35rem) !important; font-weight: 700; line-height: 1.9; border-right: 2px solid var(--story-gold); }
.craft-media { height: min(560px, 44vw); border-radius: var(--story-radius); }

/* Timeline */
.timeline-section { background: linear-gradient(180deg, #fffaf4, #f8eddd); }
.section-intro { max-width: 650px; }
.section-intro > p:last-child { max-width: 530px; margin: 1rem 0 0; color: var(--story-muted); font-size: 1.03rem; }
.timeline-feature { margin-top: clamp(2.5rem, 5vw, 4.5rem); padding: clamp(1.2rem, 3vw, 2rem); display: grid; grid-template-columns: minmax(220px, .75fr) 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; border: 1px solid var(--story-line); border-radius: var(--story-radius); background: rgba(255,255,255,.54); box-shadow: 0 16px 45px rgba(0,69,35,.06); }
.timeline-media { height: 350px; border-radius: var(--story-radius); }
.timeline-year { margin: 0; direction: ltr; color: var(--story-green); font-family: Arial, sans-serif; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.timeline-year i { width: clamp(2rem, 5vw, 4rem); height: 1px; display: inline-block; vertical-align: middle; background: var(--story-gold); }
.timeline-feature-copy > p:last-child, .timeline-item p:last-child { margin: 1rem 0 0; color: var(--story-muted); font-size: 1.02rem; }
.timeline-list { position: relative; margin-top: 1rem; border-top: 1px solid var(--story-line); }
.timeline-list::before { content: ""; width: 1px; position: absolute; top: 0; bottom: 0; right: clamp(5.6rem, 17vw, 12rem); background: linear-gradient(var(--story-gold), rgba(199,154,85,.12)); }
.timeline-item { position: relative; padding: clamp(1.8rem, 4vw, 3.4rem) 0; display: grid; grid-template-columns: minmax(170px, .45fr) 1fr; gap: clamp(1.4rem, 4vw, 4rem); border-bottom: 1px solid var(--story-line); }
.timeline-item::before { content: ""; width: 11px; height: 11px; position: absolute; top: clamp(2.55rem, 4.8vw, 4.25rem); right: calc(clamp(5.6rem, 17vw, 12rem) - 5px); border: 2px solid var(--story-paper); border-radius: 50%; background: var(--story-gold); box-shadow: 0 0 0 1px rgba(199,154,85,.42); }

/* Expansion */
.expansion-section { overflow: hidden; color: #fff; background: linear-gradient(130deg, var(--story-green), var(--story-green-dark)); }
.route-art { position: absolute; inset: 0; opacity: .58; pointer-events: none; }
.route-art i { position: absolute; display: block; border: 1px solid rgba(255,229,199,.42); border-radius: 50%; }
.route-art i:nth-child(1) { width: 62vw; height: 32vw; top: 20%; right: 48%; }
.route-art i:nth-child(2) { width: 42vw; height: 22vw; top: 38%; right: 55%; }
.route-art i:nth-child(3) { width: 11px; height: 11px; top: 62%; left: 21%; border: 0; background: var(--story-cream); box-shadow: 20vw -13vw 0 -1px var(--story-cream), 36vw -3vw 0 -1px var(--story-cream); }
.expansion-grid { position: relative; display: grid; grid-template-columns: minmax(340px, 1.1fr) minmax(270px, .9fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.expansion-grid h2 { color: #fff; }
.expansion-grid > div > p:last-child { max-width: 620px; margin: 1.2rem 0 0; color: rgba(255,255,255,.76); font-size: 1.05rem; }
.growth-list { margin: 0; padding: 0; display: grid; gap: .7rem; list-style: none; counter-reset: growth; }
.growth-list li { min-height: 58px; padding: .85rem 1rem; display: flex; align-items: center; gap: .85rem; color: #fff; font-weight: 700; border: 1px solid rgba(255,255,255,.18); border-radius: .85rem; background: rgba(255,255,255,.08); }
.growth-list span { color: var(--story-cream); font-size: .75rem; }

/* Family and identity */
.family-grid { display: grid; grid-template-columns: minmax(360px, 1.1fr) minmax(290px, .8fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.family-copy > p:not(.story-kicker) { max-width: 670px; margin: 1.1rem 0 0; color: var(--story-muted); font-size: 1.03rem; }
.family-media { aspect-ratio: 4 / 5; max-height: 570px; border-radius: var(--story-radius); }
.value-list { margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.value-list article { min-height: 148px; padding: 1rem; border: 1px solid var(--story-line); border-radius: .95rem; background: #fffdf9; transition: transform .25s var(--story-transition), box-shadow .25s ease, border-color .25s ease; }
.value-list article:hover { border-color: rgba(0,98,51,.32); box-shadow: 0 12px 25px rgba(0,69,35,.1); transform: translateY(-4px); }
.value-list span { color: var(--story-gold); font-size: .75rem; font-weight: 800; }
.value-list h3 { margin-top: .35rem; font-size: 1.17rem; }
.value-list p { margin: .25rem 0 0; color: var(--story-muted); font-size: .78rem; line-height: 1.7; }
.identity-section { overflow: hidden; color: #fff; background: var(--story-forest); }
.identity-shapes { position: absolute; inset: 0; opacity: .35; pointer-events: none; background: radial-gradient(circle at 74% 22%, rgba(199,154,85,.27), transparent 25%), linear-gradient(140deg, transparent 60%, rgba(0,111,63,.48)); }
.identity-shapes::after, .identity-shapes::before { content: ""; position: absolute; bottom: -34%; border: 1px solid rgba(255,229,199,.22); border-radius: 50%; }
.identity-shapes::before { width: 72%; height: 58%; right: -15%; transform: rotate(-9deg); }
.identity-shapes::after { width: 70%; height: 50%; left: -14%; transform: rotate(8deg); }
.identity-content { position: relative; z-index: 1; text-align: center; }
.identity-content h2 { color: #fff; }
.identity-name { margin: clamp(2.5rem, 6vw, 4.5rem) 0 2rem; color: transparent; font-size: clamp(2.8rem, 6vw, 5rem); font-weight: 800; line-height: 1.15; letter-spacing: normal; -webkit-text-stroke: 1px rgba(255,229,199,.82); transition: color 1s var(--story-transition), text-shadow 1s ease; }
.identity-name.is-visible { color: var(--story-cream); text-shadow: 0 18px 50px rgba(0,0,0,.16); }
.identity-copy { max-width: 760px; margin-inline: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; text-align: right; }
.identity-copy p { margin: 0; color: rgba(255,255,255,.76); font-size: 1rem; }

/* Generations, today and finale */
.generations-section { background: linear-gradient(180deg, var(--story-paper), #fff0de); }
.generations-grid { display: grid; grid-template-columns: minmax(330px, .95fr) minmax(340px, 1.05fr); gap: clamp(3rem, 9vw, 9rem); align-items: center; }
.generations-collage { height: min(530px, 42vw); position: relative; }
.generations-collage figure { position: absolute; margin: 0; }
.generations-collage figure:first-child { width: 70%; height: 82%; top: 0; right: 0; border-radius: var(--story-radius); }
.generations-collage figure:last-child { width: 48%; height: 57%; bottom: 0; left: 0; border: 7px solid var(--story-paper); border-radius: var(--story-radius); }
.today-section { min-height: 640px; display: grid; align-items: end; isolation: isolate; overflow: hidden; color: #fff; background: var(--story-green-dark); }
.today-media, .today-shade { position: absolute; inset: 0; }
.today-media { z-index: -2; margin: 0; }
.today-media img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center 52%; }
.today-shade { z-index: -1; background: linear-gradient(90deg, rgba(0,54,31,.13), rgba(0,54,31,.8) 72%, rgba(0,54,31,.92)), linear-gradient(180deg, transparent, rgba(0,45,26,.72)); }
.today-copy { padding-block: 7rem 5rem; }
.today-copy h2 { color: #fff; }
.today-copy > p:last-child { max-width: 670px; margin: 1.1rem 0 0; color: rgba(255,255,255,.76); font-size: 1.04rem; }
.story-finale { min-height: 570px; position: relative; display: grid; place-items: center; overflow: hidden; color: #fff; text-align: center; background: linear-gradient(145deg, var(--story-green), var(--story-green-dark)); }
.finale-lines { width: min(720px, 92vw); aspect-ratio: 1; position: absolute; border: 1px solid rgba(255,229,199,.17); border-radius: 50%; box-shadow: 0 0 0 9vw rgba(255,229,199,.025), 0 0 0 18vw rgba(255,229,199,.018); }
.finale-content { position: relative; padding-block: 4rem; }
.finale-logo { width: 88px; height: 88px; padding: .3rem; object-fit: contain; border-radius: 50%; background: var(--story-cream); box-shadow: 0 14px 38px rgba(0,0,0,.18); }
.finale-content .story-kicker { margin-top: 1.35rem; }
.finale-content h2 { color: #fff; font-size: clamp(2.2rem, 4.2vw, 4rem); }
.finale-content h2 em { color: var(--story-cream); font-style: normal; }
.finale-content > p { margin: 1rem 0 0; color: rgba(255,255,255,.78); font-size: 1.02rem; }
.finale-cta { min-height: 50px; margin-top: 1.6rem; padding: .75rem 1.25rem; display: inline-flex; align-items: center; gap: .7rem; color: var(--story-green-dark); font-weight: 800; text-decoration: none; border-radius: 999px; background: var(--story-cream); transition: transform .2s ease, background .2s ease; }
.finale-cta:hover { background: #fff6e8; transform: translateY(-3px); }

/* Motion is progressive enhancement: essential content and every image are visible by default. */
.animations-ready [data-reveal] { opacity: .01; transform: translateY(24px); transition: opacity .85s var(--story-transition), transform .85s var(--story-transition); }
.animations-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.animations-ready [data-reveal] > p:not(.story-kicker) { transition-delay: .08s; }
.animations-ready [data-reveal] > p:not(.story-kicker) + p { transition-delay: .16s; }
.animations-ready [data-media] img { clip-path: inset(0 0 100% 0); transform: scale(1.05); transition: clip-path 1s var(--story-transition), transform 1.15s var(--story-transition); }
.animations-ready [data-media].is-active img { clip-path: inset(0); transform: scale(1); }
.animations-ready .story-hero-media img { animation: storyHeroMove 2.6s var(--story-transition) both; }
.animations-ready [data-parallax] { transform: translate3d(0, var(--parallax-y, 0), 0); will-change: transform; }
.animations-ready .timeline-item .timeline-year { opacity: .25; transform: translateY(12px); transition: opacity .6s var(--story-transition), transform .6s var(--story-transition); }
.animations-ready .timeline-item.is-active .timeline-year { opacity: 1; transform: none; }
@keyframes storyHeroMove { from { transform: scale(1.04); } to { transform: scale(1); } }
@keyframes storyCue { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(24px); } }

@media (max-width: 800px) {
  .story-page { --story-shell: min(100% - 2rem, 620px); --story-section: clamp(4rem, 13vw, 5.5rem); }
  .story-hero { min-height: 92svh; }
  .story-hero-media img { object-position: center 48%; }
  .story-hero-shade { background: linear-gradient(180deg, rgba(0,53,31,.12), rgba(0,53,31,.36) 38%, rgba(0,53,31,.93)); }
  .story-hero-content { padding-block: 7rem 6.5rem; }
  .story-hero h1 { max-width: 10ch; font-size: clamp(2.15rem, 10vw, 2.75rem); }
  .story-hero-line { font-size: clamp(1.06rem, 5vw, 1.35rem); }
  .story-scroll-cue { left: 1rem; bottom: 1.2rem; }

  .editorial-grid, .craft-grid, .family-grid, .generations-grid, .expansion-grid { min-height: 0; grid-template-columns: 1fr; gap: 2.4rem; }
  .opening-media, .craft-media, .family-media { width: 100%; height: auto; max-height: none; aspect-ratio: 4 / 5; }
  .opening-media { order: 1; }
  .opening-grid .editorial-copy, .craft-grid .editorial-copy, .family-copy { order: 2; }
  .opening-word { font-size: 27vw; left: -4%; bottom: 0; }
  .story-page h2 { font-size: clamp(1.75rem, 8vw, 2.25rem); line-height: 1.35; }
  .editorial-copy > p:not(.story-kicker), .family-copy > p:not(.story-kicker), .expansion-grid > div > p:last-child { font-size: 1rem; }
  .craft-media { order: 1; border-radius: var(--story-radius); }
  .craft-grid .editorial-copy { order: 2; }
  .craft-statement { font-size: 1.03rem !important; }

  .timeline-feature { grid-template-columns: 1fr; padding: 1rem; }
  .timeline-media { height: auto; aspect-ratio: 4 / 3; border-radius: var(--story-radius); }
  .timeline-item { grid-template-columns: 1fr; gap: .85rem; }
  .timeline-list::before, .timeline-item::before { display: none; }
  .timeline-year { font-size: clamp(2.2rem, 12vw, 3.6rem); }
  .route-art i:nth-child(1) { width: 115vw; height: 60vw; top: 44%; right: 15%; }
  .route-art i:nth-child(2) { width: 88vw; height: 48vw; top: 53%; right: 18%; }
  .route-art i:nth-child(3) { left: 17%; top: 65%; box-shadow: 32vw -14vw 0 -1px var(--story-cream), 56vw 3vw 0 -1px var(--story-cream); }
  .value-list { grid-template-columns: 1fr; }
  .value-list article { min-height: 0; padding: .9rem 1rem; display: grid; grid-template-columns: 35px 1fr; column-gap: .6rem; }
  .value-list span { grid-row: span 2; }
  .value-list h3, .value-list p { margin: 0; }
  .identity-copy { grid-template-columns: 1fr; gap: 1rem; }
  .identity-name { font-size: clamp(2.4rem, 11vw, 3.25rem); }
  .generations-collage { height: min(430px, 110vw); }
  .generations-collage figure:first-child { width: 73%; border-radius: var(--story-radius); }
  .generations-collage figure:last-child { width: 52%; height: 55%; }
  .today-section { min-height: 560px; }
  .today-shade { background: linear-gradient(180deg, rgba(0,53,31,.12), rgba(0,53,31,.92) 76%); }
  .today-copy { padding-block: 6rem 3.6rem; }
  .today-copy > p:last-child { font-size: 1rem; }
  .story-finale { min-height: 530px; }
  .finale-content { padding-block: 3.5rem; }
  .finale-content h2 { font-size: clamp(2rem, 9vw, 3rem); }
}

@media (max-width: 360px) {
  .story-page { --story-shell: calc(100% - 1.5rem); }
  .story-brand span { display: none; }
  .story-hero h1 { font-size: 2.45rem; }
  .story-page h2 { font-size: 1.7rem; }
  .story-scroll-cue { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  .story-page *, .story-page *::before, .story-page *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .animations-ready [data-reveal] { opacity: 1; transform: none; }
  .animations-ready [data-media] img { clip-path: none; transform: none; }
  .animations-ready .story-hero-media img { animation: none; }
  .animations-ready [data-parallax] { transform: none; }
}