/*
 * dominicmayne.com — shared stylesheet
 *
 * Quiet greys, one "Thames" blue accent, and the platform's own typeface:
 * SF Pro on Apple devices, Inter everywhere else (the browser only downloads
 * Inter when the system font is missing). Light and dark themes follow the
 * visitor's system setting through the tokens below.
 */

:root {
    color-scheme: light dark;

    /* Surfaces. Old token names (paper / ink) are kept so page styles still work. */
    --paper: #fbfbfd;
    --paper-2: #f2f2f5;
    --paper-3: #e6e6eb;
    --surface: #ffffff;
    --glass: rgba(251, 251, 253, 0.72);

    --ink: #1d1d1f;
    --ink-2: #424245;
    --ink-3: #6e6e73;
    --rule: #d2d2d7;
    --rule-soft: #e8e8ed;
    --grid: rgba(29, 29, 31, 0.07);

    --accent: #2850d8;
    --accent-ink: #1c3fb8;
    --accent-wash: rgba(40, 80, 216, 0.08);
    --on-accent: #ffffff;

    --good: #23864f;
    --warn: #c27c0e;
    --bad: #d93d33;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 28px rgba(0, 0, 0, 0.06);

    --display: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
    --sans: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Inter', 'Segoe UI', system-ui, sans-serif;
    --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    /*
     * Critically damped spring (damping 1.0, response 0.35s) sampled into
     * linear(). CSS transitions are interruptible and always restart from the
     * current on-screen value, which is what a spring needs.
     */
    --spring: linear(0, 0.109, 0.309, 0.501, 0.656, 0.770, 0.849, 0.903, 0.938, 0.961, 0.976, 0.985, 0.991, 0.994, 0.997, 0.998, 1);
    --spring-t: 0.5s;

    --radius: 18px;
    --wrap: 1120px;
    --gutter: 40px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #000000;
        --paper-2: #101012;
        --paper-3: #1c1c1f;
        --surface: #161618;
        --glass: rgba(18, 18, 20, 0.7);

        --ink: #f5f5f7;
        --ink-2: #d1d1d6;
        --ink-3: #98989d;
        --rule: #3a3a3d;
        --rule-soft: #26262a;
        --grid: rgba(245, 245, 247, 0.08);

        --accent: #7c98ff;
        --accent-ink: #a3b6ff;
        --accent-wash: rgba(124, 152, 255, 0.12);
        --on-accent: #0b0b0c;

        --good: #3dbb73;
        --warn: #e6a23c;
        --bad: #ff6a5f;

        --shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
    }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    letter-spacing: -0.01em;
    background: var(--paper);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    min-height: 100vh;
    font-feature-settings: "kern", "ss01", "cv11";
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4 { font-weight: 600; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--on-accent); }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, [role="button"]:focus-visible {
    outline: 3px solid var(--accent-wash);
    box-shadow: 0 0 0 1.5px var(--accent);
    outline-offset: 2px;
    border-radius: 6px;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.num, .tnum, table { font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Type (letter-spacing tightens as size grows) ---------- */
.kicker {
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--accent);
}
.kicker .sep { color: var(--rule); margin: 0 0.45em; font-weight: 400; }
.kicker-accent { color: var(--accent); }

.display {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(48px, 7.6vw, 96px);
    line-height: 1.0;
    letter-spacing: -0.045em;
}
.display em, .h2 em, .h1 em { font-style: normal; color: var(--accent); }
.h1 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.h2 {
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(30px, 3.4vw, 44px);
    line-height: 1.08;
    letter-spacing: -0.03em;
}
.h3 {
    font-family: var(--display);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.lede {
    font-size: 21px;
    line-height: 1.45;
    letter-spacing: -0.015em;
    color: var(--ink-3);
    max-width: 34em;
}
.lede strong, .prose strong { color: var(--ink); font-weight: 600; }
.prose p { color: var(--ink-2); line-height: 1.6; margin-bottom: 1.1em; max-width: 38em; }
.prose p:last-child { margin-bottom: 0; }
.small { font-size: 13px; color: var(--ink-3); letter-spacing: 0; }
.muted { color: var(--ink-3); }

/* Section heading: eyebrow + title, separated by space not rules */
.sec-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 8px;
    margin-bottom: 44px;
    max-width: 44em;
}
.sec-head p { color: var(--ink-3); margin-top: 12px; max-width: 36em; font-size: 19px; line-height: 1.5; letter-spacing: -0.012em; }

/* ---------- Press feedback ----------
 * Elements react on pointer-down (:active applies instantly) and settle
 * back on the spring when released.
 */
.btn, .press, .proj, .tile {
    transition: transform var(--spring-t) var(--spring), background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.btn:active, .press:active { transform: scale(0.96); transition-duration: 0.08s, 0.2s, 0.2s, 0.2s, 0.2s; }
.proj:active, .tile:active { transform: scale(0.985); transition-duration: 0.08s, 0.2s, 0.2s, 0.2s, 0.2s; }
@media (prefers-reduced-motion: reduce) {
    .btn, .press, .proj, .tile { transition: none; }
    .btn:active, .press:active, .proj:active, .tile:active { transform: none; }
}

/* ---------- Links & buttons ---------- */
.link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.link:hover { text-decoration: underline; text-underline-offset: 3px; }
.link-quiet { color: var(--ink-2); }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    padding: 11px 22px;
    border: 1px solid var(--rule);
    border-radius: 980px;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.btn:hover { border-color: var(--ink-3); background: var(--paper-2); }
.btn-solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-solid:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-sm { font-size: 13px; padding: 6px 14px; }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; background: transparent; color: var(--ink); transform: none; }
.btn-solid:disabled { background: var(--accent); color: var(--on-accent); }
/* Inline arrows were dropped from buttons; the class stays for external-link glyphs. */
.arrow { display: inline-block; }

/* ---------- Masthead: translucent, floats over content ---------- */
.mast {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.mast-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 52px; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-width: 0; }
.mark img { width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; }
.mark-name { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; white-space: nowrap; }
.mark-sub { font-family: var(--sans); font-size: 14px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mark-sub::before { content: "/"; color: var(--rule); margin-right: 10px; }
.mast-nav { display: flex; align-items: center; gap: 26px; }
.mast-nav a { font-size: 13.5px; color: var(--ink-2); text-decoration: none; letter-spacing: -0.005em; }
.mast-nav a:hover { color: var(--ink); }
.mast-nav a.btn { color: var(--ink); }
.mast-nav a.btn-solid, .mast-nav a.btn-solid:hover { color: var(--on-accent); }

/* ---------- Footer ---------- */
.foot { border-top: 1px solid var(--rule-soft); background: var(--paper-2); }
.foot-in { display: flex; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding-top: 22px; padding-bottom: 36px; font-size: 12.5px; color: var(--ink-3); letter-spacing: 0; }
.foot-in a { color: var(--ink-2); text-decoration: none; }
.foot-in a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-in strong { color: var(--ink-2); font-weight: 600; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- Fact list (label / value rows) ---------- */
.facts { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 20px; }
.facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); }
.facts > div:last-child { border-bottom: 0; }
.facts dt, .facts .f-label { font-size: 14px; color: var(--ink-3); }
.facts dd, .facts .f-val { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1; letter-spacing: -0.025em; color: var(--ink); text-align: right; font-variant-numeric: lining-nums tabular-nums; }

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1px; background: var(--rule-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.stat-strip > div { padding: 20px 22px 22px; background: var(--surface); }
.stat-val { font-family: var(--display); font-weight: 700; font-size: 38px; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
.stat-label { font-size: 13.5px; color: var(--ink-3); margin-top: 8px; letter-spacing: -0.005em; }

/* Notes and disclosures */
.note { background: var(--paper-2); border-radius: 12px; padding: 14px 18px; color: var(--ink-2); font-size: 14.5px; line-height: 1.6; max-width: 52em; }
.note strong { color: var(--ink); font-weight: 600; }

/* Tag line */
.stack { font-family: var(--sans); font-size: 13px; color: var(--ink-3); letter-spacing: -0.005em; line-height: 1.7; display: flex; flex-wrap: wrap; gap: 6px; }
.stack span { white-space: nowrap; background: var(--paper-2); border-radius: 980px; padding: 1px 10px; }

/* ---------- Data pages (shared by both dashboards) ---------- */
.dash-head { padding: 56px 0 32px; display: grid; grid-template-columns: 1fr minmax(240px, 340px); gap: 40px; align-items: end; }
.dash-head .h1 { margin: 12px 0 14px; }
.dash-head p { color: var(--ink-3); max-width: 40em; }
.toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-bottom: 32px;
    background: var(--surface); border-radius: 14px; box-shadow: var(--shadow);
}
.toolbar-label { font-size: 13px; color: var(--ink-3); }
.selector {
    font-family: var(--display);
    font-weight: 600;
    font-size: 19px;
    letter-spacing: -0.02em;
    color: var(--ink);
    background-color: var(--paper-2);
    border: 0;
    padding: 6px 34px 6px 12px;
    border-radius: 10px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238e8e93' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 200px;
}
.selector:focus { outline: none; box-shadow: 0 0 0 3px var(--accent-wash), 0 0 0 1.5px var(--accent); }
.data-status { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-3); }
.data-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rule); flex-shrink: 0; }
.data-status.is-live .data-status-dot { background: var(--good); box-shadow: 0 0 0 3px color-mix(in srgb, var(--good) 22%, transparent); }
.data-status.is-snapshot .data-status-dot { background: var(--ink-3); }

