/* ==========================================================================
   1. RESET & BASE
   ========================================================================== */

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

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

body {
    min-height: 100vh;
    overflow-x: hidden;
    font-family: var(--font-body);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; font: inherit; }
hr { border: none; }
img { max-width: 100%; display: block; }

/* Screen-reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sr-only--focusable:focus {
    position: fixed;
    top: 12px;
    left: 12px;
    width: auto;
    height: auto;
    padding: 8px 16px;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--page);
    color: var(--text-title);
    border: 2px solid var(--gold);
    border-radius: 4px;
    z-index: 200;
    font-size: 0.875rem;
}


/* ==========================================================================
   2. CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* --- Tier 1: Book Palette (Light Mode — Golden Hour) --- */
    --bg:            #c4a882;
    --bg-center:     #d4b892;
    --page:          #f5ecd7;
    --leather:       #5c3a21;
    --gold:          #b8960c;
    --spine:         #4a2e18;
    --text-title:    #2c1810;
    --text-body:     #3d2b1f;
    --text-subtle:   #6b5344;
    --shadow-page:   rgba(60, 30, 10, 0.15);
    --shadow-desk:   rgba(40, 20, 5, 0.3);
    --text-glow:     none;
    --toggle-bg:     rgba(0, 0, 0, 0.1);

    /* --- Tier 2: Semantic Layer --- */
    --surface:          var(--page);
    --border-decorative: var(--gold);
    --border-content:   color-mix(in srgb, var(--gold), transparent 75%);
    --text:             var(--text-body);
    --text-soft:        var(--text-subtle);
    --accent:           var(--gold);

    /* --- Spacing Scale (4px grid) --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* --- Transition Tokens --- */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   0.15s;
    --duration-normal: 0.25s;
    --duration-slow:   0.4s;

    /* --- Typography Tokens --- */
    --font-display: 'Playfair Display', Georgia, serif;
    --font-body:    'Lora', Georgia, serif;
    --leading-tight:  1.3;
    --leading-normal: 1.6;

    /* --- Dimensions --- */
    --page-width:    370px;
    --page-height:   500px;
    --spine-width:   40px;
    --leather-border: 12px;
    --page-padding:  var(--space-8);
    --gold-inset:    var(--space-1);
    --corner-size:   var(--space-4);
    --dot-size:      6px;
    --dot-gap:       var(--space-3);

    /* --- Perspective --- */
    --perspective:   1200px;
    --book-angle:    45deg;
    --persp-origin-y: 40%;

    /* --- Animation --- */
    --turn-speed:    0.5s;
    --zoom-speed:    0.55s;
    --theme-speed:   0.8s;
    --parallax-smooth: 0.3s;
    --hover-speed:   var(--duration-fast);
}

html.dark {
    --bg:            #1a1a2e;
    --bg-center:     #222240;
    --page:          #2a2a3a;
    --leather:       #3a2518;
    --gold:          #d4b856;
    --spine:         #2a1a10;
    --text-title:    #e8e0cc;
    --text-body:     #c8c0b0;
    --text-subtle:   #8a8278;
    --shadow-page:   rgba(0, 0, 20, 0.3);
    --shadow-desk:   rgba(0, 0, 10, 0.5);
    --text-glow:     0 0 8px rgba(232, 224, 204, 0.3);
    --toggle-bg:     rgba(255, 255, 255, 0.1);

    /* Semantic layer inherits automatically via var() references */
}


/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.page-title,
.bookplate__name,
.detail__title {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--text-title);
    text-shadow: var(--text-glow);
}

.page-title {
    font-size: 1.75rem;
    margin-bottom: 0.5em;
}

.page-subtitle {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-title);
    text-shadow: var(--text-glow);
    margin-bottom: 0.4em;
}

.page-content p,
.page-content li {
    color: var(--text-body);
    font-size: 1rem;
    line-height: 1.65;
}

.page-content em {
    color: var(--text-subtle);
    font-size: 0.875rem;
}


/* ==========================================================================
   4. BODY / DESK SURFACE
   ========================================================================== */

body {
    background: radial-gradient(ellipse at center 45%, var(--bg-center), var(--bg) 70%);
    background-size: 100% 100%;
    animation: breathe-bg 30s var(--ease-in-out) infinite alternate;
    color: var(--text);
    transition:
        color var(--theme-speed) var(--ease-in-out);
}

