/* ------------------------------------------------------------------
   Turiya — portfolio
   Paper by default; look out of the window and the sky arrives.
   Performance notes: sky colours animate through registered custom
   properties (no JS per frame), clouds/butterflies only animate
   transform, and the sky reveal is a single clip-path transition.
------------------------------------------------------------------- */

@property --sky-top { syntax: "<color>"; inherits: true; initial-value: #a6b0f1; }
@property --sky-mid { syntax: "<color>"; inherits: true; initial-value: #cbc5f4; }
@property --sky-low { syntax: "<color>"; inherits: true; initial-value: #f1eafb; }
@property --cloud-lit { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --cloud-shade { syntax: "<color>"; inherits: true; initial-value: #c6bfee; }
@property --haze { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --sun { syntax: "<color>"; inherits: true; initial-value: #ffffff; }
@property --sky-ink { syntax: "<color>"; inherits: true; initial-value: #1d1932; }
@property --sky-soft { syntax: "<color>"; inherits: true; initial-value: #4d4870; }
@property --sky-accent { syntax: "<color>"; inherits: true; initial-value: #5a46c6; }
@property --sun-x { syntax: "<percentage>"; inherits: true; initial-value: 74%; }
@property --sun-y { syntax: "<percentage>"; inherits: true; initial-value: 14%; }
@property --glow { syntax: "<number>"; inherits: true; initial-value: 0.55; }
@property --moon { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --stars { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --reveal { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }

:root {
    --paper: #f4f1f8;
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --sky-time: 1.4s;
    --ink-time: 0.25s; /* hero text swapping between paper and sky colours */
    --gutter: clamp(20px, 5vw, 88px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
}
a {
    color: inherit;
}
button {
    font: inherit;
    color: inherit;
}

/* ------------------------------ nav ------------------------------ */

.nav {
    position: fixed;
    top: 18px;
    left: 50%;
    z-index: 30;
    translate: -50% 0;
}
.nav__bar {
    position: relative;
    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    background: rgb(240, 240, 240);
}
.nav__goo {
    position: absolute;
    inset: 0;
    filter: url(#goo);
    pointer-events: none;
}
.nav__pill {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 0;
    width: var(--w, 0px);
    translate: var(--x, 0px) 0;
    border-radius: 999px;
    background: rgb(218, 222, 245);
    transition:
        translate 0.45s cubic-bezier(0.3, 1.35, 0.5, 1),
        width 0.45s cubic-bezier(0.3, 1.35, 0.5, 1);
}
.nav__bar a {
    position: relative;
    padding: 10px 20px;
    border-radius: 999px;
    font-size: var(--t-small);
    font-weight: 500;
    line-height: 15px;
    color: rgb(51, 51, 51);
    text-decoration: none;
    outline: none;
    transition: color 0.25s ease;
}
.nav__bar a[aria-current="page"] {
    color: rgb(37, 37, 37);
}
.nav__bar a:focus-visible {
    box-shadow: 0 0 0 2px var(--accent);
}
@media (max-width: 480px) {
    .nav {
        top: 12px;
    }
    .nav__bar a {
        padding: 10px 14px;
    }
}

/* ------------------------------ hero ------------------------------ */

.hero {
    --hero-ink: var(--ink);
    --hero-soft: var(--soft);
    --hero-accent: var(--accent);
    position: relative;
    /* exactly one screen tall */
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    isolation: isolate;
    background: var(--paper);
    color: var(--hero-ink);
}
.hero.is-lit {
    /* set by hero.js once the opening sky has reached the text */
    --hero-ink: var(--sky-ink);
    --hero-soft: var(--sky-soft);
    --hero-accent: var(--sky-accent);
}
.hero.is-dragging {
    --sky-time: 0.18s;
}

/* the sky, revealed from the window with one clip-path transition */
.sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 52%, var(--sky-low) 100%);
    clip-path: circle(var(--reveal) at var(--ox, 70%) var(--oy, 45%));
    transition:
        --reveal 1.1s var(--ease),
        --sky-top var(--sky-time) ease,
        --sky-mid var(--sky-time) ease,
        --sky-low var(--sky-time) ease,
        --cloud-lit var(--sky-time) ease,
        --cloud-shade var(--sky-time) ease,
        --haze var(--sky-time) ease,
        --sun var(--sky-time) ease,
        --sun-x var(--sky-time) ease,
        --sun-y var(--sky-time) ease,
        --glow var(--sky-time) ease,
        --moon var(--sky-time) ease,
        --stars var(--sky-time) ease;
}
.hero.is-awake .sky {
    --reveal: 150vmax;
    transition-duration: 1.6s, var(--sky-time), var(--sky-time), var(--sky-time), var(--sky-time), var(--sky-time), var(--sky-time),
        var(--sky-time), var(--sky-time), var(--sky-time), var(--sky-time), var(--sky-time), var(--sky-time);
}
/* text colours inherit the palette too */
.hero {
    transition:
        color var(--ink-time) ease,
        --sky-ink var(--sky-time) ease,
        --sky-soft var(--sky-time) ease,
        --sky-accent var(--sky-time) ease;
}

.sky__stars {
    position: absolute;
    inset: 0;
    background: url(../assets/images/stars.webp) center / cover;
    opacity: var(--stars);
}
.sky__haze {
    position: absolute;
    inset: 0;
    background: radial-gradient(130% 55% at 50% 108%, var(--haze) 0%, transparent 70%);
    opacity: 0.85;
}
.sky__sun,
.sky__moon {
    position: absolute;
    left: var(--sun-x);
    top: var(--sun-y);
    border-radius: 50%;
    translate: -50% -50%;
    pointer-events: none;
}
.sky__sun {
    width: 70vmax;
    height: 70vmax;
    background: radial-gradient(circle, var(--sun) 0%, var(--sun) 4.5%, color-mix(in srgb, var(--sun) 55%, transparent) 9%, transparent 36%);
    opacity: var(--glow);
}
.sky__moon {
    left: 20%;
    top: 20%;
    width: 4.2vmax;
    height: 4.2vmax;
    background: radial-gradient(circle at 38% 38%, #fff, #e6e0ff 60%, #cfc6f5);
    box-shadow: 0 0 60px 18px rgba(214, 206, 255, 0.35);
    opacity: var(--moon);
}

/* gentle floating clouds: each one drifts across and bobs a little.
   (--img paths are written relative to this stylesheet, because that is how
   browsers resolve url() inside a custom property) */
.clouds {
    position: absolute;
    inset: 0;
}
.cloud {
    position: absolute;
    top: var(--y);
    left: 0;
    width: var(--w);
    aspect-ratio: 640 / 300;
    opacity: var(--o);
    background: linear-gradient(180deg, var(--cloud-lit) 0%, var(--cloud-lit) 42%, var(--cloud-shade) 125%);
    -webkit-mask: var(--img) center / contain no-repeat;
    mask: var(--img) center / contain no-repeat;
    animation:
        drift var(--dur) linear var(--delay) infinite,
        bob 9s ease-in-out calc(var(--delay) / 7) infinite alternate;
    will-change: transform;
}
@keyframes drift {
    from {
        transform: translateX(105vw);
    }
    to {
        transform: translateX(calc(-1 * var(--w) - 5vw));
    }
}
@keyframes bob {
    from {
        translate: 0 -6px;
    }
    to {
        translate: 0 7px;
    }
}
/* nothing to see while the sky is closed: save the battery */
.hero:not(.is-awake) .cloud {
    animation-play-state: paused;
}

/* paper grain sits over everything */
.grain {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    opacity: 0.22;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0 0.6  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ------------------------------ layout ------------------------------ */

.hero__inner {
    position: relative;
    z-index: 2;
    height: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(28px, 4vw, 72px);
    padding: 120px calc(var(--gutter) + 56px) 96px var(--gutter);
    max-width: 1640px;
    margin: 0 auto;
}

.hello {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand-xl);
    font-weight: 500;
    color: var(--hero-accent);
    transition: color var(--ink-time) ease;
    position: relative;
    z-index: 6; /* the name card opens over the headline */
}

/* "Turiya Joshi": the same yellow swipe as "Product Designer" on hover, plus a glass note on what Turiya means */
.name {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    isolation: isolate;
    cursor: help;
    outline: none;
    transition: color 0.3s ease;
}
.name__box {
    position: absolute;
    inset: 0.12em -0.12em 0.02em;
    z-index: -1;
    border-radius: 4px;
    background: rgb(243, 234, 154);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.65s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.name:hover,
.name:focus {
    color: rgb(37, 37, 37);
}
.name:hover .name__box,
.name:focus .name__box {
    transform: scaleX(1);
}
.name-card {
    position: absolute;
    z-index: 20;
    bottom: calc(100% + 14px);
    left: 50%;
    width: 320px;
    padding: 16px 18px 18px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--sans);
    white-space: normal;
    text-align: left;
    background:
        radial-gradient(120% 80% at 12% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(90% 60% at 100% 100%, rgba(243, 234, 154, 0.4) 0%, rgba(243, 234, 154, 0) 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0.14) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(255, 255, 255, 0.25),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset -1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 0 22px rgba(255, 255, 255, 0.22),
        0 24px 48px rgba(16, 40, 100, 0.22),
        0 2px 8px rgba(16, 40, 100, 0.12);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    translate: 0 8px;
    scale: 0.96;
    transition:
        opacity 0.4s ease,
        translate 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        scale 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.4s ease;
}
.name:hover .name-card,
.name:focus .name-card {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
}
.name-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent);
}
.name-card__tag i {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: var(--accent);
}
.name-card__text {
    display: block;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.45;
    color: #2a2a2a;
}
.name-card__text b {
    font-weight: 600;
    color: #1a1a1a;
}
@media (max-width: 800px) {
    .name-card {
        /* phones: below the name, since the nav sits above; a tap opens it */
        bottom: auto;
        top: calc(100% + 10px);
        width: min(278px, calc(100vw - 40px));
    }
    .name-card__tag {
        /* normal case, so it fits on one line in the narrower card */
        letter-spacing: 0;
        text-transform: none;
        font-size: var(--t-small);
    }
}
@media (prefers-reduced-motion: reduce) {
    .name__box,
    .name-card {
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }
}
.headline {
    margin: 14px 0 0;
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    line-height: 1;
}
.tagline {
    margin: 26px 0 0;
    max-width: 30ch;
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.5;
    color: var(--hero-soft);
    transition: color var(--ink-time) ease;
}
.meta {
    margin: 28px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: var(--t-small);
    font-weight: 500;
}
.meta > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
}
.status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c75a;
    box-shadow: 0 0 0 3px rgba(52, 199, 90, 0.18);
}

/* "Product Designer": a soft yellow block grows in from the left on hover
   (same as the Framer "Highlight Word" component) */
.hl {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    isolation: isolate;
    transition: color 0.3s ease;
}
/* like Framer: the words go dark on the yellow block, whatever the sky behind */
.hl:hover {
    color: rgb(37, 37, 37);
}
.hl__box {
    position: absolute;
    inset: 0.04em -0.06em -0.02em;
    z-index: -1;
    background: rgb(243, 234, 154);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.65s cubic-bezier(0.34, 1.3, 0.64, 1);
}
.hl:hover .hl__box {
    transform: scaleX(1);
}

/* "artist's eye": handwritten, with a squiggle underline and three sparks that draw in
   (same as the Framer "Drawn Underline" component) */
.scribble {
    position: relative;
    display: inline-block;
    white-space: nowrap;
    font-family: var(--hand);
    font-size: 1.24em;
    font-weight: 600;
    line-height: 0.8;
    color: var(--hero-ink);
    transition: color var(--ink-time) ease;
}
.scribble svg {
    position: absolute;
    overflow: visible;
    pointer-events: none;
}
.scribble__wave {
    left: 3%;
    top: 86%;
    width: 77%;
    height: 0.36em;
}
.scribble__spark {
    left: 100%;
    top: -52%;
    width: 1.1em;
    height: 0.92em;
    translate: -32% 0;
}
.scribble path {
    fill: none;
    stroke: #6ad2e8;
    stroke-width: 4.5;
    stroke-linecap: round;
    stroke-linejoin: bevel;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 0.6s cubic-bezier(0.6, 0, 0.3, 1);
}
.scribble__wave path {
    stroke-width: 3.4;
}
.scribble:hover .scribble__wave path,
.scribble:hover .scribble__spark path {
    stroke-dashoffset: 0;
}
.scribble:hover .scribble__spark path:nth-child(1) {
    transition-delay: 0.35s;
}
.scribble:hover .scribble__spark path:nth-child(2) {
    transition-delay: 0.45s;
}
.scribble:hover .scribble__spark path:nth-child(3) {
    transition-delay: 0.55s;
}
/* touch screens can't hover: play both when the sky opens instead */
@media (hover: none) {
    .hero.is-awake .hl__box {
        transform: scaleX(1);
    }
    .hero.is-awake .hl {
        color: rgb(37, 37, 37);
    }
    .hero.is-awake .scribble path {
        stroke-dashoffset: 0;
    }
}

/* ------------------------------ window ------------------------------ */

.window {
    position: relative;
    margin: 0;
    justify-self: end;
    width: min(100%, 680px);
}
.window__button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    transition: transform 0.8s var(--ease);
}
.window__button:hover,
.hero.is-awake .window__button {
    transform: translateY(-4px) rotate(-0.6deg);
}
.window__button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 8px;
    border-radius: 8px;
}
.window img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 26px 30px rgba(40, 30, 95, 0.12));
}
.window__hint {
    margin-top: 10px;
    padding-left: 6%;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    color: var(--hero-soft);
    transition:
        opacity 0.6s ease,
        color var(--ink-time) ease;
}
.window__hint::before {
    content: "↑ ";
}
.hero.is-awake .window__hint {
    opacity: 0;
}
.hint--tap {
    display: none;
}
@media (hover: none) {
    .hint--hover {
        display: none;
    }
    .hint--tap {
        display: inline;
    }
}

/* ------------------------------ hover cues: there's more to find in the hero ------------------------------ */

/* a soft dotted underline on the words that open something; it fades as the highlight sweeps in */
.name,
.hl {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.16em;
    text-decoration-color: color-mix(in srgb, var(--hero-accent) 55%, transparent);
    text-decoration-skip-ink: none;
}
.name:hover,
.name:focus,
.hl:hover {
    text-decoration-color: transparent;
}
/* the handwritten nudge under the chips, in the same voice as "hover the window" */
.nudge {
    margin: 18px 0 0;
    font-family: var(--hand);
    font-size: var(--t-hand-sm);
    font-weight: 500;
    color: var(--hero-soft);
    transition:
        opacity 0.6s ease,
        color var(--ink-time) ease;
}
.nudge::before {
    content: "✦ ";
    color: var(--hero-accent);
}
/* the hero's butterflies: a faint ring pulses now and then, each on its own beat */
.butterflies .bf__hit::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(30, 144, 255, 0.4);
    animation: bf-beckon 4.2s ease-out infinite;
}
.butterflies .bf:nth-child(2) .bf__hit::before {
    animation-delay: 1.4s;
}
.butterflies .bf:nth-child(3) .bf__hit::before {
    animation-delay: 2.8s;
}
.butterflies .bf:nth-child(4) .bf__hit::before {
    animation-delay: 0.7s;
}
@keyframes bf-beckon {
    0% { box-shadow: 0 0 0 0 rgba(30, 144, 255, 0.4); }
    45%, 100% { box-shadow: 0 0 0 14px rgba(30, 144, 255, 0); }
}
/* once something's been found, the nudges step back */
.hero.is-explored .nudge {
    opacity: 0;
}
.hero.is-explored .butterflies .bf__hit::before {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    .butterflies .bf__hit::before {
        animation: none;
    }
}

/* ------------------------------ butterflies ------------------------------ */
/* port of the Framer ButterflyHero: 3D wings, Liquid Glass details card */

.butterflies {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.bf {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    outline: none;
    will-change: transform;
}
.bf__hit {
    position: absolute;
    inset: -14px;
    border-radius: 999px;
}
.bf__scale {
    display: block;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 3px 4px rgba(10, 18, 40, 0.18));
    transition:
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease;
}
.bf.is-open .bf__scale {
    transform: scale(1.5);
    filter: drop-shadow(0 4px 6px rgba(30, 144, 255, 0.4));
}
.bf__persp,
.bf__tilt {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}
.bf__tilt {
    transform-style: preserve-3d;
    will-change: transform;
}
.bf__wing {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    backface-visibility: visible;
    will-change: transform;
}
.bf__wing--l {
    left: 0;
    transform-origin: 100% 50%;
    transform: rotateY(30deg);
    animation: bfFlapL var(--flap) ease-in-out infinite;
}
.bf__wing--r {
    left: 50%;
    transform-origin: 0% 50%;
    transform: rotateY(-30deg);
    animation: bfFlapR var(--flap) ease-in-out infinite;
}
.bf.is-open .bf__wing {
    animation-duration: calc(var(--flap) * 2.6);
}
@keyframes bfFlapL {
    0%, 100% { transform: rotateY(6deg); }
    50% { transform: rotateY(64deg); }
}
@keyframes bfFlapR {
    0%, 100% { transform: rotateY(-6deg); }
    50% { transform: rotateY(-64deg); }
}
.bf__thorax {
    position: absolute;
    left: 50%;
    top: 2%;
    width: 8%;
    height: 90%;
    transform: translateX(-50%) translateZ(1px);
    overflow: visible;
}

/* Liquid Glass details card */
.bf__card {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    width: 270px;
    box-sizing: border-box;
    padding: 16px;
    border-radius: 28px;
    overflow: hidden;
    isolation: isolate;
    font-family: var(--sans);
    font-weight: 400;
    white-space: normal;
    text-align: left;
    background:
        radial-gradient(120% 80% at 12% 0%, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 55%),
        radial-gradient(90% 60% at 100% 100%, rgba(120, 190, 255, 0.28) 0%, rgba(120, 190, 255, 0) 60%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.28) 45%, rgba(255, 255, 255, 0.14) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.75),
        inset 0 -1px 0 rgba(255, 255, 255, 0.25),
        inset 1px 0 0 rgba(255, 255, 255, 0.35),
        inset -1px 0 0 rgba(255, 255, 255, 0.2),
        inset 0 0 22px rgba(255, 255, 255, 0.22),
        0 24px 48px rgba(16, 40, 100, 0.22),
        0 2px 8px rgba(16, 40, 100, 0.12);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    translate: 0 8px;
    scale: 0.96;
    transition:
        opacity 0.4s ease,
        translate 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        scale 0.4s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.4s ease;
}
.bf[data-v="bottom"] .bf__card {
    bottom: auto;
    top: calc(100% + 12px);
    translate: 0 -8px;
}
.bf[data-h="left"] .bf__card {
    left: -8px;
    transform: none;
}
.bf[data-h="right"] .bf__card {
    left: auto;
    right: -8px;
    transform: none;
}
.bf.is-open .bf__card {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
}
.bf__tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: #1e90ff;
}
.bf__tag i {
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #1e90ff;
}
.bf__title {
    display: block;
    margin-bottom: 6px;
    font-size: var(--t-body);
    font-weight: 600;
    line-height: 1.15;
    color: #1a1a1a;
}
/* a card can carry a company logo beside its title, on a small white tile like the timeline's */
.bf__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.bf__head .bf__title {
    margin-bottom: 0;
}
.bf__logo {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(29, 25, 50, 0.08), 0 4px 10px -6px rgba(29, 25, 50, 0.35);
}
.bf__detail {
    display: block;
    font-size: var(--t-small);
    font-weight: 400;
    line-height: 1.5;
    color: #4a4a4a;
}

/* ------------------------------ time bar ------------------------------ */

.timebar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 6% 0;
    padding-top: 38px; /* room for the sun and moon chips above the track */
    opacity: 0.55;
    transition: opacity 0.5s ease;
}
.hero.is-awake .timebar,
.timebar:focus-within {
    opacity: 1;
}
.timebar__auto {
    padding: 4px 9px 5px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--hero-ink) 22%, transparent);
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: var(--hand);
    font-size: var(--t-hand-sm);
    font-weight: 500;
    line-height: 1;
    color: var(--hero-soft);
    cursor: pointer;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}
