/* ==========================================================================
   Projects page — builds on ../css/tokens.css, base.css and layout.css
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */

.hero-title--statement {
    font-size: clamp(3rem, 0.5rem + 8vw, 8.5rem);
    line-height: 0.92;
    letter-spacing: -0.03em;
}

.hero-title--statement em {
    color: var(--signal-ink);
}

.hero-intro .hero-lede {
    margin-top: 0;
}

.hero-kicker {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--font-display);
    font-size: 1.35em;
    font-style: italic;
    color: var(--ink);
}

.hero-tags {
    margin-top: 1.5rem;
}

.btn:hover .icon--r {
    transform: translateX(3px);
}

/* --- Fig. 01: projects by category (one block per project) ---------------- */

.tally-key {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.tally-key i {
    width: 0.65rem;
    height: 0.65rem;
    background: var(--ink);
}

.tally-key i.is-hollow {
    margin-left: 0.6rem;
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-muted);
}

/* Six columns need ~75px each for the longest label ("Experiments") */
.hero-figure .figure-body {
    container-type: inline-size;
}

.tally-chart {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: end;
    gap: 1.25rem 0.5rem;
    padding: 0;
    list-style: none;
}

@container (max-width: 470px) {
    .tally-chart {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.5rem 0.75rem;
    }
}

.tally-col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    color: var(--ink);
    text-decoration: none;
}

.tally-count {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1rem + 2vw, 2.75rem);
    line-height: 1;
    transition: color var(--duration-fast) ease;
}

.tally-stack {
    display: flex;
    flex-direction: column-reverse;
    gap: 4px;
}

.tally-stack i {
    display: block;
    height: clamp(12px, 1.5vw, 20px);
    background: var(--ink);
    transition: background-color var(--duration-fast) ease;
}

.tally-col--archive .tally-stack i {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--ink-muted);
}

.tally-name {
    min-height: 2.9em;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule-strong);
    font-size: var(--text-2xs);
    letter-spacing: 0;
}

.tally-col:hover .tally-count,
.tally-col:focus-visible .tally-count {
    color: var(--signal-ink);
}

.tally-col:hover .tally-stack i,
.tally-col:focus-visible .tally-stack i {
    background: var(--signal);
}

.tally-col--archive:hover .tally-stack i,
.tally-col--archive:focus-visible .tally-stack i {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--signal);
}

/* Blocks stack up column by column on load */
.tally-chart li:nth-child(2) { --col: 1; }
.tally-chart li:nth-child(3) { --col: 2; }
.tally-chart li:nth-child(4) { --col: 3; }
.tally-chart li:nth-child(5) { --col: 4; }
.tally-chart li:nth-child(6) { --col: 5; }
.tally-stack i:nth-child(2) { --row: 1; }
.tally-stack i:nth-child(3) { --row: 2; }
.tally-stack i:nth-child(4) { --row: 3; }
.tally-stack i:nth-child(5) { --row: 4; }
.tally-stack i:nth-child(6) { --row: 5; }
.tally-stack i:nth-child(7) { --row: 6; }
.tally-stack i:nth-child(8) { --row: 7; }
.tally-stack i:nth-child(9) { --row: 8; }

@media (prefers-reduced-motion: no-preference) {
    .tally-stack i {
        animation: brick-in 0.6s var(--ease-out-expo) both;
        animation-delay: calc(0.8s + var(--col, 0) * 90ms + var(--row, 0) * 45ms);
    }
}

@keyframes brick-in {
    from {
        opacity: 0;
        transform: translateY(-0.75rem);
    }
}

/* --- 01 Studio --------------------------------------------------------------- */

.studio-grid {
    row-gap: 2rem;
    align-items: end;
}

.studio-grid .statement {
    grid-column: 1 / span 8;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.08;
    letter-spacing: -0.015em;
}

.studio-grid .statement em {
    color: var(--signal-ink);
}

.studio-copy {
    grid-column: 9 / -1;
    display: grid;
    gap: 1rem;
    color: var(--ink-soft);
}

.studio-highlight {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-style: italic;
    line-height: 1.15;
    color: var(--signal-ink);
}

@media (max-width: 860px) {
    .studio-grid .statement,
    .studio-copy {
        grid-column: 1 / -1;
    }

    .studio-copy {
        max-width: 60ch;
    }
}

/* --- 02 Services ------------------------------------------------------------- */

.section--tight {
    padding-top: 0;
}

.services {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gutter);
}

.service {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule-strong);
}

.service-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.service-top .label {
    color: var(--signal-ink);
}

.service-glyph {
    width: clamp(2.5rem, 4vw, 3.5rem);
    height: clamp(2.5rem, 4vw, 3.5rem);
    fill: none;
    stroke: var(--ink);
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke var(--duration-normal) ease, transform var(--duration-slow) var(--ease-out-expo);
}

