/* Egy Kemet Tours — "portrait collage" direction (owner decision 2026-09-14).
 * Palette from tokens.css (navy paper, sky-blue ink, gold for CTAs). What makes this layout its own thing:
 * left-aligned brand + framed pill menu, a tilted three-photo collage instead of a banner hero, cards with the
 * photo on top and a text panel below, dotted gold section rules, larger radii, and a timeline itinerary. */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--body-weight); line-height: 1.65; -webkit-font-smoothing: antialiased; }
main { min-width: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { color: inherit; font: inherit; }
button, summary, select { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; color: var(--color-ink-2); font-family: var(--font-display); font-weight: 400; letter-spacing: 0; line-height: 1.12; overflow-wrap: anywhere; }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding-inline-start: 1.25rem; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.icon { width: 1.125em; height: 1.125em; flex: none; fill: currentColor; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; inset-block-start: .5rem; inset-inline-start: 1rem; z-index: var(--z-tooltip); padding: .75rem 1rem; transform: translateY(-180%); background: var(--color-accent); color: var(--color-accent-ink); border-radius: 1rem; font-weight: 700; }
.skip-link:focus { transform: none; }

/* Layout */
:root { --r-lg: 1.25rem; --r-md: .875rem; --r-sm: .5rem; }
.container { width: min(100% - 2 * var(--page-gutter), var(--content-max)); margin-inline: auto; }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.section.tight { padding-block: clamp(2rem, 4vw, 3rem); }
.section.paper-2 { background: var(--color-paper-2); }
.section + .section:not(.paper-2) { border-block-start: 2px dotted color-mix(in oklab, var(--color-accent) 55%, transparent); }
.head { display: grid; gap: .5rem; max-width: 62ch; margin-block-end: 2.25rem; }
.head.center { margin-inline: auto; text-align: center; }
.head.split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem; }
.eyebrow, .head > span { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-accent-strong); font-size: var(--text-sm); font-weight: 600; }
.eyebrow::before, .head > span::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--color-accent) 25%, transparent); }
.head.center > span { justify-content: center; }
.lead { font-size: var(--text-md); }
.muted { color: var(--color-muted); }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }

/* Buttons + pills */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 3rem; padding: .75rem 1.4rem; border: 0; border-radius: 999px; background: var(--color-accent); color: var(--color-accent-ink); font-size: var(--text-sm); font-weight: 700; line-height: 1; white-space: nowrap; box-shadow: 0 .5rem 1.25rem -.75rem color-mix(in oklab, var(--color-accent) 70%, black); transition: transform .15s var(--ease-out), background-color .2s, box-shadow .2s; }
.btn:hover { background: var(--color-accent-strong); transform: translateY(-1px); }
.btn.ghost { background: transparent; color: var(--color-ink-2); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
.btn.ghost:hover { background: var(--color-paper-3); }
.btn.whatsapp { background: var(--color-whatsapp); color: #fff; box-shadow: 0 .5rem 1.25rem -.75rem black; }
.btn.small { min-height: 2.25rem; padding: .5rem 1rem; font-size: var(--text-xs); }
.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; background: color-mix(in oklab, var(--color-paper-3) 80%, transparent); color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 600; }
.pill.gold { background: color-mix(in oklab, var(--color-accent) 18%, transparent); color: var(--color-accent-strong); }
.pill.price { background: var(--color-accent); color: var(--color-accent-ink); font-weight: 800; }

/* Header: brand left, framed menu, WhatsApp */
.top { position: sticky; inset-block-start: 0; z-index: var(--z-sticky); background: color-mix(in oklab, var(--color-paper) 88%, transparent); backdrop-filter: blur(12px); transition: box-shadow .2s; }
.top.scrolled { box-shadow: 0 .5rem 1.5rem -.75rem black; }
.top-inner { display: flex; align-items: center; gap: 1rem; padding-block: .75rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; margin-inline-end: auto; color: var(--color-ink-2); }
.brand img { width: 3rem; height: 3rem; border-radius: .75rem; object-fit: cover; background: #fff; box-shadow: 0 0 0 2px var(--color-accent); }
.brand b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1; }
.brand small { display: block; margin-block-start: .2rem; color: var(--color-muted); font-size: .7rem; }
.nav { display: none; }
.nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: .3rem; border: 1.5px solid var(--color-rule-2); border-radius: 999px; }
.nav a { display: inline-block; padding: .55rem 1rem; border-radius: 999px; color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; transition: background-color .2s, color .2s; }
.nav a:hover { background: var(--color-paper-3); color: var(--color-ink-2); }
.nav a[aria-current="page"] { background: var(--color-accent); color: var(--color-accent-ink); }
.actions { display: flex; align-items: center; gap: .5rem; }
.actions .btn.whatsapp span { display: none; }
.nav-toggle { display: grid; place-content: center; gap: .3rem; width: 3rem; height: 3rem; border: 1.5px solid var(--color-rule-2); border-radius: 999px; background: transparent; color: var(--color-ink-2); }
.nav-toggle span { width: 1.1rem; height: 2px; background: currentColor; transition: transform .25s, opacity .15s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(.38rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.38rem) rotate(-45deg); }
.drawer { position: fixed; inset: 0; z-index: var(--z-modal); display: none; background: color-mix(in oklab, var(--color-paper) 97%, transparent); padding: 6rem var(--page-gutter) 2rem; overflow: auto; }
.drawer[data-open="true"] { display: block; }
.drawer ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.drawer a { display: block; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--color-paper-2); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-lg); }
.drawer .drawer-contact { margin-block-start: 1.5rem; display: grid; gap: .5rem; }

