/* About page only. Tokens, type, buttons and the motion keyframes live in styles.css. */

/* ---------- the slate slab ---------- */
.slate { position: relative; grid-area: photo; margin: 0; }
.slate::before {
  /* hard offset shadow, the same one the site's photo frames use */
  content: ""; position: absolute; left: 10px; right: -10px; top: 12px; aspect-ratio: 640 / 500;
  background: #090908;
  clip-path: polygon(1.2% 2.4%, 18% .6%, 46% 1.8%, 71% .4%, 98.6% 1.6%, 99.6% 28%, 98.8% 57%, 99.8% 81%, 98.2% 98.4%, 74% 99.4%, 43% 98.2%, 19% 99.6%, .8% 98%, .2% 70%, 1% 39%);
}
.slate__board {
  position: relative; aspect-ratio: 640 / 500; overflow: hidden;
  background:
    var(--grain),
    linear-gradient(112deg, rgba(255, 255, 255, .04) 0 11%, transparent 11% 27%, rgba(0, 0, 0, .1) 27% 44%, transparent 44% 68%, rgba(255, 255, 255, .03) 68% 83%, transparent 83%),
    #383f44;
  clip-path: polygon(1.2% 2.4%, 18% .6%, 46% 1.8%, 71% .4%, 98.6% 1.6%, 99.6% 28%, 98.8% 57%, 99.8% 81%, 98.2% 98.4%, 74% 99.4%, 43% 98.2%, 19% 99.6%, .8% 98%, .2% 70%, 1% 39%);
}
.slate__layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.slate__chalk text { font-family: var(--f-hand); font-size: 38px; fill: var(--chalk); }
.slate__chalk .slate__head { font-size: 30px; fill: var(--hi); }
.slate__chalk .slate__big { font-size: 84px; }
.slate__chalk .slate__small { font-size: 28px; }
.slate__strikes path, .slate__underline { fill: none; stroke: var(--hi); stroke-width: 5; stroke-linecap: round; }

/* without animation the crossed-off list simply stays on the slab */
.slate__clean, .slate__smudge, .slate__eraser, .slate__again { display: none; }

.slate__cap { position: relative; display: flex; justify-content: flex-end; min-height: 44px; margin-top: 16px; }
.slate__again {
  min-height: 44px; padding: 6px 4px; background: none; border: 0;
  font-family: var(--f-hand); font-size: 1.3rem; line-height: 1; color: var(--hi);
}
@media (hover: hover) { .slate__again:hover { text-decoration: underline; } }

.js-reveal .slate__clean, .js-reveal .slate__smudge, .js-reveal .slate__eraser { display: block; }
.js-reveal .slate__again { display: inline-block; }

.js-reveal .slate__strikes path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-reveal .slate.is-run .slate__strikes path { animation: draw .38s ease-out forwards; }
.js-reveal .slate.is-run .slate__strikes path:nth-child(1) { animation-delay: .5s; }
.js-reveal .slate.is-run .slate__strikes path:nth-child(2) { animation-delay: .9s; }
.js-reveal .slate.is-run .slate__strikes path:nth-child(3) { animation-delay: 1.3s; }
.js-reveal .slate.is-run .slate__strikes path:nth-child(4) { animation-delay: 1.7s; }
.js-reveal .slate.is-run .slate__strikes path:nth-child(5) { animation-delay: 2.1s; }

.slate__smudge {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(46% 20% at 30% 30%, rgba(239, 235, 226, .07), transparent 72%),
    radial-gradient(52% 18% at 62% 52%, rgba(239, 235, 226, .06), transparent 72%),
    radial-gradient(44% 20% at 36% 74%, rgba(239, 235, 226, .05), transparent 72%);
}
.slate__eraser {
  position: absolute; left: -26%; top: 16%; width: 22%; aspect-ratio: 2.1; opacity: 0;
  background: linear-gradient(#b89566 0 60%, #e8e4da 60%);
  border-radius: 4px; transform: rotate(-9deg);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .4);
}
.js-reveal .slate.is-run .slate__list { animation: slate-wipe .95s linear forwards 3s; }
.js-reveal .slate.is-run .slate__eraser { animation: slate-erase .95s linear forwards 3s; }
.js-reveal .slate.is-run .slate__smudge { animation: fade-in .6s ease forwards 3.3s; }
.js-reveal .slate__clean { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
.js-reveal .slate.is-run .slate__clean { animation: slate-write 1s cubic-bezier(.5, 0, .3, 1) forwards 4s; }

@keyframes slate-wipe { from { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } to { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); } }
@keyframes slate-write { to { -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); } }
@keyframes slate-erase {
  0% { opacity: 1; left: -24%; top: 14%; }
  25% { left: 12%; top: 62%; }
  50% { left: 38%; top: 12%; }
  75% { left: 66%; top: 62%; }
  98% { opacity: 1; left: 96%; top: 22%; }
  100% { opacity: 0; left: 104%; top: 22%; }
}

