/* custom.css — Bean Bean Makery
   A warm light theme layered over Bootstrap 5. Everything is driven by the
   variables in :root, so changing the palette is a one-place edit. */

:root {
    /* the palette — built around #8c4646, the logo's brick red */
    --bb-cream: #fbf5ef;
    --bb-shell: #f4e9e2;
    --bb-shell-deep: #ead9d1;
    --bb-ink: #3a2a28;
    --bb-ink-soft: #7c645f;
    --bb-clay: #8c4646;
    --bb-clay-deep: #703636;
    --bb-sage: #8b9b83;
    --bb-blush: #dcb0aa;
    --bb-butter: #e0c079;
    --bb-line: #e6d6cf;

    /* hand these to Bootstrap so its components come along for the ride */
    --bs-body-bg: var(--bb-cream);
    --bs-body-color: var(--bb-ink);
    --bs-secondary-color: var(--bb-ink-soft);
    --bs-tertiary-bg: var(--bb-shell);
    --bs-border-color: var(--bb-line);
    /* Bootstrap 5.3 resolves link colour as
       rgba(var(--bs-link-color-rgb), var(--bs-link-opacity)), so setting
       --bs-link-color alone does nothing — the -rgb pair is the one that
       actually applies. Keep both in sync with --bb-clay-deep / --bb-clay. */
    --bs-link-color: var(--bb-clay-deep);
    --bs-link-hover-color: var(--bb-clay);
    --bs-link-color-rgb: 112, 54, 54;
    --bs-link-hover-color-rgb: 140, 70, 70;
    --bs-emphasis-color: var(--bb-ink);
    --bs-border-radius: 0.75rem;
    --bs-border-radius-lg: 1.25rem;
}

body {
    font-family: 'Karla', system-ui, sans-serif;
    background-color: var(--bb-cream);
    color: var(--bb-ink);
    font-size: 1.02rem;
    line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-variation-settings: 'SOFT' 40, 'WONK' 1;
    letter-spacing: -0.01em;
}

::selection {
    background: var(--bb-blush);
    color: var(--bb-ink);
}

/* ---------- nav ---------- */

.navbar {
    background-color: transparent;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.navbar-brand {
    padding-top: 0;
    padding-bottom: 0;
}

.brand-logo {
    display: block;
    height: 56px;
    width: auto;
    transition: transform 0.25s ease;
}

/* the logo tips its hat, in place of the old wave-text hover */
.navbar-brand:hover .brand-logo,
.navbar-brand:focus-visible .brand-logo {
    transform: rotate(-3deg) scale(1.03);
}

@media (max-width: 575.98px) {
    .brand-logo { height: 38px; }
}

.navbar .nav-link {
    color: var(--bb-ink-soft);
    font-size: 0.98rem;
    padding-inline: 0.85rem;
    transition: color 0.2s ease;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--bb-clay-deep);
}

.navbar .nav-link.active {
    color: var(--bb-ink);
    text-decoration: underline;
    text-decoration-color: var(--bb-clay);
    text-decoration-thickness: 2px;
    text-underline-offset: 5px;
}

.navbar-toggler {
    border-color: var(--bb-line);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(194, 113, 79, 0.25);
}

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

/* On the home page the nav floats over the hero so the wash runs to the very
   top of the page with no seam under the navbar. */
.is-home .navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 5;
}

.is-home .hero {
    padding-top: 8.5rem;
}

/* Because that nav floats, its open mobile menu needs its own surface —
   otherwise it lands unreadably on top of the hero text. */
@media (max-width: 991.98px) {
    .is-home .navbar-collapse.show,
    .is-home .navbar-collapse.collapsing {
        background-color: var(--bb-cream);
        border: 1px solid var(--bb-line);
        border-radius: var(--bs-border-radius);
        padding: 0.5rem 1rem;
        margin-top: 0.75rem;
        box-shadow: 0 12px 28px rgba(58, 46, 38, 0.12);
    }
}

.hero {
    padding: 4rem 0 3.5rem;
    background:
        radial-gradient(ellipse 70% 55% at 50% 0%, rgba(220, 176, 170, 0.34), transparent 70%),
        radial-gradient(ellipse 55% 45% at 12% 25%, rgba(139, 155, 131, 0.18), transparent 70%),
        radial-gradient(ellipse 55% 45% at 88% 20%, rgba(224, 192, 121, 0.20), transparent 70%);
}

.hero-title {
    margin-bottom: 0;
}

.hero-logo {
    display: block;
    width: min(100%, 26rem);
    height: auto;
    margin: 0 auto;
}

/* ---------- buttons ---------- */