@keyframes breathe-bg {
    0%   { background: radial-gradient(ellipse at center 45%, var(--bg-center), var(--bg) 70%); }
    50%  { background: radial-gradient(ellipse at center 48%, var(--bg-center), var(--bg) 65%); }
    100% { background: radial-gradient(ellipse at center 42%, var(--bg-center), var(--bg) 75%); }
}

/* Noise texture overlay — subtle grain for desk richness */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 256px 256px;
}


/* ==========================================================================
   5. SCENE (Perspective container)
   ========================================================================== */

.scene {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    perspective: var(--perspective);
    perspective-origin: center var(--persp-origin-y);
}

/* Book shadow on desk */
.scene::after {
    content: '';
    position: absolute;
    bottom: 12%;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    max-width: 700px;
    height: 60px;
    background: var(--shadow-desk);
    border-radius: 50%;
    filter: blur(30px);
    z-index: 1;
    pointer-events: none;
    transition: background var(--theme-speed) var(--ease-in-out);
}


/* ==========================================================================
   6. BOOK COVER (Leather frame)
   ========================================================================== */

.book {
    transform: rotateX(var(--book-angle));
    transform-style: preserve-3d;
    transition: transform var(--parallax-smooth) var(--ease-out);
    z-index: 10;
    /* Page load animation — starts hidden */
    opacity: 0;
    will-change: transform, opacity;
}

.book--loaded {
    opacity: 1;
    transition:
        transform var(--parallax-smooth) var(--ease-out),
        opacity 0.7s var(--ease-out);
}

.book__cover {
    position: relative;
    display: flex;
    padding: var(--leather-border);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--leather), white 5%) 0%,
        var(--leather) 50%,
        color-mix(in srgb, var(--leather), black 8%) 100%
    );
    border-radius: 4px;
    /* preserve-3d removed — old flip-sheet needed it, StPageFlip does not.
       Flattening here fixes StPageFlip's mouse coordinate calculations
       which break under nested 3D transform contexts. */
    transition: background var(--theme-speed) var(--ease-in-out);
}


/* ==========================================================================
   7. BOOK SPINE
   ========================================================================== */

.book__spine {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateZ(2px);
    width: var(--spine-width);
    height: 100%;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--spine), black 10%) 0%,
        var(--spine) 40%,
        color-mix(in srgb, var(--spine), white 5%) 50%,
        var(--spine) 60%,
        color-mix(in srgb, var(--spine), black 10%) 100%
    );
    z-index: 11;
    pointer-events: none;
    transition: background var(--theme-speed) var(--ease-in-out);
}


/* ==========================================================================
   8. BOOK PAGES
   ========================================================================== */

.book__page {
    position: relative;
    width: var(--page-width);
    height: var(--page-height);
    background: var(--page);
    overflow: hidden;
    transition:
        background var(--theme-speed) var(--ease-in-out),
        box-shadow var(--theme-speed) var(--ease-in-out);
}

.book__page--left {
    box-shadow: inset -4px 0 8px var(--shadow-page);
    border-radius: 0;
}

.book__page--right {
    box-shadow: inset 4px 0 8px var(--shadow-page);
    border-radius: 0;
}


/* ==========================================================================
   9. GOLD DETAILS
   ========================================================================== */

/* Inset border on each page */
.book__page::before {
    content: '';
    position: absolute;
    inset: var(--gold-inset);
    border: 1px solid var(--gold);
    pointer-events: none;
    z-index: 2;
    transition: border-color var(--theme-speed) var(--ease-in-out);
}

/* Gold corner marks — top-left and bottom-right per page */
.page-content {
    position: relative;
}

.page-content::before,
.page-content::after {
    content: '';
    position: absolute;
    width: var(--corner-size);
    height: var(--corner-size);
    border-color: var(--gold);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
    z-index: 3;
    transition:
        border-color var(--theme-speed) var(--ease-in-out),
        width var(--duration-normal) var(--ease-out),
        height var(--duration-normal) var(--ease-out);
}

/* Top-left corner */
.page-content::before {
    top: 0;
    left: 0;
    border-top-width: 1px;
    border-left-width: 1px;
}

/* Bottom-right corner */
.page-content::after {
    bottom: 0;
    right: 0;
    border-bottom-width: 1px;
    border-right-width: 1px;
}

/* Zoomable pages: brighten + grow corners on hover */
.page-content[data-detail]:hover::before,
.page-content[data-detail]:hover::after {
    border-color: color-mix(in srgb, var(--gold), white 25%);
    width: calc(var(--corner-size) + 4px);
    height: calc(var(--corner-size) + 4px);
}

/* Gold rule */
.gold-rule {
    width: 60%;
    max-width: 200px;
    height: 1px;
    background: var(--gold);
    margin: 1em auto;
    transition: background var(--theme-speed) var(--ease-in-out);
}


/* ==========================================================================
   10. PAGE CONTENT TYPOGRAPHY
   ========================================================================== */

.page-content {
    padding: var(--page-padding);
    height: 100%;
}

.page-content p {
    margin-bottom: 0.75em;
}

.page-content p:last-child {
    margin-bottom: 0;
}

.skill-list {
    margin-top: 0.5em;
}

.skill-list li {
    padding: 0.25em 0;
    border-bottom: 1px dotted color-mix(in srgb, var(--gold), transparent 60%);
}

.skill-list li:last-child {
    border-bottom: none;
}

.skill-list--compact li {
    padding: 0.15em 0;
    font-size: 0.925rem;
}

/* CV entries */
.cv-entry {
    margin-bottom: 1em;
}

.cv-entry__title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--text-title);
    text-shadow: var(--text-glow);
}

.cv-entry__company {
    display: block;
    font-size: 0.875rem;
    color: var(--text-subtle);
}

.cv-entry__date {
    display: block;
    font-size: 0.8rem;
    color: var(--gold);
    margin-bottom: 0.25em;
}

.cv-entry__desc {
    font-size: 0.925rem;
}

/* Dissertation entries */
.diss-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-title);
    text-shadow: var(--text-glow);
    margin-bottom: 0.3em;
    line-height: var(--leading-tight);
}

.diss-meta {
    font-size: 0.85rem;
    color: var(--text-subtle);
    margin-bottom: 0.75em;
}

.diss-cta {
    font-size: 0.9rem;
    color: var(--text-subtle);
    text-align: center;
}

.findings-list li {
    padding: 0.4em 0;
    border-bottom: 1px dotted color-mix(in srgb, var(--gold), transparent 60%);
}

.findings-list li:last-child {
    border-bottom: none;
}


/* ==========================================================================
   11. BOOKPLATE
   ========================================================================== */

.page-content--bookplate {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bookplate {
    text-align: center;
    padding: 2em;
    border: 1px solid var(--gold);
    max-width: 250px;
    transition: border-color var(--theme-speed) var(--ease-in-out);
}

.bookplate__label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 0.5em;
    transition: color var(--theme-speed) var(--ease-out);
}

.bookplate__name {
    font-size: 2.5rem;
    line-height: 1.2;
    margin-bottom: 0.3em;
}

.bookplate .gold-rule {
    margin: 0.5em auto 0;
}


/* ==========================================================================
   12. TABLE OF CONTENTS
   ========================================================================== */

.page-content--toc {
    padding-top: 48px;
}

.page-content--toc .page-title {
    margin-bottom: 1.5em;
}

.toc {
    display: flex;
    flex-direction: column;
}

.toc__link {
    display: flex;
    align-items: baseline;
    padding: 0.6em 0;
    color: var(--text-body);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: var(--space-2);
    transition:
        color var(--hover-speed) var(--ease-out),
        border-color var(--hover-speed) var(--ease-out),
        padding-left var(--hover-speed) var(--ease-out);
    cursor: pointer;
}

.toc__link:hover {
    color: var(--accent);
    border-left-color: var(--accent);
    padding-left: var(--space-3);
}

.toc__title {
    flex-shrink: 0;
    font-size: 1rem;
}

.toc__dots {
    flex: 1;
    border-bottom: 1px dotted var(--text-subtle);
    margin: 0 0.5em;
    min-width: 20px;
    align-self: baseline;
    transform: translateY(-0.2em);
    transition: border-color var(--theme-speed) var(--ease-in-out);
}

.toc__number {
    flex-shrink: 0;
    font-size: 0.9rem;
    color: var(--text-subtle);
    font-style: italic;
    transition: color var(--theme-speed) var(--ease-in-out);
}


/* ==========================================================================
   13. FLIP ZONES (click-to-turn overlays on page edges)
   ========================================================================== */

.flip-zone {
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    z-index: 15;
    cursor: pointer;
    background: none;
    -webkit-tap-highlight-color: transparent;
}

.flip-zone--prev {
    left: var(--leather-border);
}

.flip-zone--next {
    right: var(--leather-border);
}

/* Chevron arrows */
.flip-zone::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 0.75em;
    height: 0.75em;
    border-style: solid;
    border-color: var(--accent);
    opacity: 0.3;
    transition:
        opacity var(--duration-normal) var(--ease-out),
        transform var(--duration-normal) var(--ease-out);
}

