/* Site styles: header, nav menu, home page sections, placeholder pages and scroll animations.
   The footer rules are near the bottom of this file. */

* {
    box-sizing: border-box;
}

:root {
    --cream: #f7f0e1;
    --cream-dim: #d8d0c0;
    --ink: #0d0d0d;
    --mustard: #f4b941;
    --pink: #f06aa6;
    --mint: #5fd9a0;
    --blue: #4aa3f5;
    --purple: #9b5de0;
    --tomato: #e4492f;
    --orange: #f58a1f;
    --noodle-scale: 0.59;
}

html {
    scroll-behavior: smooth;
}

body.v2 {
    margin: 0;
    padding: 0;
    background-color: #000000;
    color: var(--cream);
    font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    overflow-x: hidden;
}

/* header */

.v2-header {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px clamp(18px, 4vw, 44px);
    background-color: #000000;
    border-bottom: 1px solid #ffffff22;
}

.v2-wordmark {
    margin: 0;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-size: clamp(1.5rem, 3vw, 2.1rem);
    line-height: 1;
    color: var(--cream);
}

.v2-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px 8px 14px;
    border: solid 2px var(--cream);
    border-radius: 999px;
    background-color: transparent;
    color: var(--cream);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.v2-spoons {
    width: 30px;
    height: 25px;
    fill: var(--orange);
}

.v2-menu-btn:focus-visible,
.v2-btn:focus-visible,
.v2-nav-card:focus-visible,
.v2-soup-link:focus-visible,
.v2-compare a:focus-visible {
    outline: 3px solid #ffea00;
    outline-offset: 3px;
}

/* shared pieces */

.v2-main {
    max-width: 1120px;
    margin: 0 auto;
    padding-inline: clamp(16px, 4vw, 40px);
}

.v2-section {
    position: relative;
    margin-block: clamp(70px, 10vw, 130px);
}

/* small handwritten label above a heading */
.v2-label {
    display: inline-block;
    /* the padding keeps the slanted handwriting inside the box so phones do not clip the last letter; the negative margin cancels it out */
    margin: -2px -12px 2px;
    padding: 2px 12px 4px;
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1.1;
    transform: rotate(-3deg);
    transform-origin: left center;
}

.v2-label-pink { color: var(--pink); }
.v2-label-mustard { color: var(--mustard); }
.v2-label-mint { color: var(--mint); }
.v2-label-ink { color: var(--ink); }

.v2-title {
    margin: 0 0 18px;
    font-family: "Fraunces", "Caprasimo", serif;
    font-weight: 900;
    font-size: clamp(2rem, 3.8vw, 3.2rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--cream);
}

.v2-title-ink { color: var(--ink); }

.v2-body {
    margin: 0;
    max-width: 46ch;
    color: var(--cream-dim);
}

