/* ------------------------------------------------------------------
   oli's club — one stylesheet, a handful of palettes
   ------------------------------------------------------------------ */

/* --- colour palettes ------------------------------------------------ */

/* dark is the default. every palette redefines the same set of tokens;
   --swatch is only used by the little preview chips in the picker, so a
   palette only shows colours it actually uses. */

:root,
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #000;
    --fg: #fff;
    --fg-dim: rgba(255, 255, 255, .6);
    --fg-faint: rgba(255, 255, 255, .3);
    --line: #fff;
    --fill: #fff;
    --fill-text: #000;
    --glass: rgba(255, 255, 255, .05);
    /* the only colour on the site: the bulbs on the cinema board */
    --bulb: #ffc247;
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #fff;
    --fg: #000;
    --fg-dim: rgba(0, 0, 0, .55);
    --fg-faint: rgba(0, 0, 0, .28);
    --line: #000;
    --fill: #000;
    --fill-text: #fff;
    --glass: rgba(0, 0, 0, .04);
    --bulb: #eda200;
}

/* 抹茶 — pale matcha green, with roasted-tea brown for the small text */
[data-theme="matcha"] {
    color-scheme: light;
    --bg: #c6e18b;
    --fg: #1c2a17;
    --fg-dim: #8f4f26;
    --fg-faint: rgba(143, 79, 38, .38);
    --line: #1c2a17;
    --fill: #1c2a17;
    --fill-text: #e9f0da;
    --glass: rgba(28, 42, 23, .05);
    --bulb: #d4129a;
}

/* 海 — deep water blues and greens, lit by a yellow lamp */
[data-theme="oceanic"] {
    color-scheme: dark;
    --bg: #0a2533;
    --fg: #e2f2f1;
    --fg-dim: #79bfae;
    --fg-faint: rgba(121, 191, 174, .34);
    --line: #86b8d0;
    --fill: #cdeceb;
    --fill-text: #0a2533;
    --glass: rgba(134, 184, 208, .1);
    --bulb: #f2c94c;
}

/* --- base ---------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

svg {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
    fill: currentColor;
}

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

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

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

:focus-visible {
    outline: 2px solid var(--fg);
    outline-offset: 2px;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--fill);
    color: var(--fill-text);
    padding: 8px 12px;
}

.skip:focus {
    left: 8px;
    top: 8px;
    z-index: 30;
}

.label {
    color: var(--bulb);
    margin: 0;
}

/* --- header + nav --------------------------------------------------- */

/* a floating bar: detached from every screen edge, pinned to the top once
   the page starts scrolling. width + max-width keep its contents lined up
   with <main> on wide screens. */
.site-head {
    position: sticky;
    top: 12px;
    z-index: 20;
    width: calc(100% - 24px);
    max-width: 900px;
    margin: 12px auto 0;
    padding: 12px 20px;
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 12px 32px -22px rgba(0, 0, 0, .6);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

@media (max-width: 420px) {
    .site-head {
        padding: 10px 14px;
        gap: 12px;
    }
}

.site-head__brand b {
    font-size: 1rem;
    letter-spacing: -.01em;
    white-space: nowrap;
}

.site-head__brand svg {
    width: 20px;
    height: 20px;
}

.site-nav {
    margin-left: auto;
}

.site-nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 0;
    padding: 0;
}

.site-nav a {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-dim);
    padding: 2px 0;
    border-bottom: 1px solid transparent;
}

.site-nav a:hover {
    color: var(--fg);
}

.site-nav a[aria-current="page"] {
    color: var(--fg);
    border-bottom-color: var(--fg);
}

/* on small screens the brand shrinks to its house icon and the page
   links stay on one row, with the palette picker at the end */
