/* =============================================================
   home.css — editorial homepage
   -------------------------------------------------------------
   Depends on primitives in global.css (eyebrow, edi-h1/h2,
   section-head, repos-grid, offerings-new, timeline,
   status-bar, topbar-editorial). This file only adds page-level
   layout and a couple homepage-specific components (hero-card,
   essays-row, contact-form wrapper).
   ============================================================= */

/* --- Overrides for editorial body on homepage --- */
body.edi { padding: 0; }

/* --- Utilities --- */
.mt-sm { margin-top: 2.4rem; }
.mt-md { margin-top: 2.8rem; }
.inline-underline {
    border-bottom: 1px solid var(--color-rule-strong);
    transition: border-color .2s ease, color .2s ease;
}
.inline-underline:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* =============================================================
   HERO
   ============================================================= */
.hero { padding: 8rem 0 12rem; border-bottom: 1px solid var(--color-rule); }
.hero-grid {
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 8rem;
    align-items: start;
}
.hero-main .eyebrow { display: block; margin-bottom: 3.2rem; }
.hero-main .edi-h1 { margin-bottom: 4rem; }
.hero-lede {
    font-size: 1.9rem; line-height: 1.5; color: var(--color-ink-2);
    max-width: 56ch; margin-bottom: 3.6rem;
}
.hero-cta { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 5.6rem; }
.hero-meta {
    display: grid; grid-template-columns: repeat(4, auto);
    gap: 2.4rem 4.8rem; padding-top: 3.2rem;
    border-top: 1px solid var(--color-rule-strong);
    max-width: 82rem;
}
.hero-meta .authored-line { display: flex; align-items: center; gap: 1.2rem; }
.book-cover-thumb {
    width: 3.4rem; height: auto; border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25); flex-shrink: 0;
}
.hero-meta dt {
    font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.12em;
    color: var(--color-ink-3); text-transform: uppercase; margin-bottom: 0.6rem;
}
.hero-meta dd { font-size: 1.4rem; color: var(--color-ink); font-weight: 500; }

/* Hero field-note card */
.hero-side { position: sticky; top: 10rem; }
.hero-card {
    background: var(--color-ink); color: var(--color-paper);
    padding: 4rem 3.2rem 3.2rem;
    border-radius: var(--radius-sharp);
    position: relative;
}
.hero-card-label {
    font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.18em;
    color: #8A8274; margin: 0 0 2rem; text-transform: uppercase;
}
.hero-card-body {
    font-family: var(--font-serif); font-weight: 400;
    font-size: 2.2rem; line-height: 1.25; letter-spacing: -0.01em;
    color: var(--color-paper); margin: 0 0 2.8rem;
}
.hero-card-sig {
    font-family: var(--font-mono); font-size: 1.1rem;
    letter-spacing: 0.1em; color: #8A8274; margin: 0;
    padding-top: 2rem; border-top: 1px solid #2A2721;
}

@media (max-width: 1024px) {
    .hero-grid { grid-template-columns: 1fr; gap: 5.6rem; }
    .hero-side { position: static; }
}
@media (max-width: 640px) {
    .hero { padding: 5.6rem 0 8rem; }
    .hero-main .edi-h1 { margin-bottom: 2.8rem; }
    .hero-meta { grid-template-columns: 1fr 1fr; gap: 2rem 2.4rem; }
}

/* =============================================================
   OFFERINGS — page-specific tweaks
   ============================================================= */
.offerings-section { background: var(--color-paper); }

/* =============================================================
   TRACK RECORD
   ============================================================= */
.track-section { background: var(--color-paper); }

/* =============================================================
   WRITING / OPEN SOURCE
   ============================================================= */
.writing-section { background: var(--color-paper-2); }

