/* LT UK, direction C: About Laura (the rules the pages share are in system.css).
   Her own page, so her orange and paper: her photo ringed by the string, her words on the dark-blue panel,
   the three steps held D's way, then the four parts as pictures that are links. */

/* ---------- the head: her photo in the circle, her name and her tagline ---------- */
.ab-eyebrow { color: var(--or-text); }
.ab-tag { font: 400 clamp(1.35rem, 1rem + 1.3vw, 2.1rem)/1.15 var(--head); text-transform: uppercase; letter-spacing: 0.02em; color: var(--or-text); margin: 0 0 0.8em; }
.ab-head h1 { margin-bottom: 0.2em; }
.ab-ring { position: relative; width: min(66vw, 330px); aspect-ratio: 1; margin: 6px auto 26px; }
.ab-photo { position: absolute; inset: 7%; border-radius: 50%; overflow: hidden; background: var(--pic-bg); }
.ab-photo picture, .ab-photo img { display: block; width: 100%; height: 100%; }
.ab-photo img { object-fit: cover; object-position: 46% 40%; }
@media (max-width: 1099px) {
  .ab-head { padding-top: 46px; }
  .ab-ring-col { order: -1; }
}
/* a tablet sets her photo flush with her words, one alignment for the head (B15) */
@media (min-width: 760px) and (max-width: 1099px) { .ab-ring { width: min(42vw, 340px); margin: 6px 0 36px; } }
@media (min-width: 1100px) {
  .ab-head .head-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: min(84vh, 800px); }
  .ab-ring { width: min(30vw, 62vh, 460px); margin: 40px auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .ab-photo { animation: ab-photo-in 1.1s var(--brake) both; }
  @keyframes ab-photo-in { from { opacity: 0; transform: scale(0.94); } }
}

/* ---------- in her own words: the dark-blue panel, framed by the string ---------- */
.ab-panel { position: relative; background: var(--indigo); color: var(--on-indigo); border-radius: 26px; padding: clamp(26px, 4.6vw, 66px); --ink-2: var(--on-indigo-2); --focus: var(--on-indigo); }
.ab-panel .eyebrow { color: var(--on-indigo-2); }
.ab-panel h2 { margin-bottom: 0.5em; }
.ab-q, .ab-q blockquote, .ab-q p { margin: 0; }
.ab-q-big p { font: italic 400 clamp(1.3rem, 1.05rem + 1.1vw, 2.15rem)/1.36 var(--body); max-width: 32ch; }
.ab-q-two { display: grid; gap: 24px; margin-top: 30px; }
.ab-q-h { font: 700 0.75rem/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #ffb685; margin: 0 0 10px; }
.ab-q-list { display: grid; gap: 12px; }
.ab-q-list li { padding-left: 16px; border-left: 2px solid var(--or); font-style: italic; font-size: 1.04rem; line-height: 1.5; }
@media (max-width: 759px) { .ab-panel { margin-right: 8px; } }
@media (min-width: 900px) {
  .ab-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 26px; }
  .ab-panel-head .eyebrow { flex-basis: 100%; }
  .ab-q-two { grid-template-columns: 1fr 1fr; column-gap: clamp(30px, 4vw, 70px); }
}
/* her words are simply there when the panel is: no staggered entry (B7, W6) */

/* ---------- how she works: what each step asks of you ---------- */
.ab-self { color: var(--ink-2); max-width: 54ch; margin: 0; }
@media (max-width: 1099px) { .ab-how.ride-on .ab-self { display: none; } }
.ex-show li { position: relative; padding: 4px 0 4px 22px; border-top: 1px solid rgba(28, 26, 24, 0.1); }
.ex-show li:first-child { border-top: 0; }
.ex-show li::before { content: ""; position: absolute; left: 2px; top: 0.72em; width: 10px; height: 10px; border-radius: 3px; background: #ff914d; }
.ex-pair table { width: 100%; border-collapse: collapse; font-size: 0.92em; }
.ex-pair th, .ex-pair td { padding: 5px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(28, 26, 24, 0.1); }
.ex-pair tbody tr:last-child th, .ex-pair tbody tr:last-child td { border-bottom: 0; }
.ex-pair thead th { font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: #55504a; }
.ex-pair tbody th { color: #a3461a; font-weight: 700; width: 3em; }
.ex-pair td:nth-child(2) { box-shadow: inset 3px 0 0 #ff914d; padding-left: 10px; }
.ex-hand li { position: relative; padding: 4px 0 4px 28px; }
.ex-hand li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 16px; height: 16px; border-radius: 4px; background: #7d8f69; border: 1.5px solid #7d8f69; }
.ex-hand li::after { content: ""; position: absolute; left: 6px; top: calc(0.5em + 3px); width: 5px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) {
  .ride-stop.is-on .ex-hand li::after { animation: ab-tick 0.4s var(--brake) backwards; }
  .ride-stop.is-on .ex-hand li:nth-child(1)::after { animation-delay: 0.45s; }
  .ride-stop.is-on .ex-hand li:nth-child(2)::after { animation-delay: 0.65s; }
  .ride-stop.is-on .ex-hand li:nth-child(3)::after { animation-delay: 0.85s; }
  .ride-stop.is-on .ex-hand li:nth-child(4)::after { animation-delay: 1.05s; }
  @keyframes ab-tick { from { opacity: 0; transform: rotate(45deg) scale(0.3); } }
  .ride-stop.is-on .ex-pair td:nth-child(2) { animation: ab-lane 0.9s var(--brake) 0.3s backwards; }
  @keyframes ab-lane { from { box-shadow: inset 0 0 0 #ff914d; } }
}
@media (max-width: 1099px) {
  .how.ride-on .ex-show li, .how.ride-on .ex-hand li { padding-block: 2px; }
  .how.ride-on .ex-pair th, .how.ride-on .ex-pair td { padding-block: 3px; }
}