* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #0B1A2E; color: #ECE5D6; font-family: 'EB Garamond', Georgia, serif; -webkit-font-smoothing: antialiased; }
::selection { background: rgba(201,163,86,.35); }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* Static placeholder standing in for the old drag-and-drop <image-slot> —
   no photo assets shipped with this bundle, so it just renders an empty,
   evenly-toned frame at the same size/position as a real photo would use. */
.photo-slot {
  display: block;
  background: linear-gradient(135deg, #14283f 0%, #0d1e32 100%);
  border: 1px solid rgba(201,163,86,.18);
}
.era-photo-slot {
  width: min(100%, 336px);
  aspect-ratio: 3 / 4;
  background-repeat: no-repeat;
  background-size: contain !important;
  justify-self: center;
}
.era-photo-slot[data-r="era-img"] {
  height: auto !important;
}

.lang-link {
  padding: 10px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  text-decoration: none;
  color: #C9C3B4;
  font-family: 'EB Garamond', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lang-link.active {
  color: #E3C989;
  font-weight: 700;
}
.lang-link:hover { color: #E3C989; background: transparent; text-decoration: none; }

/* ============ HEADER — nested in .hero, laid over the visuals on desktop ============ */
.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* ============ HERO ============
   Mobile-first: layers stack in normal flow, each sized with aspect-ratio
   so nothing needs a hardcoded height — they simply scale with viewport
   width. Stack order: 1) .hero-visual (library.png background + the
   ismail.png <img> layered on top of it, both occupying the same box),
   2) .hero-photo (Alanya landscape), 3) .hero-overlay (tint, spans the
   whole section), 4) .hero-content (copy).
   From 1024px up, layers are repositioned absolutely into the split
   portrait/landscape composition with a soft cross-fade in the middle. */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #0B1A2E; /* shows through the masked-out edges so both images melt into one field */
}

.hero-visual {
  position: relative;
  order: 1;
  width: 100%;
  aspect-ratio: 4 / 5;
}
.hero-library {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  opacity: .4;
  filter: grayscale(.7) brightness(.55) saturate(.7);
}
/* Mute the library backdrop with a #0A1626 wash so it reads as a quiet,
   tinted field behind the portrait rather than a busy photo. Sits above the
   library image but below the ismail.png <img> (z-index 2), so the person
   stays crisp. Inherits any mask applied to .hero-library on desktop. */
.hero-library::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0A1626;
  opacity: .8;
  z-index: 1;
}
/* The real ismail.png cutout. object-fit: contain keeps his true proportions
   (never stretched or cropped) and bottom-left anchoring keeps him planted on
   the floor of the box, so he can't drift vertically or slide under adjacent
   layers regardless of the box's aspect ratio. */
.hero-portrait-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: none;
  object-fit: contain;
  object-position: left bottom;
  z-index: 2;
}

.hero-photo {
  position: relative;
  order: 2;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

/* Tint for copy legibility — a flat wash on mobile/tablet (stacked layout),
   upgraded to a centered radial fade once the split desktop layout kicks in. */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: rgba(11,26,46,.85);
}

.hero-content {
  position: relative;
  order: 3;
  z-index: 4;
  margin: 0 auto;
  max-width: 760px;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px 56px;
}

/* Engraved gold cross ornament above the eyebrow line. */
.hero-ornament {
  display: block;
  width: 30px;
  height: 30px;
  flex: none;
  margin-bottom: 20px;
  filter: drop-shadow(0 0 10px rgba(201,163,86,.25));
}

/* "Mouse" scroll cue under the CTA — a slim capsule with a dot that
   drifts down and fades, hinting the page continues below the fold. */
