/* Portfolio — slide-based storytelling view */

/* ── Color tokens ── */
#portfolio {
    --pf-bg: #0a0a0f;
    --pf-text: rgba(235, 225, 200, 1);
    --pf-text-mid: rgba(235, 225, 200, 0.8);
    --pf-text-dim: rgba(235, 225, 200, 0.6);
    --pf-text-faint: rgba(235, 225, 200, 0.25);
    --pf-accent: rgba(212, 178, 100, 0.75);
    --pf-border: rgba(235, 225, 200, 0.12);
    --pf-border-strong: rgba(235, 225, 200, 0.28);
    --pf-footer-bg: rgba(10, 10, 15, 0.85);
    --pf-link: rgba(235, 225, 200, 0.85);
    --pf-link-hover: rgba(235, 225, 200, 1);
    --pf-link-underline: rgba(235, 225, 200, 0.3);
    --pf-link-underline-hover: rgba(235, 225, 200, 0.6);
    --pf-visual-bg: #f5f5f5;
    --pf-expand-bg: rgba(10, 10, 15, 0.8);
    --pf-name: rgba(235, 225, 200, 0.9);
}

/* Noise texture overlay */
.pf-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    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.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 200px 200px;
    opacity: 0.25;
    mix-blend-mode: overlay;
}

.pf-light .pf-slide::before {
    opacity: 0.6;
    mix-blend-mode: overlay;
}

/* Dark mode animated background texture */
.pf-slide::after {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse 50% 40% at 20% 25%, rgba(196,163,90,0.10), transparent 70%),
        radial-gradient(ellipse 45% 50% at 80% 75%, rgba(196,163,90,0.08), transparent 65%),
        radial-gradient(ellipse 35% 30% at 50% 45%, rgba(196,163,90,0.04), transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: shaderDrift 25s ease-in-out infinite alternate;
}

/* Light mode animated background texture */
.pf-light .pf-slide::after {
    content: '';
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background:
        radial-gradient(ellipse 40% 30% at 30% 35%, rgba(56,73,148,0.12), transparent 70%),
        radial-gradient(ellipse 35% 40% at 70% 65%, rgba(56,73,148,0.10), transparent 65%),
        radial-gradient(ellipse 30% 25% at 50% 50%, rgba(56,73,148,0.05), transparent 60%);
    pointer-events: none;
    z-index: 0;
    animation: shaderDrift 25s ease-in-out infinite alternate;
}

@keyframes shaderDrift {
    0% { transform: translate(0%, 0%) rotate(0deg); }
    33% { transform: translate(-8%, 5%) rotate(2deg); }
    66% { transform: translate(5%, -8%) rotate(-1.5deg); }
    100% { transform: translate(-3%, 3%) rotate(1deg); }
}

.pf-light .pf-slide > * {
    position: relative;
    z-index: 1;
}

#portfolio.pf-light {
    --pf-bg: #f5f4f0;
    --pf-text: rgba(25, 20, 10, 0.95);
    --pf-text-mid: rgba(25, 20, 10, 0.7);
    --pf-text-dim: rgba(25, 20, 10, 0.5);
    --pf-text-faint: rgba(25, 20, 10, 0.15);
    --pf-accent: rgba(150, 120, 45, 0.8);
    --pf-border: rgba(25, 20, 10, 0.1);
    --pf-border-strong: rgba(25, 20, 10, 0.2);
    --pf-footer-bg: rgba(245, 244, 240, 0.9);
    --pf-link: rgba(150, 120, 45, 0.9);
    --pf-link-hover: rgba(150, 120, 45, 1);
    --pf-link-underline: rgba(150, 120, 45, 0.3);
    --pf-link-underline-hover: rgba(150, 120, 45, 0.6);
    --pf-visual-bg: #fff;
    --pf-expand-bg: rgba(245, 244, 240, 0.9);
    --pf-name: rgba(25, 20, 10, 0.8);
}

/* When portfolio is active, override body defaults */
body.portfolio-active {
    overflow: hidden;
}

body.portfolio-active::before {
    /* Disable CRT scanlines in portfolio */
    display: none;
}

/* Portfolio container */
#portfolio {
    position: fixed;
    inset: 0;
    z-index: 800;
    background-color: var(--pf-bg);
    overflow: hidden;
    transition: background-color 0.4s ease;
}


#portfolio.hidden {
    display: none;
}

/* ── Slides ── */

.pf-slide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    overflow-y: auto;
}

/* Incoming slide fades in */
.pf-slide.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
    transition: opacity 0.5s ease;
}

/* Outgoing slides disappear fast — no overlap with incoming */
.pf-slide.prev,
.pf-slide.next {
    opacity: 0;
    z-index: 1;
    transition: opacity 0.1s ease;
}

/* Same-section transition: header stays, only visual animates */
.pf-slide.active.pf-same-section {
    transition: none;
    opacity: 1;
}

.pf-slide.active.pf-same-section .pf-slide-visual {
    animation: visualSwap 0.4s ease both;
}

