/* style.css — "Darkroom" redesign, 24 Jul 2026.
   Single-column editorial layout with two themes: LIGHT TABLE (warm
   paper, amber) and DARKROOM (slate black, maroon, safelight red).
   Every colour, font and spacing value lives in custom properties so
   the WEB1201 group site shares the same tokens (G1 consistency). */

/* ---------- Design tokens: LIGHT TABLE (default) ---------- */
:root {
    --bg: #f4eee1;            /* warm paper white — the light table surface */
    --surface: #fbf7ec;       /* card white */
    --text: #26201a;          /* warm ink */
    --muted: #6f6556;         /* warm grey — 4.6:1 on paper, passes WCAG AA */
    --accent: #b45309;        /* film-box amber */
    --accent-hover: #7c3f06;  /* darker amber for hover */
    --hairline: #ddd2bb;      /* sepia rule lines */
    --track: #e8dfca;         /* empty skill-bar track */
    --strip: #2b241c;         /* film strip stock */
    --hole: #f4eee1;          /* sprocket holes = paper showing through */

    --font-display: Georgia, 'Times New Roman', serif;
    --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

    --wrap: 920px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Design tokens: DARKROOM ---------- */
[data-theme="dark"] {
    --bg: #0e0e11;            /* neutral near-black */
    --surface: #241014;       /* deep maroon panel */
    --text: #f2e7d5;          /* warm off-white */
    --muted: #b09a85;         /* pale umber */
    --accent: #e5484d;        /* safelight red */
    --accent-hover: #f0686c;  /* hover goes lighter in the darkroom */
    --hairline: #452227;      /* maroon rule lines */
    --track: #2e2e35;         /* neutral empty track */
    --strip: #060608;
    --hole: #0e0e11;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px; /* keeps anchored sections clear of the sticky nav */
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    transition: background-color .3s ease, color .3s ease;
}

::selection { background: var(--accent); color: var(--bg); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Nav (Flexbox row, collapses to a hamburger panel) ---------- */
.nav {
    position: sticky; top: 0; z-index: 20;
    background: var(--bg);
    border-bottom: 1px solid var(--hairline);
    transition: background-color .3s ease;
}
.nav-inner {
    max-width: var(--wrap); margin: 0 auto; padding: 14px 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { font-family: var(--font-display); font-size: 1.25rem; color: var(--text); }
.brand:hover { color: var(--text); }
.brand em { font-style: italic; }
.brand-suffix {
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .12em;
    color: var(--muted); margin-left: 8px;
}
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
}
.nav-links a:hover { color: var(--accent); }
.theme-toggle {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; cursor: pointer; font-weight: 700;
    background: none; border: 1px solid var(--hairline); border-radius: 999px;
    color: var(--accent); padding: 6px 14px;
    transition: border-color .2s, color .2s;
}
.theme-toggle:hover { border-color: var(--accent); }
/* only the OTHER room's label is shown (script.js explains why) */
[data-theme="light"] .label-lighttable { display: none; }
[data-theme="dark"] .label-darkroom { display: none; }
.nav-hamburger {
    display: none; background: none; border: 1px solid var(--hairline);
    border-radius: 6px; padding: 8px; color: var(--text); cursor: pointer;
}
.nav-hamburger svg { display: block; width: 20px; height: 20px; }

/* ---------- Hero ---------- */
.hero {
    padding: 72px 0 40px;
    display: grid; grid-template-columns: 1fr 250px;
    gap: 24px 48px; align-items: start;
}
.hero-text, .hero-rest { grid-column: 1; }
/* The portrait as a 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 gets the same accent as the 01A-05A leader numbers; it's part
   of the same film roll, one frame before the rest. */
.hero-print .frame-no { color: var(--accent); }
.kicker {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .22em;
    text-transform: uppercase; color: var(--accent); margin-bottom: 18px;
}
.hero h1 {
    font-family: var(--font-display);
    font-size: clamp(3rem, 9vw, 5.2rem);
    line-height: 1.02; font-weight: 400; letter-spacing: -.01em;
}
.hero .role {
    font-family: var(--font-display); font-style: italic;
    font-size: clamp(1.15rem, 3vw, 1.5rem); color: var(--muted);
    margin-top: 10px;
}
.hero .bio { max-width: 58ch; margin-top: 22px; }
.edge-code {
    font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--muted); margin-top: 26px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.btn {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em;
    text-transform: uppercase; padding: 10px 20px;
    border: 1px solid var(--text); color: var(--text);
    transition: background-color .2s, border-color .2s, color .2s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 700; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--bg); }

/* ---------- 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);
    padding: 4px 8px; /* widens the tap target for phone screens */
    transition: color .2s ease;
}
.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); }
.sec-head h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; }
.sec-rule { flex: 1; height: 1px; background: var(--hairline); }

/* ---------- Film frame entries (CSS Grid: sprocket column + 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-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); border: 1px solid var(--accent);
    padding: 3px 10px; border-radius: 999px;
    font-size: .62rem; letter-spacing: .12em;
}
.muted-badge { color: var(--muted); border-color: var(--hairline); }
.frame-body h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.25; }
.frame-body h3 a { color: var(--text); }
.frame-body h3 a:hover { color: var(--accent); }
.frame-role {
    font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
    color: var(--muted); text-transform: uppercase; margin: 6px 0 14px;
}
.frame-body p { max-width: 65ch; }
.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 (CSS Grid of film 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-top: 22px;
    font-family: var(--font-mono); font-size: .75rem;
    letter-spacing: .12em; text-transform: uppercase;
}

/* ---------- Skill bars (CSS-only: widths come 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-bottom: 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;
}

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--hairline); margin-top: 56px; }
.footer-inner {
    display: flex; justify-content: space-between; align-items: center; gap: 16px;
    padding: 22px 24px;
    font-family: var(--font-mono); font-size: .72rem;
    color: var(--muted); letter-spacing: .08em;
}
.footer-links { display: flex; gap: 18px; }
.footer-links a { color: var(--muted); text-transform: uppercase; letter-spacing: .14em; }
.footer-links a:hover { color: var(--accent); }

/* ---------- Entrance animation ----------
   Pure-CSS load-in stagger. The 'both' fill keeps elements visible
   after the animation ends. With animations disabled (print, reduced
   motion) everything renders at natural opacity, so content can
   never get 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 ---------- */
@media (max-width: 760px) {
    .nav-hamburger { display: block; }
    .nav-links {
        position: absolute; top: 100%; left: 0; right: 0;
        display: none; flex-direction: column; align-items: flex-start; gap: 0;
        background: var(--surface);
        border-bottom: 1px solid var(--hairline);
        padding: 8px 24px 16px;
    }
    .nav-links.open { display: flex; }
    .nav-links a { padding: 10px 0; width: 100%; }
    .theme-toggle { margin-top: 8px; }
    .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; }
    .footer-inner { flex-direction: column; gap: 10px; text-align: center; }
}