/* Portfolio for alexzaxa.com root. Deliberately separate from assets/styles.css,
   which is the AlexZaxa Solutions PDA product's own warm/orange kitchen brand (now
   living under /pda/) - this is a different thing wearing the same domain, so it
   gets its own voice rather than reskinning the product's palette. */
:root {
    --ink: #11141a;
    --panel: #181c24;
    --hairline: rgba(226, 230, 238, 0.14);
    --hairline-soft: rgba(226, 230, 238, 0.08);
    --paper: #e9e4d8;
    --text: #eceef2;
    --text-dim: #8b92a1;
    --text-faint: #8890a0;
    --live: #4fc29b;
    --built: #d4ab4a;
    --planned: #8891a3;
    --active: #9a93e8;
    --ease: 220ms cubic-bezier(0.4, 0, 0.2, 1);
    --font-serif: "Newsreader", Georgia, "Iowan Old Style", serif;
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: dark;
}

@font-face {
    font-family: "Newsreader";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("portfolio-fonts/newsreader-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Newsreader";
    font-style: italic;
    font-weight: 400 500;
    font-display: swap;
    src: url("portfolio-fonts/newsreader-italic.woff2") format("woff2");
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background:
        radial-gradient(640px 420px at 88% -6%, rgba(79, 194, 155, 0.16), transparent 60%),
        radial-gradient(520px 380px at 6% 18%, rgba(154, 147, 232, 0.10), transparent 65%),
        var(--ink);
    background-attachment: fixed;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--text); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid var(--live);
    outline-offset: 2px;
    border-radius: 3px;
}

.wrap {
    max-width: 700px;
    margin: 0 auto;
    padding: 0 28px;
}

.wrap-wide {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 28px;
}

/* ---------- header ---------- */

#work, #how-i-work, #about, #contact, [id^="proj-"] {
    scroll-margin-top: 76px;
}

.site-header {
    padding: 16px 0;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(17, 20, 26, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--ease);
}

.site-header.is-scrolled {
    border-bottom-color: var(--hairline);
}

.site-header .wrap-wide {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mark {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    color: var(--text);
}

.mark .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--live);
    box-shadow: 0 0 10px 1px rgba(79, 194, 155, 0.55);
    flex: none;
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: no-preference) {
    .mark .dot { animation: breathe 3.2s ease-in-out infinite; }
}

@keyframes breathe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.site-nav {
    display: flex;
    gap: 20px;
    font-size: 0.92rem;
    color: var(--text-dim);
}

.site-nav a { color: var(--text-dim); white-space: nowrap; }
.site-nav a:hover { color: var(--text); }

@media (max-width: 760px) {
    .site-nav { gap: 14px; }
}

.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 34px;
    height: 34px;
    background: none;
    border: 1px solid var(--hairline);
    border-radius: 6px;
    cursor: pointer;
    flex: none;
}

.nav-toggle-bar {
    width: 16px;
    height: 1.5px;
    background: var(--text);
    transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Below 600px: one-row header - logo, lang toggle, hamburger. The nav itself becomes
   a dropdown sheet anchored to the sticky header, hidden until .is-open. */
@media (max-width: 600px) {
    .site-header .wrap-wide { flex-wrap: nowrap; align-items: center; }
    .header-right { gap: 10px; }
    .nav-toggle { display: inline-flex; }
    .site-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        background: var(--panel);
        border-bottom: 1px solid var(--hairline);
        padding: 10px 20px 16px;
    }
    .site-nav.is-open { display: flex; }
    .site-nav a { padding: 10px 0; border-bottom: 1px solid var(--hairline-soft); }
    .site-nav a:last-child { border-bottom: none; }
    .site-nav a.nav-cta { margin-top: 8px; text-align: center; }
}

.site-nav a.nav-cta {
    color: var(--ink);
    background: var(--live);
    padding: 7px 15px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
}

.site-nav a.nav-cta:hover { background: #5fd2ac; color: var(--ink); }

.lang-switch {
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 6px 11px;
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease);
}

.lang-switch:hover { color: var(--text); border-color: var(--hairline-soft); }

/* ---------- hero ---------- */

.hero {
    padding: 64px 0 56px;
}

