/* portfolio.css · Emir. My page sheet.

   Shared tokens/chrome come from ../../css/*, this file is only the
   film-frame stuff. No page JS: toggle + burger are the shared
   theme.js / main.js.

   Small accent text uses --accent-text, not raw --accent (4.34:1 on
   paper, fails AA · tokens.css explains). Skill bars are CSS-only
   .lvl-* classes, no JS widths. */

/* ---------- page-only tokens ----------
   sprocket strip + holes (group palette doesn't have these),
   plus the card-lift curve. everything else reads group tokens */
:root {
    --strip: #2b241c;         /* film strip stock */
    --hole: #f4eee1;          /* sprocket holes = paper showing through */
    --ease: cubic-bezier(.22, .61, .36, 1);
}
[data-theme="dark"] {
    --strip: #060608;
    --hole: #0e0e11;
}

/* anchored jumps (01A-05A) land clear of the sticky header */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 76px;
}

/* lining figures: digits stay cap-height in headings */
h1, h2, h3 { font-variant-numeric: lining-nums; }

/* ---------- hero (grid: text + print columns) ---------- */
.hero {
    padding: 72px 0 40px;
    display: grid; grid-template-columns: 1fr 320px;
    gap: 24px 48px; align-items: start;
}
.hero-text, .hero-rest { grid-column: 1; }
.hero h1 {
    margin: 0;
    font-size: clamp(3rem, 9vw, 6rem);
    line-height: 1.02; letter-spacing: -.01em;
}
/* portrait = developed print: paper border, slight tilt */
.hero-print {
    grid-column: 2; grid-row: 1 / span 2;
    margin: 0;
    background: var(--surface);
    border: 1px solid var(--hairline);
    padding: 8px 8px 10px;
    transform: rotate(1deg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .15);
}
.hero-print img { display: block; width: 100%; height: auto; }
.hero-print figcaption {
    font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    margin-top: 10px; text-align: center;
}
/* 00A matches the leader numbers' accent */
.hero-print .frame-no { color: var(--accent-text); }
.kicker {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em;
    text-transform: uppercase; color: var(--accent-text); margin: 0 0 18px;
}
.hero .role {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.15rem, 3vw, 1.65rem); color: var(--muted);
    margin: 10px 0 0;
}
.hero .bio { max-width: 58ch; margin: 22px 0 0; }
.edge-code {
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); margin: 26px 0 0;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* ---------- film leader divider ---------- */
.leader { margin: 36px 0 8px; }
.sprocket-row {
    height: 22px; background: var(--strip);
    background-image: radial-gradient(circle, var(--hole) 3px, transparent 3.6px);
    background-size: 26px 22px; background-position: center center;
    background-repeat: repeat-x;
}
.frame-numbers {
    background: var(--strip);
    font-family: var(--font-mono); font-size: .68rem; letter-spacing: .5em;
    display: flex; justify-content: space-around; padding: 7px 0;
}
.frame-numbers a {
    color: var(--accent-text);
    padding: 4px 8px; /* widens the tap target for phone screens */
    transition: color var(--transition);
}
.frame-numbers a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ---------- section heads ---------- */
.section { padding: 44px 0 8px; }
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.sec-index { font-family: var(--font-mono); font-size: .8rem; color: var(--accent-text); }
.sec-head h2 { margin: 0; font-size: 1.9rem; }
.sec-rule { flex: 1; height: 1px; background: var(--hairline); }

