/* Home masthead + layered hero — scoped to homepage only */

:root {
  /* Shared with globals --field-deep (hero / header / footer) */
  --hero-field: var(--field-deep, #011a15);
  --hero-green-950: var(--field-deep, #011a15);
  --hero-green-900: var(--field-deep-900, #02221c);
  --hero-green-850: #032a23;
  --hero-green-800: var(--field-deep-800, #05342b);
  --hero-gold: #c9a966;
  --hero-gold-soft: #d7bb82;
  --hero-ivory: #f4f0e8;
  --hero-ivory-muted: rgba(244, 240, 232, 0.74);
}

/* ── Home shell: header + hero share one emerald field ── */

.home-opening {
  position: relative;
  isolation: isolate;
  /* Match site-header shell heights (4 / 4.75 / 5.5) */
  margin-block-start: -4rem;
  padding-block-start: 4rem;
  background: var(--hero-field);
  color: var(--hero-ivory);
}

@media (min-width: 768px) {
  .home-opening {
    margin-block-start: -4.75rem;
    padding-block-start: 4.75rem;
  }
}

@media (min-width: 1024px) {
  .home-opening {
    margin-block-start: -5.5rem;
    padding-block-start: 5.5rem;
  }
}

/* ── Hero section ── */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  min-height: clamp(26rem, 58vw, 38rem);
  background-color: var(--hero-field);
}

.hero__field {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 55% 70% at 18% 42%, rgba(201, 169, 102, 0.14), transparent 62%),
    radial-gradient(ellipse 40% 50% at 88% 18%, rgba(244, 240, 232, 0.05), transparent 70%),
    linear-gradient(180deg, rgba(1, 26, 21, 0.15), transparent 42%);
}

/* Print atmosphere: vignette toward text + soft film grain */
.hero__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 85% at 22% 45%, transparent 35%, rgba(1, 26, 21, 0.28) 100%),
    linear-gradient(90deg, transparent 42%, rgba(1, 26, 21, 0.22) 78%, rgba(1, 26, 21, 0.45) 100%);
  mix-blend-mode: multiply;
  opacity: 0.85;
}

.hero__atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Height-fill + auto width keeps the full portrait (face) visible in all browsers.
   Use physical left — hero art is composed LTR (portrait on the left). */
img.hero__art {
  position: absolute;
  z-index: 0;
  inset: 0;
  /* under atmosphere overlay */
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  object-position: left center;
  pointer-events: none;
  user-select: none;
  transform: scale(1.02);
  transform-origin: 18% 42%;
  transition: transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1), filter 500ms ease;
  will-change: transform;
  filter: saturate(1.05) contrast(1.04);
}

.hero.is-ready img.hero__art {
  animation: hero-art-in 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.hero.is-tracking img.hero__art {
  transition: none;
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: stretch;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: inherit;
  margin-inline: 0;
  padding-block: 0;
  padding-inline-start: clamp(0.65rem, 1.8vw, 1.1rem);
  padding-inline-end: 0;
  box-sizing: border-box;
  direction: ltr;
  line-height: normal;
}

.hero__visual {
  position: relative;
  min-height: 0;
  pointer-events: none;
}

.hero__plate-glow {
  position: absolute;
  inset: 12% 8% 18% 6%;
  border-radius: 1.5rem;
  background: radial-gradient(circle at 40% 35%, rgba(201, 169, 102, 0.22), transparent 68%);
  filter: blur(28px);
  opacity: 0.55;
  transition: opacity 420ms ease, transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero.is-tracking .hero__plate-glow {
  opacity: 0.9;
}

/* Editorial glass panel — right half */
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  direction: rtl;
  text-align: start;
  width: 100%;
  max-width: none;
  min-height: 100%;
  justify-self: stretch;
  align-self: stretch;
  box-sizing: border-box;
  padding-block: clamp(1.5rem, 3.4vw, 2.6rem);
  padding-inline: clamp(1.35rem, 3.8vw, 3.25rem) clamp(1.2rem, 3.2vw, 2.75rem);
  border-radius: 1.5rem 0 0 1.5rem;
  background: linear-gradient(
    122deg,
    rgba(1, 26, 21, 0.28) 0%,
    rgba(1, 26, 21, 0.58) 48%,
    rgba(1, 26, 21, 0.78) 100%
  );
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  backdrop-filter: blur(22px) saturate(1.3);
  border: 1px solid rgba(201, 169, 102, 0.2);
  border-inline-end: 0;
  border-block: 0;
  box-shadow:
    inset 0 1px 0 rgba(244, 240, 232, 0.12),
    -18px 0 48px rgba(1, 26, 21, 0.28);
}

/* Magazine gutter: portrait-facing column hairline (physical left of panel) */
.hero__content::before {
  content: "";
  position: absolute;
  top: clamp(1.25rem, 3vw, 2.1rem);
  bottom: clamp(1.25rem, 3vw, 2.1rem);
  left: 0;
  width: 1px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(201, 169, 102, 0.45) 18%,
    rgba(201, 169, 102, 0.28) 82%,
    transparent 100%
  );
  opacity: 0.85;
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__content {
    background: linear-gradient(
      122deg,
      rgba(1, 26, 21, 0.72) 0%,
      rgba(1, 26, 21, 0.9) 100%
    );
  }
}

.hero__folio,
.hero__kicker,
.hero__title,
.hero__divider,
.hero__description,
.hero__actions {
  animation: hero-rise 780ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 95ms + 80ms);
}

.hero__folio {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  margin: 0 0 0.85rem;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--hero-ivory) 48%, var(--hero-gold));
}

.hero__folio-sep {
  letter-spacing: 0;
  opacity: 0.7;
}

.hero__folio-year {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.12em;
}

.hero__kicker {
  margin: 0 0 0.45rem;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: color-mix(in srgb, var(--hero-ivory) 42%, var(--hero-gold));
}

.hero__title {
  margin: 0;
  padding-block-end: 0.05em;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: clamp(2.75rem, 5vw, 5.6rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--hero-ivory);
  text-wrap: balance;
  text-shadow: 0 18px 40px rgba(1, 26, 21, 0.35);
}

.hero__divider {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-block: clamp(0.95rem, 2vw, 1.35rem) clamp(0.8rem, 1.6vw, 1.05rem);
  max-width: min(100%, 18rem);
}

.hero__divider-line {
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(to left, var(--hero-gold), rgba(201, 169, 102, 0.18));
  transform-origin: right center;
}

.hero.is-ready .hero__divider-line {
  animation: hero-rule 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 220ms both;
}

.hero__divider-line--short {
  flex: 0 0 2.5rem;
  background: rgba(201, 169, 102, 0.35);
}

.hero__divider-gem {
  flex-shrink: 0;
  width: 0.45rem;
  height: 0.45rem;
  background: var(--hero-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px rgba(201, 169, 102, 0.12);
  animation: hero-gem 2.8s ease-in-out 800ms infinite;
}

.hero__description {
  margin: 0;
  max-width: 33rem;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.22rem);
  font-weight: 400;
  line-height: 1.85;
  color: color-mix(in srgb, var(--hero-ivory) 82%, transparent);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.95rem;
  margin-block-start: auto;
  margin-block-end: 0.35rem;
  padding-block-start: clamp(1rem, 2.2vw, 1.55rem);
}

.hero__actions-rule {
  display: inline-block;
  width: 1px;
  height: 0.95rem;
  background: rgba(201, 169, 102, 0.4);
  flex-shrink: 0;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.25rem;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hero__cta--primary {
  color: var(--hero-gold-soft);
}

.hero__cta--ghost {
  color: color-mix(in srgb, var(--hero-ivory) 72%, transparent);
  opacity: 0.88;
}

.hero__cta .arrow-slide {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .hero:hover img.hero__art {
    filter: saturate(1.08) contrast(1.05);
  }

  .hero__cta:hover,
  .hero__cta:focus-visible {
    color: var(--hero-ivory);
    transform: translateY(-1px);
  }

  .hero__cta:hover .arrow-slide,
  .hero__cta:focus-visible .arrow-slide {
    transform: translateX(-0.2rem);
  }

  .hero__cta--ghost:hover,
  .hero__cta--ghost:focus-visible {
    opacity: 1;
    color: var(--hero-gold-soft);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hero-art-in {
  from {
    opacity: 0.55;
    transform: scale(1.06) translate3d(-12px, 8px, 0);
  }
  to {
    opacity: 1;
    transform: scale(1.02) translate3d(0, 0, 0);
  }
}

@keyframes hero-rule {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

@keyframes hero-gem {
  0%,
  100% {
    box-shadow: 0 0 0 4px rgba(201, 169, 102, 0.1);
  }
  50% {
    box-shadow: 0 0 0 7px rgba(201, 169, 102, 0.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__folio,
  .hero__kicker,
  .hero__title,
  .hero__divider,
  .hero__description,
  .hero__actions,
  .hero.is-ready img.hero__art,
  .hero.is-ready .hero__divider-line,
  .hero__divider-gem {
    animation: none;
  }

  img.hero__art {
    transform: none;
    transition: none;
  }
}

/* ── Archive gateway rail: floating saucer bridge ── */

.home-meta {
  position: relative;
  z-index: 3;
  /* Pull into the hero field so the saucer clearly floats over emerald */
  margin-block-start: -1.75rem;
  margin-block-end: 1.35rem;
  padding-inline: var(--gutter);
  padding-block-end: 0.55rem; /* room for ground ellipse */
  background: transparent;
  pointer-events: none;
}

.home-meta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.65rem 1.1rem;
  width: min(100%, 56rem);
  margin-inline: auto;
  padding: 0.85rem 1.65rem 0.9rem;
  direction: rtl;
  color: var(--hero-field);
  pointer-events: auto;
  isolation: isolate;
}

.home-meta__group {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.55rem;
}

.home-meta__icon {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--hero-field) 55%, var(--hero-gold));
  opacity: 0.9;
}

.home-meta__heading {
  font-size: 0.72rem;
  font-weight: 600;
  color: color-mix(in srgb, var(--hero-field) 62%, transparent);
}

.home-meta__chip,
.home-meta__year {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--hero-field);
  text-decoration: none;
  white-space: nowrap;
  transition: color 160ms var(--ease);
}

.home-meta__chip-count {
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--hero-field) 55%, var(--hero-gold));
}

.home-meta__sep,
.home-meta__dot {
  color: color-mix(in srgb, var(--hero-field) 28%, transparent);
  font-size: 0.75rem;
  user-select: none;
}

