/* The AI Transformation Architecture (brochure p. 20), rebuilt in the
   drafting style: js/architecture.js. Real HTML nodes (links) with an SVG
   connector overlay measured from the layout. Drafting ink for the
   linework, chalk only for traced (hover, focus) and current pillars.
   The component sizes itself from its own width (container queries):
   the brochure layout when wide, a vertical stack in a narrow full
   diagram. Everything is prefixed arch-. Tokens only. */

.arch { container: arch / inline-size; position: relative; color: var(--text); }
.arch-stage { position: relative; padding-bottom: 44px;
    --arch-hub: 200px; --arch-gap: 56px; }
.arch-upper, .arch-top, .arch-mid, .arch-base { position: relative; z-index: 1; }

/* Connector overlay */
.arch-wires { position: absolute; top: 0; left: 0; z-index: 0; max-width: none; overflow: visible; pointer-events: none; }
.arch-link { transition: opacity 0.2s ease; }
.arch-wire { fill: none; stroke: var(--draft); stroke-opacity: 0.78; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: square;
    transition: stroke 0.2s ease, stroke-opacity 0.2s ease; }
.arch-head { fill: var(--draft); fill-opacity: 0.85; stroke: none; transition: fill 0.2s ease; }
.arch-link.is-current .arch-wire { stroke: var(--chalk); stroke-opacity: 1; }
.arch-link.is-current .arch-head { fill: var(--chalk); fill-opacity: 1; }
.arch-link.is-hot .arch-wire { stroke: var(--chalk); stroke-opacity: 1; stroke-width: 2.25; }
.arch-link.is-hot .arch-head { fill: var(--chalk); fill-opacity: 1; }
.arch.is-tracing .arch-link:not(.is-hot) { opacity: 0.28; }

/* Self-drawing: armed by JS only when motion is allowed and the observer
   exists; without it everything is simply drawn. */
.arch.is-armed .arch-wire { stroke-dasharray: var(--len, 800); stroke-dashoffset: var(--len, 800); }
.arch.is-armed .arch-head { opacity: 0; }
.arch.is-armed .arch-ring-outer { stroke-dashoffset: 100; }
.arch.is-armed .arch-ring-inner, .arch.is-armed .arch-ring-tick { opacity: 0; }
.arch.is-drawing .arch-wire { animation: archDraw 0.6s ease forwards; animation-delay: var(--d, 0s); }
.arch.is-drawing .arch-head { animation: archFade 0.3s ease forwards; animation-delay: calc(var(--d, 0s) + 0.5s); }
.arch.is-drawing .arch-ring-outer { animation: archDraw 0.9s ease forwards; }
.arch.is-drawing .arch-ring-inner, .arch.is-drawing .arch-ring-tick { animation: archFade 0.6s ease forwards 0.4s; }
@keyframes archDraw { to { stroke-dashoffset: 0; } }
@keyframes archFade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .arch.is-armed .arch-wire, .arch.is-armed .arch-ring-outer { stroke-dashoffset: 0; animation: none; }
    .arch.is-armed .arch-head, .arch.is-armed .arch-ring-inner, .arch.is-armed .arch-ring-tick { opacity: 1; animation: none; }
}

/* ----- Nodes (shared) ----- */
.arch-node { position: relative; color: var(--text); transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; }
.arch-node:hover { text-decoration: none; }
.arch-node:focus-visible { outline: 2px solid var(--glow); outline-offset: 4px; }
.arch-idx { font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-faint); transition: color 0.2s ease; }
.arch-name { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; color: var(--draft); transition: color 0.2s ease; }
.arch-sub { font-size: 0.8125rem; line-height: 1.3; color: var(--text-muted); }
.arch-fig { display: block; flex: none; }
.arch-node.is-hot .arch-idx, .arch-node.is-current .arch-idx { color: var(--chalk); }

/* Strategy: the large circle with a drafted double ring */
.arch-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: var(--arch-gap); align-items: center; }
.arch-hub { width: var(--arch-hub); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center;
    gap: 2px; text-align: center; background: radial-gradient(circle at 50% 42%, var(--field-card), var(--field-deep) 72%); }