.essays-row {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 3.2rem;
    padding: 2.8rem;
    border-left: 1px solid var(--color-rule);
    border-right: 1px solid var(--color-rule);
    border-bottom: 1px solid var(--color-rule-strong);
    transition: background .2s ease;
    color: var(--color-ink);
}
.essays-row:hover { background: var(--color-paper); text-decoration: none; }
.essays-tag {
    font-family: var(--font-mono); font-size: 1.2rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--color-accent);
}
.essays-h {
    font-family: var(--font-serif); font-size: 2.6rem;
    letter-spacing: -0.015em; line-height: 1.1; color: var(--color-ink);
}
.essays-h .it { font-style: italic; color: var(--color-accent); }
.essays-sub {
    margin-top: 0.6rem; font-size: 1.35rem; color: var(--color-ink-2);
}
.essays-url {
    font-family: var(--font-mono); font-size: 1.2rem;
    color: var(--color-ink-3); letter-spacing: 0.06em;
}
@media (max-width: 640px) {
    .essays-row { grid-template-columns: 1fr; gap: 1.6rem; }
    .essays-url { display: none; }
}

/* =============================================================
   CONTACT
   ============================================================= */
.contact-section { background: var(--color-paper); border-bottom: 0; }
.contact-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8rem;
    align-items: start;
}
.contact-meta {
    display: grid; grid-template-columns: repeat(3, auto);
    gap: 2.4rem 4.8rem; margin-top: 4rem; padding-top: 3.2rem;
    border-top: 1px solid var(--color-rule-strong);
}
.contact-meta dt {
    font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.12em;
    color: var(--color-ink-3); text-transform: uppercase; margin-bottom: 0.6rem;
}
.contact-meta dd { font-size: 1.4rem; color: var(--color-ink); font-weight: 500; }

/* Restyle the real <contact-form> component with editorial chrome */
.contact-form-wrap {
    border: 1px solid var(--color-rule-strong);
    border-radius: var(--radius-sharp);
    padding: 3.2rem;
    background: var(--color-paper-2);
}
.contact-form-wrap contact-form { display: block; }
.contact-form-wrap label {
    display: block;
    font-family: var(--font-mono); font-size: 1.1rem; letter-spacing: 0.12em;
    color: var(--color-ink-3); text-transform: uppercase; margin-bottom: 0.8rem;
}
.contact-form-wrap input[type="text"],
.contact-form-wrap input[type="email"],
.contact-form-wrap input[type="tel"],
.contact-form-wrap textarea,
.contact-form-wrap select {
    width: 100%;
    background: var(--color-paper);
    border: 1px solid var(--color-rule-strong);
    border-bottom: 2px solid var(--color-ink);
    border-radius: 0;
    padding: 1.2rem 1.4rem;
    font-family: var(--font-sans); font-size: 1.5rem; color: var(--color-ink);
    margin-bottom: 2.4rem;
    transition: border-color .2s ease, background .2s ease;
}
.contact-form-wrap textarea { min-height: 12rem; resize: vertical; }
.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus,
.contact-form-wrap select:focus {
    outline: 0; border-bottom-color: var(--color-accent); background: var(--color-white);
}
.contact-form-wrap button[type="submit"] {
    display: inline-flex; align-items: center; gap: 1rem;
    padding: 1.4rem 2.2rem;
    font-family: var(--font-sans); font-size: 1.4rem; font-weight: 600;
    background: var(--color-ink); color: var(--color-paper);
    border: 0; border-radius: var(--radius-sharp); cursor: pointer;
    transition: background .2s ease;
}
.contact-form-wrap button[type="submit"]:hover { background: var(--color-accent); }

@media (max-width: 1024px) {
    .contact-grid { grid-template-columns: 1fr; gap: 4.8rem; }
    .contact-meta { grid-template-columns: 1fr 1fr; gap: 2rem 2.4rem; }
}

/* =============================================================
   TOPBAR (editorial header override)
   -------------------------------------------------------------
   The <site-header> component renders default markup; we restyle
   it in place via the `.edi` body scope defined in global.css.
   No JS change required for the homepage.
   ============================================================= */
body.edi site-header { display: block; border-bottom: 1px solid var(--color-rule); }
body.edi .site-header-inner {
    max-width: var(--edi-max); margin: 0 auto;
    padding: 0 var(--edi-gutter);
    display: flex; align-items: center; justify-content: space-between;
    height: 7.2rem;
}
/* Editorial site-nav and logo styles moved to global.css so they apply on every page. */