@media (max-width: 659px) {
    .site-head {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .site-head__brand {
        display: flex;
        align-items: center;
    }

    .site-head__word {
        display: none;
    }

    .site-nav ul {
        flex-wrap: nowrap;
        gap: 10px;
    }

    .site-nav a {
        font-size: .6875rem;
        letter-spacing: .08em;
        white-space: nowrap;
    }
}

/* --- the palette picker --------------------------------------------- */

.palette {
    position: relative;
    flex: none;
}

.palette__button {
    position: relative;
    border: 1px solid var(--line);
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
}

.palette__button:hover,
.palette__button[aria-expanded="true"] {
    background: var(--fill);
    color: var(--fill-text);
}

.palette__button svg {
    width: 17px;
    height: 17px;
}

.palette__dot {
    position: absolute;
    right: 4px;
    bottom: 4px;
    width: 5px;
    height: 5px;
    background: var(--bulb);
}

.palette__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 30;
    width: 300px;
    max-width: calc(100vw - 44px);
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 18px 48px -22px rgba(0, 0, 0, .55);
}

.palette__panel[hidden] {
    display: none;
}

.palette__panel-title {
    margin: 0 0 10px;
}

.palette__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

/* each option is painted in its own palette, so the list reads as a set
   of little theme swatches rather than names on the current page colour */
.palette__option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 7px;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    text-align: left;
}

.palette__option:hover {
    box-shadow: inset 0 0 0 2px var(--fg-faint);
}

.palette__option[aria-pressed="true"] {
    box-shadow: inset 0 0 0 2px var(--fg);
}

.palette__chips {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--line);
}

.palette__chips i {
    display: block;
    width: 8px;
    height: 18px;
}

.palette__chips i:nth-child(1) {
    background: var(--bg);
}

.palette__chips i:nth-child(2) {
    background: var(--fg);
}

.palette__chips i:nth-child(3) {
    background: var(--bulb);
}