.v2-body-ink { color: #1c1c1c; }

/* a word sitting on a filled colour block */
.v2-chip {
    display: inline-block;
    padding: 0 0.2em 0.04em;
    border-radius: 0.2em;
    color: var(--ink);
    transform: rotate(-2deg);
}

.v2-chip-pink { background-color: var(--pink); }
.v2-chip-mustard { background-color: var(--mustard); }
.v2-chip-mint { background-color: var(--mint); transform: rotate(1.5deg); }

.v2-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 26px;
    border: solid 2px transparent;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: translate 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.v2-btn-fill {
    background-color: var(--mustard);
    color: var(--ink);
}

.v2-btn-line {
    border-color: var(--cream);
    color: var(--cream);
}

.v2-btn-ink {
    margin-top: 26px;
    background-color: var(--ink);
    color: var(--cream);
}

/* tape strip on a corner */
.v2-tape {
    position: absolute;
    width: 96px;
    height: 28px;
    opacity: 0.9;
    z-index: 2;
}

.v2-tape-pink { background-color: var(--pink); top: -12px; left: -30px; transform: rotate(-38deg); }
.v2-tape-mint { background-color: var(--mint); top: -12px; right: -30px; transform: rotate(36deg); }
.v2-tape-mustard { background-color: var(--mustard); top: -14px; left: 50%; margin-left: -48px; transform: rotate(-3deg); box-shadow: 0 2px 0 #0000001f; }

/* four-point sparkle */
.v2-spark {
    position: absolute;
    width: var(--s, 30px);
    height: var(--s, 30px);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: v2Twinkle 3.2s ease-in-out infinite alternate;
}

.v2-spark-pink { background-color: var(--pink); }
.v2-spark-cream { background-color: var(--cream); animation-delay: 1.1s; }
.v2-spark-mint { background-color: var(--mint); animation-delay: 0.6s; }

@keyframes v2Twinkle {
    0% { scale: 0.75; rotate: -8deg; }
    100% { scale: 1.1; rotate: 8deg; }
}

.v2-sticker {
    position: absolute;
    z-index: 3;
    border: solid 3px var(--ink);
    color: var(--ink);
    font-family: "Caveat", cursive;
    font-weight: 700;
    text-align: center;
}

.v2-sticker-round {
    right: 0;
    bottom: 6%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background-color: var(--mint);
    font-size: 1.7rem;
    line-height: 0.9;
    transform: rotate(12deg);
    box-shadow: 5px 5px 0 var(--ink), 5px 5px 0 2px var(--cream);
}

.v2-sticker-pill {
    top: -8px;
    right: 6%;
    padding: 4px 20px 6px;
    border-radius: 999px;
    background-color: var(--pink);
    font-size: 1.6rem;
    line-height: 1.1;
    transform: rotate(6deg);
    box-shadow: 4px 4px 0 var(--ink);
}

/* hero */

.v2-hero {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    align-items: center;
    gap: clamp(24px, 5vw, 64px);
    padding-block: clamp(40px, 7vw, 90px) clamp(30px, 5vw, 60px);
}

.v2-hero-title {
    margin: 0 0 34px;
    font-family: "Fraunces", "Caprasimo", serif;
    font-weight: 900;
    font-size: clamp(2.7rem, 6.4vw, 5.3rem);
    line-height: 0.98;
    letter-spacing: -0.02em;
    color: var(--cream);
}

.v2-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.v2-hero-art {
    position: relative;
    width: 100%;
    max-width: 540px;
    aspect-ratio: 1 / 0.9;
    margin-inline: auto;
}

/* mustard blob behind the bowl */
.v2-hero-art::before {
    content: "";
    position: absolute;
    inset: 6% 3% 4% 3%;
    border-radius: 47% 53% 50% 50% / 54% 48% 52% 46%;
    background-color: var(--mustard);
}

.v2-steam {
    position: absolute;
    top: 9%;
    left: 22%;
    width: 56%;
    fill: none;
    stroke: var(--ink);
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.75;
}

.v2-steam path {
    animation: v2Steam 3.6s ease-in-out infinite;
}

.v2-steam path:nth-child(2) { animation-delay: 0.9s; }
.v2-steam path:nth-child(3) { animation-delay: 1.8s; }

@keyframes v2Steam {
    0% { opacity: 0; translate: 0 8px; }
    35% { opacity: 1; }
    100% { opacity: 0; translate: 0 -10px; }
}

.v2-bowl {
    position: absolute;
    left: 9%;
    top: 30%;
    width: 82%;
    aspect-ratio: 200 / 125;
    border-radius: 50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 5px var(--ink);
    background-image: linear-gradient(165deg, #b06bea 0%, #8a48cf 45%, #6a31a8 100%);
    box-shadow: 0 26px 0 -14px #0000002e;
}

.v2-broth {
    position: absolute;
    top: 4%;
    left: -1px;
    width: calc(100% + 2px);
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: solid 5px var(--ink);
    background-image: radial-gradient(ellipse at 42% 38%, #f2664c, #cf3a22 72%);
    box-shadow: inset 0 9px 0 #00000024;
    animation: v2BrothBob 5s ease-in-out infinite alternate;
}

.v2-noodles {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transform: rotate(-2deg) scale(var(--noodle-scale));
    animation: v2NoodleBob 3s ease-in-out infinite alternate;
}

.v2-noodle-line {
    display: flex;
    align-items: center;
    gap: 6px;
}

.v2-noodle-line img {
    display: block;
}

.v2-noodle-space {
    width: 22px;
}

@keyframes v2BrothBob {
    0% { translate: 0 0; }
    100% { translate: 0 -6px; }
}

@keyframes v2NoodleBob {
    0% { translate: 0 0; }
    100% { translate: 0 -5px; }
}

/* ticker */

.v2-ticker {
    margin-inline: calc(50% - 50vw);
    padding-block: 12px;
    overflow: hidden;
    background-color: var(--cream);
    color: var(--ink);
}

/* one statement shows at a time; site.js moves the is-current / is-leaving classes along */
.v2-ticker-list {
    position: relative;
    height: 2.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: hidden;
}

.v2-ticker-item {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding-inline: 16px;
    font-weight: 900;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease, visibility 0.6s;
}

.v2-ticker-item.is-current {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.v2-ticker-item.is-leaving {
    transform: translateY(-100%);
}

.v2-ticker-item i {
    flex: none;
    width: 18px;
    height: 18px;
    background-color: var(--pink);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.v2-ticker-item:nth-child(3n + 2) i { background-color: var(--purple); }
.v2-ticker-item:nth-child(3n) i { background-color: var(--tomato); }

/* the linked word sits on a colour block, like the highlighted words elsewhere on the page */
.v2-ticker-link {
    display: inline-block;
    padding: 0.06em 0.35em;
    border-radius: 0.3em;
    color: var(--ink);
    text-decoration: none;
    transform: rotate(-2deg);
    transition: translate 0.2s ease, box-shadow 0.2s ease;
}

.v2-ticker-link-blue { background-color: var(--blue); }
.v2-ticker-link-pink { background-color: var(--pink); }

.v2-ticker-link:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
}

@media (hover: hover) {
    .v2-ticker-link:hover {
        translate: -2px -2px;
        box-shadow: 3px 3px 0 var(--ink);
    }
}

/* phones: smaller text, allowed to wrap onto two lines */
@media (max-width: 560px) {
    .v2-ticker-list {
        height: 3.4rem;
    }

    .v2-ticker-item {
        gap: 10px;
        font-size: 0.82rem;
        letter-spacing: 0.05em;
        line-height: 1.5;
        white-space: normal;
    }

    .v2-ticker-item i {
        width: 12px;
        height: 12px;
    }
}

/* drawn outline that traces itself when the section scrolls in */
.v2-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

.v2-frame rect {
    fill: none;
    stroke: var(--cream);
    stroke-width: 2;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.7s ease-in-out;
}

.v2-frame-mustard rect {
    stroke: var(--mustard);
    stroke-width: 3;
}

/* about */

.v2-about {
    display: grid;
    grid-template-columns: 0.75fr 1.25fr;
    align-items: center;
    gap: clamp(30px, 6vw, 76px);
    padding: clamp(34px, 6vw, 70px);
}

.v2-polaroid {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 300px;
    padding: 14px 14px 50px;
    background-color: var(--cream);
    box-shadow: 0 22px 44px #000000b3;
}

/* the "photo" in the polaroid is a drawn bowl with JOMATO in noodle letters */
.v2-polaroid-photo {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background-color: #ffffff;
}

.v2-photo-bowl {
    position: absolute;
    left: 7%;
    top: 24%;
    width: 86%;
    aspect-ratio: 200 / 125;
    border-radius: 50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 4px var(--ink);
    background-image: linear-gradient(165deg, #7de6b4 0%, #5fd9a0 50%, #43bf85 100%);
    box-shadow: 0 18px 0 -10px #00000033;
}

.v2-photo-broth {
    position: absolute;
    top: 4%;
    left: -1px;
    width: calc(100% + 2px);
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: solid 4px var(--ink);
    background-image: radial-gradient(ellipse at 42% 38%, #a96be6, #7f43c9 72%);
    box-shadow: inset 0 6px 0 #00000024;
    animation: v2MiniBob 5s ease-in-out infinite alternate;
}

.v2-photo-noodles {
    flex: none;
    display: flex;
    align-items: center;
    gap: 5px;
    transform: rotate(-3deg) scale(0.42);
}

.v2-photo-noodles img {
    display: block;
}

/* apps and soups card */

.v2-cta {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(24px, 5vw, 60px);
    padding: clamp(36px, 6vw, 64px) clamp(26px, 6vw, 70px);
    border-radius: 36px;
    background-color: var(--mint);
    color: var(--ink);
}

.v2-soup-link {
    position: relative;
    display: block;
    width: 240px;
    height: 150px;
    margin-inline: auto;
    border-radius: 50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 4px var(--ink);
    background-color: #e07c2a;
    box-shadow: 8px 8px 0 var(--ink);
    text-decoration: none;
}

.v2-soup-link-broth {
    position: absolute;
    top: 4%;
    left: -1px;
    width: calc(100% + 2px);
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: solid 4px var(--ink);
    background-color: #d4478d;
    animation: v2BrothBob 5s ease-in-out infinite alternate;
}

.v2-soup-link-noodles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transform: rotate(-2deg);
}

.v2-soup-link-line {
    display: flex;
    align-items: center;
    gap: 3px;
}

.v2-soup-link-line img {
    display: block;
}

/* the bowl and broth trade colours, as on the current page */
.v2-soup-link:hover,
.v2-soup-link:focus-visible {
    background-color: #d4478d;
}

.v2-soup-link:hover .v2-soup-link-broth,
.v2-soup-link:focus-visible .v2-soup-link-broth {
    background-color: #e07c2a;
}

/* game */

.v2-play-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 44px;
    text-align: center;
}

.v2-play-head .v2-label {
    transform-origin: center;
}

.v2-stage {
    position: relative;
    padding: 16px;
}

.v2-stage-panel {
    padding: clamp(14px, 3vw, 36px) clamp(10px, 3vw, 36px);
    border-radius: 30px;
    background-image: linear-gradient(160deg, #8b4fd6 0%, #6a35b0 100%);
}

.v2-stage-fit {
    width: 100%;
    max-width: 950px;
    height: 750px;
    margin: 0 auto;
}

#game-placeholder {
    width: 950px;
    height: 750px;
    transform-origin: top left;
}

/* link back to the current page */

.v2-compare {
    margin: 0 0 30px;
    text-align: center;
    font-size: 0.95rem;
}

.v2-compare a {
    color: var(--cream-dim);
    text-underline-offset: 5px;
}

/* nav menu */

.v2-scrim {
    position: fixed;
    inset: 0;
    z-index: 60;
    background-color: #000000b8;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s;
}

.v2-scrim.is-open {
    opacity: 1;
    visibility: visible;
}

.v2-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 70;
    width: min(440px, 100vw);
    height: 100vh;
    height: 100dvh;
    padding: 16px 26px 30px;
    overflow-y: auto;
    background-color: #000000;
    border-left: solid 2px var(--cream);
    transform: translateX(104%);
    visibility: hidden;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.38s;
}

.v2-nav.is-open {
    transform: translateX(0);
    visibility: visible;
    /* visible straight away when opening (it still slides in), so focus can move into it at once */
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
}

.v2-nav-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 26px;
}

.v2-nav-title {
    margin: 0;
    font-family: "Fraunces", "Caprasimo", serif;
    font-weight: 900;
    font-size: 2.6rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--cream);
}

.v2-nav-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.v2-nav-card {
    display: grid;
    grid-template-columns: 150px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 16px 20px 16px 16px;
    border-radius: 22px;
    color: var(--ink);
    text-decoration: none;
    opacity: 0;
    translate: 40px 0;
    transition: opacity 0.35s ease, translate 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.15), box-shadow 0.2s ease;
}

/* cards slide in one after another when the menu opens */
.v2-nav.is-open .v2-nav-card {
    opacity: 1;
    translate: 0 0;
}

.v2-nav.is-open li:nth-child(1) .v2-nav-card { transition-delay: 0.12s, 0.12s, 0s; }
.v2-nav.is-open li:nth-child(2) .v2-nav-card { transition-delay: 0.19s, 0.19s, 0s; }
.v2-nav.is-open li:nth-child(3) .v2-nav-card { transition-delay: 0.26s, 0.26s, 0s; }
.v2-nav.is-open li:nth-child(4) .v2-nav-card { transition-delay: 0.33s, 0.33s, 0s; }

.v2-nav-mustard { background-color: var(--mustard); }
.v2-nav-pink { background-color: var(--pink); }
.v2-nav-mint { background-color: var(--mint); }
.v2-nav-blue { background-color: var(--blue); }

.v2-nav-name {
    font-family: "Fraunces", "Caprasimo", serif;
    font-weight: 900;
    font-size: 1.5rem;
    line-height: 1.05;
}

.v2-nav-arrow {
    font-size: 1.5rem;
    font-weight: 700;
    transition: translate 0.2s ease;
}

.v2-mini-bowl {
    position: relative;
    display: block;
    width: 150px;
    height: 94px;
    border-radius: 50% 50% 40% 40% / 30% 30% 70% 70%;
    border: solid 3px var(--ink);
}

.v2-mini-broth {
    position: absolute;
    top: 4%;
    left: -1px;
    width: calc(100% + 2px);
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border: solid 3px var(--ink);
    animation: v2MiniBob 5s ease-in-out infinite alternate;
}

.v2-mini-home { background-color: #3e8e4f; }
.v2-mini-home .v2-mini-broth { background-color: #8a48cf; }
.v2-mini-about { background-color: #2277c4; }
.v2-mini-about .v2-mini-broth { background-color: #c8402f; }
.v2-mini-apps { background-color: #e07c2a; }
.v2-mini-apps .v2-mini-broth { background-color: #d4478d; }
.v2-mini-contact { background-color: #8a48cf; }
.v2-mini-contact .v2-mini-broth { background-color: #3e8e4f; }

.v2-mini-noodles {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform: rotate(-2deg) scale(0.78);
}

.v2-mini-line {
    display: flex;
    align-items: center;
    gap: 2px;
}

.v2-mini-line img {
    display: block;
}

.v2-mini-space {
    width: 7px;
}

/* scroll animations. Hidden starting states only apply when the script is running (html.js),
   so everything still shows if the script fails. */

[data-reveal="fade"] {
    transition: opacity 0.6s ease var(--d, 0s), transform 0.6s ease var(--d, 0s);
}

.js [data-reveal="fade"]:not(.in-view) {
    opacity: 0;
    transform: translateY(14px);
}

.js .v2-label[data-reveal="fade"]:not(.in-view) {
    transform: translateY(14px) rotate(-3deg);
}

[data-reveal="pop"] {
    transform: rotate(var(--r, 0deg));
    transition: opacity 0.5s ease var(--d, 0s), transform 0.75s cubic-bezier(0.2, 0.9, 0.3, 1.2) var(--d, 0s);
}

.js [data-reveal="pop"]:not(.in-view) {
    opacity: 0;
    transform: translateY(48px) rotate(calc(var(--r, 0deg) - 5deg)) scale(0.94);
}

.js [data-reveal="frame"]:not(.in-view) .v2-frame rect {
    stroke-dashoffset: 1;
}

/* typed-on headings: each letter appears a moment after the one before it */
.v2-w {
    display: inline-block;
    white-space: nowrap;
}

.v2-c {
    transition: opacity 0.05s linear;
    transition-delay: calc(var(--d, 0s) + var(--i) * var(--step, 26ms));
}

.js [data-reveal="type"]:not(.in-view) .v2-c {
    opacity: 0;
}

/* hover effects, desktop only */

@media (hover: hover) {
    .v2-menu-btn:hover {
        background-color: var(--cream);
        color: var(--ink);
    }

    .v2-btn:hover {
        translate: -3px -3px;
    }

    .v2-btn-fill:hover { box-shadow: 5px 5px 0 var(--pink); }
    .v2-btn-line:hover { background-color: var(--cream); color: var(--ink); box-shadow: 5px 5px 0 var(--mint); }
    .v2-btn-ink:hover { box-shadow: 5px 5px 0 var(--pink); }

    .v2-nav-card:hover {
        translate: -4px -4px;
        box-shadow: 6px 6px 0 var(--cream);
    }

    .v2-nav-card:hover .v2-nav-arrow {
        translate: 6px 0;
    }

    .v2-polaroid {
        transition-property: opacity, transform, rotate;
    }

    .v2-polaroid:hover {
        rotate: 3deg;
    }
}

/* narrow screens */

@media (max-width: 860px) {
    .v2-hero,
    .v2-about,
    .v2-cta {
        grid-template-columns: 1fr;
    }

    .v2-hero-text,
    .v2-cta-text {
        text-align: center;
    }

    .v2-hero-actions {
        justify-content: center;
    }

    .v2-about-text {
        text-align: center;
    }

    .v2-body {
        margin-inline: auto;
    }

    .v2-label {
        transform-origin: center;
    }
}

/* people who ask for less motion get the finished page with nothing moving */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .v2 *,
    .v2 *::before,
    .v2 *::after {
        animation: none !important;
        transition: none !important;
    }

    .js [data-reveal]:not(.in-view),
    .js [data-reveal="type"]:not(.in-view) .v2-c {
        opacity: 1;
    }

    .js [data-reveal="fade"]:not(.in-view) {
        transform: none;
    }

    .js .v2-label[data-reveal="fade"]:not(.in-view) {
        transform: rotate(-3deg);
    }

    .js [data-reveal="pop"]:not(.in-view) {
        transform: rotate(var(--r, 0deg));
    }

    .js [data-reveal="frame"]:not(.in-view) .v2-frame rect {
        stroke-dashoffset: 0;
    }
}

/* footer heading basics: font, weight and centring */
.footer-heading {
    font-family: "Caprasimo", serif;
    font-weight: 400;
    text-align: center;
}

@keyframes v2MiniBob {
    0% { translate: 0 0; }
    100% { translate: 0 -3px; }
}

/* ---- the footer divider and footer ---- */

/* hatched chalk squiggle dividers between the text blocks, coloured by the .dots-* classes */
.flourish-line {
    width: min(600px, 88%);
    height: 96px;
    margin: 0 auto;
    border: none;
    background-color: currentColor;
    transform: rotate(-1.5deg);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64'%3E%3Cdefs%3E%3Cpattern id='h' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='1' height='3' fill='white'/%3E%3C/pattern%3E%3Cpath id='p' d='M27,43 A9,9 0 1 1 36,32 q11,-16 22,0 t22,0 t22,0 t22,0 c18,0 28,-24 12,-24 c-14,0 -8,24 16,24' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='s'%3E%3Cuse href='%23p' stroke='white' stroke-width='7'/%3E%3Cuse href='%23p' stroke='black' stroke-width='5'/%3E%3Cuse href='%23p' stroke='url(%23h)' stroke-width='5'/%3E%3Cg fill='url(%23h)' stroke='white' stroke-width='1'%3E%3Ccircle cx='162' cy='32' r='3.5'/%3E%3Ccircle cx='173' cy='32' r='5'/%3E%3C/g%3E%3C/g%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='400' height='64'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' transform='rotate(180 200 32)'/%3E%3Cpath d='M200,12 Q204,28 218,32 Q204,36 200,52 Q196,36 182,32 Q196,28 200,12 Z' fill='url(%23h)' stroke='white' stroke-width='1'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='400' height='64' fill='black' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 64'%3E%3Cdefs%3E%3Cpattern id='h' width='3' height='3' patternUnits='userSpaceOnUse' patternTransform='rotate(45)'%3E%3Crect width='1' height='3' fill='white'/%3E%3C/pattern%3E%3Cpath id='p' d='M27,43 A9,9 0 1 1 36,32 q11,-16 22,0 t22,0 t22,0 t22,0 c18,0 28,-24 12,-24 c-14,0 -8,24 16,24' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='s'%3E%3Cuse href='%23p' stroke='white' stroke-width='7'/%3E%3Cuse href='%23p' stroke='black' stroke-width='5'/%3E%3Cuse href='%23p' stroke='url(%23h)' stroke-width='5'/%3E%3Cg fill='url(%23h)' stroke='white' stroke-width='1'%3E%3Ccircle cx='162' cy='32' r='3.5'/%3E%3Ccircle cx='173' cy='32' r='5'/%3E%3C/g%3E%3C/g%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='400' height='64'%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' transform='rotate(180 200 32)'/%3E%3Cpath d='M200,12 Q204,28 218,32 Q204,36 200,52 Q196,36 182,32 Q196,28 200,12 Z' fill='url(%23h)' stroke='white' stroke-width='1'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='400' height='64' fill='black' mask='url(%23m)'/%3E%3C/svg%3E") center / contain no-repeat;
}

.flourish-line:nth-of-type(even) {
    transform: rotate(1.5deg);
}

/* site footer, fetched from footer.html into #footer-placeholder */
#footer-placeholder {
    max-width: 1100px;
    margin: 0 auto;
    padding: 10px 20px 50px;
    font-family: "Caprasimo", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
}

.footer-flourish {
    color: #ce6e28;
}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-block: 30px 40px;
}

.footer-heading {
    font-size: 1.6rem;
    color: #ce6e28;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 1.2rem;
}

.footer-links a {
    text-decoration: none;
}

.footer-links li:nth-child(4n + 1) a {
    color: #f4b941;
}

.footer-links li:nth-child(4n + 2) a {
    color: #eb65a6;
}

.footer-links li:nth-child(4n + 3) a {
    color: #5dd377;
}

.footer-links li:nth-child(4n + 4) a {
    color: #479ff1;
}

.footer-links a:hover {
    text-decoration: underline wavy;
    text-underline-offset: 6px;
}

.footer-links a:focus-visible {
    outline: 3px solid #ffea00;
    outline-offset: 3px;
}

.footer-note {
    color: #9249b6;
}

.footer-copyright {
    font-size: 1.1rem;
    color: #f4b941;
}

/* the page sets a taller line height for its own text; the footer keeps the default it has on the other pages */
#footer-placeholder {
    line-height: normal;
}

/* placeholder pages: one outlined block with a label and a heading */
.v2-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: clamp(60px, 12vw, 130px) 24px;
    text-align: center;
}

.v2-soon .v2-label {
    transform-origin: center;
}

.v2-soon .v2-title {
    margin-bottom: 0;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
}

/* the game description is longer than the other body lines, so it gets a wider measure */
.v2-play-head .v2-body {
    max-width: 62ch;
}

/* keeps a highlighted word and the punctuation after it on the same line */
.v2-nowrap {
    white-space: nowrap;
}

/* on phones the footer columns stack so the third one does not run off the edge */
@media (max-width: 560px) {
    .footer-columns {
        grid-template-columns: 1fr;
    }
}

/* full-screen game on phones: the purple panel covers the whole screen and the game is
   re-laid-out to show just the TV's picture, large, with the controls underneath */

.v2-game-exit,
.v2-game-enter {
    display: none;
    font-family: inherit;
}

@media (max-width: 860px) {
    .v2-game-enter {
        display: flex;
        width: max-content;
        margin: 14px auto 0;
        cursor: pointer;
    }
}

.v2-stage-panel.v2-game-full {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 64px 8px 8px;
    border-radius: 0;
    transform: none;
    overflow: hidden;
}

.v2-game-full .v2-game-exit {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    background-color: #0d0d0d;
}

.v2-game-full .v2-game-enter {
    display: none;
}

.v2-game-full #game-placeholder,
.v2-game-full #soup-game-wrapper-red {
    width: 504px;
    height: 580px;
}

.v2-game-full #soup-game-wrapper-red {
    display: block;
    margin: 0;
}

/* shift the TV so its picture sits at the top left, and hide the TV casing */
.v2-game-full #soup-game-tv {
    position: absolute;
    left: -80px;
    top: -62.4px;
}

.v2-game-full #soup-game-tv > img {
    visibility: hidden;
}

