/* sail/assets/css/sail.css
   SAIL — Supporting Adult Independent Living Ltd.

   Palette and logo are taken from the sample Aslam showed the client, which
   they asked to keep. Everything else is built to the standard set on the
   Supporting Homeless rebuild.

   MEASURED CONTRAST, and one rule that follows from it:

     navy #150E38 on cream #F0EAD6   15.15:1
     navy on gold  #F2C861           11.47:1
     navy on rose  #C5587D            4.40:1   <-- FAILS body text (needs 4.5)
     white on rose #C5587D            4.15:1   <-- also fails
     white/cream on navy             18.2 / 15.2:1

   The sample sets its hero paragraph in navy over the rose end of the
   gradient, which measures 4.40:1 and fails. So: THE GRADIENT CARRIES LARGE
   DISPLAY TYPE ONLY (which passes the 3:1 large-text threshold at 4.40),
   never body copy. Body copy sits on cream, on white, or on navy. The
   identity is kept exactly; only where the words go changes. */

@font-face {
  font-family: "Poppins";
  src: url(../fonts/poppins-600.woff2) format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/atkinson-400.woff2) format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url(../fonts/atkinson-700.woff2) format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --navy:     #150E38;
  --ink-soft: #453E6B;   /* 8.10:1 on cream, 9.58:1 on white */
  --cream:    #F0EAD6;
  --paper:    #FFFDF7;
  --rose:     #C5587D;
  --rose-2:   #C96585;
  --gold:     #F2C861;
  --rule:     #DED6BE;

  /* The sample pairs Poppins with Inter. Poppins is kept for display -- it
     matches the roundness of the Sail wordmark. Inter is replaced by
     Atkinson Hyperlegible, drawn by the Braille Institute for low-vision
     readers: this audience includes people in crisis reading on old phones,
     and it is already self-hosted from the sister site's build. */
  --display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body:    "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;

  --grad: linear-gradient(100deg, var(--rose) 0%, var(--gold) 52%, var(--rose-2) 100%);

  --s1: .5rem;  --s2: 1rem;   --s3: 1.5rem;
  --s4: 2.5rem; --s5: 4rem;   --s6: 6rem;

  --measure: 32rem;
}

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font: 1.125rem/1.68 var(--body);   /* 18px floor, same as the sister site */
  -webkit-text-size-adjust: 100%;
  text-wrap: pretty;
}
main { display: block; }
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0 0 var(--s3); text-wrap: balance; color: var(--navy); }
h1 { font: 600 clamp(2rem, 5vw, 3.2rem)/1.1 var(--display); letter-spacing: -.025em; }
h2 { font: 600 clamp(1.6rem, 3.4vw, 2.3rem)/1.18 var(--display); letter-spacing: -.02em; }
h3 { font: 600 1.15rem/1.35 var(--display); letter-spacing: -.01em; }
p, li { max-width: var(--measure); }
a { color: #8E2F52; }              /* rose, darkened to pass on cream */
a:hover { color: var(--navy); }

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

.skip-link { position: absolute; left: -9999px; background: var(--navy); color: #fff; padding: var(--s2); }
.skip-link:focus { left: var(--s2); top: var(--s2); z-index: 100; }

.wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }
.intro { padding: var(--s5) 0 var(--s4); }
.lede { font-size: 1.22rem; color: var(--ink-soft); max-width: 44ch; }

button, .choice { cursor: pointer; }

/* --- header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) max(1.25rem, calc((100% - 78rem) / 2));
  background: rgba(240, 234, 214, .92);
  border-bottom: 1px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .site-header {
    background: rgba(240, 234, 214, .86);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    backdrop-filter: blur(14px) saturate(1.3);
  }
}
.site-header[data-stuck="true"] {
  border-bottom-color: var(--rule);
  box-shadow: 0 10px 30px -22px rgba(21, 14, 56, .5);
}
@media (prefers-reduced-motion: reduce) { .site-header { transition: none; } }

.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; color: inherit; min-height: 44px; }
.brand img { width: 125px; height: 54px; object-fit: contain; flex: none; }
.brand-text {
  font: 400 .74rem/1.3 var(--body); color: var(--ink-soft);
  letter-spacing: .08em; text-transform: uppercase; max-width: 12ch;
}

.nav { margin-left: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.nav li { max-width: none; }
.nav a { display: inline-block; font-size: .95rem; text-decoration: none; color: var(--ink-soft); padding: .7rem .35rem; }
.nav a span { display: inline-block; padding-bottom: 2px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy); }
.nav a[aria-current="page"] span { box-shadow: 0 2px 0 var(--rose); }
.nav-toggle { display: none; }

@media (max-width: 940px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: var(--s1); margin-left: auto;
    font: inherit; font-size: 1rem; background: none;
    border: 1px solid var(--rule); border-radius: 3px;
    padding: .6rem var(--s2); color: inherit; cursor: pointer; min-height: 44px;
  }
  .nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after {
    content: ""; display: block; width: 20px; height: 2px; background: currentColor;
  }
  .nav-toggle__bar::before { transform: translateY(-6px); }
  .nav-toggle__bar::after  { transform: translateY(4px); }
  .nav { flex-basis: 100%; display: none; margin-left: 0; }
  .nav[data-open="true"] { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { display: block; padding: .85rem .25rem; }
  .brand-text { display: none; }
}

/* --- buttons ------------------------------------------------------------ */
.button {
  display: inline-block; text-decoration: none;
  background: var(--navy); color: var(--cream);
  border: 2px solid var(--navy); border-radius: 3px;
  padding: .8rem 1.4rem; font: 600 1rem/1.2 var(--display); letter-spacing: -.01em;
  min-height: 44px;
}
.button:hover { background: #241A55; color: var(--cream); }
@media (prefers-reduced-motion: no-preference) {
  .button { transition: transform .18s ease, background-color .18s ease; }
  .button:active { transform: translateY(1px); }
}
.button--quiet { background: transparent; color: var(--navy); border-color: var(--navy); }
.button--quiet:hover { background: rgba(21, 14, 56, .08); color: var(--navy); }

/* --- hero: the parallax scene ------------------------------------------
   Rebuilt from the original sail.house. Colours, sizes and depths are its
   own. The headline sits in .hero__inner ABOVE the scene, never inside it,
   so the text is in normal reading order and the decoration is aria-hidden.

   Contrast: the headline is navy over the near sun (#f2c861, 11.47:1) and
   the rose sky (#bf4471). Navy on that rose measures 4.02:1 -- large-text
   only, which the h1 comfortably is. The sub-heading is set at display size
   and weight for the same reason, and a scrim behind the text block lifts
   both well clear. Body-sized copy never sits on this scene. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #bf4471; }
.hero__scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__layer { position: absolute; inset: 0; will-change: transform; }

.sun { position: absolute; top: 50%; left: 50%; border-radius: 50%; display: block; }
.sun--far  { width: 800px; height: 800px; margin: -400px 0 0 -400px; background: #f86a57; box-shadow: 0 0 32px rgba(0,0,0,.2); }
.sun--near { width: 500px; height: 500px; margin: -250px 0 0 -250px; background: #f2c861; box-shadow: 0 0 16px rgba(0,0,0,.2); }

.hero__ocean {
  position: absolute; top: 50%; height: 50%; width: 100%;
  background-image: linear-gradient(rgba(34,115,199,.8), rgba(34,115,199,.95));
  background-color: rgba(34,115,199,.85);
  text-align: center;
}
.hero__ocean img { width: 32px; height: auto; display: inline-block; transform: translateY(-54px); }
@media (prefers-reduced-motion: no-preference) {
  /* The boat rides the swell. 8s, 32px of travel -- the original figure. */
  .hero__ocean { animation: ocean 8s infinite ease-in-out; }
}
@keyframes ocean {
  0%, 100% { transform: translateY(16px); }
  50%      { transform: translateY(-16px); }
}

.hero__skyline { position: absolute; bottom: 0; width: 1200px; height: calc(10vw + 60%); max-width: none; }
.hero__skyline--l { left: 25%; transform: translateX(-50%) scale(1.5); }
.hero__skyline--r { right: 25%; transform: translateX(50%) scale(1.5); }

.hero__inner { position: relative; padding: var(--s6) 0 var(--s5); min-height: clamp(26rem, 62vh, 34rem); display: flex; align-items: center; }
.hero h1 { color: var(--navy); max-width: 18ch; margin: 0; }
.hero__sub {
  /* Navy on the rose end measures 4.40:1 -- fine for large text, not for
     this. Set at 1.35rem/600, which clears the large-text threshold, and
     kept short. Anything longer belongs on the cream below. */
  font: 600 clamp(1.25rem, 2.2vw, 1.5rem)/1.4 var(--display);
  color: var(--navy); max-width: 30ch; margin: var(--s3) 0 0;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s4) 0 0; }