.palette__name {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.palette__kanji {
    margin-left: auto;
    font-size: .75rem;
    color: var(--fg-dim);
}

/* --- main ------------------------------------------------------------ */

main {
    flex: 1;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 72px;
}

section {
    padding: 40px 0;
    border-bottom: 1px solid var(--line);
}

section:last-of-type {
    border-bottom: 0;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

h1,
h2,
h3 {
    font-weight: bold;
    letter-spacing: -.02em;
    margin: 0;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.125rem;
}

p {
    margin: 0 0 12px;
}

a.link {
    border-bottom: 1px solid var(--fg);
}

a.link:hover {
    background: var(--fill);
    color: var(--fill-text);
}


/* --- the three rooms on the home page ---------------------------------- */

.rooms {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    /* every room stretches to the tallest, so the three start and finish on
       the same lines. there are no shared rows: the picture keeps its own
       height and the card takes the rest, which puts the line between them
       at a different height in each column. */
    align-items: stretch;
    gap: 20px;
}

@media (min-width: 660px) {
    .rooms {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.room {
    display: flex;
    flex-direction: column;
}

/* the picture slot keeps its own shape and its own frame. a short player
   leaves a short picture and a taller card underneath, not a tall empty
   box. */
.room__scene {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    border: 1px solid var(--line);
    background: var(--bg);
    transition: background-color .15s linear;
}

/* a film poster and a book cover are 2:3, album art is square */
.room__scene--film,
.room__scene--book {
    aspect-ratio: 2 / 3;
}

.room__scene--album {
    aspect-ratio: 1 / 1;
}

/* the cover art fills its slot without stretching */
.room__art {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* the empty slot: a dashed frame that says what belongs in it */
.room__art--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: var(--glass);
    outline: 1px dashed var(--fg-faint);
    outline-offset: -9px;
    text-align: center;
}

.room__art--empty .label {
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* the recommendation sits under the picture, at every width */

.room__card {
    /* the picture's bottom border is the divider, so no top border here.
       flex: 1 carries the card down to the shared bottom edge, which keeps
       the three sections the same height. */
    flex: 1;
    border: 1px solid var(--line);
    border-top: 0;
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg);
}

.room__title {
    font-size: 1rem;
}

.room__by {
    font-size: .75rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bulb);
    margin: 0;
}

.room__note {
    font-size: .875rem;
    margin: 0;
}

.room__more {
    align-self: flex-start;
    margin-top: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* the picture slot answers to hover the way the pad keys do */
@media (hover: hover) {

    .room__scene:hover {
        background: var(--glass);
    }
}

/* an embed keeps the ratio it asked for; the player fills that frame */
.room__scene--embed {
    background: #000;
}

.room__player {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --- friends ------------------------------------------------------------- */

.friends {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 140px));
    gap: 20px;
}

.friend {
    border: 1px solid var(--line);
}

.friend a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.friend__art {
    aspect-ratio: 1 / 1;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    background: #000;
}

.friend__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.friend__body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px 10px 10px;
    transition: background-color .15s linear, color .15s linear;
}

.friend a:hover .friend__body {
    background: var(--fill);
    color: var(--fill-text);
}

.friend__name {
    font-size: .9375rem;
    font-weight: bold;
}

.friend__url {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .06em;
    color: var(--fg-dim);
    overflow-wrap: anywhere;
}

.friend a:hover .friend__url {
    color: var(--fill-text);
    opacity: .75;
}

/* --- vending machine ---------------------------------------------------- */

.machine {
    border: 1px solid var(--line);
    padding: 16px;
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
    max-width: 560px;
    background: var(--bg);
}

@media (min-width: 620px) {
    .machine {
        grid-template-columns: minmax(0, 1fr) 164px;
        grid-template-areas:
            "head  panel"
            "glass panel"
            "out   panel";
    }

    .machine__head {
        grid-area: head;
    }

    .machine__glass {
        grid-area: glass;
    }

    .machine__dispense {
        grid-area: out;
    }

    .machine__panel {
        grid-area: panel;
    }
}

.machine__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 8px;
}

.machine__sign {
    font-weight: bold;
    font-size: .9375rem;
    letter-spacing: -.01em;
}

.machine__credit {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
    white-space: nowrap;
}

.machine__glass {
    border: 1px solid var(--line);
    background: var(--glass);
    padding: 10px;
}

.machine__shelf {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.vm-item {
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 6px 6px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: opacity .2s linear;
}

.vm-item.is-pushing .vm-item__art {
    animation: vm-push .5s cubic-bezier(.45, 0, .8, .6) forwards;
}

.vm-item.is-sold {
    opacity: .3;
}

.vm-item--empty {
    grid-column: 1 / -1;
    padding: 18px 8px;
    text-align: center;
    font-size: .6875rem;
    color: var(--fg-dim);
}

.vm-item__art {
    height: 74px;
    width: 100%;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.vm-item__art img {
    height: 74px;
    width: auto;
}

.vm-item__name {
    font-size: .6875rem;
    line-height: 1.2;
    text-align: center;
}

.vm-item__meta {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--fg-faint);
    padding-top: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .06em;
}

@keyframes vm-push {
    0% {
        transform: translateY(-6px);
        opacity: 1;
    }

    35% {
        transform: translateY(14px);
        opacity: 1;
    }

    100% {
        transform: translateY(64px);
        opacity: 0;
    }
}

/* outlet + tray */

.machine__dispense {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    min-height: 132px;
}

.vm-outlet {
    border: 1px solid var(--line);
    border-style: dashed;
    padding: 8px;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 6px;
    text-align: center;
}

.vm-outlet__view {
    display: grid;
    place-items: center;
    overflow: hidden;
}

.vm-outlet__idle {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

.vm-outlet__door {
    width: 100%;
    height: 62px;
    display: grid;
    place-items: center;
    border: 1px solid var(--line);
    background: var(--glass);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
    transition: background-color .15s linear, color .15s linear;
}

.vm-outlet__door:disabled {
    cursor: default;
}

button.vm-outlet__door:not(:disabled):hover {
    background: var(--fill);
    color: var(--fill-text);
}

.vm-outlet__can {
    height: 62px;
}

.vm-outlet__can.is-landing {
    animation: vm-land .42s cubic-bezier(.2, 1.5, .4, 1) both;
}

@keyframes vm-land {
    0% {
        transform: translateY(-70px) rotate(-8deg);
        opacity: 0;
    }

    70% {
        transform: translateY(4px) rotate(2deg);
        opacity: 1;
    }

    100% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
}

.vm-tray {
    border: 1px solid var(--line);
    background: var(--glass);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 6px;
    overflow: hidden;
}

.vm-tray__empty {
    align-self: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

.machine.is-dispensing {
    animation: vm-shake .28s linear;
}

@keyframes vm-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-2px);
    }

    75% {
        transform: translateX(2px);
    }
}

/* the opened product */

.vm-product {
    position: relative;
    height: 96px;
    display: grid;
    place-items: end center;
}

.vm-product.is-dropping {
    animation: vm-drop .45s cubic-bezier(.25, 1.4, .45, 1) both;
}

@keyframes vm-drop {
    0% {
        transform: translateY(-90px) rotate(-14deg);
        opacity: 0;
    }

    60% {
        transform: translateY(4px) rotate(3deg);
        opacity: 1;
    }

    100% {
        transform: translateY(0) rotate(0);
        opacity: 1;
    }
}

.vm-product__img {
    height: 84px;
    width: auto;
}

.vm-product[data-kind="can"] .vm-product__img {
    transition: transform .18s linear;
}

.vm-product[data-kind="can"].is-open .vm-product__img {
    animation: vm-sip .5s ease-out both;
}

@keyframes vm-sip {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.06, .94);
    }

    100% {
        transform: scale(1);
    }
}

