/* ─────────────────────────────────────────────────────────────────────────
   AESTHETIC DIRECTIONS — one vision-led message, seven distinct looks.
   Loads AFTER /css/site.css (reuses :root tokens). CSP style-src 'self'.
   Body classes: aes + one of sk-mono | sk-serif | sk-icon | sk-mood
   | sk-swiss | sk-blueprint | sk-aurora
   ───────────────────────────────────────────────────────────────────────── */

/* ── Shared base ───────────────────────────────────────────────────────── */
.aes-page { position: relative; z-index: 1; min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  text-align: center; max-width: 840px; margin: 0 auto; padding: 7vh 32px 6vh; }
.aes-wordmark { width: 180px; margin: 0 auto 14px; opacity: .92; }
.aes-wordmark svg { display: block; width: 100%; height: auto; }
.aes-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--dim); margin: 0; line-height: 1.5; }
.aes-core { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; width: 100%; }
.aes-hero { font-family: var(--mono); font-weight: 400; font-size: clamp(30px, 6vw, 54px);
  line-height: 1.3; letter-spacing: -.01em; color: var(--fg); max-width: 17ch; margin: 0 auto 24px; }
.aes-sub { font-size: clamp(15px, 2.3vw, 18px); line-height: 1.62; color: var(--muted);
  max-width: 50ch; margin: 0 auto; }
.aes-bottom { width: 100%; }
.aes-why { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--dim);
  margin: 0 auto 6px; max-width: 62ch; line-height: 1.6; }
.aes-honest { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--dim);
  margin: 0 auto 22px; max-width: 62ch; line-height: 1.6; }
.aes-cta { display: inline-flex; align-items: center; padding: 14px 30px; font-family: var(--mono);
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.28); border-radius: 2px;
  text-decoration: none; line-height: 1.3; transition: background .2s, border-color .2s; }
.aes-cta:hover, .aes-cta:focus-visible { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }
.aes-url { margin: 16px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--dim); }
.aes-url a { color: var(--dim); text-decoration: none; }
.aes-url a:hover { color: var(--fg); }