.arch-hub > :not(.arch-ring) { position: relative; }
.arch-ring { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; transform: rotate(-90deg); }
.arch-ring-outer { fill: none; stroke: var(--draft); stroke-width: 1.2; stroke-dasharray: 100; transition: stroke 0.2s ease; }
.arch-ring-inner { fill: none; stroke: var(--draft-dim); stroke-width: 0.45; stroke-dasharray: 1 1.6; }
.arch-ring-tick { stroke: var(--draft-dim); stroke-width: 0.45; }
.arch-hub .arch-fig { width: 42px; height: 42px; margin-bottom: 4px; }
.arch-hub .arch-name { font-size: 1.75rem; }
.arch-hub .arch-sub { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.arch-hub:focus-visible { outline-offset: 6px; }
.arch-hub.is-hot .arch-ring-outer, .arch-hub.is-current .arch-ring-outer { stroke: var(--chalk); }
.arch-hub.is-current { background: radial-gradient(circle at 50% 42%, var(--chalk-tint), var(--field-deep) 74%); }

/* Security and Governance: the wings of the circle */
.arch-wing { display: grid; justify-items: center; gap: 6px; padding: 8px 12px; border: 1px solid transparent; border-radius: var(--r-card); }
.arch-wing-left { justify-self: end; }
.arch-wing-right { justify-self: start; }
.arch-wing .arch-fig { width: 46px; height: 46px; }
.arch-label { display: inline-flex; align-items: baseline; gap: 8px; }
.arch-wing .arch-name { font-size: 1.5rem; }
.arch-wing.is-hot { border-color: var(--chalk); }
.arch-wing.is-current { border-color: var(--chalk); background: var(--chalk-tint); }

/* People & Culture: the junction on the bus */
.arch-mid { display: flex; justify-content: center; margin-top: 26px; }
/* Equal side columns keep the junction circle exactly under the Strategy
   circle whatever the label widths ("04 People" is wider than "Culture");
   in a shrink-to-fit grid both 1fr tracks take the wider label's width. */
.arch-junction { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 14px; }
.arch-junction > .arch-word:first-child { justify-self: end; }
.arch-junction > .arch-word:last-child { justify-self: start; }
.arch-word { display: inline-flex; align-items: baseline; gap: 8px; margin-top: -6px; font-family: var(--font-display); font-weight: 800;
    font-size: 1.25rem; line-height: 1; letter-spacing: -0.01em; color: var(--draft); transition: color 0.2s ease; }
.arch-jbox { width: 58px; height: 58px; display: grid; place-items: center; border: 1.5px solid var(--draft); border-radius: 50%;
    background: var(--field-deep); transition: border-color 0.2s ease, background-color 0.2s ease; }
.arch-jbox .arch-fig { width: 40px; height: 40px; }
.arch-junction:focus-visible { outline-offset: 6px; }
.arch-junction.is-hot .arch-jbox, .arch-junction.is-current .arch-jbox { border-color: var(--chalk); background: var(--chalk-tint); }
.arch-junction.is-hot .arch-word, .arch-junction.is-current .arch-word { color: var(--chalk); }

/* The core (one dark container) and Products & Services (outlined) */
.arch-base { display: grid; grid-template-columns: minmax(0, 3.12fr) minmax(0, 1fr); gap: 28px; margin-top: 46px; align-items: stretch; }
.arch-core, .arch-out { display: grid; grid-template-rows: auto 1fr; gap: 12px; padding: 12px 16px 16px; border-radius: var(--r-card);
    transition: border-color 0.2s ease; }
.arch-core { border: 2px solid var(--draft);
    background: repeating-linear-gradient(135deg, var(--grid-line) 0 1px, transparent 1px 9px) var(--field-deep); }
.arch-out { border: 1.5px solid var(--draft); box-shadow: inset 0 0 0 4px var(--field), inset 0 0 0 5px var(--draft-faint); }
.arch-core.is-hot { border-color: var(--chalk); }
.arch-core-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.arch-dim { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--text-faint); line-height: 1.4; }
.arch-box { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; min-height: 86px; padding: 14px;
    border: 1px solid var(--draft-dim); border-radius: var(--r-card); background: var(--field-card); }
.arch-box .arch-fig { width: 40px; height: 40px; }
.arch-text { display: grid; gap: 1px; min-width: 0; }
.arch-box .arch-name { font-size: 1.1875rem; }
.arch-box.is-hot { border-color: var(--chalk); }
.arch-box.is-current { border-color: var(--chalk); background: linear-gradient(var(--chalk-tint), var(--chalk-tint)), var(--field-card);
    box-shadow: inset 0 -3px 0 var(--chalk); }