.flip-zone--prev::after {
    right: 40%;
    border-width: 0 0 2px 2px;
    transform: translateY(-50%) rotate(45deg);
}

.flip-zone--next::after {
    left: 40%;
    border-width: 2px 2px 0 0;
    transform: translateY(-50%) rotate(45deg);
}

.flip-zone:hover::after {
    opacity: 0.7;
}

.flip-zone--prev:hover::after {
    transform: translateY(-50%) translateX(-3px) rotate(45deg);
}

.flip-zone--next:hover::after {
    transform: translateY(-50%) translateX(3px) rotate(45deg);
}

.flip-zone:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: -2px;
}

.flip-zone:focus-visible::after {
    opacity: 0.7;
}

@media (max-width: 480px) {
    .flip-zone {
        width: 36px;
    }
}


/* ==========================================================================
   14. POSITION DOTS
   ========================================================================== */

.spread-dots {
    display: flex;
    gap: var(--dot-gap);
    justify-content: center;
    margin-top: 2em;
    z-index: 20;
}

.spread-dot {
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 50%;
    border: 1px solid var(--gold);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition:
        background var(--hover-speed) var(--ease-out),
        transform var(--hover-speed) var(--ease-out),
        border-color var(--theme-speed) var(--ease-in-out);
}

.spread-dot:hover {
    transform: scale(1.4);
}

.spread-dot--active {
    background: var(--gold);
}


/* ==========================================================================
   15. DETAIL VIEW
   ========================================================================== */

.detail {
    position: fixed;
    inset: 0;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
    background: var(--bg);
    transform: translateY(20px);
    transition:
        opacity var(--duration-slow) var(--ease-out),
        transform var(--duration-slow) var(--ease-out),
        background var(--theme-speed) var(--ease-in-out);
}

.detail--active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.detail__back {
    position: fixed;
    top: var(--space-6);
    left: var(--space-6);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--accent);
    z-index: 51;
    transition: color var(--duration-fast) var(--ease-out);
}

.detail__back:hover {
    text-decoration: underline;
}

.detail__page {
    max-width: 900px;
    margin: 0 auto;
    padding: 80px 48px 64px;
    background: var(--page);
    min-height: 100vh;
    position: relative;
    transition:
        background var(--theme-speed) var(--ease-in-out),
        box-shadow var(--theme-speed) var(--ease-in-out);
}

/* Gold inset border on detail page */
.detail__page::before {
    content: '';
    position: absolute;
    inset: var(--gold-inset);
    border: 1px solid var(--gold);
    pointer-events: none;
    transition: border-color var(--theme-speed) var(--ease-in-out);
}

.detail__content {
    position: relative;
}

.detail__title {
    font-size: 2rem;
    margin-bottom: 0.5em;
}

.detail__content h2 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--text-title);
    text-shadow: var(--text-glow);
    margin: 1.5em 0 0.5em;
}

.detail__content h3 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--text-title);
    text-shadow: var(--text-glow);
    margin: 1.2em 0 0.3em;
}

.detail__content p {
    color: var(--text-body);
    margin-bottom: 0.75em;
    line-height: 1.7;
}

.detail__content ul {
    margin: 0.5em 0 1em 1.5em;
    list-style: disc;
}

.detail__content li {
    color: var(--text-body);
    margin-bottom: 0.4em;
    line-height: 1.6;
}

.detail__content em {
    color: var(--text-subtle);
}

.detail__content .gold-rule {
    margin: 2em auto;
}

/* Detail CV entries */
.detail-cv-entry {
    margin-bottom: 1.5em;
}

.detail-cv-meta {
    font-size: 0.9rem;
    color: var(--text-subtle);
    margin-bottom: 0.5em;
}


/* ==========================================================================
   16. THEME TOGGLE
   ========================================================================== */

.theme-toggle {
    position: fixed;
    top: 24px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--toggle-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition:
        background var(--theme-speed) var(--ease-in-out),
        transform var(--hover-speed) var(--ease-out);
}

.theme-toggle:hover {
    background: rgba(0, 0, 0, 0.18);
}

html.dark .theme-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
}

.theme-toggle__icon {
    position: absolute;
    width: 22px;
    height: 22px;
    transition:
        opacity 0.5s var(--ease-in-out),
        transform 0.5s var(--ease-in-out);
}

.theme-toggle__icon svg {
    width: 100%;
    height: 100%;
    fill: var(--text-title);
    color: var(--text-title);
    transition:
        fill var(--theme-speed) var(--ease-in-out),
        color var(--theme-speed) var(--ease-in-out);
}

/* Sun visible in light mode */
.theme-toggle__icon--sun {
    opacity: 1;
    transform: rotate(0deg);
}

.theme-toggle__icon--moon {
    opacity: 0;
    transform: rotate(-90deg);
}

/* Dark mode: hide sun, show moon */
html.dark .theme-toggle__icon--sun {
    opacity: 0;
    transform: rotate(90deg);
}

html.dark .theme-toggle__icon--moon {
    opacity: 1;
    transform: rotate(0deg);
}


/* ==========================================================================
   17. STPAGEFLIP INTEGRATION
   ========================================================================== */

/* Flipbook container — StPageFlip renders into this.
   Explicit dimensions + overflow:hidden clips raw pages before JS,
   then StPageFlip creates its own wrapper and manages layout.
   z-index 12 places it above the spine (11) so flipping pages
   don't animate behind the spine ridge. The spine still peeks
   through in the leather border area above and below. */
.book__flipbook {
    position: relative;
    z-index: 12;
    width: calc(var(--page-width) * 2 + var(--spine-width));
    height: var(--page-height);
    overflow: hidden;
}

/* Pages inside StPageFlip — maintain our styling */
.stf__parent .book__page {
    background: var(--surface);
}


/* ==========================================================================
   18. ZOOM ANIMATION
   ========================================================================== */

.scene--zooming-in .book {
    animation: zoom-in var(--zoom-speed) var(--ease-out) forwards;
}

.scene--zooming-out .book {
    animation: zoom-out 0.45s var(--ease-in-out) forwards;
}

@keyframes zoom-in {
    0% {
        transform: rotateX(var(--book-angle)) scale(1);
        opacity: 1;
    }
    70% {
        transform: rotateX(5deg) scale(1.4);
        opacity: 1;
    }
    100% {
        transform: rotateX(0deg) scale(1.5);
        opacity: 0;
    }
}

@keyframes zoom-out {
    0% {
        transform: rotateX(0deg) scale(1.5);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: rotateX(var(--book-angle)) scale(1);
        opacity: 1;
    }
}

.scene--detail-active .book {
    opacity: 0;
    pointer-events: none;
}

.scene--detail-active .spread-dots,
.scene--detail-active .hint {
    opacity: 0;
    pointer-events: none;
}

.scene--detail-active ~ .detail {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}


/* ==========================================================================
   19. HOVER STATES
   ========================================================================== */

/* Zoomable spread content */
.page-content[data-detail] {
    cursor: pointer;
    transition:
        transform var(--duration-normal) var(--ease-out),
        box-shadow var(--duration-normal) var(--ease-out);
}

.page-content[data-detail]:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 12px var(--shadow-page);
}

.toc__link:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.spread-dot:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 50%;
}

.detail__back:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}


/* ==========================================================================
   20. INTERACTION HINT
   ========================================================================== */

.hint {
    text-align: center;
    color: var(--accent);
    font-family: var(--font-body);
    font-style: italic;
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 1.2em;
    z-index: 20;
    transition: opacity 0.6s var(--ease-out);
}



/* ==========================================================================
   22. STAGGERED CONTENT ENTRANCE
   ========================================================================== */

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-content > * {
    opacity: 0;
    animation: fade-in-up var(--duration-slow) var(--ease-out) forwards;
}

.page-content > *:nth-child(1) { animation-delay: 0.05s; }
.page-content > *:nth-child(2) { animation-delay: 0.1s; }
.page-content > *:nth-child(3) { animation-delay: 0.15s; }
.page-content > *:nth-child(4) { animation-delay: 0.2s; }
.page-content > *:nth-child(5) { animation-delay: 0.25s; }
.page-content > *:nth-child(6) { animation-delay: 0.3s; }
.page-content > *:nth-child(7) { animation-delay: 0.35s; }
.page-content > *:nth-child(8) { animation-delay: 0.4s; }

/* Don't animate pseudo-elements used for gold corners */
.page-content::before,
.page-content::after {
    animation: none;
    opacity: 1;
}


/* ==========================================================================
   23. AMBIENT GLOW
   ========================================================================== */

.ambient-glow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.3;
    z-index: 0;
    pointer-events: none;
}

.ambient-glow::before,
.ambient-glow::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
    transition: background var(--theme-speed) var(--ease-in-out);
}