/* Points row (labels; icons injected per page) */
.aes-points { display: flex; gap: 34px; justify-content: center; flex-wrap: wrap; margin: 42px auto 0; }
.aes-points .item { max-width: 150px; }
.aes-points .k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg); display: block; margin: 0 0 6px; line-height: 1.4; }
.aes-points .v { font-size: 13px; color: var(--dim); line-height: 1.5; }
.aes-ic { width: 30px; height: 30px; margin: 0 auto 12px; display: block; }
.aes-ic [fill] { fill: none; }
.aes-ic path, .aes-ic circle, .aes-ic line, .aes-ic rect, .aes-ic polyline, .aes-ic polygon {
  fill: none; stroke: var(--accent-emerald); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ── 02 · Serif (magazine) ─────────────────────────────────────────────── */
.sk-serif .aes-hero { font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 500; font-size: clamp(38px, 7.2vw, 66px); line-height: 1.16; letter-spacing: 0; max-width: 15ch; }
.sk-serif .aes-sub { font-family: Georgia, 'Times New Roman', serif; font-style: italic;
  font-size: clamp(16px, 2.5vw, 21px); line-height: 1.6; color: var(--muted); }

/* ── 04 · Moodboard (tiles) ────────────────────────────────────────────── */
.aes-mood { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; width: 100%;
  max-width: 700px; margin: 38px auto 0; }
@media (min-width: 680px) { .aes-mood { grid-template-columns: repeat(3, 1fr); } }
.aes-mood .tile { border-radius: 6px; padding: 22px 18px; min-height: 128px; display: flex;
  flex-direction: column; justify-content: flex-end; text-align: left; border: 1px solid var(--hairline); }
.aes-mood .tile .lab { font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg); }
.aes-mood .tile .txt { font-size: 14px; color: rgba(255,255,255,.82); margin-top: 6px; line-height: 1.45; }
.tile.t-emerald { background: linear-gradient(155deg, rgba(16,185,129,.16), rgba(16,185,129,.03)); border-color: rgba(16,185,129,.24); }
.tile.t-violet  { background: linear-gradient(155deg, rgba(107,94,205,.18), rgba(107,94,205,.03)); border-color: rgba(107,94,205,.26); }
.tile.t-forest  { background: linear-gradient(155deg, rgba(58,80,75,.34), rgba(58,80,75,.05)); border-color: rgba(58,80,75,.5); }
.tile.t-alex    { background: linear-gradient(155deg, rgba(72,61,139,.24), rgba(72,61,139,.05)); border-color: rgba(72,61,139,.32); }
.tile.t-dark    { background: var(--card); }
.tile.t-brand   { background: #050505; align-items: flex-start; justify-content: center; text-align: left; }
.tile.t-brand .lab { font-size: 15px; letter-spacing: .02em; text-transform: none; color: var(--fg); }

/* ── 05 · Grand sans (Swiss) ───────────────────────────────────────────── */
.sk-swiss .aes-page { align-items: flex-start; text-align: left; max-width: 1000px; }
.sk-swiss .aes-eyebrow, .sk-swiss .aes-wordmark { margin-left: 0; }
.sk-swiss .aes-core { align-items: flex-start; }
.sk-swiss .aes-hero { font-family: var(--sans); font-weight: 800; font-size: clamp(42px, 8.6vw, 88px);
  line-height: .98; letter-spacing: -.03em; max-width: 13ch; text-align: left; margin: 0 0 24px; }
.sk-swiss .aes-sub { text-align: left; margin: 0; max-width: 46ch; font-size: clamp(16px, 2.4vw, 20px); }
.sk-swiss .aes-points { justify-content: flex-start; }
.sk-swiss .aes-bottom { text-align: left; }
.sk-swiss .aes-why, .sk-swiss .aes-honest { margin-left: 0; }

/* ── 06 · Blueprint (schematic) ────────────────────────────────────────── */
.sk-blueprint { background-image:
  linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 42px 42px; }
.sk-blueprint .aes-hero { letter-spacing: .01em; }
.aes-diagram { width: 100%; max-width: 440px; margin: 34px auto 0; }
.aes-diagram svg { width: 100%; height: auto; display: block; }
.aes-diagram line { stroke: rgba(255,255,255,.22); stroke-width: 1; }
.aes-diagram circle.node { fill: var(--bg); stroke: var(--accent-emerald); stroke-width: 1.4; }
.aes-diagram circle.core { fill: rgba(16,185,129,.12); stroke: var(--accent-emerald); stroke-width: 1.6; }
.aes-diagram text { fill: var(--muted); font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .12em; text-transform: uppercase; text-anchor: middle; }
.aes-diagram text.coretext { fill: var(--fg); font-size: 10px; }

/* ── 07 · Aurora (luminous minimal) ────────────────────────────────────── */
.sk-aurora .aes-page::before { content: ""; position: absolute; top: 6%; left: 50%;
  transform: translateX(-50%); width: min(92vw, 780px); height: 540px; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(16,185,129,.20), rgba(107,94,205,.10) 44%, transparent 70%);
  filter: blur(34px); }
.sk-aurora .aes-hero { font-size: clamp(34px, 7vw, 60px); }

/* ── HYBRID · Monolith + Iconographic (3 covers) ───────────────────────── */
/* H2 · Icon ledger — vertical rows: icon | label | line */
.hy-ledger .aes-core { align-items: stretch; }
.aes-ledger { width: 100%; max-width: 600px; margin: 38px auto 0; list-style: none; padding: 0; }
.aes-ledger li { display: flex; align-items: center; gap: 20px; padding: 17px 0;
  border-bottom: 1px solid var(--hairline); text-align: left; }
.aes-ledger li:last-child { border-bottom: 0; }
.aes-ledger .aes-ic { margin: 0; flex-shrink: 0; width: 26px; height: 26px; }
.aes-ledger .k { font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg); min-width: 150px; flex-shrink: 0; }
.aes-ledger .v { color: var(--muted); font-size: 14px; line-height: 1.5; }
@media (max-width: 520px) { .aes-ledger .k { min-width: 0; } .aes-ledger li { flex-wrap: wrap; gap: 10px; } }
/* H3 · Icon crest — larger icons, centered */
.aes-crest { display: flex; gap: 46px; justify-content: center; flex-wrap: wrap; margin: 42px auto 0; }
.aes-crest .item { max-width: 150px; }
.aes-crest .aes-ic { width: 44px; height: 44px; margin: 0 auto 14px; }
.aes-crest .k { font-family: var(--mono); font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg); display: block; margin-bottom: 6px; }
.aes-crest .v { font-size: 13px; color: var(--dim); line-height: 1.5; }