.kpis { display: grid; grid-template-columns: repeat(var(--cols, 5), 1fr); gap: 1px; background: var(--rule-soft); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 48px; }
.kpi { padding: 18px 20px 20px; background: var(--surface); min-width: 0; }
.kpi-label { font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.kpi-value { font-family: var(--display); font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: lining-nums tabular-nums; margin-bottom: 8px; white-space: nowrap; }
.kpi-sub { font-size: 12.5px; color: var(--ink-3); letter-spacing: 0; }
.kpi-delta { font-size: 12.5px; font-weight: 500; margin-top: 8px; display: block; font-variant-numeric: tabular-nums; }
.kpi-delta:empty { display: none; }
.delta-up { color: var(--good); }
.delta-down { color: var(--bad); }
.signal-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.025em; line-height: 1.1; color: var(--ink); margin-top: 2px; }
.signal-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.block { margin-bottom: 56px; }
.block-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.block-title { font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1.15; letter-spacing: -0.03em; }
.block-sub { font-size: 14px; color: var(--ink-3); margin-top: 4px; }
.cols-2 { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 24px; }
.cols-2 > * { min-width: 0; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
canvas { max-height: 320px; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 20px 8px; }
.table-scroll table { min-width: 640px; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; letter-spacing: -0.005em; }
table.data th { text-align: left; font-weight: 500; font-size: 12.5px; color: var(--ink-3); padding: 12px 14px 10px 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
table.data td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink); vertical-align: top; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.r, table.data th.r { text-align: right; }
table.data tr:hover td { background: var(--accent-wash); }
.sentiment { font-size: 13px; color: var(--ink-2); }
.sentiment::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; background: var(--ink-3); vertical-align: 1px; }
.s-tightening::before, .s-strong::before { background: var(--good); }
.s-improving::before, .s-active::before { background: var(--warn); }
.s-balanced::before, .s-neutral::before { background: var(--ink-3); }
.s-good::before { background: var(--good); }
.s-warn::before { background: var(--warn); }
.s-bad::before { background: var(--bad); }

