/* ==========================================================================
   Ana Romm — site styles
   Mint paper, ink, a full-bleed hero. Palette she picked:
     #c1fff2 mint · #70ae6e green · #0f7173 teal · #30c5ff cyan · #131515 ink
   Green and cyan are decoration only — neither has the contrast to carry text
   on the mint, so type is ink or teal, and cyan is saved for dark surfaces.
   Sections: tokens · base · header/nav · hero · songs · video
   · elsewhere · say hi · footer · motion · responsive
   ========================================================================== */

/* --------------------------------- tokens -------------------------------- */
:root {
    /* paper + ink */
    --paper: #dffff8;
    --paper-deep: #ccefe7;
    --card: #f0fffb;
    --ink: #131515;
    --ink-soft: #35514f;
    --ink-faint: #56716e;

    /* her palette: the bridge green, the deep teal, the bright cyan */
    --green: #70ae6e;
    --teal: #0f7173;
    --teal-deep: #0a5557;
    --cyan: #30c5ff;

    --line: rgba(19, 21, 21, 0.14);
    --line-ink: rgba(19, 21, 21, 0.3);
    --tape: rgba(112, 174, 110, 0.42);

    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

    --wrap: 1080px;
    --gutter: clamp(20px, 5vw, 48px);
    --section-y: clamp(64px, 9vw, 116px);
    --header-h: 68px;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------- base --------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 84px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(16px, 1.05vw, 17.5px);
    line-height: 1.68;
    overflow-x: hidden;
}

/* A faint paper grain over everything, so the flat mint isn't so flat. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: 0.26;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--display);
    font-weight: 500;
    line-height: 1.12;
    font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 96;
}

p {
    margin: 0 0 1.15em;
}

em {
    font-style: italic;
}

a {
    color: var(--teal);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(15, 113, 115, 0.4);
    transition: color 0.15s var(--ease), text-decoration-color 0.15s var(--ease);
}

a:hover {
    color: var(--teal-deep);
    text-decoration-color: currentColor;
}

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Cyan reads on the dark surfaces; teal would disappear into them. */
.hero :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--cyan);
}

.wrap {
    width: 100%;
    max-width: var(--wrap);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--section-y);
    position: relative;
}

.section+.section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 2 * var(--gutter), var(--wrap));
    border-top: 1px solid var(--line);
}

.section__head {
    max-width: 60ch;
    margin-bottom: clamp(32px, 4.5vw, 52px);
}

.section__title {
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
    padding: 10px 16px;
    background: var(--card);
    border: 1.5px solid var(--ink);
}

/* -------------------------------- buttons -------------------------------- */
/* A sticker-ish button: hard offset shadow, presses down on hover. */
.btn {
    display: inline-block;
    padding: 11px 22px;
    background: var(--card);
    color: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    font-family: var(--body);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    box-shadow: 4px 4px 0 var(--teal);
    transition: transform 0.14s var(--ease), box-shadow 0.14s var(--ease);
}

.btn:hover {
    color: var(--ink);
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 var(--teal);
}

.link-plain {
    font-size: 15px;
    font-weight: 500;
}

/* ------------------------------ header / nav ----------------------------- */
/* Fixed, so the hero photo runs behind it. The default is the solid mint bar,
   and the script strips it back to transparent light-on-photo type only while
   the hero is actually behind it (.is-over-hero). Written this way round so a
   deep link like /#songs — or no JavaScript at all — still leaves a readable
   header instead of mint type on mint paper. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 18px -14px rgba(19, 21, 21, 0.5);
    transition: background-color 0.3s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* An open menu keeps the solid bar, even over the hero. */
.site-header.is-over-hero:not(.is-menu-open) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
}

.top-actions {
    max-width: var(--wrap);
    margin-inline: auto;
    padding: 16px var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.wordmark {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
    font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 40;
    color: var(--ink);
    text-decoration: none;
    letter-spacing: 0.005em;
    transition: color 0.2s var(--ease);
}

.wordmark:hover {
    color: var(--teal);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.4vw, 28px);
}

