/* ==========================================================================
   הרחובות ממריאים לאט
   Design tokens first, components built from them. RTL throughout: logical
   properties only, so the layout mirrors if an LTR language is added later.
   Palette and typeface carried over from tlvguide.com.
   ========================================================================== */

/* ------------------------------------------------------------------ fonts */

@font-face {
  font-family: 'Alef';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alef-hebrew-400.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Alef';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/alef-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Alef';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/alef-hebrew-700.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Alef';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/alef-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+FEFF, U+FFFD;
}

/* ----------------------------------------------------------------- tokens */

:root {
  /* colour */
  --c-ink: #0F1246;
  --c-ink-2: #373A6D;
  --c-paper: #FBFEFF;
  --c-accent: #FF8246;
  --c-accent-ink: #7A3410;
  --c-soft: #BEEEF7;
  --c-sea: #6FC2D0;
  --c-sea-dark: #3E8F9D;
  --c-line: #DCE6EC;
  --c-muted: #5A6070;
  --c-shade: #F1F7FA;
  --c-warn-bg: #FFF4E6;
  --c-warn-line: #F0B37E;
  --c-warn-ink: #8A4B12;

  /* type */
  --font: 'Alef', 'Segoe UI', Arial, sans-serif;
  --fs-base: 1.0625rem;
  --fs-lead: 1.1875rem;
  --fs-small: 0.9375rem;
  --fs-h1: clamp(2rem, 1.35rem + 2.8vw, 3.25rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.125rem);
  --fs-h3: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  --lh-body: 1.8;          /* Hebrew needs more room than Latin */
  --lh-tight: 1.3;

  /* space */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* shell */
  --wrap: 1200px;
  --wrap-narrow: 760px;
  --gutter: 1rem;
  --radius: 10px;          /* matches the old site's buttons */
  --radius-lg: 18px;
  --header-h: 68px;

  /* hero, shared by every page so the h1 never moves between pages */
  --hero-pad-top: 2.5rem;
  --hero-pad-bottom: 2rem;
  --hero-eyebrow-h: 1.5rem;

  /* photo frames. Change these four and every photo slot follows. */
  --frame-ratio: 4 / 3;
  --ratio-hero: 16 / 9;
  --ratio-card: 3 / 2;
  --ratio-portrait: 3 / 4;
  --ratio-gallery: 4 / 3;

  --shadow-sm: 0 1px 2px rgba(15, 18, 70, 0.08), 0 2px 8px rgba(15, 18, 70, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 18, 70, 0.1), 0 12px 32px rgba(15, 18, 70, 0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

@media (min-width: 48rem) {
  :root {
    --gutter: 2rem;
    --hero-pad-top: 4rem;
    --hero-pad-bottom: 3rem;
    --header-h: 84px;
  }
}

/* ------------------------------------------------------------------ reset */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-block-start: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-paper);
  overflow-x: hidden;
}

img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0 0 var(--sp-4); font-weight: 700; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p { margin: 0 0 var(--sp-4); }
ul, ol { margin: 0 0 var(--sp-4); padding-inline-start: 1.25em; }
a { color: var(--c-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--c-sea-dark); }
figure { margin: 0; }
blockquote { margin: 0; }
button { font: inherit; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-block-start: -100px;
  inset-inline-start: var(--sp-4);
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-paper);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { inset-block-start: 0; color: var(--c-paper); }

.wrap {
  inline-size: min(100% - (var(--gutter) * 2), var(--wrap));
  margin-inline: auto;
}
.wrap-narrow { inline-size: min(100% - (var(--gutter) * 2), var(--wrap-narrow)); margin-inline: auto; }

.visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ----------------------------------------------------------------- header */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background: var(--c-paper);
  border-block-end: 1px solid var(--c-line);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-block-size: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  margin-inline-end: auto;
  padding-block: var(--sp-2);
}
.brand-mark {
  inline-size: 34px;
  block-size: 34px;
  border-radius: 9px;
  background: var(--c-ink);
  position: relative;
  flex: none;
}
.brand-mark::before,
.brand-mark::after {
  content: '';
  position: absolute;
  inset-inline: 7px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-accent);
}
.brand-mark::before { inset-block-start: 20px; }
.brand-mark::after { inset-block-start: 26px; inset-inline-end: 13px; }
.brand-mark-lg { inline-size: 44px; block-size: 44px; margin-block-end: var(--sp-3); }

.brand-text { display: flex; flex-direction: column; }
.brand-name { font-weight: 700; font-size: 1.0625rem; line-height: 1.2; color: var(--c-ink); }
.brand-tag { font-size: 0.75rem; color: var(--c-muted); line-height: 1.4; }

.nav-toggle {
  inline-size: 44px; block-size: 44px;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  flex: none;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  inline-size: 20px; block-size: 2px;
  background: var(--c-ink);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; inset-inline-start: 0; }