/* Breadcrumbs */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: .4rem; color: var(--color-muted); font-size: var(--text-xs); }
.breadcrumbs a:hover { color: var(--color-ink-2); }
.breadcrumbs span[aria-current] { color: var(--color-ink); }

/* Photo frames — portrait first */
.frame { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--color-paper-3); }
.frame img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 40%); }
.frame.card { aspect-ratio: var(--ratio-card); }
.frame.tile { aspect-ratio: var(--ratio-tile); }
.frame.post { aspect-ratio: var(--ratio-post); }
.frame.hero-landscape { aspect-ratio: var(--ratio-hero-landscape); }

/* Collage: three portrait photos, staggered and slightly tilted, with a dotted gold halo */
.collage { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 1 / 1; margin-inline: auto; }
.collage::before { content: ""; position: absolute; inset: 6% 4%; border: 2px dotted color-mix(in oklab, var(--color-accent) 60%, transparent); border-radius: 50%; transform: rotate(-8deg); }
.collage .frame { position: absolute; aspect-ratio: 3 / 4; box-shadow: 0 1.5rem 3rem -1.25rem black, 0 0 0 4px var(--color-paper), 0 0 0 5px color-mix(in oklab, var(--color-accent) 50%, transparent); }
.collage .frame:nth-child(1) { width: 52%; inset-inline-start: 0; inset-block-start: 6%; transform: rotate(-5deg); z-index: 2; }
.collage .frame:nth-child(2) { width: 44%; inset-inline-end: 2%; inset-block-start: 0; transform: rotate(4deg); z-index: 1; }
.collage .frame:nth-child(3) { width: 40%; inset-inline-end: 12%; inset-block-end: 0; transform: rotate(-2deg); z-index: 3; }
.collage.compact { max-width: 26rem; }

/* Ornate frame: double gold hairline with corner ties — the site's signature card border */
.ornate { position: relative; border: 1px solid color-mix(in oklab, var(--color-accent) 70%, transparent); box-shadow: inset 0 0 0 5px var(--color-paper-2), inset 0 0 0 6px color-mix(in oklab, var(--color-accent) 55%, transparent), 0 1rem 2rem -1.25rem black; }
.ornate::before, .ornate::after { content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border: 2px solid var(--color-accent-strong); pointer-events: none; z-index: 2; }
.ornate::before { inset-block-start: .55rem; inset-inline-start: .55rem; border-inline-end: 0; border-block-end: 0; border-start-start-radius: .35rem; }
.ornate::after { inset-block-end: .55rem; inset-inline-end: .55rem; border-inline-start: 0; border-block-start: 0; border-end-end-radius: .35rem; }
.ornate:hover { box-shadow: inset 0 0 0 5px var(--color-paper-2), inset 0 0 0 6px var(--color-accent), 0 1.5rem 2.5rem -1.25rem black; }

