/* COLORS  */
:root {
    --cream: #fff9df;
    --dark: #222725;
    --yellow: #ffda70;
    --magenta: #a32460;
    --muted: #655e50;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--dark); font-family: Helvetica, Arial, sans-serif; }
a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--dark); outline-offset: -4px; }
.work-page {
    --tab-width: 3.7037037vw;
    --panel-width: 66.6666667vw;
    display: flex;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
}

/* INTRODUCTION */
.intro { flex: 0 0 var(--panel-width); min-width: 0; overflow: hidden; transition: flex-basis 0.65s ease; }
.work-page.has-open-project .intro { flex-basis: 0; }
.panel-inner { width: var(--panel-width); padding: 20px 32px 40px; }
/* Page heading: same style on About, Work and Contact. */
.intro-text {
    margin: 60px 0 28px;
    font-size: clamp(56px, 7vw, 120px);
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-weight: 700;
}
.intro-prompt { margin: 0; font-size: 25px; }

/* HEADER  */
.work-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 32px;
}
.logo { flex-shrink: 0; }
.logo img { display: block; width: 130px; height: auto; }
.work-header nav { display: flex; align-items: center; gap: clamp(14px, 3vw, 44px); }
.work-header nav a { font-size: clamp(15px, 1.6vw, 22px); text-decoration: none; transition: color 0.2s; }
.work-header nav a:hover { color: var(--magenta); }
.work-header nav a[aria-current="page"] {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}
.work-header nav .nav-button {
    white-space: nowrap;
    padding: 12px 26px;
    border-radius: 40px;
    background: var(--dark);
    color: var(--cream);
}
.work-header nav .nav-button:hover { color: var(--yellow); }

/* VERTICAL PROJECT TABS */
.project { display: flex; flex: 0 0 var(--tab-width); min-width: 0; overflow: hidden; transition: flex-basis 0.65s ease; }
.project.is-open { flex-basis: calc(var(--tab-width) + var(--panel-width)); }
.project-tab {
    position: relative;
    flex: 0 0 var(--tab-width);
    width: var(--tab-width);
    height: 100%;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}
/* Readable tab text: dark on yellow and pink, cream on blue */
.yellow { background: #ffda70; color: var(--dark); }
.pink { background: #ff90d3; color: var(--dark); }
.blue { background: #007fa8; color: var(--cream); }
.project-tab span {
    position: absolute;
    bottom: 25px;
    left: 50%;
    writing-mode: vertical-rl;
    transform: translateX(-50%) rotate(180deg);
    white-space: nowrap;
    font-size: min(2.25vw, 3.6vh);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}
.project-tab:hover span, .project-tab:focus-visible span,
.project.is-open .project-tab span { text-decoration-line: underline; }

/* OPEN PROJECT:  PANEL SCROLLS */
.project-panel {
    flex: 0 0 0;
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--cream);
    transition: flex-basis 0.65s ease;
}
.project.is-open .project-panel { flex-basis: var(--panel-width); }

/* PROJECT IMAGES: FIRST IMAGE → TEXT  */
.project-first { margin: 0 0 32px; }
.project-images { display: flex; flex-direction: column; gap: 24px; margin-bottom: 64px; }
.project-images figure { margin: 0; }
.project-first img,
.project-images img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}
/* Book spreads are wide (trimmed to the book), so show them at their own shape with no empty space */
#emotions-theory .project-first img,
#emotions-theory .project-images img { aspect-ratio: auto; height: auto; }

/* Project text under the first image */
.project-intro { max-width: 80ch; margin: 0 0 40px; }
.project-name { margin: 0 0 4px; font-size: clamp(28px, 2.6vw, 40px); line-height: 1.1; letter-spacing: -0.03em; }
.info-pieces { margin: 0 0 24px; font-size: 17px; color: var(--muted); }
.project-about { margin: 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }
.project-goal { margin: 14px 0 0; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; }

@media (prefers-reduced-motion: reduce) {
    .intro, .project, .project-panel { transition: none; }
}

/* INTRO ARROW: POINTS RIGHT ON DESKTOP, DOWN WHEN PROJECTS STACK */
.arrow-down { display: none; }

/* TABLET AND PHONE: TABS BECOME STACKED BARS, PROJECTS OPEN DOWNWARD */
@media (max-width: 1024px) {
    .work-page {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
    }
    .intro, .project, .project.is-open { flex: none; width: 100%; transition: none; }
    .work-page.has-open-project .intro { display: none; }
    .panel-inner { width: 100%; padding: 20px 6vw 32px; }
    .intro-text { margin: 40px 0 24px; font-size: 11vw; }
    .intro-prompt { margin-bottom: 16px; font-size: 20px; }
    .arrow-side { display: none; }
    .arrow-down { display: inline; }

    .project { flex-direction: column; }
    .project-tab { flex: none; width: 100%; height: 64px; }
    .project-tab span {
        position: static;
        display: block;
        padding: 0 6vw;
        writing-mode: horizontal-tb;
        transform: none;
        text-align: left;
        font-size: 20px;
    }
    .project-panel, .project.is-open .project-panel { flex: none; overflow: visible; transition: none; }
    .project-panel { display: none; }
    .project.is-open .project-panel { display: block; }
    .project-images { margin-bottom: 32px; }
}

/* PHONE */
@media (max-width: 600px) {
    .panel-inner { padding: 14px 16px 24px; }
    .logo img { width: 84px; }
    .work-header { gap: 12px; margin-bottom: 24px; }
    .work-header nav { gap: 12px; }
    .work-header nav a { font-size: 14px; }
    .work-header nav .nav-button { padding: 8px 12px; }
    .intro-text { font-size: 12.5vw; }
    .project-tab { height: 58px; }
    .project-tab span { padding: 0 16px; font-size: 18px; }
    .project-first { margin-bottom: 24px; }
    .project-images { gap: 16px; }
}

/* VERY SMALL PHONES */
@media (max-width: 380px) {
    .logo img { width: 70px; }
    .work-header nav { gap: 8px; }
    .work-header nav a { font-size: 13px; }
    .work-header nav .nav-button { padding: 7px 10px; }
}

/* NO STRANDED WORDS: the browser balances headings and avoids a single word alone on a paragraph's last line */
h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }