/****************************************************************************
Profile page styles for grave development.
Shares the portal's design system (teal + gold/brown on warm ivory, square
corners, mono wordmark). Tokens are duplicated from the portal for now; if the
two pages end up in separate repos, see proposal Open Decision 5 on sharing
the token layer to avoid drift.
****************************************************************************/

:root {
    /* Surfaces */
    --bg-page: #FBF8F1;
    --bg-surface: #FFFFFF;

    /* Text */
    --text-strong: #2C1A06;
    --text-body: #6B5A44;
    --text-muted: #9C8A6E;

    /* Accents */
    --teal: #0F6E56;
    --teal-tint: #E1F5EE;
    --gold: #BA7517;
    --gold-strong: #854F0B;
    --gold-tint: #FAEEDA;
    --brown-deep: #412402;

    /* Borders */
    --border: #E8DFCD;

    /* Shape */
    --radius: 0px;
    --radius-pill: 2px;

    /* Type */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

    /* Layout */
    --content-width: 760px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--bg-page);
    color: var(--text-body);
    font-family: var(--font-sans);
    line-height: 1.7;
    font-size: 16px;
}

a {
    color: inherit;
    text-decoration: none;
}

h1,
h2,
p,
ul,
ol {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

.page {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 32px 24px 48px;
}

/* Header (shared with portal) */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 48px;
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 500;
    color: var(--brown-deep);
    letter-spacing: -0.01em;
}

.wordmark__icon {
    width: 20px;
    height: 20px;
    color: var(--teal);
}

.wordmark__accent {
    color: var(--teal);
}

.site-nav {
    font-size: 13px;
    color: var(--gold-strong);
}

.site-nav a:hover {
    color: var(--teal);
}

/* Hero */

.hero {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 44px;
}

.hero__photo {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 2px solid var(--teal);
    border-radius: var(--radius);
    flex-shrink: 0;
}

.hero__name {
    font-size: 28px;
    font-weight: 500;
    color: var(--text-strong);
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}

.hero__role {
    font-size: 15px;
    color: var(--teal);
    font-weight: 500;
    margin-bottom: 12px;
}

.social {
    display: flex;
    gap: 14px;
}

.social a {
    color: var(--gold-strong);
    display: inline-flex;
}

.social a:hover {
    color: var(--teal);
}

.social svg {
    width: 19px;
    height: 19px;
}

/* Content blocks */

.block {
    margin-bottom: 40px;
}

.block__heading {
    font-size: 13px;
    font-weight: 500;
    color: var(--gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 0.5px solid var(--border);
}

.block p + p {
    margin-top: 14px;
}

.block p {
    max-width: 68ch;
}

/* Skills */

.skills {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.skills__label {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag {
    font-size: 13px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
}

.tag--teal {
    color: var(--teal);
    background: var(--teal-tint);
}

.tag--gold {
    color: var(--gold-strong);
    background: var(--gold-tint);
}

.tag--soft span {
    opacity: 0.7;
    font-size: 12px;
}

/* Timeline */

.timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.timeline__item {
    padding-left: 16px;
    border-left: 2px solid var(--gold);
}

.timeline__role {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-strong);
    margin-bottom: 4px;
}

.timeline__detail {
    font-size: 14px;
    max-width: 64ch;
}

/* Footer */

.site-footer {
    margin-top: 40px;
    padding-top: 18px;
    border-top: 0.5px solid var(--border);
}

.copyright {
    font-size: 12px;
    color: var(--text-muted);
}

/* Small screens */

@media (max-width: 480px) {
    .hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .hero__name {
        font-size: 25px;
    }
}