/* Trip card: photo on top, text panel below */
.trip-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--color-paper-2); box-shadow: 0 1rem 2rem -1.25rem black; overflow: hidden; padding: .55rem; color: var(--color-ink); transition: transform .25s var(--ease-out), box-shadow .25s; }
.trip-card:hover { transform: translateY(-4px); box-shadow: 0 1.5rem 2.5rem -1.25rem black; }
.trip-card .frame { border-radius: calc(var(--r-lg) - .45rem); aspect-ratio: var(--ratio-card); }
.trip-card img { transition: transform .5s var(--ease-out); }
.trip-card:hover img { transform: scale(1.04); }
.trip-card .pill.price { position: absolute; inset-inline-end: .75rem; inset-block-end: .75rem; }
.trip-card .badge { position: absolute; inset-inline-start: .75rem; inset-block-start: .75rem; }
.trip-card .body { display: grid; gap: .4rem; padding: 1rem 1.1rem 1.1rem; border-block-start: 2px dotted color-mix(in oklab, var(--color-accent) 50%, transparent); }
.trip-card .eyebrow { font-size: var(--text-xs); }
.trip-card h3 { font-size: var(--text-md); line-height: 1.25; text-wrap: balance; }
.trip-card .meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .75rem; color: var(--color-muted); font-size: var(--text-xs); }
.trip-card .meta .icon { color: var(--color-accent); }
.trip-card .book { margin-block-start: .35rem; color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: 700; }

/* Destination tile: polaroid — photo with a mat and caption under it */
.dest-tile { display: grid; gap: .6rem; padding: .6rem .6rem .9rem; border-radius: var(--r-md); background: var(--color-paper-2); box-shadow: 0 .75rem 1.5rem -1rem black; color: var(--color-ink-2); transition: transform .25s var(--ease-out); }
.dest-tile:hover { transform: rotate(-1.5deg) translateY(-3px); }
.dest-tile .frame { aspect-ratio: var(--ratio-tile); border-radius: var(--r-sm); }
.dest-tile .body { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; padding-inline: .25rem; }
.dest-tile h3 { font-size: var(--text-md); }
.dest-tile .count { color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: 700; }

/* Category card: portrait photo left, copy right */
.cat-tile { display: grid; grid-template-columns: 38% 1fr; gap: 1rem; align-items: center; padding: 1rem; border-radius: var(--r-lg); background: var(--color-paper-2); color: var(--color-ink); box-shadow: 0 .75rem 1.5rem -1rem black; transition: transform .25s var(--ease-out); }
.cat-tile:hover { transform: translateY(-3px); }
.cat-tile .frame { aspect-ratio: 3 / 4; border-radius: var(--r-md); }
.cat-tile .body { display: grid; gap: .35rem; padding-inline-end: .5rem; }
.cat-tile h3 { font-size: var(--text-lg); }
.cat-tile .link { color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: 700; }

/* Post card */
.post-card { display: grid; gap: .6rem; color: var(--color-ink-2); }
.post-card .frame { aspect-ratio: var(--ratio-post); border-radius: var(--r-md); }
.post-card time { color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: 600; }
.post-card h3 { font-size: var(--text-md); }
.post-card p { color: var(--color-ink); font-size: var(--text-sm); }

/* Rails */
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .25rem .25rem 1rem; scrollbar-width: thin; scrollbar-color: var(--color-rule-2) transparent; }
.rail > * { scroll-snap-align: start; }

