/* ============================================================
   The Fisherman Dubai — site stylesheet
   Tokens adopted as-is from design/tokens.css (dealt direction:
   One motif, seed 159730708). Two fields: the sea half (hero,
   about, what we sell), the wave band, the shore half (visit,
   contact, footer). Logical properties only, so RTL flips.
   ============================================================ */

/* ---------- Self-hosted fonts (OFL 1.1, arabic + latin) ---------- */

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/rubik-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('fonts/rubik-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/readexpro-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Readex Pro';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('fonts/readexpro-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* ---------- Tokens (design/tokens.css, as dealt) ---------- */

:root {
  /* Palette: the sea */
  --color-ground:      #0F3B33;
  --color-surface:     #175146;
  --color-surface-2:   #216254;
  --color-ink:         #F2E7CD;
  --color-muted:       #C9BB9E;
  --color-accent:      #82D5C2;
  --color-accent-ink:  #0A2E28;

  /* Palette: the shore */
  --color-sand:        #F2E7CD;
  --color-sand-ink:    #0F3B33;
  --color-sand-muted:  #5F6B5E;
  --color-sand-accent: #0E5F50;

  /* Type: two families exactly */
  --font-display: 'Rubik', 'Readex Pro', system-ui, sans-serif;
  --font-text: 'Readex Pro', 'Rubik', system-ui, sans-serif;

  /* Type scale: five fluid steps */
  --step-hero:  clamp(4rem, 6.4vw, 6.25rem);
  --step-head:  clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-lead:  clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-body:  clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);

  /* Weights */
  --weight-display:  300;
  --weight-regular:  400;
  --weight-medium:   500;

  /* Tracking and leading */
  --tracking-display: -0.022em;
  --tracking-body:    0;
  --leading-display:  1.05;
  --leading-lead:     1.3;
  --leading-body:     1.5;

  /* Spacing rhythm */
  --margin:         clamp(1rem, 3vw, 2rem);
  --space-section:  clamp(7.5rem, 14vw, 13.75rem);
  --space-block:    4rem;
  --space-gutter:   4rem;
  --space-row:      2.25rem;
  --space-inset:    1.25rem;
  --panel-inset:    clamp(0.625rem, 1.5vw, 1.25rem);

  /* Shape decisions */
  --radius-button: 999px;
  --radius-panel:  0;

  /* Motion */
  --dur-quick:    240ms;
  --dur-entrance: 480ms;
  --stagger:      72ms;
  --ease:         cubic-bezier(0.2, 0.7, 0.2, 1);
  --lift:         24px;

  /* Focus */
  --focus-width: 3px;
}

/* Arabic never takes negative tracking */
:lang(ar),
[dir="rtl"] {
  --tracking-display: 0;
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-text);
  font-weight: var(--weight-regular);
  font-size: var(--step-body);
  line-height: var(--leading-body);
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, p, dl, dd, dt, figure, ul { margin: 0; }
ul { padding: 0; }

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  text-wrap: balance;
}

h2 { font-size: var(--step-head); }

.lead {
  font-size: var(--step-lead);
  line-height: var(--leading-lead);
  max-width: 34em;
}

.statement {
  font-size: var(--step-lead);
  line-height: var(--leading-lead);
  max-width: 30em;
}

:focus-visible {
  outline: var(--focus-width) solid var(--color-accent);
  outline-offset: 3px;
}
.visit :focus-visible,
.contact :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--color-sand-accent);
}

/* ---------- Skip link ---------- */

.skip-link {
  position: fixed;
  inset-inline-start: 1rem;
  top: -4rem;
  z-index: 20;
  padding: 0.7em 1.4em;
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-radius: var(--radius-button);
  transition: top var(--dur-quick) var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- Header ---------- */

.site-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  padding: 1.25rem var(--margin) 1rem;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--step-lead);
  line-height: 1.2;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
  list-style: none;
}

.site-nav a {
  color: var(--color-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-quick) ease;
}
.site-nav a:hover { text-decoration-color: currentColor; }

.lang-toggle {
  margin-inline-start: auto;
  padding: 0.55em 1.5em;
  border: 0;
  border-radius: var(--radius-button);
  background: var(--color-surface-2);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--step-body);
  cursor: pointer;
  transition: transform 140ms var(--ease), background-color var(--dur-quick) ease;
}
.lang-toggle:hover { transform: translateY(-1px); }
.lang-toggle:active { transform: scale(0.96); }

/* ---------- Buttons ---------- */

.button {
  display: inline-block;
  padding: 0.85em 2.1em;
  border-radius: var(--radius-button);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--step-body);
  text-decoration: none;
  transition: transform 140ms var(--ease), background-color var(--dur-quick) ease;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: scale(0.97); }