.hero p {
    font-family: var(--font-serif);
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    max-width: 22ch;
}

.hero .sub {
    font-family: var(--font-sans);
    font-size: 1.02rem;
    color: var(--text-dim);
    margin: 22px 0 0;
    max-width: 52ch;
    line-height: 1.6;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 22px 0 0;
}

.btn-primary,
.btn-ghost {
    display: inline-flex;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 7px;
    text-decoration: none;
}

.btn-primary {
    color: var(--ink);
    background: var(--live);
}

.btn-primary:hover { background: #5fd2ac; }

.btn-ghost {
    color: var(--text);
    background: transparent;
    border: 1px solid var(--hairline);
}

.btn-ghost:hover { border-color: var(--text); }

.hero-hiring {
    margin: 18px 0 0;
}

.hero-hiring a {
    font-size: 0.86rem;
    color: var(--text-faint);
}

.hero-hiring a:hover { color: var(--text-dim); }

/* ---------- Greek-visitor banner ---------- */

.lang-banner {
    background: var(--panel);
    border-bottom: 1px solid var(--hairline);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 20px;
    font-size: 0.86rem;
}

.lang-banner[hidden] { display: none; }

.lang-banner p { margin: 0; }
.lang-banner a { color: var(--live); font-weight: 600; }

.lang-banner button {
    background: none;
    border: none;
    color: var(--text-faint);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}

.lang-banner button:hover { color: var(--text); }

/* ---------- how to get started ---------- */

.get-started {
    padding: 48px 0 8px;
}

.steps {
    list-style: none;
    margin: 0 0 32px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 680px) {
    .steps { grid-template-columns: repeat(3, 1fr); }
}

.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--live) 16%, var(--panel));
    border: 1.5px solid var(--live);
    color: var(--live);
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 0.92rem;
    margin-bottom: 10px;
}

.steps h3 {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 500;
    margin: 0 0 6px;
}

.steps p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.92rem;
}

.get-started-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.getstarted-pricing-line {
    margin: 14px 0 0;
    font-size: 0.92rem;
}

.getstarted-pricing-line a {
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
}

.getstarted-pricing-line a:hover {
    color: var(--text);
    border-color: var(--hairline-soft);
}

.quick-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin-top: 16px;
}

.quick-contact-link {
    font-size: 0.9rem;
    color: var(--text-dim);
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
    transition: color var(--ease), border-color var(--ease);
}

.quick-contact-link:hover {
    color: var(--text);
    border-color: var(--hairline-soft);
}

/* ---------- FAQ teaser (home page) ---------- */

.faq-teaser {
    padding: 8px 0 48px;
}

.faq-teaser-list {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-teaser-list li a {
    display: block;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 16px 20px;
    color: var(--text-dim);
    font-size: 0.95rem;
    text-decoration: none;
    transition: transform var(--ease), border-color var(--ease), color var(--ease);
}

.faq-teaser-list li a:hover {
    color: var(--text);
    border-color: var(--hairline-soft);
    transform: translateY(-2px);
}

/* ---------- lab teaser (home page) ---------- */

.lab-teaser {
    padding: 8px 0 48px;
}

.lab-teaser-card {
    display: block;
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 20px 24px;
    color: var(--text-dim);
    font-size: 0.98rem;
    text-decoration: none;
    transition: transform var(--ease), border-color var(--ease), color var(--ease);
}

.lab-teaser-card:hover {
    color: var(--text);
    border-color: var(--hairline-soft);
    transform: translateY(-2px);
}

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

.board {
    padding: 22px 0 8px;
    border-top: 1px solid var(--hairline);
}

.board-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

@media (min-width: 860px) {
    .board-grid { grid-template-columns: repeat(4, 1fr); }
}

.board-tile {
    background: linear-gradient(165deg, color-mix(in srgb, var(--tile-color, var(--text-faint)) 12%, var(--panel)), var(--panel) 65%);
    border-top: 3px solid var(--tile-color, var(--text-faint));
    border-radius: 0 0 8px 8px;
    padding: 14px 14px 16px;
    transition: transform var(--ease), box-shadow var(--ease);
}

.board-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px -16px color-mix(in srgb, var(--tile-color, var(--text-faint)) 55%, transparent);
}

