/* Home page: identity panel, stat tiles and section furniture.
   Plain CSS on purpose. The Tailwind build in this repository cannot be
   regenerated (see docs/superpowers/specs/2026-09-20-project-pages-design.md),
   so anything not already in output.css has to be written here.

   Every colour is derived from the theme variables in styles.css, so the four
   themes (light, dark, green, purple) all work without a second palette. */

:root {
    --ok: #1a7f37;
    --warn: #9a6700;
    --down: #c4282f;
    --ink-soft: color-mix(in srgb, var(--base-content) 84%, transparent);
    --ink-faint: color-mix(in srgb, var(--base-content) 78%, transparent);
    --rule: color-mix(in srgb, var(--base-content) 14%, transparent);
    --panel-bg: color-mix(in srgb, var(--base-200) 92%, var(--base-content) 3%);
}

[data-theme="dark"] {
    --ok: #3fb950;
    --warn: #d29922;
    --down: #f85149;
}

/* ---------------------------------------------------------------- lede ---- */

.lede {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 5vw, 4rem);
    border-bottom: 1px solid var(--rule);
}

/* Monitoring-grid field: a rack of thin rules fading out, with one accent
   bloom behind the name. It reads as instrumentation rather than decoration. */
.lede::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, var(--rule) 1px, transparent 1px),
        linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 30% 0%, #000 0%, transparent 70%);
            mask-image: radial-gradient(ellipse 80% 60% at 30% 0%, #000 0%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}

.lede::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -10%;
    width: 60%;
    height: 90%;
    background: radial-gradient(circle, color-mix(in srgb, var(--primary) 22%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.lede-inner {
    position: relative;
    z-index: 1;
    max-width: 72rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.lede-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3.5rem);
    align-items: center;
}

@media (min-width: 1024px) {
    .lede-grid { grid-template-columns: 1.1fr 0.9fr; }
}

.eyebrow {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 1.25rem;
}

.eyebrow img {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid var(--rule);
}

.lede-name {
    font-family: 'Russo One', 'Poppins', sans-serif;
    font-size: clamp(2.5rem, 7vw, 4.75rem);
    line-height: 0.98;
    letter-spacing: -0.015em;
    margin: 0 0 0.75rem;
}

.lede-role {
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
    font-weight: 600;
    color: color-mix(in srgb, var(--primary) 62%, var(--base-content));
    margin: 0 0 1.25rem;
}

.lede-summary {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--ink-soft);
    max-width: 54ch;
    margin: 0 0 1.75rem;
}

.lede-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.lede-links {
    display: flex;
    gap: 1.25rem;
    margin-top: 1.25rem;
    font-size: 0.9rem;
}

.lede-links a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink-soft);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.lede-links a:hover { color: var(--base-content); border-bottom-color: var(--primary); }
.lede-links svg { width: 1.05rem; height: 1.05rem; }

/* --------------------------------------------------------------- panel ---- */

.panel {
    background: var(--panel-bg);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    padding: 1.25rem;
    box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.7);
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--rule);
}

.panel-title {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Status pill. The label carries the meaning; the colour only reinforces it. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 40%, transparent);
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
}

.pill .dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 999px;
    background: var(--ok);
}

.panel-rows { list-style: none; margin: 0; padding: 0; }

.panel-rows li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--rule);
}

.panel-rows li:last-child { border-bottom: 0; padding-bottom: 0; }

.row-label { font-size: 0.92rem; color: var(--ink-soft); }

.row-value {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.92rem;
    text-align: right;
    color: var(--base-content);
}

/* ----------------------------------------------------------------- wins --- */

/* Before and after, because the change is the achievement. The arrow encodes
   direction of travel; it is the one glyph here doing structural work. */
.wins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    overflow: hidden;
    margin-top: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 900px) {
    .wins { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.win {
    background: var(--base-100);
    padding: 1.15rem 1.25rem 1.25rem;
}

.win-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 0.4rem;
    font-family: 'Roboto Mono', ui-monospace, monospace;
}

.win-from {
    font-size: 0.95rem;
    font-weight: 400;
    color: var(--ink-faint);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.win-arrow {
    font-size: 0.9rem;
    color: var(--ink-faint);
}

.win-to {
    flex: 0 0 100%;
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--base-content);
    line-height: 1.05;
}

.win-label {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.82rem;
    color: var(--ink-faint);
    line-height: 1.4;
}

/* -------------------------------------------------------------- topology -- */

/* The signature. This is the network at the office, drawn as it is built:
   two upstreams into one firewall, segmented downstream. It fails over on a
   loop because that is the thing it was built to do. */
.topo {
    border: 1px solid var(--rule);
    border-radius: 0.9rem;
    background: var(--panel-bg);
    padding: 1.1rem 1.15rem 1.25rem;
}

.topo-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-bottom: 0.85rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--rule);
}