.btn-clay,
.btn-quiet {
    border-radius: 999px;
    padding: 0.6rem 1.5rem;
    font-weight: 600;
    font-size: 0.98rem;
    transition: transform 0.15s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-clay {
    background-color: var(--bb-clay);
    border: 1px solid var(--bb-clay);
    color: #fff;
}

.btn-clay:hover,
.btn-clay:focus {
    background-color: var(--bb-clay-deep);
    border-color: var(--bb-clay-deep);
    color: #fff;
    transform: translateY(-2px);
}

.btn-quiet {
    background-color: transparent;
    border: 1px solid var(--bb-line);
    color: var(--bb-ink);
}

.btn-quiet:hover,
.btn-quiet:focus {
    background-color: var(--bb-shell);
    border-color: var(--bb-shell-deep);
    color: var(--bb-ink);
    transform: translateY(-2px);
}

.link-quiet {
    color: var(--bb-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--bb-line);
    padding-bottom: 2px;
}

.link-quiet:hover {
    color: var(--bb-clay-deep);
    border-bottom-color: var(--bb-clay);
}

/* ---------- sections & page heads ---------- */

.section {
    padding: 3.5rem 0 1rem;
}

.section-title {
    font-size: 1.6rem;
    margin-bottom: 1.75rem;
}

.note-band {
    margin-top: 2rem;
    padding: 3rem 1.5rem;
    background-color: var(--bb-shell);
    border-radius: var(--bs-border-radius-lg);
}

.note-body p:last-child {
    margin-bottom: 0;
}

.page-head {
    padding: 2rem 0 2.5rem;
}

.page-title {
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    margin-bottom: 0.6rem;
}

.page-intro {
    font-size: 1.1rem;
    color: var(--bb-ink-soft);
    max-width: 40rem;
    margin-bottom: 0;
}

/* ---------- work cards ---------- */

.work-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    background-color: var(--bb-shell);
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.work-card:hover,
.work-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--bb-shell-deep);
    box-shadow: 0 12px 28px rgba(58, 46, 38, 0.10);
    color: inherit;
}

.wc-art {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.wc-art picture,
.card-art-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wc-body {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1.1rem 1.25rem 1.35rem;
}

.wc-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 600;
}

.wc-teaser {
    color: var(--bb-ink-soft);
    font-size: 0.95rem;
    line-height: 1.5;
}

/* ---------- placeholder tiles (shown until real photos land) ---------- */

.placeholder-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 9rem;
    background-color: var(--bb-shell-deep);
    background-image: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.55), transparent 55%);
}

/* One source of truth for the category tints — used by both the emoji
   placeholder tiles and the illustrated category cards. */