.board-tile .name {
    font-size: 0.78rem;
    color: var(--text-dim);
    margin: 0 0 10px;
}

.board-tile .stat {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: var(--text);
    line-height: 1.2;
    margin: 0 0 4px;
}

.board-tile .caption {
    font-size: 0.76rem;
    color: var(--text-faint);
    line-height: 1.4;
    margin: 0;
}

/* ---------- gloss (Greek project names) ---------- */

.gloss {
    font-size: 0.82rem;
    font-style: italic;
    color: var(--text-faint);
    margin: -10px 0 14px;
}

/* ---------- work controls: legend + filter chips ---------- */

.work-controls {
    padding: 22px 0 18px;
    border-top: 1px solid var(--hairline);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 0.84rem;
    color: var(--text-dim);
}

.legend .item { display: flex; align-items: center; gap: 7px; }

.legend .swatch { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.legend .is-live { background: var(--live); }
.legend .is-built { background: var(--built); }
.legend .is-planned { background: var(--planned); }

.status-note {
    font-size: 0.8rem;
    font-style: italic;
    color: var(--text-faint);
    margin: 10px 0 0;
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chips button {
    font: inherit;
    font-size: 0.82rem;
    color: var(--text-dim);
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 6px 13px;
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.filter-chips button:hover { color: var(--text); border-color: var(--hairline-soft); }

.filter-chips button[aria-pressed="true"] {
    color: var(--ink);
    background: var(--text);
    border-color: var(--text);
    font-weight: 600;
}

/* ---------- featured case study ---------- */

.featured {
    padding: 8px 0 0;
}

.featured-card {
    background: linear-gradient(140deg, color-mix(in srgb, var(--live) 9%, var(--panel)), var(--panel) 60%);
    border: 1px solid var(--hairline);
    border-top: 3px solid var(--live);
    border-radius: 0 0 14px 14px;
    padding: 36px 36px 40px;
}

.featured-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84rem;
    color: var(--text-dim);
    margin-bottom: 16px;
}

.featured-card h2 {
    font-family: var(--font-serif);
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    font-weight: 500;
    margin: 0 0 6px;
    color: color-mix(in srgb, var(--live) 32%, var(--text));
}

.featured-card .lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.18rem;
    line-height: 1.55;
    margin: 0 0 20px;
    max-width: 62ch;
}

.featured-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 24px;
}

@media (min-width: 760px) {
    .featured-grid { grid-template-columns: 1fr 1fr; }
}

.featured-block h3 {
    font-size: 0.82rem;
    color: var(--text-dim);
    margin: 0 0 10px;
    font-weight: 600;
}

.featured-block p {
    margin: 0;
    color: var(--text-dim);
    max-width: 52ch;
}

.featured-shots {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 28px;
}

.featured-shots figure {
    margin: 0;
}

.featured-shots img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    display: block;
}

.featured-shots figcaption {
    font-size: 0.82rem;
    color: var(--text-faint);
    margin-top: 8px;
}

.owner-quote {
    margin: 24px 0 0;
    padding: 14px 0 14px 18px;
    border-left: 2px solid var(--live);
}

.owner-quote p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.1rem;
    margin: 0 0 6px;
    color: var(--text);
}

.owner-quote cite {
    font-style: normal;
    font-size: 0.82rem;
    color: var(--text-faint);
}

.featured .facts {
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 0.92rem;
    color: var(--text-faint);
}

@media (min-width: 560px) {
    .featured .facts { grid-template-columns: 1fr 1fr; }
}

.featured .facts li { padding-left: 14px; position: relative; }
.featured .facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 5px;
    height: 1px;
    background: var(--text-faint);
}

.featured .go {
    display: inline-block;
    margin-top: 26px;
    font-size: 0.95rem;
    color: var(--text);
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
}

.featured .go:hover { border-color: var(--text); }

/* ---------- tier labels ---------- */

.tier-label {
    padding: 48px 0 18px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.tier-label h2 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 500;
    margin: 0;
    color: var(--text);
}

.tier-label .tier-note {
    font-size: 0.82rem;
    color: var(--text-faint);
}

/* ---------- system map ---------- */

.system-map {
    padding: 8px 0 0;
}

.map-card {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 14px;
    padding: 28px 20px;
}

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