@keyframes visualSwap {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Same-title transition (consecutive slides sharing data-slide-title):
   heading stays in place (no animation), body fades + slides in.
   Visual already animates via .pf-same-section above. */
.pf-slide.active.pf-same-title .pf-slide-head .pf-body {
    animation: bodySwap 0.45s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.pf-slide.active.pf-same-title .pf-slide-head .pf-heading {
    animation: none;
}

@keyframes bodySwap {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Slide content layouts ── */

/* Inner wrapper */
.pf-slide-inner {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Individual vertical panel (snaps to viewport) */
.pf-panel {
    min-height: 100%;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 43px 49px;
    padding-bottom: 80px; /* space for footer */
    box-sizing: border-box;
}

.pf-panel-full {
    padding: 0;
}

/* Slide header area — heading left, body pinned right */
.pf-slide-head {
    display: flex;
    align-items: flex-start;
    gap: 48px;
    width: 100%;
}

.pf-slide-head .pf-heading {
    flex: 0 0 auto;
    max-width: 480px;
    margin-right: auto;
}

.pf-slide-head .pf-body {
    flex: 1 1 0;
    max-width: 580px;
    text-align: right;
}

/* Visual asset area below header */
.pf-slide-visual {
    flex: 1;
    width: 100%;
    margin-top: 24px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--pf-border-strong);
    position: relative;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.pf-slide-visual:hover {
    transform: scale(1.02);
    border-color: rgba(196, 163, 90, 0.4);
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.4),
        0 0 40px rgba(196, 163, 90, 0.06);
}

.pf-light .pf-slide-visual:hover {
    border-color: rgba(56, 73, 148, 0.3);
    box-shadow:
        0 16px 50px rgba(0, 0, 0, 0.1),
        0 0 40px rgba(56, 73, 148, 0.06);
}

/* "Bare" visual: no wrapper background/border/lift; let each child
   (video/img/iframe) own its hover affordance. Use for media-only
   slides where the wrapper would otherwise be a big monolithic box. */
.pf-slide-visual.pf-bare,
.pf-light .pf-slide-visual.pf-bare {
    background: transparent;
    border: none;
    cursor: default;
}
.pf-slide-visual.pf-bare:hover {
    transform: none;
    border-color: transparent;
    box-shadow: none;
}
.pf-slide-visual.pf-bare > video,
.pf-slide-visual.pf-bare > img,
.pf-slide-visual.pf-bare > iframe,
.pf-slide-visual.pf-bare > .pf-pane {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    border-radius: 6px;
}
.pf-slide-visual.pf-bare > video:hover,
.pf-slide-visual.pf-bare > img:hover,
.pf-slide-visual.pf-bare > iframe:hover,
.pf-slide-visual.pf-bare > .pf-pane:hover {
    transform: scale(1.015);
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.35),
        0 0 28px rgba(196, 163, 90, 0.05);
}
.pf-slide-visual.pf-bare > .pf-pane:hover {
    border-color: rgba(196, 163, 90, 0.4);
}
.pf-light .pf-slide-visual.pf-bare > video:hover,
.pf-light .pf-slide-visual.pf-bare > img:hover,
.pf-light .pf-slide-visual.pf-bare > iframe:hover,
.pf-light .pf-slide-visual.pf-bare > .pf-pane:hover {
    box-shadow:
        0 12px 36px rgba(0, 0, 0, 0.10),
        0 0 28px rgba(56, 73, 148, 0.05);
}
.pf-light .pf-slide-visual.pf-bare > .pf-pane:hover {
    border-color: rgba(56, 73, 148, 0.3);
}

.pf-slide-visual iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 6px;
    background: #0a0a0f;
    pointer-events: none;
}

.pf-slide-visual {
    background: #0a0a0f;
    position: relative;
    z-index: 2;
}

.pf-light .pf-slide-visual {
    background: #f5f4f0;
    border-color: var(--pf-border-strong);
}

/* CRT / ink bleed — subtle glow on hover */
.pf-heading,
.pf-body,
.pf-fn-text,
.pf-fn-body {
    transition: text-shadow 0.4s ease, color 0.4s ease;
}

/* Per-character ink bleed / phosphor glow on hover */
.pf-char {
    transition: text-shadow 2s ease-out;
    cursor: default;
}

.pf-char:hover {
    text-shadow: 0 0 2px currentColor;
    transition: text-shadow 0.1s ease;
}

.pf-light .pf-char:hover {
    text-shadow: 0 0 1.5px currentColor;
}

/* Hover-reveal link & city-hover span: phosphor glow when hovered or auto-toured */
.pf-hover-reveal,
.pf-city-hover {
    transition: color 0.2s, text-shadow 0.4s ease;
}
.pf-hover-reveal:hover,
.pf-hover-reveal.pf-reveal-active,
.pf-city-hover:hover,
.pf-city-hover.pf-reveal-active {
    text-shadow: 0 0 2px currentColor, 0 0 6px currentColor;
    transition: color 0.2s, text-shadow 0.2s ease;
}
.pf-light .pf-hover-reveal:hover,
.pf-light .pf-hover-reveal.pf-reveal-active,
.pf-light .pf-city-hover:hover,
.pf-light .pf-city-hover.pf-reveal-active {
    text-shadow: 0 0 1px currentColor, 0 0 3px currentColor;
}

/* ── Bouncing title slide ── */
.pf-slide-bounce {
    overflow: hidden;
}

.pf-bounce-text {
    position: absolute;
    top: 0;
    left: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(14px, 2vw, 22px);
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--pf-text-dim);
    white-space: nowrap;
    will-change: transform;
    z-index: 3;
    text-shadow: 0 0 2px currentColor, 0 0 6px currentColor;
}

/* ── Quote slide ── */
.pf-slide-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.pf-quote-stream {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 16px;
    line-height: 1.75;
    color: var(--pf-text);
    max-width: 800px;
    width: 100%;
}

.pf-quote-stream .pf-stream-line {
    margin: 0 0 2.2em 0;
}

.pf-quote-stream .pf-stream-block {
    margin: 0 0 2.2em 0;
}

.pf-quote-stream .pf-stream-block .pf-stream-line {
    margin: 0 0 0.4em 0;
}

.pf-quote-stream .pf-stream-block .pf-stream-line:last-child {
    margin-bottom: 0;
}

.pf-quote-stream .pf-char {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pf-quote-stream .pf-char.shown {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pf-quote-stream .pf-char {
        opacity: 1;
        transition: none;
    }
}

/* ── Split panel slide (structured vs unstructured) ── */
.pf-slide-split-panel {
    display: flex;
    align-items: stretch;
    padding: 0;
}

.pf-split-left,
.pf-split-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}

.pf-split-divider {
    width: 2px;
    background: var(--pf-border-strong);
    flex-shrink: 0;
}

.pf-split-label {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(28px, 5vw, 56px);
    color: var(--pf-text);
    text-align: center;
}

/* ── Three pillars slide ── */
.pf-pillars-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    max-width: 1000px;
    width: 100%;
}

/* Concentric rings diagram */
.pf-rings-svg {
    width: 300px;
    height: 300px;
    margin-bottom: 36px;
    flex-shrink: 0;
}

.pf-ring-center {
    fill: var(--pf-text-dim);
}

.pf-ring {
    transition: stroke 0.3s ease, opacity 0.3s ease;
}

.pf-ring-inner {
    stroke: var(--pf-text-faint);
}

.pf-ring-pillar {
    stroke: var(--pf-text-dim);
    cursor: pointer;
}

.pf-ring-pillar.active {
    stroke: var(--pf-accent);
}

.pf-ring-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    fill: var(--pf-text-mid);
    transition: fill 0.3s ease;
    pointer-events: none;
}

.pf-ring-label-dim {
    fill: var(--pf-text-dim);
}

.pf-ring-label-inner {
    fill: var(--pf-text-mid);
}

.pf-ring-label.active {
    fill: var(--pf-accent);
}

/* Pillar columns */
.pf-pillars-wrap {
    display: flex;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.pf-pillar {
    flex: 1;
    padding: 32px 40px;
    text-align: left;
    cursor: default;
}

.pf-pillar-divider {
    width: 1px;
    background: var(--pf-border-strong);
    align-self: stretch;
    flex-shrink: 0;
}

.pf-pillar-category {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--pf-accent);
    margin-bottom: 16px;
}

.pf-pillar-title {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 400;
    color: var(--pf-text);
    margin: 0 0 8px;
    line-height: 1.1;
    transition: color 0.3s ease;
}

.pf-pillar-subtitle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    color: var(--pf-text-mid);
    margin-bottom: 4px;
}

.pf-pillar-type {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 300;
    color: var(--pf-text-dim);
    font-style: italic;
}

.pf-pillar.pf-pillar-active .pf-pillar-title {
    color: var(--pf-accent);
}

@media (max-width: 768px) {
    .pf-slide-split-panel { flex-direction: column; }
    .pf-split-divider { width: 100%; height: 2px; }
    .pf-pillars-wrap { flex-direction: column; }
    .pf-pillar-divider { width: 100%; height: 1px; }
    .pf-rings-svg { width: 200px; height: 200px; }
}

/* ── Footnotes slide ── */

.pf-slide-footnotes .pf-panel {
    overflow-y: auto;
}