.hero-scroll {
  width: 25px;
  height: 40px;
  border: 1.5px solid rgba(201,163,86,.6);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 8px;
}
.hero-scroll-dot {
  width: 4px;
  height: 8px;
  border-radius: 2px;
  background: #C9A356;
  animation: iy-scroll 1.9s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes iy-scroll {
  0%   { opacity: 0; transform: translateY(0); }
  25%  { opacity: 1; }
  60%  { opacity: 1; transform: translateY(9px); }
  100% { opacity: 0; transform: translateY(11px); }
}

/* ============ DESKTOP — split portrait / landscape, seamless center blend ( >=1024px ) ============ */
@media (min-width: 1024px) {
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 22px 48px;
  }
  .hero {
    flex-direction: row;
    aspect-ratio: auto;
    height: 72vh;
    min-height: 620px;
    width: 100%;
  }
  /* Library background and the real ismail.png <img> both fill the same
     left-hand box, full height, keeping their aspect ratio via object-fit
     rather than a hardcoded pixel height — so the portrait never shifts
     vertically or gets squeezed by neighboring blocks. */
  .hero-visual {
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    height: 100%;
    aspect-ratio: auto;
    z-index: 2;
  }
  .hero-library,
  .hero-portrait-img {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 52%, rgba(0,0,0,.5) 70%, transparent 88%);
            mask-image: linear-gradient(to right, #000 0%, #000 52%, rgba(0,0,0,.5) 70%, transparent 88%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
  /* Landscape photo: sits opposite the portrait and fades in from its own
     left side, so the two images overlap and cross-fade through a shared
     band rather than meeting at a single hard line. */
  .hero-photo {
    position: absolute;
    inset: 0 0 0 auto;
    width: 52%;
    height: 100%;
    aspect-ratio: auto;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 50%, rgba(0,0,0,.45) 70%, transparent 90%);
            mask-image: linear-gradient(to left, #000 0%, #000 50%, rgba(0,0,0,.45) 70%, transparent 90%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
  /* Darken a clean central column so the copy reads on a calm navy field,
     matching the composition in the reference. */
  .hero-overlay {
    background:
      radial-gradient(ellipse 44% 78% at 50% 52%,
        rgba(11,26,46,.9) 0%,
        rgba(11,26,46,.72) 46%,
        rgba(11,26,46,.2) 78%,
        rgba(11,26,46,0) 100%),
      linear-gradient(to bottom,
        rgba(11,26,46,.5) 0%,
        rgba(11,26,46,0) 22%,
        rgba(11,26,46,0) 78%,
        rgba(11,26,46,.55) 100%);
  }
  .hero-content {
    padding: 104px 32px 84px;
    justify-content: center;
    height: 100%;
  }
}

/* ============ MOBILE / TABLET — single blended scene like the desktop split,
   text stacked underneath on solid navy ( <=1023px ). Matches the phone
   reference: portrait upper-left, Alanya coast upper-right, the two images
   cross-fading through a shared central band and melting down into a navy
   field where the title / quote / signature sit. ============ */
@media (max-width: 1023px) {
  .hero {
    flex-direction: column;
    min-height: 92vh;
    padding: 0 !important;
  }
  /* Portrait band — pinned top-left, fading out on its right edge. The
     library backdrop (.hero-visual) and the ismail.png cutout
     (.hero-portrait-img) are siblings, so both are sized to the same box. */
  .hero-visual,
  .hero-portrait-img {
    position: absolute;
    inset: 0 auto auto 0;
    width: 66%;
    height: 62%;
    aspect-ratio: auto;
  }
  .hero-visual { z-index: 1; }
  .hero-portrait-img { z-index: 2; }
  .hero-library,
  .hero-portrait-img {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 60%, rgba(0,0,0,.4) 82%, transparent 100%);
            mask-image: linear-gradient(to right, #000 0%, #000 60%, rgba(0,0,0,.4) 82%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
  .hero-portrait-img { object-fit: cover; object-position: 40% 22%; }
  /* Coast band — pinned top-right, sliding under the portrait's soft edge. */
  .hero-photo {
    position: absolute;
    inset: 0 0 auto auto;
    width: 52%;
    height: 62%;
    aspect-ratio: auto;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 52%, rgba(0,0,0,.4) 80%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0%, #000 52%, rgba(0,0,0,.4) 80%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
            mask-size: 100% 100%;
  }
  /* Bright up top, dissolving into a solid navy base for the copy. The
     mid-band is pulled down early so the title reads cleanly where it
     overlaps the lower part of the scene. */
  .hero-overlay {
    background: linear-gradient(to bottom,
      rgba(11,26,46,.12) 0%,
      rgba(11,26,46,.12) 24%,
      rgba(11,26,46,.5) 40%,
      rgba(11,26,46,.9) 56%,
      #0B1A2E 70%,
      #0B1A2E 100%);
  }
  /* margin-top:auto drops the copy to the bottom of the scene while the
     header stays pinned at the top. */
  .hero-content {
    position: relative;
    order: 3;
    z-index: 4;
    margin-top: auto;
  }
}

.media-card { transition: border-color .4s ease, background .4s ease; }
.media-card:hover { border-color: rgba(201,163,86,.6); background: #122A45; }

.geo-carousel {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 18px;
  align-items: center;
}
.geo-viewport {
  min-width: 0;
  overflow: hidden;
}
.geo-track {
  display: flex;
  gap: 24px;
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.geo-card {
  flex: 0 0 calc((100% - 48px) / 3);
  border: 1px solid rgba(201,163,86,.2);
  background: #0E2137;
  cursor: zoom-in;
  transition: border-color .25s ease, transform .25s ease;
}
.geo-card:hover,
.geo-card:focus-visible {
  border-color: rgba(227,201,137,.72);
  transform: translateY(-2px);
}
.geo-card:focus-visible {
  outline: 2px solid rgba(227,201,137,.45);
  outline-offset: 4px;
}
.geo-nav {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #E3C989;
  background: rgba(10,22,38,.74);
  border: 1px solid rgba(201,163,86,.55);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
}
.geo-nav:hover:not(:disabled),
.geo-nav:focus-visible {
  color: #FFF3CA;
  background: rgba(201,163,86,.12);
  border-color: rgba(227,201,137,.9);
  transform: translateY(-1px);
}
.geo-nav:focus-visible {
  outline: 2px solid rgba(227,201,137,.45);
  outline-offset: 4px;
}
.geo-nav:disabled {
  opacity: .34;
  cursor: default;
}
.geo-nav svg {
  display: block;
  width: 24px;
  height: 24px;
}
.geo-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background: rgba(3,10,18,.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.geo-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.geo-modal__image {
  max-width: min(100%, 1280px);
  max-height: calc(100vh - 68px);
  display: block;
  border: 1px solid rgba(201,163,86,.32);
  object-fit: contain;
  box-shadow: 0 28px 70px rgba(0,0,0,.45);
}
.geo-modal__close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #E3C989;
  background: rgba(8,19,33,.86);
  border: 1px solid rgba(201,163,86,.55);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.geo-modal__close:hover,
.geo-modal__close:focus-visible {
  color: #FFF3CA;
  background: rgba(201,163,86,.12);
  border-color: rgba(227,201,137,.9);
  transform: translateY(-1px);
}
.geo-modal__close:focus-visible {
  outline: 2px solid rgba(227,201,137,.45);
  outline-offset: 4px;
}
.geo-modal__close svg {
  display: block;
  width: 24px;
  height: 24px;
}
body.geo-modal-open {
  overflow: hidden;
}

/* ============ BIOGRAPHY MODAL ============ */
.bio-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 34px;
  background: rgba(3,10,18,.92);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.bio-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}
.bio-modal__panel {
  position: relative;
  width: min(100%, 860px);
  max-height: calc(100vh - 68px);
  overflow-y: auto;
  background: #0E2137;
  border: 1px solid rgba(201,163,86,.32);
  box-shadow: 0 28px 70px rgba(0,0,0,.5);
  padding: 66px 64px 60px;
  text-align: left;
}
.bio-modal__eyebrow {
  font-family: 'EB Garamond', serif;
  font-size: 14px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: #C9A356;
  margin-bottom: 14px;
}
.bio-modal__title {
  margin: 0 0 6px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 1.1;
  color: #ECE5D6;
}
.bio-modal__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 22px 0 30px;
}
.bio-modal__divider span:first-child,
.bio-modal__divider span:last-child {
  width: 56px;
  height: 1px;
  background: rgba(201,163,86,.5);
}
.bio-modal__divider span:nth-child(2) {
  width: 9px;
  height: 9px;
  background: #C9A356;
  transform: rotate(45deg);
}
.bio-modal__panel h3 {
  margin: 34px 0 12px;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
  font-size: 27px;
  line-height: 1.25;
  color: #C9A356;
}
.bio-modal__panel h3:first-of-type {
  margin-top: 0;
}
.bio-modal__panel p {
  margin: 0 0 16px;
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.75;
  color: #CDC7B7;
}
.bio-modal__panel ul {
  margin: 0 0 16px;
  padding-left: 22px;
}
.bio-modal__panel li {
  font-family: 'EB Garamond', serif;
  font-size: 18px;
  line-height: 1.7;
  color: #CDC7B7;
  margin-bottom: 6px;
}
.bio-modal__close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #E3C989;
  background: rgba(8,19,33,.86);
  border: 1px solid rgba(201,163,86,.55);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease;
}
.bio-modal__close:hover,
.bio-modal__close:focus-visible {
  color: #FFF3CA;
  background: rgba(201,163,86,.12);
  border-color: rgba(227,201,137,.9);
  transform: translateY(-1px);
}
.bio-modal__close:focus-visible {
  outline: 2px solid rgba(227,201,137,.45);
  outline-offset: 4px;
}
.bio-modal__close svg {
  display: block;
  width: 24px;
  height: 24px;
}
.bio-modal__close--bottom {
  display: none;
}
body.bio-modal-open {
  overflow: hidden;
}
@media (max-width: 640px) {
  .bio-modal { padding: 0; }
  .bio-modal__panel { max-height: 100vh; padding: 72px 24px 110px; border: none; }
  .bio-modal__title { font-size: 34px; }
  .bio-modal__panel h3 { font-size: 24px; }
  .bio-modal__close:not(.bio-modal__close--bottom) { display: none; }
  .bio-modal__close--bottom {
    display: flex;
    position: fixed;
    left: 50%;
    bottom: 20px;
    top: auto;
    right: auto;
    transform: translateX(-50%);
    z-index: 3;
    width: 46px;
    height: 46px;
    box-shadow: 0 10px 26px rgba(0,0,0,.45);
  }
  .bio-modal__close--bottom:hover,
  .bio-modal__close--bottom:focus-visible {
    transform: translateX(-50%) translateY(-1px);
  }
}

/* Reveal-on-scroll: content is visible by default so nothing ever disappears
   when JavaScript is unavailable. When animations.js runs it adds the
   `js-anim` class to <html>, arming a gentle, slow fade + rise that is then
   triggered per element by an IntersectionObserver — a soft, presentation
   style entrance that works across every browser and is easy on the eye. */
[data-reveal] { opacity: 1; }

html.js-anim [data-reveal]:not([data-r="hero-text"]) {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 1.15s cubic-bezier(.22,.61,.36,1),
              transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.js-anim [data-reveal]:not([data-r="hero-text"]).is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   PRESENTATION ANIMATIONS
   Gentle, slow, and legible — tuned for an older audience. Every
   motion is a soft fade + a small rise with long easing so nothing
   feels abrupt or jumpy. All of it is gated behind the `js-anim`
   class (added by animations.js), so the page stays fully readable
   without JavaScript and is fully disabled under reduced-motion.
   ============================================================ */

/* Staggered items inside a group — book cards, media cards, gallery
   cards, footer value pills. animations.js assigns the per-item delay
   so they arrive one after another like slides in a presentation. */
html.js-anim .anim-item {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 1s cubic-bezier(.22,.61,.36,1),
              transform 1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.js-anim .anim-item.is-visible {
  opacity: 1;
  transform: none;
}

/* Hero intro — the opening screen's lines drift up in sequence, like
   the title slide of a presentation gently assembling itself. */
html.js-anim [data-r="hero-text"] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.1s cubic-bezier(.22,.61,.36,1),
              transform 1.1s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.js-anim [data-r="hero-text"].is-visible > * {
  opacity: 1;
  transform: none;
}

/* The word-split hero lines (headline, quote) skip the block fade above —
   their words carry the motion instead — and reveal once the hero opens. */
html.js-anim [data-r="hero-text"] > .iy-words {
  opacity: 1;
  transform: none;
  transition: none;
}
html.js-anim [data-r="hero-text"].is-visible .iy-word {
  opacity: 1;
  transform: none;
}

/* Word-by-word reveal — the main prose (headings, quotes, the biography,
   the life-era descriptions) fades in one word at a time as the line scrolls
   into view, so the writing appears to gently settle onto the page. Slow and
   soft, with only a small rise, so it stays effortless to read. animations.js
   splits the text into `.iy-word` spans and assigns each word its delay. */
html.js-anim .iy-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s cubic-bezier(.22,.61,.36,1),
              transform .9s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
html.js-anim .iy-words.is-visible .iy-word {
  opacity: 1;
  transform: none;
}

/* A very slow Ken Burns drift on the hero landscape adds quiet, living
   motion to the opening scene without ever demanding attention. */
@keyframes iy-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
html.js-anim .hero-photo {
  animation: iy-kenburns 22s ease-out both;
}

/* ---- Soft hover lifts (gentle, slow, forgiving) ---- */

/* Book covers rise and their image swells slightly within its frame. */
[data-r="book-card"] {
  transition: transform .55s cubic-bezier(.22,.61,.36,1);
}
[data-r="book-card"] > div {
  overflow: hidden;
}
[data-r="book-card"] img {
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
[data-r="book-card"]:hover {
  transform: translateY(-10px);
}
[data-r="book-card"]:hover img {
  transform: scale(1.06);
}

/* Era cards settle up with a soft shadow. */
[data-r="era-row"] {
  transition: transform .55s cubic-bezier(.22,.61,.36,1),
              border-color .55s ease,
              box-shadow .55s ease;
}
[data-r="era-row"]:hover {
  transform: translateY(-6px);
  border-color: rgba(201,163,86,.42);
  box-shadow: 0 22px 55px rgba(0,0,0,.4);
}

/* Media cards lift slightly on top of their existing colour shift. */
.media-card {
  transition: border-color .45s ease, background .45s ease,
              transform .45s cubic-bezier(.22,.61,.36,1),
              box-shadow .45s ease;
}
.media-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
}

/* Primary calls-to-action warm and lift on hover. */
[data-r="bio-btn"] {
  transition: background .4s ease, transform .4s cubic-bezier(.22,.61,.36,1),
              box-shadow .4s ease;
}
[data-r="bio-btn"]:hover {
  background: #E3C989;
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(201,163,86,.32);
}

/* Footer value pills gently rise when pointed at. */
[data-r="footer-values"] > div {
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
[data-r="footer-values"] > div:hover {
  transform: translateY(-6px);
}

/* Footer contact icons get a soft, warm hover. */
[data-r="footer-bottom"] a[aria-label] {
  transition: border-color .4s ease, color .4s ease,
              background .4s ease, transform .4s cubic-bezier(.22,.61,.36,1);
}
[data-r="footer-bottom"] a[aria-label]:hover {
  border-color: rgba(227,201,137,.9);
  background: rgba(201,163,86,.12);
  color: #FFF3CA;
  transform: translateY(-3px);
}

@keyframes iy-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
[data-r="float"] { animation: iy-float 2.6s ease-in-out infinite; }


/* ============ TABLET STACKED — slightly taller scene for the wider viewport ( 768–1023px ) ============ */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-visual,
  .hero-photo { height: 66% !important; }
}

/* ============ RESPONSIVE — TABLET & STACKED ( <=1023px ) ============ */
@media (max-width: 1023px) {
  [data-screen-label] { padding-left: 32px; padding-right: 32px; }
  .site-header { padding-left: 28px !important; padding-right: 28px !important; }
  footer { padding-left: 32px !important; padding-right: 32px !important; }
  .hero-content { padding: 0 32px 52px !important; }
  [data-r="hero-h1"] { font-size: 54px !important; }
  [data-r="era-row"] { grid-template-columns: 1fr !important; gap: 22px !important; }
  [data-r="era-img"] { height: 320px !important; }
  [data-r="media-card"] { grid-template-columns: 1fr !important; }
  [data-r="media-img"] { height: 240px !important; }
  .geo-carousel { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 14px; }
  .geo-nav { width: 46px; height: 46px; }
  .geo-card { flex-basis: calc((100% - 24px) / 2); }
  [data-r="geo-main-img"] { height: 360px !important; }
}

/* ============ MOBILE ( <=680px ) ============ */
@media (max-width: 680px) {
  [data-screen-label] { padding: 60px 20px; }
  .site-header { padding: 14px 18px !important; }
  footer { padding: 56px 20px 36px !important; }
  [data-r="brand-name"] { display: none !important; }
  .hero-content { padding: 0 20px 44px !important; }
  [data-r="hero-h1"] { font-size: 34px !important; line-height: 1.1 !important; }
  [data-r="hero-quote"] { font-size: 20px !important; margin-top: 26px !important; }
  [data-r="hero-sign"] { font-size: 40px !important; margin-top: 24px !important; }
  [data-r="sec-h2"] { font-size: 34px !important; }
  [data-r="era-img"] { height: 220px !important; }
  [data-r="era-row"] { padding: 16px !important; }
  [data-r="era-row"] h3 { font-size: 27px !important; }
  [data-r="books-row"] { gap: 16px !important; }
  [data-r="book-card"] { width: calc(50% - 8px) !important; min-width: 140px !important; }
  [data-r="book-img"] { height: 220px !important; }
  [data-r="media-img"] { height: 200px !important; }
  [data-r="geo-main-img"] { height: 240px !important; }
  .geo-carousel { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; }
  .geo-track { gap: 14px; }
  .geo-nav { width: 42px; height: 42px; }
  .geo-modal { padding: 20px; }
  .geo-modal__image { max-height: calc(100vh - 40px); }
  .geo-modal__close { top: 16px; right: 16px; width: 46px; height: 46px; }
  [data-r="geo-thumb-img"] { height: 150px !important; }
  [data-r="contact-row"] { flex-direction: column !important; align-items: stretch !important; }
  [data-r="contact-row"] > a { width: 100% !important; max-width: none !important; flex: initial !important; padding: 28px 22px !important; }
  [data-r="footer-quote"] { font-size: 24px !important; }
  [data-r="footer-values"] { gap: 26px 32px !important; padding: 32px 0 !important; }
  [data-r="footer-bottom"] { flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 24px !important; }
  [data-reveal] { transform: translateY(18px); }
}

/* ============ SMALL PHONES ( <=400px ) ============ */
@media (max-width: 400px) {
  [data-r="hero-h1"] { font-size: 30px !important; }
  [data-r="sec-h2"] { font-size: 29px !important; }
  .geo-carousel { grid-template-columns: minmax(0, 1fr); }
  .geo-viewport { grid-column: 1; }
  .geo-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    background: rgba(8,19,33,.82);
    transform: translateY(-50%);
  }
  .geo-nav:hover:not(:disabled),
  .geo-nav:focus-visible {
    transform: translateY(calc(-50% - 1px));
  }
  .geo-nav[data-geo-prev] { left: 8px; }
  .geo-nav[data-geo-next] { right: 8px; }
  .geo-card { flex-basis: 100%; }
  [data-r="geo-thumb-img"] { height: 200px !important; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  html.js-anim [data-reveal],
  html.js-anim .anim-item,
  html.js-anim [data-r="hero-text"] > *,
  html.js-anim .iy-word {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.js-anim .hero-photo { animation: none !important; }
  [data-r="float"] { animation: none !important; }
  [data-r="book-card"],
  [data-r="book-card"] img,
  [data-r="era-row"],
  .media-card,
  [data-r="bio-btn"],
  [data-r="footer-values"] > div,
  [data-r="footer-bottom"] a[aria-label],
  .geo-track,
  .geo-modal,
  .geo-card,
  .geo-nav,
  .geo-modal__close,
  .bio-modal,
  .bio-modal__close { transition: none !important; }
}