/* --- bands -------------------------------------------------------------- */
.band { padding: var(--s5) 0; }
.band--paper { background: var(--paper); }
.band--navy { background: var(--navy); color: var(--cream); }
.band--navy h2, .band--navy h3 { color: var(--cream); }
.band--navy p { color: rgba(240, 234, 214, .84); }
.band--navy a { color: var(--gold); }
.band--navy .button { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.band--navy .button:hover { background: #F5D480; color: var(--navy); }
.band--navy .button--quiet { background: transparent; color: var(--cream); border-color: rgba(240,234,214,.55); }

.eyebrow {
  font: 600 .78rem/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
  color: #8E2F52; margin: 0 0 var(--s2);
}
.band--navy .eyebrow { color: var(--gold); }

/* --- tick lists --------------------------------------------------------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding-left: 1.6rem; margin-bottom: .6rem;
  color: var(--ink-soft); max-width: 40ch; line-height: 1.55;
}
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--rose);
}
.band--navy .ticks li { color: rgba(240, 234, 214, .84); }
.band--navy .ticks li::before { background: var(--gold); }

/* --- footer ------------------------------------------------------------- */
.site-footer { background: var(--navy); color: rgba(240, 234, 214, .82); padding: var(--s5) 0 var(--s4); }
.site-footer h2 {
  font: 600 .8rem/1.3 var(--display); letter-spacing: .11em; text-transform: uppercase;
  color: rgba(240, 234, 214, .6); margin: 0 0 var(--s2);
}
.site-footer p { margin: 0 0 var(--s1); }
.site-footer a { color: var(--cream); }
.site-footer a:hover { color: var(--gold); }
.footer-cols { display: grid; grid-template-columns: 1.25fr 1fr 1.1fr; gap: var(--s5); padding-bottom: var(--s4); }
.footer-col--brand img { width: 125px; height: 54px; object-fit: contain; }
.footer-orgname { font: 600 1.1rem/1.25 var(--display); color: var(--cream); margin: var(--s2) 0 .5rem; }
.footer-blurb { color: rgba(240, 234, 214, .72); max-width: 34ch; }
.footer-phone a { font: 600 1.5rem/1.2 var(--display); text-decoration: none; letter-spacing: -.02em; }
.footer-phone a:hover { text-decoration: underline; }
.footer-note { color: rgba(240, 234, 214, .66); max-width: 30ch; margin-top: var(--s2); }
.site-footer .button--quiet { color: var(--cream); border-color: rgba(240, 234, 214, .5); }
.footer-base { border-top: 1px solid rgba(240, 234, 214, .16); padding-top: var(--s3); }
.footer-base p { margin: 0; color: rgba(240, 234, 214, .6); font-size: 1rem; }

@media (max-width: 56rem) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s4); }
  .footer-col--brand { grid-column: 1 / -1; }
}
@media (max-width: 36rem) {
  .footer-cols { grid-template-columns: 1fr; }
  .footer-col--brand { grid-column: auto; }
}