.nav-links a {
    position: relative;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    padding-block: 4px;
    transition: color 0.2s var(--ease);
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s var(--ease);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--ink);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    transform: scaleX(1);
}

.nav-toggle {
    display: none;
    padding: 6px 10px;
    background: none;
    border: 1.5px solid var(--line-ink);
    border-radius: 2px;
    color: var(--ink);
    font-family: var(--body);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.nav-toggle::after {
    content: "menu";
}

.nav-toggle[aria-expanded="true"]::after {
    content: "close";
}

/* --- over the hero: light type, with a shadow so it survives the sky --- */
.is-over-hero:not(.is-menu-open) .wordmark {
    color: var(--paper);
    text-shadow: 0 1px 12px rgba(19, 21, 21, 0.55);
}

.is-over-hero:not(.is-menu-open) .wordmark:hover {
    color: var(--cyan);
}

.is-over-hero:not(.is-menu-open) .nav-links a {
    color: rgba(193, 255, 242, 0.82);
    text-shadow: 0 1px 12px rgba(19, 21, 21, 0.55);
}

.is-over-hero:not(.is-menu-open) .nav-links a:hover,
.is-over-hero:not(.is-menu-open) .nav-links a.active {
    color: var(--paper);
}

.is-over-hero:not(.is-menu-open) .nav-links a::after {
    background: var(--cyan);
}

.is-over-hero:not(.is-menu-open) .nav-toggle {
    background: rgba(19, 21, 21, 0.35);
    border-color: rgba(193, 255, 242, 0.6);
    color: var(--paper);
}

/* ---------------------------------- hero --------------------------------- */
/* Full screen. svh keeps mobile browser chrome from cropping the bottom. */
.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background-color: var(--ink);
}

.hero__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* She sits left of centre and low in the frame — hold onto her when the
       photo gets cropped hard on phones. */
    object-position: 46% 40%;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top,
            rgba(19, 21, 21, 0.86) 0%,
            rgba(19, 21, 21, 0.55) 26%,
            rgba(19, 21, 21, 0.1) 55%,
            rgba(19, 21, 21, 0.05) 74%,
            rgba(19, 21, 21, 0.5) 100%);
}

.hero__inner {
    position: relative;
    z-index: 1;
    padding-bottom: clamp(72px, 12vh, 132px);
    padding-top: calc(var(--header-h) + 24px);
}