.v2-game-full #soup-game-screen {
    border-radius: 18px;
}

.v2-game-full #guess-input-area {
    top: 432px;
    bottom: auto;
    left: 0;
    width: 504px;
    height: 54px;
    transform: none;
}

.v2-game-full #guess-input {
    flex: 1;
}

.v2-game-full #previous-guesses {
    top: 564.4px;
    left: 80px;
    width: 250px;
}

.v2-game-full #sound-controls {
    top: 505px;
    left: auto;
    right: 0;
}

/* sound button on phones: the game is shrunk to fit, which makes the icon too small to tap,
   so an invisible tap area around it is sized to stay at least 24px on screen (--game-scale comes from site.js).
   The icon itself looks the same. The area grows to the left, away from the volume slider (shown on Android),
   stopping halfway into the 8px gap so the slider keeps its own taps. */
@media (max-width: 860px) {
    #sound-toggle {
        position: relative;
    }

    #sound-toggle::before {
        content: "";
        position: absolute;
        right: -4px;
        top: 50%;
        width: max(calc(100% + 4px), calc(26px / var(--game-scale, 1)));
        height: max(100%, calc(26px / var(--game-scale, 1)));
        transform: translateY(-50%);
    }
}

/* game card on the Apps and Soups page: the whole card opens the game */
.v2-game-card {
    padding: clamp(36px, 6vw, 64px) clamp(26px, 6vw, 70px);
    border-radius: 36px;
    background-color: var(--pink);
    color: var(--ink);
}

