/* ancient.css  -  the look of ancientsex.com.
   Taken from the Aniwa Changemakers Summit site (warm dark earth, bone bands, terracotta, gold,
   Averia Serif Libre and Nunito Sans) and given original river and seal artwork.
   Fonts are served from grid/fonts (SIL Open Font License). Nothing loads from another site. */

@font-face{font-family:"Averia Serif Libre";font-style:normal;font-weight:400;font-display:swap;src:url("../../../fonts/averia-serif-libre-400.woff2") format("woff2")}
@font-face{font-family:"Averia Serif Libre";font-style:italic;font-weight:400;font-display:swap;src:url("../../../fonts/averia-serif-libre-400-italic.woff2") format("woff2")}
@font-face{font-family:"Averia Serif Libre";font-style:normal;font-weight:700;font-display:swap;src:url("../../../fonts/averia-serif-libre-700.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url("../../../fonts/nunito-sans-400.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url("../../../fonts/nunito-sans-600.woff2") format("woff2")}
@font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url("../../../fonts/nunito-sans-700.woff2") format("woff2")}
/* end fonts */

:root {
  --eg-bg:        #26201a;
  --eg-bg-alt:    #2e2820;
  --eg-surface:   #342d24;
  --eg-text:      #e9e1d0;
  --eg-muted:     #bfb4a0;
  --eg-heading:   #f6f0e3;
  --eg-accent:    #d4a24c;
  --eg-accent-ink:#1b1611;
  --eg-accent-2:  #b6552f;
  --eg-line:      rgba(226, 201, 158, .22);
  --eg-header-bg: rgba(27, 22, 17, .94);
  --eg-header-text:#efe7d3;
  --eg-inverse-bg:#1b1611;
  --eg-inverse-text:#efe7d3;
  --eg-footer-bg: #1b1611;
  --eg-footer-text:#cfc4ae;
  --eg-hero-overlay: rgba(27, 22, 17, .35);
  --eg-radius:    18px;
  --eg-shadow:    0 14px 40px rgba(0, 0, 0, .35);
  --eg-font-head: "Averia Serif Libre", Georgia, "Times New Roman", serif;
  --eg-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --eg-clay:      #8a3d22;
  --eg-terra:     #b6552f;
  --eg-sand:      #e2c99e;
  --eg-bone:      #efe7d3;
  --eg-gold-l:    #e9c77f;
  --eg-river:     #2a4a5c;
  --eg-measure:   34em;
}