/* Leadership direction: the first of the three dimensions */
.arch-lead { display: grid; justify-items: center; gap: 2px; margin-bottom: 18px; text-align: center; }
.arch-lead-note { font-size: 0.8125rem; color: var(--text-faint); line-height: 1.35; }

/* Caption: the traced pillar's one-line summary */
.arch-caption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 3.5em; margin-top: var(--s4);
    padding-top: var(--s4); border-top: 1px dashed var(--draft-faint); font-size: 0.9375rem; line-height: 1.5; color: var(--text-muted); }
.arch-caption strong { color: var(--draft); }
.arch-caption-idx { font-size: 0.8125rem; color: var(--chalk); }
.arch-caption-hint { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em; color: var(--text-faint); }

/* Wide full diagram: leadership direction as a dimension bracket at the left */
@container arch (min-width: 1060px) {
    .arch-full .arch-lead { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; margin: 0; padding: 2px 0 0 16px;
        justify-items: start; align-content: start; text-align: left; border-left: 1px solid var(--draft-dim); }
    .arch-full .arch-lead::before, .arch-full .arch-lead::after { content: ""; position: absolute; left: -5px; width: 9px; height: 1px; background: var(--draft-dim); }
    .arch-full .arch-lead::before { top: 0; }
    .arch-full .arch-lead::after { bottom: 0; }
}

/* Medium full diagram: figures above the names so the words fit */
@container arch (max-width: 1059px) {
    .arch-full .arch-stage { --arch-hub: 176px; --arch-gap: 40px; }
    .arch-full .arch-box { grid-template-columns: 1fr; align-content: center; gap: 8px; padding: 12px; }
    .arch-full .arch-box .arch-fig { width: 34px; height: 34px; }
    .arch-full .arch-box .arch-name { font-size: 1.0625rem; }
    .arch-full .arch-wing .arch-name { font-size: 1.3125rem; }
    .arch-full .arch-hub .arch-name { font-size: 1.5rem; }
}

/* Narrow full diagram: the vertical stack. Strategy with its wings, then
   People, then the core, then Products; People runs down the left spine,
   the core feeds Products down the right. */
@container arch (max-width: 699px) {
    .arch-full .arch-stage { --arch-hub: 118px; --arch-gap: 10px; padding-bottom: 4px; }
    .arch-full .arch-lead { margin-bottom: 12px; }
    .arch-full .arch-lead-note { display: none; }
    .arch-full .arch-hub .arch-fig { display: none; }
    .arch-full .arch-hub .arch-name { font-size: 1.125rem; }
    .arch-full .arch-hub .arch-sub { font-size: 0.625rem; }
    .arch-full .arch-wing { padding: 6px 4px; gap: 4px; }
    .arch-full .arch-wing .arch-fig { width: 34px; height: 34px; }
    .arch-full .arch-wing .arch-name { font-size: 1rem; }
    .arch-full .arch-label { display: grid; justify-items: center; gap: 0; }
    .arch-full .arch-mid { margin-top: 22px; }
    .arch-full .arch-word { font-size: 1.0625rem; }
    .arch-full .arch-jbox { width: 50px; height: 50px; }
    .arch-full .arch-jbox .arch-fig { width: 34px; height: 34px; }
    .arch-full .arch-base { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 32px; padding: 0 26px; }
    .arch-full .arch-core, .arch-full .arch-out { padding: 10px 12px 12px; gap: 10px; }
    .arch-full .arch-core-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .arch-full .arch-box { grid-template-columns: auto minmax(0, 1fr); gap: 12px; min-height: 0; padding: 10px 12px; }
    .arch-full .arch-box .arch-fig { width: 32px; height: 32px; }
}