/* Screen-reader-only text. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* --- facts band --------------------------------------------------------- */
.facts { background: var(--navy); color: var(--cream); }
.facts ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.facts li { max-width: none; padding: var(--s4) var(--s3); border-left: 1px solid rgba(240,234,214,.17); }
.facts li:first-child { border-left: 0; padding-left: 0; }
.facts b {
  display: block; color: var(--gold);
  font: 600 clamp(1.7rem, 3.3vw, 2.5rem)/1.06 var(--display);
  letter-spacing: -.025em; margin-bottom: .4rem;
}
.facts span { display: block; color: rgba(240,234,214,.82); font-size: 1.02rem; line-height: 1.45; max-width: 26ch; }

/* --- split / general layout --------------------------------------------- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s5); align-items: start; }
.split__figure { margin: 0; }
.split__figure img { width: 100%; border-radius: 4px; box-shadow: 0 18px 44px -28px rgba(21,14,56,.6); }
.philo { display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--s5); }
.ticks--wide li { max-width: 52ch; }
.covered { background: var(--cream); border-radius: 4px; padding: var(--s4); }
.covered .ticks li { max-width: none; }

/* --- what we do: the three tiers ---------------------------------------
   The number and heading hang in their own column and stay put while the
   tier's detail scrolls past. Related to the sister site's About page, but
   the numeral here is solid gold rather than a ghost, because these are
   steps in a pathway and their order is the content. */