/* ---------- story ---------- */
.ab-story {
  display: grid; align-items: center; gap: clamp(32px, 5vw, 80px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
}
.ab-story__lead {
  margin: 24px 0 20px;
  font-family: var(--f-display); font-style: italic; font-weight: 800; font-variation-settings: "wdth" 106;
  font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.22; letter-spacing: -.01em;
}
.ab-story__text > p:not(.kicker):not(.ab-story__lead):not(.ab-story__note) { color: #34322c; font-size: 1.05rem; }
.ab-story__note { margin: 22px 0 0; font-size: 1.6rem; color: var(--red-pen); transform: rotate(-1.2deg); transform-origin: left center; }
.ab-story__photo { margin: 0; }
.ab-story__photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
  border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--ink);
}
.ab-story__photo figcaption { margin-top: 24px; font-size: 1.3rem; color: var(--red-pen); }

/* ---------- numbers ---------- */
.ab-stats__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 48px; align-items: end; margin-bottom: clamp(36px, 5vw, 60px); }
.ab-stats__head .kicker { grid-column: 1 / -1; }
.ab-stats__aside { margin: 0; color: var(--hi); transform: rotate(-1.5deg); justify-self: end; max-width: 30ch; }
.stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px clamp(14px, 2vw, 28px); }
.stat { padding-left: clamp(12px, 1.6vw, 20px); border-left: 1px dashed var(--line-dark); }
.stat b {
  display: block;
  font-family: var(--f-display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 115;
  font-size: clamp(3.8rem, 8vw, 7rem); line-height: .95; color: var(--hi);
}
.stat span { display: block; margin-top: 8px; font-family: var(--f-type); font-size: 14px; line-height: 1.3; color: #cfccc1; }
.js-reveal .stat b { opacity: 0; transform-origin: left bottom; }
.js-reveal .stat.is-in b { animation: pop .55s cubic-bezier(.3, .7, .3, 1.2) both .15s; }

/* ---------- the four promises ---------- */
.ab-pledge {
  display: grid; align-items: start; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
}
.ab-pledge .section-head { position: sticky; top: calc(var(--header-h) + 28px); margin-bottom: 0; }
.ab-pledge__aside { margin: 22px 0 0; color: var(--red-pen); transform: rotate(-1.5deg); transform-origin: left center; max-width: 28ch; }
.pledge {
  background: var(--white); border: 2.5px solid var(--ink); box-shadow: 12px 12px 0 var(--ink);
  padding: clamp(18px, 3vw, 34px);
}
.pledge__top {
  display: flex; justify-content: space-between; gap: 12px;
  padding-bottom: 14px; border-bottom: 2px dashed rgba(18, 18, 16, .4);
  font-family: var(--f-type); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.pledge__item {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 6px 14px;
  padding: 20px 0; border-bottom: 1px solid rgba(18, 18, 16, .16);
}
.pledge__n {
  grid-row: span 2; display: grid; place-items: center; width: 34px; height: 34px;
  border: 2px solid var(--ink); border-radius: 50%;
  font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1rem;
}
.pledge__item h3 {
  font-family: var(--f-display); font-style: italic; font-weight: 850; font-variation-settings: "wdth" 108;
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); line-height: 1.12; letter-spacing: -.01em;
}
.pledge__item p { margin: 0; font-size: 1rem; color: #34322c; }
.pledge__sign { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 18px; }
.pledge__name { display: block; font-size: 2rem; color: var(--red-pen); }
.pledge__flourish { display: block; width: 170px; height: auto; margin-top: -2px; fill: none; stroke: var(--red-pen); stroke-width: 2.5; stroke-linecap: round; }
.pledge .stamp { position: static; flex: none; }
.js-reveal .pledge__flourish path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-reveal .pledge.is-in .pledge__flourish path { animation: draw .9s ease-out forwards .9s; }
.js-reveal .pledge.is-in .stamp { animation: stamp-in .45s cubic-bezier(.5, 0, .4, 1) both 1.5s; }

/* ---------- pre-trip checklist ---------- */
.pretrip {
  display: grid; align-items: center; gap: clamp(32px, 5vw, 72px);
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
.pretrip__photo { margin: 0; }
.pretrip__photo img {
  width: 100%; height: auto; aspect-ratio: 4 / 4.6; object-fit: cover; object-position: 50% 62%;
  border: 2px solid #000;
}
.pretrip__photo figcaption { margin-top: 12px; font-size: 1.3rem; color: var(--hi); }
.pretrip__body .section-head { margin-bottom: 26px; }
.pretrip__list li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 13px 0; border-top: 1px solid var(--line-dark);
}
.pretrip__list li:last-child { border-bottom: 1px solid var(--line-dark); }
.pretrip__list b { display: block; font-weight: 700; color: var(--white); }
.pretrip__list span { display: block; font-size: 15.5px; color: #cfccc1; }
.pretrip__check { width: 28px; height: 28px; fill: none; stroke: var(--hi); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.js-reveal .pretrip__check path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-reveal .pretrip__list li.is-in .pretrip__check path { animation: draw .4s ease-out forwards .3s; }

/* ---------- who calls ---------- */
.callers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); }
.caller { padding: 24px 0 36px; border-top: 2px solid var(--ink); }
.caller:nth-child(even) { margin-top: 44px; }
.caller h3 {
  font-family: var(--f-display); font-style: italic; font-weight: 900; font-variation-settings: "wdth" 112;
  font-size: clamp(1.7rem, 3.2vw, 2.5rem); line-height: 1; letter-spacing: -.02em;
}
.caller p { margin: 12px 0 14px; max-width: 48ch; color: #34322c; }
.caller a {
  display: inline-block; padding-block: 12px;
  font-family: var(--f-type); font-weight: 700; font-size: 15px; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
@media (hover: hover) { .caller a:hover { color: var(--red-pen); } }

/* ---------- photo band + call to action ---------- */
.ab-band { position: relative; margin: 0; border-top: 2px solid var(--ink); }
.ab-band img { width: 100%; height: clamp(220px, 38vw, 540px); object-fit: cover; object-position: 50% 58%; }
.ab-band figcaption {
  position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); bottom: 18px;
  padding: .25em .7em .3em;
  background: var(--ink); color: var(--white); font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  transform: rotate(-1.5deg);
}
.ab-cta { padding-block: clamp(56px, 8vw, 96px); }
.ab-cta__inner { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; align-items: end; gap: 28px clamp(32px, 5vw, 72px); }
.ab-cta p { margin: 18px 0 0; font-size: 1.1rem; max-width: 46ch; }
.ab-cta__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .slate { margin-top: 36px; }
  .ab-story, .ab-pledge, .pretrip, .ab-cta__inner, .ab-stats__head { grid-template-columns: minmax(0, 1fr); }
  .ab-stats__aside { justify-self: start; margin-top: 16px; }
  .ab-pledge .section-head { position: static; }
  .pretrip__photo { max-width: 520px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:last-child { grid-column: 1 / -1; }
  .pledge { box-shadow: 6px 6px 0 var(--ink); }
  .ab-story__photo img { box-shadow: 6px 6px 0 var(--ink); }
  .callers { grid-template-columns: minmax(0, 1fr); }
  .caller:nth-child(even) { margin-top: 0; }
  .ab-cta__btns .btn { flex: 1 1 100%; }
  .slate::before { left: 6px; right: -6px; top: 7px; }
  .slate__chalk .slate__small { font-size: 31px; }
}

@media (max-width: 380px) {
  .pledge__item { grid-template-columns: 30px minmax(0, 1fr); gap: 6px 10px; }
  .pledge__n { width: 28px; height: 28px; font-size: .9rem; }
  .pledge__flourish { width: 130px; }
  .pledge__name { font-size: 1.7rem; }
}