.map-node circle { transition: opacity var(--ease), stroke-width var(--ease); cursor: pointer; }
.map-node text { transition: opacity var(--ease); pointer-events: none; }
.map-edge { transition: opacity var(--ease), stroke-width var(--ease); }

.map-node:focus-visible circle {
    stroke-width: 3;
    filter: drop-shadow(0 0 3px var(--live));
}

.map-svg[data-active] .map-node,
.map-svg[data-active] .map-edge { opacity: 0.22; }

.map-svg[data-active] .map-node.is-on,
.map-svg[data-active] .map-edge.is-on { opacity: 1; }

.map-svg .map-edge.is-on { stroke-width: 2.2; }

.map-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 14px 0 0;
}

/* ---------- built tier: card grid ---------- */

.card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
}

@media (min-width: 680px) {
    .card-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.card {
    background: linear-gradient(135deg, color-mix(in srgb, var(--entry-color, var(--text-faint)) 7%, var(--panel)), var(--panel) 55%);
    border-left: 3px solid var(--entry-color, var(--text-faint));
    border-radius: 0 10px 10px 0;
    padding: 20px 22px 22px;
    transition: transform var(--ease), box-shadow var(--ease);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 36px -24px color-mix(in srgb, var(--entry-color, var(--text-faint)) 55%, transparent);
}

.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 2px;
}

.card-head h3 {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    font-weight: 500;
    margin: 0;
    color: color-mix(in srgb, var(--entry-color, var(--text)) 32%, var(--text));
}

.card .gloss { margin: 0 0 10px; font-size: 0.78rem; }

.card .plain-tag {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 10px;
}

.card .lede {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.98rem;
    line-height: 1.5;
    margin: 0 0 10px;
}

.card p.body { margin: 0 0 12px; color: var(--text-dim); font-size: 0.93rem; }

.card .facts {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.85rem;
    color: var(--text-faint);
}

.card .facts li { padding-left: 13px; position: relative; }
.card .facts li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 5px;
    height: 1px;
    background: var(--text-faint);
}

.card-visual { margin-top: 12px; }
.card-visual .diagram { width: 100%; height: auto; }

/* ---------- terminal / UI-mockup work samples ---------- */

.terminal {
    background: #0b0d11;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 12px 14px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 0.76rem;
    line-height: 1.6;
    overflow-x: auto;
}

.terminal .ln { white-space: pre; }
.terminal .prompt { color: var(--text-faint); }
.terminal .ok { color: var(--live); }
.terminal .warn { color: var(--built); }
.terminal .drop { color: var(--planned); }

.ui-mock {
    background: #14171d;
    border: 1px solid var(--hairline);
    border-radius: 8px;
    padding: 14px;
}

.ui-mock .bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-faint);
    margin-bottom: 12px;
}

.ui-mock .room {
    display: flex;
    gap: 10px;
}

.ui-mock .who {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
    color: var(--text-faint);
}

.ui-mock .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--built) 24%, var(--panel));
    border: 1.5px solid var(--built);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: var(--text);
}

.ui-mock .who.is-muted .avatar { border-color: var(--text-faint); border-style: dashed; opacity: 0.6; }

/* ---------- next up: compact planned list, no cards ---------- */

.next-up {
    padding: 8px 0 48px;
}

.next-up-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--hairline-soft);
}

.next-up-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--hairline-soft);
    color: var(--text-dim);
    font-size: 0.92rem;
    max-width: 68ch;
}

.next-up-list strong { color: var(--text); font-weight: 600; }

.next-up-list .gloss-inline {
    font-style: italic;
    color: var(--text-faint);
    font-size: 0.86rem;
}

/* ---------- log (legacy single-column wrapper, kept for spacing) ---------- */

.log { padding-top: 16px; }

.status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.82rem;
    color: var(--text-dim);
    white-space: nowrap;
    flex: none;
    padding-top: 4px;
}

.status .swatch {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex: none;
}

.status.is-live .swatch { background: var(--live); }
.status.is-built .swatch { background: var(--built); }
.status.is-planned .swatch { background: var(--planned); }

@media (prefers-reduced-motion: no-preference) {
    .status.is-live .swatch { animation: breathe 3.2s ease-in-out infinite; }
}

