:root {
    --black: #111111;
    --white: #f5f3ee;
    --gray: #777;
    --line: #d8d5ce;
    --accent: #c75c35;
    --chrome: #26251f;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background: var(--chrome);
    color: var(--black);
    font-family: "DM Sans", sans-serif;
    overflow: hidden;
}


/* VIEWER CHROME */

.viewer {
    /* 100vh on a real phone browser (Safari iOS, Chrome Android) means the
       LARGEST viewport height — with the address/toolbar collapsed — not
       what's actually visible. With the toolbar showing (the normal state
       on load), the real visible area is shorter, so the book-stage's
       size math and the bottom nav bar both get computed against space
       that isn't really there, pushing the nav bar off-screen. Desktop
       DevTools device emulation doesn't reproduce this (no real dynamic
       toolbar), which is why it can look fine there and break on an
       actual phone. 100dvh tracks the real, current visible height;
       100vh stays first as a fallback for browsers that don't support it. */
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}

.viewer-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 32px;
    color: #999;
    font-size: 11px;
    letter-spacing: 2px;
    flex-shrink: 0;
}

.brand {
    display: flex;
    gap: 8px;
}

.brand strong {
    color: white;
}

.section-label {
    color: white;
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 16px;
    letter-spacing: 0;
}

.sidebar-footer {
    font-size: 10px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status {
    width: 7px;
    height: 7px;
    background: #6fd36f;
    border-radius: 50%;
}


/* BOOK STAGE */

.book-stage {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
}

#book {
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55));
}


/* PAGE (content inside each flip page) */

.page {
    width: 100%;
    height: 100%;
    background: var(--white);
    padding: 44px 52px;
    /* page-flip sets `display: block` inline on every mounted page (its own
       positioning needs it) which overrides this file's `display: flex`
       below — `.page` never actually behaves as a flex container while
       live in the book, only in the untouched #printBook clones. So none
       of .timeline/.skills/etc's flex sizing constrains anything here; on
       a short viewport (old-phone height, or landscape) block content can
       run past this box's fixed height. overflow-y: auto (instead of
       hidden) means that spills into a scroll instead of vanishing behind
       page-footer, which stays put via its own absolute positioning.
       overflow-x stays hidden — nothing should ever need horizontal
       scroll here, and allowing it risks the flip's shadow/edges leaking. */
    overflow-x: hidden;
    overflow-y: auto;
    position: relative;
    display: flex;
    flex-direction: column;
}

.page.cover {
    background: var(--black);
    color: var(--white);
    justify-content: center;
    /* OS forced-colors mode (Windows High Contrast) repaints custom
       backgrounds to the system palette by default, which flattens the
       cover to plain black-on-white. Opt this page out so the intended
       black/cream cover always renders. */
    forced-color-adjust: none;
}

.page.cover .eyebrow {
    color: #999;
}

.page.cover h2 {
    color: var(--white);
}

.page.cover .contact a {
    color: var(--white);
}

.page.cover .contact a:hover {
    color: var(--accent);
}

.page.cover .contact p {
    color: #bbb;
}

.eyebrow {
    color: var(--gray);
    font-size: 10px;
    letter-spacing: 3px;
    margin-bottom: 24px;
}

h1,
h2 {
    font-family: "Playfair Display", serif;
    font-weight: 500;
    line-height: .95;
    letter-spacing: -1.5px;
}

h1 {
    font-size: clamp(32px, 5.2vw, 52px);
}

h2 {
    font-size: clamp(26px, 4vw, 40px);
    color: var(--black);
    margin-bottom: 8px;
}

h1 em,
h2 em {
    color: var(--accent);
    font-style: italic;
}

.role {
    margin-top: 12px;
    color: var(--gray);
    font-size: 13px;
}

.page.cover .role {
    color: #bbb;
}

.large-text {
    margin-top: 20px;
    max-width: 90%;
    font-size: 15px;
    line-height: 1.5;
    color: #ccc;
}

.profile-box {
    margin-top: 24px;
}

.profile-box img {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    filter: grayscale(100%);
    background: var(--line);
}


/* EXPERIENCE */

