/* ─── HODA'S MAP (papyrus scroll) ──────────────── */
.route { --u: 0; --ink: #2b2118; --red: #a8361b; --limestone: #e4dccb; position: relative; height: 520vh; background: var(--limestone); color: var(--ink); overflow-x: clip; }
.route__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: center; padding: 96px 56px 40px; overflow: hidden; }
/* a carved limestone wall: glyphs debossed into the stone */
.route__wall { position: absolute; inset: -20px; overflow: hidden; font-family: var(--glyph); font-size: 64px; line-height: 108px; letter-spacing: 18px; word-break: break-all; color: var(--limestone); text-shadow: 1px 1px 0 rgba(255,255,255,.9), -1px -1px 1px rgba(90,70,40,.45), -2px -2px 3px rgba(90,70,40,.15); background: repeating-linear-gradient(transparent 0 104px, rgba(90,70,40,.12) 104px 105px, rgba(255,255,255,.5) 105px 106px, transparent 106px 108px); pointer-events: none; }
.route__wall::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(228,220,203,0) 40%, rgba(228,220,203,.75) 62%); }
.scroll { position: relative; justify-self: center; width: min(100%, calc((100svh - 150px) * 720 / 680)); aspect-ratio: 720 / 680; filter: drop-shadow(0 22px 26px rgba(70,45,15,.28)) drop-shadow(0 2px 3px rgba(70,45,15,.25)); }
.scroll__sheet { position: absolute; inset: 0; background-size: 100% 100%; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; clip-path: inset(0 calc((1 - var(--u)) * 50% - 2px)); }
/* the rolled-up ends of the papyrus */
.scroll__roll { position: absolute; top: -6px; bottom: -6px; width: 22px; border-radius: 11px / 8px; z-index: 2; background: linear-gradient(90deg, #6e5226, #b8975c 18%, #e6d3a0 38%, #f2e4bb 50%, #c9ab6e 72%, #7a5a2a); box-shadow: 0 6px 10px rgba(70,45,15,.3); }
.scroll__roll::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(transparent 0 3px, rgba(110,82,38,.12) 3px 4px); }
.scroll__roll--l { left: calc((1 - var(--u)) * 50% - 14px); }
.scroll__roll--r { right: calc((1 - var(--u)) * 50% - 14px); }

.map { position: absolute; inset: 0; width: 100%; height: 100%; }
.map text { fill: var(--ink); word-spacing: 4px; }
.map__land { fill: url(#stipple); fill-opacity: .16; }
.map__land, .map__stipple { color: var(--ink); }
.map pattern circle { fill: var(--ink); }
.map__coast { fill: none; stroke: var(--ink); stroke-width: 1.1; stroke-linejoin: round; opacity: .85; }
.map__wash { fill: none; stroke: #5c7f86; stroke-width: 18; stroke-linejoin: round; opacity: .06; }
.map__wash--2 { stroke-width: 6; opacity: .1; }
.map__border { fill: none; stroke: var(--ink); stroke-width: .9; stroke-dasharray: 1 4; stroke-linecap: round; opacity: .55; }
.map__wave { fill: none; stroke: var(--ink); stroke-width: .7; opacity: .4; }
.map__nile { fill: none; stroke: var(--ink); stroke-width: 1.3; stroke-linecap: round; opacity: .8; }
.map__nile--wash { stroke: #4f8a92; stroke-width: 6; opacity: .22; }
.map__nile--thin { stroke-width: .9; }
.map__lake { stroke-width: 12; opacity: .25; }
.map__sea { font-family: 'Jost', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .5em; opacity: .7; }
.map__region { font-family: 'Cormorant Garamond', serif; font-size: 17px; letter-spacing: .32em; text-transform: uppercase; opacity: .5; }
.map__region--sm { font-size: 12px; }
.map__water { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 15px; fill: #2f5f66 !important; letter-spacing: .08em; text-transform: none; }
.map__place { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 14px; opacity: .8; text-transform: none; }
.map__dot { fill: var(--ink); }
.map__glyph { font-family: var(--glyph); font-size: 24px; opacity: .65; }
.map__glyph--red { fill: var(--red) !important; opacity: .8; }
.map__title rect { fill: none; stroke: var(--ink); stroke-width: .8; }
.map__title rect + rect { stroke-width: 1.6; }
.map__title path { stroke: var(--ink); stroke-width: 1.6; }
.map__title .map__glyph { font-size: 28px; opacity: .85; }
.map__scale rect { fill: var(--ink); }
.map__scale .map__scale-o { fill: none; stroke: var(--ink); stroke-width: .8; }
.map__tiny { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 8px; letter-spacing: .2em; opacity: .7; }
.map__legend .map__place { font-size: 13px; }
.map__mask { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; }
.map__route { fill: none; stroke: var(--red); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.map__route--fly { stroke-dasharray: .1 6; stroke-width: 2.6; }
.map__stop circle { fill: var(--ink); transition: fill .4s; }
.map__stop .map__ring { fill: none; stroke: var(--ink); stroke-width: .8; transition: stroke .4s; }
.map__stop.is-on circle { fill: var(--red); }
.map__stop.is-on .map__ring { fill: none; stroke: var(--red); }
.map__num { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 12px; letter-spacing: .15em; fill: var(--red) !important; }
.map__stopname { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 19px; }
.map__compass circle { fill: none; stroke: var(--ink); stroke-width: .7; }
.map__compass path { fill: none; stroke: var(--ink); stroke-width: .8; stroke-linejoin: round; }
.map__compass .map__compass-d { opacity: .6; }
.map__compass .map__compass-n { fill: var(--red); stroke: var(--red); }
.map__compass text { font-family: 'Cormorant Garamond', serif; font-size: 14px; }
.map__laila { opacity: 0; transition: opacity .4s; }
.map__laila.is-on { opacity: 1; }
.map__laila path { fill: var(--red); }
.map__laila circle { fill: #efe2c4; stroke: var(--red); stroke-width: 1.5; filter: drop-shadow(0 2px 2px rgba(60,30,0,.3)); }

/* Hoda's panel: set like an invitation card */
.laila { position: relative; display: flex; flex-direction: column; gap: 22px; }
.laila__eyebrow { display: flex; align-items: center; gap: 12px; margin: 0; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 12px; letter-spacing: .4em; word-spacing: 4px; color: var(--ink-soft); }
.laila__eyebrow::before, .laila__eyebrow::after { content: ''; width: 28px; height: 1.5px; background: var(--accent); }
.laila__eyebrow span { font-family: 'Cormorant Garamond', serif; font-size: 18px; letter-spacing: 0; }
.laila__head { display: flex; align-items: flex-end; gap: 20px; }
.laila__face { width: 86px; height: 108px; flex-shrink: 0; border-radius: 43px 43px 2px 2px; overflow: hidden; border: 1px solid var(--ink); padding: 4px; background: var(--limestone); }
.laila__face img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; border-radius: 39px 39px 0 0; background: radial-gradient(circle at 50% 35%, #f6ecd6, #e2cfa6); }
.laila__name { display: block; margin: 0; font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400; font-size: 64px; line-height: .9; letter-spacing: 0; text-transform: none; }
.laila__role { display: block; margin-top: 10px; font-family: 'Jost', sans-serif; font-weight: 400; font-size: 10px; letter-spacing: .3em; word-spacing: 4px; color: var(--ink-faint); }
.laila__say { position: relative; min-height: 8.6em; margin: 0; padding: 18px 0 0 34px; border-top: 1px solid var(--line); font-family: 'Cormorant Garamond', serif; font-size: 20px; line-height: 1.45; word-spacing: 2px; text-transform: none; color: var(--ink); }
.laila__say::before { content: '\201C'; position: absolute; left: 0; top: 6px; font-size: 54px; line-height: 1; color: var(--accent); }
.laila__leg { min-height: 1.5em; font-family: 'Jost', sans-serif; font-size: 10px; letter-spacing: .25em; word-spacing: 4px; color: var(--accent); }
.laila__stops { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.laila__stops li { display: flex; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); font-family: 'Cormorant Garamond', serif; font-size: 18px; text-transform: none; color: var(--ink-faint); transition: color .3s; }
.laila__stops b { width: 2.2em; font-weight: 500; font-size: 13px; letter-spacing: .1em; }
.laila__stops li.is-done { color: var(--ink-soft); }
.laila__stops li.is-on { color: var(--ink); font-style: italic; }
.laila__stops li.is-done b, .laila__stops li.is-on b { color: var(--accent); }
.laila__cta { align-self: flex-start; padding: 14px 28px; border-radius: 999px; background: var(--accent); color: #fff; font-family: 'Jost', sans-serif; font-size: 11px; letter-spacing: .3em; word-spacing: 4px; text-decoration: none; transition: background .3s; }
.laila__cta:hover { background: var(--ink); }

@media (max-width: 900px) {
  .route__pin { grid-template-columns: 1fr; align-content: start; gap: 18px; padding: 76px 16px 16px; }
  .scroll { width: min(100%, calc((100svh - 380px) * 720 / 680)); }
  .laila { gap: 10px; }
  .laila__eyebrow { display: none; }
  .laila__head { align-items: center; gap: 14px; }
  .laila__face { width: 44px; height: 56px; padding: 3px; }
  .laila__name { font-size: 36px; }
  .laila__role { margin-top: 4px; }
  .laila__say { min-height: 6.2em; padding: 10px 0 0 24px; font-size: 16px; line-height: 1.35; }
  .laila__say::before { font-size: 38px; top: 4px; }
  .route__wall { font-size: 44px; line-height: 76px; }
  .route__wall::after { background: linear-gradient(rgba(228,220,203,.3), rgba(228,220,203,.92) 55%); }
  .laila__stops, .laila__cta { display: none; }
}