/* drinking: the can tips back and comes upright again */
.vm-product[data-kind="can"].is-drinking .vm-product__img {
    animation: vm-drink 1.1s ease-in-out both;
}

@keyframes vm-drink {
    0% {
        transform: rotate(0) translateY(0);
    }

    18% {
        transform: rotate(-14deg) translateY(-3px);
    }

    34% {
        transform: rotate(-16deg) translateY(-4px);
    }

    62% {
        transform: rotate(-15deg) translateY(-3px);
    }

    100% {
        transform: rotate(0) translateY(0);
    }
}

/* the fizz coming out of the opened top */

.vm-spark {
    position: absolute;
    top: 26px;
    left: 50%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--fg);
    opacity: 0;
    z-index: 1;
}

.vm-product[data-kind="can"].is-open .vm-spark {
    animation: vm-fizz .5s ease-out forwards;
    animation-delay: calc(var(--i) * 45ms);
}

@keyframes vm-fizz {
    0% {
        opacity: .9;
        transform: translate(-50%, 0) scale(.4);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), -46px) scale(1.1);
    }
}

/* packet tear */

.vm-product[data-kind="packet"].is-open .vm-product__img {
    animation: vm-tear .5s ease-in-out forwards;
}

@keyframes vm-tear {
    0% {
        clip-path: inset(0 0 0 0);
    }

    35% {
        clip-path: inset(26% 0 0 0);
    }

    60% {
        clip-path: inset(30% 0 4% 0);
    }

    100% {
        clip-path: inset(31% 0 10% 0);
    }
}

.vm-crumb {
    position: absolute;
    top: 34px;
    width: 3px;
    height: 3px;
    background: var(--fg);
    opacity: 0;
}

.vm-product[data-kind="packet"].is-open .vm-crumb {
    animation: vm-fall .6s ease-in forwards;
    animation-delay: calc(var(--i) * 50ms + 120ms);
}

@keyframes vm-fall {
    0% {
        opacity: .9;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(52px);
    }
}