.tiers { padding: var(--s5) 0 var(--s6); }
.tier {
  display: grid; grid-template-columns: 16rem 1fr; gap: var(--s5);
  padding: var(--s5) 0; border-top: 1px solid var(--rule);
}
.tier:first-child { border-top: 0; padding-top: var(--s3); }
.tier__head { position: sticky; top: 6.5rem; align-self: start; }
.tier__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 3.2rem; height: 3.2rem; border-radius: 50%;
  background: var(--gold); color: var(--navy);
  font: 600 1.5rem/1 var(--display); margin-bottom: var(--s2);
}
.tier__kicker {
  font: 600 .78rem/1 var(--display); letter-spacing: .13em; text-transform: uppercase;
  color: #8E2F52; margin: 0 0 .4rem;
}
.tier__head h2 { margin: 0; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.tier__body p { font-size: 1.12rem; max-width: 56ch; }
.tier__body .ticks li { max-width: 52ch; }
.tier__outro { color: var(--ink-soft); border-left: 3px solid var(--gold); padding-left: var(--s3); margin-top: var(--s3); }
.tier__photos { display: flex; gap: var(--s3); margin-top: var(--s4); flex-wrap: wrap; }
.tier__photos figure { margin: 0; flex: 1 1 220px; }
.tier__photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; box-shadow: 0 18px 44px -28px rgba(21,14,56,.6); }