.v2-game-card .v2-body {
    max-width: 52ch;
}

/* stretches the button's clickable area over the whole card */
.v2-game-card-link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 36px;
}

@media (max-width: 860px) {
    .v2-game-card {
        text-align: center;
    }
}

/* footer divider in the current style: three sparkles between two thin cream lines.
   Drawn as a plain coloured picture (no masks) so every browser, including iPhone Safari, shows it the same.
   It replaces the old hatched squiggle, which showed as a solid bar on iPhones. */
.flourish-line.footer-flourish {
    width: min(600px, 88%);
    height: 28px;
    margin: 0 auto;
    transform: none;
    -webkit-mask: none;
    mask: none;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='28' viewBox='0 0 112 28'%3E%3Cpath d='M20,4 L22.2,11.8 L30,14 L22.2,16.2 L20,24 L17.8,16.2 L10,14 L17.8,11.8 Z' fill='%23f06aa6'/%3E%3Cpath d='M56,1 L58.86,11.14 L69,14 L58.86,16.86 L56,27 L53.14,16.86 L43,14 L53.14,11.14 Z' fill='%23f4b941'/%3E%3Cpath d='M92,4 L94.2,11.8 L102,14 L94.2,16.2 L92,24 L89.8,16.2 L82,14 L89.8,11.8 Z' fill='%235fd9a0'/%3E%3C/svg%3E") center / 112px 28px no-repeat,
        linear-gradient(#f7f0e159, #f7f0e159) left center / calc(50% - 72px) 2px no-repeat,
        linear-gradient(#f7f0e159, #f7f0e159) right center / calc(50% - 72px) 2px no-repeat;
}

/* contact page form */

.v2-contact-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
}

.v2-contact-head .v2-label {
    transform-origin: center;
}

.v2-contact-card {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    padding: clamp(32px, 6vw, 56px) clamp(22px, 6vw, 60px);
    border-radius: 36px;
    background-color: var(--blue);
    color: var(--ink);
}

.v2-form {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* "All fields are required." line at the top of the form */
.v2-form-note {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
}

.v2-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.v2-field label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.v2-field input,
.v2-field textarea {
    width: 100%;
    padding: 14px 18px;
    border: solid 3px var(--ink);
    border-radius: 16px;
    background-color: var(--cream);
    color: var(--ink);
    font-family: inherit;
    font-size: 1.05rem;
    line-height: 1.5;
}

.v2-field textarea {
    min-height: 170px;
    resize: vertical;
}

.v2-field input:focus-visible,
.v2-field textarea:focus-visible {
    outline: 3px solid #ffea00;
    outline-offset: 3px;
}

/* the bot trap field: off screen so people never see it, but still in the form for bots to fill */
.v2-trap {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.v2-form-error {
    margin: 0;
    font-weight: 700;
}

.v2-form-send {
    align-self: flex-start;
    margin-top: 6px;
    border: none;
    font-family: inherit;
    cursor: pointer;
}

@media (max-width: 860px) {
    .v2-form-send {
        align-self: stretch;
        justify-content: center;
    }
}

/* anything marked hidden stays hidden, even when its own class sets a display (e.g. the contact "Message sent." block) */
.v2 [hidden] {
    display: none !important;
}

/* contact form send button while a message is sending */
.v2-form-send:disabled {
    opacity: 0.6;
    cursor: progress;
}

#contact-sent h2:focus {
    outline: none;
}

/* keeps the sparkle on the game panel's border in front of the purple panel instead of tucked behind it */
.v2-stage .v2-spark {
    z-index: 2;
}

/* about me page: the cat photo in the polaroid, and room between the paragraphs */

.v2-photo-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1;
    padding: 20px;
    border: dashed 3px var(--ink);
    background-color: var(--mint);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

/* only the photo itself (a direct child of the polaroid), so the noodle letters in the home page polaroid bowl are left alone */
.v2-polaroid > img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.v2-about-page .v2-polaroid {
    padding-bottom: 12px;
}

.v2-about-page .v2-polaroid figcaption {
    padding-top: 8px;
    color: var(--ink);
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.2;
    text-align: center;
}

.v2-about-page .v2-body {
    max-width: 54ch;
    font-size: 1.1rem;
}

.v2-about-page .v2-body + .v2-body {
    margin-top: 1.4em;
}

/* apps and soups page: a centred label and heading over each section, and the two app columns */

.v2-section-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
}

.v2-section-head .v2-label {
    transform-origin: center;
}

.v2-apps-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
    gap: clamp(22px, 3vw, 36px);
}