.nav-toggle-bars::before { inset-block-start: -6px; }
.nav-toggle-bars::after { inset-block-start: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

.site-nav {
  display: none;
  position: absolute;
  inset-inline: 0;
  inset-block-start: var(--header-h);
  background: var(--c-paper);
  border-block-end: 1px solid var(--c-line);
  padding: var(--sp-4) var(--gutter) var(--sp-6);
  box-shadow: var(--shadow-md);
}
.site-nav.is-open { display: block; }

.nav-list { list-style: none; margin: 0 0 var(--sp-4); padding: 0; }
.nav-list > li { border-block-end: 1px solid var(--c-line); }
.nav-list a {
  display: block;
  padding-block: var(--sp-3);
  min-block-size: 44px;
  text-decoration: none;
  font-weight: 700;
}
.nav-list a[aria-current="page"] { color: var(--c-sea-dark); }

.has-sub { position: relative; }
.sub-toggle {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 0;
  inline-size: 44px; block-size: 44px;
  border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
.sub-toggle span {
  inline-size: 9px; block-size: 9px;
  border-bottom: 2px solid var(--c-ink); /* rtl-ok: a down chevron must not mirror */
  border-left: 2px solid var(--c-ink); /* rtl-ok: a down chevron must not mirror */
  transform: rotate(-45deg);
  transition: transform 0.2s var(--ease);
}
.sub-toggle[aria-expanded="true"] span { transform: rotate(135deg); }

.sub-nav { list-style: none; margin: 0; padding: 0 0 var(--sp-3); display: none; }
.sub-nav.is-open { display: block; }
.sub-nav a { font-weight: 400; padding-inline-start: var(--sp-4); color: var(--c-muted); }

.lang-switch { display: flex; gap: var(--sp-2); margin-block-end: var(--sp-4); }
.lang-switch a {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: var(--fs-small);
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
}
.lang-switch a[aria-current="true"] { background: var(--c-shade); font-weight: 700; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .site-nav {
    display: flex;
    position: static;
    align-items: center;
    gap: var(--sp-5);
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nav-list { display: flex; align-items: center; gap: var(--sp-5); margin: 0; }
  .nav-list > li { border: 0; }
  .nav-list a { padding-block: var(--sp-2); min-block-size: auto; }
  .sub-toggle { position: static; inline-size: 44px; block-size: 44px; }
  .has-sub { display: flex; align-items: center; gap: var(--sp-1); }
  .sub-nav {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 0;
    min-inline-size: 230px;
    background: var(--c-paper);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: var(--sp-2) 0;
    z-index: 20;
  }
  .sub-nav a { padding: var(--sp-2) var(--sp-4); min-block-size: 44px; display: flex; align-items: center; }
  .sub-nav a:hover { background: var(--c-shade); }
  .lang-switch { margin: 0; }
  /* The menu links sit centred in the space between the logo and the CTA. */
  .brand { margin-inline-end: 0; }
  .site-nav { flex: 1; }
  .nav-list { margin-inline: auto; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 46px;
  padding: var(--sp-3) var(--sp-5);
  border: 0;
  border-radius: var(--radius);
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn-cta { background: var(--c-accent); color: var(--c-paper); }
.btn-cta:hover { background: var(--c-soft); color: var(--c-ink); }
.btn-ghost { background: transparent; color: var(--c-ink); border: 2px solid var(--c-ink); }
.btn-ghost:hover { background: var(--c-ink); color: var(--c-paper); }
.btn-quiet { background: var(--c-shade); color: var(--c-ink); }
.btn-quiet:hover { background: var(--c-soft); color: var(--c-ink); }
.btn:active { transform: translateY(1px); }
.nav-cta { inline-size: 100%; }
@media (min-width: 62rem) { .nav-cta { inline-size: auto; } }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ------------------------------------------------------------- breadcrumb */

.breadcrumb { border-block-end: 1px solid var(--c-line); background: var(--c-shade); }
.breadcrumb ol {
  list-style: none;
  display: flex;
  /* Never wraps. A three level crumb on a long article title would otherwise take
     a second line on a phone and push that page's h1 lower than every other page. */
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-3) 0;
  font-size: var(--fs-small);
  white-space: nowrap;
}
.breadcrumb li { min-inline-size: 0; }
.breadcrumb li:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb a { white-space: nowrap; }
.breadcrumb li + li::before {
  content: '‹';
  margin-inline-end: var(--sp-2);
  color: var(--c-muted);
}
.breadcrumb [aria-current="page"] { color: var(--c-muted); }

/* ------------------------------------------------------------------- hero */

/* Every page uses this block. The eyebrow keeps its height even when a page
   has no eyebrow text, so the h1 sits at the same offset on all pages. */
.hero {
  padding-block: var(--hero-pad-top) var(--hero-pad-bottom);
  background: var(--c-paper);
}
.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-block-size: var(--hero-eyebrow-h);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-sea-dark);
}
.hero-eyebrow::before {
  content: '';
  inline-size: 34px;
  block-size: 3px;
  border-radius: 2px;
  background: var(--c-accent);
  flex: none;
}
.hero h1 { margin-block-start: 0; }
.hero-lead {
  font-size: var(--fs-lead);
  color: var(--c-ink-2);
  max-inline-size: 56ch;
  margin-block-end: var(--sp-5);
}
.hero-media { margin-block-start: var(--sp-5); }

/* --------------------------------------------------------------- sections */

.section { padding-block: var(--sp-7); }
.section-shade { background: var(--c-shade); }
.section-ink { background: var(--c-ink); color: var(--c-paper); }
.section-ink a { color: var(--c-soft); }
.section-ink h2 { color: var(--c-paper); }
.section-head { margin-block-end: var(--sp-6); }
.section-head .eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-sea-dark);
  margin-block-end: var(--sp-2);
  min-block-size: var(--hero-eyebrow-h);
}
.section-head .eyebrow::before {
  content: '';
  inline-size: 34px; block-size: 3px;
  border-radius: 2px; background: var(--c-accent); flex: none;
}
.prose { max-inline-size: 68ch; }
.prose p:last-child { margin-block-end: 0; }
.lead { font-size: var(--fs-lead); color: var(--c-ink-2); }

@media (min-width: 48rem) { .section { padding-block: var(--sp-8); } }

/* ----------------------------------------------------------------- photos */

.photo-frame {
  position: relative;
  aspect-ratio: var(--frame-ratio);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--c-shade);
}
/* The frame gets its height from aspect-ratio, so a percentage height on the
   image resolves against auto and the image sizes itself. Pinning it to the
   frame is what makes object-fit actually crop rather than overflow. */
.photo-frame picture { position: absolute; inset: 0; }
.photo-frame img {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: center;
}
.photo-top img { object-position: center 18%; }
.photo-bottom img { object-position: center 82%; }
.photo figcaption {
  margin-block-start: var(--sp-2);
  font-size: var(--fs-small);
  color: var(--c-muted);
  text-align: start;
}
.photo-hero .photo-frame { --frame-ratio: var(--ratio-hero); }
.photo-card .photo-frame { --frame-ratio: var(--ratio-card); }
.photo-portrait .photo-frame { --frame-ratio: var(--ratio-portrait); }
.photo-plain .photo-frame { background: transparent; }
.photo-contain .photo-frame img { object-fit: contain; background: var(--c-shade); }

/* ------------------------------------------------------------ placeholders */

.missing-box {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--c-warn-bg);
  border: 2px dashed var(--c-warn-line);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-block-end: var(--sp-4);
  color: var(--c-warn-ink);
}
.missing-label { font-weight: 700; font-size: var(--fs-small); }
.missing-text { font-size: var(--fs-small); line-height: 1.6; }

.slot-frame {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #E7EBEF 0 12px, #EFF3F6 12px 24px);
  border: 2px dashed #A9B6C0;
}
.slot-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  text-align: center;
  padding: var(--sp-4);
  color: #4A5560;
  font-size: var(--fs-small);
}
.slot-title { font-weight: 700; }
.slot-desc { max-inline-size: 34ch; line-height: 1.5; }
.slot-inner code {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 0.8125rem;
}
.slot-ratio { color: #6B7683; font-size: 0.8125rem; }

/* ------------------------------------------------------------------ cards */

.card-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  display: flex;
  flex-direction: column;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card .photo-frame { border-radius: 0; }
.card-body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.card h3 { margin: 0; }
.card p { margin: 0; color: var(--c-ink-2); font-size: var(--fs-small); }
.card-date {
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-sea-dark);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.card-more { margin-block-start: auto; padding-block-start: var(--sp-2); font-weight: 700; color: var(--c-accent-ink); display: inline-flex; align-items: center; min-block-size: 44px; }

/* ------------------------------------------------------------- tour blocks */

.tour {
  padding-block: var(--sp-7);
  border-block-start: 1px solid var(--c-line);
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}
.tour:first-of-type { border-block-start: 0; }
.tour-head { margin-block-end: var(--sp-5); }
.tour-sub { color: var(--c-sea-dark); font-weight: 700; margin-block-end: var(--sp-3); }
.tour-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 60rem) {
  .tour-grid { grid-template-columns: 1.3fr 1fr; align-items: start; }
}

.tour-facts {
  background: var(--c-shade);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.tour-facts dl { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.tour-facts dt { font-size: var(--fs-small); color: var(--c-muted); margin-block-end: 2px; }
.tour-facts dd { margin: 0; font-weight: 700; }
.tour-facts .note { font-size: var(--fs-small); color: var(--c-muted); margin-block-end: var(--sp-4); }

.gallery {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(2, 1fr);
  margin-block-start: var(--sp-5);
}
@media (min-width: 48rem) { .gallery { grid-template-columns: repeat(3, 1fr); } }
.gallery .photo-frame { --frame-ratio: var(--ratio-gallery); }

/* -------------------------------------------------------------- quote rail */

.quotes { padding-block: var(--sp-7); background: var(--c-ink); color: var(--c-paper); }
.quotes h2 { color: var(--c-paper); }
.quote-rail {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}
@media (min-width: 48rem) { .quote-rail { grid-template-columns: repeat(2, 1fr); } }

.quote-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(190, 238, 247, 0.25);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.quote-card blockquote p {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-lead);
  line-height: 1.9;
  color: var(--c-paper);
}
.quote-card blockquote p:last-child { margin-block-end: 0; }
.quote-card .quote-link {
  margin-block-start: auto;
  align-self: flex-start;
  min-block-size: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--c-soft);
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  border-block-end: 2px solid var(--c-accent);
  padding-block-end: 2px;
}
.quote-card .quote-link:hover { color: var(--c-accent); }
.quote-card figcaption {
  margin-block-start: auto;
  font-size: var(--fs-small);
  font-weight: 700;
  color: var(--c-soft);
}

/* ------------------------------------------------------------------ people */

.people { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 56rem) { .people { grid-template-columns: repeat(2, 1fr); } }