.vm-served {
    margin-top: 6px;
    text-align: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.vm-served[hidden] {
    display: none;
}

/* keypad */

.machine__panel {
    border: 1px solid var(--line);
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vm-screen {
    border: 1px solid var(--line);
    background: var(--fill);
    color: var(--fill-text);
    text-align: right;
    padding: 8px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.25rem;
    letter-spacing: .12em;
    min-height: 40px;
}

.vm-screen__msg {
    display: block;
    font-size: .5625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    opacity: .75;
    margin-top: 2px;
    min-height: .9em;
}

.machine__pad {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.pad-key {
    border: 1px solid var(--line);
    background: var(--bg);
    padding: 10px 2px;
    min-width: 0;
    white-space: nowrap;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    transition: background-color .1s linear, color .1s linear, transform .1s linear;
}

.pad-key:hover:not(:disabled) {
    background: var(--fill);
    color: var(--fill-text);
}

.pad-key:active:not(:disabled) {
    transform: translateY(1px);
}

.pad-key:disabled {
    opacity: .3;
    cursor: default;
}

.pad-key--wide {
    font-size: .5rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.machine__sound {
    width: 100%;
    margin-top: auto;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.machine__sound[aria-pressed="false"] {
    text-decoration: line-through;
}

/* --- snackdex ------------------------------------------------------------ */

.dex-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 20px;
}

.dex-filter[hidden] {
    display: none;
}

.dex-filter__key {
    border: 1px solid var(--line);
    padding: 6px 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
    transition: background-color .1s linear, color .1s linear;
}

.dex-filter__key:hover,
.dex-filter__key[aria-pressed="true"] {
    background: var(--fill);
    color: var(--fill-text);
}

.dex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    align-items: stretch;
    gap: 20px;
}

.dex-empty {
    grid-column: 1 / -1;
    border: 1px dashed var(--fg-faint);
    padding: 28px 20px;
    text-align: center;
    font-size: .875rem;
    color: var(--fg-dim);
    margin: 0;
}

/* a trump card: meta strip, picture, the note, three numbers */

.snack {
    border: 1px solid var(--line);
    background: var(--bg);
    display: flex;
    flex-direction: column;
}

/* our display:flex would otherwise win over the hidden attribute */
.snack[hidden] {
    display: none;
}

.snack__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--line);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.snack__no {
    color: var(--fg);
}

/* little flags, desaturated to sit inside the black-and-white palette */
.snack__flag {
    display: inline-block;
    width: 16px;
    height: 12px;
    object-fit: cover;
    vertical-align: -1px;
    margin-right: 4px;
    border: 1px solid var(--fg-faint);
    opacity: .85;
}

.snack__art {
    position: relative;
    aspect-ratio: 1 / 1;
    border-bottom: 1px solid var(--line);
    background: var(--glass);
    overflow: hidden;
}

.snack__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
}

.snack__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
    background: var(--bg);
    outline: 1px dashed var(--fg-faint);
    outline-offset: -9px;
}

.snack__photo--empty .label {
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-faint);
}

.snack__score {
    position: absolute;
    top: 8px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 5px 7px 4px;
    border: 1px solid var(--bulb);
    background: var(--bg);
    color: var(--bulb);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    line-height: 1;
}

.snack__score b {
    font-size: 1rem;
    letter-spacing: -.02em;
}

.snack__score span {
    margin-top: 3px;
    font-size: .5rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.snack__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;
    padding: 12px 12px 14px;
}

.snack__maker {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.snack__name {
    font-size: 1.0625rem;
}

.snack__flavour {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.snack__tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    padding: 0;
}

.snack__tags li {
    border: 1px solid var(--fg-faint);
    padding: 2px 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .5625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bulb);
    overflow-wrap: anywhere;
}

.snack__note {
    font-size: .875rem;
    margin: 0;
}

.snack__link {
    align-self: flex-start;
    margin-top: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.snack__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 10px 12px 12px;
    border-top: 1px solid var(--line);
}

.snack__stat {
    min-width: 0;
}

.snack__stat dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .5625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.snack__stat dd {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 3px 0 0;
}

.snack__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9375rem;
    font-weight: bold;
    line-height: 1;
}

.snack__bar {
    flex: 1;
    min-width: 12px;
    height: 5px;
    border: 1px solid var(--fg-faint);
}

.snack__bar i {
    display: block;
    height: 100%;
    background: var(--fg);
}

/* --- stub pages ---------------------------------------------------------- */

.stub {
    padding: 60px 0;
    max-width: 52ch;
}

.stub p {
    color: var(--fg-dim);
}

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