/* ---------- film frame entries (grid: sprocket col + body) ---------- */
.frame {
    display: grid; grid-template-columns: 26px 1fr;
    background: var(--surface); border: 1px solid var(--hairline);
    margin-bottom: 20px;
    transition: transform .25s var(--ease), border-color .25s;
}
/* same hover lift as the project cards */
.frame:hover { transform: translateY(-3px); border-color: var(--accent); }
.sprocket-col {
    background: var(--strip);
    background-image: radial-gradient(circle, var(--hole) 3px, transparent 3.6px);
    background-size: 26px 26px; background-position: center center;
    background-repeat: repeat-y;
}
.frame-body { padding: 24px 28px; }
/* frame rhythm sets its own gaps; kill the base.css p/h3 margins */
.frame-body p, .frame-body h3 { margin: 0; }
.frame-top {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap;
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.badge {
    color: var(--accent-text); border: 1px solid var(--accent);
    padding: 3px 10px; border-radius: var(--radius-pill);
    font-size: .62rem; letter-spacing: .12em;
}
.muted-badge { color: var(--muted); border-color: var(--hairline); }
.frame-body h3 { font-size: 1.35rem; line-height: 1.25; }
.frame-body h3 a { color: var(--text); }
.frame-body h3 a:hover { color: var(--accent-text); }
.frame-role {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
    color: var(--muted); text-transform: uppercase;
}
.frame-body p { max-width: 65ch; }
/* role lines are single-line, no 65ch measure. The margin lives here
   and not on .frame-role because the p/h3 margin reset above (0,1,1)
   out-specifies a bare class (0,1,0) · same trick as max-width. */
.frame-body p.frame-role { max-width: none; margin: 10px 0 14px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tag {
    font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--muted);
    border: 1px solid var(--hairline); padding: 4px 10px;
}

/* ---------- projects (grid of frames) ---------- */
.projects-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.project {
    background: var(--surface); border: 1px solid var(--hairline);
    display: flex; flex-direction: column;
    transition: transform .25s var(--ease), border-color .25s;
}
.project:hover { transform: translateY(-3px); border-color: var(--accent); }
.project .frame-body { display: flex; flex-direction: column; flex: 1; padding: 20px 24px 24px; }
.project .tags { margin-top: auto; padding-top: 16px; }
.projects-cta {
    margin: 22px 0 0;
    font-family: var(--font-mono); font-size: .75rem;
    letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- skill bars (CSS-only: widths from .lvl-* classes) ---------- */
.skill { margin-bottom: 18px; }
.skill-label {
    display: flex; justify-content: space-between;
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; margin-bottom: 7px;
}
.skill-label .level { color: var(--muted); }
.skill-track { height: 8px; background: var(--track); }
.skill-fill { height: 100%; background: var(--accent); }
.lvl-85 { width: 85%; }
.lvl-70 { width: 70%; }
.lvl-40 { width: 40%; }

/* ---------- contact ---------- */
.contact-text { max-width: 62ch; margin: 0 0 22px; }
.contact-list { border-top: 1px solid var(--hairline); }
.contact-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; padding: 12px 0;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--font-mono); font-size: .82rem;
}
.contact-label {
    color: var(--muted); font-size: .7rem;
    letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- entrance animation ----------
   pure-CSS load-in stagger, 'both' fill keeps things visible after.
   animations off (print / reduced motion) = normal opacity, so
   nothing gets stuck invisible */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.reveal { animation: fadeInUp .6s var(--ease) both; }
main > .reveal:nth-child(2) { animation-delay: .06s; }
main > .reveal:nth-child(3) { animation-delay: .12s; }
main > .reveal:nth-child(4) { animation-delay: .18s; }
main > .reveal:nth-child(5) { animation-delay: .24s; }
main > .reveal:nth-child(6) { animation-delay: .30s; }
main > .reveal:nth-child(7) { animation-delay: .36s; }

/* ---------- reduced motion: kill animation + smooth scroll ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* ---------- responsive (phone) ---------- */
@media (max-width: 760px) {
    .projects-grid { grid-template-columns: 1fr; }
    .frame-numbers { letter-spacing: .3em; }
    .hero { grid-template-columns: 1fr; padding: 48px 0 32px; }
    .hero-print { grid-column: 1; grid-row: auto; max-width: 300px; transform: rotate(0); }
    .contact-row { flex-direction: column; gap: 2px; }
}

/* ---------- desktop-only refinements ---------- */
/* bio gets intro size on wide screens */
@media (min-width: 761px) {
    .hero .bio { font-size: 1.2rem; }
    /* section titles must outrank the hero role line (26.4px) */
    .sec-head h2 { font-size: 2.2rem; line-height: 1.2; }
    /* tighten the display serif at masthead size */
    .hero h1 { letter-spacing: -.02em; }
    /* microcopy to the 12px floor; decorative texture stays small */
    .kicker, .frame-top, .frame-role { font-size: .75rem; }
}

/* ---------- print ----------
   ../../css/print.css covers the shared side (light tokens, hidden
   chrome, black links). this block is my page's own decoration */
@media print {
    /* the strip/hole tokens aren't in the shared print sheet */
    :root, [data-theme="dark"] {
        --strip: #ffffff;
        --hole: #ffffff;
    }

    /* film-strip decoration doesn't belong on paper */
    .leader,
    .sprocket-col,
    .projects-cta {
        display: none;
    }

    .hero { padding: 0 0 1.5rem; }
    .section { padding: 1.2rem 0 0; }

    /* frames lose the sprocket column (decoration) and print flat */
    .frame {
        grid-template-columns: 1fr;
        border: 1px solid #999999;
    }
    .project { border: 1px solid #999999; }

    /* projects reflow to a single column on paper */
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* browsers strip bg colours when printing; force exact for the bars */
    .skill-track {
        border: 1px solid #999999;
        background: #eeeeee;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .skill-fill {
        background: #555555;
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }

    /* keep entries intact across page breaks */
    .frame,
    .project,
    .skill {
        break-inside: avoid;
        page-break-inside: avoid;
    }

    /* a section heading must stay with the content it introduces */
    .sec-head { break-after: avoid; }
}