/* Frae pages beyond the cover: the slides that explain Frae on the homepage, and the Frae contact page (/contact/).
   Everything here reads the tokens of the base sheet (--fg, --line, --accent, --t-*) so it follows each slide's tone. */

/* 1 · homepage: About Frae / The problem / Our vision ------------------------------------------------------------ */
.about h2, .gap h2, .vision h2 { font-family: var(--display); font-weight: 600; font-size: var(--t-head); line-height: 1.08; letter-spacing: -.03em; margin-top: 18px; max-width: 20ch; color: var(--fg); }
.about .rule, .gap .rule, .vision .rule { margin-top: 26px; }
.about h2 { max-width: 15ch; }
.about .lede { margin-top: 22px; max-width: 60ch; }

.pils { margin-top: clamp(22px, 3.4vw, 46px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 4vw, 64px); max-width: 880px; border-top: 1px solid var(--line); }
.pil { padding: clamp(14px, 1.8vw, 22px) 0; border-bottom: 1px solid var(--line); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .5s ease; }
.pil h3, .vis h3 { font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.012em; line-height: 1.28; color: var(--fg); }
.pil p, .vis p { margin-top: 6px; font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); max-width: 44ch; }

.gap-grid { margin-top: clamp(22px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 84px); align-items: start; }
.gap-grid .lede + .lede { margin-top: 18px; }
.gap blockquote { font-family: var(--display); font-weight: 500; font-size: clamp(19px, 2.3vw, 34px); line-height: 1.36; letter-spacing: -.024em; max-width: 24ch; color: var(--fg); border-left: 2px solid var(--accent); padding-left: clamp(16px, 2vw, 28px); }

.vis-grid { margin-top: clamp(24px, 3.6vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 44px); border-top: 1px solid var(--line); }
.vis { padding-top: clamp(14px, 1.8vw, 24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.vis .vn { display: block; margin-bottom: 12px; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .09em; color: var(--accent-text); }
.vis h3 { font-size: clamp(18px, 1.7vw, 25px); line-height: 1.25; max-width: 18ch; }
.vis p { font-size: var(--t-detail); max-width: 34ch; }

@media (max-width: 900px) {
  .pils { grid-template-columns: 1fr; }
  .gap-grid, .vis-grid { grid-template-columns: 1fr; gap: 14px; }
  .vis { display: grid; grid-template-columns: 30px 1fr; column-gap: 12px; padding-top: 10px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .vis .vn { grid-row: 1 / 3; margin: 3px 0 0; }
  .vis p { font-size: 13px; margin-top: 3px; }
  .gap blockquote { font-size: 17px; }
}
@media (max-height: 760px) {
  .about .rule, .gap .rule, .vision .rule { margin-top: 16px; }
  .about .lede { margin-top: 14px; }
  .pils { margin-top: 14px; }
  .pil { padding: 10px 0; }
  .gap-grid, .vis-grid { margin-top: 16px; }
  .gap-grid .lede + .lede { margin-top: 12px; }
}
@media (max-height: 700px) and (max-width: 900px) { .pil p { display: none; } .vis p { display: none; } }
html[lang=hi] .about h2, html[lang=hi] .gap h2, html[lang=hi] .vision h2 { line-height: 1.34; letter-spacing: 0; max-width: 24ch; }
html[lang=hi] .gap blockquote { line-height: 1.55; letter-spacing: 0; }
html[lang=hi] .vis h3, html[lang=hi] .pil h3 { letter-spacing: 0; line-height: 1.4; }
html[lang=hi] .vis p, html[lang=hi] .pil p { line-height: var(--lh-body, 1.7); }

/* 2 · the Frae contact page (/contact/) ------------------------------------------------------------------------- */
body.on-first .edge-l { display: none; }
.contact h1 { font-family: var(--display); font-weight: 600; font-size: var(--t-head); line-height: 1.04; letter-spacing: -.03em; margin-top: 18px; max-width: 17ch; color: var(--fg); }
.contact h2 { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; line-height: 1.2; color: var(--fg); }
.contact .lede { margin-top: clamp(14px, 2vw, 24px); }
.routes { margin-top: clamp(22px, 3.2vw, 44px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 26px); }
.route { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 1.9vw, 26px); border: 1px solid var(--line); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .5s ease; }
.route h2 { font-size: var(--t-lede); }
.route p { font-size: var(--t-dense); line-height: 1.55; color: var(--fg-2); }
.route .btn { margin-top: auto; align-self: flex-start; padding: 12px 22px; }   /* 19px / 600: large text, so Paper on Vermilion (3.59:1) passes AA */
.rlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.rlinks li { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--display); font-size: var(--t-detail); font-weight: 600; letter-spacing: -.01em; color: var(--fg); }
.rlinks a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; }
.rlinks a:hover, .rlinks a:focus-visible { color: var(--accent-text); }
.rlinks li span { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.contact--find h2 { font-size: var(--t-head); letter-spacing: -.03em; line-height: 1.08; margin-top: 18px; max-width: 18ch; }
.contact--find .rule { margin-top: 26px; }
.finds { margin-top: clamp(22px, 3.2vw, 44px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); max-width: 1000px; border-top: 1px solid var(--line); }
.find { padding: clamp(16px, 2vw, 26px) 0; border-bottom: 1px solid var(--line); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .5s ease; }
.fk { display: block; margin-bottom: 10px; font-family: var(--display); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.find p { font-size: var(--t-lede); line-height: 1.5; color: var(--fg); max-width: 34ch; }
.find .rlinks { margin-top: 0; }
@media (max-width: 900px) {
  .routes, .finds { grid-template-columns: 1fr; gap: 10px; }
  .route { padding: 12px 14px; gap: 6px; }
  .route p { font-size: 13px; line-height: 1.45; }
  .route .btn { padding: 9px 16px; }
  .rlinks { gap: 4px; }
  .rlinks li { font-size: 14px; }
}
/* Phones. The third route carries the three ways to reach a person AND the "Register your interest" button (VEL-CAP-0551 gave that button a home
   rather than leaving it floating below all three cards), so the column is one element taller than it was and, at 375x812, its last button ran
   into the deck's scroll hint by a few pixels. Every gap above it is tightened instead of dropping anything: an action a phone visitor cannot
   reach is exactly the complaint this redesign answers. */
@media (max-width: 620px) {
  .contact h1 { margin-top: 10px; }
  .contact .lede { margin-top: 8px; }
  .routes { margin-top: 8px; gap: 8px; }
  .route { padding: 9px 13px; gap: 5px; }
  .rlinks { gap: 3px; }
  .route .btn { margin-top: 8px; }
}
@media (max-height: 760px) and (min-width: 901px) { .route p { font-size: 12.5px; line-height: 1.45; } .route { gap: 7px; padding: 14px 16px; } .contact .lede { margin-top: 10px; } .routes { margin-top: 18px; } }
html[lang=hi] .contact h1, html[lang=hi] .contact--find h2 { line-height: 1.34; letter-spacing: 0; }
html[lang=hi] .contact h2, html[lang=hi] .rlinks li, html[lang=hi] .rlinks li span { letter-spacing: 0; }

/* the proposition now has two short lines: let each stand on one line where the screen allows */
.prop h1 { max-width: 36ch; text-wrap: balance; }
.prop h1 .ln { text-wrap: balance; }
/* the 404 is one slide: no hint, no side chevrons */
body:has(#nf01) :is(.hint, .edge-l, .edge-r) { display: none; }