/* Portfolio-owned additions to the case study (not part of its own build):
   the way back to the portfolio, and a dimmer cream for the portfolio's dark theme.
   Keep this file and its <link> when re-exporting the case study. */

/* ── Way back ─────────────────────────────────────────────────────────────── */
/* A quiet pill up top that tucks away while reading down, and a line after the footer. */
.pt-back { position: fixed; z-index: 50; top: calc(14px + env(safe-area-inset-top)); left: calc(14px + env(safe-area-inset-left));
           display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 11px; border-radius: 999px;
           font: 600 13px/1 var(--sans, "Outfit", system-ui, sans-serif); color: var(--ink, #2e2820); text-decoration: none;
           background: color-mix(in srgb, var(--bg, #f4eee3) 82%, transparent); border: 1px solid var(--line, rgba(64, 50, 34, .16));
           -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
           transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1), opacity .3s ease, border-color .2s ease; }
.pt-back:hover { border-color: var(--ink, #2e2820); }
.pt-back span { transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1); }
.pt-back:hover span { transform: translateX(-3px); }
.pt-back.is-hidden { transform: translateY(calc(-100% - 20px)); opacity: 0; pointer-events: none; }
.pt-foot { max-width: 940px; margin: 0 auto; padding: 0 22px 64px; box-sizing: content-box; }
.pt-foot a { display: inline-flex; gap: 10px; align-items: baseline; font: 600 15.5px var(--sans, "Outfit", system-ui, sans-serif);
             color: var(--ink, #2e2820); text-decoration: none; }
.pt-foot a:hover { color: var(--accent, #e2691a); }
.pt-foot small { font: 500 12px var(--mono, ui-monospace, monospace); color: var(--dim, #7a6f60); }
/* phones: the title art sits top-left, right where the pill is, so give it room */
@media (max-width: 760px) { .pt-foot { padding: 0 16px 48px; } #root { padding-top: 40px; } }

/* ── Dimmed for the portfolio's dark theme ──────────────────────────────────── */
/* The page stays cream (it reads best), just a step down from #f4eee3 so it's
   easier on the eyes after the slate portfolio. Everything else is unchanged. */
html.pt-dim { --bg: #e2d9c8; }

/* ── Smooth scroll ──────────────────────────────────────────────────────────── */
/* Lenis's own stylesheet (lenis/dist/lenis.css, v1.1.9), as the portfolio uses it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }