/* About (2026-11-04). Fable's direction: the name tag. Three paper tags hang on a ring in the head; pressing them swings
   the front tag up over the ring in held frames and the next word shows. The approved sprig photograph is a print taped
   to the page beside the quote. Shared pieces: page.css. */

.ab-head__grid { position: relative; z-index: 3; display: grid; grid-template-columns: 1fr minmax(260px, 30%); gap: clamp(28px, 4vw, 90px); align-items: center; }
.ab-kicker { margin: clamp(10px, 2svh, 20px) 0 0; }
.ab-head .phead__title { margin-top: 6px; }

/* ---------- the tag ring ---------- */
.tags { position: relative; justify-self: center; width: clamp(230px, 19vw, 330px); height: clamp(220px, 34svh, 300px); border: 0; padding: 0; background: none; cursor: pointer; perspective: 1200px; }
.tags__ring { position: absolute; left: 50%; top: 0; width: 46px; height: 46px; margin-left: -23px; border-radius: 50%; border: 3px solid #8E857C;
  box-shadow: inset 0 1px 1px rgb(258 255 252 / .5), 1px 2px 3px rgb(18 27 30 / .35); background: transparent; z-index: 5; }
.tag { position: absolute; left: 50%; top: 28px; width: 100%; height: calc(100% - 40px); margin-left: -50%; display: grid; place-items: center; transform-origin: 50% 0;
  background: var(--ivory) var(--sheet-a); background-size: 520px; border-radius: 3px 3px 6px 6px; box-shadow: var(--edge), 0 2px 3px rgb(21 31 34 / .18), 6px 16px 26px -12px rgb(13 22 25 / .5);
  clip-path: polygon(30% 0, 70% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); transition: transform .62s steps(8, end); }
/* the punched hole the ring runs through, with its reinforcing ring */
.tag::before { content: ""; position: absolute; left: 50%; top: 12px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #D5CFC3; box-shadow: inset 1px 1px 2px rgb(0 0 0 / .35), 0 0 0 4px rgb(68 116 131 / .18); }
.tag__w { font: 600 clamp(2.6rem, 1.6rem + 2.4vw, 4.2rem)/1 var(--display); color: #14191B; letter-spacing: -.02em; padding-top: 18px; }
.tag[data-pos="0"] { z-index: 3; transform: rotate(-4deg); }
.tag[data-pos="1"] { z-index: 2; transform: rotate(3deg) translate(10px, 8px); }
.tag[data-pos="2"] { z-index: 1; transform: rotate(8deg) translate(20px, 16px); }
.tag[data-pos="1"] .tag__w, .tag[data-pos="2"] .tag__w { opacity: 0; }
.tag[data-pos="0"] .tag__w { color: var(--ink-red); }
.tag[data-pos="0"]:nth-of-type(2) .tag__w { color: #14191B; }
/* the front tag swings up and over the ring */
.tag.is-over { z-index: 4; transform: rotateX(-172deg) translateY(-8px); }
.tags:hover .tag[data-pos="0"] { transform: rotate(-6deg); }
.tags:focus-visible { outline: 2px solid var(--ink); outline-offset: 6px; border-radius: 8px; }

/* ---------- the story and the print ---------- */
.ab-story__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 6vw, 130px); align-items: center; }
.ab-who__name { font: 600 clamp(2rem, 1.3rem + 1.6vw, 3.2rem)/1 var(--display); color: #14191B; margin-bottom: 12px; }
.ab-who .label { border: 0; padding: 0; }
.ab-who__lede { margin-top: 16px; font-size: clamp(1.1rem, 1rem + .4vw, 1.45rem); line-height: 1.45; color: var(--ink-2); max-width: 40rem; }
.ab-name { margin-top: clamp(28px, 5svh, 52px); padding-top: clamp(18px, 3svh, 28px); border-top: 1px solid var(--rule); max-width: 40rem; }
.ab-name .label { border: 0; padding: 0; }
.ab-gloss { margin-top: 10px; font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.ab-print { position: relative; padding: 14px 14px 0; background: #FBF8F2; transform: rotate(2.2deg); box-shadow: 0 1px 2px rgb(13 22 25 / .25), 12px 24px 40px -16px rgb(13 22 25 / .55); max-width: 460px; justify-self: center; }
.ab-print img { width: 100%; height: auto; }
.ab-print__tape { position: absolute; left: 50%; top: -14px; width: 120px; height: 30px; margin-left: -60px; background: rgb(167 193 201 / .55); transform: rotate(-4deg); box-shadow: 0 1px 2px rgb(13 22 25 / .15); z-index: 2; }
.ab-quote { padding: 16px 6px 20px; font: italic 1.12rem/1.45 var(--serif); color: #14191B; }
.ab-note { right: calc(100% + 70px); top: 58%; }

/* ---------- the gap, on the dark band ---------- */
.ab-gap__grid { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(28px, 5vw, 110px); align-items: end; }
.ab-gap__h { max-width: 16ch; }
.ab-gap__p { display: grid; gap: 1em; font-size: clamp(1.05rem, 1rem + .25vw, 1.25rem); line-height: 1.55; color: var(--deep-2); }

/* ---------- how the work runs ---------- */
.ab-work__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 5vw, 110px); align-items: start; }
.ab-prose { display: grid; gap: 1em; font-size: clamp(1.05rem, .98rem + .25vw, 1.25rem); line-height: 1.6; color: var(--ink-2); max-width: 48rem; }

/* ---------- what we hold to ---------- */
.ab-hold { padding-top: 0; }
.ab-hold__sheet { padding: clamp(28px, 3.4vw, 60px); transform: rotate(-.5deg); }
.ab-hold__sheet > .label { border: 0; padding: 0; }
.ab-hold__row { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(24px, 4vw, 80px); margin-top: clamp(16px, 2.6svh, 26px); }
.ab-principle { display: grid; gap: 8px; align-content: start; }
.ab-principle__n { font: 600 1rem var(--sans); color: var(--ink-red); padding-bottom: 8px; border-bottom: 1.5px solid currentColor; justify-self: start; }
.ab-principle__t { font: 600 clamp(1.5rem, 1.1rem + 1vw, 2.3rem)/1.05 var(--display); color: #14191B; }
.ab-principle p:last-child { font-size: 1.05rem; line-height: 1.55; color: var(--ink-2); max-width: 44rem; }

/* ---------- close ---------- */
.ab-close { overflow: hidden; }
.ab-close__inner { position: relative; z-index: 2; }
.ab-close__title { font-size: clamp(2.4rem, 1.2rem + 2.8vw, min(4.8rem, 9svh)); line-height: 1; color: #14191B; max-width: 14ch; }
.ab-close__who { margin-top: clamp(14px, 2.4svh, 22px); font-size: clamp(1.08rem, 1rem + .3vw, 1.3rem); line-height: 1.5; color: var(--ink); max-width: 46rem; }
.ab-close__ask { margin: 12px 0 clamp(20px, 3.4svh, 32px); font-size: 1.05rem; line-height: 1.5; color: var(--ink-2); max-width: 46rem; }

@media (max-width: 1100px) {
  .ab-story__grid, .ab-gap__grid, .ab-work__grid { grid-template-columns: 1fr; }
  .ab-note { display: none; }
}
@media (max-width: 760px) {
  .ab-head__grid { grid-template-columns: 1fr; }
  .tags { width: 230px; height: 200px; justify-self: start; }
  .ab-hold__row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .tag { transition: none; } }

/* the headline is now a sentence (Jonah 2026-11-04: "On its second flight, the dove came back with proof." in place of
   "Jonah means dove."), so it sets smaller and balanced over three lines, clear of the name tag on the right */
.ab-head .phead__title { font-size: calc(46 * var(--u)); line-height: 1; max-width: calc(560 * var(--u)); text-wrap: balance; }
@media (max-width: 760px) { .ab-head .phead__title { font-size: clamp(2.1rem, 9.6vw, 2.8rem); max-width: none; } }