/* about/close.css: the close section of about.html (where to go next). Owned by close.

   One ending. The three doors ARE the headline: Books, Research, Get in touch, each named the
   way its page names itself, set big, one per line, an arrow on each. With a mouse or a
   keyboard, pointing at a door (or focusing it) shows a quiet preview of where it leads, in one
   column to the right: the seven real covers fanning out from a half open hand on the Books
   line, two real papers from the research page, and who the contact page serves. On touch screens and narrow windows the previews sit under
   each noun instead, always visible, and the covers fan once as they scroll in. Nothing loops.

   The AXON band under this section is the homepage's band, styled by home/footer.css.
   Everything here is scoped to .a-close; nothing global or from base is restyled. */

.a-close {
  --a-close-fs: clamp(2.75rem, 5vw, 5rem);           /* the page's chapter heading size */
  --a-close-ch: clamp(104px, 9.4vw, 136px);          /* cover height in the fan */
  --a-close-slot: calc(var(--a-close-ch) * 0.765);   /* the width each cover is centred on */
  --a-close-dx: calc(var(--a-close-ch) * 0.46);      /* step between covers once fanned */
  --a-close-hx: calc((var(--a-close-ch) * 2.35 - var(--a-close-slot)) / 6);   /* the half open hand: about 320px */
  position: relative;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  padding: 128px 5vw 120px;
  overflow-x: clip;                /* a preview may never make the page scroll sideways */
}
.a-close-inner { max-width: 1200px; margin: 0 auto; }

/* The headline. A grid as wide as its widest line, so every door is that wide and every
   preview starts in the same column, clear of the longest word. */
