/* =========================================================
   resume.css — the HTML resume at /resume/.
   Depends on site.css (tokens, nav, buttons, footer).
   Real selectable text, so it can be searched, copied and
   parsed by an applicant tracking system.
   ========================================================= */

.cv { padding: 9rem var(--gutter) 4rem; }
.cv .section-inner { max-width: 820px; }

/* ---------- HEADER ---------- */
.cv-head {
    display: grid; grid-template-columns: 1fr auto;
    gap: 2rem; align-items: end;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid var(--stone-mid);
}
.cv-eyebrow {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--terracotta); margin-bottom: 0.75rem;
}
.cv-head h1 {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-weight: 400; line-height: 1.05;
    letter-spacing: -0.03em; margin-bottom: 0.4rem;
}
.cv-tagline {
    font-family: var(--font-serif);
    font-size: clamp(1.05rem, 2.4vw, 1.35rem);
    font-style: italic; color: var(--terracotta);
}
.cv-contact {
    text-align: right; font-size: 0.88rem; line-height: 1.75;
    color: var(--text-secondary);
}
.cv-contact a { color: var(--text-secondary); text-decoration: none; }
.cv-contact a:hover { color: var(--terracotta); }

.cv-summary {
    font-size: 1.08rem; line-height: 1.75;
    color: var(--text-secondary);
    margin: 2rem 0 0;
}

.cv-actions { margin-top: 1.75rem; display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
/* The button row is a page affordance, not a resume section, so it should
   sit closer to Experience than two sections sit to each other. */
.cv-actions + .cv-section { margin-top: 3rem; }

/* ---------- SECTIONS ---------- */
/* site.css gives every `section` 6rem of band padding for the page bands.
   These are resume sections inside one band, not bands of their own, so the
   padding has to go - it was adding 6rem above and below each heading and
   was the real reason the spacing read as holes. Spacing is margin only. */
.cv-section { margin-top: 3.5rem; padding: 0; }
.cv-section--tight { margin-top: 2.6rem; }
.cv-section > h2 {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--terracotta);
    margin-bottom: 1.5rem;
}

/* ---------- ROLES ---------- */
.cv-role { margin-bottom: 2.75rem; }
.cv-role:last-child { margin-bottom: 0; }
/* Each of the three label paragraphs below is a direct child of `.cv-role`,
   so the `.cv-role > p` body rule (0,1,1) outranked a bare class (0,1,0) and
   silently overrode size, colour and top margin - the dates were rendering
   at full body size. Naming the parent puts each label back in front. */
.cv-when,
.cv-role > .cv-when {
    font-size: 0.68rem; font-weight: 500; line-height: 1.4;
    letter-spacing: 0.13em; text-transform: uppercase;
    color: var(--text-light); margin: 0 0 0.3rem;
}
.cv-role h3 {
    font-family: var(--font-serif);
    font-size: 1.6rem; font-weight: 400;
    letter-spacing: -0.02em; line-height: 1.2;
}
.cv-title,
.cv-role > .cv-title { font-size: 0.98rem; font-weight: 600; line-height: 1.5;
    color: var(--text-primary); margin-top: 0.15rem; }
.cv-scope,
.cv-role > .cv-scope { font-size: 0.85rem; line-height: 1.55;
    color: var(--text-light); margin-top: 0.2rem; }
.cv-role > p {
    font-size: 1rem; line-height: 1.7;
    color: var(--text-secondary); margin-top: 0.85rem;
}
.cv-role ul { margin: 1rem 0 0; padding: 0; list-style: none; }
.cv-role li {
    position: relative; padding-left: 1.2rem;
    font-size: 1rem; line-height: 1.7;
    color: var(--text-secondary); margin-bottom: 0.8rem;
}
.cv-role li::before {
    content: '·'; position: absolute; left: 0.2rem; top: -0.1rem;
    color: var(--terracotta); font-size: 1.3rem; line-height: 1.4;
}

/* a compact role — one line, no bullets */
.cv-role--brief h3 { font-size: 1.25rem; display: inline; }
.cv-role--brief h3 ~ p { display: inline; margin-top: 0; }
.cv-role--brief .cv-inline-title { font-weight: 600; color: var(--text-primary); }

/* ---------- SELECTED WORK ---------- */
.cv-selected {
    margin-top: 3rem; padding: 1.4rem 1.6rem;
    background: var(--stone); border-radius: var(--radius);
}
.cv-selected h2 {
    font-size: 0.7rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--terracotta); margin-bottom: 0.6rem;
}
.cv-selected p { font-size: 0.95rem; line-height: 1.8; color: var(--text-secondary); }
.cv-selected a { color: var(--terracotta); text-decoration: none; }
.cv-selected a:hover { text-decoration: underline; }

/* ---------- CAPABILITIES + FOOTER PAIR ---------- */
/* No column gap: the row rule is drawn by each cell's own border-top, and a
   gap would break it into two segments. The term column gets the separation
   as padding instead, so the rule runs full width as it does in the PDF. */
.cv-caps { display: grid; grid-template-columns: 170px 1fr; gap: 0; }
.cv-caps dt {
    font-family: var(--font-serif);
    font-size: 1.05rem; color: var(--text-primary);
    padding: 0.9rem 2rem 0.9rem 0;
}
.cv-caps dd {
    margin: 0; padding: 0.9rem 0;
    font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary);
}
.cv-caps dt + dd { border-top: 1px solid var(--stone-mid); }
.cv-caps dt { border-top: 1px solid var(--stone-mid); }
.cv-caps dt:first-of-type, .cv-caps dt:first-of-type + dd { border-top: 0; }

.cv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.cv-pair h2 {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--terracotta); margin-bottom: 0.55rem;
}
.cv-pair p { font-size: 0.95rem; line-height: 1.7; color: var(--text-secondary); }
.cv-pair strong { color: var(--text-primary); font-weight: 600; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
    .cv { padding: 7rem var(--gutter-mobile) 3rem; }
    .cv-head { grid-template-columns: 1fr; gap: 1.25rem; align-items: start; }
    .cv-contact { text-align: left; }
    .cv-caps { grid-template-columns: 1fr; gap: 0; }
    .cv-caps dt { padding: 0 0 0.2rem; }
    .cv-caps dd { padding-top: 0; border-top: 0; }
    .cv-caps dt + dd { border-top: 0; }
    .cv-pair { grid-template-columns: 1fr; gap: 1.75rem; }
}

/* ---------- PRINT ---------- */
/* so the page itself prints as a usable resume, not just the PDF */
@media print {
    nav, footer, .cv-actions, .skip-link { display: none !important; }
    .cv { padding: 0; }
    .cv .section-inner { max-width: none; }
    body { background: #fff; }
    .cv-role, .cv-section { break-inside: avoid; }
}