/* Home hero: compact copy, then a three-card slider (featured tours) */
.hero { position: relative; padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset-block-end: -30%; inset-inline-start: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--color-accent) 14%, transparent), transparent); pointer-events: none; }
.hero .inner { position: relative; z-index: 1; display: grid; gap: 2rem; }
.hero .copy { display: grid; gap: 1rem; max-width: 46rem; }
.hero h1 { text-wrap: balance; }
.hero .rotator p { margin: 0; font-size: var(--text-md); }
.hero .rotator p[hidden] { display: none; }
.hero .btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.hero .stats { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-block-start: .25rem; }
.hero .stats div { display: grid; }
.hero .stats strong { color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-xl); font-weight: 400; line-height: 1; }
.hero .stats span { color: var(--color-muted); font-size: var(--text-xs); }
.hero .dots { display: flex; gap: .4rem; }
.hero .dots button { width: 1.6rem; height: .3rem; padding: 0; border: 0; border-radius: 999px; background: var(--color-rule-2); }
.hero .dots button[aria-current="true"] { background: var(--color-accent); }
.slider { position: relative; }
.slider .track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem 1rem; scrollbar-width: none; }
.slider .track::-webkit-scrollbar { display: none; }
.slider .track > * { scroll-snap-align: start; }
.slider .arrows { display: flex; justify-content: flex-end; gap: .5rem; margin-block-end: .5rem; }
.slider .arrows button { display: grid; place-content: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--color-rule-2); border-radius: 50%; background: transparent; color: var(--color-ink-2); transition: background-color .2s, color .2s; }
.slider .arrows button:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.slider .arrows .icon { width: 1.1rem; height: 1.1rem; }
.hero .slider .trip-card .frame { aspect-ratio: 4 / 5; }
@media (max-width: 64em) { .slider .track { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (max-width: 40em) { .slider .track { grid-auto-columns: 86%; } }
/* Hero category carousel: a looping, auto-moving track of four category cards (three visible on desktop). The JS
   clones the cards on both sides and slides the track with transform; without JS it is a plain horizontal scroller. */
.carousel { position: relative; min-width: 0; --carousel-gap: 1.25rem; --carousel-cols: 3; } /* min-width: 0 — the cloned track must not stretch the grid column */
.carousel .arrows { display: flex; justify-content: flex-end; gap: .5rem; margin-block-end: .5rem; }
.carousel .arrows button { display: grid; place-content: center; width: 2.75rem; height: 2.75rem; border: 1.5px solid var(--color-rule-2); border-radius: 50%; background: transparent; color: var(--color-ink-2); transition: background-color .2s, color .2s; }
.carousel .arrows button:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.carousel .arrows .icon { width: 1.1rem; height: 1.1rem; }
.carousel .viewport { overflow-x: auto; scroll-snap-type: x mandatory; padding: .5rem .25rem 1rem; margin-inline: -.25rem; scrollbar-width: none; }
.carousel .viewport::-webkit-scrollbar { display: none; }
.carousel.is-ready .viewport { overflow: hidden; scroll-snap-type: none; }
.carousel .track { display: flex; gap: var(--carousel-gap); will-change: transform; }
.carousel .track > * { flex: 0 0 calc((100% - (var(--carousel-cols) - 1) * var(--carousel-gap)) / var(--carousel-cols)); scroll-snap-align: start; }
.cat-card { display: grid; grid-template-rows: auto 1fr; border-radius: var(--r-lg); background: var(--color-paper-2); box-shadow: 0 1rem 2rem -1.25rem black; overflow: hidden; padding: .55rem; color: var(--color-ink); transition: transform .25s var(--ease-out), box-shadow .25s; }
.cat-card:hover { transform: translateY(-4px); box-shadow: 0 1.5rem 2.5rem -1.25rem black; }
.cat-card .frame { border-radius: calc(var(--r-lg) - .45rem); aspect-ratio: 4 / 5; }
.cat-card img { transition: transform .5s var(--ease-out); }
.cat-card:hover img { transform: scale(1.04); }
.cat-card .badge { position: absolute; inset-inline-start: .75rem; inset-block-start: .75rem; }
.cat-card .body { display: grid; gap: .4rem; padding: 1rem 1.1rem 1.1rem; border-block-start: 2px dotted color-mix(in oklab, var(--color-accent) 50%, transparent); }
.cat-card .eyebrow { font-size: var(--text-xs); }
.cat-card h3 { font-size: var(--text-lg); line-height: 1.2; text-wrap: balance; }
.cat-card .book { margin-block-start: .35rem; color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: 700; }
@media (max-width: 64em) { .carousel { --carousel-cols: 2; } }
@media (max-width: 40em) { .carousel, .hero .carousel { --carousel-cols: 1.15; } }
/* Desktop hero: the copy spreads into two columns (headline | text + buttons + stats) so it stays short, and the
   full-width carousel below shows four cards (owner request 2026-09-15) with the photos still above the fold. */
.hero .copy .lead, .hero .copy .aside { display: grid; gap: 1rem; }
@media (min-width: 64em) {
  .hero .copy { max-width: none; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
  .hero .carousel { --carousel-cols: 4; }
}

/* Search */
.search { display: grid; gap: .75rem; padding: 1rem; border-radius: var(--r-lg); background: var(--color-paper-2); box-shadow: 0 1rem 2rem -1rem black, inset 0 0 0 1px var(--color-rule); }
.field { display: grid; gap: .3rem; }
.field label { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
.field input, .field select, .field textarea { min-height: 3rem; padding: .5rem .9rem; border: 1.5px solid var(--color-rule); border-radius: var(--r-md); background: var(--color-paper); color: var(--color-ink-2); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--color-accent); outline: none; }
.field textarea { min-height: 8rem; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--color-muted); }

/* USPs: icon in a dotted gold ring */
.usp { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; padding: 1.1rem; border-radius: var(--r-md); background: color-mix(in oklab, var(--color-paper-3) 55%, transparent); }
.usp .ring { display: grid; place-content: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px dotted var(--color-accent); color: var(--color-accent-strong); }
.usp .ring .icon { width: 1.4rem; height: 1.4rem; }
.usp h3 { font-size: var(--text-md); }
.usp p { color: var(--color-ink); font-size: var(--text-sm); }

/* Gallery: uniform square tiles (photos are a mix of portrait and landscape) */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.gallery a { display: block; aspect-ratio: 1 / 1; border-radius: var(--r-md); overflow: hidden; background: var(--color-paper-3); }
.gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .5s var(--ease-out); }
.gallery a:hover img { transform: scale(1.03); }

/* Contact band + form */
.contact-band { display: grid; gap: 2rem; align-items: start; }
.contact-band .details { display: grid; gap: .75rem; }
.contact-band .details a, .contact-band .details span { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-ink-2); }
.contact-band .details .icon { color: var(--color-accent); }
.form { display: grid; gap: .75rem; padding: 1.25rem; border-radius: var(--r-lg); background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.form .row { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.form .note { color: var(--color-muted); font-size: var(--text-xs); }
.hp { position: absolute; left: -9999px; }

/* Footer: boxed columns */
.foot { margin-block-start: clamp(3rem, 7vw, 6rem); padding-block: 2.5rem 1.25rem; background: var(--color-paper-2); }
.foot-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.foot-grid > div { padding: 1.1rem; border-radius: var(--r-md); background: color-mix(in oklab, var(--color-paper) 55%, transparent); }
.foot h4 { margin-block-end: .6rem; color: var(--color-accent-strong); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700; }
.foot h4.follow { margin-block-start: 1rem; }
.foot ul { list-style: none; padding: 0; display: grid; gap: .3rem; font-size: var(--text-sm); }
.foot a:hover { color: var(--color-ink-2); }
.foot .social { display: flex; gap: .5rem; }
.foot .social a { display: grid; place-content: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--color-paper-3); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; margin-block-start: 1.5rem; padding-block-start: 1rem; border-block-start: 2px dotted color-mix(in oklab, var(--color-accent) 40%, transparent); color: var(--color-muted); font-size: var(--text-xs); }

/* WhatsApp FAB */
.fab { position: fixed; inset-inline-end: 1rem; inset-block-end: 1rem; z-index: var(--z-toast); display: inline-flex; align-items: center; gap: .5rem; min-height: 3.25rem; padding: .75rem 1rem; border-radius: 999px; background: var(--color-whatsapp); color: #fff; font-weight: 700; box-shadow: 0 1rem 2rem -.75rem black; }
.fab .icon { width: 1.5rem; height: 1.5rem; }
.fab span { display: none; }

/* Trip page */
.trip-hero { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2rem, 4vw, 3rem); }
.trip-hero .split { display: grid; gap: 2rem; align-items: center; }
.trip-hero .copy { display: grid; gap: 1rem; }
.trip-hero .tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.trip-hero .btns { display: flex; flex-wrap: wrap; gap: .75rem; }
.trip-hero .media { order: -1; }
.trip-hero.landscape .media .frame { aspect-ratio: var(--ratio-hero-landscape); box-shadow: 0 1.5rem 3rem -1.25rem black; }
.facts { display: flex; flex-wrap: wrap; gap: .5rem; }
.facts div { display: grid; gap: .1rem; padding: .6rem .9rem; border-radius: var(--r-md); background: color-mix(in oklab, var(--color-paper-3) 60%, transparent); min-width: 7rem; }
.facts span { color: var(--color-muted); font-size: .7rem; font-weight: 600; }
.facts strong { color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-md); font-weight: 400; }
.trip-nav { position: sticky; inset-block-start: 4.75rem; z-index: var(--z-raised); padding-block: .5rem; background: color-mix(in oklab, var(--color-paper) 90%, transparent); backdrop-filter: blur(8px); }
.trip-nav .tabs { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; border: 1.5px solid var(--color-rule-2); border-radius: 999px; width: max-content; max-width: 100%; scrollbar-width: none; }
.trip-nav a { flex: none; padding: .5rem .9rem; border-radius: 999px; color: var(--color-ink); font-size: var(--text-xs); font-weight: 700; }
.trip-nav a.active, .trip-nav a:hover { background: var(--color-accent); color: var(--color-accent-ink); }
.trip-body { display: grid; gap: 2.5rem; padding-block: 2rem 3rem; }
.trip-main { display: grid; gap: 3rem; min-width: 0; }
.trip-main section { display: grid; gap: 1rem; scroll-margin-block-start: 9rem; }
.prose { max-width: var(--reading-max); }
.prose p + p, .prose ul, .prose ol, .prose h2, .prose h3, .prose figure, .prose table, .prose blockquote { margin-block-start: 1rem; }
.prose h2 { font-size: var(--text-xl); }
.prose h3 { font-size: var(--text-md); }
.prose a { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: .15em; }
.prose img { border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.prose td, .prose th { padding: .5rem .75rem; border: 1px solid var(--color-rule); text-align: left; }
.prose blockquote { padding: .75rem 1rem; border-inline-start: 3px solid var(--color-accent); border-radius: var(--r-sm); background: var(--color-paper-2); color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-md); }
.prose iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; width: 100%; border: 0; border-radius: var(--r-md); }
.highlights { display: grid; gap: .7rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.highlights li { position: relative; padding: .8rem 1rem .8rem 1.4rem; border-block-start: 1px solid var(--color-rule-2); color: var(--color-ink-2); }
.highlights li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 1.35rem; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent); }
/* Itinerary timeline */
.timeline { padding-inline-start: 1.5rem; border-inline-start: 2px dotted var(--color-accent); }
.timeline details { position: relative; padding: .25rem 0 1.25rem 1rem; }
.timeline details::before { content: ""; position: absolute; inset-inline-start: calc(-1.5rem - 7px); inset-block-start: .9rem; width: 12px; height: 12px; border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px var(--color-paper); }
.timeline summary { display: grid; gap: .2rem; list-style: none; cursor: pointer; }
.timeline summary::-webkit-details-marker { display: none; }
.timeline summary .n { color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: 700; }
.timeline summary .t { color: var(--color-ink-2); font-family: var(--font-display); font-size: var(--text-md); }
.timeline .prose { margin-block-start: .5rem; padding: .9rem 1rem; border-radius: var(--r-md); background: var(--color-paper-2); }
.day-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .55rem; }
.day-meta span { padding: .35rem .65rem; border-block-start: 1px solid var(--color-accent); border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--color-paper-2); color: var(--color-muted); font-size: var(--text-xs); }
.day-meta strong { color: var(--color-accent-strong); }
.inc { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.inc > div { padding: 1rem 1.1rem; border-radius: var(--r-md); background: var(--color-paper-2); }
.inc ul { list-style: none; padding: 0; display: grid; gap: .45rem; margin-block-start: .6rem; }
.inc li { display: flex; gap: .5rem; align-items: flex-start; font-size: var(--text-sm); }
.inc li .icon { margin-block-start: .25em; }
.inc .yes .icon { color: var(--color-accent); }
.inc .no .icon { color: var(--color-muted); }
.faq details { border-radius: var(--r-md); background: var(--color-paper-2); margin-block-end: .5rem; }
.faq summary { display: flex; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; color: var(--color-ink-2); font-weight: 600; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--color-accent); font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq .prose { padding: 0 1.1rem 1rem; }
.book-card { position: sticky; inset-block-start: 8rem; display: grid; gap: .9rem; padding: 1.25rem; border-radius: var(--r-lg); background: var(--color-paper-2); box-shadow: 0 1.5rem 3rem -1.25rem black, inset 0 0 0 2px color-mix(in oklab, var(--color-accent) 45%, transparent); }
.book-card .price { display: grid; gap: .1rem; }
.book-card .price span { color: var(--color-muted); font-size: var(--text-xs); font-weight: 600; }
.book-card .price strong { color: var(--color-accent-strong); font-family: var(--font-display); font-size: 2.4rem; font-weight: 400; line-height: 1; }
.book-card .price s { color: var(--color-muted); font-size: var(--text-sm); }
.book-card table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.book-card td { padding: .45rem 0; border-block-start: 1px dotted var(--color-rule-2); }
.book-card td:last-child { text-align: right; color: var(--color-ink-2); font-weight: 700; }
.book-card .btn { width: 100%; }
.book-card .trust { display: flex; gap: .4rem; color: var(--color-muted); font-size: var(--text-xs); }
.mobile-cta { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--z-sticky); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .5rem 1rem; background: var(--color-paper-2); box-shadow: 0 -.5rem 1.5rem -1rem black; }
.has-mobile-cta { padding-block-end: 4.5rem; }
.has-mobile-cta .fab { inset-block-end: 5rem; }