.topo-title {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

/* Two readouts stacked in one slot, cross-faded on the same clock as the
   diagram, so the words and the picture can never disagree. */
.topo-status {
    position: relative;
    min-width: 12.5rem;
    height: 1.2rem;
    flex: none;
}

.status-line {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--base-content);
    white-space: nowrap;
}

.status-line b { font-weight: 500; }
.status-line .sdot { width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: none; }
.status-ok   .sdot { background: var(--ok); }
.status-fail .sdot { background: var(--down); }
.status-fail { opacity: 0; }

@media (max-width: 560px) {
    .topo-head { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
    .topo-status { min-width: 0; width: 100%; height: 1rem; }
    .status-line { justify-content: flex-start; font-size: 0.6rem; }
}

.topo svg { display: block; width: 100%; height: auto; }

.n-box {
    fill: var(--base-100);
    stroke: var(--rule);
    stroke-width: 1;
}

.n-label {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.06em;
    fill: var(--base-content);
    text-anchor: middle;
}

.n-sub {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 8.5px;
    letter-spacing: 0.12em;
    fill: var(--ink-faint);
    text-anchor: middle;
}

.lnk {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 6 8;
}

/* Static, correct resting state. Motion is added only where it is allowed. */
.lnk-a, .lnk-core { stroke: var(--ok); opacity: 1; }
.lnk-b { stroke: var(--ink-faint); opacity: 0.45; }

.n-dot { r: 3.2; }
.d-a { fill: var(--ok); }
.d-b { fill: var(--ink-faint); }

@media (prefers-reduced-motion: no-preference) {
    .lnk-a    { animation: linkA 14s linear infinite; }
    .lnk-b    { animation: linkB 14s linear infinite; }
    .lnk-core { animation: flowCore 5.6s linear infinite; }
    .d-a      { animation: dotA 14s linear infinite; }
    .d-b      { animation: dotB 14s linear infinite; }
    .status-ok   { animation: statusA 14s linear infinite; }
    .status-fail { animation: statusB 14s linear infinite; }
}

@keyframes linkA {
    0%        { stroke: var(--ok);   opacity: 1;   stroke-dashoffset: 0; }
    38%       { stroke: var(--ok);   opacity: 1;   stroke-dashoffset: -266px; }
    44%, 88%  { stroke: var(--down); opacity: 0.4; stroke-dashoffset: -266px; }
    94%, 100% { stroke: var(--ok);   opacity: 1;   stroke-dashoffset: -294px; }
}

@keyframes linkB {
    0%, 38%   { stroke: var(--ink-faint); opacity: 0.45; stroke-dashoffset: 0; }
    44%       { stroke: var(--ok);        opacity: 1;    stroke-dashoffset: -14px; }
    88%       { stroke: var(--ok);        opacity: 1;    stroke-dashoffset: -322px; }
    94%, 100% { stroke: var(--ink-faint); opacity: 0.45; stroke-dashoffset: -322px; }
}

@keyframes flowCore { to { stroke-dashoffset: -280px; } }

@keyframes dotA {
    0%, 38%   { fill: var(--ok); }
    44%, 88%  { fill: var(--down); }
    94%, 100% { fill: var(--ok); }
}

@keyframes dotB {
    0%, 38%   { fill: var(--ink-faint); }
    44%, 88%  { fill: var(--ok); }
    94%, 100% { fill: var(--ink-faint); }
}

@keyframes statusA { 0%, 38% { opacity: 1; } 44%, 88% { opacity: 0; } 94%, 100% { opacity: 1; } }
@keyframes statusB { 0%, 38% { opacity: 0; } 44%, 88% { opacity: 1; } 94%, 100% { opacity: 0; } }

/* ---------------------------------------------------------------- board --- */

/* A rack inventory, not a badge cloud. Grouped by the job the tool does. */
.board {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background: var(--rule);
    border: 1px solid var(--rule);
    border-radius: 0.75rem;
    overflow: hidden;
}

@media (min-width: 330px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .board { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.board-cell {
    background: var(--base-100);
    padding: 1.05rem 1.15rem 1.2rem;
}

.board-eyebrow {
    display: block;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.64rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-bottom: 0.6rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid var(--rule);
}

.board-items {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.79rem;
    line-height: 1.75;
    color: var(--ink-soft);
}

.board-items li { line-height: 1.6; padding: 0.1rem 0 0.1rem 0.8rem; text-indent: -0.8rem; }
.board-items b { font-weight: 500; color: var(--base-content); }

/* Phone: the hero ran 2,028px before the numbers appeared, which is two and a
   half screens of scrolling to reach the point of the page. Everything below
   trades padding and type size for getting the wins and the board above the
   second screen. Nothing is hidden; the content is identical. */
@media (max-width: 560px) {
    .lede { padding: 2rem 0 1.75rem; }
    .lede-grid { gap: 1.5rem; }
    .eyebrow { margin-bottom: 0.85rem; }
    .lede-name { font-size: 2.2rem; }
    .lede-role { font-size: 1rem; margin-bottom: 0.8rem; }
    .lede-summary { font-size: 0.95rem; line-height: 1.55; margin-bottom: 1.2rem; }
    .lede-actions { gap: 0.6rem; }

    .topo { padding: 0.9rem 0.95rem 1rem; }

    .wins { margin-top: 1.75rem; }
    .win { padding: 0.85rem 0.9rem 0.95rem; }
    .win-to { font-size: 1.3rem; }
    .win-from, .win-arrow { font-size: 0.8rem; }
    .win-label { font-size: 0.74rem; margin-top: 0.3rem; line-height: 1.35; }

    .board { margin-top: 1.5rem; }
    .board-cell { padding: 0.8rem 0.85rem 0.9rem; }
    .board-eyebrow { font-size: 0.6rem; padding-bottom: 0.45rem; margin-bottom: 0.5rem; }
    .board-items { font-size: 0.71rem; line-height: 1.5; }
    .board-items li { padding: 0.05rem 0 0.05rem 0.7rem; text-indent: -0.7rem; }
}

/* --------------------------------------------------------------- motion --- */

@media (prefers-reduced-motion: no-preference) {
    .lede-name, .lede-role, .lede-summary, .lede-actions, .lede-links, .topo, .win {
        animation: rise 620ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .lede-role     { animation-delay: 60ms; }
    .lede-summary  { animation-delay: 110ms; }
    .lede-actions  { animation-delay: 160ms; }
    .lede-links    { animation-delay: 200ms; }
    .topo          { animation-delay: 140ms; }
    .win:nth-child(1) { animation-delay: 240ms; }
    .win:nth-child(2) { animation-delay: 290ms; }
    .win:nth-child(3) { animation-delay: 340ms; }
    .win:nth-child(4) { animation-delay: 390ms; }
}

@keyframes rise {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------- sections -- */

.band {
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(3rem, 7vw, 5rem) 1.5rem;
}

.band-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--rule);
}

.band-title {
    font-family: 'Russo One', 'Poppins', sans-serif;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    margin: 0;
}

.band-note {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.prose-col { max-width: 62ch; font-size: 1.02rem; line-height: 1.7; color: var(--ink-soft); }
.prose-col p { margin: 0 0 1.1rem; }
.prose-col strong { color: var(--base-content); font-weight: 600; }

/* Capability groups: what he works with, grouped by what it is for. */
.caps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem 2.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 640px) { .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .caps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cap h3 {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.cap ul { list-style: none; margin: 0; padding: 0; }

.cap li {
    font-size: 0.94rem;
    padding: 0.28rem 0;
    color: var(--ink-soft);
}

.cap li strong { color: var(--base-content); font-weight: 600; }

/* ------------------------------------------------------------- navbar ---- */

/* Logo2.png is a pure white glyph on transparency. Three of the four themes
   have a light navbar (relative luminance: light 0.95, green 0.81, purple
   0.77), so the logo is invisible on all three and has been since the themes
   were added. Inverting it is the only fix that does not need a second asset
   and does not touch the unbuildable Tailwind stylesheet. */
[data-theme="light"] .navbar img[alt="Logo"],
[data-theme="green"] .navbar img[alt="Logo"],
[data-theme="purple"] .navbar img[alt="Logo"] {
    filter: invert(1);
}