/* ── TWO-PAGER · cover sheet + detail sheet ────────────────────────────── */
.sheet-cover { position: relative; }
.sheet-detail { background: var(--bg); border-top: 1px solid var(--hairline); }
.sheet-detail .wrap { padding-top: 8px; padding-bottom: 8px; }
.sheet-detail section { padding: 32px 0; border-top: 1px solid var(--hairline); }
.sheet-detail section:first-of-type { border-top: 0; padding-top: 40px; }
.sheet-detail h2 { font-size: 24px; }
.p2-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--dim); text-align: center; margin: 40px 0 4px; }
.p2-thesis { font-family: var(--mono); font-size: clamp(17px, 2.5vw, 21px); line-height: 1.55;
  color: var(--fg); max-width: 680px; margin: 0 auto; text-align: center; }
.p2-lead { max-width: 660px; margin: 0 auto 26px; font-size: 16px; line-height: 1.62; color: var(--muted); }
.p2-scenarios { list-style: none; padding: 0; margin: 0; }
.p2-scenarios li { padding: 14px 0; border-bottom: 1px solid var(--hairline); color: var(--fg); line-height: 1.55; }
.p2-scenarios li:last-child { border-bottom: 0; }
.p2-scenarios .lead { font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-emerald); display: block; margin-bottom: 4px; }
.p2-note { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--dim);
  text-align: center; margin-top: 16px; }

/* ── Two-pager page-2 extras: tech strip, signature, page marks ─────────── */
/* Under-the-hood: a quiet annotation line, NOT a card. The rounded-rectangle box
   was a web-UI element dropped into an editorial page and read as clutter (it
   also stacked a doubled hairline above and below it). No border, no background,
   no radius — it sits in whitespace like a footnote and lets the link carry it. */
.p2-tech { padding: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.p2-tech .p2-tech-k { font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--fg); margin-right: 10px; }
.p2-tech a { color: var(--fg); text-decoration-color: var(--dim); white-space: nowrap; }
.p2-founder { max-width: 620px; margin: 0 auto 14px; font-size: 14px; line-height: 1.6;
  color: var(--fg); text-align: center; }
.p2-sign { font-family: var(--mono); font-size: 13px; letter-spacing: .03em; color: var(--muted);
  text-align: center; margin: 16px 0 0; line-height: 1.6; }
.page-mark { font-family: var(--mono); font-size: 10px; letter-spacing: .24em; color: var(--dim);
  text-transform: uppercase; text-align: center; margin: 14px 0 0; }