.v2-apps-column {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 3vw, 36px);
}

/* cards fill their column so the two sit at the same height */
.v2-apps-column .v2-game-card {
    position: relative;
    flex: 1;
}

.v2-card-mustard {
    background-color: var(--mustard);
}

@media (max-width: 860px) {
    .v2-apps-grid {
        grid-template-columns: 1fr;
    }
}

/* the outlined "Coming soon!" block draws its outline around itself, not around the whole section */
.v2-soon {
    position: relative;
}

/* tape centred along the top of the mustard card, like the tape on the other cards */
.v2-card-mustard .v2-tape-pink {
    top: -14px;
    left: 50%;
    margin-left: -48px;
    transform: rotate(3deg);
    box-shadow: 0 2px 0 #0000001f;
}

/* about me page: paragraph rows, each with a small polaroid on the left */

.v2-about-rows {
    display: flex;
    flex-direction: column;
    gap: clamp(48px, 7vw, 72px);
    max-width: 900px;
    margin-inline: auto;
}

.v2-about-row {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
}

.v2-polaroid-small {
    max-width: 260px;
    padding: 10px 10px 8px;
}

.v2-about-page .v2-polaroid-small figcaption {
    font-size: 1.5rem;
}

.v2-polaroid-small .v2-photo-placeholder {
    padding: 14px;
    border-width: 2px;
    font-size: 0.95rem;
}

