/* ─────────────────────────────────────────────────────────────
   People — team cards (/team) and personal card pages (/qr/*.html).
   Load after /assets/stylesheets/styles.css (and sections.css on /team).

   <article class="person" id="mike">
     <img class="person-portrait" …>          tall illustrated strip
     <div class="person-body">
       <h3 class="person-name">…</h3>
       <p class="person-role">…</p>
       <blockquote class="person-quote"><p>…</p></blockquote>
       <p class="person-bio">…</p>
       <ul class="person-skills">…</ul>
       <ul class="person-links">…</ul>
     </div>
   </article>
   ───────────────────────────────────────────────────────────── */

html.team,
html.person-page {
    --p-accent: var(--color-grey-dark);
    --p-accent-ink: var(--color-white);
    --p-line: rgba(var(--rgb-grey-dark), 0.12);
    --p-paper: #fbf8f1;
    --sec-accent: var(--p-accent);
    --sec-accent-ink: var(--p-accent-ink);
}

/* Per-person accents, pulled from each portrait */
.person--mike    { --p-accent: #243f73; }
.person--richard { --p-accent: #3b3f4f; }
.person--tahnee  { --p-accent: #7a3b22; }
.person--julian  { --p-accent: #1f5a55; }
html.person-page.person--mike    { --p-accent: #243f73; }
html.person-page.person--richard { --p-accent: #3b3f4f; }
html.person-page.person--tahnee  { --p-accent: #7a3b22; }

/* ── Card ─────────────────────────────────────────────────── */
.person {
    display: grid;
    grid-template-columns: 5.2em minmax(0, 1fr);
    gap: 1.1em;
    align-items: start;
    margin: 0;
    padding: 1em;
    background: var(--color-white);
    border: 1px solid var(--p-line);
    border-top: 3px solid var(--p-accent);
    border-radius: 0.4em;
}

.person img.person-portrait,
.person .person-portrait {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 3;
    object-fit: cover;
    border-radius: 0.35em;
    background: var(--color-grey-lighter);
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.06), 0 0.5em 1.4em -0.8em rgba(var(--rgb-black), 0.5);
}

/* No portrait yet: an initials strip in the same shape */
.person .person-portrait--initials {
    display: grid;
    place-items: center;
    background: var(--p-accent) !important;
    color: var(--p-accent-ink);
    font-family: var(--font-family);
    font-size: 1.1em;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.person-body > * + * { margin-top: 0.55em; }

.person-name {
    font-family: var(--font-family);
    font-size: 0.95em;
    font-weight: 800;
    line-height: 1.15;
}

.person-role {
    font-family: var(--font-family);
    font-size: 0.5em !important;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-accent);
    margin-top: 0.35em !important;
}

.person-quote {
    margin: 0.8em 0 0;
    padding: 0;
    border: 0;
}

.person-quote p {
    font-family: var(--font-family-serif);
    font-size: 0.72em;
    font-style: italic;
    line-height: 1.4;
}

.person-quote p::before { content: "\201C"; }
.person-quote p::after  { content: "\201D"; }

.person-bio {
    font-size: 0.66em;
    line-height: 1.5;
}

.person-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35em;
    margin: 0.8em 0 0;
    padding: 0;
    list-style: none;
}

.person-skills li {
    padding: 0.3em 0.75em;
    border: 1px solid var(--p-line);
    border-radius: 999px;
    background: rgba(var(--rgb-grey-dark), 0.04);
    font-family: var(--font-family);
    font-size: 0.45em;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
}

.person-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1em;
    margin: 0.9em 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--font-family);
    font-size: 0.56em;
}

.person-links a { color: var(--p-accent); font-weight: 700; }

.person a:focus-visible,
.person-page a:focus-visible {
    outline: 3px solid var(--p-accent);
    outline-offset: 3px;
}

/* Section label on /team (an h2 styled as an eyebrow) */
html.team h2.sec-eyebrow {
    font-size: 0.55em;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.8em;
}

/* ── /team grid ───────────────────────────────────────────── */
.team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1em;
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 48em) {
    .team-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 64em) {
    html.team .product-body { margin-right: 0; }
}

@media (max-width: 26em) {
    .person { grid-template-columns: 4.2em minmax(0, 1fr); gap: 0.9em; padding: 0.9em; }
}

/* ── Personal card pages (/qr/*.html) — no site nav, one column ── */
html.person-page body {
    min-height: 100vh;
    background: var(--color-grey-lighter, #f3f3f3);
}

.person-sheet {
    width: min(100% - 2em, 30em);
    margin: 0 auto;
    padding: 2.2em 0 2em;
}

.person-sheet > * + * { margin-top: 1.6em; }

.person-hero {
    display: grid;
    grid-template-columns: 6.4em minmax(0, 1fr);
    gap: 1.1em;
    align-items: end;
}

.person-hero img.person-portrait {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 3;
    object-fit: cover;
    border-radius: 0.4em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.06), 0 0.8em 2em -1.2em rgba(var(--rgb-black), 0.55);
    transform: rotate(-1.5deg);
}

.person-hero .person-name { font-size: 1.35em; }
.person-hero .person-role { font-size: 0.55em !important; }

.person-hero .person-quote {
    padding: 0.8em 0.9em;
    background: var(--p-paper);
    border-radius: 0.25em;
    box-shadow: 0 0 0 1px rgba(var(--rgb-black), 0.06), 0 0.5em 1.6em -1em rgba(var(--rgb-black), 0.35);
    transform: rotate(0.6deg);
}

.person-sheet h2 {
    font-family: var(--font-family);
    font-size: 0.55em;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-accent);
}

.person-sheet h2 + * { margin-top: 0.6em; }

.person-list {
    margin: 0;
    padding: 0 0 0 1.1em;
    list-style: disc;
    font-size: 0.7em;
    line-height: 1.5;
}

.person-list li + li { margin-top: 0.3em; }

.person-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em 1.1em;
}

.person-cta .cta-button {
    display: inline-block;
    margin: 0;
    padding: 0.55em 1.2em;
    border: 2px solid var(--p-accent);
    border-radius: 0.3em;
    background: var(--p-accent);
    color: var(--p-accent-ink);
    font-family: var(--font-family);
    font-size: 0.68em;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.person-cta .cta-button:hover,
.person-cta .cta-button:focus-visible {
    background: transparent;
    color: var(--p-accent);
}

.person-cta a:not(.cta-button) {
    font-family: var(--font-family);
    font-size: 0.62em;
    color: var(--p-accent);
}

.person-worlds {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--p-line);
}

.person-worlds li { border-bottom: 1px solid var(--p-line); }

.person-worlds a {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding: 0.7em 0.1em;
    text-decoration: none;
}

.person-worlds a:hover strong,
.person-worlds a:focus-visible strong { text-decoration: underline; }

.person-worlds strong {
    font-family: var(--font-family);
    font-size: 0.66em;
    color: var(--color-grey-dark);
}

.person-worlds span {
    font-family: var(--font-family);
    font-size: 0.45em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--p-accent);
}

.person-sign {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding-top: 1em;
    border-top: 1px solid var(--p-line);
    font-family: var(--font-family);
    font-size: 0.5em;
    color: var(--color-grey);
}

.person-sign img {
    display: block;
    width: 4.5em;
    height: auto;
    max-height: none;
}

.person-sign a { color: inherit; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
    .person-hero img.person-portrait,
    .person-hero .person-quote { transform: none; }
}