.home-meta__sep {
  width: 1px;
  height: 0.85rem;
  background: color-mix(in srgb, var(--hero-field) 18%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .home-meta__chip:hover,
  .home-meta__year:hover {
    color: color-mix(in srgb, var(--hero-field) 70%, var(--hero-gold));
  }
}

.home-feed {
  position: relative;
  z-index: 1;
  padding-block: clamp(1.25rem, 2.2vw, 1.85rem) clamp(0.5rem, 1.2vw, 1rem);
}

/* ── Transition into cream body ── */

.home-opening + .home-meta + .photo-lane,
.home-opening + .home-meta + .home-feed,
.home-opening + .photo-lane,
.home-opening + .home-feed,
.photo-lane + .book-lane,
.book-lane + .home-feed {
  position: relative;
  z-index: 1;
}

.home-meta + .photo-lane {
  margin-block-start: -0.35rem;
}

.photo-lane + .book-lane {
  margin-block-start: -0.5rem;
}

/* ── Tablet & below: no edge bleed — glass stays inset ── */

@media (max-width: 1023px) {
  .home-opening {
    overflow-x: clip;
  }

  .hero {
    min-height: clamp(22rem, 62vw, 32rem);
  }

  .hero__grid {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    gap: 0.75rem;
    width: 100%;
    max-width: var(--container, 87.5rem);
    margin-inline: auto;
    padding-block: clamp(0.85rem, 2vw, 1.15rem);
    padding-inline: clamp(0.85rem, 3vw, 1.5rem);
    box-sizing: border-box;
  }

  .hero__content {
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: 100%;
    padding-block: clamp(1rem, 2.2vw, 1.35rem);
    padding-inline: clamp(0.95rem, 2.5vw, 1.35rem);
    border-radius: 1.15rem;
    border: 1px solid rgba(201, 169, 102, 0.22);
    border-block: 1px solid rgba(201, 169, 102, 0.22);
    border-inline-end: 1px solid rgba(201, 169, 102, 0.22);
    box-shadow:
      inset 0 1px 0 rgba(244, 240, 232, 0.1),
      0 8px 22px rgba(1, 26, 21, 0.28);
  }

  .hero__content::before {
    top: 0.85rem;
    bottom: 0.85rem;
    opacity: 0.55;
  }

  .hero__title {
    font-size: clamp(1.85rem, 4vw, 3.25rem);
  }

  .hero__description {
    font-size: clamp(0.92rem, 0.88rem + 0.4vw, 1.05rem);
  }

  .home-meta {
    margin-block-start: -1.35rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .home-meta__inner {
    width: min(100%, 56rem);
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ── Mobile ── */

@media (max-width: 639px) {
  .hero {
    min-height: 0;
  }

  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-block: 0.85rem 1.1rem;
    padding-inline: 0.85rem;
    direction: rtl;
  }

  .hero__visual {
    display: none;
  }

  .hero__content {
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    height: fit-content;
    padding-block: 1rem;
    padding-inline: 1rem;
    border-radius: 1.1rem;
  }

  .hero__content::before {
    display: none;
  }

  .hero__atmosphere {
    opacity: 0.55;
    background:
      radial-gradient(ellipse 90% 70% at 50% 35%, transparent 30%, rgba(1, 26, 21, 0.35) 100%),
      linear-gradient(180deg, rgba(1, 26, 21, 0.15) 0%, rgba(1, 26, 21, 0.5) 100%);
  }

  .hero__actions {
    margin-block-start: clamp(0.7rem, 1.4vw, 1.05rem);
    margin-block-end: 0;
    padding-block-start: 0;
  }

  .hero__title {
    font-size: clamp(1.85rem, 8.5vw, 2.55rem);
    overflow-wrap: anywhere;
  }

  .hero__description {
    overflow-wrap: break-word;
  }

  .home-meta {
    margin-block-start: -1.15rem;
    margin-block-end: 1.1rem;
  }

  .home-meta__inner {
    border-radius: 1.65rem;
    justify-content: flex-start;
  }

  .home-meta__chip,
  .home-meta__year {
    white-space: normal;
  }
}

@media (max-width: 430px) {
  .hero__grid {
    padding-inline: 0.75rem;
  }

  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero__cta {
    min-height: 2.35rem;
  }

  .home-meta__inner {
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 1.1rem 0.8rem;
  }
}

.article-index {
  list-style: none;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid color-mix(in srgb, var(--forest-950, #043b2b) 12%, transparent);
}

.article-index--cols {
  display: grid;
}

@media (min-width: 768px) {
  .article-index--cols {
    grid-template-columns: 1fr 1fr;
    column-gap: 2.5rem;
  }
}

.article-index li {
  border-block-end: 1px solid color-mix(in srgb, var(--forest-950, #043b2b) 12%, transparent);
}

.article-index__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem 1.1rem;
  align-items: start;
  padding-block: 0.9rem;
  text-decoration: none;
  color: inherit;
}

.article-index__thumb {
  grid-row: span 2;
  width: 3.25rem;
  height: 3.25rem;
  overflow: hidden;
  border-radius: 0.45rem;
}

.article-index__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-index__date {
  grid-column: 2;
}

.article-index__copy {
  grid-column: 2;
}

.photo-lane {
  position: relative;
  padding-block: clamp(2.25rem, 5vw, 4.25rem) clamp(2.75rem, 6vw, 5rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--cream, #f8f5ee) 92%, #fff), var(--cream, #f8f5ee) 40%, var(--cream, #f8f5ee));
}

.photo-lane + .photo-lane {
  padding-block-start: clamp(0.35rem, 1.6vw, 1rem);
}

.photo-lane--empty {
  padding-block-end: clamp(1rem, 2.5vw, 1.75rem);
}

.photo-lane__empty {
  margin: 0;
  padding: 1.1rem 1.25rem;
  max-width: 42rem;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 1.05rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--forest-950, #043b2b) 62%, var(--ink-muted, #5c5346));
  background: color-mix(in srgb, #fff 55%, var(--cream, #f8f5ee));
  border: 1px solid color-mix(in srgb, var(--forest-950, #043b2b) 10%, transparent);
  border-radius: 1.15rem;
}

.photo-lane__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-block-end: clamp(1.6rem, 3.5vw, 2.75rem);
}

.photo-lane__intro {
  min-width: 0;
  padding-inline-end: 1rem;
  border-inline-end: 0;
}

.photo-lane__kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--forest-950, #043b2b) 48%, var(--gold, #dca927));
}

.photo-lane__title {
  margin: 0;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--forest-950, #043b2b);
}

.photo-lane__all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-end: 0.2rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--forest-950, #043b2b);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 180ms ease;
}

.photo-lane__all:hover,
.photo-lane__all:focus-visible {
  opacity: 1;
}

.photo-lane__viewport {
  position: relative;
}

.photo-lane__fade {
  display: none;
}

.photo-lane__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 72vw);
  gap: 0.85rem;
  align-items: start;
  overflow-x: auto;
  padding-inline: var(--gutter, 1.25rem);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 1.25rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  isolation: isolate;
}

.photo-lane__track::-webkit-scrollbar {
  display: none;
}

.photo-lane__track:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--forest-950, #043b2b) 30%, transparent);
  outline-offset: 8px;
}

.photo-lane__frame {
  position: relative;
  z-index: calc(2 + var(--i, 0));
  display: block;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  animation: photo-lane-in 780ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms);
  transition: filter 320ms ease;
}

.photo-lane__frame:hover,
.photo-lane__frame:focus-visible,
.photo-lane__frame:focus-within {
  z-index: 40;
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  .photo-lane__track:hover .photo-lane__frame:not(:hover):not(:focus-visible):not(:focus-within) {
    filter: brightness(0.82) saturate(0.75);
  }
}

.photo-lane__media {
  position: relative;
  display: block;
  overflow: hidden;
  background: #121c18;
  border-radius: 0;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cream, #f8f5ee) 55%, rgba(4, 24, 18, 0.35));
  transition:
    transform 480ms cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 480ms ease;
  will-change: transform;
}

.photo-lane__frame:hover .photo-lane__media,
.photo-lane__frame:focus-visible .photo-lane__media,
.photo-lane__frame:focus-within .photo-lane__media {
  transform: scale(1.07) translateY(-6px);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--cream, #f8f5ee) 70%, rgba(4, 24, 18, 0.2)),
    0 12px 28px rgba(4, 24, 18, 0.24),
    0 32px 64px rgba(4, 24, 18, 0.32);
}

.photo-lane__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(4, 18, 14, 0.08), transparent 28%),
    linear-gradient(0deg, rgba(4, 18, 14, 0.72) 0%, rgba(4, 18, 14, 0.28) 42%, transparent 68%);
  opacity: 0.35;
  pointer-events: none;
  transition: opacity 380ms ease;
}

.photo-lane__frame:hover .photo-lane__media::before,
.photo-lane__frame:focus-visible .photo-lane__media::before {
  opacity: 1;
}

.photo-lane__frame--tall .photo-lane__media {
  aspect-ratio: 3 / 4.05;
}

.photo-lane__frame--wide .photo-lane__media {
  aspect-ratio: 5 / 3.7;
}

.photo-lane__frame--tall img {
  object-position: center 16%;
}

.photo-lane__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.82) contrast(1.06) brightness(0.96);
  transition:
    transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1),
    filter 380ms ease;
  user-select: none;
  -webkit-user-drag: none;
}