.entry--live { --entry-color: var(--live); }
.entry--built { --entry-color: var(--built); }
.entry--planned { --entry-color: var(--planned); }

.tile--live { --tile-color: var(--live); }
.tile--built { --tile-color: var(--built); }
.tile--planned { --tile-color: var(--planned); }

/* ---------- principles ---------- */

.principles {
    padding: 48px 0 56px;
    border-bottom: 1px solid var(--hairline);
}

.principles h2 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 500;
    margin: 0 0 24px;
    position: relative;
    padding-bottom: 16px;
}

.principles h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--live), var(--built), var(--active));
}

.principles dl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.principles dt {
    font-size: 0.98rem;
    color: var(--text);
    font-weight: 600;
    margin-bottom: 4px;
}

.principles dd {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.95rem;
    max-width: 58ch;
}

/* ---------- about ---------- */

.about {
    padding: 48px 0 56px;
    border-top: 1px solid var(--hairline);
}

.about-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: flex-start;
}

.avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex: none;
    object-fit: cover;
    display: block;
}

.about h2 {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    font-weight: 500;
    margin: 4px 0 14px;
}

.about p {
    margin: 0 0 14px;
    color: var(--text-dim);
    max-width: 62ch;
}

.languages {
    font-size: 0.9rem;
    color: var(--text-dim);
    margin: 0 0 4px;
}

.languages strong { color: var(--text); }

.skill-list {
    margin: 18px 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

@media (min-width: 560px) {
    .skill-list { grid-template-columns: 1fr 1fr; }
}

.skill-list > div {
    padding-left: 14px;
    border-left: 2px solid var(--hairline);
}

.skill-list dt {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.skill-list dd {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--text-faint);
}

.go {
    display: inline-block;
    margin-top: 18px;
    font-size: 0.92rem;
    color: var(--text);
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
}

.go:hover { border-color: var(--text); }

.about-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    margin-top: 18px;
}

.about-links .go { margin-top: 0; }

@media (max-width: 520px) {
    .about-grid { grid-template-columns: 1fr; }
}

/* ---------- footer / contact ---------- */

.contact {
    padding: 56px 0 64px;
}

.contact p {
    font-family: var(--font-serif);
    font-size: 1.3rem;
    max-width: 24ch;
    margin: 0 0 20px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 36px;
}

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

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 420px;
}

