/* ryanhcondon.com — the resume site.
   Same design language as rcmtg.com (warm paper, serif headings, one accent),
   deliberately a different site: this one is a CV, that one is the writing.
   Tokens below are lifted from rcmtg's assets/styles.css so the two stay in
   step; if you change a colour there, change it here. */

:root {
    --bg: #fbfaf8;
    --surface: #ffffff;
    --ink: #1c1a17;
    --ink-soft: #55504a;
    --ink-faint: #8b847c;
    --rule: #e6e1d9;
    --accent: #8a3324;
    --accent-soft: #f0e4e0;
    --gold: #7a5c1e;
    --gold-soft: #f5ecd8;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;

    /* 62rem is the page; 42rem is the reading measure for running prose. */
    --page: 62rem;
    --measure: 42rem;
    --radius: 10px;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #14130f; --surface: #1b1a16; --ink: #ece7dd; --ink-soft: #b3ab9e;
        --ink-faint: #837b6e; --rule: #2e2b25; --accent: #e0876f; --accent-soft: #2e211c;
        --gold: #d8b46a; --gold-soft: #2c2417;
    }
}
:root[data-theme="dark"] {
    --bg: #14130f; --surface: #1b1a16; --ink: #ece7dd; --ink-soft: #b3ab9e;
    --ink-faint: #837b6e; --rule: #2e2b25; --accent: #e0876f; --accent-soft: #2e211c;
    --gold: #d8b46a; --gold-soft: #2c2417;
}

/* ===========================
   Base
   =========================== */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration: none; }

h1, h2, h3, h4 {
    font-family: var(--serif);
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
    left: 1rem; top: 1rem; z-index: 10;
    background: var(--surface); padding: 0.6rem 1rem;
    border: 1px solid var(--rule); border-radius: 8px;
}

/* ===========================
   Chrome — header, nav, footer
   =========================== */
header.site {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    max-width: var(--page); margin: 0 auto; padding: 1.4rem 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.brand {
    font-family: var(--serif); font-size: 1.15rem; font-weight: 600;
    color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}

header.site nav { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.9rem; }
header.site nav a { color: var(--ink-soft); text-decoration: none; }
header.site nav a:hover { color: var(--accent); }
header.site nav a.nav-active { color: var(--ink); font-weight: 600; }

footer.site {
    max-width: var(--page); margin: 5rem auto 0; padding: 1.5rem;
    border-top: 1px solid var(--rule);
    color: var(--ink-faint); font-size: 0.85rem;
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
footer.site p { margin: 0; }
footer.site a { color: var(--ink-faint); }
footer.site a:hover { color: var(--accent); }

main { max-width: var(--page); margin: 0 auto; padding: 0 1.5rem; }

/* ===========================
   Hero
   =========================== */
.hero {
    display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;
    padding: 3.5rem 0 2.75rem;
    border-bottom: 1px solid var(--rule);
}

.hero-text { flex: 1 1 22rem; }

.hero-title {
    font-size: clamp(2.2rem, 6vw, 3.4rem);
    line-height: 1.05; letter-spacing: -0.02em;
    margin: 0 0 0.75rem;
}

.hero-subtitle {
    font-size: 1.15rem; color: var(--ink-soft);
    max-width: 34rem; margin: 0;
}

.headshot-container { flex: 0 0 auto; text-align: center; }

.hero-image-wrapper {
    width: 190px; height: 190px; margin: 0 auto;
    border-radius: 50%; overflow: hidden;
    border: 1px solid var(--rule); background: var(--surface);
}

.hero-image {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center 20%;
    display: block;
}
.hero-image-zoomed { object-position: center 15%; transform: scale(1.12); }

.headshot-caption {
    margin: 0.85rem 0 0.45rem;
    font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--ink-faint);
}

.headshot-toggle { display: flex; gap: 0.3rem; justify-content: center; }

.toggle-btn {
    font: inherit; font-size: 0.82rem;
    padding: 0.35rem 0.7rem; cursor: pointer;
    color: var(--ink-soft); background: var(--surface);
    border: 1px solid var(--rule); border-radius: 7px;
}
.toggle-btn:hover { color: var(--accent); }
.toggle-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

@media (max-width: 40rem) {
    .hero { gap: 1.75rem; padding-top: 2.5rem; }
    .headshot-container { width: 100%; }
}

/* ===========================
   Sections
   =========================== */
.section { padding: 3rem 0 0; }
.section + .section { border-top: 1px solid var(--rule); margin-top: 3rem; }
.section--intro { padding-bottom: 0.5rem; }
/* Kept so existing markup validates; the alternating bands are gone in favour
   of hairline rules, which is how rcmtg separates things. */
.section-alt { }

.container { max-width: var(--page); margin: 0 auto; }

.section-title {
    font-size: 1.35rem; font-weight: 600;
    margin: 0 0 1.25rem;
}

.section-content { max-width: none; }
.section-content--wide { max-width: none; }
/* About and Experience run the full page rather than sitting in a narrow
   column down the left. Longer lines want a little more leading to stay
   comfortable, hence the bump. */
#about .section-content p { line-height: 1.72; }

.section-content > p { margin: 0 0 1.2rem; color: var(--ink-soft); }
#about p { font-size: 1.02rem; }

.portfolio-intro {
    font-family: var(--serif);
    font-size: 1.3rem; line-height: 1.5;
    color: var(--ink-soft); max-width: 40rem; margin: 0;
}

.projects-intro { color: var(--ink-soft); font-size: 0.95rem; margin: 0 0 1.25rem; }

/* ===========================
   Experience
   =========================== */
.experience-item { padding: 0 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--rule); }
.experience-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.experience-header {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 0.2rem;
}