.pf-fn-text {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: clamp(22px, 3.5vw, 40px);
    line-height: 1.7;
    color: var(--pf-text);
    max-width: 560px;
    position: relative;
    z-index: 2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.pf-fn-ref {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.45em;
    color: var(--pf-accent);
    cursor: pointer;
    vertical-align: super;
    line-height: 0;
    padding: 0 2px;
    transition: color 0.2s;
}

.pf-fn-ref:hover {
    color: var(--pf-text);
}

.pf-fn-ref.active {
    color: var(--pf-text);
}

.pf-fn-note {
    display: none;
    margin-top: 24px;
    padding: 24px 0;
    border-top: 1px solid var(--pf-border-strong);
    animation: fnFadeIn 0.35s ease both;
    flex: 1;
    gap: 32px;
    align-items: flex-start;
}

.pf-fn-note.open {
    display: flex;
}

.pf-fn-body {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 300;
    line-height: 1.8;
    color: var(--pf-text-mid);
    max-width: 480px;
    position: relative;
    z-index: 2;
}

.pf-fn-body p {
    margin: 0;
}

.pf-fn-body p + p {
    margin-top: 1.4em;
}

.pf-fn-body a {
    color: var(--pf-text-mid);
    text-decoration: underline;
    text-decoration-color: var(--pf-border-strong);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s, color 0.2s;
}

.pf-fn-body a:hover {
    color: var(--pf-text);
    text-decoration-color: var(--pf-text-dim);
}

/* Footnote image gallery — reflowing tiles, right side */
.pf-fn-visual {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-content: flex-start;
    justify-content: flex-end;
    animation: fnVisualIn 0.8s ease both;
}

.pf-fn-visual:empty {
    display: none;
}

.pf-fn-img {
    position: relative;
    flex: 0 0 200px;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid #353332;
    background: var(--pf-bg);
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.pf-fn-img > svg {
    transition: opacity 0.25s ease;
}

.pf-fn-img-hover {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
    border-radius: 13px 13px 0 0;
    background: #0a0a0f;
}

.pf-fn-img:hover .pf-fn-img-hover { opacity: 1; }
/* Only fade out the SVG on hover if there's a video overlay to swap in.
   Grammarly tiles have SVGs but no .pf-fn-img-hover video — without :has,
   their SVGs would fade to a black tile on hover. */
.pf-fn-img:has(.pf-fn-img-hover):hover > svg { opacity: 0; }

.pf-fn-visual.play-all .pf-fn-img-hover { opacity: 1; }
.pf-fn-visual.play-all .pf-fn-img > svg { opacity: 0; }

.pf-tile-playall-toggle {
    display: inline-block;
    margin: 14px 0 4px;
    padding: 6px 12px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pf-text-dim);
    background: transparent;
    border: 1px solid var(--pf-border);
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.pf-tile-playall-toggle:hover {
    color: var(--pf-text);
    border-color: var(--pf-border-strong);
}
.pf-tile-playall-toggle[aria-pressed="true"] {
    color: var(--pf-text);
    border-color: var(--pf-border-strong);
    background: rgba(196, 163, 90, 0.08);
}

@media (prefers-reduced-motion: reduce) {
    .pf-fn-img > svg, .pf-fn-img-hover { transition: none; }
}

.pf-fn-img:hover {
    border-color: var(--pf-border-strong);
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 30px rgba(196, 163, 90, 0.08);
}

.pf-light .pf-fn-img:hover {
    border-color: rgba(56, 73, 148, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pf-fn-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* Embedded iframe tile */
.pf-fn-img-embed {
    position: relative;
}

.pf-fn-img-embed iframe {
    width: 100%;
    height: 100%;
    border: none;
    pointer-events: none;
    background: #0a0a0f;
}

.pf-fn-img-label {
    padding: 8px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-align: center;
    color: #0a0a0f;
    background: rgba(203, 194, 173, 0.75);
    border-top: 1px solid #353332;
}

.pf-light .pf-fn-img-label {
    background: rgba(56, 73, 148, 0.12);
    color: rgba(30, 25, 15, 0.8);
    border-color: rgba(30, 25, 15, 0.12);
}

/* Gallery lightbox — bespoke */
.pf-gallery-wrap {
    display: flex;
    max-width: 95vw;
    max-height: 90vh;
    width: 95%;
    cursor: default;
    gap: 0;
    border-radius: 13px;
    overflow: hidden;
    border: 1px solid #353332;
    animation: lbContentIn 0.4s ease both;
}

.pf-gallery-img {
    flex: 1;
    min-width: 0;
    object-fit: cover;
    display: block;
}

.pf-gallery-side {
    flex: 0 0 300px;
    background: rgba(15, 15, 20, 0.95);
    display: flex;
    flex-direction: column;
    padding: 0;
    border-left: 1px solid #353332;
}

.pf-gallery-titlebar {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 20px;
    border-bottom: 1px solid #252525;
}

.pf-gallery-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.pf-gallery-dot-r { background: #ff5f57; }
.pf-gallery-dot-y { background: #febc2e; }
.pf-gallery-dot-g { background: #28c840; }

.pf-gallery-path {
    margin-left: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #555;
}

.pf-gallery-body {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
}

.pf-gallery-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--pf-accent);
    margin-bottom: 16px;
}

.pf-gallery-caption {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.9;
    color: var(--pf-text-mid);
    flex: 1;
    padding-top: 12px;
    border-top: 1px solid #252525;
}

.pf-gallery-footer {
    padding: 14px 20px;
    border-top: 1px solid #252525;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pf-gallery-nav {
    display: flex;
    gap: 6px;
}

.pf-gallery-prev,
.pf-gallery-next {
    background: none;
    border: 1px solid #353332;
    border-radius: 4px;
    color: var(--pf-text-dim);
    font-size: 16px;
    cursor: pointer;
    padding: 4px 12px;
    transition: color 0.2s, border-color 0.2s;
    font-family: serif;
}

.pf-gallery-prev:hover,
.pf-gallery-next:hover {
    color: var(--pf-text);
    border-color: var(--pf-accent);
}

.pf-gallery-hints {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    letter-spacing: 0.08em;
    color: #333;
}

.pf-gallery-hints kbd {
    color: #444;
    font-family: inherit;
}

@media (max-width: 768px) {
    .pf-gallery-wrap {
        flex-direction: column;
        max-height: 90vh;
    }
    .pf-gallery-img {
        max-height: 50vh;
    }
    .pf-gallery-side {
        flex: 0 0 auto;
        border-left: none;
        border-top: 1px solid #353332;
    }
}

@keyframes fnFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fnVisualIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 768px) {
    .pf-fn-note.open {
        flex-direction: column;
    }
    .pf-fn-visual {
        justify-content: flex-start;
    }
    .pf-fn-img {
        flex: 0 0 calc(50% - 6px);
    }
}

/* Editor gallery footnote: stack body + cluster vertically earlier than other
   footnotes since the cluster needs more horizontal room. */
@media (max-width: 1200px) {
    .pf-fn-note.open:has(.pf-gallery-wall) {
        flex-direction: column;
    }
    .pf-fn-note.open:has(.pf-gallery-wall) .pf-fn-body {
        max-width: 100%;
    }
    .pf-gallery-wall {
        align-self: center;
        width: 100%;
    }
}

/* City name hover — subtle underline */
.pf-city-hover {
    text-decoration: underline;
    text-decoration-color: var(--pf-border-strong);
    text-underline-offset: 3px;
    cursor: default;
    transition: color 0.2s, text-shadow 0.4s ease;
}

.pf-city-hover:hover,
.pf-city-hover.pf-reveal-active {
    color: var(--pf-text);
    transition: color 0.2s, text-shadow 0.2s ease;
}

/* Map visual — explicit height for iframe */
.pf-fn-visual-map {
    position: relative;
    flex: 1;
    height: 45vh;
    min-height: 300px;
}

/* Hover-reveal image — hidden until link is hovered */
.pf-fn-visual:has(.pf-reveal-img) {
    position: relative;
}

.pf-reveal-img {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    max-height: 50vh;
    border-radius: 4px;
    opacity: 0;
    transform: translateY(3px);
    transition:
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    /* drop-shadow respects the image's alpha channel, so transparent
       corners (e.g. PNGs with rounded edges) don't get a phantom box. */
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3));
    pointer-events: none;
}

.pf-reveal-img.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ASCII art default visual */
.pf-fn-ascii {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    line-height: 1.2;
    color: var(--pf-text-dim);
    margin: 0;
    white-space: pre;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0.6;
    transition: opacity 0.4s ease;
}

.pf-fn-visual:has(.pf-reveal-img.visible) .pf-fn-ascii {
    opacity: 0;
}

/* Grammarly footnote tiles — SVGs gently drift at rest, push outward on hover.
   Each element composes (drift-x, drift-y) from a JS RAF loop with (hx, hy)
   from the hover state via calc(). hx/hy are @property-registered so they
   transition smoothly when hover toggles. */
@property --hx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --hy { syntax: '<length>'; inherits: false; initial-value: 0px; }

.pf-grm-leadership ellipse,
.pf-grm-rai rect,
.pf-grm-sdk rect {
    transform: translate(
        calc(var(--drift-x, 0px) + var(--hx, 0px)),
        calc(var(--drift-y, 0px) + var(--hy, 0px))
    );
    transition:
        --hx 0.55s cubic-bezier(0.4, 0, 0.2, 1),
        --hy 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Leadership: 4-petal Venn blooms outward */
.pf-grm-leadership:hover ellipse:nth-of-type(1) { --hy: -56px; }
.pf-grm-leadership:hover ellipse:nth-of-type(2) { --hx: -56px; }
.pf-grm-leadership:hover ellipse:nth-of-type(3) { --hx: 56px; }
.pf-grm-leadership:hover ellipse:nth-of-type(4) { --hy: 56px; }

/* Responsible AI: top bar lifts, bottom rects spread */
.pf-grm-rai:hover rect:nth-of-type(1) { --hy: -16px; }
.pf-grm-rai:hover rect:nth-of-type(2) { --hx: -18px; --hy: 14px; }
.pf-grm-rai:hover rect:nth-of-type(3) { --hx: 18px; --hy: 14px; }

/* Editor SDK: alternating code lines slide left/right as if rewriting */
.pf-grm-sdk:hover rect:nth-of-type(odd) { --hx: 16px; }
.pf-grm-sdk:hover rect:nth-of-type(even) { --hx: -10px; }

@media (prefers-reduced-motion: reduce) {
    .pf-grm-leadership ellipse,
    .pf-grm-rai rect,
    .pf-grm-sdk rect {
        transition: none;
    }
}

/* Gallery wall — tight circular cluster (sunflower phyllotaxis), blooms outward on hover */
@property --bloom {
    syntax: '<number>';
    inherits: true;
    initial-value: 1;
}

/* Collision courses — four-question stagger */
.pf-collision-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 36px;
    align-items: start;
    align-content: start;
    justify-content: stretch;
    padding: 90px 0 0 0;
}

.pf-collision-card {
    position: relative;
    padding-top: 24px;
    border-top: 1px solid rgba(235, 225, 200, 0.18);
    opacity: 0;
    transform: translateY(14px);
    transition:
        opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s ease;
    transition-delay: 0s;
}

.pf-slide.active .pf-collision-card {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--i, 0) * 0.22s + 0.35s);
}