.photo-lane__frame:hover img,
.photo-lane__frame:focus-visible img {
  transform: scale(1.035);
  filter: saturate(0.92) contrast(1.08) brightness(1);
}

.photo-lane__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.55rem 0.8rem;
  align-items: end;
  padding: 1.35rem 1rem 1rem;
  color: #f4efe4;
  opacity: 0;
  transform: translateY(0.65rem);
  pointer-events: none;
  transition: opacity 280ms ease, transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.photo-lane__frame:hover .photo-lane__caption,
.photo-lane__frame:focus-visible .photo-lane__caption,
.photo-lane__frame:focus-within .photo-lane__caption {
  opacity: 1;
  transform: translateY(0);
}

.photo-lane__index {
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, #f4efe4 70%, var(--gold, #dca927));
}

.photo-lane__caption-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 0.2rem;
  padding-block-start: 0.15rem;
  border-block-start: 1px solid color-mix(in srgb, var(--gold, #dca927) 55%, transparent);
}

.photo-lane__caption-title {
  display: block;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: clamp(0.86rem, 0.8rem + 0.28vw, 1.02rem);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}

.photo-lane__year {
  display: block;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.35;
  color: color-mix(in srgb, #f4efe4 72%, transparent);
  font-variant-numeric: tabular-nums;
}

@keyframes photo-lane-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Editorial three-up: overlapping prints, hover brings one forward */
@media (min-width: 760px) {
  .photo-lane--spread .photo-lane__track {
    display: grid;
    grid-auto-flow: unset;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.4fr) minmax(0, 0.9fr);
    gap: 0;
    overflow: visible;
    padding-inline: var(--gutter, 1.25rem);
    padding-block: 1.5rem 2.25rem;
    align-items: start;
  }

  .photo-lane--spread .photo-lane__frame--tall:first-child {
    z-index: 3;
    margin-block-start: 2.75rem;
    margin-inline-end: -1.75rem;
  }

  .photo-lane--spread .photo-lane__frame--wide {
    z-index: 2;
    margin-block-start: 0;
    margin-inline: -0.85rem;
  }

  .photo-lane--spread .photo-lane__frame--tall:last-child {
    z-index: 1;
    margin-block-start: 4.25rem;
    margin-inline-start: -1.75rem;
  }

  .photo-lane--spread .photo-lane__frame--tall .photo-lane__media {
    aspect-ratio: 3 / 4.2;
  }

  .photo-lane--spread .photo-lane__frame--wide .photo-lane__media {
    aspect-ratio: 5 / 3.45;
  }

  .photo-lane--spread .photo-lane__frame:hover,
  .photo-lane--spread .photo-lane__frame:focus-visible,
  .photo-lane--spread .photo-lane__frame:focus-within {
    z-index: 50;
  }

  .photo-lane--spread .photo-lane__frame:hover .photo-lane__media,
  .photo-lane--spread .photo-lane__frame:focus-visible .photo-lane__media,
  .photo-lane--spread .photo-lane__frame:focus-within .photo-lane__media {
    transform: scale(1.1) translateY(-10px);
  }
}

@media (hover: none) {
  .photo-lane__track:hover .photo-lane__frame:not(:hover):not(:focus-visible):not(:focus-within) {
    filter: none;
  }

  .photo-lane__media::before {
    opacity: 0.22;
  }

  .photo-lane__frame:active .photo-lane__media::before,
  .photo-lane__frame:focus-visible .photo-lane__media::before {
    opacity: 1;
  }

  .photo-lane__frame:active .photo-lane__caption,
  .photo-lane__frame:focus-visible .photo-lane__caption {
    opacity: 1;
    transform: translateY(0);
  }

  .photo-lane__frame:active .photo-lane__media,
  .photo-lane__frame:focus-visible .photo-lane__media {
    transform: scale(1.04) translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-lane__frame,
  .photo-lane__frame img,
  .photo-lane__caption,
  .photo-lane__media::before {
    animation: none;
    transition: none;
  }
}

@media (max-width: 759px) {
  .photo-lane__frame--wide {
    min-width: min(82vw, 26rem);
  }

  .photo-lane__frame--tall {
    min-width: min(64vw, 16.5rem);
  }
}

.photo-lane--video .photo-lane__frame--wide .photo-lane__media,
.photo-lane--video .photo-lane__frame--tall .photo-lane__media {
  aspect-ratio: 16 / 9;
}

.photo-lane--video .photo-lane__frame--tall img,
.photo-lane--video .photo-lane__frame img {
  object-position: center center;
}

.photo-lane__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.photo-lane__play svg {
  width: 3.1rem;
  height: 3.1rem;
  padding: 0.85rem 0.75rem 0.85rem 0.95rem;
  color: #f4efe4;
  background: color-mix(in srgb, #04120e 42%, transparent);
  border: 1px solid color-mix(in srgb, #f4efe4 55%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  transition:
    transform 320ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background 280ms ease,
    border-color 280ms ease;
}

.photo-lane__frame:hover .photo-lane__play svg,
.photo-lane__frame:focus-visible .photo-lane__play svg {
  transform: scale(1.08);
  background: color-mix(in srgb, #04120e 28%, var(--gold, #dca927) 22%);
  border-color: var(--gold, #dca927);
}

@media (min-width: 760px) {
  .photo-lane--video.photo-lane--spread .photo-lane__track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    padding-block: 0.5rem 1.25rem;
  }

  .photo-lane--video.photo-lane--spread .photo-lane__frame--tall:first-child,
  .photo-lane--video.photo-lane--spread .photo-lane__frame--wide,
  .photo-lane--video.photo-lane--spread .photo-lane__frame--tall:last-child {
    margin: 0;
  }
}

.book-lane {
  position: relative;
  padding-block: clamp(2rem, 4.5vw, 3.75rem) clamp(2.5rem, 5.5vw, 4.5rem);
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--cream, #f8f5ee) 88%, #fff),
      color-mix(in srgb, var(--cream, #f8f5ee) 96%, #e8efe8) 55%,
      var(--cream, #f8f5ee)
    );
}

.book-lane__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-block-end: clamp(1.4rem, 3vw, 2.4rem);
}

.book-lane__intro {
  min-width: 0;
}

.book-lane__kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--forest-950, #043b2b) 48%, var(--gold, #dca927));
}

.book-lane__title {
  margin: 0;
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: clamp(2rem, 1.35rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--forest-950, #043b2b);
}

.book-lane__all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-block-end: 0.2rem;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--forest-950, #043b2b);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 180ms ease;
}

.book-lane__all:hover,
.book-lane__all:focus-visible {
  opacity: 1;
}

.book-lane__viewport {
  position: relative;
}

.book-lane__fade {
  display: none;
}

.book-lane__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10.5rem, 36vw);
  gap: 2.25rem 2.75rem;
  align-items: start;
  overflow-x: auto;
  overflow-y: visible;
  padding-inline: var(--gutter, 1.25rem);
  padding-block: 1.25rem 2.25rem;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter, 1.25rem);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  isolation: isolate;
}

.book-lane__track.is-peeling-track {
  overflow: visible;
}

.book-lane__track::-webkit-scrollbar {
  display: none;
}

.book-lane__track:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--forest-950, #043b2b) 30%, transparent);
  outline-offset: 8px;
}

.book-lane__frame {
  position: relative;
  z-index: calc(2 + var(--i, 0));
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-width: min(40vw, 12.25rem);
  max-width: 13.5rem;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  pointer-events: auto;
  -webkit-user-drag: none;
  user-select: none;
  animation: book-lane-in 720ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: calc(var(--i, 0) * 55ms);
  transition:
    z-index 0ms linear 160ms,
    filter 280ms ease,
    opacity 280ms ease;
}

.book-lane__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  border-radius: 0.2rem;
  background: color-mix(in srgb, var(--cream, #f8f5ee) 70%, #ddd4c4);
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--forest-950, #043b2b) 8%, transparent),
    0 14px 28px -18px color-mix(in srgb, var(--forest-950, #043b2b) 42%, transparent);
  transition: box-shadow 320ms ease;
}

.book-lane__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset -8px 0 16px rgba(4, 59, 43, 0.07);
}

.book-peel {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  direction: ltr;
  unicode-bidi: isolate;
}

.book-peel .peel-top,
.book-peel .peel-back,
.book-peel .peel-bottom,
.book-peel .peel-layer {
  pointer-events: none;
}

.book-peel:not(.peel-ready) .peel-top,
.book-peel.is-flat .peel-top {
  z-index: 4;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}

.book-peel:not(.peel-ready) .peel-back,
.book-peel:not(.peel-ready) .peel-bottom,
.book-peel.is-flat .peel-back,
.book-peel.is-flat .peel-bottom,
.book-peel.is-flat .peel-top-shadow,
.book-peel.is-flat .peel-back-shadow,
.book-peel.is-flat .peel-back-reflection,
.book-peel.is-flat .peel-bottom-shadow {
  visibility: hidden !important;
}

.book-peel .peel-top {
  background-color: transparent;
}

.book-peel .peel-top img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  -webkit-user-drag: none;
  pointer-events: none;
}

.book-peel .peel-back {
  background-color: #f3ecdd;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.14) 0 1px,
    transparent 1px 7px
  );
}

.book-peel .peel-bottom {
  background-color: #c9b89a;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(90, 74, 52, 0.08) 0 1px,
    transparent 1px 6px
  );
}

