/* ============================================================================
   ThreatTape — Cinematic skin for the content pages
   (services · security-governance · solving-real-problems · mad-scientist-lab
    · about · contact)

   Loads AFTER cinematic.css. Everything structural — the :root tokens, the
   oil-black body, the .nav / .cc-mobile-nav / .foot / .btn / cursor / eyebrow —
   comes from cinematic.css. This file only restyles the legacy dossier content
   classes (cc-*) so the subpages speak the same language as the homepage.
   ============================================================================ */

/* --- drop the dossier-only chrome -------------------------------------- */
.cc-index,                 /* left index rail — the top .nav replaces it     */
.cc-clip { display: none !important; }   /* paperclip photo device          */

/* --- active nav item --------------------------------------------------- */
.nav__links a[aria-current="page"] { color: var(--bone-0); }
.nav__links a[aria-current="page"]::after { width: 100%; background: var(--caution); }

/* --- page shell -------------------------------------------------------- */
.hero--callingcard,
.cc-desk {
    display: block;
    min-height: 0;
    place-items: initial;
    overflow: visible;
    padding: clamp(6.5rem, 7vw, 9rem) var(--gutter) clamp(4rem, 10vw, 7rem);
    background: none;
}
.cc-cover-sheet,
.cc-dossier {
    max-width: 940px;
    margin: 0 auto;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    transform: none !important;
    color: var(--bone-0);
    font-family: var(--f-body);
}

/* --- page heading ------------------------------------------------------ */
.cc-page-heading {
    font-family: var(--f-display); font-weight: 700;
    font-size: clamp(2.6rem, 7vw, 5rem); line-height: 0.98;
    letter-spacing: 0.01em; text-transform: uppercase;
    color: var(--bone-0); margin: 0.4rem 0 1.4rem;
}

/* --- intake / metadata block ------------------------------------------- */
.cc-intake {
    margin: 0 0 2rem; padding: 1.1rem 1.25rem;
    background: var(--ink-1); border: 1px solid var(--edge);
    border-left: 3px solid var(--caution); border-radius: 3px;
    display: grid; gap: 0.55rem;
}
.cc-intake__row { display: flex; gap: 0.9rem; align-items: baseline; flex-wrap: wrap; }
.cc-intake__label {
    flex: 0 0 auto; min-width: 8.5rem;
    font-family: var(--f-mono); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--phosphor);
}
.cc-intake__value {
    font-family: var(--f-mono); font-size: 0.86rem; color: var(--bone-1);
    margin: 0; line-height: 1.5;
}

/* --- prose ------------------------------------------------------------- */
.cc-project__body,
.cc-project__body p {
    font-family: var(--f-body); font-size: 1.1rem; line-height: 1.65;
    color: var(--bone-1); margin: 0 0 1rem;
}
.cc-project__body p:last-child { margin-bottom: 0; }
.cc-project__link {
    color: var(--bone-0); text-decoration: underline;
    text-decoration-color: var(--phosphor); text-underline-offset: 3px;
    text-decoration-thickness: 2px; font-weight: 600;
}
.cc-project__link:hover { color: var(--phosphor); }

/* --- section divider label --------------------------------------------- */
.cc-section-divider {
    font-family: var(--f-mono); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--caution);
    margin: 2.75rem 0 1.25rem; display: flex; align-items: center; gap: 0.8rem;
}
.cc-section-divider::before {
    content: ''; width: 34px; height: 10px; flex: 0 0 auto;
    background-image: repeating-linear-gradient(-45deg,
        var(--caution) 0, var(--caution) 5px, transparent 5px, transparent 10px);
}

/* --- services list ----------------------------------------------------- */
.cc-services-list {
    list-style: none; margin: 1.75rem 0; padding: 0;
    display: grid; gap: 1rem;
}
.cc-services-list__item {
    background: var(--ink-1); border: 1px solid var(--edge); border-radius: 3px;
    padding: 1.4rem 1.5rem;
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.cc-services-list__item:hover {
    border-color: var(--caution-dim);
    transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(0,0,0,0.45), 0 0 0 1px var(--phosphor-glow);
}
.cc-services-list__name {
    font-family: var(--f-display); font-weight: 600; text-transform: uppercase;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: 0.01em;
    color: var(--bone-0); margin: 0 0 0.5rem;
}
.cc-services-list__desc {
    font-family: var(--f-body); font-size: 1.02rem; line-height: 1.6;
    color: var(--bone-1); margin: 0;
}

/* --- closer line ------------------------------------------------------- */
.cc-services-closer {
    font-family: var(--f-body); font-style: italic;
    font-size: clamp(1.2rem, 2.4vw, 1.6rem); line-height: 1.5;
    color: var(--bone-0); margin: 2.25rem 0 0; text-align: center;
}

/* --- bottom CTA -------------------------------------------------------- */
.cc-bottom { margin-top: 2.75rem; text-align: center; }
.cc-cta__btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--f-mono); font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.14em; text-transform: uppercase;
    padding: 0.95rem 1.75rem; border-radius: 2px; cursor: pointer;
    text-decoration: none;
    background: var(--phosphor); color: var(--ink-0);
    border: 1.5px solid var(--phosphor); box-shadow: 0 3px 0 var(--phosphor-dim);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.cc-cta__btn:hover {
    background: var(--caution); border-color: var(--caution);
    box-shadow: 0 5px 0 var(--caution-dim); transform: translateY(-2px);
}

/* ============================================================================
   PRODUCT BOARD (security-governance · solving-real-problems · mad-scientist)
   The cc-card internals still come from evidence-board.css + themes-products.css
   (the per-product palettes). Here we only place the board on the dark page and
   sand off the "cork board" framing.
   ============================================================================ */
.cc-board-section { margin: 2.75rem 0 0; }
.cc-board-section__label {
    font-family: var(--f-mono); font-size: 0.72rem; font-weight: 700;
    letter-spacing: 0.22em; text-transform: uppercase; color: var(--caution);
    margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.8rem;
}
.cc-board-section__label::before {
    content: ''; width: 34px; height: 10px; flex: 0 0 auto;
    background-image: repeating-linear-gradient(-45deg,
        var(--caution) 0, var(--caution) 5px, transparent 5px, transparent 10px);
}
/* Work page: a one-line descriptor under each domain label */
.cc-board-section__desc {
    font-family: var(--f-body); font-size: 1.05rem; line-height: 1.55;
    color: var(--bone-1); margin: 0 0 1.25rem; max-width: 64ch;
}
/* Experience Economy — the strategically-important cluster, given a framed,
   phosphor-lit panel so it reads as the headline group, not a footnote. */
.cc-board-section--feature {
    margin-top: 3.25rem; padding: 1.9rem clamp(1rem, 3vw, 1.9rem) 2rem;
    border-radius: 5px; border: 1px solid var(--edge);
    background: linear-gradient(180deg, var(--phosphor-glow), transparent 55%), var(--ink-1);
}
.cc-board-section--feature .cc-board-section__label { color: var(--phosphor); font-size: 0.8rem; }
.cc-board-section--feature .cc-board-section__label::before {
    background-image: repeating-linear-gradient(-45deg,
        var(--phosphor) 0, var(--phosphor) 5px, transparent 5px, transparent 10px);
}
.cc-board-section--feature .cc-board-section__desc { color: var(--bone-0); }
.cc-board {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.1rem; margin: 0;
    background: none; padding: 0; border: none;
}
/* the cards ride flat on the page — kill the hand-pinned rotation/pin so they
   read as a clean cinematic grid rather than a cork board */
.cc-board .cc-card { transform: none !important; }
.cc-board .cc-card:hover { transform: translateY(-4px) !important; }
.cc-card__pin { display: none !important; }

/* --- long-form project write-ups (security-governance) ----------------- */
.cc-project { margin: 2rem 0 0; }
.cc-project__heading {
    font-family: var(--f-display); font-weight: 700; text-transform: uppercase;
    font-size: clamp(1.6rem, 3.5vw, 2.4rem); letter-spacing: 0.01em;
    color: var(--bone-0); margin: 0 0 0.9rem;
}
.cc-project__heading em { font-style: italic; font-weight: 600; }
.cc-project__sub {
    font-family: var(--f-body); font-size: 1.05rem; line-height: 1.6;
    color: var(--bone-1); margin: 0.85rem 0;
}
.cc-project__sub strong { color: var(--bone-0); font-weight: 700; }
.cc-project__wordmark {
    display: block; height: 2.6rem; width: auto; max-width: 100%; margin: 0 0 1rem;
}

/* ============================================================================
   Small shared bits
   ============================================================================ */
.skip-link:focus { z-index: 200; }

/* keep the page from ever scrolling sideways on the wider board grids */
main#main-content { overflow-x: clip; }

/* ============================================================================
   CONTACT FORM (contact.html)
   ============================================================================ */
.cc-contact-closer {
    font-family: var(--f-body); font-style: italic;
    font-size: clamp(1.15rem, 2.2vw, 1.5rem); line-height: 1.55;
    color: var(--bone-0); border-left: 3px solid var(--caution);
    padding-left: 1.25rem; margin: 1.5rem 0 2.25rem; max-width: 62ch;
}
.cc-form { display: grid; gap: 1.15rem; max-width: 560px; margin: 0; }
.cc-form__row { display: flex; flex-direction: column; gap: 0.4rem; }
.cc-form__label {
    font-family: var(--f-mono); font-size: 0.7rem; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase; color: var(--phosphor);
}
.cc-form__input,
.cc-form__textarea {
    font-family: var(--f-body); font-size: 1rem; color: var(--bone-0);
    background: var(--ink-1); border: 1px solid var(--edge); border-radius: 3px;
    padding: 0.7rem 0.85rem; width: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cc-form__textarea { resize: vertical; min-height: 8rem; line-height: 1.5; }
.cc-form__input:focus,
.cc-form__textarea:focus {
    outline: none; border-color: var(--phosphor);
    box-shadow: 0 0 0 3px var(--phosphor-glow);
}
.cc-form__input::placeholder,
.cc-form__textarea::placeholder { color: var(--bone-2); }
/* spam honeypot — must be invisible to humans (it was leaking into view) */
.cc-form__honeypot {
    position: absolute !important; left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}
.cc-form__submit {
    justify-self: start; margin-top: 0.25rem;
    font-family: var(--f-mono); font-weight: 700; font-size: 0.82rem;
    letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
    padding: 0.9rem 1.75rem; border-radius: 2px;
    background: var(--phosphor); color: var(--ink-0);
    border: 1.5px solid var(--phosphor); box-shadow: 0 3px 0 var(--phosphor-dim);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
}
.cc-form__submit:hover {
    background: var(--caution); border-color: var(--caution);
    box-shadow: 0 5px 0 var(--caution-dim); transform: translateY(-2px);
}
.cc-form__status { font-family: var(--f-mono); font-size: 0.85rem; color: var(--bone-1); margin: 0.5rem 0 0; }
.cc-form__status.is-error { color: var(--threat); }
.cc-form__status.is-ok { color: var(--phosphor); }

@media (max-width: 640px) {
    .cc-intake__label { min-width: 0; flex-basis: 100%; }
}