/* Squirrel Radio — public homepage.
   Shares the illustrated design language of the private /samesun pages.

   The tokens and texture recipes below are a deliberate copy of station.css
   (and 404.html does the same). They are duplicated rather than shared because
   there is no build step: a shared file would mean an @import round trip, or a
   second stylesheet request on the latency-sensitive phone pages. station.css
   is the source of truth -- if a token changes there, change it here too. */

:root {
    --paper: #efd9aa;
    --paper-deep: #cfae73;
    --ink: #1b1711;
    --orange: #c95220;
    --orange-hot: #e26628;
    --teal: #367f7d;
    --cream: #fff0c9;
    --dim: #b18d5d;

    --font-display: "Righteous", Impact, sans-serif;
    --font-type: "Special Elite", Georgia, serif;
    --font-body: "Space Mono", ui-monospace, monospace;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: #100b08;
    scroll-behavior: smooth;
}

/* The same ground the illustration sits on, continued behind the prose. This
   is one of the three things holding the hero/content seam together. */
body.home-page {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    background:
        radial-gradient(circle at 50% 12%, rgba(80, 49, 28, .26), transparent 46rem),
        repeating-linear-gradient(98deg, rgba(255, 255, 255, .01) 0 1px, transparent 1px 8px),
        #100b08;
    -webkit-font-smoothing: antialiased;
}

button {
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

img {
    max-width: 100%;
}

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

a:focus-visible,
button:focus-visible {
    outline: 4px solid var(--teal);
    outline-offset: 4px;
}

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

.home-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    padding:
        max(8px, env(safe-area-inset-top))
        max(8px, env(safe-area-inset-right))
        0
        max(8px, env(safe-area-inset-left));
}

/* Same box model as station.css's .art-scene: fixed aspect, absolutely
   positioned children, so width + aspect-ratio is the only thing giving it a
   size. The vh line is a fallback, not decoration -- without dvh support the
   calc is invalid, which invalidates the whole min(), and this collapses to
   zero width and renders nothing.

   The 110px reserve is what keeps the hero OFF a full viewport, so the section
   below peeks above the fold and the page reads as scrollable. */
.home-scene {
    position: relative;
    flex: 0 0 auto;
    width: min(1600px, calc((100vh - 110px - env(safe-area-inset-top, 0px)) * 1.6), calc(100vw - 16px));
    width: min(1600px, calc((100dvh - 110px - env(safe-area-inset-top, 0px)) * 1.6), calc(100vw - 16px));
    aspect-ratio: 1600 / 1000;
    filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .38));
}

.scene-art,
.scene-art picture,
.scene-art img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.scene-art img {
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
}

/* Dissolves the artwork's hard bottom edge into the page ground. Layer two of
   the seam treatment; the artwork itself is briefed to end on flat dark wood. */
.home-scene::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 14%;
    content: "";
    background: linear-gradient(to bottom, transparent, #100b08 92%);
    pointer-events: none;
}

/* Overlaid on the artwork. Kept to three items on purpose -- every positioned
   control has to be re-measured against the art at each breakpoint.

   Placement is measured, not eyeballed: mean image gradient inside each box,
   against a scene average of 6.76. The note was at bottom 27% where it sat on
   the crate and shack base (8.83, busier than the scene average); at 19% it is
   on the plain decking (5.84). The CTA band at 12% measures 0.76 -- the calmest
   region in the picture, which is what it was briefed for. */
/* The note and the CTA are ONE stack, not two independently positioned boxes.
   Pinning both to percentage offsets meant the gap between them depended on how
   the note's text happened to wrap -- measured, they touched or overlapped by a
   few px at four of six viewports. A flex column anchored at the bottom makes
   the gap structural. */
.hero-overlay {
    position: absolute;
    z-index: 2;
    bottom: 12%;
    left: 50%;
    display: flex;
    width: min(40%, 26rem);
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, 1.4vw, 18px);
    transform: translateX(-50%);
}

.hero-note {
    width: 100%;
    margin: 0;
    padding: .7em 1.1em;
    transform: rotate(-1.2deg);
    color: var(--ink);
    font-family: var(--font-type);
    font-size: clamp(.72rem, 1.15vw, 1.05rem);
    line-height: 1.5;
    text-align: center;
    background:
        radial-gradient(circle at 20% 35%, rgba(88, 59, 25, .11) 0 1px, transparent 1.5px),
        repeating-linear-gradient(4deg, rgba(80, 52, 22, .035) 0 1px, transparent 1px 6px),
        rgba(239, 217, 170, .98);
    background-size: 17px 17px, auto, auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .42), inset 0 0 8px rgba(67, 42, 17, .18);
}

.hero-cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .6em;
    padding: .7em 1.5em;
    border: 0;
    border-radius: .35em;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: clamp(.8rem, 1.3vw, 1.15rem);
    letter-spacing: .075em;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    background:
        radial-gradient(circle at 26% 32%, rgba(255, 230, 178, .17) 0 1px, transparent 2px),
        repeating-linear-gradient(103deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
        rgba(190, 67, 24, .98);
    background-size: 19px 19px, auto, auto;
    box-shadow: 0 .3em 0 #672611, 0 .5em 1em rgba(0, 0, 0, .4), inset 0 0 13px rgba(73, 21, 8, .26);
}

.hero-cta:hover {
    background-color: var(--orange-hot);
}

.hero-cta:active {
    transform: translateY(2px);
    box-shadow: 0 .1em 0 #672611, 0 .25em .5em rgba(0, 0, 0, .4);
}

/* ------------------------------------------------------------- content ---- */

.page {
    width: min(1080px, 100% - 2rem);
    margin: 0 auto;
    padding-bottom: 4rem;
}

.band {
    margin: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.band-head {
    margin: 0 0 1.4rem;
    color: var(--paper);
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3.4vw, 2.4rem);
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 0 3px 0 #1a0f08;
}

.band-sub {
    max-width: 62ch;
    margin: -.6rem auto 1.8rem;
    color: var(--dim);
    font-size: .86rem;
    text-align: center;
}

/* The one panel recipe. style.css had this copy-pasted five times with
   backdrop-filter; an opaque fill on an opaque ground doesn't need it. */
.paper-card {
    padding: clamp(1.1rem, 3vw, 1.8rem);
    border-radius: 4px;
    color: var(--ink);
    background:
        radial-gradient(circle at 18% 28%, rgba(88, 59, 25, .1) 0 1px, transparent 1.5px),
        repeating-linear-gradient(5deg, rgba(80, 52, 22, .035) 0 1px, transparent 1px 7px),
        var(--paper);
    background-size: 17px 17px, auto, auto;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .45), inset 0 0 10px rgba(67, 42, 17, .16);
}

.intro-text {
    max-width: 68ch;
    margin: 0 auto;
    font-family: var(--font-type);
    font-size: clamp(.95rem, 1.5vw, 1.15rem);
    line-height: 1.7;
    text-align: center;
}

.intro-text strong {
    color: #6d2a11;
}

/* --------------------------------------------------------- the console ---- */

.console {
    max-width: 44rem;
    margin: 0 auto;
    padding: clamp(.8rem, 2vw, 1.3rem);
    border-radius: 8px;
    background:
        repeating-linear-gradient(96deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 9px),
        linear-gradient(#3a2716, #23180e);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, .5),
        inset 0 1px 0 rgba(255, 211, 151, .12),
        inset 0 -2px 6px rgba(0, 0, 0, .5);
}

.console-label {
    margin: 0 0 .7rem;
    color: var(--paper-deep);
    font-family: var(--font-body);
    font-size: .66rem;
    letter-spacing: .22em;
    text-align: center;
    text-transform: uppercase;
}

/* The widget is served with light=1, hide_cover=1 and hide_artwork=1. Keeping
   the light theme lets it read as a paper label inset in the desk -- the design
   language's core move -- and because the cover art is hidden there is no
   photographic content for the warming filter to distort, only Mixcloud's own
   chrome. Height is pinned to the iframe's literal 120px so the bezel does not
   reflow when it loads. */
.mixcloud-wrapper {
    overflow: hidden;
    height: 120px;
    border-radius: 3px;
    background: var(--paper);
    box-shadow: inset 0 0 10px rgba(67, 42, 17, .3);
}

.mixcloud-wrapper iframe {
    display: block;
    width: 100%;
    height: 120px;
    border: 0;
    filter: sepia(.22) saturate(.92) hue-rotate(-6deg);
}

/* Enamel knob — the .scene-power recipe from station.css, which is the most
   characteristic control in the design language. */
.random-section {
    margin-top: 1.6rem;
    text-align: center;
}

#randomShow {
    display: inline-grid;
    width: 150px;
    aspect-ratio: 1;
    padding: 0;
    place-items: center;
    border: 3px solid #6f2811;
    border-radius: 50%;
    color: var(--cream);
    cursor: pointer;
    background:
        radial-gradient(circle at 34% 25%, rgba(255, 238, 194, .23), transparent 17%),
        repeating-radial-gradient(circle, transparent 0 10px, rgba(90, 30, 10, .08) 10px 11px),
        rgba(201, 77, 27, .98);
    box-shadow:
        0 .35em 0 #672611,
        0 .5em 1em rgba(0, 0, 0, .35),
        inset 0 0 0 .18em rgba(255, 211, 151, .13);
    transition: background-color .2s ease;
}

#randomShow:hover {
    background-color: var(--orange-hot);
}

#randomShow:active {
    transform: translateY(.25em);
    box-shadow: 0 .1em 0 #672611, 0 .25em .5em rgba(0, 0, 0, .35);
}

.button-text {
    font-family: var(--font-display);
    font-size: .95rem;
    letter-spacing: .06em;
    line-height: 1.15;
}