/* =============================================================
   PILLARS STRIP — four pillars between hero and offerings
   ============================================================= */
.pillars-strip {
    padding: 4.8rem 0;
    border-bottom: 1px solid var(--color-rule);
    background: var(--color-paper);
}
.pillars-grid {
    display: grid; grid-template-columns: auto repeat(4, 1fr);
    gap: 3.2rem; align-items: start;
}
.pillars-grid > .eyebrow { padding-top: 0.3rem; }
.pillar h4 {
    font-family: var(--font-mono); font-size: 1.15rem;
    letter-spacing: 0.08em; color: var(--color-ink);
    text-transform: uppercase; margin: 0 0 1rem; font-weight: 600;
}
.pillar p {
    font-size: 1.45rem; line-height: 1.5; color: var(--color-ink-2);
    margin: 0;
}
@media (max-width: 1024px) {
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .pillars-grid > .eyebrow { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .pillars-grid { grid-template-columns: 1fr; }
}

/* ---------- Ways to work together: qualifying note ---------- */
.ways-note {
    border-left: 2px solid var(--color-accent);
    padding: 2.4rem 0 2.4rem 3.2rem;
    margin-top: 4rem;
}
.ways-note p {
    font-size: 1.5rem; line-height: 1.65; color: var(--color-ink-2);
    max-width: 88ch; margin: 0;
}
.ways-note strong { color: var(--color-ink); }
@media (max-width: 640px) {
    .ways-note { padding-left: 2rem; margin-top: 3.2rem; }
}

/* Two-offering row: cards split the 12-col grid in half instead of thirds. */
.offerings-new.cols-2 .offering-new { grid-column: span 6; }
@media (max-width: 1024px) {
    .offerings-new.cols-2 .offering-new { grid-column: span 12; }
}

/* ---------- Sample artifact page: PDF page images ---------- */
.doc-actions {
    display: flex; align-items: center; gap: 2.4rem; flex-wrap: wrap;
    margin-bottom: 4rem;
}
.doc-meta {
    font-family: var(--font-mono); font-size: 1.2rem;
    letter-spacing: 0.06em; color: var(--color-ink-3);
}
.doc-pages {
    display: grid; grid-template-columns: 1fr; gap: 3.2rem;
    max-width: 90rem; margin: 0 auto;
}
/* Page images carry their own margins from the PDF, so they sit on a tinted
   field with a hairline rather than inside a padded card. */
.doc-pages img {
    display: block; width: 100%; height: auto;
    border: 1px solid var(--color-rule);
    box-shadow: var(--shadow-base);
    background: var(--color-white);
}
.doc-back { margin-top: 4rem; font-size: 1.5rem; }
@media (max-width: 640px) {
    .doc-pages { gap: 2rem; }
    .doc-actions { gap: 1.6rem; margin-bottom: 3.2rem; }
}

/* ---------- Ruled row lists: Questions (FAQ) and the CISO threat register ---------- */
.faq-list,
.threat-list {
    display: grid;
    grid-template-columns: 1fr;
    border-top: 1px solid var(--color-rule-strong);
}
.faq-item,
.threat-item {
    padding: 3.2rem 0;
    border-bottom: 1px solid var(--color-rule);
    scroll-margin-top: 9.6rem;
}
.faq-item:last-child,
.threat-item:last-child { border-bottom: 1px solid var(--color-rule-strong); }
.faq-item h3,
.threat-item h3 {
    font-family: var(--font-serif); font-weight: 400;
    font-size: clamp(2.2rem, 2.4vw, 2.8rem);
    line-height: 1.15; letter-spacing: -0.015em; color: var(--color-ink);
    margin: 0 0 1.2rem;
}
.faq-item p,
.threat-item p {
    font-size: 1.5rem; line-height: 1.65; color: var(--color-ink-2);
    max-width: 88ch; margin: 0;
}
.faq-item strong,
.threat-item strong { color: var(--color-ink); }
@media (max-width: 640px) {
    .faq-item,
    .threat-item { padding: 2.4rem 0; }
}