.site-foot {
    border-top: 1px solid var(--line);
    padding: 14px 20px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.site-foot .label {
    margin-left: auto;
}

/* --- guestbook ------------------------------------------------------------ */

.gb-frame {
    border: 1px solid var(--line);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.gb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gb-field label i {
    font-style: normal;
    color: var(--fg);
}

.gb-field--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.gb-duo {
    display: grid;
    gap: 18px;
}

@media (min-width: 460px) {
    .gb-duo {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.gb input[type="text"],
.gb input[type="email"],
.gb input[type="url"],
.gb textarea {
    font: inherit;
    font-size: .9375rem;
    color: var(--fg);
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 0;
    padding: 9px 10px;
    width: 100%;
    transition: background-color .15s linear;
}

.gb textarea {
    resize: vertical;
    min-height: 84px;
}

.gb input::placeholder,
.gb textarea::placeholder {
    color: var(--fg-faint);
}

.gb input:hover:not(:disabled),
.gb textarea:hover:not(:disabled) {
    background: var(--glass);
}

.gb input:focus,
.gb textarea:focus {
    outline: 2px solid var(--fg);
    outline-offset: 1px;
}

.gb input:disabled,
.gb textarea:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.gb input[type="color"] {
    width: 58px;
    height: 32px;
    padding: 3px;
    border: 1px solid var(--line);
    background: var(--bg);
    cursor: pointer;
}

.gb input[type="color"]:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.gb-counter {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    color: var(--fg-dim);
    margin: -2px 0 0;
    text-align: right;
}

.gb-more {
    border-top: 1px solid var(--line);
    padding-top: 14px;
}

.gb-more > summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.gb-more > summary::-webkit-details-marker {
    display: none;
}

.gb-more > summary::before {
    content: "+";
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--line);
    color: var(--fg);
    font-size: .75rem;
}

.gb-more[open] > summary::before {
    content: "\2212";
}

.gb-more > summary:hover {
    color: var(--fg);
}

.gb-more-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
}

.gb-recs {
    border: 1px dashed var(--line);
    margin: 0;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.gb-recs legend {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--fg-dim);
    padding: 0 8px;
}

.gb-rec {
    display: grid;
    gap: 6px;
}

@media (min-width: 560px) {
    .gb-rec {
        grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 8px;
    }
}

.gb-rec__label {
    align-self: center;
}

.gb-hidden {
    position: absolute;
    left: -9999px;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

.gb-sign {
    border: 1px solid var(--line);
    background: var(--fill);
    color: var(--fill-text);
    padding: 13px;
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: background-color .15s linear, color .15s linear;
}

.gb-sign:not(:disabled):hover {
    background: var(--bg);
    color: var(--fg);
}

.gb-sign:disabled {
    background: var(--bg);
    color: var(--fg-dim);
    border-style: dashed;
    cursor: not-allowed;
}

/* the status line under the form. min-height keeps "signing..." from
   shoving the entries section down when it becomes an error. */
.gb-status {
    min-height: 1.2em;
    margin: 14px 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .6875rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.gb-status[data-kind="good"] {
    color: var(--bulb);
}

.gb-status[data-kind="bad"] {
    color: var(--fg);
    text-decoration: underline wavy;
}

/* --- the signatures ------------------------------------------------ */

.gb-empty {
    margin: 0;
    color: var(--fg-dim);
    font-style: italic;
}

.gb-entry {
    border-top: 1px solid var(--line);
    padding: 18px 0 22px;
}

.gb-entry-head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
}

.gb-swatch {
    width: 10px;
    height: 10px;
    border: 1px solid var(--line);
    flex: none;
    align-self: center;
}

.gb-entry-name {
    font-weight: bold;
}

.gb-entry-where,
.gb-entry-email,
.gb-entry-when {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.gb-entry-email:hover {
    color: var(--fg);
    border-bottom: 1px solid var(--fg);
}

/* pushes the timestamp to the far end of the header line */
.gb-entry-when {
    margin-left: auto;
}

.gb-entry-message {
    margin: 8px 0 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.gb-entry-links {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .875rem;
}

.gb-entry-links li {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.gb-kind {
    min-width: 3.5em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .625rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.gb-entry-links a,
.gb-entry-foot a {
    border-bottom: 1px solid var(--fg-faint);
}

.gb-entry-links a:hover,
.gb-entry-foot a:hover {
    border-bottom-color: var(--fg);
}

.gb-plain {
    color: var(--fg-dim);
}

.gb-entry-foot {
    margin-top: 8px;
    font-size: .8125rem;
}

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

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