/* Home additions: the living sea and the four paths in the closing plate. */
.sea-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }
.map { gap: var(--sc-5); }
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sc-2) var(--sc-5); margin-block-start: var(--sc-6); padding-block-start: var(--sc-5); border-top: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent); }
.paths a { font: 400 1.35rem/1.2 var(--sc-font-display); color: var(--sc-ink); text-decoration: none; transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .paths a:hover { color: var(--sc-accent); } }
@media (max-width: 860px) {
  .seg--hero .sea-loop {
    inset: auto 0; inset-block-start: calc(46% - 50vw); height: auto; aspect-ratio: 1 / 1;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%);
  }
  .map { display: none; }
}
@media (max-width: 1100px) and (min-width: 861px) { .map { gap: var(--sc-4); } }
.home-menu { display: none; font: 500 var(--sc-t-xs)/1 var(--sc-font-text); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-ink); background: none; border: 0; padding: var(--sc-2) 0; cursor: pointer; }
@media (max-width: 860px) {
  .home-menu { display: block; margin-inline-start: auto; }
  .langs { margin-inline-start: var(--sc-4); }
  .menu-open .map { display: grid; position: fixed; inset: 0; z-index: -1; place-content: center; gap: var(--sc-3); background: var(--sc-canvas); text-align: center; }
  .menu-open .map a { font: 400 2.2rem/1.2 var(--sc-font-display); text-transform: none; letter-spacing: 0; }
}

/* Gold, where the story turns: the name's meaning, and the arrival. */
.cp--shore .line { color: var(--sc-accent); font-style: italic; font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem); letter-spacing: -0.025em; }
.cp--shore .sub { color: var(--sc-ink); opacity: .8; }
:lang(he) .cp--shore .line { font-style: normal; }
.arrived { color: var(--sc-accent); }
.cp--land .line { font-size: clamp(2.4rem, 1.3rem + 4vw, 5.2rem); }
.cp--contact .line { color: var(--sc-accent); font-style: italic; }
:lang(he) .cp--contact .line { font-style: normal; }
.addr a { color: var(--sc-ink-soft); text-underline-offset: .3em; }
.paths a:nth-child(odd) { font-style: italic; }

/* The first line now lives on the dark seam, after the sea has gone: the
   opening screen is the wave and nothing else. */
.cp--sea { inset-inline: var(--sc-gutter); inset-block: 50% auto; translate: 0 -50%; max-width: none; text-align: center; }
.cp--sea .line { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); max-width: 22ch; margin-inline: auto; }
.cp--sea .sub { margin-inline: auto; max-width: 52ch; color: var(--sc-ink); opacity: .78; }
.cp--shore .safe { margin-top: var(--sc-6); font: italic 400 clamp(1.4rem, 1rem + 1.4vw, 2.3rem)/1.2 var(--sc-font-display); color: var(--sc-ink); letter-spacing: -0.01em; }
:lang(he) .cp--shore .safe { font-style: normal; }
/* Buying, selling, renting: the first title after the sea, in gold. */
.cp--sea .line { color: var(--sc-accent); font-style: italic; }
:lang(he) .cp--sea .line { font-style: normal; }

/* ---- accessibility pass (A11Y-REVIEW.md, 2026-10-21) --------------------- */
main:focus { outline: none; }
/* B4: the hushed chrome comes back the moment anything in it has focus. */
.is-hushed .chrome:focus-within { opacity: 1; pointer-events: auto; }
/* B2: the sea pause button, gold on dark, quiet at the end of the chrome. */
.sea-toggle { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer;
  color: var(--sc-accent); background: color-mix(in oklab, var(--sc-canvas) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--sc-accent) 55%, transparent); border-radius: 50%;
  transition: border-color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.sea-toggle[hidden] { display: none; }
.sea-toggle svg { width: .9rem; height: .9rem; fill: currentColor; }
.sea-toggle__play, .sea-toggle[aria-pressed="true"] .sea-toggle__pause { display: none; }
.sea-toggle[aria-pressed="true"] .sea-toggle__play { display: block; }
[dir="rtl"] .sea-toggle__play { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) { .sea-toggle:hover { border-color: var(--sc-accent); background: var(--sc-canvas); } }
/* B1: the legal documents in the closing plate. */
.legal { display: flex; flex-wrap: wrap; gap: var(--sc-1) var(--sc-4); margin-block-start: var(--sc-5); padding-block-start: var(--sc-4);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 12%, transparent); }
.legal a { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); text-underline-offset: .3em; padding-block: .3rem; }
@media (hover: hover) and (pointer: fine) { .legal a:hover { color: var(--sc-accent); } }
/* S6: at 320px or 200% text the plate scrolls inside itself instead of clipping. */
.cp--contact { max-height: calc(100svh - var(--ak-top) - var(--ak-bottom) - 5.5rem); overflow-y: auto; overscroll-behavior: contain; }
/* M7: below 1100px the eight links crowd the chrome: use the menu. */
@media (max-width: 1100px) {
  .map { display: none; }
  .home-menu { display: block; margin-inline-start: auto; }
  .langs { margin-inline-start: var(--sc-4); }
  .menu-open .map { display: grid; position: fixed; inset: 0; z-index: -1; place-content: center; gap: var(--sc-3);
    background: var(--sc-canvas); text-align: center; overflow-y: auto; padding-block: 5rem 2rem; }
  .menu-open .map a { font: 400 2.2rem/1.2 var(--sc-font-display); text-transform: none; letter-spacing: 0; }
}
/* M8: Hebrew is never letter-spaced. */
:lang(he) .map a, :lang(he) .langs button, :lang(he) .home-menu, :lang(he) .also button, :lang(he) .legal a { letter-spacing: 0; }