/* Hallmark · genre: editorial · macrostructure: Long Document (inherits Cayman Considerations) · theme: studied-DNA (source: perennos.com/cayman-considerations, cream variant) · enrichment: three.js field · nav: N6 masthead + section tabs · footer: Ft4 colophon */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V3 (drafter self-score, not a quality claim) */

/* Tokens: cream variant, scoped to this page only. Every colour below is defined here and nowhere else. */
html.ag, body.ag {
  --color-paper: oklch(95.8% .02 86);
  --color-ink: oklch(19% .012 60);
  --color-muted: oklch(44% .012 70);
  --color-rule: oklch(72% .015 78);
  --color-accent: oklch(52% .09 55);
  --color-focus: var(--color-ink);
  --color-wash: color-mix(in oklch, var(--color-ink) 5%, var(--color-paper));
  --color-mark: color-mix(in oklch, var(--color-ink) 6%, transparent);
  --space-pad: 2rem;
  --rule-mid: 2px;
  --measure: 64ch;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
html.ag { background: var(--color-paper); color: var(--color-ink); }
body.ag { background: var(--color-paper); color: var(--color-ink); font: 380 var(--text-body)/1.72 var(--font-body); font-variation-settings: "wdth" 100; }

/* Type: Anybody + Courier Prime only */
.ag h1, .ag h2, .ag h3 { font-weight: 560; font-variation-settings: "wdth" 82; letter-spacing: -.02em; font-style: normal; }
.ag h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem); line-height: 1.02; max-width: none; margin: var(--space-sm) 0 var(--space-md); }
.ag h1 .l1, .ag h1 .l2 { display: block; }
.ag h1 .l2 { font-weight: 300; font-size: .5em; letter-spacing: -.01em; margin-block-end: .12em; }
.ag h2 { font-size: var(--text-heading); line-height: 1.15; }
.ag h3 { font-size: 1.25rem; line-height: 1.3; margin-block: var(--space-xl) var(--space-xs); }
.ag a:hover { color: var(--color-accent); }
.ag strong { font-weight: 600; }
.ag .pn { height: .74em; width: auto; vertical-align: -.06em; display: inline; }
.ag .date, .ag .basis, .ag .crumb, .ag figcaption, .ag caption, .ag .req, .ag .by { font-family: var(--font-meta); font-weight: 700; }
.ag .basis { font-variant-caps: all-small-caps; letter-spacing: .04em; font-size: 1.1em; color: var(--color-muted); }
.ag p.basis { display: block; }
.ag .date { margin-block: 0 var(--space-md); }

/* Breadcrumb */
.ag .crumb { gap: var(--space-xs); font-size: var(--text-small); font-weight: 700; padding-block-start: var(--space-sm); color: var(--color-muted); flex-wrap: nowrap; }
.ag .crumb a { min-height: 44px; }
.ag .crumb [aria-current] { color: var(--color-ink); white-space: nowrap; }

/* Intro */
.ag .opening.intro { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "copy" "field"; column-gap: var(--space-3xl); padding-block: var(--space-lg) var(--space-2xl); }
.ag .intro-head { grid-area: head; min-width: 0; }
.ag .intro-copy { grid-area: copy; min-width: 0; }
.ag .intro .sub { font-size: var(--text-lead); font-weight: 380; margin-block: 0 var(--space-xs); max-width: 40ch; }
.ag .intro p.intro { font-size: var(--text-body); line-height: 1.65; max-width: 58ch; }
.ag .ctas { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin: 0; }
.ag .ctas a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; font-weight: 560; }
.ag .field { grid-area: field; display: none; position: relative; height: 46vh; max-height: 720px; min-height: 15rem; margin-block: var(--space-md) var(--space-lg); min-width: 0; }
.ag .field.on { display: block; }
.ag .field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ag .field .pt { position: absolute; inset-inline-start: 90%; inset-block-start: 50%; font-family: var(--font-meta); font-weight: 700; font-size: .75rem; line-height: 1.2; white-space: nowrap; color: var(--color-ink); background: var(--color-paper); padding: 2px 4px; transform: translate(-100%, -150%); opacity: 0; }
@media (max-width: 24rem) { .ag .crumb { font-size: .75rem; } }
@media (min-width: 60rem) {
  .ag .opening.intro { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--space-2xl); grid-template-areas: "head field" "copy field"; align-items: start; }
  .ag .field { height: 62vh; margin-block: 0; }
}