/* on: a solid light chip with dark text, readable on paper and on every sky */
.timebar__auto[aria-pressed="true"] {
    background: rgba(255, 255, 255, 0.9);
    color: #1d1932;
    border-color: rgba(29, 25, 50, 0.2);
}
.timebar__rail {
    position: relative;
    flex: 1;
    height: 8px;
}
.timebar__track {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    background: color-mix(in srgb, var(--hero-ink) 12%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
    cursor: pointer;
    touch-action: none;
}
/* bigger invisible hit area around the thin track */
.timebar__track::before {
    content: "";
    position: absolute;
    inset: -14px -8px;
}
.timebar__track:focus-visible {
    outline: 2px solid var(--hero-accent);
    outline-offset: 5px;
}
.timebar__thumb {
    position: absolute;
    top: 50%;
    left: calc(var(--pos, 0.22) * 100%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    translate: -50% -50%;
    background: #fff;
    box-shadow:
        0 0 0 1px rgba(29, 25, 50, 0.12),
        0 4px 12px -2px rgba(40, 30, 95, 0.35);
    transition: left 0.5s var(--ease);
    pointer-events: none;
}
.hero.is-dragging .timebar__thumb {
    transition: none;
}
.timebar__stops {
    list-style: none;
    margin: 0;
    padding: 0;
}
.timebar__stops li {
    position: absolute;
    bottom: calc(100% + 8px);
    left: calc(var(--t) * 100%);
    translate: -50% 0;
}
/* sun and moon phases: small round glass chips, one at each time on the track */
.timebar__stops button {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--hero-ink);
    cursor: pointer;
    opacity: 0;
    translate: 0 4px;
    pointer-events: none;
    transition:
        opacity 0.25s ease,
        translate 0.25s ease,
        background-color 0.25s ease,
        scale 0.25s ease;
}
.timebar__stops svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.timebar__stops button:hover {
    color: var(--hero-accent);
    scale: 1.1;
}
.timebar__stops button.is-on {
    /* the current time: a solid white chip with a brand-purple icon, readable on every sky */
    background: #fff;
    border-color: #fff;
    color: var(--accent);
    box-shadow: 0 4px 12px -4px rgba(29, 25, 50, 0.35);
}
.hero.is-awake .timebar__stops button,
.timebar:focus-within .timebar__stops button {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
}
@media (max-width: 380px) {
    .timebar__stops button {
        width: 25px;
        height: 25px;
    }
    .timebar__stops svg {
        width: 15px;
        height: 15px;
    }
}
@media (max-width: 340px) {
    .timebar__stops button {
        width: 22px;
        height: 22px;
    }
    .timebar__stops svg {
        width: 13px;
        height: 13px;
    }
}

.timebar__readout {
    margin: 0;
    min-width: 76px;
    text-align: left;
    font-size: var(--t-label);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--hero-soft);
    line-height: 1.2;
}
.timebar__name {
    display: block;
    font-family: var(--hand);
    font-size: var(--t-hand-sm);
    font-weight: 500;
    color: var(--hero-accent);
}

/* ------------------------------ phones ------------------------------ */

@media (max-width: 800px) {
    /* phones: copy on top, the window shrinks to fill what's left of the screen */
    .hero__inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 88px 20px 28px;
        gap: 20px;
    }
    .headline {
}
    .tagline,
    .meta {
        margin-top: 16px;
    }
    .window {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-self: center;
        width: 100%;
    }
    .window__button {
        flex: 1 1 0;
        min-height: 0;
    }
    .window img {
        height: 100%;
        object-fit: contain;
    }
    .timebar {
        margin: 12px 2% 0;
    }
}

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

/* ------------------------------ journey timeline ------------------------------ */

.journey {
    position: relative;
    background: var(--paper);
}
.jt-stage {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, var(--paper) 0%, #ece7f8 55%, #e3dcf6 100%);
}
.jt-stage::after {
    /* paper grain */
    content: "";
    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;
    opacity: 0.22;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0 0.6  0 0 0 0.55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.jt-clouds {
    position: absolute;
    inset: 0 -40% 0 0;
    will-change: transform;
}
.jt-clouds span {
    position: absolute;
    aspect-ratio: 640 / 300;
    background: linear-gradient(180deg, #fff 0%, #fff 45%, #d7cff3 130%);
    -webkit-mask: var(--img) center / contain no-repeat;
    mask: var(--img) center / contain no-repeat;
    opacity: 0.85;
    animation: bob 9s ease-in-out infinite alternate;
}
.jt-track {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 2;
    will-change: transform;
}
.jt-line,
.jt-drawn {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
}
.jt-drawn {
    clip-path: inset(-40px 100% -40px 0);
}
.jt-drawn svg {
    display: block;
    overflow: visible;
}
.jt-line path,
.jt-drawn path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.jt-guide {
    stroke: var(--ink);
    stroke-opacity: 0.28;
    stroke-width: 2.4;
    stroke-dasharray: 0 10;
}
.jt-glow {
    stroke: var(--accent);
    stroke-opacity: 0.35;
    stroke-width: 10;
    filter: blur(4px);
}
.jt-ink {
    stroke: var(--accent);
    stroke-width: 4;
}

/* pen tip + a butterfly riding along */
.jt-tip {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 4;
    will-change: transform;
}
.jt-tip i,
.jt-tip b {
    position: absolute;
    border-radius: 50%;
    background: var(--accent);
}
.jt-tip i {
    left: -15px;
    top: -15px;
    width: 30px;
    height: 30px;
    opacity: 0.18;
}
.jt-tip b {
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.8);
}
.jt-flock {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.jt-flock > span {
    position: absolute;
    left: 0;
    top: 0;
    will-change: transform;
}

.jt-intro {
    position: absolute;
}
.jt-eyebrow,
.jt-hint {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    color: var(--accent);
}
.jt-hint {
    margin-top: 14px;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    color: var(--soft);
}
.jt-intro h2 {
    margin: 6px 0 0;
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    line-height: 1;
}

/* 2023 doodles */
.jt-doodle {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}
.jt-doodle.on {
    opacity: 1;
    transform: none;
}
.jt-doodle svg {
    position: absolute;
    width: 120px;
    height: 200px;
    overflow: visible;
}
.jt-doodle path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 4 6;
    opacity: 0.7;
}
.jt-doodle circle {
    fill: var(--accent);
}
.jt-doodle p {
    position: absolute;
    margin: 0;
    text-align: center;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    color: var(--ink);
    opacity: 0.75;
}

/* milestones */
.jt-mark {
    position: absolute;
    width: 0;
    height: 0;
}
.jt-node,
.jt-card,
.jt-progress {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.32) 50%, rgba(255, 255, 255, 0.2) 100%);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.9),
        inset 0 0 24px rgba(255, 255, 255, 0.25),
        0 30px 60px -32px rgba(60, 45, 130, 0.35);
}
.jt-node {
    position: absolute;
    left: -28px;
    top: -28px;
    z-index: 3;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--soft);
    transition:
        background 0.4s ease,
        color 0.4s ease,
        transform 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.jt-mark.on .jt-node {
    background: var(--node);
    color: var(--ink);
    transform: scale(1.08);
}
.jt-stem {
    position: absolute;
    left: -1px;
    width: 2px;
    background: var(--accent);
    transform: scaleY(0);
    transition: transform 0.6s ease;
}
.jt-mark .jt-stem[style*="top"] {
    transform-origin: top;
}
.jt-mark .jt-stem[style*="bottom"] {
    transform-origin: bottom;
}
.jt-mark.on .jt-stem {
    transform: scaleY(1);
}
.jt-card {
    position: absolute;
    padding: 18px 20px 20px;
    border-radius: 24px;
    opacity: 0;
    transform: translateY(var(--from)) scale(calc(var(--fit, 1) * 0.97));
    transition:
        opacity 0.7s ease 0.15s,
        transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) 0.15s;
}
.jt-card.is-compact {
    padding: 14px 18px 16px;
}
.jt-mark.on .jt-card {
    opacity: 1;
    transform: scale(var(--fit, 1)); /* --fit < 1 only when a card wouldn't fit the screen (journey.js) */
}
.jt-card__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 10px;
}
.jt-kicker {
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    color: var(--accent);
}
.jt-period {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    font-size: var(--t-small);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--soft);
}
/* company and certification logos, on small white tiles */
.jt-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}
.jt-card__head > div {
    min-width: 0;
}
.jt-logo {
    flex: none;
    display: block;
    height: 48px;
    width: auto;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(29, 25, 50, 0.08), 0 4px 10px -6px rgba(29, 25, 50, 0.35);
}
.jt-logo--texol {
    padding: 8px 9px;
    object-fit: contain;
}
.jt-logos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}
.jt-logos .jt-logo {
    height: 36px;
    padding: 6px 9px;
    border-radius: 8px;
}
.jt-logos .jt-logo--indiahci {
    height: 44px; /* it has small text, so a little taller than the others */
    padding: 3px 7px;
}
.jt-logos {
    align-items: center;
}
.jt-card h3 {
    margin: 0;
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: var(--ls-h3);
    line-height: 1.25;
}
.jt-card.is-compact h3 {
}
.jt-org {
    margin: 4px 0 0;
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--soft);
}
.jt-text {
    margin: 8px 0 0;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--soft);
}
.jt-card.is-compact .jt-text {
    margin-top: 8px;
}
/* tags and the case-study link share one row */
.jt-card__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
    margin-top: 12px;
}
.jt-card.is-compact .jt-card__foot {
    margin-top: 8px;
}
.jt-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.jt-tags span {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid;
    background: rgba(255, 255, 255, 0.4);
    font-size: var(--t-small);
    font-weight: 500;
}
.jt-card.is-compact .jt-tags {
    gap: 5px;
}
.jt-card.is-compact .jt-tags span {
    padding: 4px 10px;
}
.jt-link,
.jt-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: gap 0.3s ease;
}
.jt-link {
    font-size: var(--t-small);
    font-weight: 600;
    white-space: nowrap;
    color: var(--accent);
}
.jt-link:hover,
.jt-cta:hover {
    gap: 10px;
}