.pf-collision-num {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: rgba(196, 163, 90, 0.65);
    margin-bottom: 16px;
}

.pf-collision-q {
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.55;
    color: rgba(235, 225, 200, 0.86);
    margin: 0;
    transition: color 0.3s ease, text-shadow 0.4s ease;
}

.pf-collision-card:hover {
    border-top-color: rgba(196, 163, 90, 0.6);
}
.pf-collision-card:hover .pf-collision-q {
    color: rgba(235, 225, 200, 1);
    text-shadow: 0 0 1px currentColor, 0 0 5px currentColor;
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.pf-light .pf-collision-card {
    border-top-color: rgba(25, 20, 10, 0.16);
}
.pf-light .pf-collision-num { color: rgba(140, 115, 55, 0.7); }
.pf-light .pf-collision-q { color: rgba(25, 20, 10, 0.78); }
.pf-light .pf-collision-card:hover .pf-collision-q {
    color: rgba(25, 20, 10, 0.95);
    text-shadow: 0 0 1px currentColor, 0 0 3px currentColor;
}

@media (prefers-reduced-motion: reduce) {
    .pf-collision-card {
        transition: none;
        opacity: 1;
        transform: none;
    }
}

/* Collision deep-dive: pinned Q1 + 8 column reveal */
.pf-collision-deepdive-grid {
    display: flex !important;
    flex-direction: column;
    gap: 56px;
    padding-top: 60px;
    padding-bottom: 24px;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: hidden;
}

.pf-collision-card-pinned {
    width: 320px;
    opacity: 1;
    transform: none;
    /* Override the staggered transition from the four-question slide */
    transition: none;
}

.pf-collision-cols {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 22px;
    align-items: start;
}

.pf-collision-col {
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-collision-col.in {
    opacity: 1;
    transform: translateY(0);
}

/* On Q1: stack cols + thumbs in the same cell so thumbs replace cols */
.pf-collision-deepdive .pf-collision-deepdive-grid {
    display: grid !important;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "pinned"
        "stack";
    row-gap: 40px;
    padding-top: 60px;
    padding-bottom: 24px;
    align-content: stretch;
    overflow: hidden;
}
.pf-collision-deepdive .pf-collision-card-pinned {
    grid-area: pinned;
    justify-self: start;
}
.pf-collision-deepdive .pf-collision-cols,
.pf-collision-deepdive .pf-collision-thumbs {
    grid-area: stack;
}

.pf-collision-cols {
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.pf-collision-deepdive-grid:has(.pf-collision-thumbs.in) .pf-collision-cols {
    opacity: 0;
    pointer-events: none;
}

.pf-collision-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition:
        opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}
.pf-collision-thumbs.in {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Static variant — always visible (used outside the Q1 staged reveal) */
.pf-collision-thumbs.pf-collision-thumbs-static {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
    flex: 1;
    min-height: 0;
}
.pf-collision-thumbs-2col {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.pf-collision-thumbs-3col-static {
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.pf-collision-thumbs-3col,
.pf-collision-thumbs-4col {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    /* Fill the stack cell on Q1 deep-dive */
    align-self: stretch;
    height: 100%;
    min-height: 0;
}
.pf-collision-thumbs-4col {
    grid-template-columns: repeat(4, 1fr);
}
.pf-collision-thumbs-3col .pf-collision-thumb,
.pf-collision-thumbs-4col .pf-collision-thumb {
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
}
.pf-collision-thumbs-3col .pf-collision-thumb > img,
.pf-collision-thumbs-4col .pf-collision-thumb > img {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    min-height: 0;
}

/* Stacked thumb — two images sharing one button, stacked vertically */
.pf-collision-thumb-stack {
    display: flex !important;
    flex-direction: column;
    gap: 4px;
}
.pf-collision-thumb-stack > img {
    flex: 1 1 0;
    width: 100%;
    height: 50%;
    object-fit: cover;
    object-position: top center;
    border-radius: 4px;
    min-height: 0;
}

/* Iframe thumb — scales the live demo down to fit the thumbnail box */
.pf-collision-thumb-frame {
    overflow: hidden;
}
.pf-collision-thumb-frame-inner {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border-radius: 4px;
    background: #0e1116;
    pointer-events: none;
}
.pf-collision-thumb-frame-inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 400%;
    transform: scale(0.25);
    transform-origin: top left;
    border: 0;
    pointer-events: none;
}
.pf-collision-thumb-title {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 163, 90, 0.7);
    text-align: left;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(196, 163, 90, 0.32);
}
.pf-light .pf-collision-thumb-title {
    color: rgba(140, 115, 55, 0.78);
    border-bottom-color: rgba(140, 115, 55, 0.32);
}
.pf-collision-thumbs-static .pf-collision-thumb {
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.pf-collision-thumbs-static .pf-collision-thumb img {
    flex: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    min-height: 0;
    border-radius: 10px;
    background: #f4f1e8;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
}
.pf-collision-thumbs-static .pf-collision-thumb:hover img {
    box-shadow: 0 10px 32px rgba(196, 163, 90, 0.35);
}
.pf-collision-thumbs-static .pf-collision-thumb:hover {
    transform: translateY(-2px);
}

.pf-collision-thumb {
    appearance: none;
    background: rgba(235, 225, 200, 0.04);
    border: 1px solid rgba(235, 225, 200, 0.18);
    border-radius: 8px;
    padding: 8px;
    cursor: zoom-in;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}
.pf-collision-thumb:hover {
    border-color: rgba(196, 163, 90, 0.6);
    background: rgba(235, 225, 200, 0.07);
    transform: translateY(-2px);
}
.pf-collision-thumb img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.pf-col-term {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 163, 90, 0.7);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(196, 163, 90, 0.32);
    margin-bottom: 14px;
}

.pf-col-row {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.5;
    color: rgba(20, 17, 8, 0.92);
    background: rgba(235, 225, 200, 0.94);
    padding: 11px 13px;
    border: 1px solid rgba(235, 225, 200, 1);
    border-radius: 5px;
    margin-bottom: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.pf-col-row:last-child {
    margin-bottom: 0;
}

.pf-light .pf-col-term {
    color: rgba(140, 115, 55, 0.78);
    border-bottom-color: rgba(140, 115, 55, 0.32);
}
.pf-light .pf-col-row {
    color: rgba(235, 225, 200, 0.95);
    background: rgba(25, 20, 10, 0.88);
    border-color: rgba(25, 20, 10, 0.95);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

@media (prefers-reduced-motion: reduce) {
    .pf-collision-col {
        transition: none;
    }
}

/* Collision Q2 — two captioned videos, side by side, centered */
.pf-collision-videos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
    margin: 0 auto;
    width: 100%;
    max-width: 1300px;
    flex: 1;
    min-height: 0;
}
.pf-collision-video {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.pf-collision-video-thumb {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    text-align: left;
    cursor: zoom-in;
    overflow: hidden;
    transition: transform 0.2s ease;
}
.pf-collision-video-thumb:hover {
    transform: translateY(-2px);
}
.pf-collision-video-thumb:hover video {
    box-shadow: 0 12px 36px rgba(196, 163, 90, 0.18), 0 8px 28px rgba(0, 0, 0, 0.45);
}
.pf-collision-video-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(196, 163, 90, 0.7);
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(196, 163, 90, 0.32);
}
.pf-collision-video video {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: cover;
    object-position: top center;
    border-radius: 10px;
    background: #0a0a0f;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
    display: block;
    transition: box-shadow 0.2s ease;
    pointer-events: none;
}
.pf-light .pf-collision-video-title {
    color: rgba(140, 115, 55, 0.78);
    border-bottom-color: rgba(140, 115, 55, 0.32);
}

/* Q4: single Vimeo video, fills the available space below the pinned card */
.pf-collision-vimeo {
    flex: 1;
    min-height: 0;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-collision-vimeo-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 100%;
    border-radius: 10px;
    overflow: hidden;
    background: #0a0a0f;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}
.pf-collision-vimeo-frame iframe,
.pf-collision-vimeo-frame video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: contain;
    background: #0a0a0f;
}

/* Feature swarm — make/preview.png with little cards floating in over it */
.pf-feature-swarm-visual {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    width: 100%;
    height: 100%;
}

.pf-feature-swarm-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    opacity: 0.85;
}

.pf-feature-card {
    position: absolute;
    width: 200px;
    background: rgba(10, 10, 15, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(196, 163, 90, 0.28);
    border-radius: 6px;
    padding: 9px 12px;
    font-family: 'JetBrains Mono', 'IBM Plex Mono', monospace;
    font-size: 10.5px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    opacity: 0;
    transform: translate(var(--from-x, 0px), var(--from-y, 0px));
}

.pf-feature-name {
    display: block;
    color: rgba(235, 225, 200, 1);
    font-weight: 600;
    font-size: 11px;
    margin-bottom: 3px;
    letter-spacing: 0.02em;
}
.pf-feature-desc {
    display: block;
    color: rgba(235, 225, 200, 0.65);
    font-weight: 300;
}

/* Curved entry paths — each card has a side-specific keyframe with a midpoint
   waypoint so the path arcs instead of going straight, plus a slight rotation
   that nulls out at the end. Animation only fires when the parent slide has
   .pf-swarm-running (set by JS on first keypress). */
@keyframes flyInTop {
    0%   { transform: translate(-18vw, -130vh) rotate(-5deg); opacity: 0; }
    55%  { transform: translate(8px, 14px) rotate(2deg);     opacity: 0.95; }
    80%  { transform: translate(-3px, -2px) rotate(-0.6deg); opacity: 1; }
    100% { transform: translate(0, 0) rotate(0);             opacity: 1; }
}
@keyframes flyInRight {
    0%   { transform: translate(130vw, 12vh) rotate(4deg);   opacity: 0; }
    55%  { transform: translate(-14px, 6px) rotate(-2deg);   opacity: 0.95; }
    80%  { transform: translate(2px, -3px) rotate(0.5deg);   opacity: 1; }
    100% { transform: translate(0, 0) rotate(0);             opacity: 1; }
}
@keyframes flyInBottom {
    0%   { transform: translate(14vw, 130vh) rotate(5deg);   opacity: 0; }
    55%  { transform: translate(-10px, -12px) rotate(-2deg); opacity: 0.95; }
    80%  { transform: translate(3px, 2px) rotate(0.6deg);    opacity: 1; }
    100% { transform: translate(0, 0) rotate(0);             opacity: 1; }
}
@keyframes flyInLeft {
    0%   { transform: translate(-130vw, -10vh) rotate(-4deg); opacity: 0; }
    55%  { transform: translate(12px, -8px) rotate(2deg);     opacity: 0.95; }
    80%  { transform: translate(-2px, 3px) rotate(-0.5deg);   opacity: 1; }
    100% { transform: translate(0, 0) rotate(0);              opacity: 1; }
}

.pf-feature-swarm.pf-swarm-running .pf-feature-card {
    animation-duration: 1.5s;
    animation-timing-function: cubic-bezier(0.22, 0.9, 0.32, 1);
    animation-fill-mode: forwards;
    animation-delay: calc(var(--i, 0) * 0.22s);
}
.pf-feature-swarm.pf-swarm-running .pf-feature-card[data-side="0"] { animation-name: flyInTop; }
.pf-feature-swarm.pf-swarm-running .pf-feature-card[data-side="1"] { animation-name: flyInRight; }
.pf-feature-swarm.pf-swarm-running .pf-feature-card[data-side="2"] { animation-name: flyInBottom; }
.pf-feature-swarm.pf-swarm-running .pf-feature-card[data-side="3"] { animation-name: flyInLeft; }

.pf-light .pf-feature-card {
    background: rgba(245, 244, 240, 0.82);
    border-color: rgba(140, 115, 55, 0.35);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
.pf-light .pf-feature-name { color: rgba(25, 20, 10, 0.95); }
.pf-light .pf-feature-desc { color: rgba(25, 20, 10, 0.62); }

@media (prefers-reduced-motion: reduce) {
    .pf-feature-card { transition: none; transform: translate(0, 0); opacity: 1; }
}


.pf-gallery-wall {
    position: relative;
    display: block;
    flex: 1;
    overflow: visible;
    padding: 0;
    /* Explicit height to anchor the cluster bottom in the layout. */
    min-height: 510px;
    --bloom: 1;
    transition: --bloom 0.75s cubic-bezier(0.2, 0.8, 0.3, 1);
}

.pf-gallery-wall:hover {
    --bloom: 1.55;
}

.pf-gallery-wall img {
    position: absolute;
    /* Cluster center anchored so the resting top edge sits just under the
       footnote divider, level with the body text. On bloom, the cluster
       grows outward in all directions and the top edge floats above the
       divider line. */
    top: 256px;
    left: 50%;
    height: clamp(82px, 11vh, 128px);
    width: auto;
    margin: 0;
    border-radius: 3px;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.4);
    opacity: 0.92;
    cursor: default;
    transform-origin: center;
    /* Position is base (--x, --y) × bloom + a small JS-driven drift so each
       image floats gently. Bloom interpolates via @property; drift updates
       via requestAnimationFrame. No transition on transform — both inputs
       are continuously updated, which gives smooth motion without lag. */
    transform:
        translate(-50%, -50%)
        translate(
            calc(var(--x, 0px) * var(--bloom) + var(--drift-x, 0px)),
            calc(var(--y, 0px) * var(--bloom) + var(--drift-y, 0px))
        )
        rotate(calc(var(--rot, 0deg) + var(--drift-r, 0deg)));
    scale: 1;
    transition:
        scale 0.4s cubic-bezier(0.2, 0.8, 0.3, 1),
        opacity 0.4s ease,
        box-shadow 0.4s ease;
}

.pf-gallery-wall img:hover {
    z-index: 10;
    opacity: 1;
    box-shadow: -4px 10px 30px rgba(0,0,0,0.5);
    scale: 1.18;
}

@media (prefers-reduced-motion: reduce) {
    .pf-gallery-wall {
        transition: none;
    }
    .pf-gallery-wall img {
        transition: opacity 0.3s ease;
    }
}


/* ── Tiles grid ── */

.pf-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    flex: 1;
    width: 100%;
    margin-top: 24px;
    padding: 20px 100px;
}

.pf-tile {
    background: var(--pf-bg);
    border: 1px solid #353332;
    border-radius: 13px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-tile:hover {
    border-color: rgba(196, 163, 90, 0.4);
    transform: scale(1.05);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(196, 163, 90, 0.08),
        inset 0 0 20px rgba(196, 163, 90, 0.03);
}

.pf-light .pf-tile:hover {
    border-color: rgba(56, 73, 148, 0.3);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.1),
        0 0 30px rgba(56, 73, 148, 0.08);
}

.pf-tile-content {
    flex: 1;
}

.pf-tile-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 10px;
    color: #0a0a0f;
    background: rgba(203, 194, 173, 0.75);
    border-top: 1px solid #353332;
}

.pf-light .pf-tile {
    background: var(--pf-bg);
    border-color: rgba(30, 25, 15, 0.12);
}

.pf-light .pf-tile:hover {
    border-color: rgba(30, 25, 15, 0.25);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.pf-light .pf-tile-label {
    background: rgba(56, 73, 148, 0.12);
    color: rgba(30, 25, 15, 0.8);
    border-color: rgba(30, 25, 15, 0.12);
}


@media (max-width: 768px) {
    .pf-tiles {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        gap: 12px;
        padding: 12px 0;
    }
}

@media (max-width: 480px) {
    .pf-tiles {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .pf-tile-content {
        min-height: 100px;
    }
}

/* ── Lightbox overlay (appended to #portfolio root) ── */

.pf-lightbox-overlay {
    position: fixed;
    inset: 0;
    z-index: 850;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    animation: lbIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

.pf-light .pf-lightbox-overlay {
    background: rgba(0, 0, 0, 0.4);
}

.pf-lightbox-content {
    max-width: 95vw;
    max-height: 90vh;
}

iframe.pf-lightbox-content {
    width: 95vw;
    height: 90vh;
    border-radius: 8px;
    border: 1px solid var(--pf-border-strong);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
    background: #0e0e0e;
    animation: lbContentIn 0.5s ease 0.1s both;
}

.pf-lightbox-tile {
    background: var(--pf-bg);
    overflow: auto;
}

.pf-lightbox-overlay.pf-img-lightbox {
    overflow-y: auto;
    align-items: flex-start;
    padding: 40px 20px;
}
img.pf-lightbox-img {
    display: block;
    width: auto;
    max-width: 95vw;
    max-height: none;
    height: auto;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    cursor: default;
    animation: lbContentIn 0.5s ease 0.1s both;
}

video.pf-lightbox-video {
    display: block;
    width: auto;
    max-width: 92vw;
    max-height: 90vh;
    height: auto;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    background: #0a0a0f;
    cursor: default;
    animation: lbContentIn 0.5s ease 0.1s both;
}

.pf-lightbox-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: auto;
    max-width: 95vw;
    margin: auto;
    cursor: default;
    animation: lbContentIn 0.5s ease 0.1s both;
}
.pf-lightbox-stack img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Scripts, tools, skills, and plugins — vertical progression timeline */
.pf-progression {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 48px;
    overflow-y: auto;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13.5px;
    line-height: 1.55;
}
.pf-progression-list {
    position: relative;
    padding-left: 28px;
    max-width: 720px;
    width: 100%;
}
/* The vertical line connecting all dots — "draws" alongside the staggered reveal */
.pf-progression-list::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 8px;
    width: 1px;
    height: calc(100% - 16px);
    background: rgba(196, 163, 90, 0.32);
    transform-origin: top;
    transform: scaleY(0);
    transition: transform 6.5s linear 0.4s;
}
.pf-slide.active .pf-progression-list::before {
    transform: scaleY(1);
}

.pf-progression-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    padding: 14px 0;
    color: rgba(235, 225, 200, 0.72);
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0s;
}
.pf-progression-item:first-child { padding-top: 0; }
.pf-progression-item:last-child  { padding-bottom: 0; }
.pf-slide.active .pf-progression-item {
    opacity: 1;
    transform: translateY(0);
    transition-delay: calc(var(--i, 0) * 0.7s + 0.4s);
}

.pf-progression-dot {
    position: absolute;
    left: -28px;
    top: 18px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(235, 225, 200, 0.18);
    box-shadow: 0 0 0 4px var(--pf-bg, #0e0e0e);
    transition: background 0.5s ease, transform 0.5s ease;
}
.pf-progression-item:first-child .pf-progression-dot { top: 4px; }
.pf-slide.active .pf-progression-dot {
    background: rgba(196, 163, 90, 0.95);
    transform: scale(1.05);
    transition-delay: calc(var(--i, 0) * 0.7s + 0.4s);
}

.pf-progression-name {
    display: block;
    font-weight: 500;
    color: rgba(235, 225, 200, 1);
}
.pf-progression-desc {
    display: block;
    color: rgba(235, 225, 200, 0.68);
}
.pf-progression-name-inline {
    font-weight: 500;
    color: rgba(235, 225, 200, 1);
}

.pf-light .pf-progression-item { color: rgba(20, 17, 8, 0.72); }
.pf-light .pf-progression-name,
.pf-light .pf-progression-name-inline { color: rgba(20, 17, 8, 1); }
.pf-light .pf-progression-desc { color: rgba(20, 17, 8, 0.65); }
.pf-light .pf-progression-list::before { background: rgba(140, 115, 55, 0.32); }
.pf-light .pf-progression-dot { background: rgba(20, 17, 8, 0.18); box-shadow: 0 0 0 4px var(--pf-bg, #f5efe0); }
.pf-light .pf-slide.active .pf-progression-dot { background: rgba(140, 115, 55, 0.95); }

@media (prefers-reduced-motion: reduce) {
    .pf-progression-item,
    .pf-progression-dot,
    .pf-progression-list::before { transition: none; }
    .pf-slide.active .pf-progression-item,
    .pf-slide.active .pf-progression-dot { transition-delay: 0s; }
}

/* Code-to-canvas slideshow — single image at a time, advances on keypress/click */
.pf-ctc-slideshow {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 32px 24px;
    gap: 18px;
    cursor: pointer;
    overflow: hidden;
}
.pf-ctc-stage {
    position: relative;
    flex: 1;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-ctc-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
    opacity: 0;
    transform: scale(0.985);
    transition:
        opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.pf-ctc-frame.in {
    opacity: 1;
    transform: scale(1);
}
.pf-ctc-progress {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 6px 14px;
    flex-shrink: 0;
}
.pf-ctc-progress::before,
.pf-ctc-progress::after {
    content: "";
    width: 18px;
    height: 1px;
    background: rgba(235, 225, 200, 0.18);
}
.pf-ctc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(235, 225, 200, 0.18);
    border: 1px solid rgba(235, 225, 200, 0.22);
    transition: background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.pf-ctc-dot.active {
    background: rgba(196, 163, 90, 0.95);
    border-color: rgba(196, 163, 90, 0.95);
    transform: scale(1.25);
}
.pf-ctc-dot.done {
    background: rgba(196, 163, 90, 0.45);
    border-color: rgba(196, 163, 90, 0.45);
}
.pf-ctc-counter {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.16em;
    color: rgba(235, 225, 200, 0.45);
    text-transform: uppercase;
    flex-shrink: 0;
}
.pf-light .pf-ctc-dot {
    background: rgba(20, 17, 8, 0.16);
    border-color: rgba(20, 17, 8, 0.2);
}
.pf-light .pf-ctc-dot.active {
    background: rgba(140, 115, 55, 0.95);
    border-color: rgba(140, 115, 55, 0.95);
}
.pf-light .pf-ctc-dot.done {
    background: rgba(140, 115, 55, 0.45);
    border-color: rgba(140, 115, 55, 0.45);
}
.pf-light .pf-ctc-counter { color: rgba(20, 17, 8, 0.5); }

/* In-lightbox navigation buttons (when multiple sibling thumbs exist) */
.pf-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 860;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(20, 18, 12, 0.78);
    color: rgba(235, 225, 200, 0.92);
    border: 1px solid rgba(235, 225, 200, 0.18);
    font-family: 'JetBrains Mono', monospace;
    font-size: 24px;
    line-height: 1;
    padding: 0 0 3px 0;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
    animation: lbContentIn 0.5s ease 0.1s both;
}
.pf-lightbox-nav:hover {
    background: rgba(20, 18, 12, 0.92);
    border-color: rgba(196, 163, 90, 0.6);
    transform: translateY(-50%) scale(1.08);
}
.pf-lightbox-prev { left: 28px; }
.pf-lightbox-next { right: 28px; }
.pf-light .pf-lightbox-nav {
    background: rgba(245, 240, 226, 0.85);
    color: rgba(20, 17, 8, 0.88);
    border-color: rgba(20, 17, 8, 0.18);
}
.pf-light .pf-lightbox-nav:hover {
    border-color: rgba(140, 115, 55, 0.6);
}

.pf-lightbox-overlay.pf-lb-out {
    animation: lbOut 0.3s cubic-bezier(0.36, 0, 0.66, -0.4) both;
}

.pf-lightbox-overlay.pf-lb-out .pf-lightbox-content {
    animation: lbContentOut 0.25s ease both;
}

@keyframes lbIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes lbOut {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}

@keyframes lbContentIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lbContentOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Title slides */
.pf-slide-title {
    text-align: center;
}

/* ── Smoke title slide ── */

.pf-slide-smoke {
    padding: 0;
    overflow: hidden;
}

.smoke-container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#smoke-art {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Overshoot the viewport slightly so the leftover slack between the
       monospace grid and the viewport gets clipped by .smoke-container's
       overflow:hidden, instead of showing as a dark margin on each side. */
    transform: scale(1.06);
    transform-origin: center center;
}

.smoke-row {
    white-space: pre;
    overflow: hidden;
    font-family: 'JetBrains Mono', monospace;
    font-size: 14px;
}

/* Character weight/style classes */
.smoke-row .w3 { font-weight: 300; }
.smoke-row .w5 { font-weight: 500; }
.smoke-row .w8 { font-weight: 800; }
.smoke-row .it { font-style: italic; }

/* Smoke alpha ramp — dark mode: warm gold */
.smoke-row .a1  { color: rgba(196,163,90,0.08); }
.smoke-row .a2  { color: rgba(196,163,90,0.16); }
.smoke-row .a3  { color: rgba(196,163,90,0.24); }
.smoke-row .a4  { color: rgba(196,163,90,0.32); }
.smoke-row .a5  { color: rgba(196,163,90,0.42); }
.smoke-row .a6  { color: rgba(196,163,90,0.54); }
.smoke-row .a7  { color: rgba(196,163,90,0.66); }
.smoke-row .a8  { color: rgba(196,163,90,0.78); }
.smoke-row .a9  { color: rgba(196,163,90,0.90); }
.smoke-row .a10 { color: rgba(196,163,90,1.0); }

/* Smoke alpha ramp — light mode: deep blue */
.pf-light .smoke-row .a1  { color: rgba(56,73,148,0.08); }
.pf-light .smoke-row .a2  { color: rgba(56,73,148,0.16); }
.pf-light .smoke-row .a3  { color: rgba(56,73,148,0.24); }
.pf-light .smoke-row .a4  { color: rgba(56,73,148,0.32); }
.pf-light .smoke-row .a5  { color: rgba(56,73,148,0.42); }
.pf-light .smoke-row .a6  { color: rgba(56,73,148,0.54); }
.pf-light .smoke-row .a7  { color: rgba(56,73,148,0.66); }
.pf-light .smoke-row .a8  { color: rgba(56,73,148,0.78); }
.pf-light .smoke-row .a9  { color: rgba(56,73,148,0.90); }
.pf-light .smoke-row .a10 { color: rgba(56,73,148,1.0); }

/* Sticky footer */
.pf-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 810;
    padding: 20px 40px;
    pointer-events: none;
    border-top: 1px solid var(--pf-border-strong);
    background: var(--pf-footer-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.smoke-name {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.12em;
    margin: 0;
    color: var(--pf-name);
    pointer-events: auto;
    cursor: default;
    transition: color 0.4s ease;
}

.smoke-name-pf {
    color: var(--pf-accent);
    transition: color 0.4s ease;
}

/* Settings menu */
.pf-settings {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: auto;
}

.pf-settings-toggle {
    background: none;
    border: none;
    color: var(--pf-text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s;
}

.pf-settings-toggle:hover {
    color: var(--pf-text);
}

.pf-settings-toggle:focus {
    outline: none;
}

.pf-settings-menu {
    display: none;
    position: absolute;
    bottom: -8px;
    right: 0;
    background: var(--pf-footer-bg);
    border: 1px solid var(--pf-border-strong);
    border-radius: 8px;
    padding: 6px 0;
    min-width: 220px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.pf-settings.open .pf-settings-menu {
    display: block;
}

.pf-settings-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    margin: 2px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s;
}

.pf-settings-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

.pf-light .pf-settings-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.pf-light .pf-toggle {
    background: rgba(30, 25, 15, 0.25);
}

.pf-light .pf-toggle::after {
    background: #f5f4f0;
}

.pf-settings-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--pf-text-dim);
}

/* Toggle switch */
.pf-toggle {
    width: 32px;
    height: 18px;
    border-radius: 9px;
    background: #353332;
    position: relative;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.pf-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--pf-text-dim);
    transition: transform 0.2s, background 0.2s;
}

.pf-toggle.on {
    background: var(--pf-accent);
}

.pf-toggle.on::after {
    transform: translateX(14px);
    background: #0a0a0f;
}

/* ── Reduced motion ── */

#portfolio.pf-reduced .pf-slide {
    transition: none;
}

#portfolio.pf-reduced .pf-slide.active {
    transition: none;
}

#portfolio.pf-reduced .pf-slide.prev,
#portfolio.pf-reduced .pf-slide.next {
    transition: none;
}