.experience-title { font-size: 1.1rem; font-weight: 600; }

.experience-date {
    font-size: 0.78rem; color: var(--ink-faint);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}

.experience-company {
    margin: 0 0 0.5rem;
    font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--accent); font-weight: 600;
}

.experience-list, .skill-list { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.experience-list li, .skill-list li {
    position: relative; padding-left: 1.1rem;
    margin: 0.4rem 0; font-size: 0.95rem; color: var(--ink-soft);
}
.experience-list li::before, .skill-list li::before {
    content: "\2022"; position: absolute; left: 0.1rem;
    color: var(--ink-faint);
}

.experience-sublist { list-style: none; padding: 0; margin: 0.4rem 0 0.6rem; }
.experience-sublist li { position: relative; padding-left: 1.1rem; margin: 0.3rem 0; font-size: 0.9rem; }
/* Hollow bullet marks the nested level. Text-coloured, not accent-coloured:
   an accent marker reads as a link that isn't there. */
.experience-sublist li::before { content: "\25E6"; position: absolute; left: 0.2rem; color: var(--ink-faint); font-weight: 700; }

/* ===========================
   Card grids

   Separate bordered cards rather than one ruled sheet. A sheet has to be
   filled to look right, and none of these counts fill one — 3 quotes and
   5 links leave gaps that read as "something is missing here". Discrete cards
   with a real gap have no slots to leave empty, and they make each card an
   obvious unit, so the link at the foot of one clearly belongs to it.
   =========================== */
.skills-grid, .testimonials-grid, .portfolio-grid {
    display: grid;
    gap: 1rem;
    margin: 0;
}

.skills-grid { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.portfolio-grid { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.projects-grid { grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); }

/* Three quotes: one row of three, or a single stack. Never two columns —
   that is what left a fourth, empty slot looking like a missing testimonial. */
.testimonials-grid { grid-template-columns: 1fr; }
@media (min-width: 58rem) {
    .testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Five links divide into no tidy grid, so let them flow: whatever lands on the
   last row stretches to fill the width instead of leaving holes. */
.links-grid { display: flex; flex-wrap: wrap; gap: 1rem; }
.links-grid > * { flex: 1 1 13rem; }

.skill-category, .testimonial-card, .link-card, .portfolio-card {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: 1.35rem;
    display: flex; flex-direction: column;
}

.skill-category-title, .portfolio-card-title, .link-card h3 {
    font-size: 1.08rem; font-weight: 600; margin: 0;
}

/* ---- testimonials ---- */
.testimonial-quote {
    font-family: var(--serif); font-size: 1rem; line-height: 1.6;
    color: var(--ink-soft); font-style: italic;
    margin: 0 0 1.25rem;
    padding-left: 1rem; border-left: 3px solid var(--accent);
}

.testimonial-author { display: flex; align-items: center; gap: 0.75rem; margin-top: auto; }
.author-photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 1px solid var(--rule); }
.author-info p { margin: 0; }
.author-name { font-size: 0.92rem; font-weight: 600; }
.author-name a { color: var(--ink); text-decoration: none; }
.author-name a:hover { color: var(--accent); }
.author-title { font-size: 0.8rem; color: var(--ink-faint); }

/* ---- connect ---- */
.link-card { gap: 0.35rem; text-decoration: none; color: inherit; }
a.link-card:hover h3 { color: var(--accent); }
.link-card p { margin: 0; font-size: 0.88rem; color: var(--ink-soft); }
.link-card-highlighted { background: var(--accent-soft); }
.link-note { font-size: 0.75rem !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint) !important; }

/* ---- portfolio cards ---- */
.portfolio-card-body { display: flex; flex-direction: column; }

.portfolio-tag {
    margin: 0 0 0.5rem;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
    color: var(--accent); background: var(--accent-soft);
    align-self: flex-start; padding: 0.15rem 0.5rem; border-radius: 3px;
}

.project-card .portfolio-tag { color: var(--gold); background: var(--gold-soft); }

.portfolio-card-desc {
    margin: 0.5rem 0 0;
    font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft);
}