/* 2026 finale: the hero's sunset wipes in */
.jt-finale {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    transform: translate3d(110%, 0, 0);
    will-change: transform;
}
.jt-wave {
    display: block;
    flex: none;
    height: 100%;
    margin-right: -1px;
}
.jt-sunset {
    /* the 2026 screen: a bright pastel yellow (the research sticky-note yellow), big bold type */
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 76px max(6vw, 96px) 24px; /* top: room for the nav; sides: clear of the progress bar */
    overflow: hidden;
    background: #fff1a6;
}
.jt-glass {
    max-width: 1100px;
    text-align: center;
    color: #1a1a1a;
    opacity: 0;
}
.jt-label {
    margin: 0 0 14px;
    font-size: var(--t-body);
    font-weight: 500;
    color: #2b2b2b;
}
.jt-year {
    margin: 0;
    font-size: min(var(--t-numeral), 16vh); /* shorter screens: smaller, so everything fits */
    font-weight: 600;
    letter-spacing: var(--ls-display);
    line-height: 0.9;
}
.jt-connector {
    margin: 14px 0 6px;
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    color: var(--accent);
}
.jt-glass h3 {
    margin: 0;
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    line-height: 1;
}
.jt-glass > p:last-of-type {
    margin: 26px auto 0;
    max-width: 640px;
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.5;
    color: #3f3f3f;
}
.jt-cta {
    margin-top: 30px;
    padding: 15px 28px;
    border-radius: 999px;
    background: #1a1a1a;
    color: #fff;
    font-size: var(--t-body);
    font-weight: 600;
    box-shadow: 0 14px 30px -14px rgba(26, 26, 26, 0.6);
}
.jt-cta:hover {
    background: #2f2f2f;
}

/* short screens: the 2026 screen tightens up so it still fits between the nav and the bottom edge */
@media (max-height: 720px) {
    .jt-year {
        font-size: min(var(--t-numeral), 14vh);
    }
    .jt-label {
        margin-bottom: 4px;
    }
    .jt-connector {
        margin: 6px 0 2px;
    }
    .jt-glass h3 {
        font-size: min(var(--t-display), 8.5vh);
    }
    .jt-glass > p:last-of-type {
        margin-top: 12px;
    }
    .jt-cta {
        margin-top: 16px;
        padding: 12px 24px;
    }
}

/* tools on the 2026 screen: round glass tiles in a loose ring around the text. They bob gently,
   and the one under the mouse wiggles. Phones have no room for a ring, so the tools line up under the button. */
.jt-orbit {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
    opacity: 0;
}
.jt-orbit li {
    position: absolute;
    left: var(--x);
    top: clamp(112px, var(--y), calc(100% - 56px)); /* never under the nav or past the bottom */
    translate: -50% -50%;
    pointer-events: auto;
    animation: jt-bob 5s ease-in-out var(--bob) infinite;
}
.jt-tool {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 1px 0 #fff, 0 12px 26px -14px rgba(26, 26, 26, 0.45);
    rotate: var(--tilt);
}
.jt-tool svg {
    width: 30px;
    height: 30px;
}
.jt-orbit li:hover .jt-tool {
    animation: jt-wiggle 0.9s ease-in-out infinite;
}
@keyframes jt-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
@keyframes jt-wiggle {
    0%, 100% { transform: scale(1.08) rotate(0deg); }
    25% { transform: scale(1.08) rotate(-9deg); }
    75% { transform: scale(1.08) rotate(9deg); }
}
@media (prefers-reduced-motion: reduce) {
    .jt-orbit li,
    .jt-orbit li:hover .jt-tool {
        animation: none;
    }
}
/* short laptop screens: smaller tiles */
@media (max-height: 720px) {
    .jt-tool {
        width: 52px;
        height: 52px;
    }
    .jt-tool svg {
        width: 24px;
        height: 24px;
    }
}
/* phones: a row under the button */
@media (max-width: 700px) {
    .jt-orbit {
        inset: auto 0 76px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    .jt-orbit li {
        position: static;
        translate: none;
    }
    .jt-tool {
        width: 44px;
        height: 44px;
    }
    .jt-tool svg {
        width: 22px;
        height: 22px;
    }
}

/* progress: current year + dots */
.jt-progress {
    position: absolute;
    z-index: 6;
    isolation: isolate; /* its own layer: the frosted glass repaints cleanly as the dots change */
    right: 24px;
    top: 50%;
    translate: 0 -50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 14px 10px;
    border-radius: 999px;
}
.jt-progress__year {
    font-size: var(--t-small);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.jt-progress i {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background: rgba(29, 25, 50, 0.18);
    /* only these animate; the dots around never move, so no stale squares get left behind */
    transition: height 0.35s ease, margin 0.35s ease, background-color 0.35s ease, opacity 0.35s ease;
}
.jt-progress i[data-on="2"] {
    background: var(--accent);
    opacity: 0.45;
}
.jt-progress i[data-on="1"] {
    background: var(--accent);
    height: 22px;
    margin-block: -7px; /* grows into the gaps: its slot stays 8px, so its neighbours stay put */
}

@media (max-width: 700px) {
    .jt-progress {
        right: auto;
        left: 16px;
        top: auto;
        bottom: 16px;
        translate: none;
        flex-direction: row;
        padding: 8px 14px;
    }
    .jt-sunset {
        padding: 70px 18px 64px; /* the nav above, the progress bar below */
    }
    .jt-glass {
        padding: 0 4px;
    }
}

/* ------------------------------ googly-eyes cursor ------------------------------ */

.eyes {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 1000;
    display: flex;
    gap: 8px;
    /* sits just below-right of the normal arrow, which still does the clicking */
    margin: 20px 0 0 12px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, scale 0.25s ease;
}
.eyes.is-on {
    opacity: 1;
}
.eyes.is-link {
    scale: 1.25;
}
/* tall white ovals with big black pupils and a little glint (like the Framer eyes cursor) */
.eye {
    position: relative;
    width: 24px;
    height: 36px;
    border-radius: 40px;
    background: rgb(255, 254, 253);
    box-shadow: 0 3px 8px rgba(29, 25, 50, 0.18);
}
.eye i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 16px;
    height: 22px;
    margin: -11px 0 0 -8px;
    border-radius: 50%;
    background: rgb(12, 12, 12);
}
.eye i::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 3px;
    height: 3px;
    margin-left: -1.5px;
    border-radius: 50%;
    background: rgb(255, 254, 253);
}

/* ------------------------------ garden footer (port of the Framer GardenFooter) ------------------------------ */

.garden {
    --soil: max(48px, 8vh);
    --base: calc(var(--soil) * 0.55); /* where stems meet the ground */
    --g-accent: #4b49d6;
    --g-ink: #1d1932;
    --g-muted: #8b88a6;
    --glass-bg: linear-gradient(145deg, rgba(255, 255, 255, 0.34) 0%, rgba(255, 255, 255, 0.14) 55%, rgba(255, 255, 255, 0.22) 100%);
    --glass-edge: inset 0 1.5px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    height: 100svh; /* exactly one screen; garden.js shortens flowers under the form to fit */
    min-height: 620px;
    overflow: hidden;
    background: var(--paper);
    font-family: var(--sans);
}
/* pastel sky with wispy clouds (SVG noise, nothing to load) */
.gf-sky {
    position: absolute;
    inset: -40px 0 0;
    opacity: 0.7;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(180deg, #bfcbf3 0%, #cfcbf1 38%, #e3cdeb 72%, #f4d9e6 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 18%);
    transform: translateY(calc((1 - var(--p, 1)) * -40px));
}
.gf-clouds {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -1300px;
    max-width: none;
    animation: gfDrift 110s ease-in-out infinite alternate;
}
/* hills and glass shapes drift into place with scroll (--p, set by garden.js) */
.gf-hill {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 1;
    aspect-ratio: 1440 / 200;
    min-height: 110px;
    pointer-events: none;
    transform: translateY(calc((1 - var(--p, 1)) * var(--from)));
}
.gf-hill svg {
    display: block;
    width: 100%;
    height: 100%;
}
.gf-shape {
    position: absolute;
    z-index: 1;
    width: var(--s);
    height: var(--s);
    pointer-events: none;
    transform: translateY(calc(var(--from) + (var(--to) - var(--from)) * var(--p, 1))) rotate(calc(var(--spin) * var(--p, 1)));
}
.gf-shape i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--r);
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: var(--glass-edge), 0 18px 36px rgba(70, 90, 170, 0.12);
    animation: gfFloat var(--dur) ease-in-out infinite alternate;
}

.gf-intro {
    position: absolute;
    top: clamp(70px, 9.5vh, 96px); /* clear of the fixed nav */
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 24px;
    pointer-events: none;
    transform: translateY(calc((1 - var(--p, 1)) * 24px));
}
.gf-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    color: var(--g-accent);
}
.gf-eyebrow svg {
    fill: var(--g-accent);
    opacity: 0.8;
}
.gf-intro h2 {
    margin: 8px 0 6px;
    font-size: min(var(--t-display), 9vh);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    line-height: 1;
    color: var(--g-ink);
    text-align: center;
}
.gf-tagline {
    margin: 0 0 clamp(12px, 2vh, 20px);
    font-size: var(--t-lead);
    font-weight: 400;
    color: var(--g-muted);
    text-align: center;
}
.gf-tagline strong {
    font-weight: 600;
    color: var(--g-accent);
}

/* the liquid glass form */
.gf-form {
    position: relative;
    width: 100%;
    max-width: 520px;
    padding: 14px 16px 12px;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: var(--glass-bg);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: var(--glass-edge), 0 24px 48px rgba(70, 90, 170, 0.14);
    pointer-events: auto;
}
.gf-form label {
    display: block;
    margin-bottom: 8px;
    font-size: var(--t-small);
    font-weight: 400;
    color: var(--g-muted);
}
.gf-form textarea,
.gf-form input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.55);
    outline: none;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: inset 0 1px 3px rgba(70, 90, 170, 0.1);
    font: inherit;
    color: var(--g-ink);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}
.gf-form textarea {
    display: block;
    resize: none;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.5;
}
.gf-form textarea:focus,
.gf-form input:focus {
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 3px rgba(75, 73, 214, 0.14);
}
.gf-form textarea::placeholder,
.gf-form input::placeholder {
    color: rgba(60, 60, 60, 0.55);
}
.gf-form.is-nudge textarea {
    border-color: var(--g-accent);
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.18);
    animation: gfShake 0.45s ease;
}
.gf-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
}
.gf-form input {
    flex: 1 1 160px;
    min-width: 0;
    width: auto;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: var(--t-body);
    font-weight: 400;
}
.gf-form .gf-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
/* glass "Plant" button with a little seed */
.gf-plant {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.78) 0%, rgba(190, 218, 255, 0.5) 100%);
    backdrop-filter: blur(16px) saturate(190%);
    -webkit-backdrop-filter: blur(16px) saturate(190%);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 -8px 16px rgba(255, 255, 255, 0.18),
        0 10px 24px rgba(30, 144, 255, 0.24);
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--g-ink);
    cursor: pointer;
    transition:
        transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow 0.35s ease;
}
.gf-plant:hover,
.gf-plant:focus-visible {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        inset 0 1.5px 0 #fff,
        inset 0 -10px 18px rgba(255, 255, 255, 0.3),
        0 16px 32px rgba(30, 144, 255, 0.34);
}
.gf-plant:active {
    transform: scale(0.96);
}
.gf-plant__seed {
    width: 9px;
    height: 13px;
    border-radius: 50% 50% 50% 10%;
    background: linear-gradient(145deg, #1e7bea, #6fdcff);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    transform: rotate(45deg);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gf-plant:hover .gf-plant__seed {
    transform: rotate(225deg) scale(1.15);
}
.gf-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 16px;
    margin-top: 6px;
    font-size: var(--t-label);
    font-weight: 400;
    color: var(--g-muted);
}
.gf-status.is-accent {
    color: var(--g-accent);
}
.gf-clear {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* the other way to get in touch */
.gf-mail {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--g-accent);
    text-decoration: none;
    pointer-events: auto;
    transition:
        background 0.25s ease,
        gap 0.25s ease;
}
.gf-mail:hover,
.gf-mail:focus-visible {
    background: rgba(255, 255, 255, 0.8);
    gap: 11px;
}

/* soil, flowers, the base line */
.gf-soil {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    height: var(--soil);
    pointer-events: none;
}
.gf-soil svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #e8ddc2;
}
.gf-specks {
    fill: #8a6a45;
}
.gf-bed {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.gf-bed:has(.gf-bloom.is-open) {
    z-index: 12; /* a flower's note reads over the form, not behind its glass */
}
.gf-empty {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--base) + 34px);
    margin: 0;
    text-align: center;
    font-size: var(--t-small);
    font-weight: 400;
    color: rgba(90, 70, 40, 0.6);
}
.gf-flower,
.gf-bloom {
    position: absolute;
    bottom: var(--base);
    width: 0;
    height: 0;
}
.gf-clip {
    position: absolute;
    left: calc(var(--w) / -2);
    bottom: 0;
    width: var(--w);
    height: var(--total);
    clip-path: inset(-40px -40px 0 -40px); /* only the ground hides the rising stem */
    pointer-events: none;
}
.gf-grow,
.gf-sway {
    position: absolute;
    inset: 0;
}
.gf-sway {
    transform-origin: 50% 100%;
    animation: gfSway 4s ease-in-out infinite alternate;
}
.gf-stem {
    position: absolute;
    left: 50%;
    top: calc(var(--w) * 0.55);
    bottom: 0;
    width: 3px;
    margin-left: -1.5px;
    border-radius: 3px;
    background: #8fb58f;
}
.gf-leaf {
    position: absolute;
    left: 50%;
    width: calc(var(--w) * 0.6);
    height: calc(var(--w) * 0.36);
}
.gf-leaf.is-flip {
    transform: translateX(-100%) scaleX(-1);
}
.gf-leaf svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: #5e9462;
    transform: rotate(-14deg);
    transform-origin: 0% 70%;
}
.gf-flower .gf-head,
.gf-bloom .gf-head {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--w);
    height: var(--w);
}
.gf-pop {
    display: block;
    width: 100%;
    height: 100%;
}
.gf-pop svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}
/* ambient flowers rise, then their heads pop open (staggered by --delay) */
.gf-flower .gf-grow {
    transform: translateY(var(--total));
    transition: transform 1.3s cubic-bezier(0.22, 1, 0.36, 1) var(--delay);
}
.gf-flower .gf-pop {
    transform: scale(0) rotate(-90deg);
    transition: transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--delay) + 0.9s);
}
.garden.is-grown .gf-flower .gf-grow,
.garden.is-grown .gf-flower .gf-pop {
    transform: none;
}

