/* ---------- fonts ----------*/
@import url('https://fonts.googleapis.com/css2?family=Ojuju:wght@200..800&family=Sono:wght,MONO@200..800,1&display=swap');
@font-face {
    font-family: 'BE Title';
    src: url('fonts/Redaction35-Italic.otf') format('opentype');
    font-style: italic;
    font-weight: 400;
    font-display: swap;
}

.ojuju-title {
  font-family: "Ojuju", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.sono-body {
  font-family: "Sono", monospace;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  font-variation-settings:
    "MONO" 1;
}

:root {
    --green: #738E41;
    --cream: #fffdf6;
    --butter: #fcf0cc;

    --font-title: "Ojuju", sans-serif;
    --font-body: "Sono", monospace;

    --R: min(35vw, 35vh);
    --cx: 75%;
    --cy: 50%;
    --img-w: 10.5vw;
    --img-zoom: 2;
    --spin: 90s;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
    font-family: var(--font-body);
    font-weight: 300;
    color: var(--green);
    background: linear-gradient(to bottom, var(--cream) 0%, var(--butter) 100%) fixed;
}

a { color: inherit; text-decoration: none; }

.page {
    position: relative;
    height: 100vh;
    min-height: 640px;
    overflow: hidden;
    --play: running;
}
.page.hold { --play: paused; }

/* ---------- hero (desktop: left-aligned) ---------- */

.hero {
    position: relative;
    z-index: 3;
    padding: 1.4rem 2.6vw 0;
    text-align: left;
    pointer-events: none;
}
.hero a { pointer-events: auto; }
.hero a:hover, .hero a:focus-visible { font-style: italic; }

.meta { margin: 0; font-size: 1.1rem; }
.star { font-size: 0.7em; margin: 0 0.5em; vertical-align: 0.1em; }

.title {
    margin: 4vh 0 0;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: 8vw;
    line-height: 0.78;
}

.subtitle { margin: 6vh 0 0; font-family: var(--font-title); font-size: 1.75rem; }

/* ---------- circle (rotates; images counter-rotate to stay upright) ---------- */

@keyframes spin   { to { rotate: 360deg; } }
@keyframes unspin { to { rotate: -360deg; } }
@keyframes fade   { to { opacity: 1; } }

.orbit {
    position: absolute;
    z-index: 2;
    left: var(--cx);
    top: var(--cy);
    width: calc(var(--R) * 2);
    height: calc(var(--R) * 2);
    translate: -50% -50%;
    animation: spin var(--spin) linear infinite;
    animation-play-state: var(--play);
}

.ring {
    position: absolute;
    inset: 0;
    border: 1.5px dashed var(--green);
    border-radius: 50%;
    pointer-events: none;
}

/* each slot sits on the circle at angle --a (0 = right, 90 = bottom, -90 = top) */
.slot {
    position: absolute;
    left: calc(50% + var(--R) * cos(var(--a)));
    top:  calc(50% + var(--R) * sin(var(--a)));
    translate: -50% -50%;
    animation: unspin var(--spin) linear infinite;
    animation-play-state: var(--play);
}
.slot:has(.work:hover), .slot:has(.work:focus-visible), .slot:has(.work.active) { z-index: 10; }

.work {
    display: block;
    width: var(--img-w);
    opacity: 0;
    animation: fade 1.6s ease forwards calc(var(--i, 0) * 0.35s + 0.3s);
    transition: scale 0.1s ease;
}

.work img {
    display: block;
    width: 100%;
    aspect-ratio: 1.4;
    object-fit: cover;
    filter: url(#duo);
    transition: box-shadow 0.3s ease;
}


/* selected = hovered / keyboard-focused (desktop) or tapped (phone) */
.work:focus-visible, .work.active { scale: var(--img-zoom); outline: none; }
.work:focus-visible img, .work.active img { filter: none; box-shadow: 0 6px 24px rgba(115, 142, 65, 0.25); }

@media (hover: hover) {
    .work:hover { scale: var(--img-zoom); }
    .work:hover img { filter: none; box-shadow: 0 6px 24px rgba(115, 142, 65, 0.25); }
}

/* ---------- quote (bottom of screen) ---------- */

.quote {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 4vh;
    translate: -50% 0;
    width: min(68vw, 64rem);
    margin: 0;
    text-align: center;
    font-size: clamp(1.25rem, 2.4vw, 2.3rem);
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
    text-shadow: 0 0 12px var(--butter), 0 0 4px var(--butter);
    transition: opacity 0.35s ease;
}
.page.hold .quote { opacity: 1; }

.q-link { display: block; margin-top: 0.7rem; font-size: 1rem; pointer-events: none; }

/* on touch screens the "view work →" link is tappable once a work is selected */
@media (hover: none) {
    .page.hold .q-link { pointer-events: auto; padding: 0.5rem; }
}

/* ---------- "?" button (links to the about page) ---------- */

.help {
    position: absolute;
    z-index: 30;
    left: 1.6vw;
    bottom: 1.5rem;
    display: grid;
    place-items: center;
    width: 2.2rem;
    height: 2.2rem;
    border: 1.5px solid var(--green);
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
}
.help:hover, .help:focus-visible { background: var(--green); color: var(--cream); font-style: normal; }

/* ---------- phone: same circle, centred header, tap instead of hover ---------- */

@media (max-width: 700px) {
    :root {
        --R: 40vw;
        --cx: 50%;
        --cy: 65%;
        --img-w: 20vw;
        --img-zoom: 1.7;
    }

    .page { height: 100vh; height: 100vh; min-height: 560px; }

    .hero { padding: 1.1rem 1rem 0; text-align: center; }
    .meta { font-size: 1rem; }
    .title { margin-top: 2.5vh; font-size: 17.5vw; }
    .subtitle { margin-top: 2vh; font-size: 1.1rem; }

    .quote { width: 75vw; bottom: 5%; font-size: 1rem; }
    .help { left: 1rem; bottom: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
    .orbit, .slot { animation: none; }
    .work { animation: fade 0.01s forwards; }
}

.artist-page {
    --col: 46rem;
    position: relative;
    min-height: 100vh;
    padding: 12vh max(1.6vw, calc((100vw - var(--col)) / 2)) 7rem;
    color: var(--green) !important;   /* overrides the old inline colour on the about page */
}

/* back link: top-left, same size/position as the index nav */
.artist-page > a:first-child {
    position: absolute;
    top: 1.4rem;
    left: 1.6vw;
    font-size: 1.1rem;
}
.artist-page > a:first-child p { margin: 0; }
.artist-page a:hover, .artist-page a:focus-visible { font-style: italic; }

.artist-page h1 {
    margin: 0 0 4vh;
    font-family: var(--font-title);
    font-weight: 400;
    font-size: clamp(3.2rem, 7.6vw, 7rem);
    line-height: 0.9;
    text-align: center;
}

.artist-page h2 {
    font-family: var(--font-title);
    margin: 0 0 1rem;
    font-size: 2rem;
    font-weight: 400;
    text-align: center;
}

.medium-line {
    margin: 0 0 5vh;
    font-size: 1.1rem;
    text-align: center;
}

.plate {
    display: block;
    width: 100%;
    height: auto;
    margin: 2.5rem 0;
    border: 1px solid var(--green);
}

.row {
    display: flex;
}

.col {
    flex: 50%;
    padding: 1rem;
}

.statement { color: var(--ink); }
.statement p {
    margin: 1.5rem 0 1rem;
    font-size: 1.2rem;
    line-height: 1.5;
}
.statement a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* about page: space between sections */
.statement + h2 { margin-top: 4rem; }

/* website / instagram links */
.artist-page > span {
    display: block;
    margin-top: 1.5rem;
    font-size: 1.1rem;
}

.related {
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px dashed var(--green);
}
.related h2 { text-align: left; font-size: 2rem; }
.related ul { margin: 0; padding: 0; list-style: none; }
.related li { margin-bottom: 0.7rem; font-size: 1.05rem; line-height: 1.35; }

@media (max-width: 700px) {
    .artist-page { padding: 5.5rem 1.2rem 4rem; }
    .artist-page h1 { font-size: 3.4rem; }
}