.button-subtext {
    color: rgba(255, 240, 201, .78);
    font-family: var(--font-type);
    font-size: .68rem;
    letter-spacing: .08em;
}

/* ------------------------------------------------------------- the faq ---- */

.faq-grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.faq-card {
    position: relative;
    transform: rotate(-.7deg);
}

.faq-card:nth-child(even) {
    transform: rotate(.8deg);
}

/* Strip of tape holding the card down. */
.faq-card::before {
    position: absolute;
    top: -9px;
    left: 50%;
    width: 68px;
    height: 20px;
    transform: translateX(-50%) rotate(-2deg);
    content: "";
    background: rgba(54, 127, 125, .72);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.faq-card h3 {
    margin: .3rem 0 .6rem;
    color: #6d2a11;
    font-family: var(--font-type);
    font-size: 1.05rem;
    line-height: 1.35;
}

.faq-card p {
    margin: 0;
    font-family: var(--font-type);
    font-size: .9rem;
    line-height: 1.6;
}

/* ------------------------------------------------------------ archives ---- */

.show-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    padding: 0;
    margin: 0;
}

/* No classes here on purpose: script.js builds these <a>/<img> nodes without
   any, and wipes .show-grid with innerHTML='' on load, so all styling has to
   hang off descendant selectors. Do not add a wrapper element either -- the
   role="list" / role="listitem" pair must stay direct parent/child. */
.show-grid a {
    position: relative;
    display: block;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: #14100c;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .5), 0 0 0 2px rgba(31, 22, 14, .9);
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.show-grid img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    filter: sepia(.3) saturate(.9) contrast(1.04) brightness(.92);
    transition: filter .35s ease;
}

/* Grooves. */
.show-grid a::before {
    position: absolute;
    z-index: 2;
    inset: 0;
    content: "";
    border-radius: 50%;
    background: repeating-radial-gradient(circle, transparent 0 4px, rgba(0, 0, 0, .16) 4px 5px);
    pointer-events: none;
}

/* Spindle. */
.show-grid a::after {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 13%;
    height: 13%;
    transform: translate(-50%, -50%);
    content: "";
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 0 3px rgba(201, 77, 27, .85), inset 0 0 3px rgba(0, 0, 0, .5);
    pointer-events: none;
}

.show-grid a:hover {
    transform: scale(1.06);
}

.show-grid a:hover img {
    filter: sepia(.12) saturate(1.05) contrast(1.05) brightness(1);
}

.archive-fallback {
    margin: 1rem 0 0;
    color: var(--dim);
    font-size: .82rem;
    text-align: center;
}

.archive-fallback a {
    color: var(--orange-hot);
}

/* --------------------------------------------------------------- about ---- */

.context-content {
    max-width: 64ch;
    margin: 0 auto;
    font-size: .88rem;
}

.context-content p {
    margin: 0 0 1rem;
}

.context-content p:last-child {
    margin-bottom: 0;
}

.context-content strong {
    display: block;
    margin-bottom: .2rem;
    color: #6d2a11;
    font-family: var(--font-type);
    font-size: 1rem;
}

/* -------------------------------------------------------------- footer ---- */

.site-footer {
    padding: 2.5rem 1rem calc(2.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(239, 217, 170, .12);
    text-align: center;
}

.submit-music-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: .6em;
    padding: .7em 1.5em;
    border-radius: .35em;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: 1rem;
    letter-spacing: .075em;
    text-decoration: none;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 26% 32%, rgba(255, 230, 178, .17) 0 1px, transparent 2px),
        repeating-linear-gradient(103deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
        rgba(190, 67, 24, .98);
    background-size: 19px 19px, auto, auto;
    box-shadow: 0 .3em 0 #672611, 0 .5em 1em rgba(0, 0, 0, .4), inset 0 0 13px rgba(73, 21, 8, .26);
}

.submit-music-button:hover {
    background-color: var(--orange-hot);
}

.footer-tagline {
    margin-top: 1.6rem;
    color: var(--dim);
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
}

.footer-link {
    display: inline-block;
    margin-top: 1rem;
    color: var(--dim);
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* --------------------------------------------------------- breakpoints ---- */

/* Same switch point as station.css so the whole site shares one art-direction
   boundary; the portrait crop is only ever right for a tall viewport. */
@media (max-width: 700px) and (orientation: portrait) {
    .home-scene {
        width: min(840px, calc(100vw + 20px));
        aspect-ratio: 840 / 1060;
    }

    /* Same measurement on the portrait crop (scene average 7.21): the note was
       at 24% -> 7.56, now 17% -> ~4.1; the CTA band measures 0.50. */
    .hero-overlay {
        bottom: 10%;
        width: 76%;
    }

    .hero-note {
        font-size: clamp(.7rem, 3vw, .95rem);
    }

    .hero-cta {
        padding: .6em 1.1em;
        font-size: clamp(.72rem, 3vw, .92rem);
    }

    .show-grid {
        gap: 14px;
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }

    #randomShow {
        width: 132px;
    }
}

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

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