.chart-empty { display: flex; align-items: center; justify-content: center; min-height: 180px; font-size: 13.5px; color: var(--ink-3); text-align: center; border: 1px dashed var(--rule); border-radius: 12px; padding: 20px; }
.page-error { border-radius: 12px; padding: 12px 16px; color: var(--bad); font-size: 14px; margin-bottom: 24px; display: none; background: color-mix(in srgb, var(--bad) 10%, transparent); }
.skeleton { display: inline-block; width: 90px; height: 32px; border-radius: 8px; background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper-3) 50%, var(--paper-2) 75%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Entry list (deals, market moves) */
.entries { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.entry { padding: 18px 20px 18px; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); min-width: 0; }
.entry-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.entry-title { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; letter-spacing: -0.02em; }
.entry-type { font-size: 12px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.entry-where { font-size: 13.5px; color: var(--ink-2); margin-bottom: 10px; }
.entry-body { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin-bottom: 10px; }
.entry-stats { display: flex; gap: 22px; flex-wrap: wrap; }
.entry-stat-label { font-size: 11.5px; color: var(--ink-3); }
.entry-stat-val { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.entry-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--ink-3); }
.entries-empty { padding: 28px 0; color: var(--ink-3); font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    :root { --gutter: 28px; }
    .dash-head { grid-template-columns: 1fr; gap: 20px; }
    .cols-2 { grid-template-columns: minmax(0, 1fr); }
    .kpis { grid-template-columns: repeat(2, 1fr); }
    .entries { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    :root { --gutter: 16px; --radius: 16px; }
    body { font-size: 16px; }
    .mast-nav { gap: 16px; }
    .mast .hide-sm { display: none; }
    .mast .mark-sub::before { display: none; }
    .mast .mark-sub { margin-left: 4px; }
    .lede { font-size: 18px; }
    .sec-head p { font-size: 17px; }
    .stat-strip { grid-template-columns: 1fr 1fr; }
    .stat-val { font-size: 30px; }
    .kpi { padding: 14px 16px 16px; }
    .kpi-value { font-size: 28px; }
    .signal-badge { font-size: 20px; }
    .kpis .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .toolbar { gap: 10px; }
    .toolbar .selector { flex: 1 1 100%; min-width: 0; }
    .data-status { margin-left: 0; width: 100%; }
    .cols-2 > * { padding: 16px; }
    .table-scroll { padding: 4px 14px 6px; }
    .entries { grid-template-columns: 1fr; }
    .block { margin-bottom: 44px; }
    .foot-in { flex-direction: column; }
}

/* ---------- Project tiles (home + /work) ---------- */
.group { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 56px 0 18px; padding-top: 18px; border-top: 1px solid var(--rule-soft); }
.group:first-of-type { margin-top: 0; }
.group h3 { font-family: var(--display); font-weight: 600; font-size: 21px; letter-spacing: -0.02em; }
.group span { font-size: 14px; color: var(--ink-3); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tile {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    min-height: 500px; padding: 40px 40px 0; border-radius: 28px;
    background: var(--surface); box-shadow: var(--shadow);
    text-decoration: none; color: var(--ink); -webkit-tap-highlight-color: transparent;
}
a.tile:hover { box-shadow: var(--shadow), 0 18px 48px rgba(0, 0, 0, 0.08); }
.tile-wide { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; padding: 48px; align-items: center; }
.tile-status { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); margin-bottom: 12px; }
.tile-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); }
.tile-status .dot.demo { background: var(--ink-3); }
.tile-status .dot.soon { background: var(--warn); }
.tile-title { font-family: var(--display); font-weight: 700; font-size: clamp(28px, 3vw, 40px); line-height: 1.06; letter-spacing: -0.035em; margin-bottom: 14px; max-width: 14em; }
.tile-desc { color: var(--ink-3); font-size: 17px; line-height: 1.5; max-width: 32em; margin-bottom: 16px; }
.tile-proof { font-size: 15px; line-height: 1.45; margin-bottom: 16px; max-width: 30em; padding-left: 12px; border-left: 2px solid var(--accent); color: var(--ink-2); }
.tile-proof strong { color: var(--ink); }
.tile .stack { margin-bottom: 22px; }
.tile-go { color: var(--accent); font-weight: 500; font-size: 17px; }
a.tile:hover .tile-go { text-decoration: underline; text-underline-offset: 3px; }
.tile-art { margin-top: auto; padding-top: 28px; }
.tile-wide .tile-art { margin: 0; padding: 0; }
.tile-art svg { width: 100%; height: auto; }