/* base ------------------------------------------------------------------- */
body.eg { font-size: 1.125rem; line-height: 1.72; }
body.eg::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: url("../../../images/grain.png"); background-size: 160px; opacity: .55; mix-blend-mode: soft-light; }
body.eg > main, body.eg > footer { position: relative; z-index: 1; }
body.eg > .eg-header { position: sticky; z-index: 1000; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: .005em; }
.eg-title { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); }
.eg-eyebrow { font-family: var(--eg-font-body); font-size: .78rem; letter-spacing: .22em; color: var(--eg-accent); }
.eg-lead { color: var(--eg-muted); font-size: 1.2rem; max-width: var(--eg-measure); margin-left: auto; margin-right: auto; }
.eg-left .eg-lead, .eg-lead.eg-left { margin-left: 0; }
.eg-body, .eg-text p { max-width: var(--eg-measure); margin-left: auto; margin-right: auto; }
.eg-text.eg-left p { margin-left: 0; }
a { color: var(--eg-gold-l); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: #fff; }
.eg-sr, .eg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* buttons: gold primary, outlined secondary ---------------------------------- */
.eg-btn { border-radius: 999px; font-family: var(--eg-font-body); letter-spacing: .08em; text-decoration: none; }
.eg-btn-primary { background: var(--eg-accent); border-color: var(--eg-accent); color: var(--eg-accent-ink); }
.eg-btn-primary:hover, .eg-btn-primary:focus { background: var(--eg-gold-l); border-color: var(--eg-gold-l); color: var(--eg-accent-ink); filter: none; }
.eg-btn-ghost { color: var(--eg-bone); border-color: rgba(239, 231, 211, .55); }
.eg-btn-ghost:hover, .eg-btn-ghost:focus { background: rgba(239, 231, 211, .12); color: #fff; border-color: var(--eg-bone); }
.eg-btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

/* header ------------------------------------------------------------------ */
.eg-header { border-bottom: 1px solid var(--eg-line); box-shadow: none; }
.eg-header.is-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
.eg-brand { font-family: var(--eg-font-head); font-size: 1.5rem; letter-spacing: .03em; color: var(--eg-bone); }
.eg-brand-name::after { content: ""; display: inline-block; width: .5em; height: .5em; margin-left: .45em; border-radius: 50%; background: var(--eg-accent); vertical-align: .1em; }
.eg-nav a:not(.eg-btn) { color: var(--eg-header-text); text-decoration: none; }
.eg-nav a:not(.eg-btn):hover { color: var(--eg-gold-l); }
.eg-nav a.is-current { box-shadow: inset 0 -2px 0 var(--eg-accent); }
.eg-nav a.eg-btn { display: inline-block; width: auto; padding: .55rem 1.15rem; border: 2px solid transparent; border-radius: 999px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.eg-nav a.eg-btn-primary { background: var(--eg-accent); border-color: var(--eg-accent); color: var(--eg-accent-ink); }
.eg-nav a.eg-btn-primary:hover { background: var(--eg-gold-l); border-color: var(--eg-gold-l); color: var(--eg-accent-ink); }
.eg-nav a.eg-btn-ghost { background: transparent; border-color: rgba(239,231,211,.55); color: var(--eg-bone); }
.eg-nav a.eg-btn-ghost:hover { background: rgba(239,231,211,.12); color: #fff; }
.eg-nav .eg-nav-cta2 { margin-left: .6rem; }
.eg-nav .eg-nav-cta { margin-left: .5rem; }
@media (max-width: 960px) {
  .eg-nav a.eg-nav-cta2, .eg-nav a.eg-nav-cta { display: block; width: 100%; margin: .8rem 0 0; padding: .8rem 1rem; }
}

/* tones: default dark earth, alt deeper earth, dark night, bone, sand, accent clay */
.eg-section { padding: clamp(3.4rem, 2.2rem + 5vw, 6.5rem) 0; position: relative; }
.eg-tone-bone { --eg-text:#3a3026; --eg-muted:#5b4f40; --eg-heading:#26201a; --eg-accent:#8a3d22; --eg-line:rgba(38,32,26,.2); --eg-surface:#f6efde; background: var(--eg-bone); color: var(--eg-text); }
.eg-tone-bone a { color: #8a3d22; }
.eg-tone-bone a:hover { color: #5e2813; }
.eg-tone-bone .eg-btn-primary { background: #8a3d22; border-color: #8a3d22; color: #fff; }
.eg-tone-bone .eg-btn-primary:hover { background: #6e2f19; border-color: #6e2f19; color: #fff; }
.eg-tone-bone .eg-btn-ghost { color: #26201a; border-color: rgba(38,32,26,.5); }
.eg-tone-bone .eg-btn-ghost:hover { background: rgba(38,32,26,.08); color: #000; }
.eg-tone-sand { --eg-text:#3a2d1f; --eg-muted:#5b4a36; --eg-heading:#26201a; --eg-accent:#7a3419; --eg-line:rgba(38,32,26,.2); --eg-surface:#efdcb8; background: var(--eg-sand); color: var(--eg-text); }
.eg-tone-sand a { color: #7a3419; }
.eg-tone-alt { background: var(--eg-bg-alt); }
.eg-tone-dark { background: var(--eg-inverse-bg); }
.eg-tone-accent { background: var(--eg-clay); color: var(--eg-bone); }
.eg-tone-accent .eg-eyebrow { color: var(--eg-sand); }
.eg-tone-accent .eg-lead { color: #f2e6d0; }
.eg-tone-accent .eg-btn-primary { background: var(--eg-bone); border-color: var(--eg-bone); color: #5e2813; }
.eg-tone-accent .eg-btn-primary:hover { background: #fff; border-color: #fff; color: #5e2813; }
.eg-tone-accent .eg-btn-ghost { color: var(--eg-bone); border-color: rgba(239,231,211,.7); }
.eg-tone-accent a:not(.eg-btn) { color: #fff; }

/* band: the cylinder-seal frieze ----------------------------------------------- */
.eg-band { height: 64px; background-repeat: repeat-x; background-position: center; background-size: auto 100%; opacity: .9; background-color: transparent; border-top: 1px solid var(--eg-line); border-bottom: 1px solid var(--eg-line); background-color: #1b1611; }

/* scene: layered river hero ------------------------------------------------------ */
.eg-scene { min-height: min(92vh, 880px); align-items: flex-end; padding: 0; background: #1b1611; isolation: isolate; }
.eg-scene-layers { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.eg-scene-layer { position: absolute; left: 0; top: -4%; width: 100%; height: 108%; object-fit: cover; object-position: 50% 70%; will-change: transform; transform: scale(1.06); }
.eg-scene::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(27,22,17,.28) 0%, rgba(27,22,17,0) 30%, rgba(27,22,17,.12) 52%, rgba(27,22,17,.78) 100%); }
.eg-scene .eg-hero-in { z-index: 2; padding-top: 7rem; padding-bottom: clamp(3rem, 8vh, 6rem); }
.eg-scene .eg-hero-title { max-width: 14em; font-size: clamp(2.3rem, 1.2rem + 4.6vw, 4.6rem); line-height: 1.1; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.eg-scene .eg-hero-text { max-width: 30em; font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); text-shadow: 0 1px 14px rgba(0,0,0,.55); }
.eg-scene .eg-eyebrow { color: var(--eg-gold-l); }

/* pullquote ------------------------------------------------------------------------ */
.eg-pull { font-family: var(--eg-font-head); font-size: clamp(1.7rem, 1.1rem + 2.8vw, 3rem); line-height: 1.25; color: var(--eg-heading); max-width: 18em; margin: 0 auto 1.2rem; }
.eg-sec-pullquote .eg-body { color: var(--eg-muted); }

/* scroller: sideways scrolling region ----------------------------------------------- */
.eg-sec-scroller { overflow: hidden; }
.eg-sec-scroller .eg-head { margin-bottom: 1.6rem; }
.eg-scroller-view { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: .6rem max(20px, calc((100vw - var(--eg-wrap)) / 2 + 20px)) 1.4rem; scroll-padding-left: max(20px, calc((100vw - var(--eg-wrap)) / 2 + 20px)); scrollbar-width: thin; scrollbar-color: var(--eg-accent) transparent; }
.eg-scroller-view:focus-visible { outline-offset: -3px; }
.eg-scroller-track { display: flex; gap: 20px; width: max-content; }
.eg-panel { flex: 0 0 min(78vw, 330px); scroll-snap-align: start; display: flex; flex-direction: column; padding: 1.7rem 1.6rem 1.8rem; background: var(--eg-surface); border: 1px solid var(--eg-line); border-radius: var(--eg-radius); box-shadow: var(--eg-shadow); min-height: 10rem; }
.eg-tone-bone .eg-panel { box-shadow: 0 10px 30px rgba(60,40,20,.12); }
.eg-panel-art { width: 120px; margin: 0 0 1rem; }
.eg-panel-art img { width: 100%; height: auto; }
.eg-panel-kicker { font-size: .78rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--eg-accent); margin-bottom: .5rem; }
.eg-panel-title { font-size: 1.45rem; margin-bottom: .6rem; }
.eg-panel p { color: var(--eg-muted); margin: 0 0 .7rem; font-size: 1.02rem; }
.eg-scroller-ui { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.eg-scroller-btns { display: flex; gap: .6rem; }
.eg-scroller-btn { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--eg-line); background: transparent; color: var(--eg-heading); font: 700 1.2rem/1 var(--eg-font-body); cursor: pointer; transition: background-color .2s, border-color .2s; }
.eg-scroller-btn:hover:not(:disabled) { background: var(--eg-accent); border-color: var(--eg-accent); color: var(--eg-accent-ink); }
.eg-scroller-btn:disabled { opacity: .35; cursor: default; }
.eg-scroller:not(.is-scrollable) .eg-scroller-btns { display: none; }
.eg-scroller-hint { margin: 0; font-size: .95rem; color: var(--eg-muted); }

/* story: sticky picture beside scrolling steps ----------------------------------------- */
.eg-story { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.eg-story-art { display: none; }
.eg-story-steps { list-style: none; margin: 0; padding: 0; }
.eg-story-step { padding: 1.8rem 0 2.2rem; border-top: 1px solid var(--eg-line); }
.eg-story-inline { max-width: 220px; margin-bottom: 1rem; }
.eg-story-inline img { width: 100%; height: auto; }
.eg-story-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); margin-bottom: .6rem; }
.eg-story-step p { color: var(--eg-muted); max-width: 28em; font-size: 1.12rem; }
@media (min-width: 900px) {
  .eg-story { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 4rem; align-items: start; }
  .eg-story-art { display: block; position: sticky; top: calc(var(--eg-header-h) + 28px); }
  .eg-story-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 480px; }
  .eg-story-pic { position: absolute; inset: 0; opacity: 0; transform: translateY(14px) scale(.97); transition: opacity .6s var(--eg-ease), transform .6s var(--eg-ease); }
  .eg-story-pic.is-active { opacity: 1; transform: none; }
  .eg-story-pic img { width: 100%; height: 100%; object-fit: contain; }
  .eg-story-inline { display: none; }
  .eg-story-step { min-height: 58vh; display: flex; flex-direction: column; justify-content: center; opacity: .66; transition: opacity .5s; }
  .eg-story-step.is-current, .eg-story-step:first-child { opacity: 1; }
  .js .eg-story-step.is-current ~ .eg-story-step:first-child { opacity: 1; }
}

/* split and cards: soft earth, round corners ---------------------------------------- */
.eg-split-pic img { box-shadow: var(--eg-shadow); border-radius: var(--eg-radius); }
.eg-split-pic.eg-cover img { box-shadow: 0 24px 60px rgba(0,0,0,.5); border-radius: 6px; max-width: 420px; margin: 0 auto; }
.eg-bullets li::before { background: var(--eg-accent); }
.eg-card, .eg-quote { border-radius: var(--eg-radius); }
.eg-stat-n { color: var(--eg-accent); }
.eg-blockquote { max-width: 34em; margin: 1.2rem auto; padding: 1.2rem 1.6rem; border-left: 3px solid var(--eg-accent); background: rgba(212,162,76,.07); border-radius: 0 var(--eg-radius) var(--eg-radius) 0; text-align: left; }
.eg-blockquote p { font-family: var(--eg-font-head); font-size: 1.25rem; line-height: 1.55; color: var(--eg-heading); margin: 0 0 .9rem; }
.eg-blockquote p:last-child { margin: 0; }
.eg-note { color: var(--eg-muted); }
.eg-aside { max-width: 34em; margin: 0 auto; padding: 1.4rem 1.6rem; border: 1px dashed var(--eg-line); border-radius: var(--eg-radius); }

/* forms ----------------------------------------------------------------------------- */
.eg-form { max-width: 560px; margin: 0 auto; text-align: left; }
.eg-field { display: block; margin-bottom: 1.1rem; }
.eg-field > span, .eg-fieldset legend { display: block; margin-bottom: .35rem; font-weight: 600; font-size: .98rem; color: var(--eg-heading); }
.eg-field em { font-weight: 400; font-style: normal; color: var(--eg-muted); }
.eg-field input, .eg-field textarea, .eg-quiz-ta, .eg-quiz-other { width: 100%; padding: .8rem 1rem; font: inherit; color: var(--eg-heading); background: #1d1812; border: 1.5px solid rgba(226,201,158,.35); border-radius: 12px; }
.eg-tone-bone .eg-field input, .eg-tone-bone .eg-field textarea { background: #fffaf0; color: #26201a; border-color: rgba(38,32,26,.35); }
.eg-field input:focus, .eg-field textarea:focus, .eg-quiz-ta:focus, .eg-quiz-other:focus { outline: 3px solid var(--eg-accent); outline-offset: 1px; border-color: var(--eg-accent); }
.eg-field input[aria-invalid="true"] { border-color: #f0c27a; }
.eg-fieldset { border: 0; margin: 0 0 1.2rem; padding: 0; }
.eg-radio, .eg-check, .eg-quiz-opt { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.eg-radio { margin-bottom: .5rem; }
.eg-check { margin: 1.2rem 0 1.2rem; font-size: 1rem; }
.eg-radio input, .eg-check input, .eg-quiz-opt input { flex: none; width: 1.3rem; height: 1.3rem; margin-top: .22rem; accent-color: var(--eg-accent); }
.eg-err { margin: .2rem 0 .9rem; color: #f0c27a; font-weight: 600; font-size: .95rem; }
.eg-tone-bone .eg-err { color: #8a3d22; }
.eg-thanks { max-width: 560px; margin: 0 auto 1.4rem; padding: 1.2rem 1.4rem; border: 1px solid var(--eg-accent); border-radius: var(--eg-radius); background: rgba(212,162,76,.08); }
.eg-thanks p { margin: 0 0 .6rem; }
.eg-thanks p:last-child { margin: 0; }
.eg-connect .eg-head { max-width: 560px; margin-left: auto; margin-right: auto; }
.eg-connect .eg-note { text-align: center; }

/* quiz --------------------------------------------------------------------------------- */
.eg-quiz-head { margin-bottom: 2rem; }
.eg-fair { max-width: 34em; margin: 1.2rem auto 0; padding: 1rem 1.3rem; border: 1px solid var(--eg-line); border-radius: var(--eg-radius); color: var(--eg-text); font-size: 1.02rem; text-align: left; }
.eg-quiz { max-width: 680px; margin: 0 auto; }
.eg-quiz-card { background: var(--eg-surface); border: 1px solid var(--eg-line); border-radius: 22px; padding: clamp(1.4rem, 1rem + 2vw, 2.4rem); box-shadow: var(--eg-shadow); }
.eg-progress { height: 8px; border-radius: 99px; background: rgba(226,201,158,.18); overflow: hidden; }
.eg-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--eg-terra), var(--eg-accent)); border-radius: 99px; transition: width .4s var(--eg-ease); }
.eg-quiz-count { margin: .6rem 0 0; font-size: .85rem; color: var(--eg-muted); letter-spacing: .06em; }
.eg-quiz-stage-title { margin: .2rem 0 1rem; font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 700; color: var(--eg-accent); }
.eg-quiz-thanks { margin: 0 0 1rem; padding: .7rem 1rem; border-radius: 12px; background: rgba(212,162,76,.12); color: var(--eg-heading); }
.eg-quiz-q { font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); line-height: 1.3; margin: 0 0 .8rem; }
.eg-quiz-q:focus { outline: none; }
.eg-quiz-hint { margin: -.3rem 0 1rem; color: var(--eg-muted); font-size: .98rem; }
.eg-quiz-fs { border: 0; padding: 0; margin: 0 0 1rem; }
.eg-quiz-opt { padding: .85rem 1rem; margin-bottom: .6rem; min-height: 52px; align-items: center; border: 1.5px solid rgba(226,201,158,.3); border-radius: 14px; background: rgba(0,0,0,.12); transition: border-color .2s, background-color .2s; }
.eg-quiz-opt:hover { border-color: var(--eg-accent); }
.eg-quiz-opt:has(input:checked) { border-color: var(--eg-accent); background: rgba(212,162,76,.14); }
.eg-quiz-opt input { margin-top: 0; }
.eg-quiz-other { margin: 0 0 .8rem; }
.eg-quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.eg-quiz-result .eg-quiz-q { margin-bottom: 1rem; }
.eg-quiz-sending, .eg-quiz-nojs { text-align: center; color: var(--eg-muted); }
.eg-quiz-privacy { text-align: center; margin-top: 1.4rem; }

/* footer ------------------------------------------------------------------------------ */
.eg-footer { background: var(--eg-footer-bg); color: var(--eg-footer-text); border-top: 1px solid var(--eg-line); }
.eg-footer a { color: var(--eg-sand); }
.eg-footer .eg-brand { color: var(--eg-bone); }
.eg-foot-h { font-family: var(--eg-font-body); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; color: var(--eg-accent); }
.eg-foot-base { border-top: 1px solid var(--eg-line); }

/* sticky action bar on phones ---------------------------------------------------------- */
.eg-actionbar { display: none; }
@media (max-width: 960px) {
  .eg-actionbar { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; padding: .6rem 14px calc(.6rem + env(safe-area-inset-bottom, 0px)); background: rgba(27,22,17,.96); border-top: 1px solid var(--eg-line); }
  .eg-actionbar .eg-btn { flex: 1 1 0; padding: .7rem .4rem; font-size: .76rem; letter-spacing: .05em; }
  .eg-footer { padding-bottom: 4.6rem; }
}

/* motion: slow fades only; none when the visitor asks for less ------------------------ */
.eg-reveal { opacity: 0; transform: translateY(14px); transition: opacity .8s var(--eg-ease), transform .8s var(--eg-ease); }
.eg-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .eg-reveal, .eg-story-pic, .eg-progress span { transition: none; }
  .eg-scene-layer { transform: none !important; }
}

/* drawn art has no card around it */
.eg-split-pic img[src*=".svg"] { box-shadow: none; border-radius: 0; max-width: 420px; margin: 0 auto; }