.timeline {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.experience {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.year {
    color: var(--gray);
    font-size: 10px;
    letter-spacing: .5px;
}

.experience h3,
.skill h3,
.project h3,
.education h3 {
    font-size: 15px;
    margin-bottom: 2px;
}

.company {
    color: var(--accent);
    font-size: 12px;
    margin-bottom: 4px;
}

.experience p {
    color: var(--gray);
    line-height: 1.4;
    font-size: 12px;
}


/* SKILLS */

.skills {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.skill {
    padding: 18px 20px;
    border-top: 1px solid var(--line);
}

.skill span {
    color: var(--accent);
    font-size: 11px;
}

.skill h3 {
    margin-top: 10px;
}

.skill p {
    color: var(--gray);
    line-height: 1.4;
    font-size: 12px;
}


/* PROJECTS */

.projects {
    margin-top: 20px;
}

.project {
    display: grid;
    grid-template-columns: 34px 1fr 24px;
    align-items: center;
    padding: 16px 0;
    border-top: 1px solid var(--line);
    transition: .3s;
}

.project p {
    color: var(--gray);
    font-size: 12px;
}

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


/* EDUCATION */

.education {
    margin-top: 20px;
}

.education > div {
    padding: 18px 0;
    border-top: 1px solid var(--line);
}

.education span {
    color: var(--gray);
    font-size: 11px;
}

.education p {
    font-size: 13px;
    color: var(--gray);
}


/* CONTACT */

.contact {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact a {
    color: var(--black);
    font-size: 15px;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
    width: fit-content;
}

.contact a:hover {
    color: var(--accent);
}

.contact p {
    color: var(--gray);
    font-size: 13px;
}


/* PER-PAGE FOOTER */

.page-footer {
    position: absolute;
    bottom: 24px;
    left: 52px;
    color: var(--gray);
    font-size: 9px;
    letter-spacing: 2px;
}

.page.cover .page-footer {
    color: #777;
}


/* BOTTOM BAR */

.viewer-bottombar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px;
}

.viewer-bottombar button {
    width: 40px;
    height: 40px;
    border: 1px solid #333;
    background: transparent;
    color: white;
    cursor: pointer;
    font-size: 16px;
    border-radius: 50%;
}

.viewer-bottombar button:hover {
    background: white;
    color: var(--black);
}

#print {
    width: auto;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 10px;
    letter-spacing: 1px;
}

.page-counter {
    color: #999;
    font-size: 12px;
    letter-spacing: 1px;
    min-width: 60px;
    text-align: center;
}


/* MOBILE */

@media (max-width: 800px) {

    .viewer-topbar {
        padding: 14px 18px;
    }

    .large-text {
        display: none;
    }

    .page {
        padding: 28px 24px;
    }
}

/* Below ~480px (common phone widths like 320-390px), the three topbar
   groups — brand, section label, "available for work" — no longer fit on
   one line side by side (flex items don't shrink below their text's
   intrinsic width by default) and visibly overlap. Drop the least
   essential text so what's left has room. */
@media (max-width: 480px) {

    .brand span,
    .sidebar-footer span {
        display: none;
    }

    .section-label {
        font-size: 14px;
    }
}

/* Short viewports leave little room between the topbar and bottombar for
   the page card itself. Denser pages (Experience, Skills) can then need
   more height than fits, and .page's overflow-y: auto lets it scroll —
   but page-flip's own touch handling doesn't distinguish a vertical
   scroll drag from its horizontal swipe-to-flip gesture (confirmed
   directly: even a fast, purely-vertical touch drag still gets tracked
   and committed as a page turn on release), so touch-scrolling to reach
   clipped content isn't reliably reachable on a real phone.

   Portrait and landscape get different treatment below because the
   shortfall is a different size: portrait phones (any of them, including
   the oldest/smallest — this reaches full parity down to a 2016-era
   320×568 iPhone SE1) are only short by degrees a genuinely tighter
   layout can absorb, so they get shrunk to fit with zero scroll. A phone
   in landscape is a different problem, not a smaller version of the same
   one: the visible page area drops to ~300px tall on any modern phone,
   which is less than half of what this content needs — no amount of
   shrinking gets there without making it unreadable, which defeats the
   point same as clipping does. So landscape keeps the scroll fallback
   instead (imperfect on touch, but strictly better than either forcing
   illegible text or losing content outright). */
@media (max-width: 500px) and (max-height: 900px) {

    /* Portrait phone: shrink to fit, then make that guarantee explicit —
       hidden instead of auto means if some future content addition ever
       breaks the fit, it clips visibly obviously (easy to spot in testing)
       rather than silently becoming another unreachable-on-touch scroll. */
    .page {
        padding: 18px 20px;
        overflow-y: hidden;
    }

    .eyebrow {
        margin-bottom: 8px;
    }

    h2 {
        margin-bottom: 4px;
    }

    .timeline,
    .skills,
    .projects,
    .education,
    .contact {
        margin-top: 6px;
    }

    .experience {
        grid-template-columns: 70px 1fr;
        gap: 8px;
        padding: 6px 0;
    }

    .year {
        font-size: 9px;
    }

    .experience p,
    .skill p {
        font-size: 10.5px;
        line-height: 1.25;
    }

    .skill {
        padding: 10px 14px;
    }
}

@media (max-height: 450px) {

    /* Landscape phone: visible page height drops to ~300px, worse than
       the portrait tier's shortfall even though width is wide open — so
       this tier gets its OWN full set of vertical trims (tighter than
       portrait's) instead of reusing them, and finally closes the gap to
       zero-scroll like portrait does. Text gets small; that trade was
       made deliberately over keeping the scroll-vs-flip touch conflict. */
    .page {
        padding: 14px 24px;
        overflow-y: hidden;
    }

    .eyebrow {
        font-size: 9px;
        margin-bottom: 4px;
    }

    /* h1's clamp() scales off viewport width (5.2vw), but in a landscape
       spread each .page is only ~half the viewport — at 844px wide that's
       still ~44px of text aimed at a ~380px-wide card, so it runs past
       the card's right edge. Fixed size instead, sized to the card not
       the screen. */
    h1 {
        font-size: 26px;
    }

    h2 {
        font-size: 19px;
        margin-bottom: 2px;
        line-height: 1;
    }

    /* The section name is already shown in the topbar; dropping this
       per-page repeat frees the bottom few px this tier has already
       spent down to the last line of content, and removes any risk of
       the last content line and this label colliding. */
    .page-footer {
        display: none;
    }

    .large-text {
        display: none;
    }

    .profile-box {
        margin-top: 8px;
    }

    .profile-box img {
        width: 64px;
        height: 64px;
    }

    .role {
        margin-top: 6px;
    }

    .timeline,
    .skills,
    .projects,
    .education,
    .contact {
        margin-top: 4px;
    }

    .experience {
        grid-template-columns: 60px 1fr;
        gap: 6px;
        padding: 2px 0;
    }

    .year {
        font-size: 8px;
    }

    .experience h3,
    .skill h3,
    .project h3,
    .education h3 {
        font-size: 11px;
        margin-bottom: 0;
    }

    .company {
        font-size: 9px;
        margin-bottom: 1px;
    }

    .experience p,
    .skill p {
        font-size: 9px;
        line-height: 1.15;
    }

    .skill {
        padding: 5px 8px;
    }

    .skill span {
        font-size: 8px;
    }

    .skill h3 {
        margin-top: 2px;
    }

    .project {
        padding: 6px 0;
    }

    .education > div {
        padding: 6px 0;
    }

    .education span {
        font-size: 9px;
    }

    .education p {
        font-size: 10px;
    }

    .contact {
        gap: 6px;
    }

    .contact a {
        font-size: 12px;
        padding-bottom: 3px;
    }

    .contact p {
        font-size: 10px;
    }
}


/* PRINT / PDF EXPORT
   page-flip.js re-parents the live #book pages into its own internal DOM,
   so printing that structure directly is unreliable. Instead script.js
   clones the pristine pages into #printBook *before* page-flip touches
   them; only that clone is shown to the print engine. */

.print-only {
    display: none;
}

@media print {

    body {
        overflow: visible;
        background: var(--white);
    }

    .viewer {
        display: none;
    }

    .print-only {
        display: block;
    }

    .print-only .page {
        width: auto;
        height: auto;
        min-height: 100vh;
        page-break-after: always;
    }

    .print-only .page:last-child {
        page-break-after: auto;
    }

    .print-only .page.cover {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}