.contact-form label {
    font-size: 0.82rem;
    color: var(--text-dim);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.contact-form input,
.contact-form textarea {
    font: inherit;
    font-size: 0.95rem;
    color: var(--text);
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 7px;
    padding: 10px 12px;
    resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: 2px solid var(--live);
    outline-offset: 1px;
    border-color: transparent;
}

.contact-form button {
    font: inherit;
    font-weight: 600;
    color: var(--ink);
    background: var(--live);
    border: none;
    border-radius: 7px;
    padding: 11px 18px;
    cursor: pointer;
    transition: background var(--ease);
    align-self: flex-start;
    margin-top: 4px;
}

.contact-form button:hover { background: #5fd2ac; }
.contact-form button:disabled { opacity: 0.6; cursor: default; }

.contact-form .form-msg {
    font-size: 0.85rem;
    min-height: 1.2em;
}

.contact-form .form-msg.ok { color: var(--live); }
.contact-form .form-msg.error { color: #e27a6c; }

.contact-form .form-alt {
    font-size: 0.85rem;
    color: var(--text-faint);
    margin: 0;
}

.contact-form .form-alt a { color: var(--text-dim); }
.contact-form .form-alt a:hover { color: var(--text); }

.contact-aside {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
    font-size: 0.95rem;
}

.contact-links a { color: var(--text-dim); }
.contact-links a:hover { color: var(--text); }

.contact-links .primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink);
    background: var(--live);
    padding: 11px 18px;
    border-radius: 7px;
    font-weight: 600;
    text-decoration: none;
}

.contact-links .primary:hover { background: #5fd2ac; }

.site-footer {
    padding: 22px 0 40px;
    font-size: 0.82rem;
    color: var(--text-faint);
}

/* ---------- scroll-reveal + motion ---------- */

.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}

.reveal.is-visible { opacity: 1; transform: translateY(0); }

.board-tile.reveal:nth-child(1) { transition-delay: 0ms; }
.board-tile.reveal:nth-child(2) { transition-delay: 70ms; }
.board-tile.reveal:nth-child(3) { transition-delay: 140ms; }
.board-tile.reveal:nth-child(4) { transition-delay: 210ms; }

.card-grid .card.reveal:nth-child(1) { transition-delay: 0ms; }
.card-grid .card.reveal:nth-child(2) { transition-delay: 60ms; }
.card-grid .card.reveal:nth-child(3) { transition-delay: 120ms; }
.card-grid .card.reveal:nth-child(4) { transition-delay: 180ms; }
.card-grid .card.reveal:nth-child(5) { transition-delay: 240ms; }
.card-grid .card.reveal:nth-child(6) { transition-delay: 300ms; }

.principles dl > div.reveal:nth-child(1) { transition-delay: 0ms; }
.principles dl > div.reveal:nth-child(2) { transition-delay: 70ms; }
.principles dl > div.reveal:nth-child(3) { transition-delay: 140ms; }

/* Hero: a single one-time load-in, not scroll-triggered - it's already above the fold. */
@media (prefers-reduced-motion: no-preference) {
    .hero p { animation: rise-in 700ms var(--ease) both; }
    .hero .sub { animation: rise-in 700ms var(--ease) 120ms both; }
}

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

/* System map edges draw themselves in via JS-set stroke-dasharray/dashoffset. */
.map-edge { transition: stroke-dashoffset 900ms var(--ease); }

/* Terminal logs: lines stagger in once their card scrolls into view. */
.terminal .ln {
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 320ms var(--ease), transform 320ms var(--ease);
}

.term-reveal.is-visible .ln { opacity: 1; transform: translateY(0); }
.term-reveal.is-visible .ln:nth-child(1) { transition-delay: 60ms; }
.term-reveal.is-visible .ln:nth-child(2) { transition-delay: 220ms; }
.term-reveal.is-visible .ln:nth-child(3) { transition-delay: 380ms; }
.term-reveal.is-visible .ln:nth-child(4) { transition-delay: 540ms; }

/* Filter chips: fade + collapse instead of an abrupt display:none snap. */
[data-status] {
    transition: opacity 260ms var(--ease), transform 260ms var(--ease);
}

[data-status].is-filtering-out {
    opacity: 0;
    transform: scale(0.97);
    pointer-events: none;
}

[data-status].is-filtered-out { display: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; }
    .hero p, .hero .sub { animation: none; }
    .map-edge { transition: none; }
    .terminal .ln { opacity: 1; transform: none; transition: none; }
    [data-status] { transition: none; }
}

@media (max-width: 560px) {
    .wrap, .wrap-wide { padding: 0 20px; }
    .hero { padding: 48px 0 40px; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn-primary, .hero-actions .btn-ghost { justify-content: center; }
    .card-head { flex-direction: column; align-items: flex-start; gap: 8px; }
    .status { padding-top: 0; }
    .featured-card { padding: 26px 22px 28px; }
    .work-controls { flex-direction: column; align-items: flex-start; }
    .board-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .board-tile { padding: 12px 11px 13px; }
    .board-tile .stat { font-size: 1.05rem; }
    .board-tile .caption { font-size: 0.72rem; }
    .site-header .wrap-wide { flex-wrap: wrap; row-gap: 10px; }
    .site-nav { width: 100%; flex-wrap: wrap; gap: 14px; }
    /* System map: don't let labels shrink past legibility - scroll horizontally instead. */
    .map-card { overflow-x: auto; }
    .map-svg { min-width: 460px; }
}

/* ---------- PDA product page (/pda/, /el/pda/) ---------- */

a.mark { text-decoration: none; }

.one-person-line {
    font-family: var(--font-serif);
    font-size: 1rem;
    color: var(--text-dim);
    margin: 14px 0 0;
}

.hero-demo-link {
    margin: 18px 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 14px;
}

.hero-demo-link-secondary { margin-top: 6px; }

.link-inline {
    font: inherit;
    font-size: 0.9rem;
    color: var(--text-dim);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
}

.link-inline:hover { color: var(--text); border-color: var(--hairline-soft); }

.demo-wake-note {
    font-size: 0.82rem;
    color: var(--text-faint);
}

.hero-shot {
    margin: 32px 0 0;
}

.hero-shot img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1px solid var(--hairline);
    display: block;
}

.feature-row { padding: 48px 0; }
.feature-row:nth-of-type(even) { background: var(--panel); }

.feature-row-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: center;
}

@media (min-width: 860px) {
    .feature-row-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .feature-row.reverse .feature-row-grid { direction: rtl; }
    .feature-row.reverse .feature-row-grid > * { direction: ltr; }
}

.feature-copy h2 {
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 500;
    margin: 0 0 12px;
    color: var(--text);
}

.feature-copy p {
    color: var(--text-dim);
    margin: 0;
    max-width: 52ch;
}

.story-demo-link { margin: 14px 0 0; }
.story-demo-link a {
    font-size: 0.92rem;
    color: var(--text-dim);
    border-bottom: 1px solid var(--hairline);
    padding-bottom: 1px;
}
.story-demo-link a:hover { color: var(--text); border-color: var(--hairline-soft); }

.story-demo-note {
    font-size: 0.8rem;
    color: var(--text-faint);
    margin: 6px 0 0;
}

.feature-shot img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--hairline);
    display: block;
}

.trust { padding: 48px 0 8px; }

.trust-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 18px;
}

@media (min-width: 680px) {
    .trust-list { grid-template-columns: repeat(2, 1fr); }
}

.trust-item h3 {
    font-family: var(--font-serif);
    font-size: 1.02rem;
    font-weight: 500;
    margin: 0 0 6px;
    color: var(--text);
}

.trust-item p {
    margin: 0;
    color: var(--text-dim);
    font-size: 0.92rem;
}

.pricing-admin-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.badge {
    font-size: 0.78rem;
    color: var(--text-faint);
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 3px 10px;
}

.receipt-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 22px 0 0;
}

@media (min-width: 680px) {
    .receipt-row { grid-template-columns: repeat(2, 1fr); }
}

.receipt {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 22px 24px;
}

.receipt-kind {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-bottom: 6px;
}

.receipt h3 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    font-weight: 500;
    margin: 0 0 10px;
    color: var(--text);
}

.receipt-total {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    color: var(--text);
    margin: 0 0 14px;
}

.receipt-total span:last-child {
    font-size: 0.9rem;
    color: var(--text-dim);
}

.receipt-lines {
    border-top: 1px solid var(--hairline);
    padding-top: 12px;
    margin-bottom: 14px;
}

.receipt-lines p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 6px;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.receipt-note {
    font-size: 0.85rem;
    color: var(--text-faint);
    margin: 0;
}

.pricing-note { margin-top: 1.75rem; }

.pricing-edit-panel {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 24px;
    margin: 24px 0;
}

.pricing-edit-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    align-items: center;
    margin: 12px 0;
}

.pricing-visible-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    color: var(--text-dim);
}

.ticket-reply-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pda-how { padding: 48px 0 8px; }

.faq { padding: 48px 0; }

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.faq-item {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 4px 20px;
}

.faq-item summary {
    cursor: pointer;
    padding: 16px 0;
    font-size: 0.98rem;
    color: var(--text);
}

.faq-item p {
    color: var(--text-dim);
    font-size: 0.92rem;
    margin: 0 0 16px;
    max-width: 68ch;
}

.faq-placeholder {
    display: inline-block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #d8a23a;
    border: 1px solid rgba(216, 162, 58, 0.4);
    border-radius: 999px;
    padding: 1px 8px;
    margin-right: 6px;
}

.owners { padding: 8px 0 48px; }

.callout {
    background: var(--panel);
    border: 1px solid var(--hairline);
    border-radius: 10px;
    padding: 20px 24px;
    margin-top: 18px;
}

.callout p { margin: 0; }

.site-footer .footer-brand {
    color: var(--text);
    font-weight: 500;
    margin-bottom: 8px;
}

.site-footer .footer-contact {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--text-dim);
}

.msg {
    font-size: 0.85rem;
    min-height: 1.2em;
    color: var(--text-dim);
}

.msg.error { color: #e27a6c; }
.msg.success { color: var(--live); }