/* Page sections stack + offer grid (legacy Elementor cards that had no tour page: WhatsApp enquiry tiles) */
.stack { display: grid; gap: 2.5rem; }
.stack .prose { max-width: 68ch; }
.offer-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.offer { display: grid; border-radius: var(--r-lg); background: var(--color-paper-2); overflow: hidden; color: var(--color-ink); padding: .55rem; }
.offer .frame { aspect-ratio: 4 / 3; border-radius: calc(var(--r-lg) - .45rem); }
.offer .body { display: grid; gap: .35rem; padding: .9rem .6rem .6rem; }
.offer h3 { font-size: var(--text-md); }
.offer .book { color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: 700; }

/* Archive / term / page heads */
.page-hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
.page-hero .inner { display: grid; gap: .75rem; max-width: 62ch; }
.filters { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); align-items: end; padding: 1rem; margin-block-end: 1.5rem; border-radius: var(--r-lg); background: var(--color-paper-2); }
.pager { display: flex; justify-content: center; gap: .4rem; margin-block-start: 2rem; }
.pager a, .pager span { display: grid; place-content: center; min-width: 2.5rem; height: 2.5rem; padding-inline: .5rem; border-radius: 999px; background: var(--color-paper-2); font-size: var(--text-sm); }
.pager span[aria-current] { background: var(--color-accent); color: var(--color-accent-ink); }
.empty { padding: 2.5rem; text-align: center; color: var(--color-muted); border: 2px dotted var(--color-rule-2); border-radius: var(--r-lg); }
.page-body .frame { box-shadow: 0 1.5rem 3rem -1.25rem black; }