.book-lane__frame.is-peeling .book-lane__media {
  overflow: visible;
}

.book-lane__frame.is-peeling .peel-back {
  z-index: 7 !important;
}

.book-lane__frame.is-peeling .peel-top {
  z-index: 6 !important;
}

.book-lane__frame.is-peeling .peel-bottom {
  z-index: 4 !important;
}

@media (hover: hover) and (pointer: fine) {
  .book-lane__track:hover .book-lane__frame:not(:hover):not(:focus-visible):not(:focus-within) {
    filter: saturate(0.9) brightness(0.97);
    opacity: 0.82;
  }

  .book-lane__frame:hover,
  .book-lane__frame:focus-visible,
  .book-lane__frame:focus-within,
  .book-lane__frame.is-peeling {
    z-index: 40;
    transition-delay: 0ms;
    filter: none;
    opacity: 1;
  }

  .book-lane__frame:hover .book-lane__media,
  .book-lane__frame:focus-visible .book-lane__media,
  .book-lane__frame.is-peeling .book-lane__media {
    overflow: visible;
    box-shadow:
      0 1px 0 color-mix(in srgb, var(--forest-950, #043b2b) 10%, transparent),
      0 18px 32px -16px color-mix(in srgb, var(--forest-950, #043b2b) 46%, transparent);
  }
}

@media (hover: none) {
  .book-lane__frame:active .book-lane__media {
    filter: brightness(0.97);
  }
}

.book-lane__caption {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 0.65rem;
  align-items: start;
  padding-inline: 0.1rem;
  transition: transform 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .book-lane__frame:hover .book-lane__caption,
  .book-lane__frame:focus-visible .book-lane__caption {
    transform: translateY(-4px);
  }
}

.book-lane__index {
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
  color: color-mix(in srgb, var(--forest-950, #043b2b) 42%, var(--gold, #dca927));
}

.book-lane__caption-copy {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.book-lane__caption-title {
  font-family: var(--font-arabic, "Amiri"), "Noto Naskh Arabic", serif;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--forest-950, #043b2b);
}

.book-lane__year {
  font-size: 0.78rem;
  color: color-mix(in srgb, var(--forest-950, #043b2b) 55%, transparent);
}

@keyframes book-lane-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (min-width: 900px) {
  .book-lane__track {
    grid-auto-columns: minmax(11.25rem, 12.75rem);
    gap: 2.5rem 3.25rem;
  }

  .book-lane__frame {
    min-width: 11.25rem;
    max-width: 12.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .book-lane__frame,
  .book-lane__media,
  .book-lane__media img,
  .book-lane__caption {
    animation: none;
    transition: none;
  }

  .book-lane__media::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 4;
    width: 2.4rem;
    height: 2.4rem;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(
      ellipse at 0 100%,
      rgba(255, 248, 236, 0.28),
      transparent 68%
    );
  }

  @media (hover: hover) and (pointer: fine) {
    .book-lane__frame:hover .book-lane__media::before,
    .book-lane__frame:focus-visible .book-lane__media::before {
      opacity: 1;
    }
  }
}

.lang-spread--lead-only {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
}

.home-feed .feature-spread,
.essay-band .essay-spread__lead,
.essay-band .lang-spread__lead {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 639px) {
  .home-feed .feature-spread.float-saucer,
  .essay-band .essay-spread__lead.float-saucer,
  .essay-band .lang-spread__lead.float-saucer {
    padding: 0.95rem 1rem;
    border-radius: 1.05rem;
  }

  .essay-spread__lead-title,
  .lang-spread__lead-title {
    font-size: clamp(1.15rem, 5.2vw, 1.45rem);
  }

  .feature-title {
    font-size: clamp(1.12rem, 5vw, 1.45rem);
  }
}

.essay-spread__lead-media,
.essay-spread__card-media {
  display: block;
  overflow: hidden;
  border-radius: 0.75rem;
  margin-block-end: 0.85rem;
}

.essay-spread__lead-media img,
.essay-spread__card-media img {
  width: 100%;
  height: 11rem;
  object-fit: cover;
}

.essay-spread__lead-media img {
  height: 14rem;
}