[data-tone="clay"]   { --tone: #dbb2a0; }
[data-tone="sage"]   { --tone: #ccd5c5; }
[data-tone="blush"]  { --tone: #f0d2d2; }
[data-tone="butter"] { --tone: #f0dfae; }
[data-tone="sky"]    { --tone: #c9d6de; }

.placeholder-tile[data-tone] {
    background-color: var(--tone, var(--bb-shell-deep));
}

.placeholder-emoji {
    font-size: 2.6rem;
    filter: drop-shadow(0 2px 4px rgba(58, 46, 38, 0.12));
}

/* ---------- galleries ---------- */

.breadcrumb {
    padding-top: 1rem;
    margin-bottom: 0;
}

.breadcrumb a {
    color: var(--bb-ink-soft);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--bb-clay-deep);
}

/* warm backdrop for the lightbox instead of flat black */
.pswp {
    --pswp-bg: #3a2e26;
}

.empty-note {
    color: var(--bb-ink-soft);
    padding: 3rem 0;
    text-align: center;
}

/* ---------- prose ---------- */

.prose {
    font-size: 1.05rem;
}

.prose h2, .prose h3, .prose h4 {
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
}

.prose a {
    color: var(--bb-clay-deep);
    text-decoration-color: var(--bb-blush);
    text-underline-offset: 3px;
}

.prose ul, .prose ol {
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: 0.4rem;
}

.prose blockquote {
    border-left: 3px solid var(--bb-blush);
    padding-left: 1.25rem;
    margin: 1.75rem 0;
    color: var(--bb-ink-soft);
    font-style: italic;
}

.prose hr {
    border-color: var(--bb-line);
    opacity: 1;
    margin: 2.5rem 0;
}

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

.site-footer {
    margin-top: 5rem;
    padding: 2.5rem 0;
    border-top: 1px solid var(--bb-line);
    color: var(--bb-ink-soft);
    font-size: 0.92rem;
}


/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- prices & buy buttons ---------- */

.piece-price {
    font-weight: 700;
    color: var(--bb-ink);
}

.piece-price.is-sold {
    text-decoration: line-through;
    color: var(--bb-ink-soft);
    font-weight: 500;
}

.btn-buy {
    display: inline-block;
    margin-left: auto;
    background-color: var(--bb-clay);
    color: #fff;
    border: 1px solid var(--bb-clay);
    border-radius: 999px;
    padding: 0.25rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn-buy:hover,
.btn-buy:focus {
    background-color: var(--bb-clay-deep);
    border-color: var(--bb-clay-deep);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- shop page cards ---------- */

.shop-available {
    margin-bottom: 3.5rem;
}

.shop-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--bb-shell);
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius-lg);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shop-card:hover {
    border-color: var(--bb-shell-deep);
    box-shadow: 0 12px 28px rgba(58, 42, 40, 0.10);
}

.shop-card-art {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.shop-card-art picture,
.shop-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.shop-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.15rem 1.2rem;
}

.shop-card-title {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.08rem;
    font-weight: 600;
    margin-bottom: 0;
}

/* The title reads as a heading, not a link — colour and underline only on hover. */
.shop-card-title a {
    color: var(--bb-ink);
    text-decoration: none;
}

.shop-card-title a:hover,
.shop-card-title a:focus-visible {
    color: var(--bb-clay-deep);
    text-decoration: underline;
    text-decoration-color: var(--bb-clay);
    text-underline-offset: 3px;
}

.shop-card-from {
    font-size: 0.85rem;
    margin-bottom: 0;
}

.shop-card-from a {
    color: var(--bb-ink-soft);
    text-decoration: none;
}

.shop-card-from a:hover {
    color: var(--bb-clay-deep);
}

.shop-card-foot {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.7rem;
}

/* ---------- gallery: piece cards (work only, no commerce) ---------- */

.piece-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.piece-card-art {
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    background-color: var(--bb-shell);
}

.piece-card-art picture,
.piece-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.piece-card:hover .piece-card-img,
.piece-card:focus-visible .piece-card-img {
    transform: scale(1.04);
}

.piece-card-title {
    display: block;
    margin-top: 0.55rem;
    font-size: 0.92rem;
    color: var(--bb-ink-soft);
    transition: color 0.2s ease;
}

.piece-card:hover .piece-card-title,
.piece-card:focus-visible .piece-card-title {
    color: var(--bb-clay-deep);
}

/* ---------- piece detail page ---------- */

/* The photo mosaic: a tight 4-up grid with the lead image taking a 2x2 cell
   and everything else 1x1 around it. Cells are square, so images are
   centre-cropped here — the uncropped photo is one click away in PhotoSwipe. */
.piece-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
}

.piece-photo {
    margin: 0;
    aspect-ratio: 1;
}

.piece-photo--lead {
    grid-column: span 2;
    grid-row: span 2;
}

.piece-photo a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--bs-border-radius);
    overflow: hidden;
}

.piece-photo picture {
    display: block;
    width: 100%;
    height: 100%;
}

.piece-photo-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.piece-photo a:hover .piece-photo-img {
    transform: scale(1.04);
}

.piece-photo--empty .placeholder-tile {
    aspect-ratio: 1;
    border-radius: var(--bs-border-radius);
}

/* Two across on phones — the lead still spans the full width. */
@media (max-width: 575.98px) {
    .piece-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.45rem;
    }
}

.piece-description {
    padding-top: 1.5rem;
}

/* The buy note is deliberately quiet and comes after the description —
   the work leads, the transaction follows. */
.buy-note {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    background-color: var(--bb-shell);
    border-radius: var(--bs-border-radius-lg);
}

.buy-note-line {
    margin-bottom: 0.85rem;
    font-size: 1rem;
}

.buy-note-small {
    margin-top: 0.85rem;
    margin-bottom: 0;
    font-size: 0.82rem;
    color: var(--bb-ink-soft);
}

.buy-note--sold .buy-note-line {
    color: var(--bb-ink-soft);
}

.btn-buy--lg {
    padding: 0.5rem 1.4rem;
    font-size: 0.95rem;
    margin-left: 0;
}

.piece-back {
    margin-top: 2.5rem;
    font-size: 0.9rem;
}

/* ---------- photo stack (about page) ---------- */

/* a little pile of photos — first in front, the rest tucked behind */
.photo-stack {
    position: relative;
    max-width: min(21rem, 100%);
    /* headroom for the back photo, which sits well above the front one */
    margin: 12rem auto 0;
}

.photo-frame {
    position: relative;
    max-width: 21rem;
    margin: 0;
    padding: 0.6rem;
    background-color: #fffdfa;
    border-radius: 0.9rem;
    box-shadow: 0 12px 30px rgba(58, 42, 40, 0.15);
    transform: rotate(2.2deg);
    transition: transform 0.4s ease;
}