.service:hover .service-glyph {
    stroke: var(--signal);
    transform: rotate(-8deg) scale(1.06);
}

.service-title {
    margin-top: clamp(1rem, 3vw, 2.5rem);
    font-size: clamp(1.875rem, 1.3rem + 1.8vw, 2.75rem);
    line-height: 1;
}

.service p {
    max-width: 38ch;
    color: var(--ink-soft);
}

@media (max-width: 860px) {
    .services {
        grid-template-columns: 1fr;
        row-gap: 2.5rem;
    }

    .service-title {
        margin-top: 0;
    }
}

/* --- 03 Work: filters -------------------------------------------------------- */

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem 2rem;
    margin-bottom: 1.5rem;
}

.filter-bar[hidden] {
    display: none;
}

.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.filter {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5em;
    padding: 0.65em 1.1em;
    border: 1px solid var(--rule);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--duration-fast) ease,
        border-color var(--duration-fast) ease,
        color var(--duration-fast) ease;
}

.filter:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.filter[aria-pressed="true"] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.filter-count {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    font-weight: 400;
    color: var(--ink-muted);
}

.filter[aria-pressed="true"] .filter-count {
    color: inherit;
}

/* --- 03 Work: catalogue ------------------------------------------------------ */

.catalogue {
    border-top: 1px solid var(--rule-strong);
}

.project {
    position: relative;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 5fr) minmax(0, 6fr);
    column-gap: var(--gutter);
    row-gap: 1rem;
    padding-block: clamp(1.5rem, 3vw, 2.25rem);
    border-bottom: 1px solid var(--rule);
}

.project[hidden] {
    display: none;
}

.project::before {
    content: '';
    position: absolute;
    inset: -1px auto -1px calc(-0.5 * var(--gutter));
    width: 3px;
    background: var(--signal);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--duration-normal) var(--ease-out-expo);
}

.project:hover::before,
.project:focus-within::before {
    transform: scaleY(1);
}

.project-no {
    padding-top: 0.6em;
    transition: color var(--duration-fast) ease;
}

.project:hover .project-no {
    color: var(--signal-ink);
}

.project-title {
    font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
    line-height: 1.02;
}

.project-title a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--duration-normal) var(--ease-out-expo), color var(--duration-fast) ease;
}

.project-title a:hover {
    background-size: 100% 1px;
    color: var(--signal-ink);
}

.project-title .icon {
    width: 0.45em;
    height: 0.45em;
    margin-left: 0.2em;
    vertical-align: 0.4em;
    stroke-width: 2;
}

.project-title a:hover .icon {
    transform: translate(2px, -2px);
}

.project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-top: 0.75rem;
    overflow-wrap: anywhere;
}

.project-meta span:first-child {
    color: var(--signal-ink);
}

.project-lead {
    max-width: 62ch;
}

.project-more {
    max-width: 62ch;
    margin-top: 0.75rem;
}

.project-more summary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-block: 0.25rem;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
    list-style: none;
    cursor: pointer;
    transition: color var(--duration-fast) ease;
}

.project-more summary::-webkit-details-marker {
    display: none;
}

.project-more summary:hover {
    color: var(--ink);
}

.project-more[open] summary .icon {
    transform: rotate(45deg);
}

.project-more p {
    margin-top: 0.75rem;
    font-size: var(--text-sm);
    color: var(--ink-soft);
}

.project .chips {
    margin-top: 1.25rem;
}

.chips--mono li {
    padding: 0.4em 0.75em;
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.catalogue-empty {
    padding-block: 2rem;
}

@media (max-width: 860px) {
    .project {
        grid-template-columns: 2.5rem minmax(0, 1fr);
    }

    .project-no {
        grid-row: 1 / span 2;
        padding-top: 0.4em;
    }

    .project-head,
    .project-body {
        grid-column: 2;
    }
}

/* --- 03.1 Archive -------------------------------------------------------- */

.archive {
    margin-top: clamp(4rem, 8vw, 7rem);
}

.archive-head {
    align-items: end;
    row-gap: 1rem;
    padding-top: 1rem;
    margin-bottom: 2rem;
    border-top: 1px solid var(--rule-strong);
}

.archive-head .section-index {
    grid-column: 1 / span 2;
}

.archive-title {
    grid-column: 3 / span 5;
    font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem);
    line-height: 1;
}

.archive-copy {
    grid-column: 9 / -1;
    color: var(--ink-soft);
}

.archive-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.archive-table thead th {
    padding: 0 1rem 0.75rem 0;
    font-weight: 400;
    border-bottom: 1px solid var(--rule-strong);
}

.archive-table tbody th,
.archive-table td {
    padding: 1.25rem 1.5rem 1.25rem 0;
    vertical-align: baseline;
    border-bottom: 1px solid var(--rule);
}

.archive-table tbody th {
    width: 28%;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 400;
    line-height: 1.1;
}

.archive-table tbody th a {
    color: var(--ink-soft);
    text-decoration: line-through;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) ease;
}

.archive-table tbody th a:hover {
    color: var(--ink);
    text-decoration: none;
}

.archive-table tbody th .icon {
    width: 0.5em;
    height: 0.5em;
    margin-left: 0.15em;
    vertical-align: 0.35em;
    stroke-width: 2;
}

.archive-table td {
    color: var(--ink-soft);
}

.archive-table td.label {
    width: 24%;
    padding-right: 0;
    text-align: right;
    white-space: nowrap;
}

@media (max-width: 860px) {
    .archive-head .section-index,
    .archive-title,
    .archive-copy {
        grid-column: 1 / -1;
    }

    .archive-table thead {
        display: none;
    }

    .archive-table tr,
    .archive-table tbody th,
    .archive-table td,
    .archive-table td.label {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        text-align: left;
        white-space: normal;
    }

    .archive-table tr {
        display: grid;
        gap: 0.5rem;
        padding-block: 1.25rem;
        border-bottom: 1px solid var(--rule);
    }
}

/* --- Quote band -------------------------------------------------------------- */

.quote {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(5rem, 10vw, 9rem);
    border-block: 1px solid var(--rule-strong);
}

.quote-word {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    font-family: var(--font-display);
    font-size: clamp(8rem, 30vw, 30rem);
    font-style: italic;
    line-height: 1;
    letter-spacing: -0.04em;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--ink) 20%, transparent);
    transform: translate(-50%, -52%);
    pointer-events: none;
    user-select: none;
}

.quote-text {
    max-width: 18ch;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: 1.02;
    letter-spacing: -0.02em;
}

.quote-text em {
    color: var(--signal-ink);
}

.quote-mark {
    display: block;
    height: 0.5em;
    font-size: 1.6em;
    line-height: 1;
    color: var(--signal);
}

.quote-credit {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
}

.quote-avatar {
    width: 3rem;
    height: 3rem;
    font-size: 1.1rem;
    letter-spacing: 0;
}

.quote-name {
    display: block;
    font-weight: 500;
}

/* --- 04 Contact -------------------------------------------------------------- */

.contact-grid {
    row-gap: 3rem;
    align-items: start;
}

.contact-copy {
    grid-column: 1 / span 6;
}

.contact-title--compact {
    max-width: 12ch;
    font-size: clamp(2.75rem, 1rem + 5vw, 6.5rem);
}

.contact-lede {
    max-width: 40ch;
    margin-top: 1.75rem;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: color-mix(in srgb, var(--ink) 82%, var(--paper));
}

.reasons {
    display: grid;
    gap: 0.85rem;
    margin-top: 2rem;
}

.reasons li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.reasons .icon {
    color: var(--signal);
    stroke-width: 2;
}

.contact-stats {
    display: flex;
    gap: clamp(2rem, 5vw, 4rem);
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.contact-stats div {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-stats dd {
    order: -1;
    font-family: var(--font-display);
    font-size: clamp(3rem, 2rem + 3vw, 5rem);
    line-height: 0.9;
    letter-spacing: -0.03em;
}

.form-card {
    grid-column: 8 / -1;
    border: 1px solid var(--rule-strong);
    background: color-mix(in srgb, var(--paper) 92%, var(--ink));
}

.form-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--rule);
}

.form-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink);
}

.form-badge .icon {
    color: var(--signal);
}

.js .form-embed {
    display: grid;
    min-height: 500px;
}

/* Placeholder until Typeform replaces the contents (projects.js loads it) */
.js .form-embed:empty::before {
    content: 'Loading the project brief…';
    place-self: center;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.js .form-embed[data-state="error"]:empty::before {
    content: 'The form could not load — please email instead.';
}

.form-fallback {
    padding: 0.9rem 1rem;
    border-top: 1px solid var(--rule);
    font-size: var(--text-sm);
    color: var(--ink-muted);
}

.form-fallback a {
    color: var(--ink);
}

@media (max-width: 960px) {
    .contact-copy,
    .form-card {
        grid-column: 1 / -1;
    }
}

/* --- Colophon (four columns) ------------------------------------------------- */

.colophon-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.colophon-grid .colophon-tagline {
    font-size: var(--text-lg);
    color: var(--ink-soft);
}

.colophon-links {
    display: grid;
    gap: 0.35rem;
}

.colophon-links a {
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size var(--duration-normal) var(--ease-out-expo);
}

.colophon-links a:hover {
    background-size: 100% 1px;
}

.colophon-base p a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.icon--heart {
    color: var(--signal);
    vertical-align: -0.2em;
}

@media (max-width: 960px) {
    .colophon-grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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