/* Article */
.article-hero { display: grid; gap: 1.25rem; padding-block: clamp(2rem, 5vw, 3rem); }
.article-hero .frame { aspect-ratio: var(--ratio-post); max-width: 56rem; box-shadow: 0 1.5rem 3rem -1.25rem black; }
.article-meta { display: flex; flex-wrap: wrap; gap: .5rem; }
.article-layout { display: grid; gap: 2.5rem; padding-block-end: 3rem; }
.toc { display: grid; gap: .5rem; padding: 1rem; border-radius: var(--r-md); background: var(--color-paper-2); font-size: var(--text-sm); }
.toc strong { color: var(--color-accent-strong); font-size: var(--text-xs); }
.toc ol { display: grid; gap: .25rem; padding-inline-start: 1.1rem; }
.toc .mini { display: flex; gap: .75rem; align-items: center; padding-block: .4rem; }
.toc .mini .frame { width: 3.25rem; aspect-ratio: 3 / 4; border-radius: var(--r-sm); flex: none; }
.aside { display: grid; gap: 1.25rem; align-content: start; }

/* Errors */
.error-page { padding-block: clamp(4rem, 10vw, 7rem); text-align: center; display: grid; gap: 1rem; justify-items: center; }
.error-page .btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); display: none; place-content: center; background: color-mix(in oklab, var(--color-paper) 94%, transparent); padding: 1rem; }
.lightbox[data-open="true"] { display: grid; }
.lightbox img { max-width: min(96vw, 80rem); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--r-md); box-shadow: 0 2rem 4rem -1.5rem black; }
.lightbox button { position: absolute; display: grid; place-content: center; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink-2); box-shadow: inset 0 0 0 1.5px var(--color-rule-2); }
.lightbox .close { inset-block-start: 1rem; inset-inline-end: 1rem; }
.lightbox .prev { inset-inline-start: 1rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox .next { inset-inline-end: 1rem; inset-block-start: 50%; transform: translateY(-50%); }
.lightbox .icon { width: 1.25rem; height: 1.25rem; }

/* Plan section: copy + collage */
.plan { display: grid; gap: 2.5rem; align-items: center; }

/* Responsive */
@media (min-width: 40em) {
  .actions .btn.whatsapp span { display: inline; }
  .search { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; }
  .fab span { display: inline; }
  .contact-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 56em) {
  .plan { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64em) {
  .nav { display: block; }
  .nav-toggle { display: none; }
  .trip-hero .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .trip-hero .media { order: 0; }
  .trip-hero.landscape .split { grid-template-columns: minmax(0, 1fr); }
  .trip-hero.landscape .media { order: -1; }
  .trip-body { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .article-layout { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
  .mobile-cta { display: none; }
  .has-mobile-cta { padding-block-end: 0; }
  .has-mobile-cta .fab { inset-block-end: 1rem; }
  .rail.five { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
  .rail.four { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
  .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms; animation-duration: .01ms; }
  .trip-card:hover, .dest-tile:hover, .cat-tile:hover, .cat-card:hover { transform: none; }
}

/* Fayoum collection: distinct tours, compact cards and the owner's photo collection. */
.fayoum-page .fayoum-cover { aspect-ratio: 16 / 7; margin-block-end: 2.5rem; border-radius: var(--r-lg); overflow: hidden; }
.fayoum-page .fayoum-cover img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
.fayoum-page .fayoum-block + .fayoum-block { margin-block-start: 3.5rem; }
.fayoum-page .fayoum-featured { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2rem; align-items: center; }
.fayoum-page .fayoum-featured .grid-cards { grid-template-columns: minmax(0, 1fr); }
.fayoum-page .trip-card .frame { aspect-ratio: 4 / 3; }
.fayoum-page .fayoum-intro { display: grid; gap: 1.25rem; max-width: 42ch; }
.fayoum-page .fayoum-intro .btn { justify-self: start; }
.fayoum-page .fayoum-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
.fayoum-page .fayoum-related > * { min-width: 0; }
.fayoum-page .fayoum-photos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fayoum-page .fayoum-photos a { aspect-ratio: 4 / 3; }
@media (max-width: 64em) {
  .fayoum-page .fayoum-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 40em) {
  .fayoum-page .fayoum-cover { aspect-ratio: 4 / 3; }
  .fayoum-page .fayoum-featured { grid-template-columns: minmax(0, 1fr); }
  .fayoum-page .fayoum-related { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; overflow-x: auto; scroll-snap-type: x mandatory; padding-block: .5rem 1rem; }
  .fayoum-page .fayoum-related > * { scroll-snap-align: start; }
  .fayoum-page .fayoum-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Keep offer and itinerary cards aligned in mixed tour collections. */
.tour-collection .trip-card .frame { aspect-ratio: 4 / 3; }