/* Sticky section tabs (the only sticky element) */
.ag .tabs { position: sticky; top: 0; z-index: 5; flex-wrap: nowrap; gap: var(--space-lg); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; background: var(--color-paper); border-block: var(--rule-hair) solid var(--color-rule); }
.ag .tabs::-webkit-scrollbar { display: none; }
.ag .tabs a { flex: none; scroll-snap-align: start; text-decoration: none; font-weight: 560; padding-block: 0; }
.ag .tabs a:hover { text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: 6px; }
.ag .tabs a[aria-current="true"] { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: var(--rule-mid); text-underline-offset: 6px; }
.ag .tabs a:focus-visible { outline-offset: -4px; }

/* Reading grid */
.ag .reading { margin-block-start: var(--space-xl); }
.ag .contents ul { padding-inline-start: 0; }
.ag .contents a { display: block; overflow: hidden; text-overflow: ellipsis; line-height: 44px; min-height: 44px; }
.ag article { max-width: none; }
.ag article > section { border-block-start: var(--rule-hair) solid var(--color-rule); padding-block-start: var(--space-xl); scroll-margin-top: var(--space-2xl); }
.ag article > section:first-child { border-block-start: 0; padding-block-start: 0; }
.ag article > section > :is(p, ul, ol, blockquote, h2, h3), .ag details > :is(p, ul, ol, blockquote, h3), .ag .sheet > :is(p, ul, ol, blockquote, h2, h3) { max-width: var(--measure); }
.ag [id] { scroll-margin-top: var(--space-2xl); }
.ag article a { overflow-wrap: anywhere; }
.ag ul, .ag ol { padding-inline-start: 1.25rem; margin-block: 0 var(--space-lg); }
.ag li { margin-block-end: var(--space-xs); }
.ag hr.dbl { border: 0; border-block-start: 3px double var(--color-ink); margin-block: var(--space-3xl) var(--space-xl); }

/* Epigraphs */
.ag blockquote.epi { margin: var(--space-xl) 0; padding-inline-start: var(--space-lg); border-inline-start: var(--rule-hair) solid var(--color-ink); font-weight: 300; font-size: 1.5rem; line-height: 1.35; max-width: 44ch; }
.ag blockquote.epi p { margin: 0; }
.ag blockquote.epi .by { font-size: var(--text-small); margin-block-start: var(--space-xs); }

/* One-page sheet */
.ag .sheet { border: 3px double var(--color-ink); padding: var(--space-pad); }
.ag .sheet > :last-child { margin-block-end: 0; }

/* Tables */
.ag .scroll { overflow-x: auto; max-width: 100%; margin-block: var(--space-md) var(--space-lg); }
.ag .scroll:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.ag table { border-collapse: collapse; width: 100%; font-size: var(--text-small); line-height: 1.55; }
.ag .c3 { min-width: 30rem; } .ag .c4 { min-width: 38rem; } .ag .c5 { min-width: 46rem; } .ag .c2 { min-width: 20rem; }
.ag th, .ag td { text-align: start; vertical-align: top; padding: var(--space-xs) var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); }
.ag thead th { border-block-end: var(--rule-hair) solid var(--color-ink); font-weight: 600; }
.ag th[scope="row"] { font-weight: 600; }
.ag caption { caption-side: top; text-align: start; white-space: normal; overflow: visible; text-overflow: clip; font-size: var(--text-small); color: var(--color-muted); padding-block-end: var(--space-xs); }
.ag .form td.blank { min-width: 10rem; height: 3rem; border-inline-start: var(--rule-hair) solid var(--color-rule); }
.ag .req { color: var(--color-muted); }
.ag tr { break-inside: avoid; }