/* ── Print — dark preserved; two-pager = exactly 2 sheets ──────────────── */
@media print {
  @page { size: 8.5in 11in; margin: 0; }
  html, body { background: #000 !important; }
  .aes-page { width: 8.5in; height: 11in; min-height: 0; padding: 0.9in 0.85in; margin: 0; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Two-pager cover: box kept safely UNDER a full sheet so its last line
     can't round onto a blank page; break-after starts the vision on page 2. */
  .sheet-cover .aes-page { height: 9.5in; overflow: hidden; break-after: page;
    padding: 0.55in 0.85in; }
  .sheet-cover .aes-hero { font-size: 34px !important; margin-bottom: 18px; }
  .sheet-cover .aes-ledger { margin-top: 22px; }
  .sheet-cover .aes-ledger li { padding: 11px 0; }
  .sheet-cover .aes-wordmark { width: 160px; }

  /* Two-pager detail: one sheet. NOTE: no break-before (cover's break-after
     already starts page 2; a second break would insert a blank page). */
  /* Page-2 print rhythm (Phase 66.11c). Cutting the "Under the hood" explainer
     and the "Where it's going." heading + lead freed ~93px on a 1056px sheet.
     That headroom is deliberately SPENT on rhythm rather than banked: page 2 was
     technically 2 pages but read as a cramped wall. Every value below is measured;
     re-measure before changing any of them (see docs/ONE_PAGER_HANDOFF.md). */
  .sheet-detail { width: 8.5in; padding: 0.52in 0.7in; border-top: 0; }
  /* ONE line system. Page 2 had three competing ones: index dividers between the
     six rows, a rounded box for under-the-hood, AND a hairline before every
     <section>. The section rules orphaned lines above and below the box and above
     the closing block: line soup. Kill the section rules. The only rules that
     survive are the six-row index dividers and a single masthead rule under the
     thesis, both intentional. */
  .sheet-detail section { padding: 13px 0 !important; border-top: 0 !important; }
  /* THE ISOLATION EFFECT (Phase 66.11e). The thesis is the one block that has to
     get read, and it was losing because it sat jammed against a six-row list, so
     the eye filed it as a caption and skipped to the list. Space is what marks
     something as important; a border would just make it look like a callout, and
     callouts are what people skip. Generous air above and below, and the section
     hairline below it does the separating. */
  /* The single masthead rule: separates the thesis (the statement) from the list
     (the body), the way a rule sits under a masthead. The only horizontal line on
     the page that isn't a six-row index divider. */
  .sheet-detail .p2-big { padding: 8px 0 32px !important; border-bottom: 1px solid var(--hairline); margin-bottom: 10px; }
  .sheet-detail .p2-big .p2-thesis { font-size: 16px; line-height: 1.66; max-width: 58ch; }
  .sheet-detail .p2-big .p2-eyebrow { margin: 0 0 12px; }
  .sheet-detail .p2-scenarios li { padding: 6px 0 !important; }
  /* (single source of truth for the ask block padding is below) */
  .sheet-detail h2 { font-size: 16px !important; margin-bottom: 9px; }
  .sheet-detail .p2-eyebrow { margin: 0 0 5px; }
  .sheet-detail .p2-thesis { font-size: 13px; line-height: 1.55; }
  .sheet-detail .pillars li { padding: 17px 0; }
  /* FIXED label column. The base .pillar-name is min-width:110px but GROWS with
     the label, so "The state of it" (148px) pushed its answer 38px right of the
     others: three different left edges down one list, which is what read as
     "not organized". A fixed width lands every answer on one edge. Labels were
     shortened (the h2 already says "In brief.", so "The" was only adding ragged
     width) so the column can be narrow AND fixed, which also widens the answers
     and costs a wrapped line rather than adding one. */
  .sheet-detail .pillars .pillar-name { width: 104px; min-width: 104px; }
  .sheet-detail .pillars-closing { margin-top: 8px; font-size: 11px; }
  /* Force the arc into a single 3-column row in print (screen query doesn't match) */
  .sheet-detail .next-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 18px; }
  .sheet-detail .next-col ul { font-size: 11px; }
  .sheet-detail .next-col li { padding: 3px 0; }
  .sheet-detail .p2-scenarios li { padding: 7px 0; }
  /* The founder line is the emotional centre of page 2, so it must not read as
     fine print under the ask. At 11.5px it did. The Phase 66.11c cuts bought the
     3rd line it needs at 12.5px, which the earlier 2-page-limit note said we
     couldn't afford. We can now. */
  .sheet-detail .p2-founder { font-size: 14px; line-height: 1.6; margin-bottom: 14px; }
  .sheet-detail .ov-ask-line { font-size: 13px; margin-bottom: 7px; }
  .sheet-detail .ov-ask { padding-top: 34px !important; }
  .sheet-detail .footer-meta { margin-top: 10px; }
  .sheet-detail .p2-lead { margin-bottom: 15px; }
  /* Under-the-hood as an annotation, separated from the list by SPACE, not a line.
     No box (killed above). A hair more air above so it reads as its own beat. */
  .sheet-detail .p2-hood { padding-top: 22px !important; }
  .sheet-detail .p2-tech { padding: 0; font-size: 12.5px; }
  .sheet-detail .p2-tech .p2-tech-k { color: var(--dim); margin-right: 12px; }
  .sheet-detail .p2-sign { margin-top: 6px; }
  .sheet-detail .page-mark, .sheet-cover .page-mark { margin-top: 5px; }
}