/* --- residents: the two-sided pact -------------------------------------- */
.pact { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.pact__side { background: var(--cream); border-radius: 4px; padding: var(--s4); }
.pact__side--give { background: var(--navy); color: var(--cream); }
.pact__side--give h2 { color: var(--cream); }
.pact__side--give .eyebrow { color: var(--gold); }
.pact__side--give .ticks li { color: rgba(240,234,214,.86); }
.pact__side--give .ticks li::before { background: var(--gold); }
.pact__side h2 { font-size: 1.35rem; }
.pact__side .ticks li { max-width: none; }

/* --- staff traits -------------------------------------------------------- */
.traits { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.traits li { max-width: none; background: var(--cream); border-radius: 4px; padding: var(--s4); border-top: 4px solid var(--rose); }
.traits li:nth-child(2n) { border-top-color: var(--gold); }
.traits h2 { font-size: 1.3rem; margin-bottom: .6rem; }
.traits p { color: var(--ink-soft); max-width: none; margin: 0; }

/* --- refer: the pack ----------------------------------------------------- */
.pack { display: grid; grid-template-columns: 1.3fr .7fr; gap: var(--s5); align-items: start; }
.pack__contents { background: var(--cream); border-radius: 4px; padding: var(--s4); }
.pack__contents h3 { margin-top: 0; }
.pack__contents .ticks li { max-width: none; }
.pack__meta {
  display: block; font: 400 .8rem/1 var(--body); letter-spacing: .04em;
  opacity: .8; margin-top: .3rem;
}

/* --- contact ------------------------------------------------------------- */
.reach { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.reach li { max-width: none; background: var(--cream); border-radius: 4px; padding: var(--s4); }
.reach__big { font: 600 clamp(1.5rem, 3vw, 2.1rem)/1.2 var(--display); letter-spacing: -.02em; margin: 0 0 var(--s2); }
.reach__big--email { font-size: clamp(1rem, 1.9vw, 1.3rem); word-break: break-word; }
.reach__big a { text-decoration: none; }
.reach__big a:hover { text-decoration: underline; }
.reach p:last-child { color: var(--ink-soft); margin: 0; }

@media (max-width: 62rem) {
  .split, .philo, .pack { grid-template-columns: 1fr; gap: var(--s4); }
  .tier { grid-template-columns: 1fr; gap: var(--s3); }
  .tier__head { position: static; }
}
@media (max-width: 46rem) {
  .facts ul { grid-template-columns: 1fr; }
  .facts li { border-left: 0; border-top: 1px solid rgba(240,234,214,.17); padding: var(--s3) 0; }
  .facts li:first-child { border-top: 0; padding-top: var(--s4); }
  .pact, .traits, .reach { grid-template-columns: 1fr; }
  .hero__actions .button { flex: 1 1 auto; text-align: center; }
}

/* Media splits centre their columns; text-only splits stay top-aligned so
   two runs of prose start on the same line. */
.split--media { align-items: center; }
.split--media .split__figure img { aspect-ratio: 4 / 3; object-fit: cover; }

/* The scrim. It has to exist: the headline is navy, and the scene behind it
   runs from a gold sun (11.47:1, fine) to a rose sky (4.02:1, large text
   only) to near-black skyline silhouettes, where navy on navy is unreadable.

   First attempt boxed it behind the text with padding and a radius, which
   read as a translucent card dropped on the picture, with a visible diagonal
   seam across the middle of the scene. This is instead a full-height wash
   across the left of the hero, fading out well before the right edge -- so
   it reads as light falling on the scene rather than a panel sitting over
   it, and the sun and boat stay untouched. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg,
    rgba(240,234,214,.94) 0%,
    rgba(240,234,214,.88) 26%,
    rgba(240,234,214,.55) 46%,
    rgba(240,234,214,0)   64%);
}
.hero__inner { z-index: 1; }
@media (max-width: 62rem) {
  /* Narrow: the text spans the full width, so the wash has to as well. */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(240,234,214,.93) 0%, rgba(240,234,214,.86) 55%, rgba(240,234,214,.7) 100%);
  }
  .hero__skyline { opacity: .6; }
}

/* --- podcast ------------------------------------------------------------
   The browser's own <audio controls>, not a custom player: it is keyboard
   operable, screen-reader labelled and already familiar, and a hand-built
   one would be worse at all three. Only the box around it is styled. */
.podcast__player {
  display: block; width: 100%; max-width: 44rem; margin: var(--s3) 0 var(--s2);
  border-radius: 4px;
}
.podcast__meta { color: var(--ink-soft); font-size: 1rem; max-width: 52ch; margin: 0; }