/* Reversibility map */
.ag figure.reversibility { margin: var(--space-xl) 0; }
.ag svg.map { display: block; width: 100%; height: auto; }
.ag svg.map .z { fill: none; stroke: var(--color-ink); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ag svg.map .zh { fill: url(#hatch); }
.ag svg.map .z3 { fill: var(--color-wash); }
.ag svg.map .hl { stroke: var(--color-ink); stroke-width: 1; }
.ag svg.map .ax { fill: none; stroke: var(--color-muted); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ag svg.map .t { font-family: var(--font-meta); font-weight: 700; font-size: 13px; fill: var(--color-ink); }
.ag svg.map .ax-l { fill: var(--color-muted); }
.ag figcaption { font-size: var(--text-small); color: var(--color-muted); }
.ag .alt { margin-block-start: var(--space-sm); }

/* Details and checklists */
.ag details { border-block-end: var(--rule-hair) solid var(--color-rule); padding-block-end: var(--space-xs); }
.ag details.ind:first-of-type { border-block-start: var(--rule-hair) solid var(--color-rule); }
.ag summary { display: flex; align-items: center; gap: var(--space-xs); min-height: 44px; cursor: pointer; list-style: none; font-weight: 560; font-size: 1rem; min-width: 0; }
.ag summary::-webkit-details-marker { display: none; }
.ag summary::before { content: ""; flex: none; width: .6rem; height: .6rem; border-inline-end: var(--rule-mid) solid var(--color-ink); border-block-end: var(--rule-mid) solid var(--color-ink); transform: rotate(-45deg); margin-inline-end: var(--space-xs); }
.ag details[open] > summary::before { transform: rotate(45deg); }
.ag summary .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ag summary .ct { flex: none; white-space: nowrap; font-family: var(--font-meta); font-weight: 700; font-size: var(--text-small); color: var(--color-muted); }
.ag summary:active { color: var(--color-accent); }
.ag ul.checks { list-style: none; padding-inline-start: 0; }
.ag ul.checks li { position: relative; padding-inline-start: var(--space-lg); }
.ag ul.checks li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .42em; width: .8em; height: .8em; border: var(--rule-mid) solid var(--color-ink); }

/* Sources and downloads */
.ag ul.srcs { list-style: none; padding-inline-start: 0; max-width: var(--measure); }
.ag ul.srcs li { padding-inline-start: var(--space-md); border-inline-start: var(--rule-hair) solid var(--color-rule); }
.ag ul.dl a { display: inline-flex; align-items: center; min-height: 44px; }

/* Footer colophon */
.ag footer p { margin-block: 0 var(--space-xs); }

/* Motion fallback: the field is static and the page has no other animation */
@media (prefers-reduced-motion: reduce) { .ag *, .ag *::before, .ag *::after { scroll-behavior: auto; transition: none; animation: none; } }
@media (prefers-reduced-motion: no-preference) { .ag .field .pt { transition: opacity .3s var(--ease-out); } }

/* Print: watermark, fixed footer line, A4 */
@page { size: A4; margin: 18mm; @bottom-center { content: "\00a9  2026 Perennos. All rights reserved. \00b7  https://perennos.com/cayman-considerations/ai-governance/"; font-family: var(--font-meta); font-weight: 700; font-size: 7pt; color: var(--color-muted); } }
@media print {
  .ag .tabs, .ag .field, .ag .mast nav, .ag .crumb, .ag .contents, .ag .ctas, .ag .skip { display: none; }
  .ag .opening.intro { display: block; padding-block: 0; }
  .ag .reading { display: block; margin: 0; }
  .ag article > section { break-inside: auto; border: 0; }
  .ag .sheet { break-before: page; break-after: page; }
  .ag .scroll { overflow: visible; }
  .ag .scroll table { min-width: 0; }
  body.ag::before { content: "PERENNOS \00b7  ANSWERABLE AI v1.0 \00b7  \00a9  2026"; position: fixed; inset-block-start: 50%; inset-inline-start: 50%; transform: translate(-50%, -50%) rotate(-35deg); font-family: var(--font-meta); font-weight: 700; font-size: 2.6rem; letter-spacing: .08em; white-space: nowrap; color: var(--color-mark); pointer-events: none; }
}
/* phone: map labels readable once the 720-unit map scales to the column */
@media (max-width: 59.99rem) { .ag svg.map .t { font-size: 16px; } .ag svg.map .ax-l[transform] { display: none; } }
/* desktop: contents follows the reader, docked under the sticky tabs (gate 56: offset below the one top-sticky bar) */
@media (min-width: 60rem) { .ag .contents { position: sticky; top: 4rem; max-height: calc(100vh - 5rem); overflow-y: auto; overscroll-behavior: contain; } }