.a-close-doors {
  display: grid;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--display);
  font-size: var(--a-close-fs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.a-close-item { display: block; margin: 0; padding: 0; }
.a-close-door {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.05em 0;
  color: var(--ink);
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.a-close-label { display: inline-flex; align-items: center; border-radius: var(--h-r-mark); }
.a-close-door:focus-visible .a-close-label { outline: 2px solid var(--h-focus); outline-offset: 6px; }
.a-close-word {
  display: inline-block;
  white-space: nowrap;
  transition: color var(--h-t) var(--h-ease-out), scale var(--h-spring-dur) var(--h-spring);
}
/* A press gives way and springs back (base's press, on the word: the door itself belongs to
   the arrival for its first 0.9s). */
.a-close-door:active .a-close-word { scale: 0.97; transition-duration: var(--h-t), var(--h-t-press); transition-timing-function: var(--h-ease-out), var(--h-ease-std); }

.a-close-arrow {
  display: inline-flex;
  flex: none;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.26em;
  color: var(--teal-2);
  transition: translate var(--h-t) var(--h-ease-out), color var(--h-t) var(--h-ease-out);
}
.a-close-arrow svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* The previews: their own small type, never the headline's. */
.a-close-peek {
  display: block;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--text-2);
}

/* The covers. Each keeps its own shape, as real books do; one height, centred on its slot. */
.a-close-fan { position: relative; display: block; }
.a-close-cover {
  position: absolute;
  left: calc(var(--a-close-slot) / 2);
  bottom: 14px;
  height: var(--a-close-ch);
  width: auto;
  aspect-ratio: var(--a-close-ar);
  border-radius: 3px;
  box-shadow: var(--h-hairline), var(--h-shadow-2);
  transform-origin: 50% 100%;
  --a-close-c: calc(var(--a-close-i) - 3);
  /* Fanned: a hand of seven, pivoting at the bottom, the outer ones dipping on the arc. */
  --a-close-open: translate(calc(-50% + (var(--a-close-i) * var(--a-close-dx))), calc(var(--a-close-c) * var(--a-close-c) * 2.4px)) rotate(calc(var(--a-close-c) * 5deg));
  /* At rest: the seven held in a half open hand, so every cover already shows a strip. */
  --a-close-shut: translate(calc(-50% + (var(--a-close-i) * var(--a-close-hx))), calc(var(--a-close-c) * var(--a-close-c) * 1px)) rotate(calc(var(--a-close-c) * 2.2deg));
  transform: var(--a-close-open);
  transition: transform var(--h-spring-smooth-dur) var(--h-spring-smooth) calc(var(--a-close-i) * 30ms),
              opacity var(--h-t-quick) var(--h-ease-out),
              translate var(--h-t) var(--h-ease-out);
}
.a-close-cap {
  display: block;
  min-height: 1.45em;
  font-size: 0.875rem;
  color: var(--text-2);
  transition: opacity var(--h-t-quick) var(--h-ease-out);
}

/* Three real papers from the research page, the dated ones in front. */
.a-close-papers { position: relative; display: block; }
.a-close-paper {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 15.5rem;
  min-height: 9.5rem;
  padding: 1rem 1.1rem 1.15rem;
  border-radius: var(--h-r-mark);
  background: #fff;
  box-shadow: var(--h-hairline), var(--h-shadow-2);
  transform-origin: 0 100%;
  /* Spread: each one further back sits higher and a touch to the right, so its journal shows. */
  --a-close-open: translate(calc(var(--a-close-i) * 0.85rem), calc(var(--a-close-i) * -2.15rem)) rotate(calc(var(--a-close-i) * 1.2deg));
  --a-close-shut: translate(0px, 0px) rotate(0deg);
  transform: var(--a-close-open);
  transition: transform var(--h-spring-smooth-dur) var(--h-spring-smooth),
              opacity var(--h-t-quick) var(--h-ease-out),
              translate var(--h-t) var(--h-ease-out);
}
.a-close-journal { font-family: var(--display); font-size: 0.75rem; font-weight: 700; color: var(--text-2); }   /* 7:1 on white; teal-2 would be 4.1:1 at this size */
.a-close-ptitle { font-family: var(--display); font-size: 0.9rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.a-close-gist { display: block; }

/* Who the contact page serves. */
.a-close-ways { display: grid; gap: 0.9rem; }
.a-close-way { display: block; transition: opacity var(--h-t-quick) var(--h-ease-out), translate var(--h-t) var(--h-ease-out); }
.a-close-way b { display: block; font-family: var(--display); font-size: 0.95rem; font-weight: 600; color: var(--ink); }

/* The one quiet line for a patient who read this far, and the number on its own line, so it
   reads at a glance and is one tap on a phone. */
.a-close-call {
  margin: 2.75rem 0 0;
  font-family: var(--sans);
  color: var(--text-2);
}
.a-close-call-line { margin: 0; font-size: 1.0625rem; line-height: 1.6; }
.a-close-call-num { margin: 0.2rem 0 0; font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.4; }
.a-close-tel {
  display: inline-block;
  padding: 0.55rem 0;               /* a 44px reach */
  color: var(--ink);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-color: rgba(11, 15, 46, 0.25);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  transition: text-decoration-color var(--h-t) var(--h-ease-out);
}
.a-close-tel:active { opacity: 0.7; }

.a-close-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── POINTER AND KEYBOARD: previews open on hover or focus ─────────────────────────────── */
@media (min-width: 901px) and (hover: hover) and (pointer: fine) {
  .a-close-tel:hover { text-decoration-color: var(--teal-2); }
  /* The arrows are always there; hover and focus only move them on and colour them. */
  .a-close-arrow { color: var(--text-2); }
  .a-close-peek {
    position: absolute;
    left: 100%;
    top: 50%;
    translate: 0 -50%;
    padding-left: calc(var(--a-close-fs) * 0.8);   /* clear of an arrow that has slid 8px on */
    pointer-events: none;
  }
  .a-close-gist { display: none; }

  .a-close-fan { width: calc(var(--a-close-slot) + 6 * var(--a-close-dx)); height: calc(var(--a-close-ch) + 56px); }
  .a-close-fan .a-close-cover { bottom: 30px; }
  /* At rest the books are a closed hand: the one door with a picture before you ask. Pointing
     at the hand opens it too (it is part of the books door). */
  .a-close-cover { transform: var(--a-close-shut); transition-delay: 0ms; transition-duration: var(--h-t-content), var(--h-t-quick), var(--h-t); transition-timing-function: var(--h-ease-sheet), var(--h-ease-std), var(--h-ease-out); }
  .a-close-peek--books { pointer-events: auto; top: auto; bottom: calc(var(--a-close-fs) * 0.19 - 30px); translate: none; }
  .a-close-doors:has(.a-close-door:not(.a-close-door--books):is(:hover, :focus-visible)) .a-close-cover { opacity: 0; transition-duration: var(--h-t-content), 140ms, var(--h-t); }
  .a-close-cap { position: absolute; left: calc(var(--a-close-fs) * 0.8); top: 100%; width: calc(var(--a-close-slot) + 6 * var(--a-close-dx)); margin-top: -0.35rem; text-align: center; text-wrap: balance; opacity: 0; }

  .a-close-papers { width: calc(15.5rem + 0.85rem); height: calc(9.5rem + 2.15rem + 1rem); }
  .a-close-paper { opacity: 0; transform: var(--a-close-shut); transition-duration: var(--h-t-quick), var(--h-t-quick), var(--h-t); transition-timing-function: var(--h-ease-std), var(--h-ease-std), var(--h-ease-out); }

  .a-close-ways { width: 21rem; }
  /* Who it serves grows up from the line's foot, so it never reaches the phone line below. */
  .a-close-peek--contact { top: auto; bottom: calc(var(--a-close-fs) * 0.12); translate: none; }
  .a-close-way { opacity: 0; translate: -10px 0; transition-delay: 0ms; }

  /* Open. A short beat first, so a pointer crossing the lines does not flash all three. */
  .a-close-door:is(:hover, :focus-visible) .a-close-arrow { color: var(--teal-2); translate: 8px 0; }
  .a-close-door:is(:hover, :focus-visible) .a-close-peek { pointer-events: auto; }
  .a-close-door:is(:hover, :focus-visible) .a-close-cover {
    transform: var(--a-close-open);
    transition-duration: var(--h-spring-smooth-dur), var(--h-t-quick), var(--h-t);
    transition-timing-function: var(--h-spring-smooth), var(--h-ease-out), var(--h-ease-out);
    transition-delay: calc(70ms + var(--a-close-i) * 30ms), calc(70ms + var(--a-close-i) * 30ms), 0ms;
  }
  .a-close-door:is(:hover, :focus-visible) .a-close-paper {
    opacity: 1;
    transform: var(--a-close-open);
    /* The front paper lands first and opaque; the two behind slide out from under it, so two
       titles are never seen through each other. */
    transition-duration: var(--h-spring-smooth-dur), 140ms, var(--h-t);
    transition-timing-function: var(--h-spring-smooth), var(--h-ease-out), var(--h-ease-out);
    transition-delay: calc(110ms + var(--a-close-i) * 50ms), calc(70ms + var(--a-close-i) * 110ms), 0ms;
  }
  .a-close-door:is(:hover, :focus-visible) .a-close-way { opacity: 1; translate: 0 0; transition-delay: calc(70ms + var(--a-close-n, 0) * 55ms); }
  .a-close-way:nth-child(2) { --a-close-n: 1; }
  .a-close-way:nth-child(3) { --a-close-n: 2; }

  /* The other two doors step back, still 6:1 on this grey. */
  .a-close-doors:has(.a-close-door:is(:hover, :focus-visible)) .a-close-door:not(:hover, :focus-visible) .a-close-word { color: var(--text-2); }

  /* Point at a cover: it comes forward and says its name. Point at a paper behind: it comes
     to the front so its title can be read. */
  .a-close-door:hover .a-close-cover:hover { translate: 0 -14px; z-index: 9; }
  .a-close-cap.a-close-cap-on { opacity: 1; }
  .a-close-door:hover .a-close-paper:hover { translate: 0 -6px; z-index: 4; }
}

/* ── TOUCH AND NARROW: every preview shown under its noun ─────────────────────────────── */
@media (max-width: 900px), (hover: none), (pointer: coarse) {
  .a-close { padding: 80px 5vw 72px; --a-close-fs: clamp(2.3rem, 10vw, 4.25rem); --a-close-ch: clamp(76px, 14vw, 108px); --a-close-dx: min(calc(var(--a-close-ch) * 0.45), calc((90vw - var(--a-close-ch) * 1.25) / 6)); }
  .a-close-doors { width: auto; }
  .a-close-door {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "word arrow" "peek peek";
    align-items: center;
    padding: 1.35rem 0 1.5rem;
    border-top: 1px solid var(--border);
  }
  .a-close-item:last-child .a-close-door { border-bottom: 1px solid var(--border); }
  .a-close-door:focus-visible { outline: 2px solid var(--h-focus); outline-offset: 4px; border-radius: var(--h-r-mark); }
  .a-close-label { display: contents; }
  .a-close-word { grid-area: word; }
  .a-close-arrow { grid-area: arrow; width: 0.62em; height: 0.62em; }
  .a-close-door:active .a-close-arrow { translate: 4px 0; transition-duration: var(--h-t-press); }
  .a-close-peek { grid-area: peek; margin-top: 0.85rem; font-size: 0.95rem; }
  /* The fan row has its own height: the arc, the turned corners and the shadow all clear the
     hairline under it, and the outer cover clears the gutter. */
  .a-close-fan { width: calc(var(--a-close-slot) + 6 * var(--a-close-dx)); height: calc(var(--a-close-ch) + 58px); margin: 0.35rem 0 0 calc(var(--a-close-ch) * 0.27); }
  .a-close-cover { bottom: 34px; border-radius: 2px; }
  .a-close-cap, .a-close-papers { display: none; }
  .a-close-ways { gap: 0.3rem; }
  .a-close-way b { display: inline; font-size: inherit; }
  .a-close-way b::after { content: ":"; margin-right: 0.3em; }
  .a-close-call { margin-top: 2rem; }
  .a-close-call-line { font-size: 1rem; }
  /* The covers fan once as they scroll in (close.js arms this; without it they are fanned). */
  .a-close-armed:not(.a-close-fanned) .a-close-cover { transform: var(--a-close-shut); }
}

@media (prefers-reduced-motion: reduce) {
  .a-close *, .a-close *::before, .a-close *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .a-close-cover, .a-close-paper { border: 1px solid CanvasText; }
  .a-close-door:focus-visible .a-close-label, .a-close-door:focus-visible { outline-color: Highlight; }
}