/* a visitor's flower: the seed falls, the ground ripples, the stem rises, the head pops */
.gf-bloom {
    z-index: 3;
}
.gf-bloom.is-open {
    z-index: 30;
}
.gf-bloom.is-fresh .gf-grow {
    animation: gfRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.9s both;
}
.gf-bloom.is-fresh .gf-pop {
    animation: gfPop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.95s both;
}
.gf-bloom .gf-head {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.gf-bloom.is-open .gf-head {
    transform: scale(1.16) rotate(10deg);
}
.gf-seed {
    position: absolute;
    left: -6px;
    bottom: -2px;
    width: 12px;
    height: 15px;
    border-radius: 50% 50% 50% 10%;
    background: #8a6a45;
    box-shadow: 0 2px 4px rgba(60, 40, 20, 0.35);
    opacity: 0;
    animation: gfSeed 1s cubic-bezier(0.55, 0, 0.9, 0.6);
}
.gf-ripple {
    position: absolute;
    left: -14px;
    bottom: -6px;
    width: 28px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #8fb58f;
    opacity: 0;
    animation: gfRipple 0.8s ease-out 0.85s;
}
.gf-mound {
    position: absolute;
    left: -24px;
    bottom: -9px;
    width: 48px;
    height: 18px;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background: #e8ddc2;
}
.gf-hit {
    position: absolute;
    left: -40px;
    bottom: calc(var(--hh) - 8px);
    width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    pointer-events: auto;
}
.gf-hit:focus-visible {
    outline: 2px solid var(--g-accent);
}
.gf-card {
    position: absolute;
    bottom: calc(var(--total) + 10px);
    width: 240px;
    display: flex;
    flex-direction: column;
    padding: 16px 18px 18px;
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    background: linear-gradient(145deg, rgba(240, 238, 255, 0.8) 0%, rgba(222, 222, 250, 0.58) 55%, rgba(234, 232, 253, 0.72) 100%);
    backdrop-filter: blur(22px) saturate(170%);
    -webkit-backdrop-filter: blur(22px) saturate(170%);
    box-shadow: var(--glass-edge), 0 24px 48px rgba(70, 90, 170, 0.14);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    translate: 0 8px;
    scale: 0.96;
    transition:
        opacity 0.35s ease,
        translate 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        scale 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0.35s ease;
}
.gf-card--center {
    left: -120px;
}
.gf-card--left {
    left: -32px;
}
.gf-card--right {
    right: -32px;
}
.gf-bloom.is-open .gf-card {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
}
.gf-pill {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c);
}
.gf-pill i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c);
}
.gf-card__msg {
    margin-top: 12px;
    font-size: var(--t-small);
    font-weight: 400;
    line-height: 1.5;
    color: var(--g-ink);
    overflow-wrap: anywhere;
}
.gf-card__by {
    margin-top: 8px;
    font-size: var(--t-label);
    font-weight: 400;
    color: var(--g-muted);
}
.gf-butterflies {
    z-index: 11;
}
.gf-base {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 13; /* the credit and links stay on top of the flower bed, even with a note open */
    height: var(--soil);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px 16px;
    padding: 0 clamp(16px, 3vw, 43px);
}
.gf-credit {
    font-size: var(--t-small);
    font-weight: 400;
    color: #3e3225;
}
.gf-links {
    display: inline-flex;
    gap: 28px;
}
.gf-links a {
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--g-accent);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.gf-links a:hover {
    opacity: 0.7;
}
@media (max-width: 720px) {
    .garden {
        --soil: 84px;
        height: 100svh;
        min-height: 700px;
    }
    .gf-intro {
        top: 72px; /* clear of the fixed nav */
    }
    .gf-shape {
        display: none; /* no room beside the form */
    }
    .gf-empty {
        left: calc(50% - 50px); /* wrap to fit the gap between the flowers */
        right: calc(50% - 50px);
    }
    .gf-base {
        flex-direction: column;
        justify-content: center;
    }
    .gf-credit {
}
    .gf-links {
        gap: 20px;
    }
    .gf-links a {
}
}

@keyframes gfDrift {
    to {
        transform: translateX(-140px);
    }
}
@keyframes gfFloat {
    from {
        transform: translateY(-7px);
    }
    to {
        transform: translateY(7px);
    }
}
@keyframes gfSway {
    from {
        transform: rotate(-2.2deg);
    }
    to {
        transform: rotate(2.2deg);
    }
}
@keyframes gfShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@keyframes gfRise {
    from {
        transform: translateY(var(--total));
    }
}
@keyframes gfPop {
    from {
        transform: scale(0) rotate(-90deg);
    }
}
@keyframes gfSeed {
    0% {
        transform: translateY(calc(var(--fall) * -1)) rotate(0deg);
        opacity: 1;
    }
    90% {
        transform: translateY(0) rotate(220deg);
        opacity: 1;
    }
    100% {
        transform: translateY(0) rotate(220deg);
        opacity: 0;
    }
}
@keyframes gfRipple {
    from {
        transform: scale(0);
        opacity: 0.7;
    }
    to {
        transform: scale(3.4);
        opacity: 0;
    }
}

/* ------------------------------ selected work + passion projects (Framer project-card style) ------------------------------ */

.projects {
    max-width: 1280px;
    margin: 0 auto;
    padding: 120px clamp(16px, 4vw, 40px) 40px;
}
.projects--passion {
    padding-top: 80px;
    padding-bottom: 140px;
}
.pj-head {
    margin-bottom: 28px;
}
.pj-heading {
    margin: 0;
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    color: var(--ink);
}
.pj-hint {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    color: var(--soft);
}
.pj-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 20px;
}
.projects--passion .pj-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* a labelled row of cards: Internships, Academic projects & research */
.pj-group {
    grid-column: 1 / -1;
    margin: 18px 0 -10px;
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    color: var(--accent);
}
.pj-group:first-child {
    margin-top: 0;
}
/* the card: soft radial glass, 20px corners, 20px padding */
.pj-card {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    background: radial-gradient(50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(230, 241, 255, 0.5) 100%);
    box-shadow: 0 18px 40px -30px rgba(40, 30, 95, 0.35);
    color: #252525;
    text-align: left;
    text-decoration: none;
    font: inherit;
    cursor: pointer;
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.8s ease,
        transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1),
        box-shadow 0.4s ease;
}
.pj-card.is-in {
    opacity: 1;
    transform: none;
}
.pj-card:hover,
.pj-card:focus-visible {
    box-shadow: 0 26px 50px -28px rgba(40, 30, 95, 0.45);
}
.pj-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
.pj-card.is-wide {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 47% 1fr;
    gap: 26px;
    min-height: 449px;
}
.pj-media {
    overflow: hidden;
    border-radius: 20px;
    aspect-ratio: 16 / 10;
    background: #6f97c4;
}
.pj-card.is-wide .pj-media {
    aspect-ratio: auto;
    min-height: 100%;
}
.pj-card.is-small .pj-media {
    aspect-ratio: 4 / 3;
}
.pj-media > img,
.pj-media > video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pj-card:hover .pj-media > img,
.pj-card:hover .pj-media > video {
    transform: scale(1.03);
}
.pj-body {
    flex: 1; /* tags sit on the bottom edge, so side-by-side cards line up */
    display: flex;
    flex-direction: column;
    padding: 4px 4px 0;
}
.pj-meta {
    margin: 0;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    line-height: 1.1;
    text-transform: uppercase;
    color: #252525;
}
.pj-nda {
    display: inline-block;
    margin-left: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    background: #1f2347;
    color: #fff;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    vertical-align: 2px;
}
.pj-title {
    margin: 28px 0 14px;
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: var(--ls-h2);
    line-height: 1.15;
    color: #252525;
    text-wrap: balance; /* long titles break evenly, not at a hyphen */;
}
.pj-text {
    margin: 0;
    max-width: 560px;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.5;
    color: #1a1a1a;
}
.pj-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin: auto 0 0;
    padding: 28px 0 0;
    list-style: none;
}
.pj-tags li {
    display: grid;
    place-items: center;
    min-width: 84px;
    height: 34px;
    padding: 0 18px;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 100px;
    background: radial-gradient(50% 50%, rgba(255, 255, 255, 0.8) 0%, rgba(230, 241, 255, 0.5) 100%);
    box-shadow: 0 2px 8px -4px rgba(40, 30, 95, 0.2);
    font-size: var(--t-label);
    font-weight: 500;
    color: #252525;
}
/* passion cards are smaller */
.pj-card.is-small {
    gap: 16px;
    padding: 16px;
}
.pj-card.is-small .pj-meta {
}
.pj-card.is-small .pj-title {
    margin: 16px 0 10px;
    font-size: var(--t-h3);
    font-weight: 600;
    letter-spacing: var(--ls-h3);
}
.pj-card.is-small .pj-text {
    font-size: var(--t-small);
    font-weight: 400;
}
.pj-card.is-small .pj-tags {
    padding-top: 20px;
    gap: 8px;
}
.pj-card.is-small .pj-tags li {
    min-width: 0;
    height: 30px;
    padding: 0 14px;
}

/* passion project detail view */
.pj-dialog {
    width: min(860px, calc(100vw - 32px));
    max-height: calc(100svh - 48px);
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 28px;
    background: radial-gradient(60% 60%, rgba(255, 255, 255, 0.95) 0%, rgba(232, 240, 255, 0.92) 100%);
    box-shadow: 0 40px 90px -30px rgba(40, 30, 95, 0.5);
    color: #252525;
    overflow: auto;
}
.pj-dialog[open] {
    animation: pjIn 0.45s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.pj-dialog::backdrop {
    background: rgba(29, 25, 50, 0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.pj-dialog__body {
    display: flex;
    flex-direction: column;
}
.pj-dialog .pj-media {
    aspect-ratio: 16 / 9;
    margin-bottom: 22px;
}
.pj-dialog .pj-title {
    margin-top: 16px;
}
.pj-more {
    margin-top: 12px;
    color: #4a4a4a;
}
.pj-open {
    align-self: flex-start;
    margin-top: 22px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #1a1a1a;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
.pj-dialog__close {
    position: absolute;
    top: 34px;
    right: 34px;
    z-index: 1;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 6px 16px -6px rgba(40, 30, 95, 0.35);
    font-size: 24px;
    line-height: 1;
    color: #252525;
    cursor: pointer;
}
@keyframes pjIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
}

@media (max-width: 900px) {
    .pj-grid,
    .projects--passion .pj-grid {
        grid-template-columns: 1fr;
    }
    .pj-card.is-wide {
        display: flex;
        min-height: 0;
    }
    .pj-card.is-wide .pj-media {
        aspect-ratio: 16 / 10;
        min-height: 0;
    }
    .projects {
        padding-top: 80px;
    }
}

/* ------------------------------ card scenes (card-scenes.js): looping UI stories on a pastel gradient ------------------------------ */

.cs-scene {
    position: relative;
}
.cs-tflow { background: linear-gradient(135deg, #cfe0ff 0%, #eef3ff 55%, #bcd0ff 100%); }
.cs-kg { background: linear-gradient(135deg, #dcd3ff 0%, #f5f2ff 55%, #cbbdff 100%); }
.cs-lumi { background: linear-gradient(135deg, #ffd0d9 0%, #fff0e4 55%, #ffc0cd 100%); }
.cs-dentigo { background: linear-gradient(135deg, #d6efdc 0%, #f8f4e6 55%, #f4d6c8 100%); }
.cs-pip { background: radial-gradient(90% 90% at 50% 45%, #2c1c78 0%, #150d40 60%, #0b0726 100%); }
.cs-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 720px;
    height: 450px;
    transform: translate(-50%, -50%);
    transform-origin: 50% 50%;
    color: #1d1932;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.3;
    transition: opacity 0.45s ease;
}
.cs-fading .cs-stage {
    opacity: 0;
}
.cs-stage img {
    position: absolute;
    display: block;
    height: auto;
    max-width: none;
}
.cs-shot {
    border-radius: 14px;
    box-shadow: 0 30px 60px -28px rgba(30, 30, 80, 0.45);
}
.cs-shot.bare {
    border-radius: 0;
    box-shadow: none;
    filter: drop-shadow(0 26px 30px rgba(40, 40, 60, 0.22));
}
/* things that appear during the story */
.cs-pop {
    position: absolute;
    opacity: 0;
    transform: translateY(10px) scale(0.96);
    transition:
        opacity 0.4s ease,
        transform 0.55s cubic-bezier(0.2, 1.2, 0.3, 1);
}
.cs-pop.on {
    opacity: 1;
    transform: none;
}
.cs-panel {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 18px 36px -18px rgba(30, 30, 80, 0.45);
}
.cs-panel b {
    display: block;
    font-weight: 600;
}
.cs-panel small {
    display: block;
    font-size: 11px;
    color: #6a6685;
}
.cs-panel p {
    margin: 3px 0 0;
    color: #6a6685;
}
.cs-panel ol {
    display: grid;
    gap: 6px;
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}
.cs-panel li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8a87a3;
    transition: color 0.3s ease;
}
.cs-panel li em {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid #cfcde0;
    color: transparent;
    transition: all 0.3s ease;
}
.cs-panel li em svg {
    width: 11px;
    height: 11px;
}
.cs-panel li.on {
    color: #1d1932;
}
.cs-panel li.on em {
    border-color: #2f7d4f;
    background: #2f7d4f;
    color: #fff;
}
.cs-stat b {
    font-size: 17px;
    letter-spacing: -0.01em;
}
.cs-stat s {
    color: #a09db6;
    font-weight: 500;
}
.cs-toast {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #1d1932;
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 14px 28px -14px rgba(20, 20, 60, 0.7);
}
.cs-toast i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ade80;
}
.cs-ring {
    position: absolute;
    border-radius: 8px;
    box-shadow: 0 0 0 2px #3b5bdb, 0 0 0 7px rgba(59, 91, 219, 0.22);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cs-ring.on {
    opacity: 1;
}
/* the labelled cursor */
.cs-cur {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 2px;
    transition: transform 0.95s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.cs-cur.jump {
    transition: none;
}
.cs-cur svg {
    flex: none;
    width: 16px;
    height: 20px;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.cs-cur span {
    margin-top: 15px;
    padding: 3px 9px;
    border-radius: 7px;
    background: #2f7d4f;
    color: #fff;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}
.cs-cur.flip span {
    position: absolute;
    right: 100%;
    top: 0;
}
.cs-tflow .cs-cur span { background: #3b5bdb; }
.cs-kg .cs-cur span { background: #5c3bff; }
.cs-lumi .cs-cur span { background: #d9627a; }
.cs-cur.tap svg {
    animation: csTap 0.35s ease;
}
@keyframes csTap {
    40% {
        transform: scale(0.8);
    }
}
/* KG Hub: real screens crossfading in one window */
.cs-kgwin {
    position: absolute;
    width: 600px;
    height: 400px;
    overflow: hidden;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 30px 60px -26px rgba(40, 30, 110, 0.55);
}
.cs-stage .cs-kgwin img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.45s ease;
}
.cs-stage .cs-kgwin img.on {
    opacity: 1;
}
.cs-kg .cs-ring {
    box-shadow: 0 0 0 2px #5c3bff, 0 0 0 6px rgba(92, 59, 255, 0.25);
}
/* Lumi: real screens that arrive one by one */
.cs-lphone {
    position: absolute;
    top: 20px;
    width: 184px;
    height: 410px;
    overflow: hidden;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 26px 44px -22px rgba(120, 40, 70, 0.5);
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition:
        opacity 0.5s ease,
        transform 0.7s cubic-bezier(0.2, 1.1, 0.3, 1);
}
.cs-lphone.on {
    opacity: 1;
    transform: none;
}
.cs-stage .cs-lphone img {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cs-lphone .next {
    opacity: 0;
    transition: opacity 0.45s ease;
}
.cs-lphone .next.on {
    opacity: 1;
}
.cs-lumi .cs-ring {
    box-shadow: 0 0 0 2px #d9627a, 0 0 0 7px rgba(217, 98, 122, 0.22);
    border-radius: 12px;
}
/* Pip: headset photo, pushing in, then through the left lens into the footage */
.cs-full {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    transition: opacity 0.45s ease;
}
.cs-fading .cs-full {
    opacity: 0;
}
.cs-pipvideo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.cs-pipvideo.on {
    opacity: 1;
}
.cs-pipintro {
    position: absolute;
    inset: 0;
    transform-origin: 35% 54%; /* the centre of the left lens */
    transition:
        transform 1.1s cubic-bezier(0.7, 0, 0.5, 1),
        opacity 0.45s ease 0.6s;
}
.cs-pipintro img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: 35% 54%;
}
.cs-pipintro.push img {
    animation: csPush 2.3s ease-in forwards;
}
.cs-pipintro.dive {
    transform: scale(9);
    opacity: 0;
}
.cs-pipintro.gone {
    visibility: hidden;
}
@keyframes csPush {
    to {
        transform: scale(1.09);
    }
}

/* ------------------------------ about: the archive (about.js) ------------------------------ */
/* a filing drawer: frosted folders slide up over each other, pencil lines and washi tape on top */

.about {
    --tab-h: 42px;
    --radius: 26px;
    --pencil: rgba(29, 25, 50, 0.46);
    position: relative;
    isolation: isolate;
    padding: 90px 0 110px;
    overflow-x: clip;
    background: linear-gradient(180deg, var(--paper) 0%, #ece7f8 14%, #e3dcf6 62%, #ece7f8 90%, var(--paper) 100%);
}
/* the sky behind the glass stays put, and changes colour with the folder on top */
.ab-sky {
    position: sticky;
    top: 0;
    z-index: -1;
    height: 100svh;
    margin-bottom: -100svh;
    overflow: hidden;
    pointer-events: none;
    /* melts into the sections above and below instead of ending on a hard edge */
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 70%, transparent 100%);
}
.ab-sky i {
    position: absolute;
    width: 62vmax;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, currentColor 0%, transparent 66%);
    opacity: 0.55;
    transition: color 1.4s ease;
}
.ab-sky i:nth-child(1) {
    left: -16vmax;
    top: -14vmax;
    color: #ffd9e4;
}
.ab-sky i:nth-child(2) {
    right: -18vmax;
    top: 6vh;
    color: #c8b9ff;
}
.ab-sky i:nth-child(3) {
    left: 22vw;
    bottom: -34vmax;
    color: #ffc4d2;
}
.about[data-at="1"] .ab-sky i:nth-child(1) {
    color: #c8b9ff;
}
.about[data-at="1"] .ab-sky i:nth-child(2) {
    color: #a7c8fb;
}
.about[data-at="2"] .ab-sky i:nth-child(1) {
    color: #a7d4fb;
}
.about[data-at="2"] .ab-sky i:nth-child(3) {
    color: #c8b9ff;
}
.about[data-at="3"] .ab-sky i:nth-child(1) {
    color: #ffc4d2;
}
.about[data-at="3"] .ab-sky i:nth-child(2) {
    color: #ffd9a8;
}
.about[data-at="4"] .ab-sky i:nth-child(1) {
    color: #ffd9a8;
}
.about[data-at="4"] .ab-sky i:nth-child(3) {
    color: #ffc4d2;
}
.ab-sky span {
    position: absolute;
    aspect-ratio: 640 / 300;
    background: linear-gradient(180deg, #fff 0%, #fff 45%, #d7cff3 130%);
    -webkit-mask: var(--img) center / contain no-repeat;
    mask: var(--img) center / contain no-repeat;
    opacity: 0.8;
    animation: bob 9s ease-in-out infinite alternate;
}

/* small shared bits */
.ab-mono {
    font-family: var(--sans);
    margin: 0;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--soft);
}
.ab-hand {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    line-height: 1.05;
    color: var(--accent);
}
.ab-scrawl {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    line-height: 1.1;
    color: var(--soft);
}
.ab-scrawl svg path,
.ab-arrow path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* a strip of washi tape: slightly see-through with torn ends */
.ab-tape {
    position: absolute;
    top: -13px;
    left: 50%;
    z-index: 2;
    width: 72px;
    height: 24px;
    margin-left: -36px;
    rotate: var(--rot);
    background: color-mix(in srgb, var(--tape) 72%, transparent);
    box-shadow: 0 2px 4px -2px rgba(40, 30, 95, 0.3);
    clip-path: polygon(0 0, 3% 22%, 0 44%, 3% 66%, 0 100%, 100% 100%, 97% 74%, 100% 50%, 97% 26%, 100% 0);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.ab-arrow {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 8px 18px -12px rgba(40, 30, 95, 0.5);
    cursor: pointer;
    transition:
        transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1),
        background 0.25s ease;
}
.ab-arrow:hover {
    background: rgba(255, 255, 255, 0.9);
    transform: scale(1.08);
}
.ab-arrow:focus-visible,
.ab-play:focus-visible,
.ab-vinyl:focus-visible,
.ab-day.is-kept:focus-visible,
.ab-piece__frame:focus-visible,
.ab-tab:focus-visible,
.ab-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* the opening: heading and the accession card */
.ab-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
    gap: 24px 56px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px) 54px;
}
.ab-eyebrow {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    color: var(--accent);
}
.ab-head h2 {
    margin: 6px 0 0;
    font-size: var(--t-display);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    line-height: 1;
}
.ab-intro {
    max-width: 600px;
    margin: 20px 0 0;
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.5;
    color: var(--soft);
}
.ab-scrawl--down {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-top: 18px;
}
.ab-scrawl--down path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 1.2s ease 0.3s;
}
.ab-head.is-in .ab-scrawl--down path {
    stroke-dashoffset: 0;
}
.ab-card {
    position: relative;
    margin: 0;
    padding: 22px 22px 14px;
    rotate: 2.2deg;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 14px;
    background:
        linear-gradient(transparent 39px, rgba(90, 70, 198, 0.14) 39px, rgba(90, 70, 198, 0.14) 40px) 0 22px / 100% 40px,
        linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.36));
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    box-shadow: 0 24px 44px -28px rgba(60, 45, 130, 0.45);
}
.ab-card__no {
    font-family: var(--sans);
    margin: 0 0 10px;
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent);
}
.ab-card div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    min-height: 40px;
    padding-top: 10px;
}
.ab-card dt {
    font-family: var(--sans);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--soft);
}
.ab-card dd {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    line-height: 1;
    text-align: right;
    color: var(--ink);
}

/* the drawer: sticky folders of equal height (about.js sets the height, the stick point and the outline) */
.ab-drawer {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 40px);
}
.ab-anchor {
    display: block;
    height: 0;
}
.ab-folder {
    position: sticky;
    top: var(--stick, 72px);
    z-index: calc(var(--i) + 1);
    display: flex;
    flex-direction: column;
    padding-top: var(--tab-h);
    pointer-events: none; /* the empty strip beside a tab must let older tabs be clicked */
}
/* box-shadow only paints outside the box, so it can sit behind the glass without dirtying it */
.ab-folder::before {
    content: "";
    position: absolute;
    inset: var(--tab-h) 0 0;
    border-radius: var(--radius);
    box-shadow: 0 -18px 44px -18px rgba(60, 45, 130, 0.34);
}
.ab-folder__glass {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--tint) 7%, rgba(255, 255, 255, 0.66));
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.4  0 0 0 0 0.6  0 0 0 0.09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
        radial-gradient(circle, rgba(90, 70, 198, 0.2) 1.1px, transparent 1.3px);
    background-size:
        220px 220px,
        24px 24px;
    backdrop-filter: blur(26px) saturate(165%);
    -webkit-backdrop-filter: blur(26px) saturate(165%);
}
.ab-folder__pencil {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
}
.ab-folder__pencil path {
    fill: none;
}
.ab-edge {
    stroke: rgba(255, 255, 255, 0.95);
    stroke-width: 2;
}
.ab-ink {
    stroke: var(--pencil);
    stroke-width: 1.3;
    stroke-linecap: round;
    filter: url(#ab-pencil);
}
.ab-tab {
    position: absolute;
    top: 0;
    left: calc(var(--i) * min(96% / var(--n), 196px));
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: min(84% / var(--n), 164px);
    height: var(--tab-h);
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink);
    text-decoration: none;
    pointer-events: auto;
    transition: color 0.25s ease;
}
.ab-tab .ab-mono {
    color: var(--accent);
}
.ab-folder:not(.is-current) .ab-tab {
    color: var(--soft);
}
.ab-folder:not(.is-current) .ab-tab:hover {
    color: var(--ink);
}
/* a tiny equaliser on the "on repeat" tab while the record plays */
.ab-tab__eq {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 12px;
}
.about.is-playing .ab-tab__eq {
    display: flex;
}
.ab-tab__eq i {
    width: 2.5px;
    height: 100%;
    border-radius: 2px;
    background: var(--accent);
    transform-origin: bottom;
    animation: abEq 0.8s ease-in-out infinite alternate;
}
.ab-tab__eq i:nth-child(2) {
    animation-delay: -0.5s;
}
.ab-tab__eq i:nth-child(3) {
    animation-delay: -0.25s;
}
@keyframes abEq {
    from {
        transform: scaleY(0.28);
    }
}
/* as the next folder slides over, this one sinks back and fades (--cover, about.js) */
.ab-folder__in {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 20px clamp(18px, 3vw, 40px) 24px;
    pointer-events: auto;
    opacity: clamp(0, calc(1.3 - var(--cover, 0) * 1.5), 1);
    transform: translateY(calc(var(--cover, 0) * -18px)) scale(calc(1 - var(--cover, 0) * 0.025));
    transform-origin: 50% 0;
}
.ab-folder.is-buried .ab-folder__in {
    visibility: hidden;
}
.ab-folder__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
}
.ab-folder__head h3 {
    margin: 0;
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: var(--ls-h2);
    line-height: 1.15;
}
.ab-folder__head .ab-hand {
    margin-left: auto;
}
.ab-body {
    position: relative;
    flex: 1;
    min-height: 0;
    margin-top: 14px;
}
/* each folder's contents rise in the first time it arrives */
.ab-body > * {
    transition:
        opacity 0.8s ease,
        translate 0.9s cubic-bezier(0.2, 0.9, 0.25, 1);
}
.ab-folder:not(.is-in) .ab-body > * {
    opacity: 0;
    translate: 0 26px;
}

/* ---- hello: a tilted page of ruled cells, with the photo in the middle one and cut-outs stuck over the lines ---- */
.ab-folder--hello .ab-folder__in {
    overflow: clip; /* the ruled lines run off the edge of the folder */
    border-radius: var(--radius);
}
.ab-folder--hello .ab-folder__head {
    position: relative;
    z-index: 2;
}
.ab-hello {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.08fr) minmax(0, 0.92fr);
    grid-template-rows: auto minmax(clamp(200px, 28vh, 270px), 1fr) auto;
    grid-template-areas:
        "title . beyond"
        "lead frame loves"
        "work . belief";
    height: 100%;
    padding: 10px clamp(6px, 1.4vw, 20px) 26px;
    rotate: -3deg;
}
.ab-hello__title {
    grid-area: title;
    width: min-content;
    margin: 0;
    padding: 6px 0 16px;
    font-size: min(var(--t-display), 9.4vh);
    font-weight: 600;
    letter-spacing: var(--ls-display);
    line-height: 1;
    color: var(--ink);
}
.ab-hello__cell {
    position: relative;
    padding: 16px 44px 16px 2px;
}
.ab-hello__cell--lead {
    grid-area: lead;
    align-self: center;
}
.ab-hello__cell--work {
    grid-area: work;
}
.ab-hello__cell--beyond {
    grid-area: beyond;
    align-self: end;
    padding-left: 26px;
}
.ab-hello__cell--belief {
    grid-area: belief;
    padding-left: 26px;
}
.ab-hello__no {
    position: absolute;
    top: 12px;
    right: 6px;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--soft);
}
.ab-hello__cell p {
    margin: 0;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--ink);
}
.ab-hello__cell--lead p {
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.5;
}
.ab-hello__cell--belief p {
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    line-height: 1.04;
    color: var(--accent);
}
/* highlighter strokes */
.ab-said {
    --mark: #d7cff3;
    padding-inline: 2px;
    margin-inline: -2px;
    border-radius: 3px;
    background: linear-gradient(transparent 56%, var(--mark) 56%, var(--mark) 94%, transparent 94%);
}
.ab-said--sunset {
    --mark: #ffc7a1;
}
.ab-said--stars {
    --mark: #bcc4f5;
}
.ab-said--pot {
    --mark: #efc0a5;
}
.ab-said--palette {
    --mark: #d4ec8a;
}
[data-for] {
    cursor: default;
}
/* the middle cell: a little dusk sky. She steps out of the top of it */
.ab-hello__frame {
    position: relative;
    z-index: 1;
    grid-area: frame;
    min-width: 0;
}
.ab-hello__sky {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: linear-gradient(180deg, #8f7bea 0%, #b9a8ff 44%, #f3c9df 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.ab-hello__sky::before,
.ab-hello__sky::after {
    content: "";
    position: absolute;
    aspect-ratio: 640 / 300;
    background: #fff;
    -webkit-mask: url(../assets/images/cloud-3.webp) center / contain no-repeat;
    mask: url(../assets/images/cloud-3.webp) center / contain no-repeat;
    opacity: 0.75;
}
.ab-hello__sky::before {
    left: -16%;
    bottom: 22%;
    width: 62%;
}
.ab-hello__sky::after {
    right: -18%;
    bottom: 44%;
    width: 56%;
}
.ab-hello__line {
    position: absolute;
    background: var(--pencil);
    pointer-events: none;
}
.ab-hello__line--t,
.ab-hello__line--b {
    left: -200vw;
    right: -200vw;
    height: 1px;
}
.ab-hello__line--t {
    top: 0;
}
.ab-hello__line--b {
    bottom: 0;
}
.ab-hello__line--l,
.ab-hello__line--r {
    top: -200vh;
    bottom: -200vh;
    width: 1px;
}
.ab-hello__line--l {
    left: 0;
}
.ab-hello__line--r {
    right: 0;
}
/* cut out with scissors: a white paper edge round the photo, trimmed flat where it meets the bottom of the cell */
.ab-hello__me {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: min(100%, 60vh);
    margin-inline: auto;
    clip-path: inset(-100% -100% 0 -100%);
}
.ab-hello__me img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 14px rgba(40, 30, 95, 0.28));
}
.ab-cut {
    position: absolute;
    z-index: 2;
    display: block;
    rotate: var(--r);
    filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 8px 9px rgba(40, 30, 95, 0.3));
    transition:
        translate 0.4s cubic-bezier(0.3, 1.6, 0.5, 1),
        rotate 0.4s cubic-bezier(0.3, 1.6, 0.5, 1),
        scale 0.4s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.ab-cut svg {
    display: block;
    width: 100%;
    height: auto;
}
.ab-cut:hover,
.ab-cut.is-said {
    translate: 0 -8px;
    rotate: calc(var(--r) + 7deg);
    scale: 1.12;
}
.ab-folder.is-in .ab-cut {
    animation: abCutIn 0.7s cubic-bezier(0.3, 1.5, 0.5, 1) var(--d) backwards;
}
@keyframes abCutIn {
    from {
        opacity: 0;
        scale: 0.4;
    }
}
.ab-cut--wireframe {
    left: -9%;
    top: -38%;
    width: clamp(92px, 9.4vw, 126px);
}
.ab-cut--pot {
    right: -7%;
    bottom: -19%;
    width: clamp(88px, 8.6vw, 116px);
}
.ab-hello__loves {
    position: relative;
    grid-area: loves;
    min-height: 240px;
}
.ab-cut--sunset {
    left: 9%;
    top: 7%;
    width: 31%;
}
.ab-cut--stars {
    right: 9%;
    top: 3%;
    width: 33%;
}
.ab-cut--palette {
    left: 34%;
    bottom: 4%;
    width: 44%;
}
/* short laptop screens: the photo cell takes two rows, so the folder still fits the screen */
@media (min-width: 900px) and (max-height: 720px), (min-width: 900px) and (max-width: 1100px) and (max-height: 820px) {
    .ab-hello {
        grid-template-rows: auto auto auto;
        grid-template-areas:
            "title . beyond"
            "lead frame loves"
            "work frame belief";
    }
    .ab-hello__title {
        padding-bottom: 8px;
    }
    .ab-hello__cell {
        padding-block: 10px;
    }
    .ab-hello__cell--lead p {
}
    .ab-hello__loves {
        min-height: 92px;
    }
    .ab-cut--sunset,
    .ab-cut--stars,
    .ab-cut--palette {
        top: 8px;
        bottom: auto;
        right: auto;
    }
    .ab-cut--sunset {
        left: 8%;
        width: 21%;
    }
    .ab-cut--stars {
        left: 36%;
        width: 23%;
    }
    .ab-cut--palette {
        left: 64%;
        width: 29%;
    }
    .ab-cut--wireframe {
        left: 1%;
        top: -44%;
    }
    .ab-cut--pot {
        bottom: 2%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ab-folder.is-in .ab-cut {
        animation: none;
    }
    .ab-cut {
        transition: none;
    }
}

/* ---- the calendar (parked, see FOLDERS in about.js) ---- */
.ab-body--moments {
    display: grid;
    grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 90px);
    align-items: center;
}
.ab-cal-wrap {
    --cell: clamp(32px, 5.3vh, 46px);
    min-width: 0;
}
.ab-cal {
    position: relative;
    padding-top: 12px;
    perspective: 1300px;
}
.ab-cal__rings {
    position: absolute;
    left: 7%;
    right: 7%;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
}
.ab-cal__rings i {
    width: 9px;
    height: 26px;
    border: 1.5px solid var(--ink);
    border-radius: 6px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.2));
    opacity: 0.7;
}
.ab-cal__pile {
    position: absolute;
    inset: 12px 0 0;
    border-radius: 20px;
    box-shadow:
        0 7px 0 -2px rgba(255, 255, 255, 0.72),
        0 14px 0 -5px rgba(255, 255, 255, 0.45);
}
.ab-cal__page {
    position: relative;
    z-index: 1;
    padding: 28px 20px 14px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.52));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 26px 50px -30px rgba(60, 45, 130, 0.55);
}
.ab-cal__torn {
    position: absolute;
    inset: 12px 0 auto;
    z-index: 3;
    transform-origin: 50% 0;
    animation: abTear 0.62s cubic-bezier(0.45, 0, 0.7, 0.4) forwards;
    pointer-events: none;
}
@keyframes abTear {
    35% {
        rotate: 1.5deg;
    }
    to {
        rotate: -4deg;
        transform: rotateX(92deg) translateY(-14px);
        opacity: 0;
    }
}
.ab-cal__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.ab-cal__top h4 {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
}
.ab-cal__dow,
.ab-cal__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}
.ab-cal__dow {
    font-family: var(--sans);
    margin-top: 8px;
    font-size: var(--t-label);
    font-weight: 400;
    color: var(--soft);
}
.ab-cal__grid {
    grid-auto-rows: var(--cell);
    min-height: calc(var(--cell) * 6);
    margin-top: 2px;
}
.ab-day {
    position: relative;
    display: grid;
    place-items: center;
    font-size: var(--t-small);
    font-weight: 500;
    color: color-mix(in srgb, var(--ink) 58%, transparent);
}
button.ab-day {
    padding: 0;
    border: 0;
    background: none;
    font-weight: 600;
    color: var(--ink);
    cursor: pointer;
}
.ab-ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, calc(var(--cell) + 2px));
    aspect-ratio: 1;
    translate: -50% -50%;
    overflow: visible;
}
.ab-ring path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linecap: round;
}
.ab-day.is-open .ab-ring path {
    stroke-dasharray: 1;
    animation: abDraw 0.6s ease-out both;
}
@keyframes abDraw {
    from {
        stroke-dashoffset: 1;
    }
    to {
        stroke-dashoffset: 0;
    }
}
.ab-sticker {
    position: absolute;
    right: 0;
    top: -4px;
    width: 20px;
    height: 20px;
    rotate: 12deg;
    filter: drop-shadow(0 1px 0 #fff) drop-shadow(0 0 1px #fff);
    transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.ab-day.is-kept:hover .ab-sticker {
    transform: scale(1.3);
}
.ab-cal__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
}
.ab-cal__count {
    margin: 0;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    color: var(--soft);
}
.ab-thread {
    position: absolute;
    left: 0;
    top: 0;
    overflow: visible;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.ab-thread.is-on {
    opacity: 1;
}
.ab-thread path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-dasharray: 4 7;
    opacity: 0.75;
}
.ab-note {
    position: relative;
    display: grid;
    grid-template-columns: minmax(170px, 230px) minmax(0, 1fr);
    gap: clamp(24px, 3.4vw, 44px);
    align-items: center;
    min-width: 0;
}
.ab-note.is-on > * {
    animation: abRise 0.7s cubic-bezier(0.2, 0.9, 0.25, 1) both;
}
.ab-note.is-on > :nth-child(2) {
    animation-delay: 0.08s;
}
@keyframes abRise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}
.ab-polaroid {
    position: relative;
    padding: 12px 12px 10px;
    rotate: -3deg;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 26px 42px -24px rgba(60, 45, 130, 0.6);
}
.ab-polaroid__art {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 3px;
    background: linear-gradient(160deg, #d7cff3, #ffe3ea 60%, #fff0c9);
}
.ab-polaroid__art svg {
    width: 44%;
    opacity: 0.95;
}
.ab-polaroid__art img,
.ab-sleeve__art img,
.ab-piece__art img,
.ab-lightbox__art img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ab-polaroid .ab-hand {
    margin-top: 8px;
    min-height: 46px;
    text-align: center;
}
.ab-note__text h4 {
    margin: 10px 0 10px;
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: var(--ls-h2);
    line-height: 1.15;
}
.ab-note__text p:not(.ab-mono) {
    margin: 0;
    max-width: 380px;
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.5;
    color: var(--soft);
}
.ab-link {
    display: inline-flex;
    gap: 6px;
    margin-top: 14px;
    font-size: var(--t-small);
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
}
.ab-link span {
    transition: transform 0.3s var(--ease);
}
.ab-link:hover span {
    transform: translateX(4px);
}

/* ---- 02: the record player ---- */
.ab-body--repeat {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(28px, 5vw, 72px);
    align-items: center;
}
.ab-deck {
    position: relative;
    min-width: 0;
}
.ab-deck__plinth {
    position: relative;
    width: min(100%, calc((100svh - 300px) * 1.25));
    min-width: min(100%, 300px);
    margin: 8px auto 0;
    aspect-ratio: 5 / 4;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0.26) 55%, rgba(255, 255, 255, 0.4) 100%);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    box-shadow:
        inset 0 1.5px 0 rgba(255, 255, 255, 0.95),
        inset 0 -14px 24px -18px rgba(90, 70, 198, 0.3),
        0 34px 54px -34px rgba(60, 45, 130, 0.6);
}
/* the same box again in pencil, drawn a little off-register */
.ab-deck__plinth::after {
    content: "";
    position: absolute;
    inset: -4px -3px -3px -4px;
    border: 1.3px solid var(--pencil);
    border-radius: 26px;
    filter: url(#ab-pencil);
    pointer-events: none;
}
.ab-platter {
    position: absolute;
    left: 5%;
    top: 8%;
    height: 84%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.34);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.85),
        inset 0 6px 16px -8px rgba(40, 30, 95, 0.4);
}
.ab-vinyl {
    position: absolute;
    inset: 3%;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: grab;
    touch-action: pan-y; /* a vertical swipe still scrolls the page on phones */
    user-select: none;
    -webkit-user-select: none;
    filter: drop-shadow(0 12px 12px rgba(29, 25, 50, 0.32));
}
.ab-vinyl:active {
    cursor: grabbing;
}
/* a coloured pressing: translucent violet with bands of grooves */
.ab-vinyl__disc {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
    background:
        repeating-radial-gradient(circle, rgba(255, 255, 255, 0.055) 0 1px, transparent 1px 3.5px),
        radial-gradient(circle, transparent 0 56%, rgba(255, 255, 255, 0.07) 56% 56.8%, transparent 56.8% 72%, rgba(255, 255, 255, 0.07) 72% 72.8%, transparent 72.8%),
        radial-gradient(circle, #4a3aa8 0 36%, #2b2373 62%, #1d1932 100%);
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12);
    will-change: transform;
}
.ab-vinyl__label {
    position: absolute;
    left: 50%;
    top: 50%;
    display: block;
    width: 35%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: conic-gradient(from 20deg, #ffd0dc, #fff0c9 40%, #ffd0dc 62%, #e3d9ff 88%, #ffd0dc);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5);
}
.ab-vinyl__label b {
    position: absolute;
    left: 0;
    right: 0;
    top: 14%;
    overflow: hidden;
    padding: 0 18%;
    font-family: var(--hand);
    font-size: clamp(12px, 1.4vw, 17px);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--ink);
}
.ab-vinyl__label i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: var(--paper);
    box-shadow: inset 0 1px 2px rgba(29, 25, 50, 0.6);
}
/* the light on the record stays still while it turns */
.ab-vinyl__sheen {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 40deg, transparent 0 8%, rgba(255, 255, 255, 0.24) 13%, transparent 20% 50%, rgba(255, 255, 255, 0.17) 57%, transparent 64%);
    -webkit-mask: radial-gradient(circle, transparent 0 18%, #000 18.5%);
    mask: radial-gradient(circle, transparent 0 18%, #000 18.5%);
    pointer-events: none;
}
.ab-arm {
    position: absolute;
    right: 3%;
    top: 3.5%;
    height: 78%;
    aspect-ratio: 120 / 320;
    overflow: visible;
    transform-origin: 71.67% 13.13%;
    transition: rotate 1s cubic-bezier(0.4, 0.1, 0.25, 1);
    pointer-events: none;
    filter: drop-shadow(-3px 7px 4px rgba(29, 25, 50, 0.28));
}
.ab-deck.is-playing .ab-arm {
    rotate: 25deg;
}
.ab-arm__base {
    fill: rgba(255, 255, 255, 0.55);
    stroke: var(--pencil);
    stroke-width: 1.5;
}
.ab-arm__pin {
    fill: var(--ink);
}
.ab-arm__rod {
    fill: none;
    stroke: var(--ink);
    stroke-width: 6;
    stroke-linecap: round;
}
.ab-arm__rod2 {
    fill: none;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1.5;
    stroke-linecap: round;
}
.ab-arm__head {
    fill: var(--accent);
    stroke: var(--ink);
    stroke-width: 2;
    stroke-linejoin: round;
}
.ab-arm__weight {
    fill: var(--ink);
}
.ab-deck__light {
    position: absolute;
    right: calc(5% + 64px);
    bottom: calc(6% + 22px);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(29, 25, 50, 0.22);
    transition:
        background 0.4s ease,
        box-shadow 0.4s ease;
}
.ab-deck.is-playing .ab-deck__light {
    background: #4cc38a;
    box-shadow: 0 0 0 4px rgba(76, 195, 138, 0.22);
}
.ab-play {
    position: absolute;
    right: 5%;
    bottom: 6%;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.55));
    box-shadow: 0 12px 22px -12px rgba(60, 45, 130, 0.7);
    color: var(--accent);
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.ab-play:hover {
    transform: scale(1.08);
}
.ab-play svg {
    width: 22px;
    fill: currentColor;
}
.ab-play .i-pause,
.ab-play[aria-pressed="true"] .i-play {
    display: none;
}
.ab-play[aria-pressed="true"] .i-pause {
    display: block;
}
/* pencil notes float off the record */
.ab-notes {
    position: absolute;
    left: 32%;
    top: 6%;
    pointer-events: none;
}
.ab-notes i {
    position: absolute;
    left: calc(var(--x, 0) * 1px);
    font-family: var(--hand);
    font-size: var(--t-hand-lg);
    font-weight: 500;
    font-style: normal;
    color: var(--accent);
    opacity: 0;
}
.ab-notes i:nth-child(2) {
    --x: 60;
    animation-delay: 1s !important;
}
.ab-notes i:nth-child(3) {
    --x: 120;
    animation-delay: 2s !important;
}
.ab-deck.is-playing .ab-notes i {
    animation: abNote 3s ease-out infinite;
}
@keyframes abNote {
    0% {
        opacity: 0;
        transform: translate(0, 0) rotate(-10deg);
    }
    20% {
        opacity: 0.85;
    }
    100% {
        opacity: 0;
        transform: translate(16px, -74px) rotate(14deg);
    }
}
.ab-scrawl--deck {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    margin-top: 10px;
}
.ab-scrawl--deck svg {
    flex: none;
    margin-top: -10px;
    scale: 1 -1;
}
.ab-sleeve-wrap {
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}
.ab-sleeve {
    position: relative;
    width: clamp(120px, 22vh, 190px);
    padding: 9px;
    rotate: 3deg;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 24px 40px -24px rgba(60, 45, 130, 0.6);
}
.ab-sleeve__art {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 3px;
}
.ab-sleeve__art svg {
    display: block;
    width: 100%;
    height: 100%;
}
.ab-track h4 {
    margin: 10px 0 2px;
    font-size: var(--t-h2);
    font-weight: 600;
    letter-spacing: var(--ls-h2);
    line-height: 1.15;
}
.ab-track__by {
    margin: 0;
    font-size: var(--t-small);
    font-weight: 500;
    color: var(--soft);
}
.ab-track__bar {
    max-width: 320px;
    height: 3px;
    margin-top: 16px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(90, 70, 198, 0.16);
}
.ab-track__bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.ab-track__time {
    margin-top: 7px;
    letter-spacing: 0.02em;
    text-transform: none;
}
.ab-track .ab-hand {
    margin-top: 12px;
}

/* ---- things I can't explain: a shelf of six objects, each with its own trick ---- */
.ab-body--things {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.ab-things {
    --obj: clamp(130px, 33vh - 56px, 250px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(8px, 2vh, 22px) 18px;
}
.ab-thing {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: inherit;
    cursor: pointer;
}
.ab-thing:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.ab-thing__stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--obj);
}
.ab-thing__label {
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    line-height: 1.05;
    text-align: center;
    color: var(--ink);
}
.ab-thing:nth-child(odd) .ab-thing__label {
    rotate: -1.2deg;
}
.ab-thing:nth-child(even) .ab-thing__label {
    rotate: 1deg;
}
.ab-thing__stage img {
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}

/* orange: skin wipes down from the top, a cream edge of pith just behind it, and the strip of peel uncurls */
.ab-orange {
    position: relative;
    display: block;
    width: calc(var(--obj) * 1.08);
    max-width: 100%;
    aspect-ratio: 553 / 446;
    filter: drop-shadow(0 12px 12px rgba(120, 70, 20, 0.28));
    transition: rotate 0.7s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ab-thing--orange.is-on .ab-orange {
    rotate: -5deg;
}
.ab-orange img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.ab-orange__body {
    clip-path: ellipse(37.4% 40.4% at 37% 40%);
}
.ab-orange__flap {
    position: absolute;
    inset: 0;
    clip-path: polygon(39.5% -2%, 80% -2%, 80% 72%, 62% 73%, 52% 79%, 41% 82%, 39.5% 60%);
    transition: clip-path 0.72s cubic-bezier(0.5, 0.05, 0.3, 1);
}
.ab-orange__flap img {
    clip-path: ellipse(37.4% 40.4% at 37% 40%);
    transform: scaleX(-1);
    transform-origin: 37% 50%;
}
/* the mirrored side has its own highlight: shade it, so the orange reads as one lit from the left */
.ab-orange__flap:not(.ab-orange__flap--pith)::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: ellipse(37.4% 40.4% at 37% 40%);
    background: linear-gradient(90deg, transparent 39%, rgba(214, 120, 8, 0.34) 52%, rgba(205, 108, 6, 0.42) 76%);
}
.ab-orange__flap--pith {
    background: #fdf0c8;
    -webkit-mask: radial-gradient(ellipse 37.4% 40.4% at 37% 40%, #000 99%, transparent 100%);
    mask: radial-gradient(ellipse 37.4% 40.4% at 37% 40%, #000 99%, transparent 100%);
    transition-delay: 0.07s;
}
.ab-thing--orange.is-on .ab-orange__flap {
    clip-path: polygon(41% 80%, 62% 71%, 64% 72%, 62% 73%, 52% 79%, 41% 82%, 41% 81%);
}
.ab-orange__curl {
    position: absolute;
    inset: 0;
    opacity: 0;
    clip-path: polygon(42% 78%, 52% 74%, 63% 71%, 72% 72%, 88% 82%, 93% 73%, 100% 73%, 100% 86%, 90% 95%, 75% 100%, 60% 99%, 49% 91%);
    transform: rotate(-58deg) scale(0.26);
    transform-origin: 46% 80%;
    transition:
        transform 0.55s cubic-bezier(0.4, 0, 0.8, 0.6),
        opacity 0.2s ease 0.35s;
}
.ab-thing--orange.is-on .ab-orange__curl {
    opacity: 1;
    transform: none;
    transition:
        transform 0.75s cubic-bezier(0.3, 1.45, 0.5, 1) 0.32s,
        opacity 0.15s ease 0.32s;
}

/* can: about.js draws the crush; this just leans it over as it goes */
.ab-can {
    display: block;
    width: calc(var(--obj) * 0.72);
    height: var(--obj);
    rotate: calc(var(--p, 0) * -5deg);
    filter: drop-shadow(0 10px 9px rgba(40, 30, 95, 0.32));
}

/* packaging: brown paper and string, because it's just a box. Then it isn't */
.ab-box {
    position: relative;
    display: block;
    width: calc(var(--obj) * 0.878);
    height: var(--obj);
    filter: drop-shadow(0 12px 12px rgba(40, 30, 95, 0.26));
    transition: scale 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ab-thing--box.is-on .ab-box {
    scale: 1.05;
}
.ab-box img {
    width: 100%;
    height: 100%;
}
.ab-box__sheen {
    position: absolute;
    left: 9%;
    right: 0;
    top: 2.4%;
    bottom: 20.8%;
    background: linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, 0.75) 50%, transparent 62%) -100% 0 / 300% 100% no-repeat;
}
.ab-thing--box.is-on .ab-box__sheen {
    background-position: 200% 0;
    transition: background-position 1s ease 0.45s;
}
.ab-box__wrap {
    position: absolute;
    left: 8.6%;
    right: -0.6%;
    top: 2%;
    bottom: 20.4%;
    perspective: 700px;
}
.ab-box__flap {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50.4%;
    background:
        repeating-linear-gradient(93deg, rgba(90, 60, 25, 0.06) 0 2px, transparent 2px 7px),
        linear-gradient(160deg, #d7b98e, #c29f70);
    box-shadow: inset 0 0 0 1px rgba(90, 60, 25, 0.28);
    transition: transform 0.7s cubic-bezier(0.45, 0.05, 0.25, 1) 0.1s, opacity 0.2s ease 0.62s;
}
.ab-box__flap--l {
    left: 0;
    transform-origin: 0 50%;
}
.ab-box__flap--r {
    right: 0;
    transform-origin: 100% 50%;
}
.ab-box__flap b {
    position: absolute;
    right: 8px;
    bottom: 6px;
    font-family: var(--hand);
    font-size: var(--t-hand-sm);
    font-weight: 500;
    color: rgba(70, 45, 18, 0.8);
    white-space: nowrap;
    rotate: -3deg;
}
.ab-thing--box.is-on .ab-box__flap--l {
    transform: rotateY(-112deg);
    opacity: 0;
}
.ab-thing--box.is-on .ab-box__flap--r {
    transform: rotateY(112deg);
    opacity: 0;
}
.ab-thing--box:not(.is-on) .ab-box__flap {
    transition: transform 0.6s cubic-bezier(0.45, 0.05, 0.25, 1), opacity 0.1s ease;
}
/* the string: one line each way, tied in the middle */
.ab-box__twine {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(#f4ecdc, #f4ecdc) center / 3px 100% no-repeat,
        linear-gradient(#f4ecdc, #f4ecdc) center / 100% 3px no-repeat;
    transition: opacity 0.22s ease, scale 0.3s ease;
}
.ab-box__twine::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 16px;
    margin: -8px 0 0 -15px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 22% 50%, transparent 30%, #f4ecdc 32% 58%, transparent 60%),
        radial-gradient(ellipse at 78% 50%, transparent 30%, #f4ecdc 32% 58%, transparent 60%);
}
.ab-thing--box.is-on .ab-box__twine {
    opacity: 0;
    scale: 1.2;
}

/* the blurry photo: it hunts for focus, gives up, and looks better for it */
.ab-blur {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: calc(var(--obj) * 0.75);
    height: var(--obj);
    padding: 7px;
    rotate: 2.4deg;
    background: #fff;
    box-shadow: 0 16px 20px -14px rgba(40, 30, 95, 0.55);
    transition: rotate 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ab-thing--blur.is-on .ab-blur {
    rotate: -1.4deg;
}
.ab-blur__pic {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.ab-blur__pic img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.7s ease;
}
.ab-blur__ghost {
    opacity: 0;
    mix-blend-mode: screen;
    transform: translate(calc(var(--gx, 0) * 9px), calc(var(--gy, 0) * 9px)) scale(1.04);
    transition:
        opacity 0.6s ease,
        transform 0.5s ease-out !important;
}
.ab-blur__ghost--2 {
    transform: translate(calc(var(--gx, 0) * -7px), calc(var(--gy, 0) * -7px)) scale(1.07);
}
.ab-thing--blur.is-on .ab-blur__pic img:first-child {
    filter: blur(1.6px) brightness(1.06) saturate(1.2);
}
.ab-thing--blur.is-on .ab-blur__ghost {
    opacity: 0.5;
}
.ab-blur__af {
    position: absolute;
    inset: 22% 18%;
    opacity: 0;
    --c: rgba(255, 255, 255, 0.95);
    background:
        linear-gradient(var(--c), var(--c)) 0 0 / 16px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 0 / 2px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 0 / 16px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 0 / 2px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 100% / 16px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 0 100% / 2px 16px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 100% / 16px 2px no-repeat,
        linear-gradient(var(--c), var(--c)) 100% 100% / 2px 16px no-repeat;
}
.ab-thing--blur.is-on .ab-blur__af {
    animation: abHunt 1.5s ease-in-out forwards;
}
@keyframes abHunt {
    0% {
        opacity: 1;
        scale: 1.25;
    }
    30% {
        scale: 0.85;
    }
    55% {
        scale: 1.1;
    }
    80% {
        opacity: 1;
        scale: 0.95;
    }
    100% {
        opacity: 0;
        scale: 0.95;
    }
}
.ab-blur__pic em {
    position: absolute;
    left: 0;
    right: 0;
    top: 8px;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    font-style: normal;
    text-align: center;
    color: #fff;
    opacity: 0;
    text-shadow: 0 1px 6px rgba(60, 30, 0, 0.6);
    transition: opacity 0.2s ease;
}
.ab-thing--blur.is-on .ab-blur__pic em {
    opacity: 1;
    transition: opacity 0.4s ease 1.3s;
}

/* lily and tiramisu: snapshots with something falling on them */
.ab-snap {
    position: relative;
    display: block;
    box-sizing: border-box;
    width: calc(var(--obj) * 0.92);
    height: var(--obj);
    padding: 7px 7px 20px;
    rotate: -2.2deg;
    background: #fff;
    box-shadow: 0 16px 20px -14px rgba(40, 30, 95, 0.55);
    transition:
        rotate 0.6s cubic-bezier(0.3, 1.4, 0.5, 1),
        scale 0.6s cubic-bezier(0.3, 1.4, 0.5, 1);
}
.ab-snap--tiramisu {
    rotate: 2deg;
}
.ab-thing.is-on .ab-snap {
    rotate: 1.2deg;
    scale: 1.03;
}
.ab-thing.is-on .ab-snap--tiramisu {
    rotate: -0.8deg;
}
.ab-snap__pic {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #ece7f8;
}
.ab-snap__pic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ab-thing--tiramisu .ab-snap__pic img {
    object-position: 50% 58%;
}
.ab-petal,
.ab-speck {
    position: absolute;
    z-index: 3;
    top: 0;
    pointer-events: none;
}
.ab-petal {
    width: 15px;
    filter: drop-shadow(0 2px 2px rgba(120, 40, 90, 0.35));
}
.ab-petal svg {
    display: block;
}
.ab-speck {
    top: 22%;
    width: 2.5px;
    height: 2.5px;
    border-radius: 50%;
    background: #4b2a16;
}
/* the sieve shakes above the plate while the cocoa builds up */
.ab-sieve {
    position: absolute;
    left: 50%;
    top: -2%;
    width: 42%;
    margin-left: -21%;
    opacity: 0;
    translate: 0 -12px;
    transition:
        opacity 0.25s ease,
        translate 0.35s ease;
}
.ab-sieve path {
    fill: none;
    stroke: #1d1932;
    stroke-width: 2;
    stroke-linecap: round;
}
.ab-sieve path:first-child {
    fill: rgba(255, 255, 255, 0.82);
}
.ab-sieve path:last-child {
    stroke-width: 1;
    opacity: 0.55;
}
.ab-thing--tiramisu.is-on .ab-sieve {
    opacity: 1;
    translate: 0 0;
    animation: abSift 0.22s linear infinite alternate;
}
@keyframes abSift {
    from {
        transform: translateX(-4px) rotate(-2deg);
    }
    to {
        transform: translateX(4px) rotate(2deg);
    }
}
.ab-snap__cocoa {
    position: absolute;
    inset: 0;
    opacity: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 0.26  0 0 0 0 0.14  0 0 0 0 0.07  0 0 0 3 -1.5'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    -webkit-mask: radial-gradient(ellipse 46% 40% at 50% 55%, #000 45%, transparent 100%);
    mask: radial-gradient(ellipse 46% 40% at 50% 55%, #000 45%, transparent 100%);
    transition: opacity 0.6s ease;
}
.ab-thing--tiramisu.is-on .ab-snap__cocoa {
    opacity: 0.9;
    transition: opacity 3.5s linear 0.3s;
}
@media (prefers-reduced-motion: reduce) {
    .ab-thing--tiramisu.is-on .ab-sieve,
    .ab-thing--blur.is-on .ab-blur__af {
        animation: none;
    }
}

/* ---- 04: the wall ---- */
.ab-wall {
    position: relative;
    display: grid;
    grid-template-columns: 18fr 26fr 16fr 21fr 19fr;
    gap: 2.2%;
    align-items: center;
    height: 100%;
    min-height: 400px;
    padding: clamp(44px, 8vh, 70px) 0 clamp(46px, 9vh, 76px);
    overflow-y: clip; /* the light beams stop at the top of the wall */
}
/* soft gallery light falling on each picture from above */
.ab-piece__beam {
    position: absolute;
    left: 50%;
    bottom: 40%;
    z-index: -1;
    width: 150%;
    height: 90vh;
    max-height: 520px;
    translate: -50% 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.05) 90%);
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.ab-piece:has(.ab-piece__frame:hover) .ab-piece__beam {
    opacity: 1;
}
.ab-body--wall {
    display: flex;
    flex-direction: column;
}
.ab-body--wall > .ab-wall {
    flex: 1;
}
.ab-piece {
    position: relative;
    margin: 0;
    min-width: 0;
    transition: opacity 0.4s ease;
}
.ab-piece:nth-child(even) {
    translate: 0 -10px;
}
.ab-piece:nth-child(3) {
    translate: 0 -28px;
}
.ab-wall:has(.ab-piece__frame:hover) .ab-piece:not(:has(.ab-piece__frame:hover)) {
    opacity: 0.5;
}
.ab-piece__wire {
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: 100%;
    height: 24px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 24' preserveAspectRatio='none'><path d='M0 24 30 3 60 24' fill='none' stroke='%231d1932' stroke-opacity='.5' stroke-width='1' vector-effect='non-scaling-stroke'/></svg>") center / 100% 100% no-repeat;
}
.ab-piece__wire::after {
    /* the nail */
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 5px;
    height: 5px;
    margin: -1px 0 0 -2.5px;
    border-radius: 50%;
    background: var(--ink);
}
.ab-piece__frame {
    position: relative;
    display: block;
    width: 100%;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 6px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.44));
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    box-shadow: 0 24px 34px -22px rgba(40, 30, 95, 0.62);
    cursor: zoom-in;
    transition:
        transform 0.5s cubic-bezier(0.2, 0.9, 0.25, 1),
        box-shadow 0.4s ease;
}
.ab-piece__frame::after {
    /* pencil outline, off-register */
    content: "";
    position: absolute;
    inset: -3px -2px -2px -3px;
    border: 1.2px solid var(--pencil);
    border-radius: 7px;
    filter: url(#ab-pencil);
    pointer-events: none;
}
.ab-piece__frame:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 34px 44px -24px rgba(40, 30, 95, 0.72);
}
.ab-piece__art {
    display: block;
    overflow: hidden;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px rgba(29, 25, 50, 0.14);
}
/* a sliver of reflection on the picture glass, sliding with the pointer */
.ab-piece__glare {
    position: absolute;
    inset: 9px;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(112deg, transparent calc(var(--gx, 30%) - 24%), rgba(255, 255, 255, 0.34) calc(var(--gx, 30%) - 5%), rgba(255, 255, 255, 0.06) calc(var(--gx, 30%) + 3%), rgba(255, 255, 255, 0.2) calc(var(--gx, 30%) + 8%), transparent calc(var(--gx, 30%) + 20%));
}
/* a pencilled note on the wall, pointing to more of the work */
.ab-insta {
    position: absolute;
    right: 0;
    bottom: 34px;
    rotate: -2deg;
    font-family: var(--hand);
    font-size: var(--t-hand);
    font-weight: 500;
    line-height: 1.05;
    color: var(--soft);
    text-decoration: none;
}
.ab-insta b {
    font-weight: 600;
    color: var(--accent);
    text-decoration: underline wavy 1px;
    text-underline-offset: 4px;
}
.ab-insta:hover b {
    color: var(--ink);
}
.ab-insta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.ab-perch {
    position: absolute;
    right: -6px;
    top: -16px;
    z-index: 3;
    width: 30px;
    height: 22px;
    pointer-events: none;
}
.ab-floor {
    position: absolute;
    left: calc(-1 * clamp(18px, 3vw, 40px));
    right: calc(-1 * clamp(18px, 3vw, 40px));
    bottom: 22px;
    height: 2px;
    background: var(--pencil);
    opacity: 0.55;
    filter: url(#ab-pencil);
}
.ab-bench {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: clamp(120px, 15vw, 190px);
    margin-left: calc(clamp(120px, 15vw, 190px) / -2);
    overflow: visible;
    filter: url(#ab-pencil);
}
.ab-bench path {
    fill: rgba(255, 255, 255, 0.5);
    stroke: var(--pencil);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ab-lightbox__body {
    display: grid;
    justify-items: center;
    gap: 14px;
}
.ab-lightbox__art {
    overflow: hidden;
    border-radius: 6px;
}
.ab-lightbox__art img {
    height: auto;
    max-height: 72svh;
    object-fit: contain;
}

/* ---- phones and small tablets: same drawer, stacked contents ---- */
@media (max-width: 899px) {
    .about {
        padding-top: 70px;
    }
    .ab-head {
        grid-template-columns: 1fr;
    }
    .ab-card {
        max-width: 340px;
    }
    .ab-tab {
        left: calc(var(--i) * 100% / var(--n));
        width: calc(100% / var(--n) - 1%);
        gap: 4px;
        font-family: var(--hand);
        font-size: calc(var(--t-hand-sm) - (var(--n) - 4) * 3px);
        font-weight: 500;
    }
    .ab-tab .ab-mono {
        display: none;
    }
    .ab-folder__head .ab-hand {
        flex-basis: 100%;
        margin-left: 0;
    }
    .ab-body--moments,
    .ab-body--repeat {
        grid-template-columns: minmax(0, 1fr);
    }
    .ab-hello {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        grid-template-areas:
            "title"
            "frame"
            "lead"
            "work"
            "beyond"
            "loves"
            "belief";
        padding: 0 0 8px;
        rotate: none;
    }
    .ab-hello__title {
        width: auto;
        padding-bottom: 92px;
}
    .ab-hello__me {
        width: 100%;
    }
    .ab-hello__frame {
        width: min(82%, 420px);
        aspect-ratio: 1 / 0.66;
        margin: 0 auto 34px;
        rotate: -3deg;
    }
    .ab-hello__line--l,
    .ab-hello__line--r {
        top: -46px;
        bottom: -30px;
    }
    .ab-hello__cell,
    .ab-hello__cell--beyond,
    .ab-hello__cell--belief {
        padding: 14px 40px 14px 0;
        border-top: 1px solid rgba(29, 25, 50, 0.2);
    }
    .ab-hello__cell--lead {
        border-top: 0;
    }
    .ab-hello__no {
        top: 15px;
        right: 0;
    }
    .ab-hello__cell p {
}
    .ab-hello__cell--lead p {
}
    .ab-hello__cell--belief p {
}
    .ab-hello__loves {
        min-height: 0;
        height: 148px;
    }
    .ab-cut--wireframe {
        left: -13%;
        top: -30%;
        width: 88px;
    }
    .ab-cut--pot {
        right: -11%;
        bottom: -22%;
        width: 84px;
    }
    .ab-cut--sunset {
        left: 6%;
        top: 8%;
        width: min(25%, 110px);
    }
    .ab-cut--stars {
        left: 35%;
        right: auto;
        top: 12%;
        width: min(26%, 112px);
    }
    .ab-cut--palette {
        left: auto;
        right: 5%;
        bottom: 12%;
        width: min(32%, 130px);
    }
    .ab-cal-wrap {
        width: min(100%, 430px);
        margin-inline: auto;
    }
    .ab-note {
        grid-template-columns: minmax(130px, 170px) minmax(0, 1fr);
    }
    .ab-deck__plinth {
        width: 100%;
    }
    .ab-play {
        width: 42px;
        height: 42px;
    }
    .ab-play svg {
        width: 18px;
    }
    .ab-deck__light {
        right: calc(5% + 52px);
        bottom: calc(6% + 17px);
    }
    .ab-vinyl__label b {
        font-size: 12px;
    }
    .ab-sleeve-wrap {
        flex-direction: row;
        align-items: center;
    }
    .ab-sleeve {
        flex: none;
        width: 110px;
    }
    .ab-things {
        --obj: 150px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 8px;
    }
    .ab-thing__label {
}
    .ab-wall {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-flow: dense;
        gap: 44px 7%;
        align-items: end;
        height: auto;
        padding-top: 32px;
    }
    .ab-piece__beam {
        display: none;
    }
    .ab-piece:nth-child(n) {
        translate: none;
    }
    .ab-piece--wide {
        grid-column: 1 / -1;
        padding-inline: 8%;
    }
    .ab-insta {
        position: static;
        grid-column: 1 / -1;
        justify-self: center;
        margin-top: -14px;
    }
}
@media (max-width: 460px) {
    .ab-note {
        grid-template-columns: minmax(0, 1fr);
    }
    .ab-polaroid {
        width: 200px;
        margin-inline: auto;
    }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------ what I bring to a team: the jigsaw (team.js), folder 02 of the archive ------------------------------ */
/* loose pieces on the folder; drop each on its pencilled spot, and the finished puzzle turns into cards */

.ab-body--team {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tm-board path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tm-stage {
    position: relative;
    -webkit-user-select: none;
    user-select: none;
    transition: height 0.6s cubic-bezier(0.3, 1, 0.5, 1);
}
.tm-board {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
.tm-board path {
    fill: rgba(255, 255, 255, 0.4);
    stroke: rgba(90, 70, 198, 0.42);
    stroke-width: 1.4;
    stroke-dasharray: 5 6;
}
.tm.is-solved .tm-board {
    opacity: 0;
}

/* a piece: the front is the coloured jigsaw shape, the back a square card; the button turns over once the puzzle is done */
.tm-piece {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--e);
    height: var(--e);
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    perspective: 900px;
    filter: drop-shadow(0 12px 10px rgba(40, 30, 95, 0.26));
    transition:
        transform 0.55s cubic-bezier(0.3, 1.35, 0.5, 1),
        filter 0.3s ease;
}
.tm-piece.is-instant,
.tm-piece.is-dragging {
    transition: filter 0.3s ease;
}
.tm-piece.is-dragging {
    cursor: grabbing;
    filter: drop-shadow(0 26px 20px rgba(40, 30, 95, 0.34));
}
.tm-piece.is-placed {
    cursor: default;
    filter: drop-shadow(0 4px 4px rgba(40, 30, 95, 0.18));
}
.tm-piece:focus-visible {
    outline: none;
}
.tm-piece:focus-visible .tm-piece__shape {
    stroke: var(--accent);
    stroke-width: 3;
}
/* the click: a squash past the outline and back, with a quick bright flash */
.tm-piece.is-locking {
    animation: tmLock 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
}
@keyframes tmLock {
    0% {
        scale: 1.07;
    }
    40% {
        scale: 0.97;
        filter: drop-shadow(0 4px 4px rgba(40, 30, 95, 0.18)) brightness(1.14);
    }
    100% {
        scale: 1;
    }
}
.tm-click {
    position: absolute;
    z-index: 25;
    width: 46px;
    height: 46px;
    margin: -23px 0 0 -23px;
    pointer-events: none;
    animation: tmClick 0.55s ease-out forwards;
}
.tm-click svg {
    display: block;
    overflow: visible;
}
.tm-click path {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.4;
    stroke-linecap: round;
}
@keyframes tmClick {
    from {
        opacity: 1;
        scale: 0.5;
    }
    to {
        opacity: 0;
        scale: 1.5;
    }
}
.tm-piece.is-nope {
    animation: tmNope 0.4s ease;
}
@keyframes tmNope {
    25% {
        translate: -7px 0;
    }
    50% {
        translate: 6px 0;
    }
    75% {
        translate: -3px 0;
    }
}
.tm-piece__flip {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 0.75s cubic-bezier(0.45, 0.05, 0.25, 1);
}
.tm.is-solved .tm-piece__flip {
    transform: rotateY(180deg);
    transition-delay: calc(1s + var(--i) * 0.14s);
}
.tm-piece__front,
.tm-piece__back {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.tm-piece__front {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.tm-piece__shape {
    fill: var(--c);
    stroke: rgba(29, 25, 50, 0.18);
    stroke-width: 0.8;
}
.tm-face {
    fill: none;
    stroke: #1d1932;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.tm-face .tm-dot {
    fill: #1d1932;
    stroke: none;
}
/* the back: a square card over the piece's own cell (the knobs sit 24 of 148 units outside it) */
.tm-piece__back {
    inset: calc(16.216% + 3px);
    transform: rotateY(180deg);
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    background: linear-gradient(150deg, color-mix(in srgb, var(--c) 22%, #fff), color-mix(in srgb, var(--c) 8%, #fff));
    box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--c) 55%, transparent);
}
.tm-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--unit, 2) * 2.4px);
    padding: calc(var(--unit, 2) * 7px);
    text-align: left;
}
.tm-card__label {
    font-family: var(--mono);
    font-size: clamp(8.5px, calc(var(--unit, 2) * 4.6px), 11px);
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--c) 60%, #1d1932);
}
.tm-card__title {
    font-family: Figtree, var(--sans);
    font-size: clamp(13px, calc(var(--unit, 2) * 10px), 23px);
    font-weight: 500;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--ink);
}

/* the reveal: a strip of washi tape stamped across the top of the finished puzzle */
.tm-ribbon {
    position: absolute;
    z-index: 30;
    margin: 0;
    translate: -50% -50%;
    rotate: -2deg;
    padding: 6px 26px 8px;
    white-space: nowrap;
    font-family: var(--hand);
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 600;
    line-height: 1;
    color: var(--ink);
    background: color-mix(in srgb, #ffb9c9 78%, transparent);
    clip-path: polygon(0 0, 2% 22%, 0 44%, 2% 66%, 0 100%, 100% 100%, 98% 74%, 100% 50%, 98% 26%, 100% 0);
    box-shadow: 0 6px 12px -8px rgba(40, 30, 95, 0.4);
    opacity: 0;
    scale: 0.4;
    visibility: hidden;
    pointer-events: none;
}
.tm.is-wall .tm-piece {
    transition-duration: 0.8s;
    transition-delay: calc(var(--i) * 0.06s);
}
.tm.is-solved .tm-ribbon {
    visibility: visible;
    animation: tmStamp 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.35s forwards;
}
@keyframes tmStamp {
    to {
        opacity: 1;
        scale: 1;
    }
}
.tm-foot {
    margin: 8px auto 0;
    text-align: center;
}
.tm-skip {
    padding: 4px 8px;
    border: 0;
    background: none;
    font-family: var(--hand);
    font-size: 22px;
    color: var(--accent);
    text-decoration: underline wavy 1px;
    text-underline-offset: 5px;
    cursor: pointer;
}
.tm-skip:hover {
    color: var(--ink);
}
.tm-skip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .tm-piece,
    .tm-piece__flip {
        transition: none;
    }
    .tm.is-solved .tm-ribbon {
        animation: none;
        opacity: 1;
        scale: 1;
    }
}