#portfolio.pf-reduced .pf-slide::after {
    animation: none;
}

#portfolio.pf-reduced .pf-char {
    transition: none;
}

#portfolio.pf-reduced .pf-char:hover {
    text-shadow: none;
}

#portfolio.pf-reduced .pf-tile,
#portfolio.pf-reduced .pf-fn-img,
#portfolio.pf-reduced .pf-slide-visual {
    transition: none;
}

#portfolio.pf-reduced .pf-tile:hover,
#portfolio.pf-reduced .pf-fn-img:hover,
#portfolio.pf-reduced .pf-slide-visual:hover {
    transform: none;
}

#portfolio.pf-reduced .pf-lightbox-overlay {
    animation: none;
}

#portfolio.pf-reduced .pf-lightbox-content,
#portfolio.pf-reduced .pf-gallery-wrap {
    animation: none;
}

/* Also respect OS-level prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .pf-slide, .pf-slide.active, .pf-slide.prev, .pf-slide.next { transition: none; }
    .pf-slide::after { animation: none; }
    .pf-char { transition: none; }
    .pf-char:hover { text-shadow: none; }
    .pf-tile, .pf-fn-img, .pf-slide-visual { transition: none; }
    .pf-tile:hover, .pf-fn-img:hover, .pf-slide-visual:hover { transform: none; }
    .pf-lightbox-overlay, .pf-lightbox-content, .pf-gallery-wrap { animation: none; }
}

/* Footer nav — clickable name with dropdown */
.pf-footer-nav {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
}

