/* Sillon takes shape after the waterline has cleared the screen. */
.dive {
  --sillon-rise: 430svh;
  height: calc(var(--sillon-rise) + 130svh);
}
.dive > #sillon-process { top: calc(var(--sillon-rise) * .33); }
.dive > #demo-sillon { top: var(--sillon-rise); }
.dive .pin { background: var(--ivoire); }
html:not(.calm) .dive .pin:not([data-surfaced]) .shore { visibility: hidden; }
html:not(.nowebgl) .dive .pin[data-crossing] .water { background: none; }
html.nowebgl:not(.calm) .dive .water { opacity: calc(1 - var(--story-surface, 0)); }
.dive .water {
  background: radial-gradient(125% 74% at 64% 1%, #a9d8cd, #276f7d 21%, #103b45 46%, #03161b 80%);
}
.dive .intro .hint {
  display: inline-flex;
  gap: .7rem;
  align-items: center;
  min-height: 44px;
  margin-top: .65rem;
  color: #eaf6f3;
  font-size: .94rem;
  font-weight: 620;
  pointer-events: auto;
  text-underline-offset: .28em;
}
.dive .scene-note { z-index: 1; pointer-events: none; }
.shore {
  z-index: 2;
  background: transparent;
  pointer-events: none;
}
.shore .example-bar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: min-content 1fr;
  align-items: center;
  align-content: start;
  gap: 5px 24px;
  min-height: 118px;
  padding: clamp(12px, 2.1svh, 22px) 4px 12px;
}
.example-kicker {
  grid-column: 1 / -1;
  margin: 0;
  justify-self: start;
  border-radius: 99px;
  padding: 6px 12px;
  background: #0d303a;
  color: #f9f4ea;
  font-size: .78rem;
  font-weight: 650;
  line-height: 1.3;
  opacity: var(--story-label, 0);
}
.example-title {
  grid-column: 1;
  margin: 0;
  color: var(--encre);
  font-size: clamp(1.15rem, 2.25vw, 2rem);
  font-weight: 590;
  line-height: 1.15;
  text-wrap: balance;
}
.shore .example-actions { grid-column: 2; }
.shore .example-title, .shore .example-actions { opacity: var(--story-landing, 0); }
.shore a:not([inert]), .shore button:not([inert]) { pointer-events: auto; }
.shore [inert] { pointer-events: none; }
.shore .frame-top {
  --frame-inset: calc((1 - var(--story-landing, 0)) * .7%);
  clip-path: inset(var(--frame-inset) round var(--preview-radius));
  opacity: var(--story-frame, 0);
}
.shore .site-scroll { background: var(--porcelaine, #f4f3ee); }
.shore .frame-top [data-stage="1"] { opacity: var(--story-photo, 0); }
.shore .frame-top [data-stage="2"] { opacity: var(--story-type, 0); }
.shore .frame-top [data-stage="3"] { opacity: var(--story-booking, 0); }
.shore .frame-top .s-next [data-stage="3"] { opacity: 1; }
.shore .frame-top .workshop-open[hidden] { display: none; }
.shore[data-stage="0"] [data-stage="1"],
.shore[data-stage="0"] [data-stage="2"],
.shore[data-stage="1"] [data-stage="2"],
.shore:is([data-stage="0"], [data-stage="1"], [data-stage="2"]) [data-stage="3"] { visibility: hidden; }
.shore .ask {
  position: absolute;
  left: max(var(--gut), calc((100% - 74rem) / 2));
  right: var(--gut);
  top: calc(var(--top-h) + clamp(45px, 6.4svh, 60px));
  bottom: auto;
  z-index: 3;
  width: auto;
  margin: 0;
  color: var(--encre);
  opacity: var(--story-ask, 0);
  transform: none;
}
.shore .ask-lead { display: none; }
.shore .ask ol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.shore .ask li {
  grid-area: 1 / 1;
  justify-self: start;
  visibility: hidden;
  max-width: min(100%, 49rem);
  padding: 5px 10px 7px;
  border-radius: 8px;
  background: var(--ivoire-2);
  border: 1px solid var(--ivoire-ligne);
  opacity: 1;
  transition: none;
}
.shore .ask li.on { visibility: visible; }
.shore .ask .q {
  font-size: clamp(1.06rem, 1.8vw, 1.5rem);
  font-weight: 630;
}
.shore .ask li .a {
  margin-top: 4px;
  min-height: 0;
  opacity: var(--story-answer, 0);
  color: var(--encre-doux);
  font-size: clamp(.86rem, 1.4vw, 1.02rem);
  line-height: 1.3;
  transition: none;
}
.shore .ask li:not(.answered) .a { visibility: hidden; }
.shore .ask:focus-visible { outline-offset: 3px; }

@media (max-width: 720px) {
  .dive .intro { bottom: 39px; }
  .dive .scene-note { bottom: 14px; }
  .dive .intro .hint { margin-top: .35rem; }
  .shore .example-bar { grid-template-columns: 1fr; gap: 6px; min-height: 142px; }
  .shore .example-actions { grid-column: 1; }
  .shore .s-nav { height: 47px; }
  .shore .s-body { grid-template-rows: minmax(100px, 1fr) auto; gap: 13px; padding-bottom: 15px; }
  .shore .s-photo { grid-row: 1; margin: 0 -12px 0 0; }
  .shore .s-copy { grid-row: 2; padding-top: 0; }
  .shore .s-copy h2 { font-size: clamp(1.6rem, 7.5cqw, 2.7rem); }
  .shore .s-lede { margin-bottom: 12px; }
}
@media (max-width: 720px) and (max-height: 640px) {
  .shore .example-bar { min-height: 124px; }
  .shore .s-next, .shore .s-lede { display: none; }
}

html.calm .dive .intro .hint { display: inline-flex; }
html.calm .dive .intro {
  min-height: 100svh;
  height: auto;
  padding-top: calc(var(--top-h) + 24px);
  padding-bottom: 58px;
}
html.calm .dive .scene-note { top: calc(100svh - 33px); }
html.calm .shore { pointer-events: auto; padding-bottom: clamp(36px, 6vw, 72px); }
html.calm .shore .example-bar { min-height: 0; padding-top: 22px; padding-bottom: 18px; }
html.calm .shore .example-kicker, html.calm .shore .example-title,
html.calm .shore .example-actions, html.calm .shore .frame-top,
html.calm .shore .frame-top [data-stage] { opacity: 1; visibility: visible; }
html.calm .shore .frame-top { clip-path: none; }
html.calm .shore .s-hero { min-height: 0; height: auto; }
html.calm .shore .s-photo { height: clamp(220px, 36vw, 470px); }
html.calm .shore .ask {
  position: relative;
  inset: auto;
  opacity: 1;
  width: var(--preview-width);
  max-width: none;
  margin: 0 auto;
  padding: 34px 0 0;
  color: var(--encre);
}
html.calm .shore .ask-lead { display: block; font-size: 1.28rem; color: inherit; }
html.calm .shore .ask ol { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
html.calm .shore .ask li {
  grid-area: auto;
  visibility: visible;
  padding: 10px 0 0;
  border-top: 1px solid var(--ivoire-ligne);
  border-radius: 0;
  background: none;
}
html.calm .shore .ask li .a { visibility: visible; color: var(--encre-doux); opacity: 1; }
html.calm .s-profile .pot { transition: none; }
@media (max-width: 720px) {
  html.calm .shore .s-photo { height: clamp(170px, 48vw, 340px); }
  html.calm .shore .ask ol { grid-template-columns: 1fr; gap: 12px; }
}