/* =========================================================
   2nd Code — Classic / editorial layer (plain CSS, no build)
   Used by: portfolio, case studies, home "Selected Work", founder
   ========================================================= */
:root {
    --ink: #1d1d1f;
    --ink-soft: #4a4a4f;
    --muted: #7a756c;
    --ivory: #faf7f2;
    --paper: #ffffff;
    --rule: #e7e1d6;
    --brand: #cf1f3c;
    --brand-dark: #a3172f;
    --gold: #b8955a;
    --serif: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Mobile base fixes ---------- */
html { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; }
.pb-safe { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---------- Typography ---------- */
.font-serif-classic { font-family: var(--serif); letter-spacing: -0.02em; font-weight: 700; font-style: normal !important; }
.eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
    color: var(--brand);
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow.center::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .7; }

.classic-title {
    font-family: var(--serif); font-weight: 800; color: var(--ink);
    font-size: clamp(2rem, 6vw, 4.25rem); line-height: 1.08; letter-spacing: -0.03em;
}
.classic-title em, .p-card em, .founder-classic em { font-style: normal; color: var(--brand); font-weight: inherit; }
.classic-lead { color: var(--ink-soft); font-size: clamp(.98rem, 2.2vw, 1.2rem); line-height: 1.7; font-weight: 300; }

.bg-ivory { background: var(--ivory); }
.rule { border-color: var(--rule) !important; }

/* ---------- Filter chips ---------- */
.chip-row { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.chip-row::-webkit-scrollbar { display: none; }
.chip {
    flex-shrink: 0; padding: .55rem 1.1rem; border-radius: 999px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--rule); background: #fff; color: var(--ink-soft); transition: all .25s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.active { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 768px) { .chip-row { flex-wrap: wrap; justify-content: center; } }

/* ---------- Project visual (screenshot or monogram) ---------- */
.pv {
    position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 3 / 2;
    background: var(--tone-bg, #1d1d1f); isolation: isolate;
    box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 18px 40px -22px rgba(29,29,31,.45);
}
.pv-bar {
    position: absolute; inset: 0 0 auto 0; height: 26px; z-index: 3;
    background: rgba(255,255,255,.92); border-bottom: 1px solid rgba(0,0,0,.06);
    display: flex; align-items: center; gap: 5px; padding: 0 10px;
}
.pv-bar i { width: 7px; height: 7px; border-radius: 50%; background: #d9d4cb; display: block; }
.pv-bar span {
    margin-left: 8px; font-size: 10px; color: #8a857c; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv img {
    position: absolute; inset: 26px 0 0 0; width: 100%; height: calc(100% - 26px);
    object-fit: cover; object-position: top center; z-index: 2;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.pv-mono {
    position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; padding: 2rem 1rem 1rem;
    color: var(--tone-fg, #c9a96e);
    background:
        radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.08), transparent 60%),
        var(--tone-bg, #1d1d1f);
}
.pv-mono::before {
    content: ''; position: absolute; inset: 38px 12px 12px; border: 1px solid currentColor; opacity: .35; border-radius: 6px;
}
.pv-mono b { font-family: var(--serif); font-weight: 800; font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1; letter-spacing: .04em; }
.pv-mono small { margin-top: .8rem; font-size: 10px; letter-spacing: .28em; text-transform: uppercase; opacity: .85; }
.group:hover .pv img { transform: scale(1.03); }

/* ---------- Project card ---------- */
.p-card { display: flex; flex-direction: column; gap: 1rem; }
.p-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem .75rem; font-size: 12px; color: var(--muted); }
.p-num { font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 13px; letter-spacing: .06em; }
.p-title { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-size: clamp(1.35rem, 3.6vw, 1.9rem); line-height: 1.15; }
.p-sub { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }
.status {
    display: inline-flex; align-items: center; gap: .35rem; font-size: 10.5px; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; padding: .2rem .55rem; border-radius: 999px;
}
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status.live { color: #15803d; background: #ecfdf3; }
.status.development { color: #a16207; background: #fef9e7; }
.status.private { color: #4b5563; background: #f3f4f6; }
.p-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn-ink, .btn-line {
    display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 42px;
    padding: .6rem 1.1rem; border-radius: 999px; font-size: 13.5px; font-weight: 600; transition: all .25s;
}
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: var(--brand); }
.btn-line { border: 1px solid var(--rule); color: var(--ink); background: #fff; }
.btn-line:hover { border-color: var(--ink); }
.btn-brand { background: var(--brand); color: #fff; }
.btn-brand:hover { background: var(--brand-dark); }

/* ---------- Case study detail ---------- */
.cs-hero { background: var(--ivory); border-bottom: 1px solid var(--rule); }
.fact-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); border-top: 1px solid var(--rule); }
.fact-grid > div { padding: 1rem .25rem; border-bottom: 1px solid var(--rule); }
.fact-grid dt { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-bottom: .3rem; }
.fact-grid dd { color: var(--ink); font-weight: 500; font-size: 14.5px; word-break: break-word; }
@media (min-width: 768px) { .fact-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } .fact-grid > div { padding: 1.25rem 1rem 1.25rem 0; } }

.cs-section h2 { font-family: var(--serif); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-size: clamp(1.5rem, 4vw, 2.2rem); line-height: 1.2; }
.cs-section p { color: var(--ink-soft); line-height: 1.8; font-size: 1rem; }
.built-list { counter-reset: b; display: grid; gap: 0; }
.built-list li {
    counter-increment: b; display: grid; grid-template-columns: 2.4rem 1fr; gap: .5rem;
    padding: 1rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); line-height: 1.6; font-size: 15px;
}
.built-list li::before { content: counter(b, decimal-leading-zero); font-family: var(--serif); font-weight: 700; color: var(--gold); font-size: 13px; padding-top: 3px; }
.tag { display: inline-block; font-size: 12px; padding: .35rem .75rem; border: 1px solid var(--rule); border-radius: 999px; color: var(--ink-soft); background: #fff; }
.outcome {
    border-left: 2px solid var(--brand); padding: .25rem 0 .25rem 1rem; color: var(--ink);
    font-family: var(--serif); font-size: 1.05rem; font-weight: 600; line-height: 1.4;
}
.quote-band { background: var(--ink); color: #f4efe6; }
.quote-band .classic-title { color: #fff; }

/* ---------- Case study index rows ---------- */
.cs-row { display: grid; gap: 1.5rem; padding: 2.25rem 0; border-top: 1px solid var(--rule); }
@media (min-width: 1024px) {
    .cs-row { grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; padding: 3.5rem 0; }
    .cs-row.flip > .cs-visual { order: 2; }
}

/* ---------- Logos / client strip ---------- */
.client-strip span {
    font-family: var(--serif); font-size: clamp(1rem, 2.4vw, 1.35rem); font-weight: 700; color: #6b665e; white-space: nowrap; letter-spacing: -0.01em;
}
.client-strip .dot { color: var(--brand); font-style: normal; }

/* ---------- Founder card ---------- */
.founder-classic { background: var(--ivory); border: 1px solid var(--rule); border-radius: 22px; }
.li-btn { background: #0a66c2; color: #fff; }
.li-btn:hover { background: #004182; }

/* ---------- Reveal animation (progressive: visible without JS) ---------- */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .pv img { transition: none; }
}

/* "Custom PHP" badge on project cards (shown on every card; no WordPress / external previews) */
.pv-badge {
    position: absolute; right: 10px; bottom: 10px; z-index: 4;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px;
    background: rgba(255,255,255,.95); color: #1d1d1f;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.pv-badge svg { color: var(--brand); }

/* ---------- Article / long-form content ---------- */
.prose-2c { color: #374151; font-size: 16.5px; line-height: 1.8; }
.prose-2c > * + * { margin-top: 1.1em; }
.prose-2c .lead { font-size: 1.15rem; color: #1f2937; line-height: 1.75; }
.prose-2c h2 { font-size: clamp(1.35rem, 3.6vw, 1.75rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.25; margin-top: 2em; }
.prose-2c h3 { font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-top: 1.6em; }
.prose-2c a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.prose-2c ul, .prose-2c ol { padding-left: 1.3em; }
.prose-2c ul { list-style: disc; } .prose-2c ol { list-style: decimal; }
.prose-2c li + li { margin-top: .45em; }
.prose-2c li::marker { color: var(--brand); }
.prose-2c strong { color: var(--ink); }
.prose-2c em { font-style: normal; font-weight: 600; color: var(--ink); }
.prose-2c .table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 14px; }
.prose-2c table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }
.prose-2c th, .prose-2c td { text-align: left; padding: .75rem .9rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.prose-2c thead th { background: var(--ivory); font-weight: 700; color: var(--ink); }
.prose-2c tbody tr:last-child td { border-bottom: 0; }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; font-weight: 700; color: var(--ink); padding: 1rem 0; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--brand); font-size: 1.3rem; line-height: 1; }
.faq-item[open] summary::after { content: '–'; }
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item p { padding-bottom: 1rem; color: #4b5563; line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }