/* PROFILE SCRAPBOOK WORKSPACE */

.profile-stage {
    position: relative;
    z-index: 2;
    min-height: 610px;
}

.profile-burst {
    position: absolute;
    top: 38px;
    right: 10px;
    left: 10px;
    height: 520px;
    transform: rotate(4deg);
    background: var(--yellow);
    clip-path: polygon(50% 0%, 60% 15%, 78% 7%, 80% 26%, 100% 30%, 87% 47%, 99% 62%, 80% 68%, 82% 89%, 61% 82%, 50% 100%, 39% 83%, 17% 91%, 20% 69%, 0 62%, 14% 47%, 1% 30%, 20% 26%, 22% 7%, 40% 15%);
}

.profile-polaroid {
    position: absolute;
    z-index: 2;
    top: 72px;
    left: 50%;
    width: min(75%, 385px);
    padding: 16px 16px 20px;
    transform: translateX(-50%) rotate(3.5deg);
    border: var(--border);
    background: white;
    box-shadow: 10px 11px 0 var(--ink);
    transition: transform 0.35s ease;
}

.profile-polaroid:hover {
    transform: translateX(-50%) rotate(-1deg) scale(1.025);
}

.profile-polaroid img {
    width: 100%;
    aspect-ratio: 0.9;
    border: 2px solid var(--ink);
    background: var(--blue);
    object-fit: cover;
}

.profile-tape,
.tape {
    position: absolute;
    z-index: 4;
    width: 92px;
    height: 28px;
    border: 1px solid rgba(36, 34, 56, 0.35);
    background: rgba(255, 159, 67, 0.76);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.profile-tape {
    top: -16px;
    left: 50%;
    transform: translateX(-50%) rotate(-4deg);
}

.profile-caption {
    display: flex;
    padding: 17px 5px 0;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.profile-caption strong {
    font-family: "Caveat", cursive;
    font-size: 25px;
}

.profile-caption span {
    font-size: 10px;
    font-weight: 800;
    text-align: right;
    text-transform: uppercase;
}

/* Marquee */
.marquee-band {
    position: relative;
    z-index: 10;
    padding: 13px 0;
    transform: rotate(1deg) scale(1.01);
    overflow: hidden;
    border-block: var(--border);
    background: var(--yellow);
}

.marquee-track {
    display: flex;
    width: max-content;
    align-items: center;
    gap: 25px;
    font-family: "Bowlby One", sans-serif;
    font-size: 20px;
    animation: marquee 20s linear infinite;
}

.marquee-track i {
    color: var(--purple);
    font-style: normal;
    -webkit-text-stroke: 1px var(--ink);
}

@keyframes marquee {
    to { transform: translateX(-50%); }
}

/* =========================================================
   PROFILE — CREATIVE DOSSIER COLLAGE
   A deliberately asymmetrical alternative to a landing hero.
========================================================= */

.profile-section {
    position: relative;
    min-height: 100vh;
    padding: 46px 0 82px;
    overflow: hidden;
    background: var(--cream);
    isolation: isolate;
}

.profile-grid-bg {
    position: absolute;
    z-index: -5;
    inset: 0;
    background-image:
        linear-gradient(rgba(36, 34, 56, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 34, 56, 0.055) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}

.profile-orbit {
    position: absolute;
    z-index: -4;
    border: 3px solid var(--ink);
    border-radius: 50%;
}

.profile-orbit-one {
    top: -230px;
    right: -190px;
    width: 620px;
    aspect-ratio: 1;
    background: var(--purple);
    box-shadow: inset 0 0 0 13px var(--pink), inset 0 0 0 16px var(--ink);
}

.profile-orbit-two {
    bottom: 30px;
    left: 4%;
    width: 140px;
    aspect-ratio: 1;
    background: var(--blue);
    transform: rotate(13deg);
    border-radius: 34% 66% 45% 55% / 55% 36% 64% 45%;
}

.profile-canvas {
    position: relative;
    z-index: 2;
}

.profile-folder-tabs {
    display: flex;
    height: 42px;
    padding-left: 28px;
    align-items: flex-end;
    gap: 5px;
}

.profile-folder-tabs span {
    display: inline-flex;
    height: 34px;
    padding: 0 18px;
    align-items: center;
    border: 2.5px solid var(--ink);
    border-bottom: 0;
    border-radius: 13px 13px 0 0;
    background: var(--blue);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.profile-folder-tabs span:nth-child(3) {
    background: var(--pink);
}

.profile-folder-tabs .is-selected {
    height: 42px;
    background: var(--yellow);
    font-size: 10px;
}

.profile-collage {
    position: relative;
    display: grid;
    min-height: 846px;
    padding: 26px;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(9, 74px);
    gap: 16px;
    border: var(--border);
    border-radius: 30px;
    background: rgba(255, 253, 247, 0.88);
    box-shadow: 11px 11px 0 var(--ink);
    backdrop-filter: blur(8px);
}

.profile-name-sheet,
.profile-photo-note,
.profile-story-note,
.profile-toolkit-note,
.profile-score-note {
    position: relative;
    margin: 0;
    border: var(--border);
    box-shadow: var(--shadow-small);
}

.profile-name-sheet {
    z-index: 1;
    grid-column: 1 / 9;
    grid-row: 1 / 4;
    padding: 24px 35px 22px;
    overflow: hidden;
    transform: rotate(-1deg);
    border-radius: 13px 24px 17px 12px;
    background: var(--paper);
}

.profile-name-sheet::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 17px;
    width: 2px;
    background: rgba(255, 107, 138, 0.75);
    content: "";
}

.profile-name-sheet::after {
    position: absolute;
    z-index: -1;
    inset: 0;
    background-image: linear-gradient(transparent 31px, rgba(36, 34, 56, 0.09) 32px);
    background-size: 100% 32px;
    content: "";
}

.profile-hello {
    margin: 0;
    color: var(--purple-dark);
    font-family: "Caveat", cursive;
    font-size: clamp(19px, 2vw, 27px);
    font-weight: 700;
}

.profile-name-sheet h1 {
    margin: -4px 0 0;
    font-family: "Bowlby One", "Arial Black", sans-serif;
    font-size: clamp(66px, 8.2vw, 112px);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.055em;
    text-transform: uppercase;
    text-shadow: 5px 5px 0 var(--yellow);
}

.profile-role-ribbon {
    position: absolute;
    right: 24px;
    bottom: 48px;
    display: flex;
    min-width: 245px;
    padding: 9px 13px;
    transform: rotate(-2deg);
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 2px solid var(--ink);
    background: var(--purple);
    color: white;
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.profile-role-ribbon i {
    color: var(--yellow);
    font-size: 18px;
    font-style: normal;
}

.profile-short-bio {
    max-width: 51%;
    margin: 13px 0 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.55;
}

.profile-photo-note {
    z-index: 4;
    grid-column: 1 / 5;
    grid-row: 4 / 10;
    padding: 13px 13px 17px;
    transform: rotate(-3deg);
    border-radius: 8px;
    background: white;
    transition: transform 0.3s ease;
}

.profile-photo-note:hover {
    transform: rotate(0deg) translateY(-5px);
}

.profile-photo-note img {
    width: 100%;
    height: 395px;
    border: 2px solid var(--ink);
    background: var(--blue);
    object-fit: cover;
}

.profile-photo-note figcaption {
    display: flex;
    padding: 13px 4px 1px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
}

.profile-photo-note figcaption strong {
    font-family: "Caveat", cursive;
    font-size: 24px;
}

.profile-photo-note figcaption span {
    font-size: 9px;
    font-weight: 800;
    text-align: right;
    text-transform: uppercase;
}

.profile-story-note {
    z-index: 5;
    grid-column: 5 / 13;
    grid-row: 4 / 7;
    padding: 26px 30px;
    transform: rotate(1.2deg);
    border-radius: 19px 8px 20px 9px;
    background: var(--yellow);
}

.profile-story-note::after {
    position: absolute;
    right: 20px;
    bottom: -18px;
    width: 40px;
    height: 36px;
    transform: rotate(18deg);
    border-right: var(--border);
    border-bottom: var(--border);
    background: var(--yellow);
    content: "";
}

.profile-story-note header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px dashed rgba(36, 34, 56, 0.45);
}

.profile-story-note header span {
    font-family: "Bowlby One", sans-serif;
    font-size: clamp(22px, 2.5vw, 33px);
}

.profile-story-note header i {
    font-family: "Caveat", cursive;
    font-size: 34px;
    font-style: normal;
}

.profile-story-note > p {
    margin: 16px 0 17px;
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 650;
    line-height: 1.7;
}

.profile-toolkit-note {
    z-index: 3;
    grid-column: 5 / 9;
    grid-row: 7 / 10;
    padding: 20px;
    transform: rotate(-1.2deg);
    border-radius: 18px;
    background: var(--blue);
}

.toolkit-heading {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toolkit-heading > span {
    display: grid;
    width: 55px;
    aspect-ratio: 1;
    place-items: center;
    transform: rotate(-5deg);
    border: 2px solid var(--ink);
    border-radius: 13px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    font-family: monospace;
    font-size: 15px;
    font-weight: 900;
}

.toolkit-heading div {
    display: flex;
    flex-direction: column;
}

.toolkit-heading small {
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.toolkit-heading strong {
    font-family: "Bowlby One", sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1;
}

.profile-skill-cloud {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    gap: 7px;
}

.profile-skill-cloud span {
    padding: 6px 9px;
    transform: rotate(-1deg);
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 9px;
    font-weight: 850;
}

.profile-skill-cloud span:nth-child(2n) {
    transform: rotate(2deg);
    background: var(--mint);
}

.profile-toolkit-note > p {
    margin: 18px 0 0;
    transform: rotate(-2deg);
    font-family: "Caveat", cursive;
    font-size: 17px;
    font-weight: 700;
    text-align: right;
}

.profile-score-note {
    z-index: 2;
    grid-column: 9 / 13;
    grid-row: 7 / 10;
    padding: 20px;
    transform: rotate(1.5deg);
    border-radius: 18px;
    background: var(--pink);
}

.profile-float {
    position: absolute;
    z-index: 6;
    display: grid;
    place-items: center;
    border: 2.5px solid var(--ink);
    box-shadow: var(--shadow-small);
    font-weight: 900;
}

.profile-float-star {
    top: 88px;
    left: 7%;
    width: 58px;
    aspect-ratio: 1;
    transform: rotate(-12deg);
    background: var(--yellow);
    clip-path: polygon(50% 0, 61% 34%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 20% 94%, 31% 57%, 2% 35%, 38% 34%);
    animation: spin-slow 9s linear infinite;
}

.profile-float-code {
    right: 3%;
    bottom: 138px;
    padding: 10px 12px;
    transform: rotate(7deg);
    border-radius: 11px;
    background: var(--mint);
    font-family: monospace;
    animation: float-y 4s ease-in-out infinite;
}

.profile-float-face {
    top: 105px;
    right: 28%;
    width: 58px;
    aspect-ratio: 1;
    transform: rotate(8deg);
    border-radius: 50%;
    background: var(--pink);
    font-size: 17px;
    animation: wiggle 3.5s ease-in-out infinite;
}

/* =========================================================
   PROFILE — TOP VIEW CREATIVE WORKSPACE
========================================================= */

.workspace-section {
    position: relative;
    min-height: 100vh;
    padding: 52px 0 92px;
    overflow: hidden;
    background: var(--cream);
    isolation: isolate;
}

.workspace-wall-grid {
    position: absolute;
    z-index: -5;
    inset: 0;
    background-image:
        linear-gradient(rgba(36, 34, 56, 0.052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(36, 34, 56, 0.052) 1px, transparent 1px);
    background-size: 35px 35px;
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.workspace-shape {
    position: absolute;
    z-index: -4;
    border: var(--border);
}

.workspace-shape-purple {
    top: -180px;
    right: -145px;
    width: 510px;
    height: 390px;
    transform: rotate(14deg);
    border-radius: 44% 56% 37% 63% / 57% 42% 58% 43%;
    background: var(--purple);
}

.workspace-shape-yellow {
    bottom: 40px;
    left: 3%;
    width: 155px;
    aspect-ratio: 1;
    transform: rotate(-12deg);
    border-radius: 36% 64% 49% 51% / 57% 35% 65% 43%;
    background: var(--yellow);
}

.workspace-wrap {
    position: relative;
    z-index: 2;
}

.workspace-label {
    display: flex;
    margin: 0 18px 20px;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.workspace-label > div {
    display: flex;
    flex-direction: column;
}

.workspace-label span {
    margin-bottom: 4px;
    color: var(--purple-dark);
    font-family: monospace;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.workspace-label strong {
    font-family: "Bowlby One", sans-serif;
    font-size: clamp(25px, 3vw, 42px);
    font-weight: 400;
    line-height: 1;
}

.workspace-label p {
    display: inline-flex;
    margin: 0;
    padding: 8px 13px;
    align-items: center;
    gap: 8px;
    transform: rotate(1deg);
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: white;
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 10px;
    font-weight: 850;
    text-transform: uppercase;
}

.workspace-label p i {
    width: 9px;
    aspect-ratio: 1;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: var(--mint);
    animation: blink-dot 1.6s ease-in-out infinite;
}

.creative-desk {
    position: relative;
    display: grid;
    min-height: 790px;
    padding: 35px;
    grid-template-columns: minmax(0, 1.65fr) minmax(290px, 0.72fr);
    grid-template-rows: 468px 250px;
    gap: 22px;
    border: var(--border);
    border-radius: 38px;
    background: #62ceb9;
    box-shadow: 12px 12px 0 var(--ink);
    isolation: isolate;
}

.creative-desk::before {
    position: absolute;
    z-index: -2;
    inset: 13px;
    border: 2px dashed rgba(36, 34, 56, 0.32);
    border-radius: 27px;
    content: "";
    pointer-events: none;
}

.desk-grain {
    position: absolute;
    z-index: -3;
    inset: 0;
    overflow: hidden;
    border-radius: inherit;
    background-image:
        repeating-linear-gradient(8deg, transparent 0 54px, rgba(36, 34, 56, 0.035) 55px 57px),
        radial-gradient(circle at 13% 17%, rgba(255,255,255,0.24) 0 2px, transparent 3px),
        radial-gradient(circle at 78% 62%, rgba(36,34,56,0.08) 0 2px, transparent 3px);
    background-size: auto, 31px 31px, 38px 38px;
}

.desk-lamp-glow {
    position: absolute;
    z-index: -1;
    top: -140px;
    left: 15%;
    width: 550px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 235, 116, 0.52), rgba(255, 217, 61, 0) 68%);
    pointer-events: none;
}

/* Open notebook */
.desk-notebook {
    position: relative;
    z-index: 3;
    display: grid;
    grid-column: 1;
    grid-row: 1 / 3;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    transform: rotate(-1.1deg);
    filter: drop-shadow(8px 10px 0 rgba(36, 34, 56, 0.96));
    transition: transform 0.35s ease;
}

.desk-notebook:hover {
    transform: rotate(-0.35deg) translateY(-3px);
}

.notebook-shadow {
    position: absolute;
    z-index: -1;
    inset: 14px 9px -8px;
    border-radius: 20px;
    background: var(--purple-dark);
}

.notebook-page {
    position: relative;
    min-width: 0;
    padding: 29px 28px;
    overflow: hidden;
    border: var(--border);
    background-color: var(--paper);
    background-image: linear-gradient(transparent 29px, rgba(101, 214, 255, 0.25) 30px);
    background-size: 100% 30px;
}

.notebook-profile-page {
    border-radius: 24px 5px 5px 20px;
    border-right-width: 2px;
}

.notebook-story-page {
    border-left-width: 2px;
    border-radius: 5px 24px 20px 5px;
}

.notebook-page::before {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgba(255, 107, 138, 0.64);
    content: "";
}

.notebook-profile-page::before { left: 19px; }

.notebook-story-page::before { right: 19px; }

.notebook-page-number {
    position: absolute;
    top: 14px;
    color: rgba(36, 34, 56, 0.52);
    font-family: monospace;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.1em;
}

.notebook-profile-page .notebook-page-number { left: 29px; }

.notebook-story-page .notebook-page-number { right: 29px; }

.notebook-kicker {
    margin: 15px 0 0;
    color: var(--purple-dark);
    font-family: "Caveat", cursive;
    font-size: clamp(20px, 2vw, 27px);
    font-weight: 700;
}

.notebook-binding {
    position: absolute;
    z-index: 12;
    top: 25px;
    bottom: 25px;
    left: 50%;
    display: flex;
    width: 34px;
    transform: translateX(-50%);
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    pointer-events: none;
}

.notebook-binding::before {
    position: absolute;
    z-index: -1;
    top: -10px;
    bottom: -10px;
    left: 50%;
    width: 13px;
    transform: translateX(-50%);
    border-inline: 2px solid rgba(36, 34, 56, 0.42);
    background: rgba(36, 34, 56, 0.06);
    content: "";
}

.notebook-binding i {
    width: 30px;
    height: 9px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--yellow);
    box-shadow: 2px 2px 0 rgba(36, 34, 56, 0.55);
}

.desk-polaroid {
    position: relative;
    width: min(79%, 250px);
    margin: 43px auto 0;
    padding: 11px 11px 16px;
    transform: rotate(-3deg);
    border: 2.5px solid var(--ink);
    background: white;
    box-shadow: 6px 7px 0 var(--ink);
    transition: transform 0.28s ease;
}

.desk-polaroid:hover {
    transform: rotate(2deg) scale(1.025);
}

.desk-polaroid img {
    width: 100%;
    height: 290px;
    border: 2px solid var(--ink);
    background: var(--blue);
    object-fit: cover;
}

.desk-polaroid figcaption {
    padding-top: 10px;
    font-family: "Caveat", cursive;
    font-size: 22px;
    font-weight: 700;
    text-align: center;
}

.notebook-identity {
    display: flex;
    margin-top: 31px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 7px;
}

.notebook-identity span {
    padding: 6px 9px;
    transform: rotate(-1deg);
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--blue);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.notebook-identity span:nth-child(2) {
    transform: rotate(1.5deg);
    background: var(--yellow);
}

.notebook-arrow {
    position: absolute;
    z-index: 3;
    top: 154px;
    left: -67px;
    width: 88px;
    fill: none;
    stroke: var(--purple-dark);
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notebook-photo-note {
    position: absolute;
    z-index: 3;
    top: 218px;
    left: -72px;
    width: 76px;
    transform: rotate(-7deg);
    color: var(--purple-dark);
    font-family: "Caveat", cursive;
    font-size: 17px;
    font-weight: 700;
}

.notebook-story-page h1 {
    margin: 36px 0 9px;
    font-family: "Bowlby One", sans-serif;
    font-size: clamp(28px, 3.25vw, 47px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.notebook-story-page h1 span {
    position: relative;
    display: inline-block;
    color: var(--purple);
    -webkit-text-stroke: 1.5px var(--ink);
    text-shadow: 3px 3px 0 var(--yellow);
}

.notebook-story-page h1 span::after {
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 6px;
    transform: rotate(-2deg);
    border-radius: 999px;
    background: var(--pink);
    content: "";
}

.notebook-role {
    display: inline-block;
    padding: 7px 11px;
    transform: rotate(-1deg);
    border: 2px solid var(--ink);
    background: var(--yellow);
    box-shadow: 3px 3px 0 var(--ink);
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.notebook-short-bio {
    margin: 28px 0 15px;
    padding: 12px 14px;
    transform: rotate(0.7deg);
    border-left: 5px solid var(--pink);
    background: rgba(255, 217, 61, 0.36);
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 750;
    line-height: 1.62;
}

.notebook-long-bio {
    margin: 0;
    font-size: clamp(12px, 1vw, 14px);
    font-weight: 600;
    line-height: 1.72;
}

.notebook-actions {
    display: grid;
    width: min(100%, 320px);
    margin-top: 25px;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    align-items: center;
    gap: 10px;
}

.notebook-button {
    position: relative;
    display: inline-flex;
    min-width: 0;
    min-height: 51px;
    padding: 6px 6px 6px 11px;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 2.5px solid var(--ink);
    border-radius: 13px;
    box-shadow: 4px 5px 0 var(--ink);
    color: var(--ink);
    isolation: isolate;
    transition:
        transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 0.24s ease,
        filter 0.24s ease;
}

.notebook-button::before {
    position: absolute;
    z-index: -1;
    top: -45px;
    left: -55px;
    width: 42px;
    height: 145px;
    transform: rotate(24deg);
    background: rgba(255, 255, 255, 0.46);
    content: "";
    transition: left 0.55s ease;
}

.notebook-button-primary {
    transform: rotate(-1deg);
    background: var(--yellow);
}

.notebook-button-secondary {
    transform: rotate(1deg);
    background: var(--blue);
}

.notebook-button-label {
    display: grid;
    gap: 2px;
    line-height: 1.05;
}

.notebook-button-label small {
    font-family: monospace;
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 0.13em;
}

.notebook-button-label strong {
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.notebook-button-icon {
    display: grid;
    width: 32px;
    flex: 0 0 32px;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 9px;
    background: var(--paper);
    box-shadow: 2px 2px 0 var(--ink);
    transition: transform 0.25s cubic-bezier(0.18, 0.89, 0.27, 1.35), background 0.25s ease;
}

.notebook-button-secondary .notebook-button-icon {
    border-radius: 50%;
    background: var(--pink);
}

.notebook-button-icon svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notebook-button:hover {
    filter: saturate(1.08);
    box-shadow: 8px 9px 0 var(--ink);
}

.notebook-button-primary:hover {
    transform: translate(-3px, -3px) rotate(0.5deg);
}

.notebook-button-secondary:hover {
    transform: translate(-3px, -3px) rotate(-0.5deg);
}

.notebook-button:hover::before {
    left: calc(100% + 35px);
}

.notebook-button:hover .notebook-button-icon {
    transform: translateX(3px) rotate(-4deg) scale(1.05);
    background: white;
}

.notebook-button-secondary:hover .notebook-button-icon {
    transform: translateY(3px) rotate(4deg) scale(1.05);
}

.notebook-button:active {
    transform: translate(2px, 3px) rotate(0) !important;
    box-shadow: 2px 2px 0 var(--ink);
}

.notebook-button:focus-visible {
    outline: 4px solid var(--purple);
    outline-offset: 4px;
}

.notebook-signature {
    position: absolute;
    right: 38px;
    bottom: 25px;
    transform: rotate(-3deg);
    color: var(--purple-dark);
    font-family: "Caveat", cursive;
    font-size: 18px;
    font-weight: 700;
}

/* Laptop */
.desk-laptop {
    position: relative;
    z-index: 5;
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    transform: rotate(2deg);
    transition: transform 0.3s ease;
}

.desk-laptop:hover {
    transform: rotate(0deg) translateY(-4px);
}

/* Sticky note scorecards */
.desk-sticky-board {
    position: relative;
    z-index: 6;
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 15px;
}

.desk-sticky {
    position: relative;
    min-width: 0;
    min-height: 155px;
    padding: 19px 8px 13px;
    border: 2.5px solid var(--ink);
    box-shadow: 4px 5px 0 var(--ink);
    text-align: center;
    transition: transform 0.25s ease;
}

.desk-sticky::before {
    position: absolute;
    top: -9px;
    left: 50%;
    width: 46px;
    height: 17px;
    transform: translateX(-50%) rotate(-3deg);
    border: 1px solid rgba(36,34,56,0.3);
    background: rgba(255,255,255,0.55);
    content: "";
}

.desk-sticky:hover {
    transform: translateY(-7px) rotate(2deg) !important;
}

.desk-sticky small {
    display: block;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.09em;
}

.desk-sticky strong {
    display: block;
    margin: 8px 0 3px;
    font-family: "Bowlby One", sans-serif;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 400;
    line-height: 1;
}

.desk-sticky > span {
    font-family: "Caveat", cursive;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.05;
}

/* Small desk objects */
.desk-project-folder {
    position: absolute;
    z-index: 10;
    bottom: 18px;
    left: -25px;
    display: flex;
    width: 168px;
    height: 126px;
    padding: 25px 16px 12px;
    transform: rotate(7deg);
    flex-direction: column;
    border: var(--border);
    border-radius: 8px 15px 13px 8px;
    background: var(--pink);
    box-shadow: 6px 7px 0 var(--ink);
    transition: transform 0.25s ease;
}

.desk-project-folder::after {
    position: absolute;
    right: -3px;
    bottom: -3px;
    left: -3px;
    height: 48px;
    border: var(--border);
    border-radius: 10px;
    background: #ff87a0;
    content: "";
}

.desk-project-folder:hover {
    transform: rotate(1deg) translate(5px, -7px);
}

.desk-project-folder strong,
.desk-project-folder small,
.folder-tab,
.folder-icon {
    position: relative;
    z-index: 2;
}

.folder-tab {
    position: absolute;
    top: -24px;
    left: 11px;
    min-width: 72px;
    padding: 5px 10px 4px;
    transform: rotate(-1deg);
    border: var(--border);
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
    background: var(--pink);
    color: var(--ink);
    font-family: monospace;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.folder-icon {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--yellow);
    color: var(--ink);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
}

.desk-project-folder strong {
    display: block;
    max-width: 108px;
    margin: 0;
    font-family: "Bowlby One", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

.desk-project-folder small {
    display: block;
    margin-top: auto;
    padding-top: 5px;
    font-family: "Caveat", cursive;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}

.desk-mug {
    position: absolute;
    z-index: 7;
    top: 276px;
    right: -42px;
    display: grid;
    width: 98px;
    aspect-ratio: 1;
    place-items: center;
    transform: rotate(8deg);
    border: var(--border);
    border-radius: 50%;
    background: var(--orange);
    box-shadow: 6px 7px 0 var(--ink), inset 0 0 0 12px var(--paper), inset 0 0 0 15px var(--ink);
}

.desk-mug::after {
    position: absolute;
    right: -31px;
    width: 41px;
    height: 47px;
    border: var(--border);
    border-left: 0;
    border-radius: 0 50% 50% 0;
    background: var(--orange);
    content: "";
}

.desk-mug span {
    position: relative;
    z-index: 2;
    font-family: "Bowlby One", sans-serif;
    font-size: 10px;
    line-height: 1;
    text-align: center;
}

.desk-mug i {
    position: absolute;
    z-index: 8;
    top: -35px;
    width: 8px;
    height: 30px;
    border: 3px solid rgba(255,255,255,0.78);
    border-block: 0;
    border-radius: 50%;
    animation: mug-steam 2.2s ease-in-out infinite;
}

.desk-mug i:nth-child(1) { left: 27px; }

.desk-mug i:nth-child(2) { left: 45px; animation-delay: 0.35s; }

.desk-mug i:nth-child(3) { left: 63px; animation-delay: 0.7s; }

.desk-pencil {
    position: absolute;
    z-index: 9;
    right: 31%;
    bottom: 9px;
    width: 180px;
    height: 25px;
    transform: rotate(-9deg);
    border: 2.5px solid var(--ink);
    border-radius: 3px 10px 10px 3px;
    background: var(--yellow);
    box-shadow: 3px 4px 0 var(--ink);
}

.desk-pencil::before {
    position: absolute;
    top: -2.5px;
    left: -31px;
    width: 31px;
    height: 25px;
    clip-path: polygon(100% 0, 100% 100%, 0 50%);
    background: var(--paper);
    border: inherit;
    content: "";
}

.desk-pencil::after {
    position: absolute;
    top: -2.5px;
    right: -16px;
    width: 22px;
    height: 25px;
    border: 2.5px solid var(--ink);
    border-radius: 0 9px 9px 0;
    background: var(--pink);
    content: "";
}

.desk-pencil span {
    position: absolute;
    top: 5px;
    right: 20px;
    left: 15px;
    height: 3px;
    border-radius: 99px;
    background: rgba(36,34,56,0.25);
}

.desk-paperclip {
    position: absolute;
    z-index: 8;
    top: 27px;
    left: 29%;
    width: 30px;
    height: 72px;
    transform: rotate(37deg);
    border: 5px solid var(--purple);
    border-radius: 999px;
    box-shadow: inset 0 0 0 2px var(--ink), 2px 2px 0 var(--ink);
}

.desk-sparkle {
    position: absolute;
    z-index: 8;
    top: 47%;
    right: 30%;
    color: var(--yellow);
    font-size: 42px;
    -webkit-text-stroke: 2px var(--ink);
    animation: sparkle 2.2s ease-in-out infinite;
}

.desk-notebook {
    --notebook-intro-rotation: -1.1deg;
}

.has-js .page-entering .workspace-label {
    animation: intro-label-drop 0.5s 0.05s cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
}

.has-js .page-entering .creative-desk {
    animation: intro-desk-arrive 0.55s 0.1s cubic-bezier(0.16, 0.85, 0.28, 1.08) both;
}

.has-js .page-entering .desk-notebook {
    animation: intro-notebook-drop 0.72s 0.3s cubic-bezier(0.18, 0.95, 0.3, 1.24) both;
}

.has-js .page-entering .notebook-profile-page {
    animation: intro-page-left 0.62s 0.58s cubic-bezier(0.2, 0.82, 0.24, 1.04) both;
    backface-visibility: hidden;
    transform-origin: right center;
}

.has-js .page-entering .notebook-story-page {
    animation: intro-page-right 0.62s 0.58s cubic-bezier(0.2, 0.82, 0.24, 1.04) both;
    backface-visibility: hidden;
    transform-origin: left center;
}

.has-js .page-entering .notebook-binding i {
    animation: intro-ring-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.35) both;
}

.has-js .page-entering .notebook-binding i:nth-child(1) { animation-delay: 0.72s; }

.has-js .page-entering .notebook-binding i:nth-child(2) { animation-delay: 0.76s; }

.has-js .page-entering .notebook-binding i:nth-child(3) { animation-delay: 0.80s; }

.has-js .page-entering .notebook-binding i:nth-child(4) { animation-delay: 0.84s; }

.has-js .page-entering .notebook-binding i:nth-child(5) { animation-delay: 0.88s; }

.has-js .page-entering .notebook-binding i:nth-child(6) { animation-delay: 0.92s; }

.has-js .page-entering .notebook-binding i:nth-child(7) { animation-delay: 0.96s; }

.has-js .page-entering .notebook-binding i:nth-child(8) { animation-delay: 1s; }

.has-js .page-entering .notebook-binding i:nth-child(9) { animation-delay: 1.04s; }

.has-js .page-entering .desk-polaroid {
    animation: intro-polaroid-stick 0.55s 0.9s cubic-bezier(0.16, 0.95, 0.25, 1.22) both;
}

.has-js .page-entering .notebook-identity span,
.has-js .page-entering .notebook-role,
.has-js .page-entering .notebook-short-bio,
.has-js .page-entering .notebook-long-bio,
.has-js .page-entering .notebook-actions,
.has-js .page-entering .notebook-signature,
.has-js .page-entering .notebook-arrow,
.has-js .page-entering .notebook-photo-note {
    animation: intro-note-reveal 0.42s cubic-bezier(0.18, 0.9, 0.28, 1.1) both;
}

.has-js .page-entering .notebook-identity span:nth-child(1) { animation-delay: 1.08s; }

.has-js .page-entering .notebook-identity span:nth-child(2) { animation-delay: 1.16s; }

.has-js .page-entering .notebook-role { animation-delay: 0.94s; }

.has-js .page-entering .notebook-short-bio { animation-delay: 1.02s; }

.has-js .page-entering .notebook-long-bio { animation-delay: 1.10s; }

.has-js .page-entering .notebook-actions { animation-delay: 1.18s; }

.has-js .page-entering .notebook-signature { animation-delay: 1.28s; }

.has-js .page-entering .notebook-arrow,
.has-js .page-entering .notebook-photo-note { animation-delay: 1.3s; }

.has-js .page-entering .desk-laptop {
    animation: intro-laptop-slide 0.62s 0.92s cubic-bezier(0.17, 0.9, 0.27, 1.18) both;
}

.has-js .page-entering .desk-project-folder {
    animation: intro-folder-slide 0.48s 1.55s cubic-bezier(0.18, 0.9, 0.25, 1.25) both;
}

.has-js .page-entering .desk-mug {
    animation: intro-mug-arrive 0.46s 1.62s cubic-bezier(0.18, 0.9, 0.25, 1.25) both;
}

.has-js .page-entering .desk-pencil {
    animation: intro-pencil-slide 0.48s 1.68s cubic-bezier(0.18, 0.9, 0.25, 1.2) both;
}

.has-js .page-entering .desk-paperclip {
    animation: intro-paperclip-drop 0.42s 1.74s cubic-bezier(0.18, 0.9, 0.25, 1.28) both;
}

.has-js .page-entering .desk-sparkle {
    animation: intro-object-pop 0.38s 1.82s cubic-bezier(0.18, 0.9, 0.25, 1.35) both;
}

@keyframes intro-label-drop {
    from { opacity: 0; transform: translateY(-24px) rotate(-1deg); }
    to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes intro-desk-arrive {
    from { opacity: 0; transform: scale(0.93) rotate(-1.2deg); filter: saturate(0.6); }
    to { opacity: 1; transform: scale(1) rotate(0); filter: saturate(1); }
}

@keyframes intro-notebook-drop {
    0% { opacity: 0; transform: translateY(-110px) rotate(-8deg) scale(0.88); }
    68% { opacity: 1; transform: translateY(9px) rotate(1.2deg) scale(1.02); }
    100% { opacity: 1; transform: translateY(0) rotate(var(--notebook-intro-rotation)) scale(1); }
}

@keyframes intro-page-left {
    from { opacity: 0; transform: perspective(900px) rotateY(72deg); }
    to { opacity: 1; transform: perspective(900px) rotateY(0deg); }
}

@keyframes intro-page-right {
    from { opacity: 0; transform: perspective(900px) rotateY(-72deg); }
    to { opacity: 1; transform: perspective(900px) rotateY(0deg); }
}

@keyframes intro-ring-pop {
    from { opacity: 0; transform: scaleX(0.2); }
    to { opacity: 1; transform: scaleX(1); }
}

@keyframes intro-polaroid-stick {
    0% { opacity: 0; transform: translate(-65px, -85px) rotate(-16deg) scale(1.14); }
    70% { opacity: 1; transform: translate(5px, 5px) rotate(1deg) scale(0.98); }
    100% { opacity: 1; transform: translate(0, 0) rotate(-3deg) scale(1); }
}

@keyframes intro-tape-stick {
    from { opacity: 0; transform: translateX(-50%) rotate(18deg) scaleX(0.25); }
    to { opacity: 1; transform: translateX(-50%) rotate(4deg) scaleX(1); }
}

@keyframes intro-note-reveal {
    from { opacity: 0; translate: 0 15px; }
    to { opacity: 1; translate: 0 0; }
}

@keyframes intro-laptop-slide {
    0% { opacity: 0; transform: translate(100px, -55px) rotate(12deg) scale(0.86); }
    72% { opacity: 1; transform: translate(-5px, 4px) rotate(-1deg) scale(1.02); }
    100% { opacity: 1; transform: translate(0, 0) rotate(2deg) scale(1); }
}

@keyframes intro-laptop-boot {
    0%, 58% { opacity: 1; clip-path: inset(0); }
    82% { opacity: 1; clip-path: inset(48% 0 48%); }
    100% { opacity: 0; clip-path: inset(50% 0 50%); }
}

@keyframes intro-skill-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.55) rotate(-8deg); }
    to { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes intro-sticky-yellow {
    from { opacity: 0; transform: translateY(-40px) rotate(-12deg) scale(0.65); }
    to { opacity: 1; transform: translateY(0) rotate(-3deg) scale(1); }
}

@keyframes intro-sticky-pink {
    from { opacity: 0; transform: translateY(-55px) rotate(10deg) scale(0.65); }
    to { opacity: 1; transform: translateY(9px) rotate(2deg) scale(1); }
}

@keyframes intro-folder-slide {
    from { opacity: 0; transform: translate(-100px, 50px) rotate(-15deg); }
    to { opacity: 1; transform: translate(0, 0) rotate(7deg); }
}

@keyframes intro-mug-arrive {
    from { opacity: 0; transform: translateX(90px) rotate(25deg) scale(0.6); }
    to { opacity: 1; transform: translateX(0) rotate(8deg) scale(1); }
}

@keyframes intro-pencil-slide {
    from { opacity: 0; transform: translateY(70px) rotate(-28deg); }
    to { opacity: 1; transform: translateY(0) rotate(-9deg); }
}

@keyframes intro-paperclip-drop {
    from { opacity: 0; transform: translateY(-80px) rotate(8deg) scale(1.25); }
    to { opacity: 1; transform: translateY(0) rotate(37deg) scale(1); }
}

@keyframes intro-object-pop {
    from { opacity: 0; transform: scale(0) rotate(-30deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes intro-page-mobile {
    from { opacity: 0; transform: translateY(32px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}