.pf-footer-nav:hover .smoke-name {
    color: var(--pf-text);
}

.pf-footer-nav:hover .smoke-name-pf {
    color: var(--pf-accent);
    filter: brightness(1.3);
}

/* Slide menu dropdown — anchored to section label, extends upward */
.pf-slide-menu {
    display: none;
    position: absolute;
    bottom: -10px;
    background: var(--pf-footer-bg);
    border: 1px solid var(--pf-border-strong);
    border-radius: 8px;
    padding: 0;
    min-width: 200px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    flex-direction: column;
}

.pf-footer-nav.open .pf-slide-menu {
    display: flex;
}

.pf-slide-menu-separator {
    height: 1px;
    background: var(--pf-border-strong);
    margin: 0;
}

.pf-slide-menu-current {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--pf-accent);
    padding: 8px 14px;
    margin: 2px 6px;
    cursor: default;
}

.pf-slide-menu-item {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
    color: var(--pf-text-dim);
    padding: 8px 14px;
    margin: 2px 6px;
    border-radius: 5px;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}

.pf-slide-menu-item:hover {
    color: var(--pf-text);
    background: rgba(255, 255, 255, 0.05);
}

.pf-light .pf-slide-menu-item:hover {
    background: rgba(0, 0, 0, 0.04);
}

.pf-slide-menu-item.active {
    color: var(--pf-accent);
}

@media (max-width: 1080px) {
    .pf-slide-head {
        flex-direction: column;
        gap: 20px;
    }
    .pf-slide-head .pf-heading {
        max-width: 100%;
    }
    .pf-slide-head .pf-body {
        max-width: 480px;
        text-align: left;
    }
}

@media (max-width: 768px) {
    .pf-footer {
        padding: 14px 24px;
    }
    .smoke-name {
        font-size: 10px;
    }
    .pf-panel {
        padding: 24px;
        padding-bottom: 64px;
    }
}

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

/* ── Typography ── */

.pf-heading {
    font-family: 'Instrument Serif', Georgia, serif;
    color: var(--pf-text);
    font-size: clamp(28px, 4vw, 50px);
    line-height: 1.15;
    margin: 0;
    font-weight: 400;
    transition: color 0.4s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.pf-subheading {
    font-family: 'JetBrains Mono', monospace;
    color: rgba(225, 215, 190, 0.4);
    font-size: clamp(11px, 1.2vw, 13px);
    line-height: 1.6;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    font-weight: 400;
}

.pf-body {
    font-family: 'JetBrains Mono', monospace;
    color: var(--pf-text-mid);
    font-size: clamp(13px, 1.2vw, 16px);
    line-height: 1.65;
    font-weight: 300;
    transition: color 0.4s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}


.pf-body p {
    margin-bottom: 1em;
}

.pf-body a {
    color: var(--pf-link);
    text-decoration: underline;
    text-decoration-color: var(--pf-link-underline);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s, color 0.2s;
}

.pf-body a:hover {
    color: var(--pf-link-hover);
    text-decoration-color: var(--pf-link-underline-hover);
}

/* Accent label (small tag above headings) */
.pf-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(196, 163, 90, 0.5);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

/* Decorative rule */
.pf-rule {
    border: none;
    border-top: 1px solid var(--pf-border);
    margin: 24px 0;
}

/* ── Demo frame (full-panel) ── */

.pf-demo-frame {
    width: 100%;
    height: 100%;
    padding: 20px;
    padding-bottom: 80px; /* footer space */
}

.pf-demo-frame iframe {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: #111;
}

/* ── Media ── */

.pf-media {
    width: 100%;
    border-radius: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.pf-media img,
.pf-media video {
    width: 100%;
    height: auto;
    display: block;
}

.pf-media-caption {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: rgba(225, 215, 190, 0.3);
    letter-spacing: 0.05em;
    margin-top: 8px;
    text-align: center;
}

/* Grid for multiple images */
.pf-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* Arrow buttons — vertical scroll indicators */
.pf-arrow {
    position: fixed;
    z-index: 810;
    background: none;
    border: none;
    color: rgba(225, 215, 190, 0.15);
    font-size: 18px;
    cursor: pointer;
    padding: 2px 8px;
    line-height: 1;
    transition: color 0.25s;
    left: 50%;
    transform: translateX(-50%);
}

.pf-arrow:hover {
    color: rgba(225, 215, 190, 0.5);
}

.pf-arrow-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.pf-prev { bottom: 84px; display: none; }
.pf-next { bottom: 64px; display: none; }

/* Top-right menu area */
.pf-top-right {
    position: fixed;
    top: 24px;
    right: 28px;
    z-index: 810;
}

.pf-close-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.25);
    font-size: 22px;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
    transition: color 0.2s;
}

.pf-close-btn:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .pf-slide {
        padding: 32px 24px;
    }

    .pf-slide-split .pf-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pf-arrow {
        display: none;
    }
}

@media (max-width: 480px) {
    .pf-slide {
        padding: 24px 16px;
    }

    .pf-media-grid {
        grid-template-columns: 1fr;
    }
}