.person {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.person .photo-frame { --frame-ratio: 1 / 1; border-radius: 50%; inline-size: 120px; }
.person .slot-frame { inline-size: 100%; border-radius: var(--radius-lg); }
.slot-inner code { max-inline-size: 100%; overflow-wrap: anywhere; }
.person h3 { margin-block-end: var(--sp-1); }
.person .role { color: var(--c-muted); font-size: var(--fs-small); margin-block-end: var(--sp-3); }
.person blockquote p { color: var(--c-ink-2); }
.person .sig { font-weight: 700; color: var(--c-sea-dark); }

/* ------------------------------------------------------------------- forms */

.form-card {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
  scroll-margin-block-start: calc(var(--header-h) + 1rem);
}
.field { margin-block-end: var(--sp-4); }
.field label { display: block; font-weight: 700; margin-block-end: var(--sp-2); font-size: var(--fs-small); }
.field input, .field textarea, .field select {
  inline-size: 100%;
  min-block-size: 46px;
  padding: var(--sp-3);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  color: var(--c-ink);
}
.field textarea { min-block-size: 140px; resize: vertical; line-height: 1.7; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--c-sea); }
.field .hint { font-size: 0.8125rem; color: var(--c-muted); margin-block-start: var(--sp-1); }
.field-error input, .field-error textarea { border-color: #C0392B; }
.field .err { color: #A5281B; font-size: 0.8125rem; margin-block-start: var(--sp-1); display: block; }

.hp-field {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%);
  opacity: 0; pointer-events: none;
}

.form-status { margin-block-start: var(--sp-3); font-weight: 700; min-block-size: 1.5rem; }
.form-status.is-ok { color: #1E7A4C; }
.form-status.is-err { color: #A5281B; }
.form-alt { font-size: var(--fs-small); color: var(--c-muted); }

/* ---------------------------------------------------------------- contacts */

.contact-grid { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }

.contact-card {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  background: var(--c-paper);
}
.contact-card .c-name { font-weight: 700; margin-block-end: var(--sp-1); }
.contact-card .c-role { color: var(--c-muted); font-size: var(--fs-small); margin-block-end: var(--sp-3); }
.contact-card .c-line { margin-block-end: var(--sp-1); }
.contact-card .c-line a { text-decoration: none; }
.contact-card .c-line a:hover { text-decoration: underline; }
.contact-card .c-wa {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  margin-block-start: var(--sp-2);
  font-weight: 700;
  color: var(--c-sea-dark);
  text-decoration: none;
}
.contact-card-sm { border: 0; padding: 0; background: transparent; margin-block-end: var(--sp-4); }
.contact-card-sm .c-line a { color: inherit; }

/* ----------------------------------------------------------------- footer */

.site-footer {
  background: var(--c-ink);
  color: var(--c-paper);
  padding-block: var(--sp-7) var(--sp-4);
  margin-block-start: var(--sp-8);
}
.site-footer a { color: var(--c-soft); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer-h { font-size: 1rem; margin-block-end: var(--sp-3); color: var(--c-soft); }
.footer-name { font-weight: 700; margin-block-end: var(--sp-1); }
.footer-tag { color: #C6CEE0; font-size: var(--fs-small); }
.footer-address { font-size: var(--fs-small); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-block-size: 44px; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  justify-content: space-between;
  border-block-start: 1px solid rgba(255, 255, 255, 0.15);
  margin-block-start: var(--sp-6);
  padding-block-start: var(--sp-4);
  font-size: var(--fs-small);
}
.footer-bottom p { margin: 0; }
.legal-nav { list-style: none; display: flex; gap: var(--sp-4); margin: 0; padding: 0; }
.legal-nav a { display: inline-flex; align-items: center; min-block-size: 44px; }

.social { list-style: none; display: flex; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; }
.social a {
  inline-size: 44px; block-size: 44px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  color: var(--c-soft);
}
.social a:hover { background: rgba(255, 255, 255, 0.1); color: var(--c-paper); }

/* --------------------------------------------------------- floating dock */

.fab-dock {
  position: fixed;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: 1rem;
  z-index: 90;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--sp-2);
}
.fab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 48px;
  padding: 0 var(--sp-4);
  border: 0;
  border-radius: 999px;
  background: var(--c-ink);
  color: var(--c-paper);
  font-weight: 700;
  font-size: var(--fs-small);
  text-decoration: none;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}
.fab-main {
  inline-size: 56px;
  block-size: 56px;
  min-block-size: 56px;
  padding: 0;
  justify-content: center;
  background: var(--c-accent);
}
.fab-main[aria-expanded="true"] { background: var(--c-ink); }
.fab-icon { display: grid; place-items: center; }
.fab-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.fab-list[hidden] { display: none; }
.fab-whatsapp { background: #1E8A5F; }
.fab-phone { background: var(--c-ink-2); }
.fab-callback { background: var(--c-sea-dark); }
.fab:hover { filter: brightness(1.08); color: var(--c-paper); }

/* ------------------------------------------------------------------ modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--gutter);
}
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(15, 18, 70, 0.6); }
.modal-card {
  position: relative;
  background: var(--c-paper);
  border-radius: var(--radius-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  inline-size: min(100%, 460px);
  max-block-size: 90dvh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
}
.modal-close {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-end: var(--sp-2);
  inline-size: 44px; block-size: 44px;
  border: 0; background: transparent;
  font-size: 1.6rem; line-height: 1; cursor: pointer;
  color: var(--c-muted);
}
.modal-card h2 { margin-block-end: var(--sp-2); }
.modal-sub { color: var(--c-muted); font-size: var(--fs-small); margin-block-end: var(--sp-4); }
.modal-card .btn { inline-size: 100%; }


/* ============================================================== band style
   Full width colour bands, a title set over a photo, and portraits in a
   scalloped frame. Introduced on מי אנחנו. Every piece here is a component so
   the same language can be applied to the other pages without a rewrite.
   ========================================================================= */

:root {
  --blob-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%3E%3Cpath%20d%3D%22M%20100.00%2014.00%20A%2028.59%2028.59%200%200%201%20146.50%2027.65%20A%2028.59%2028.59%200%200%201%20178.23%2064.27%20A%2028.59%2028.59%200%200%201%20185.12%20112.24%20A%2028.59%2028.59%200%200%201%20164.99%20156.32%20A%2028.59%2028.59%200%200%201%20124.23%20182.52%20A%2028.59%2028.59%200%200%201%2075.77%20182.52%20A%2028.59%2028.59%200%200%201%2035.01%20156.32%20A%2028.59%2028.59%200%200%201%2014.88%20112.24%20A%2028.59%2028.59%200%200%201%2021.77%2064.27%20A%2028.59%2028.59%200%200%201%2053.50%2027.65%20A%2028.59%2028.59%200%200%201%20100.00%2014.00%20Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
  --blob-border: 10px;
  --band-cyan: #BEEEF7;
  --band-navy: #101243;
}

.band { padding-block: var(--sp-7); }
@media (min-width: 48rem) { .band { padding-block: var(--sp-8); } }

.band-cyan { background: var(--band-cyan); color: var(--c-ink); }
.band-navy { background: var(--band-navy); color: var(--c-paper); }
.band-navy h1, .band-navy h2, .band-navy h3 { color: var(--c-paper); }
.band-navy .prose p, .band-navy p { color: #E7ECF7; }
.band-navy a { color: var(--c-soft); }
.band-cyan .prose p { color: var(--c-ink); }

/* hero with the heading over the photo */
.hero-overlay { padding-block: 0; }
.hero-overlay .hero-photo {
  position: relative;
  inline-size: min(100%, 420px);
  margin-inline: auto;
}
.hero-overlay .photo-frame { border-radius: 0; }
.hero-overlay .hero-photo::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: 62%;
  background: linear-gradient(to top, rgba(10, 12, 40, 0.88), rgba(10, 12, 40, 0));
  pointer-events: none;
}
.hero-overlay h1 {
  position: absolute;
  inset-block-start: 56%;
  inset-inline: var(--sp-4);
  margin: 0;
  text-align: center;
  color: var(--c-paper);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

/* scalloped portrait */
.photo-blob {
  position: relative;
  inline-size: min(100%, 250px);
  margin-inline: auto;
  aspect-ratio: 1 / 1;
  padding: var(--blob-border);
  isolation: isolate;
}
.photo-blob::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--blob-color, var(--c-accent));
  -webkit-mask: var(--blob-mask) center / contain no-repeat;
  mask: var(--blob-mask) center / contain no-repeat;
  z-index: -1;
}
.photo-blob .photo-frame {
  --frame-ratio: 1 / 1;
  border-radius: 0;
  background: transparent;
  -webkit-mask: var(--blob-mask) center / contain no-repeat;
  mask: var(--blob-mask) center / contain no-repeat;
}
.photo-blob figcaption { text-align: center; }
/* An empty slot keeps the scalloped shape, so the layout reads correctly before
   the photo exists. The full description still lives in MISSING-CONTENT.md. */
.photo-blob .slot-inner { padding: var(--sp-3); gap: 2px; font-size: 0.78rem; }
.photo-blob .slot-desc { display: none; }
.photo-blob .slot-inner code { font-size: 0.72rem; padding: 1px 5px; }
.photo-blob .slot-frame { border: 0; }

/* a person: portrait and name on the start side, their text alongside */
.person-band {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 56rem) {
  .person-band { grid-template-columns: 260px 1fr; gap: var(--sp-8); }
}
.person-media { text-align: center; }
.person-media .person-name {
  margin-block: var(--sp-4) var(--sp-1);
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--name-colour, var(--c-accent));
}
.person-media .person-role {
  font-size: var(--fs-small);
  font-weight: 700;
  margin: 0;
  color: inherit;
}
.person-text p:last-of-type { margin-block-end: 0; }
.person-text .sig { font-weight: 700; margin-block-start: var(--sp-4); }

.btn-center { display: flex; justify-content: center; margin-block-start: var(--sp-6); }
.btn-center .btn { min-inline-size: 260px; }


/* ====================================================== paired carousel
   One photo and one quote per slide, moving together. Built on scroll-snap,
   so it works with no JavaScript at all: without JS it is a swipeable strip.
   Every slide is in the HTML, which is what keeps the quotes indexable.
   ===================================================================== */

.showcase { margin-block: var(--sp-6); }

.showcase-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.showcase-viewport::-webkit-scrollbar { display: none; }
.showcase-viewport:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 4px; border-radius: var(--radius); }

.showcase-track { display: flex; list-style: none; margin: 0; padding: 0; gap: 0; }

.showcase-slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
  align-items: center;
  padding-inline: 2px;
}
@media (min-width: 56rem) {
  .showcase-slide { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
}

.showcase-media .photo-frame { --frame-ratio: var(--ratio-card); }

/* the painted patch the quote sits on */
.showcase-quote {
  position: relative;
  margin: 0;
  padding: var(--sp-6) var(--sp-6) var(--sp-5);
  background: var(--c-sea);
  color: var(--c-ink);
  border-start-start-radius: 48% 60%;
  border-start-end-radius: 40% 55%;
  border-end-start-radius: 44% 52%;
  border-end-end-radius: 52% 58%;
}
.showcase-quote::before {
  content: '”';
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: var(--sp-5);
  font-size: 3.4rem;
  line-height: 1;
  color: var(--c-paper);
  opacity: 0.75;
}
.showcase-quote blockquote { margin: 0; }
.showcase-quote p { margin: 0; font-size: var(--fs-lead); line-height: 1.9; text-align: center; color: var(--c-ink); }
.showcase-quote figcaption { margin-block-start: var(--sp-3); font-size: var(--fs-small); font-weight: 700; text-align: center; }
.showcase-quote .missing-box { text-align: start; }

.showcase-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-4);
}
.sc-arrow {
  inline-size: 44px;
  block-size: 44px;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: var(--c-paper);
  color: var(--c-ink);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.band-navy .sc-arrow { background: transparent; border-color: rgba(255, 255, 255, 0.35); color: var(--c-paper); }
/* The chevron points toward the start of the reading direction for "previous"
   and the other way for "next". In RTL that is right and left respectively. */
.sc-arrow svg { transform: scaleX(-1); }
.sc-next svg { transform: scaleX(1); }
[dir="ltr"] .sc-arrow svg { transform: scaleX(1); }
[dir="ltr"] .sc-next svg { transform: scaleX(-1); }

.showcase-dots { display: flex; gap: var(--sp-2); list-style: none; margin: 0; padding: 0; }
.showcase-dots button {
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.showcase-dots button::before {
  content: '';
  inline-size: 10px;
  block-size: 10px;
  border-radius: 50%;
  background: var(--c-line);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.band-navy .showcase-dots button::before { background: rgba(255, 255, 255, 0.4); }
.showcase-dots button[aria-current="true"]::before { background: var(--c-accent); transform: scale(1.4); }

/* ============================================================== reviews */

.review-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 48rem) { .review-row { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .review-row[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
  .review-row[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
}

.review {
  position: relative;
  margin: 0;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.band-navy .review, .section-ink .review { background: rgba(255, 255, 255, 0.07); border-color: rgba(190, 238, 247, 0.3); }
.band-navy .review p { color: #E7ECF7; }
.review::before {
  content: '”';
  position: absolute;
  inset-block-start: 4px;
  inset-inline-start: var(--sp-4);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--c-sea);
}
.review blockquote { margin: 0; }
.review blockquote p { margin: 0; line-height: 1.8; }
.review figcaption { margin-block-start: auto; font-size: var(--fs-small); }
.review-name { font-weight: 700; display: block; }
.review-context { color: var(--c-muted); }
.band-navy .review-context { color: #AFBBD6; }
.review-pending { border-style: dashed; border-color: var(--c-warn-line); background: var(--c-warn-bg); }
.review-flag { margin: 0; font-size: 0.8125rem; font-weight: 700; color: var(--c-warn-ink); }

/* The quote sits on the real painted stroke from the old site, used as a mask so
   the colour still comes from the palette and can change per band. */
.showcase-quote {
  position: relative;
  margin: 0;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(2.5rem, 7vw, 5rem);
  background: var(--smear-colour, var(--c-sea));
  color: var(--c-ink);
  border-radius: 0;
  -webkit-mask: url('../img/smear.png') center / 100% 100% no-repeat;
  mask: url('../img/smear.png') center / 100% 100% no-repeat;
  min-block-size: 210px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.band-navy .showcase-quote, .quotes .showcase-quote { --smear-colour: #7FC5D4; }
.showcase-quote::before {
  content: '”';
  position: static;
  display: block;
  font-size: 2.6rem;
  line-height: 0.6;
  color: var(--c-paper);
  opacity: 0.85;
  text-align: center;
  margin-block-end: var(--sp-3);
}
.showcase-quote p { color: var(--c-ink); }
.showcase-quote figcaption {
  margin-block-start: var(--sp-3);
  font-size: 0.8125rem;
  font-weight: 700;
  text-align: center;
  color: var(--c-ink);
  opacity: 0.85;
}

/* A band with a hand drawn illustration at each edge. The drawings are
   decoration, so they are background images and carry no alt text. */
.band-illustrated { position: relative; overflow: hidden; }
.band-illustrated::before,
.band-illustrated::after {
  content: '';
  position: absolute;
  inset-block-end: 0;
  inline-size: clamp(90px, 16vw, 230px);
  block-size: clamp(110px, 20vw, 280px);
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
  opacity: 0.85;
  pointer-events: none;
}
.band-illustrated::before {
  inset-inline-start: clamp(4px, 2vw, 48px);
  background-image: var(--draw-start, url('../img/draw-tree.png'));
}
.band-illustrated::after {
  inset-inline-end: clamp(4px, 2vw, 48px);
  background-image: var(--draw-end, url('../img/draw-bench-lamp.png'));
}
@media (max-width: 47.99rem) {
  .band-illustrated::before, .band-illustrated::after { opacity: 0.35; }
}
.band-illustrated > .wrap { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- articles */

.article-body { font-size: var(--fs-lead); }
.article-body h2 {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--c-line);
}
.article-body h3 { margin-block-start: var(--sp-6); }
.article-body h2:first-child, .article-body h3:first-child { margin-block-start: 0; border-block-start: 0; }
.article-body p { margin-block-end: var(--sp-5); }
.article-body a { color: var(--c-ink); text-decoration: underline; text-decoration-color: var(--c-accent); }
.article-body a:hover { color: var(--c-sea-dark); }
.article-body ul, .article-body ol { margin-block-end: var(--sp-5); }
.article-body li { margin-block-end: var(--sp-2); }
.article-body blockquote {
  border-inline-start: 4px solid var(--c-accent);
  background: var(--c-shade);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-block-end: var(--sp-5);
}
.article-body blockquote p:last-child { margin-block-end: 0; }
.article-body hr { border: 0; border-block-start: 1px solid var(--c-line); margin-block: var(--sp-6); }
.article-body .photo { margin-block: var(--sp-6); }
.article-date { color: var(--c-muted); font-size: var(--fs-small); margin-block-start: var(--sp-2); }
.card h3 a { text-decoration: none; }
.card h3 a:hover { text-decoration: underline; }

/* ------------------------------------------------------------- misc blocks */

.cta-band { background: var(--c-soft); border-radius: var(--radius-lg); padding: var(--sp-6); text-align: start; }
.cta-band h2 { margin-block-end: var(--sp-2); }
.cta-band p { color: var(--c-ink-2); max-inline-size: 52ch; }

.jump-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.jump-list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-shade);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  text-decoration: none;
  font-size: var(--fs-small);
  font-weight: 700;
}
.jump-list a:hover { background: var(--c-soft); }

.notice {
  border-inline-start: 4px solid var(--c-sea);
  background: var(--c-shade);
  border-radius: var(--radius);
  padding: var(--sp-4);
  font-size: var(--fs-small);
}

.error-actions { margin-block-start: var(--sp-5); }

/* --------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ================================================== band context overrides
   Every page is now a stack of full width bands, cyan and navy alternating.
   Each component has to read correctly on both, so the rules below set the
   contrast per band rather than per page. Text on navy is #E7ECF7 and text on
   cyan is the navy ink, both comfortably past 4.5:1.
   ======================================================================== */

/* header and breadcrumb, site wide */
.site-header { background: var(--band-cyan); border-block-end-color: #9FD9E6; }
.site-nav { background: var(--band-cyan); }
@media (min-width: 62rem) { .site-nav { background: transparent; } }
.breadcrumb { background: var(--band-cyan); border-block-end-color: #9FD9E6; }
.brand-tag { color: #3C5566; }
.nav-list a[aria-current="page"] { color: var(--c-accent-ink); }

/* eyebrow and subtitle */
.band-cyan .eyebrow, .band-cyan .hero-eyebrow, .band-cyan .tour-sub { color: #1C6472; }
.band-navy .eyebrow, .band-navy .hero-eyebrow, .band-navy .tour-sub { color: var(--c-soft); }
.band-navy .section-head h2, .band-navy .tour-head h2 { color: var(--c-paper); }

/* cards and panels */
.band-cyan .card, .band-cyan .tour-facts, .band-cyan .contact-card, .band-cyan .form-card {
  background: var(--c-paper);
  border-color: #A6DDEA;
}
.band-navy .card, .band-navy .tour-facts, .band-navy .contact-card {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(190, 238, 247, 0.28);
  color: var(--c-paper);
}
.band-navy .card h3, .band-navy .contact-card .c-name, .band-navy .tour-facts dd { color: var(--c-paper); }
.band-navy .card p, .band-navy .contact-card .c-role, .band-navy .tour-facts dt { color: #BCC7E0; }
.band-navy .card-date { color: var(--c-soft); }
.band-navy .card-more { color: var(--c-accent); }
.band-navy .tour-facts .note { color: #BCC7E0; }
.band-navy .contact-card a { color: var(--c-soft); }
.band-navy .c-wa { color: var(--c-soft); }

/* the form always sits on white, wherever it lands */
.band-navy .form-card { background: var(--c-paper); color: var(--c-ink); border-color: rgba(190, 238, 247, 0.4); }
.band-navy .form-card h2, .band-navy .form-card label { color: var(--c-ink); }
.band-navy .form-card .hint, .band-navy .form-card .form-alt { color: var(--c-muted); }
.band-navy .form-card a { color: var(--c-ink); }

/* buttons */
.band-navy .btn-ghost { color: var(--c-paper); border-color: var(--c-soft); }
.band-navy .btn-ghost:hover { background: var(--c-soft); color: var(--c-ink); }
.band-navy .btn-quiet { background: rgba(255, 255, 255, 0.12); color: var(--c-paper); }

/* jump list */
.band-navy .jump-list a {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(190, 238, 247, 0.3);
  color: var(--c-paper);
}
.band-navy .jump-list a:hover { background: var(--c-soft); color: var(--c-ink); }
.band-cyan .jump-list a { background: var(--c-paper); border-color: #A6DDEA; }

/* captions, notes, rules */
.band-navy .photo figcaption { color: #BCC7E0; }
.band-cyan .photo figcaption { color: #2E5260; }
.band-navy .tour { border-block-start-color: rgba(190, 238, 247, 0.25); }
.band-cyan .tour { border-block-start-color: #9FD9E6; }
.band-navy .notice { background: rgba(255, 255, 255, 0.08); border-inline-start-color: var(--c-soft); color: var(--c-paper); }
.band-cyan .notice { background: var(--c-paper); }

/* the closing call to action needs to separate from whatever band it sits on */
.band-cyan .cta-band { background: var(--band-navy); color: var(--c-paper); }
.band-cyan .cta-band h2 { color: var(--c-paper); }
.band-cyan .cta-band p { color: #D6DEF0; }
.band-navy .cta-band { background: var(--c-soft); color: var(--c-ink); }
.band-navy .cta-band h2 { color: var(--c-ink); }
.band-navy .cta-band p { color: var(--c-ink-2); }

/* every hero is the same shape on every page, which is what keeps the h1 in
   the same place site wide */
.hero-overlay .hero-photo { inline-size: min(100%, 460px); }
.hero-overlay .hero-lead {
  margin: var(--sp-5) auto 0;
  text-align: center;
  color: #D6DEF0;
  max-inline-size: 56ch;
}
.hero-overlay .jump-list { justify-content: center; margin-block-start: var(--sp-5); }
.hero-overlay .btn-row { justify-content: center; margin-block-start: var(--sp-5); }
.hero-overlay { padding-block: var(--sp-7) var(--sp-7); }
@media (min-width: 48rem) { .hero-overlay { padding-block: var(--sp-8) var(--sp-8); } }

/* prose inside a navy band */
.band-navy .prose p, .band-navy .lead { color: #E7ECF7; }
.band-navy .prose a { color: var(--c-soft); }
.band-navy .sig { color: var(--c-soft); }
.band-navy dl a { color: var(--c-soft); }

.hero-overlay .hero-eyebrow {
  justify-content: center;
  color: var(--c-soft);
  margin: 0 auto var(--sp-4);
}
.hero-overlay .hero-eyebrow::before { background: var(--c-accent); }
.hero-overlay h1 { font-size: var(--fs-h1); }

/* The eyebrow keeps one line's height whatever it says, so a long one does not
   push the heading down on that page alone. */
.hero-overlay .hero-eyebrow {
  block-size: var(--hero-eyebrow-h);
  white-space: nowrap;
  overflow: hidden;
}
/* The heading sits beside the photo on desktop and above it on phones, never on
   top of it, so a long title (tours, articles) cannot spill out of the frame.
   .hero-photo keeps the markup of every page unchanged: display: contents lets
   the photo and the h1 inside it take their own grid areas. */
.hero-overlay .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "eyebrow" "title" "photo" "lead" "actions";
  justify-items: center;
  text-align: center;
}
.hero-overlay .hero-photo { display: contents; }
.hero-overlay .hero-photo::after { content: none; }
.hero-overlay .hero-eyebrow { grid-area: eyebrow; inline-size: 100%; }
.hero-overlay .hero-photo > figure { grid-area: photo; inline-size: min(100%, 460px); margin: 0; }
.hero-overlay h1 {
  grid-area: title;
  position: static;
  margin: 0 0 var(--sp-5);
  text-align: inherit;
  text-shadow: none;
  color: var(--c-paper);
  max-inline-size: 24ch;
}
.hero-overlay .hero-lead { grid-area: lead; }
.hero-overlay .jump-list,
.hero-overlay .btn-row,
.hero-overlay .article-date { grid-area: actions; }

@media (min-width: 62rem) {
  .hero-overlay .wrap {
    grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: ". photo" "eyebrow photo" "title photo" "lead photo" "actions photo" ". photo";
    column-gap: var(--sp-8);
    justify-items: start;
    text-align: start;
  }
  .hero-overlay .hero-photo > figure { inline-size: 100%; }
  .hero-overlay .hero-eyebrow { justify-content: flex-start; margin: 0 0 var(--sp-4); }
  .hero-overlay h1 { margin-block-end: 0; max-inline-size: none; }
  .hero-overlay .hero-lead { margin: var(--sp-4) 0 0; text-align: start; }
  .hero-overlay .jump-list,
  .hero-overlay .btn-row { justify-content: flex-start; }
}

/* A page with no breadcrumb still reserves the band, so the heading sits at the
   same offset as every page that has one. */
.breadcrumb-spacer { pointer-events: none; }
.breadcrumb-spacer ol { visibility: hidden; }

/* Quote cards were written for a dark background. Now that a band can be either
   colour, they need both. */
.band-cyan .quote-card {
  background: var(--c-paper);
  border-color: #A6DDEA;
}
.band-cyan .quote-card blockquote p { color: var(--c-ink); }
.band-cyan .quote-card .quote-link { color: var(--c-accent-ink); border-block-end-color: var(--c-accent); }
.band-cyan .quote-card .quote-link:hover { color: var(--c-ink); }
.band-navy .quote-card blockquote p { color: var(--c-paper); }
.band-navy .quote-card .quote-link { color: var(--c-soft); }
.band-cyan .quote-card figcaption { color: var(--c-accent-ink); }
.band-navy .quote-card figcaption { color: var(--c-soft); }
.band-cyan .missing-box { background: var(--c-paper); }

/* Drawing pairs for an illustrated band. The drawings are the client's own, from
   the old site. They are decoration, so they stay background images with no alt. */
.draw-a { --draw-start: url('../img/draw-tree.png'); --draw-end: url('../img/draw-bench-lamp.png'); }
.draw-b { --draw-start: url('../img/draw-bird.png'); --draw-end: url('../img/draw-pipe.png'); }
.draw-c { --draw-start: url('../img/draw-table.png'); --draw-end: url('../img/draw-tree.png'); }
.draw-d { --draw-start: url('../img/draw-pipe.png'); --draw-end: url('../img/draw-table.png'); }

/* Article and card headings that act as a list title rather than a subheading */
.card-title { font-size: var(--fs-h3); margin: 0; }
.card-title a { text-decoration: none; }
.card-title a:hover { text-decoration: underline; }

/* A quiet reveal as each band comes into view. Movement is small and short, it
   only ever runs once, and it is switched off entirely for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); }
  .reveal.is-in { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
}

/* Printing. A coordinator who prints a tour page wants the dates, the meeting
   point and the phone numbers, not the navigation or the decoration. */
@media print {
  .site-header, .fab-dock, .modal, .breadcrumb, .showcase-controls,
  .band-illustrated::before, .band-illustrated::after, .photo-slot, .missing-box { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band, .band-cyan, .band-navy { background: #fff !important; color: #000 !important; padding-block: 0.6cm; }
  .band-navy h1, .band-navy h2, .band-navy h3, .band-navy p, .band-navy dd, .band-navy dt { color: #000 !important; }
  .hero-overlay h1 { position: static; color: #000; text-shadow: none; text-align: start; }
  .hero-overlay .hero-photo::after { display: none; }
  .showcase-viewport { overflow: visible; }
  .showcase-track { display: block; }
  .showcase-slide { break-inside: avoid; }
  .btn { border: 1px solid #000; color: #000 !important; background: none !important; }
  a[href^="/"]::after { content: " (tlvguide.com" attr(href) ")"; font-size: 9pt; }
  .site-footer { background: #fff !important; color: #000 !important; border-block-start: 1px solid #000; }
  .site-footer a { color: #000; }
}

.jump-list li { max-inline-size: 100%; }
.jump-list a {
  max-inline-size: 100%;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding-block: var(--sp-2);
  line-height: 1.5;
}

/* Only the current page's crumb shrinks and ellipsises. The links before it keep
   their full width, otherwise a long article title squeezes 'מאמרים' into
   nothing on a narrow screen. */
.breadcrumb li { flex: 0 0 auto; }
.breadcrumb li:last-child { flex: 0 1 auto; }

/* Give the drawings their own strip at the bottom of the band so they sit beside
   the content rather than behind a card corner. */
.band-illustrated { padding-block-end: calc(var(--sp-8) + 3.5rem); }
@media (max-width: 47.99rem) { .band-illustrated { padding-block-end: calc(var(--sp-7) + 2rem); } }