/* one strip of tape centred on the top edge of each small polaroid */
.v2-polaroid-small .v2-tape {
    top: -12px;
    left: 50%;
    right: auto;
    width: 92px;
    height: 24px;
    margin-left: -46px;
    transform: rotate(-4deg);
}

.v2-photo-pink { background-color: var(--pink); }
.v2-photo-mustard { background-color: var(--mustard); }
.v2-photo-blue { background-color: var(--blue); }

@media (max-width: 860px) {
    .v2-about-row {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .v2-polaroid-small {
        width: min(260px, 100%);
    }
}

/* about me: one outlined section holding the heading and all three photo + paragraph rows */
.v2-about-framed {
    padding: clamp(34px, 6vw, 70px);
}

/* about me: the small coloured heading above each paragraph */
.v2-about-heading {
    margin: 0 0 10px;
    font-family: "Fraunces", "Caprasimo", serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 2.4vw, 1.75rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.v2-about-heading-mint { color: var(--mint); }
.v2-about-heading-pink { color: var(--pink); }
.v2-about-heading-mustard { color: var(--mustard); }

/* text pages such as the privacy policy: one readable column of plain text */
.v2-legal {
    max-width: 720px;
    margin-inline: auto;
    color: var(--cream-dim);
    font-size: 1.05rem;
    line-height: 1.75;
}

.v2-legal-head {
    margin-bottom: 40px;
    padding-bottom: 28px;
    border-bottom: solid 2px #f7f0e133;
}

.v2-legal-head .v2-title {
    margin-bottom: 8px;
}

.v2-legal-date {
    margin: 0;
    color: var(--mustard);
    font-family: "Caveat", cursive;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
}

.v2-legal h3 {
    margin: 44px 0 12px;
    color: var(--cream);
    font-family: "Fraunces", "Caprasimo", serif;
    font-weight: 900;
    font-size: 1.55rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.v2-legal p {
    margin: 0 0 18px;
}

.v2-legal strong {
    color: var(--cream);
    font-weight: 700;
}

.v2-legal a {
    color: var(--mint);
    text-underline-offset: 4px;
}

.v2-legal a:focus-visible {
    outline: 3px solid #ffea00;
    outline-offset: 3px;
}

.v2-legal ul {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.v2-legal li {
    position: relative;
    margin-bottom: 10px;
    padding-left: 30px;
}

/* the site's four-point sparkle as the bullet, in turning colours */
.v2-legal li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.45em;
    width: 16px;
    height: 16px;
    background-color: var(--pink);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

.v2-legal li:nth-child(4n + 2)::before { background-color: var(--mustard); }
.v2-legal li:nth-child(4n + 3)::before { background-color: var(--mint); }
.v2-legal li:nth-child(4n)::before { background-color: var(--blue); }

/* the "Jomato Soup" wordmark in the header links to the home page */
.v2-wordmark a {
    color: inherit;
    text-decoration: none;
}

.v2-wordmark a:focus-visible {
    outline: 3px solid #ffea00;
    outline-offset: 4px;
    border-radius: 4px;
}

/* about me: the stand-in for the third photo, a big question mark on solid blue */
.v2-photo-mystery {
    border-style: solid;
    font-family: "Fraunces", "Caprasimo", serif;
    font-weight: 900;
    font-size: clamp(6rem, 22vw, 9rem);
    line-height: 1;
}

.v2-polaroid-small .v2-photo-mystery {
    font-size: 8rem;
}

/* focus outlines on the two light cards: the usual yellow is too faint against blue and mint, so these use ink
   (7.26:1 against the blue contact card, 11.03:1 against the mint Apps and Soups card) */
.v2-contact-card .v2-field input:focus-visible,
.v2-contact-card .v2-field textarea:focus-visible,
.v2-contact-card .v2-form-send:focus-visible,
.v2-cta .v2-soup-link:focus-visible,
.v2-cta .v2-btn:focus-visible {
    outline-color: var(--ink);
}

/* text only screen readers hear, such as "(opens in a new tab)" on links that open a new tab */
.v2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}