/* Aux Labs: site-wide layer on top of the compiled tailwind.css.
   tailwind.css can't be regenerated byte-for-byte (see README), so shared
   rules that postdate it live here. Every page links this after tailwind.css. */

/* ─── BOOT: neubrutalist tile sequence (replaces the terminal readout) ─────
   Nine hard-shadowed tiles drop in, the grid snaps a quarter turn, the
   centre tile goes green, the tiles scatter and the wordmark lands.
   Shown only on a first visit with motion allowed (head script), lifted by
   axl.js or by the 2.6s failsafe. */
html.axl-booting #axl-boot {
  background: rgb(var(--paper-rgb)); color: rgb(var(--ink-rgb));
  align-items: center; justify-content: center; padding: 2rem;
}
.axl-b-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2.25rem; }
.axl-b-grid {
  display: grid; grid-template-columns: repeat(3, 44px); gap: 10px;
  animation: axl-b-turn 420ms cubic-bezier(.7,0,.2,1) 560ms both;
}
.axl-b-tile {
  width: 44px; height: 44px; background: rgb(var(--paper-rgb));
  border: 3px solid rgb(var(--ink-rgb)); box-shadow: 5px 5px 0 rgb(var(--ink-rgb));
  animation:
    axl-b-drop 420ms cubic-bezier(.34,1.56,.64,1) calc(var(--i) * 45ms) both,
    axl-b-scatter 380ms cubic-bezier(.6,0,.9,.4) 1080ms forwards;
}
.axl-b-tile:nth-child(5) { animation: axl-b-drop 420ms cubic-bezier(.34,1.56,.64,1) 180ms both, axl-b-green 1ms linear 900ms forwards, axl-b-scatter 380ms cubic-bezier(.6,0,.9,.4) 1080ms forwards; }
.axl-b-tile:nth-child(1) { --dx: -90px; --dy: -90px; } .axl-b-tile:nth-child(2) { --dx: 0;     --dy: -110px; }
.axl-b-tile:nth-child(3) { --dx: 90px;  --dy: -90px; } .axl-b-tile:nth-child(4) { --dx: -110px; --dy: 0; }
.axl-b-tile:nth-child(5) { --dx: 0;     --dy: 0; }     .axl-b-tile:nth-child(6) { --dx: 110px; --dy: 0; }
.axl-b-tile:nth-child(7) { --dx: -90px; --dy: 90px; }  .axl-b-tile:nth-child(8) { --dx: 0;     --dy: 110px; }
.axl-b-tile:nth-child(9) { --dx: 90px;  --dy: 90px; }
.axl-b-mark {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase;
  letter-spacing: -.04em; line-height: .9; font-size: clamp(2.4rem, 9vw, 4.5rem); white-space: nowrap;
  opacity: 0; animation: axl-b-mark 300ms cubic-bezier(.34,1.56,.64,1) 1240ms forwards;
}
.axl-b-mark span { background: #00FF41; color: #000; padding: 0 .12em; }
.axl-boot-hint { margin-top: 0; color: rgb(var(--ink-rgb) / .45); }
@keyframes axl-b-drop { from { transform: translateY(-48px) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes axl-b-turn { from { transform: rotate(0); } to { transform: rotate(-90deg); } }
@keyframes axl-b-green { to { background: #00FF41; } }
@keyframes axl-b-scatter { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes axl-b-mark { from { opacity: 0; transform: translate(-50%, -30%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ─── STATUS BAR: middle label always centred to the page ──────────────── */
.axl-status { display: grid !important; grid-template-columns: 1fr auto 1fr; column-gap: 1rem; }
.axl-status > span:nth-child(1) { grid-column: 1; text-align: left; }
.axl-status > span:nth-child(2) { grid-column: 2; text-align: center; }
.axl-status > span:nth-child(3) { grid-column: 3; text-align: right; }

/* ─── CTA: white box, black type, green button; no stripe under it ─────── */
.cta-final { background: rgb(var(--surface-rgb)); color: rgb(var(--ink-rgb)); }
.cta-final .cta-btn { background: #00FF41; color: #000; border: 2px solid rgb(var(--ink-rgb)); box-shadow: 5px 5px 0 rgb(var(--ink-rgb)); }
.cta-final .cta-btn:hover { background: rgb(var(--ink-rgb)); color: #00FF41; }
html[data-theme="dark"] .cta-final { background: rgb(var(--surface-rgb)); color: rgb(var(--ink-rgb)); }
html[data-theme="dark"] .cta-final .cta-btn { background: #00FF41; color: #000; }
html[data-theme="dark"] .cta-final .cta-btn:hover { background: rgb(var(--ink-rgb)); color: #000; }
.axl-cta-body { font-size: 1rem; line-height: 1.7; max-width: 42rem; margin: 0 auto 3rem; color: rgb(var(--ink-rgb) / .8); }
.axl-cta-note { margin-top: 2rem; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--ink-rgb) / .6); }

/* ─── PULL QUOTE: one treatment site-wide (Commercial's) ───────────────── */
.axl-pull { font-family: 'Inter', sans-serif; font-style: normal; font-weight: 700; font-size: 1.25rem; line-height: 1.35;
  border-left: 4px solid #00FF41; padding: .5rem 0 .5rem 2rem; max-width: 42rem; }
@media (min-width: 1024px) { .axl-pull { font-size: 1.5rem; } }

/* ─── EMPHASIS: never outlined; a green marker block instead ───────────── */
.axl-mark { background: #00FF41; color: #000; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ─── FOOTER: more leading ─────────────────────────────────────────────── */
footer .font-mono p { line-height: 2.1; }

/* ─── IMAGES: whole, not cropped ───────────────────────────────────────── */
.axl-card-img { aspect-ratio: 1 / 1; }   /* square, so all three open files fit on one screen; one shared ratio keeps the cards' text aligned */
.axl-card-img img { height: 100%; object-fit: cover; transform: none !important; }
.axl-figure { display: block; background: rgb(var(--panel-rgb)); }
.axl-figure img { display: block; width: 100%; height: auto; }

/* ─── RESEARCH CAROUSEL ────────────────────────────────────────────────── */
.axl-car { position: relative; }
.axl-car-track { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 1.5rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 2rem; padding: 1.5rem 2rem 2.25rem;
  scrollbar-width: none; }
.axl-car-track::-webkit-scrollbar { display: none; }
@media (min-width: 640px)  { .axl-car-track { grid-auto-columns: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1100px) { .axl-car-track { grid-auto-columns: calc((100% - 3rem) / 3); } }
.axl-car-card { scroll-snap-align: start; display: flex; flex-direction: column; border: 2px solid rgb(var(--ink-rgb));
  background: rgb(var(--surface-rgb)); box-shadow: 6px 6px 0 rgb(var(--ink-rgb)); }
.axl-car-art { position: relative; aspect-ratio: 5 / 7; overflow: hidden; border-bottom: 2px solid rgb(var(--ink-rgb)); background: rgb(var(--panel-rgb)); }
.axl-car-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.axl-car-ph { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 1.25rem;
  color: #fff; font-family: 'JetBrains Mono', monospace; text-transform: uppercase;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px),
              repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px), rgb(var(--panel-rgb)); }
.axl-car-ph b { font-family: 'Inter', sans-serif; font-weight: 900; font-size: 2.6rem; letter-spacing: -.04em; line-height: .9; }
.axl-car-ph i { font-style: normal; align-self: flex-start; background: #00FF41; color: #000; padding: .15rem .4rem; font-size: 9px; letter-spacing: .15em; font-weight: 700; }
.axl-car-ph i.is-rev { background: #fff; }
.axl-car-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; flex: 1; }
.axl-car-nav { display: flex; gap: .75rem; }
.axl-car-btn { width: 44px; height: 44px; border: 2px solid rgb(var(--ink-rgb)); background: rgb(var(--surface-rgb)); font-family: 'JetBrains Mono', monospace; font-weight: 700;
  box-shadow: 3px 3px 0 rgb(var(--ink-rgb)); cursor: pointer; }
.axl-car-btn:hover { background: #00FF41; color: #000; }
.axl-car-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .axl-b-grid, .axl-b-tile, .axl-b-mark { animation: none !important; }
  .axl-car-track { scroll-behavior: auto; }
}

/* ─── UTILITY SHIMS: classes used in pages but absent from the compiled
   tailwind.css (several were silently doing nothing before). ─────────── */
.text-white\/75 { color: rgb(255 255 255 / .75); }
.text-white\/90 { color: rgb(255 255 255 / .9); }
.text-archival-ink\/85 { color: rgb(var(--ink-rgb) / .85); }
.hover\:text-archival-ink:hover { color: rgb(var(--ink-rgb)); }
.gap-x-4 { column-gap: 1rem; } .gap-y-1 { row-gap: .25rem; }
.mt-auto { margin-top: auto; } .mt-10 { margin-top: 2.5rem; } .pt-6 { padding-top: 1.5rem; } .pb-12 { padding-bottom: 3rem; }
@media (min-width: 640px) { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ─── OPEN FILE PLATE: designed stand-in when a file has no photo yet ──── */
.axl-card-img--plate { position: relative; background: rgb(var(--panel-rgb)); }
.axl-card-img--plate .axl-car-ph { position: absolute; inset: 0; }
.axl-card-img--plate img { position: absolute; inset: 0; }

/* ─── OPEN FILES: three, stacked on phones, side by side from 768px ──── */
.axl-files { display: grid; grid-template-columns: 1fr; }
.axl-files > a { border-bottom: 1px solid rgb(var(--ink-rgb)); }
@media (min-width: 768px) {
  .axl-files { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .axl-files > a { border-bottom: 0; }
  .axl-files > a:not(:last-child) { border-right: 1px solid rgb(var(--ink-rgb)); }
}

/* ─── FIELD PLAN (Research page): plate beside the text, short on phones ─ */
.axl-plan-art { display: block; position: relative; overflow: hidden; min-height: 220px; background: rgb(var(--panel-rgb)); }
.axl-plan-art .axl-car-ph, .axl-plan-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .axl-plan-art { min-height: 320px; } }

/* ─── GREEN BUTTON: the hero's book-a-meeting, matching the CTA button ─── */
.axl-btn-green { background: #00FF41; color: #000; border: 2px solid rgb(var(--ink-rgb)); box-shadow: 5px 5px 0 rgb(var(--ink-rgb)); font-weight: 700; }
.axl-btn-green:hover { background: rgb(var(--ink-rgb)); color: rgb(var(--paper-rgb)); }

/* ─── PAPER TITLES: the part after the colon is a lighter subtitle ────── */
.axl-sub { font-weight: 700; }   /* title is 900; Inter loads 300/400/700/900 */

/* ─── FIG. 02 (Research): the lab and the Switchboard, together and apart ─ */
.axl-dia { background: rgb(var(--panel-rgb)); color: #fff; padding: 1.5rem; border: 2px solid rgb(var(--ink-rgb)); max-width: 56rem; }
@media (min-width: 1024px) { .axl-dia { padding: 2rem; } }
.axl-dia-row { display: grid; grid-template-columns: 1fr; gap: 1rem; align-items: stretch; }
@media (min-width: 768px) { .axl-dia-row { grid-template-columns: 1fr minmax(11rem, .8fr) 1fr; gap: 0; } }
.axl-dia-node { border: 2px solid #fff; padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.axl-dia-node b { font-family: 'Inter', sans-serif; font-weight: 900; text-transform: uppercase; letter-spacing: -.03em; font-size: 1.25rem; line-height: 1.1; }
.axl-dia-node p { font-size: .875rem; line-height: 1.5; color: rgb(255 255 255 / .85); }
.axl-dia-tag { align-self: flex-start; background: #00FF41; color: #000; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: .15rem .4rem; }
.axl-dia-alone { margin-top: auto; padding-top: .75rem; border-top: 1px dashed rgb(255 255 255 / .35); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgb(255 255 255 / .75); line-height: 1.6; }
.axl-dia-mid { position: relative; display: flex; flex-direction: column; justify-content: center; gap: .9rem; padding: 1rem .75rem; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
.axl-dia-wall { align-self: center; border: 1px dashed #00FF41; color: #00FF41; font-size: 9px; letter-spacing: .2em; padding: .2rem .5rem; }
.axl-dia-flow { color: #fff; font-weight: 700; }
.axl-dia-back { color: #00FF41; }
.axl-dia-h { display: none; }
@media (min-width: 768px) { .axl-dia-h { display: inline; } .axl-dia-v { display: none; } }
.axl-dia figcaption { margin-top: 1.25rem; font-size: .875rem; line-height: 1.6; color: rgb(255 255 255 / .8); max-width: 42rem; }

/* ─── 30-SECOND BOX: why now / why you / why us, top of every paper ──── */
.axl-30s { border: 2px solid rgb(var(--ink-rgb)); box-shadow: 5px 5px 0 rgb(var(--ink-rgb)); background: rgb(var(--surface-rgb)); padding: 1.25rem 1.5rem; margin: 0 0 2rem; }
.axl-30s-h { display: inline-block; background: #00FF41; color: #000; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; padding: .15rem .45rem; margin-bottom: 1rem; }
.axl-30s dl { display: grid; grid-template-columns: 1fr; gap: .25rem 1.25rem; margin: 0; }
@media (min-width: 640px) { .axl-30s dl { grid-template-columns: 6.5rem 1fr; row-gap: .85rem; } }
.axl-30s dt { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding-top: .2rem; }
.axl-30s dd { margin: 0 0 .75rem; font-size: .9375rem; line-height: 1.55; color: rgb(var(--ink-rgb) / .85); }
@media (min-width: 640px) { .axl-30s dd { margin: 0; } }

/* ─── WHY YOU grid: hairlines between cells at every breakpoint ─────────── */
.axl-why-you > div { border-bottom: 1px solid rgb(var(--ink-rgb)); }
@media (min-width: 768px) and (max-width: 1023px) { .axl-why-you > div:nth-child(odd) { border-right: 1px solid rgb(var(--ink-rgb)); } .axl-why-you > div:nth-last-child(-n+2) { border-bottom: 0; } }
@media (min-width: 1024px) { .axl-why-you > div:not(:nth-child(3n)) { border-right: 1px solid rgb(var(--ink-rgb)); } .axl-why-you > div:nth-last-child(-n+3) { border-bottom: 0; } }

/* ─── REDACTION (AXL-WP-04 public edition): a visible bar where method is withheld ─ */
.axl-redact { margin: 1.25rem 0 2rem; padding: .9rem 1rem; background: repeating-linear-gradient(-45deg, rgb(var(--ink-rgb)) 0 10px, rgb(var(--ink-rgb) / .88) 10px 20px);
  color: rgb(var(--paper-rgb)); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .15em; text-transform: uppercase; }
.axl-redact span { background: #00FF41; color: #000; font-weight: 700; padding: .1rem .4rem; margin-right: .5rem; }
.axl-redact-note { border: 2px dashed rgb(var(--ink-rgb)); padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: .9375rem; line-height: 1.6; }
.axl-redact-note a { text-decoration: underline; }

/* ─── PAPER FIGURES ON PHONES: keep diagram type readable; scroll sideways, tap for full size ─ */
.axl-fig-zoom { display: block; cursor: zoom-in; }
@media (max-width: 700px) {
  .paper-prose .axl-figure > .axl-fig-zoom { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .paper-prose .axl-figure img[src$=".svg"] { width: 720px; max-width: none; }
  .paper-prose .axl-figure figcaption::before { content: "Swipe or tap to enlarge · "; }
}