/*
 * Bretzel — about-lab.css (draft)
 * About in the home's language (5h). Step 1: the live page (its own styles in about-lab-e.css,
 * scoped to .ab-e) between the home's nav and footer, closing on the home's closing sheet.
 */

/* ════════════════════════════════════════
   TODAY — the live content under a strip of the home's paper
════════════════════════════════════════ */
/* the nav, printed on a strip of the home's grid paper above the page: the paper and its light
   are sized as for a full-screen sheet, so the strip is the top of the home's hero */
.opt-d .hero.ab-head {
  min-height: 0; padding-bottom: clamp(14px, 2.2vh, 24px);
  background-size: max(100%, 177.78svh) auto; background-position: 50% 0;
}
.opt-d .hero.ab-head::before { background: radial-gradient(ellipse 80vw 70svh at 40vw 35svh, rgba(255, 250, 240, 0.10), rgba(40, 30, 20, 0.14) 100%); }

/* the page you're on: the hand has already underlined it (nav, menu, footer) */
a[aria-current="page"] .hl path { stroke-dashoffset: 0; }

/* today's content as it is live, but in the logo's orange, and with the normal cursor (the live
   site hides it for its own, which isn't on this page) */
.ab-e {
  cursor: auto;
  --clr-orange: #FF8738; --clr-orange-10: rgba(255, 135, 56, 0.10);
  --clr-orange-15: rgba(255, 135, 56, 0.15); --clr-orange-20: rgba(255, 135, 56, 0.20);
}

/* the home's closing sheet, on the desk after the page */
.ab-main .tear--close { margin-top: clamp(40px, 5vw, 88px); }