.hero__name {
    color: var(--paper);
    font-size: clamp(54px, 11vw, 128px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.025em;
    font-variation-settings: "SOFT" 70, "WONK" 1, "opsz" 144;
    margin-bottom: 28px;
    text-shadow: 0 2px 30px rgba(19, 21, 21, 0.5);
}

.hero__links {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    margin: 0;
}

.hero .btn {
    box-shadow: 4px 4px 0 var(--cyan);
}

.hero .btn:hover {
    box-shadow: 2px 2px 0 var(--cyan);
}

.hero .link-plain {
    color: var(--paper);
    text-decoration-color: rgba(193, 255, 242, 0.45);
    text-shadow: 0 1px 12px rgba(19, 21, 21, 0.6);
}

.hero .link-plain:hover {
    color: var(--cyan);
}

/* A small nudge to keep scrolling. */
.hero__cue {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 1;
    width: 34px;
    height: 34px;
    margin-left: -17px;
    border-right: 1.5px solid rgba(193, 255, 242, 0.75);
    border-bottom: 1.5px solid rgba(193, 255, 242, 0.75);
    transform: rotate(45deg) scale(0.5);
    animation: cue 2.4s var(--ease) infinite;
}

@keyframes cue {

    0%,
    100% {
        transform: rotate(45deg) scale(0.5) translate(0, 0);
        opacity: 0.55;
    }

    50% {
        transform: rotate(45deg) scale(0.5) translate(6px, 6px);
        opacity: 1;
    }
}

/* ---------------------------------- songs -------------------------------- */
.player {
    max-width: 480px;
    margin-bottom: clamp(40px, 5vw, 60px);
}

.player__frame {
    display: block;
    width: 100%;
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    box-shadow: 5px 5px 0 var(--green);
}

.releases {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.release {
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 22px;
    align-items: center;
    padding: 20px 4px;
    border-bottom: 1px solid var(--line);
    transition: background-color 0.18s var(--ease);
}

.release:hover {
    background-color: rgba(112, 174, 110, 0.16);
}

.release__art {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border: 1px solid rgba(19, 21, 21, 0.12);
    border-radius: 2px;
    transition: transform 0.2s var(--ease);
}

.release:hover .release__art {
    transform: rotate(-1.5deg) scale(1.03);
}

.release__title {
    font-size: clamp(21px, 2.2vw, 26px);
    font-weight: 500;
    margin-bottom: 3px;
}

.release__meta {
    margin: 0 0 8px;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    color: var(--ink-faint);
}

.release__links {
    margin: 0;
    font-size: 14.5px;
}

.release__links a+a {
    margin-left: 0.75em;
    padding-left: 0.85em;
    border-left: 1px solid var(--line-ink);
}

/* ---------------------------------- video -------------------------------- */
.videos {
    display: grid;
    gap: clamp(28px, 4vw, 44px);
    margin-bottom: clamp(52px, 7vw, 80px);
}

.video {
    margin: 0;
}

/* The poster button, and the frame the script swaps in for it, are the same
   shape — so nothing shifts on the page when the player appears. */
.video__play,
.video__frame {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    background: var(--ink);
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    overflow: hidden;
    box-shadow: 5px 5px 0 var(--green);
}

.video__play {
    cursor: pointer;
}

.video__play img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease), opacity 0.3s var(--ease);
}

.video__play:hover img,
.video__play:focus-visible img {
    transform: scale(1.035);
    opacity: 0.8;
}

.video__badge {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
}

/* Play button: mint disc, ink triangle. */
.video__badge::before {
    content: "";
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    box-shadow: 0 10px 26px -8px rgba(19, 21, 21, 0.7);
    transition: transform 0.22s var(--ease), background-color 0.22s var(--ease);
}

.video__badge::after {
    content: "";
    position: absolute;
    margin-left: 5px;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 19px solid var(--ink);
}

.video__play:hover .video__badge::before,
.video__play:focus-visible .video__badge::before {
    transform: scale(1.08);
    background: var(--cyan);
}

.video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* -------------------------------- elsewhere ------------------------------ */
.press__title {
    font-size: clamp(24px, 2.6vw, 30px);
    margin-bottom: 18px;
}

.press {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}

.press a {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 8px 22px;
    align-items: baseline;
    padding: 15px 4px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
    transition: background-color 0.18s var(--ease);
}

.press a:hover,
.press a:focus-visible {
    background-color: rgba(112, 174, 110, 0.16);
}

.press__where {
    font-weight: 600;
    font-size: 15.5px;
}

.press a:hover .press__where {
    color: var(--teal);
}

.press__what {
    color: var(--ink-soft);
    font-size: 15px;
}

.press__when {
    color: var(--ink-faint);
    font-size: 13.5px;
    letter-spacing: 0.03em;
}

/* --------------------------------- say hi -------------------------------- */
.hi {
    text-align: center;
}

.hi__inner {
    max-width: 36rem;
    margin-inline: auto;
}

.hi__social {
    margin: 26px 0 0;
    font-size: 15px;
    color: var(--ink-soft);
}

/* ---------------------------------- forms -------------------------------- */
/* Same sticker language as the buttons and the video posters: card, hard
   border, hard offset shadow. */
.form {
    max-width: 34rem;
    margin: clamp(28px, 4vw, 38px) auto 0;
    padding: clamp(22px, 3.5vw, 32px);
    text-align: left;
    background: var(--card);
    border: 1.5px solid var(--ink);
    border-radius: 2px;
    box-shadow: 6px 6px 0 var(--green);
}

.form__row {
    margin: 0 0 18px;
}

.form__label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
}