.project-tools { list-style: none; padding: 0; margin: 0.9rem 0 0; }
.project-tools li {
    position: relative; padding-left: 1.1rem; margin: 0.35rem 0;
    font-size: 0.88rem; color: var(--ink-soft);
}
.project-tools li::before { content: "\2022"; position: absolute; left: 0.1rem; color: var(--ink-faint); }
.project-tools strong { color: var(--ink); font-weight: 650; }

.project-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 1rem 0 0; }
.project-chips li {
    font-size: 0.72rem; font-weight: 600; color: var(--ink-soft);
    background: var(--bg); border: 1px solid var(--rule);
    border-radius: 999px; padding: 0.15rem 0.6rem;
}

/* No rule above this and no pinning to the card's foot: a full-width line
   across the bottom of the card made the link read as its own row, floating
   between two cards rather than belonging to the article above it. It now
   sits directly under the description it goes with. */
.portfolio-link {
    align-self: flex-start;
    margin-top: 1.1rem;
    padding: 0.35rem 0.7rem;
    background: var(--accent-soft);
    border-radius: 7px;
    font-size: 0.88rem; font-weight: 600; text-decoration: none;
}
.portfolio-link:hover { background: var(--accent); color: var(--bg); }
.portfolio-link--muted {
    color: var(--ink-faint); font-weight: 500;
    background: none; padding-left: 0; padding-right: 0;
}

/* The whole card responds, so it is obvious which link goes with which
   article. Only cards that actually have a link — PT Hub has none, and should
   not pretend otherwise. */
.portfolio-card:has(a.portfolio-link):hover { border-color: var(--accent); }
.portfolio-card:has(a.portfolio-link):hover .portfolio-card-title { color: var(--accent); }

/* ===========================
   Utility
   =========================== */
.more { margin: 1.5rem 0 0; }
.more a { font-weight: 600; font-size: 0.92rem; text-decoration: none; }
.more a:hover { text-decoration: underline; }