/* ----- Compact: the pillar page header ----- */
.arch-compact { max-width: 620px; }
.arch-compact .arch-stage { --arch-hub: 82px; --arch-gap: 26px; padding-bottom: 22px; }
.arch-compact .arch-idx { font-size: 0.625rem; }
.arch-compact .arch-name { font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem; letter-spacing: 0; }
.arch-compact .arch-hub { gap: 0; }
.arch-compact .arch-hub .arch-name { font-size: 0.875rem; }
.arch-compact .arch-hub .arch-sub { display: none; }
.arch-compact .arch-ring-outer { stroke-width: 2.2; }
.arch-compact .arch-ring-inner { stroke-width: 1; }
.arch-compact .arch-wing { padding: 3px 7px; }
.arch-compact .arch-wing .arch-name { font-size: 0.8125rem; }
.arch-compact .arch-label { gap: 5px; }
.arch-compact .arch-mid { margin-top: 14px; }
.arch-compact .arch-junction { column-gap: 8px; }
.arch-compact .arch-word { font-family: var(--font-body); font-weight: 700; font-size: 0.8125rem; gap: 5px; margin-top: -5px; letter-spacing: 0; }
.arch-compact .arch-jbox { width: 18px; height: 18px; border-width: 1.5px; }
.arch-compact .arch-jbox::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--draft); }
.arch-compact .arch-junction.is-hot .arch-jbox::after, .arch-compact .arch-junction.is-current .arch-jbox::after { background: var(--chalk); }
.arch-compact .arch-base { gap: 14px; margin-top: 26px; }
.arch-compact .arch-core, .arch-compact .arch-out { padding: 6px; gap: 0; grid-template-rows: 1fr; }
.arch-compact .arch-out { box-shadow: inset 0 0 0 3px var(--field), inset 0 0 0 4px var(--draft-faint); }
.arch-compact .arch-core-row { gap: 6px; }
.arch-compact .arch-box { grid-template-columns: 1fr; min-height: 0; padding: 7px 9px; }
.arch-compact .arch-text { display: flex; align-items: baseline; gap: 6px; }
@container arch (max-width: 460px) {
    .arch-compact .arch-stage { --arch-hub: 70px; --arch-gap: 16px; }
    .arch-compact .arch-name, .arch-compact .arch-word { font-size: 0.75rem; }
    .arch-compact .arch-hub .arch-name { font-size: 0.75rem; }
    .arch-compact .arch-base { gap: 10px; }
    .arch-compact .arch-core-row { gap: 4px; }
    .arch-compact .arch-core, .arch-compact .arch-out { padding: 4px; }
    .arch-compact .arch-box { padding: 6px 4px; text-align: center; }
    .arch-compact .arch-text { display: grid; justify-items: center; gap: 0; }
}

/* The pillar page header: label above the compact diagram */
.arch-host-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2) var(--s5);
    max-width: 620px; margin-bottom: var(--s4); }
.arch-host-head .mono { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.arch-host-head a { font-size: 0.875rem; font-weight: 600; color: var(--text-muted); }
.arch-host-head a:hover { color: var(--draft); }

/* ----- Blueprint page: the five core areas under the diagram ----- */
.arch-section .arch-host { margin-top: var(--s6); }
.arch-areas-title { margin-top: var(--s8); margin-bottom: var(--s5); }
.arch-areas { list-style: none; display: grid; gap: var(--s5); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* Each area is a framed card on a lighter surface with full-contrast text
   (owner feedback 27 Sep 2026: the unframed columns were hard to read). */
.arch-area { display: grid; align-content: start; gap: var(--s2); padding: var(--s4) var(--s3) var(--s5);
    background: var(--field-card); border: 1px solid var(--draft-dim); border-top: 3px solid var(--draft); border-radius: var(--r-card);
    transition: border-color 0.2s ease, background-color 0.2s ease; }
/* Kicker, heading, text and links line up across the row */
@supports (grid-template-rows: subgrid) {
    .arch-area { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--s2); }
}
.arch-area:hover, .arch-area:focus-within { border-top-color: var(--chalk); background: var(--field-raised); }
.arch-area-kicker { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted);
    padding-bottom: var(--s2); border-bottom: 1px dashed var(--draft-faint); }
.arch-area p { color: var(--text); font-size: 0.9375rem; line-height: 1.55; }
.arch-area-links { list-style: none; display: grid; gap: 2px; margin-top: var(--s1); }
.arch-area-links a { display: inline-flex; align-items: baseline; gap: var(--s2); font-size: 0.875rem; font-weight: 600; }
.arch-area-links .mono { font-size: 0.75rem; color: var(--text-muted); }
.arch-areas-sum { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px dashed var(--draft-faint); color: var(--text-muted); max-width: 820px; }