.form__input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-family: var(--body);
    /* 16px: anything smaller and iOS Safari zooms the page on focus. */
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--paper);
    border: 1.5px solid var(--line-ink);
    border-radius: 2px;
    transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.form__input::placeholder {
    color: var(--ink-faint);
}

.form__input:focus {
    outline: none;
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(15, 113, 115, 0.18);
}

.form__input--area {
    min-height: 128px;
    resize: vertical;
}

/* The honeypot. Not display:none — some bots skip anything hidden that way. */
.form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0;
}

.btn[disabled] {
    opacity: 0.5;
    cursor: default;
    transform: none;
    box-shadow: 2px 2px 0 var(--teal);
}

.form__note,
.signup__note {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--teal);
}

/* The one colour off her palette. An error has to read as an error, and
   there is nothing in the five that says "this went wrong". */
.form__note--bad,
.signup__note--bad {
    color: #a3372c;
}

/* ------------------------------ mailing list ----------------------------- */
.signup {
    max-width: 34rem;
    margin: clamp(52px, 7vw, 76px) auto 0;
    padding-top: clamp(32px, 4vw, 42px);
    border-top: 1px dashed var(--line-ink);
}

.signup__title {
    font-size: clamp(20px, 2.2vw, 24px);
    margin-bottom: 16px;
}

.signup__form {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.signup__form .form__input {
    flex: 1 1 auto;
    min-width: 0;
}

.signup__form .btn {
    flex: 0 0 auto;
}

.signup__note:empty {
    display: none;
}

.signup__note {
    margin-top: 14px;
}

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

/* --------------------------------- footer -------------------------------- */
/* Ink, to bookend the hero. Cyan links — the only place they have the
   contrast for it. */
.site-footer {
    padding-block: 40px 52px;
    background: var(--ink);
    color: var(--paper);
}

.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 28px;
}

.site-footer a {
    color: var(--cyan);
    text-decoration-color: rgba(48, 197, 255, 0.4);
}

.site-footer a:hover {
    color: var(--paper);
}

.site-footer__name {
    margin: 0;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
    font-variation-settings: "SOFT" 60, "WONK" 1, "opsz" 40;
}

.socials {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14.5px;
}

.site-footer__legal {
    margin: 0;
    font-size: 13.5px;
    color: rgba(193, 255, 242, 0.62);
}

/* --------------------------------- motion -------------------------------- */
/* Content is visible by default; the script opts in to the fade by putting
   .js on <html>, so a script failure can never leave a blank page. */
.js .reveal {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .js .reveal {
        opacity: 1;
        transform: none;
    }
}

/* ------------------------------- responsive ------------------------------ */
@media (max-width: 980px) {
    .press a {
        grid-template-columns: 160px 1fr;
    }

    .press__when {
        grid-column: 2;
    }
}

@media (max-width: 860px) {
    .nav-toggle {
        display: block;
    }

    .top-actions {
        flex-wrap: wrap;
    }

    .nav-links {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 10px 0 6px;
        border-top: 1px solid var(--line);
        margin-top: 12px;
    }

    .nav-links.is-open {
        display: flex;
    }

    .nav-links a {
        width: 100%;
        padding: 9px 0;
        font-size: 16px;
    }

    .nav-links a::after {
        display: none;
    }

    .hero__name {
        font-size: clamp(48px, 15vw, 84px);
    }

    .video__badge::before {
        width: 62px;
        height: 62px;
    }

    .video__badge::after {
        border-top-width: 10px;
        border-bottom-width: 10px;
        border-left-width: 16px;
    }
}

@media (max-width: 560px) {
    .release {
        grid-template-columns: 64px 1fr;
        gap: 16px;
    }

    .release__art {
        width: 64px;
        height: 64px;
    }

    .press a {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .press__when {
        grid-column: 1;
    }

    .hero__cue {
        display: none;
    }


    .signup__form {
        flex-direction: column;
        align-items: stretch;
    }

    .signup__form .btn {
        text-align: center;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
    }
}