.ambient-glow::before {
    width: 500px;
    height: 500px;
    top: -10%;
    left: -5%;
    background: radial-gradient(circle, rgba(255,200,120,0.6), rgba(255,170,100,0.2), transparent 70%);
    animation: ambient-drift-1 20s var(--ease-in-out) infinite alternate;
}

.ambient-glow::after {
    width: 400px;
    height: 400px;
    bottom: -5%;
    right: -5%;
    background: radial-gradient(circle, rgba(255,220,180,0.5), rgba(255,190,140,0.15), transparent 70%);
    animation: ambient-drift-2 25s var(--ease-in-out) infinite alternate;
}

/* Dark mode: cool violet/blue aurora */
html.dark .ambient-glow::before {
    background: radial-gradient(circle, rgba(100,80,180,0.5), rgba(80,60,160,0.15), transparent 70%);
}

html.dark .ambient-glow::after {
    background: radial-gradient(circle, rgba(60,100,200,0.4), rgba(40,80,180,0.1), transparent 70%);
}

@keyframes ambient-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 60px) scale(1.15); }
}

@keyframes ambient-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-60px, -40px) scale(1.1); }
}


/* ==========================================================================
   23. AMBIENT CANVAS (particles)
   ========================================================================== */

#ambient-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}


/* ==========================================================================
   24. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01s !important;
        transition-duration: 0.01s !important;
    }
}


/* ==========================================================================
   25. NO-JS DARK MODE FALLBACK
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    html:not(.light-applied) {
        --bg:            #1a1a2e;
        --bg-center:     #222240;
        --page:          #2a2a3a;
        --leather:       #3a2518;
        --gold:          #d4b856;
        --spine:         #2a1a10;
        --text-title:    #e8e0cc;
        --text-body:     #c8c0b0;
        --text-subtle:   #8a8278;
        --shadow-page:   rgba(0, 0, 20, 0.3);
        --shadow-desk:   rgba(0, 0, 10, 0.5);
        --text-glow:     0 0 8px rgba(232, 224, 204, 0.3);
        --toggle-bg:     rgba(255, 255, 255, 0.1);
    }
}


/* ==========================================================================
   26. TABLET (481px – 768px)
   ========================================================================== */

@media (max-width: 768px) {
    :root {
        --page-width: calc((90vw - var(--spine-width) - var(--leather-border) * 2) / 2);
        --page-height: calc(var(--page-width) * 4 / 3);
        --page-padding: var(--space-6);
    }

    .book__cover {
        max-width: 90vw;
    }

    .detail__page {
        padding: 80px var(--space-8) 48px;
    }
}


/* ==========================================================================
   27. MOBILE (≤480px) — Scaled-down book
   ========================================================================== */

@media (max-width: 480px) {
    :root {
        --book-angle: 25deg;
        --spine-width: 16px;
        --leather-border: 6px;
        --page-width: calc((96vw - var(--spine-width) - var(--leather-border) * 2) / 2);
        --page-height: calc(var(--page-width) * 4 / 3);
        --page-padding: var(--space-3);
        --gold-inset: 3px;
        --corner-size: 8px;
    }

    .book__cover {
        max-width: 96vw;
    }

    .scene {
        justify-content: flex-start;
        padding-top: 22vh;
    }

    .spread-dots {
        margin-top: 4em;
    }

    .book__page {
        font-size: 9px;
    }

    .bookplate {
        padding: 1em;
        max-width: 140px;
    }

    .bookplate__name {
        font-size: 2.5em;
    }

    /* Override rem-based sizes inside book pages to use the page font-size */
    .page-title { font-size: 1.6em; }
    .page-subtitle { font-size: 1.1em; }
    .page-content p,
    .page-content li { font-size: 1em; line-height: 1.4; }
    .page-content em { font-size: 0.9em; }
    .cv-entry__title { font-size: 1.05em; }
    .cv-entry__company { font-size: 0.85em; }
    .cv-entry__date { font-size: 0.8em; }
    .cv-entry__desc { font-size: 0.9em; }
    .diss-title { font-size: 1.1em; }
    .diss-meta { font-size: 0.85em; }
    .toc__title { font-size: 1em; }
    .toc__number { font-size: 0.9em; }
    .bookplate__label { font-size: 0.75em; }
    .skill-list li { font-size: 0.9em; }

    /* Detail view */
    .detail__page {
        padding: 60px 24px 32px;
    }

    .detail__back {
        top: 16px;
        left: 16px;
        font-size: 0.85rem;
    }

    .detail__title {
        font-size: 1.5rem;
    }
}