/* The AI visibility audit (Fable 3.3): a kraft string-and-button envelope on the head's sheets, the report showing above its
   mouth. Unwound (page.js [data-env]), the string comes off the buttons in held frames, the flap lifts and the report rises.
   All CSS and inline SVG on the existing paper textures; zero credits. */
.au-head .dc-head__grid { align-items: end; }
.au-env { position: relative; justify-self: center; width: min(100%, calc(290 * var(--u))); aspect-ratio: 3 / 2; margin: calc(96 * var(--u)) calc(30 * var(--u)) calc(16 * var(--u)) 0; transform: rotate(-3deg); z-index: 3;
  --kraft: #C9A574; --kraft-2: #D4B385; perspective: 1400px; }
.au-env__back, .au-env__front, .au-env__flap { position: absolute; background-color: var(--kraft); background-image: var(--paper-tex); background-size: 380px; background-blend-mode: multiply; }
.au-env__back { inset: 0; border-radius: 2px; box-shadow: 0 2px 2px rgb(21 31 34 / .2), 0 24px 40px -18px rgb(13 22 25 / .55); }
/* the report, between back and front, taller than the envelope so its head shows above the mouth */
/* 2026-11-06: raised 16u so the whole "The deliverable" tape clears the flap (it was half under it) */
.au-report { position: absolute; z-index: 2; left: 8%; right: 8%; top: calc(-24px - 4% - 16 * var(--u)); height: 96%; padding: calc(12 * var(--u)) calc(16 * var(--u)); background: #FCF9F3 var(--sheet-a); background-size: 600px;
  box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .14); overflow: hidden; transition: transform .62s steps(8, end); }
.au-report .label--tape { font-size: calc(9 * var(--u)); padding: .5em .8em .45em; }
.au-report__title { margin-top: calc(8 * var(--u)); font: 700 calc(15 * var(--u)) / 1.12 var(--display); color: var(--hd); max-width: 22ch; }
.au-report__lines { display: grid; gap: calc(5 * var(--u)); margin-top: calc(10 * var(--u)); padding: 0; list-style: none; }
.au-report__lines li { position: relative; padding: calc(4 * var(--u)) 0 0 calc(14 * var(--u)); border-top: 1px solid var(--rule); font: 400 calc(7.6 * var(--u)) / 1.35 var(--read); color: var(--ink); }
.au-report__lines li::before { content: ""; position: absolute; left: 0; top: calc(7 * var(--u)); width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; border: 1.2px solid var(--ink-red); }
/* the front pocket: its side folds meet in a V below the mouth */
.au-env__front { z-index: 3; inset: 0; background-color: var(--kraft-2); clip-path: polygon(0 22%, 50% 56%, 100% 22%, 100% 100%, 0 100%);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / .08); }
.au-env__front::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgb(255 255 255 / .12), transparent 40%, rgb(0 0 0 / .06)); }
/* the flap, folded down over the front from the top edge; it lifts back on its hinge when the string is off.
   2026-11-06: a pentagon whose slanted edges run about 3% below the pocket's V (sides 25% against 22%, tip 59% against 56%);
   the old triangle (polygon(0 0, 100% 0, 50% 100%) at 58% tall) left two wedges at the corners where the letter showed */
.au-env__flap { z-index: 4; left: 0; right: 0; top: 0; height: 60%; background-color: #C29C69; clip-path: polygon(0 0, 100% 0, 100% 42%, 50% 98%, 0 42%); transform-origin: 50% 0;
  filter: drop-shadow(0 3px 2px rgb(13 22 25 / .25)); transition: transform .62s steps(8, end); }
.au-env__button { position: absolute; z-index: 5; left: 50%; width: calc(20 * var(--u)); aspect-ratio: 1; margin-left: calc(-10 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #F2E6CC, #B99A68 70%); box-shadow: 0 1px 1px rgb(0 0 0 / .3), inset 0 -1px 1px rgb(0 0 0 / .18); }
.au-env__button--flap { top: auto; bottom: 6%; }
.au-env__button--body { top: 68%; }
.au-env__string { position: absolute; z-index: 6; left: 50%; top: 0; width: 46%; height: 100%; translate: -50% 0; overflow: visible; fill: none; stroke: #F4EEE2; stroke-width: 1.8; stroke-linecap: round;
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / .25)); pointer-events: none; }
.au-env__wound { stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset .62s steps(8, end); }
.au-env__loose { opacity: 0; transition: opacity .2s steps(2, end) .4s; }
.au-env__pull { position: absolute; z-index: 7; left: 50%; top: calc(68% - 12px); width: 48px; height: 48px; margin-left: -24px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.au-env__pull:focus-visible { outline: 2px solid var(--hd); outline-offset: 2px; }
.au-env__stamp { position: absolute; z-index: 6; left: 9%; bottom: 10%; color: #5A4511; border-color: #5A4511; background: rgb(246 238 214 / .35); }
.au-note { right: calc(100% + 56px); top: 6%; }
/* unwound: the string off, the flap up behind the report, the report risen */
.au-env.is-open .au-env__wound { stroke-dashoffset: 100; }
.au-env.is-open .au-env__loose { opacity: 1; }
.au-env.is-open .au-env__flap { transform: rotateX(178deg); z-index: 1; }
.au-env.is-open .au-env__button--flap { opacity: 0; }
.au-env.is-open .au-report { transform: translateY(calc(-86 * var(--u))); }
.au-recv { margin: .2em 0 .4em; }
.au-intents strong { font-weight: 600; }

@media (max-width: 1100px) {
  .au-env { justify-self: start; margin-top: calc(80 * var(--u)); }
  .au-note { right: auto; left: 0; top: -2.6em; }
}
@media (max-width: 760px) {
  .au-env { width: 100%; margin: 96px 0 12px; transform: rotate(-1.5deg); }
  .au-report__title { font-size: 1.05rem; }
  .au-report__lines li { font-size: .66rem; }
  .au-env.is-open .au-report { transform: translateY(-80px); }
  .au-note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .au-report, .au-env__flap, .au-env__wound, .au-env__loose { transition: none; }
}