/* straightens when you look at it */
.photo-frame:hover {
    transform: rotate(0deg);
}

.photo-frame picture,
.photo-frame-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
}

.photo-frame--front {
    position: relative;
    z-index: 2;
}

.photo-frame--back {
    position: absolute;
    z-index: 1;
    top: -13rem;
    right: -6rem;
    width: 82%;
    transform: rotate(-7deg);
}

.photo-frame--back:hover {
    transform: rotate(-3deg);
}

.photo-frame-caption {
    margin-top: 0.6rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--bb-ink-soft);
}

@media (max-width: 991.98px) {
    .photo-stack {
        margin-top: 3rem;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .photo-frame--back {
        right: -1.5rem;
        width: 76%;
    }
}

@media (max-width: 575.98px) {
    .photo-frame--back {
        top: -7rem;
        right: 0;
        width: 74%;
    }
}

/* ---------- say hi form ---------- */

.say-hi-form {
    max-width: 34rem;
}

.form-row {
    margin-bottom: 1.35rem;
}

.form-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 600;
    font-size: 0.95rem;
}

.say-hi-form .form-control,
.say-hi-form .form-select {
    background-color: #fff;
    border: 1px solid var(--bb-line);
    border-radius: var(--bs-border-radius);
    color: var(--bb-ink);
    padding: 0.6rem 0.85rem;
    font-family: inherit;
    font-size: 1rem;
}

.say-hi-form .form-control:focus,
.say-hi-form .form-select:focus {
    border-color: var(--bb-clay);
    box-shadow: 0 0 0 0.2rem rgba(140, 70, 70, 0.15);
}

.say-hi-form textarea.form-control {
    resize: vertical;
    min-height: 9rem;
}

.form-hint {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.83rem;
    color: var(--bb-ink-soft);
}

.say-hi-form .btn-clay {
    border: 0;
}

/* The honeypot: hidden from people, still filled in by naive bots.
   Kept out of the accessibility tree and the tab order too, so screen-reader
   users don't trip the trap. */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-aside h2 {
    font-size: 1.15rem;
    padding-top: 0;
}

.contact-aside h2:not(:first-child) {
    padding-top: 1.75rem;
}

/* ---------- illustrated category cards ---------- */

/* The drawings are ink on white paper. Multiply keeps the ink and lets the
   white drop away, so the category tint shows through instead of a white box.
   `isolation` keeps the blend inside the tile rather than reaching the page. */
.card-art-tile {
    display: block;
    width: 100%;
    height: 100%;
    background-color: var(--tone, var(--bb-shell-deep));
    isolation: isolate;
}

.card-art-tile picture {
    display: block;
    width: 100%;
    height: 100%;
}

.card-art-tile .card-art-img {
    mix-blend-mode: multiply;
    /* contain, not cover: these are square drawings in a 4:3 card and cropping
       would cut the bean's head off. The tint fills the rest. */
    object-fit: contain;
    padding: 0.4rem;
}

/* Fallback for the rare browser without mix-blend-mode: the drawing still
   shows, just on white rather than tinted. */
@supports not (mix-blend-mode: multiply) {
    .card-art-tile .card-art-img { mix-blend-mode: normal; }
}

/* ---------- home intro ---------- */

.home-intro {
    padding-top: 1rem;
    text-align: center;
    font-size: 1.12rem;
    line-height: 1.7;
    color: var(--bb-ink-soft);
}

.home-intro p:last-child {
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .home-intro {
        font-size: 1.05rem;
        text-align: left;
    }
}

/* ---------- piece video ---------- */

/* The video sits in the mosaic as an ordinary square tile showing its poster
   frame; the play badge marks it as a clip. It only plays in the viewer. */
.piece-photo--video a {
    position: relative;
}

.play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.play-badge svg {
    width: 3.25rem;
    height: 3.25rem;
    filter: drop-shadow(0 2px 8px rgba(58, 42, 40, 0.35));
    transition: transform 0.25s ease;
}

.play-badge circle {
    fill: rgba(251, 245, 239, 0.85);
}

.play-badge path {
    fill: var(--bb-clay);
}

.piece-photo--video a:hover .play-badge svg,
.piece-photo--video a:focus-visible .play-badge svg {
    transform: scale(1.08);
}

@media (max-width: 575.98px) {
    .play-badge svg { width: 2.5rem; height: 2.5rem; }
}

/* the video slide inside PhotoSwipe */
.pswp-video {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.pswp-video video {
    max-width: 100%;
    max-height: 100%;
    border-radius: var(--bs-border-radius);
    background-color: #000;
}