/* Each product keeps its own colours, so the tiles read as different things. */
.tile-spurs { background: #0e1a45; color: #f5f5f7; box-shadow: none; }
.tile-hold { background: #0b1415; color: #ecf2f2; box-shadow: none; }
.tile-unearthed { background: #1b1530; color: #fff6ea; box-shadow: none; }
.tile-dark .tile-desc, .tile-dark .tile-status, .tile-dark .tile-proof { color: rgba(245, 245, 247, 0.72); }
.tile-dark .tile-proof strong { color: #fff; }
.tile-dark .stack span { background: rgba(255, 255, 255, 0.1); color: rgba(245, 245, 247, 0.82); }
.tile-spurs .tile-go { color: #ffffff; }
.tile-hold .tile-go { color: #6fd6cd; }
.tile-hold .tile-proof { border-color: #ffb547; }
.tile-unearthed .tile-go { color: #ffd23f; }
.tile-unearthed .tile-proof { border-color: #ff4b2b; }
.tile-unearthed .tile-title { font-style: italic; letter-spacing: -0.045em; }

/* Hold's art: one class in a full timetable gets a space. */
.slot-open { animation: slot 3.2s var(--spring) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes slot { 0%, 55% { fill: rgba(255, 255, 255, 0.1); transform: scale(1); } 62%, 92% { fill: #ffb547; transform: scale(1.06); } 100% { fill: rgba(255, 255, 255, 0.1); transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .slot-open { animation: none; fill: #ffb547; } }

@media (max-width: 980px) {
    .tile-wide { grid-template-columns: 1fr; padding: 40px 32px 32px; }
    .tile { padding: 32px 32px 0; min-height: 0; }
}
@media (max-width: 640px) {
    .tiles { grid-template-columns: 1fr; gap: 14px; }
    .tile, .tile-wide { padding: 28px 22px 0; border-radius: 22px; }
    .tile-wide { padding-bottom: 24px; gap: 24px; }
    .group { flex-direction: column; gap: 2px; margin-top: 44px; }
}

/* ---------- Scroll reveal (driven by assets/motion.js) ----------
 * --r runs 0 to 1 as the element comes up into view. Without JS it stays 1.
 */
[data-reveal] {
    opacity: calc(var(--r, 1) * 1.15 - 0.15);
    /* Individual translate/scale so press feedback (transform) still composes on top. */
    translate: 0 calc((1 - var(--r, 1)) * 56px);
    scale: calc(0.94 + var(--r, 1) * 0.06);
}
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; translate: none; scale: none; } }
.mast-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* QR Worlds: the rainforest world from the side, macaws circling and monkeys hopping across the canopy. */
.tile-qr { background: #0c1d14; color: #eef6ee; box-shadow: none; }
.tile-qr .tile-go { color: #8fe3a5; }
.qw-tree { transform-box: fill-box; transform-origin: 50% 100%; animation: qw-grow 0.9s var(--spring) both; }
@keyframes qw-grow { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }


/* Compact rows for smaller projects on /work. */
.mini { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 28px; border-radius: 20px; background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); }
.mini-main { display: grid; gap: 4px; }
.mini-main strong { font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.mini-main span { color: var(--ink-3); font-size: 15px; line-height: 1.45; }
.mini-go { color: var(--accent); font-weight: 500; white-space: nowrap; }
.mini-soon .mini-go { color: var(--ink-3); }
.mini + .mini { margin-top: 12px; }
a.mini:hover .mini-go { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) { .mini { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 22px; } }

@media (prefers-reduced-motion: reduce) {
    .qw-tree { animation: none; }
    .qw-bird, .qw-monkey { display: none; }
}

/* Samespot's art: the walk-round path flows, and the matched mark pulses. */
.ss-path { animation: ss-walk 6s linear infinite; }
@keyframes ss-walk { to { stroke-dashoffset: -64; } }
.ss-mark { transform-box: fill-box; transform-origin: center; animation: ss-ping 2.4s var(--spring) infinite; }
@keyframes ss-ping { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .ss-path, .ss-mark { animation: none; } }