.button-sand {
  background: var(--color-sand-accent);
  color: var(--color-sand);
}

/* ---------- Hero ---------- */
/* One motif: the fish is the composition. The scene layer carries the
   giant fish — cropped by the viewport edge, echoing the edge cut
   baked into hero.svg — and runs the wave/sand band full-bleed to the
   hero's foot, so no empty ground opens at the first screen's bottom. */

.hero {
  position: relative;
  min-height: 86svh;
  padding: 2rem var(--margin) 0;
  overflow: clip;
}

/* The headline spans wide above the fish; the lead and button keep
   their own clear column. */
.hero-copy { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--step-hero);
  margin-block-end: 1.25rem;
  max-width: 48rem;
}

.hero .lead {
  margin-block-end: 2.25rem;
  max-width: min(30rem, 40vw);
}

.hero-scene {
  position: absolute;
  inset: 0;
}

/* The giant fish: the hero.svg fish group redrawn in a tight viewBox
   that stops at the art's baked edge cut, so the shape is cut by the
   viewport edge. It starts below the first headline line and lands on
   the shore band at the foot; the short second line of the headline
   never reaches it. */
.hero-art {
  position: absolute;
  inset-block-start: 18svh;
  inset-inline-end: 0;
  width: min(70%, calc(100% - 37.5rem));
  aspect-ratio: 666 / 380;
  display: block;
}

/* The shore closes the hero: full-bleed wave/sand band at the foot. */
.hero-band {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  width: 100%;
  height: clamp(110px, 16vh, 220px);
  object-fit: cover;
  object-position: bottom center;
}

/* Phones keep the full hero.svg composition (swapped in below). */
.hero-art-full { display: none; }

/* RTL mirrors the fish itself, so the cut lands on the reading-flow
   edge (the left edge in Arabic) with the tail toward the text. */
[dir="rtl"] .hero-art { transform: scaleX(-1); }

/* ---------- About ---------- */

.about {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: center;
  gap: var(--space-gutter);
  margin-inline: var(--panel-inset);
  /* ground gap under the hero's shore band */
  margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
  margin-block-end: var(--space-section);
  padding: clamp(2rem, 5vw, 4.5rem);
  background: var(--color-surface);
  background-image: url('art/pattern.svg');
  background-size: 240px 168px;
}

.about h2 { margin-block-end: 1.5rem; }

.about-copy p + p { margin-block-start: 1.5rem; }

.about-art { width: 100%; }

/* ---------- What we sell ---------- */

.sell {
  padding-block-end: var(--space-section);
}

.sell h2 { margin-block-end: 1rem; }
.sell .lead { margin-block-end: var(--space-block); }

.sell-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-row) var(--space-gutter);
  list-style: none;
}

.sell-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 64px;
}

.sell-row img { flex: none; width: 56px; }

.sell-names { display: flex; flex-direction: column; line-height: 1.35; }
.sell-names .n-en { font-size: var(--step-lead); }
.sell-names .n-ar { font-size: var(--step-body); color: var(--color-muted); }
[dir="rtl"] .sell-names .n-ar { order: -1; font-size: var(--step-lead); color: inherit; }
[dir="rtl"] .sell-names .n-en { font-size: var(--step-body); color: var(--color-muted); }

/* ---------- Wave band ---------- */

.wave {
  display: block;
  width: 100%;
  height: clamp(90px, 14vw, 200px);
  object-fit: cover;
  object-position: bottom;
  margin-block: var(--space-section) 0;
}

/* ---------- Visit (shore field) ---------- */

.visit,
.contact {
  background: var(--color-sand);
  color: var(--color-sand-ink);
  padding: var(--space-block) var(--margin) var(--space-section);
}

.visit h2 { margin-block-end: 1.25rem; }
.visit .lead { margin-block-end: var(--space-block); }

.visit-rows { display: grid; gap: var(--space-row); }

.visit-row {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.visit-row dt {
  flex: none;
  width: 5.5rem;
  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  color: var(--color-sand-muted);
}

.visit-row dd {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-hero);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  transition: opacity var(--dur-quick) ease;
}

.villa-note {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-block: var(--space-block) var(--space-block);
  font-size: var(--step-lead);
}

/* Framed inset: roughly half the section width, framed by an offset
   tone step of the shore palette, explicit height (zero CLS). The
   filter pulls the OSM tiles away from their pale-cyan default toward
   the palette while keeping labels legible. */
.map-frame {
  position: relative;
  max-width: min(100%, 42rem);
  margin-block-start: var(--space-block);
}

.map-pin {
  position: absolute;
  inset-inline-start: calc(100% + 1.5rem);
  inset-block-start: 0.5rem;
}

.map-holder {
  height: clamp(240px, 30vw, 330px);
  padding: 0.75rem;
  background: color-mix(in srgb, var(--color-sand-muted) 16%, var(--color-sand));
}

.map-holder iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(0.75) hue-rotate(-15deg) sepia(0.12);
}

.map-frame figcaption {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  align-items: baseline;
  margin-block-start: 1rem;
  font-size: var(--step-small);
  color: var(--color-sand-muted);
}

.map-frame figcaption a {
  color: var(--color-sand-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--dur-quick) ease;
}
.map-frame figcaption a:hover { text-decoration-color: currentColor; }

.map-frame {
  transition: transform var(--dur-quick) var(--ease);
}

/* ---------- Contact (shore field) ---------- */

.contact { padding-block-end: var(--space-section); }
.contact h2 { margin-block-end: var(--space-block); }

.contact-rows { display: grid; gap: var(--space-row); }

.contact-row {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
}

.contact-row dt {
  flex: none;
  width: 5.5rem;
  font-size: var(--step-small);
  font-weight: var(--weight-medium);
  color: var(--color-sand-muted);
}

.contact-row dd {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: var(--step-head);
  letter-spacing: var(--tracking-display);
  line-height: 1.15;
}

.contact-row dd a {
  color: var(--color-sand-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.18em;
  transition: text-decoration-color var(--dur-quick) ease;
}
.contact-row dd a:hover { text-decoration-color: currentColor; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-sand);
  color: var(--color-sand-ink);
  padding: var(--space-block) var(--margin) var(--space-block);
}

.footer-name {
  font-family: var(--font-display);
  font-weight: var(--weight-display);
  font-size: clamp(2.75rem, 9.4vw, 9rem);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  margin-block-end: var(--space-block);
}

.footer-line { color: var(--color-sand-muted); }
.footer-line + .footer-line { margin-block-start: 0.5rem; }

/* ---------- Signature move: index with preview ---------- */
/* Hovering a visit row dims its siblings and lifts the map frame. */

@media (hover: hover) {
  .visit-rows:hover .visit-row:not(:hover) dd { opacity: 0.45; }
}

@media (prefers-reduced-motion: no-preference) {
  .visit:has(.visit-rows .visit-row:hover) .map-frame,
  .visit:has(.visit-rows .visit-row:focus-within) .map-frame {
    transform: translateY(-10px);
  }
}

/* ---------- Motion (taste skill step 9) ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] {
    opacity: 0;
    transform: translateY(var(--lift));
    animation: rise var(--dur-entrance) var(--ease) forwards;
    animation-delay: calc(var(--i, 0) * var(--stagger) + 120ms);
  }
  @keyframes rise { to { opacity: 1; transform: none; } }

  .js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--lift));
    transition:
      opacity var(--dur-entrance) var(--ease),
      transform var(--dur-entrance) var(--ease);
    transition-delay: var(--d, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .hero-art {
    animation: drift 11s var(--ease) infinite alternate;
  }
  @keyframes drift {
    from { transform: translateY(-1.2%); }
    to   { transform: translateY(1.2%); }
  }

  /* the drift keeps the RTL mirror from the base rule above while
     the animation is running */
  [dir="rtl"] .hero-art { animation-name: drift-rtl; }
  @keyframes drift-rtl {
    from { transform: scaleX(-1) translateY(-1.2%); }
    to   { transform: scaleX(-1) translateY(1.2%); }
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  /* The phone hero keeps its own composition: the full art in flow
     below the copy, its baked band already running full-width at the
     foot, so the desktop scene layers are switched off here. */
  .hero {
    min-height: 0;
    padding-block-end: 0;
  }
  .hero-copy { max-width: none; }
  .hero .lead { max-width: 34em; }

  .hero-scene { position: static; }
  .hero-art { display: none; }
  .hero-art-full { display: block; width: 100%; height: auto; }
  .hero-band { display: none; }

  .about { grid-template-columns: 1fr; }
  .about-art { max-width: 26rem; }

  .map-pin { display: none; }

  .sell-list { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .site-header { gap: 0.75rem 1.25rem; }

  .hero h1 {
    /* the dealt hero step cannot hold the dealt headline in two lines
       at phone width; step down within the same fluid system */
    font-size: clamp(2.5rem, 10vw, 3.5rem);
  }

  .visit,
  .contact {
    padding-inline: var(--margin);
  }

  .visit-row dd { font-size: var(--step-head); }

  .footer-name { font-size: clamp(2.5rem, 12.5vw, 3.8rem); }
}