/* ========================================================================== J. A. Pippett Sculpture - site.css Palette: warm near-black, aged-bronze gold, cream serif on parchment ========================================================================== */ /* Cormorant Garamond is loaded via in each page so the cream-serif fallback paints first and the web font swaps in. The @import below is a defense-in-depth in case a page is opened without that preload pair; font-display: swap keeps text visible during load. */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Montserrat:wght@400;500;600&display=swap'); :root { /* Surfaces - lifted slightly from near-black to a warm espresso (Jun 2026) */ --bg: #1e1812; /* warm espresso, primary canvas */ --bg-elev: #29211a; /* card / panel surface */ --bg-deep: #161109; /* deepest, for hero gutters */ --hairline: #3a3024; /* subtle dividers */ /* Ink - bumped for higher contrast against the warm-near-black canvas */ --cream: #F4EBCF; /* primary text */ --cream-soft: #E1D5B3; /* body / supporting */ --cream-mute: #B5A983; /* captions, metadata labels - was #8e8569, now AAA */ /* Accents */ --gold: #B08D57; /* aged bronze, primary accent */ --gold-bright: #CDAE7C; /* hover, highlight */ --gold-lite: #E6CF93; /* brighter accent for status + edition numbers */ --gold-deep: #8C6E3F; /* pressed, deep bronze */ /* Type */ --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; /* Spacing scale */ --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --s-9: 6.5rem; --s-10: 9rem; /* Layout */ --measure: 60ch; --content-max: 1240px; --gutter: clamp(1.25rem, 4vw, 3rem); --header-h: 5.25rem; /* approx sticky header height, used to offset the sidebar */ --sidebar-w: 230px; /* left section sidebar (desktop only) */ } /* ----------------------------------------------------- reset / base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--cream); font-family: var(--serif); font-weight: 400; font-size: 20px; /* bumped from 18px for older readers */ line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img, svg { max-width: 100%; height: auto; display: block; } a { color: var(--gold); text-decoration: none; transition: color .25s ease; } a:hover, a:focus-visible { color: var(--gold-bright); } a:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 2px; } button { font: inherit; cursor: pointer; } ::selection { background: var(--gold); color: var(--bg); } /* ----------------------------------------------------- typography */ h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; letter-spacing: .005em; color: var(--cream); margin: 0 0 var(--s-4); } h1 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); line-height: 1.05; font-weight: 300; } h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); line-height: 1.15; font-weight: 400; } h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.25; font-weight: 500; } h4 { font-size: 1.65rem; letter-spacing: .1em; text-transform: uppercase; font-family: var(--sans); font-weight: 500; color: var(--gold-bright); } p { margin: 0 0 var(--s-5); max-width: var(--measure); color: var(--cream-soft); } p.lead { font-size: 1.75rem; color: var(--cream); font-style: italic; max-width: 56ch; line-height: 1.45; } .eyebrow { font-family: var(--sans); font-size: 1.4rem; /* large readable label */ letter-spacing: .12em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: var(--s-4); display: inline-block; font-weight: 500; } hr.rule { border: 0; height: 1px; background: linear-gradient(to right, transparent, var(--gold-deep) 30%, var(--gold-deep) 70%, transparent); margin: var(--s-8) auto; max-width: 220px; } /* ----------------------------------------------------- layout */ .wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); } .wrap--narrow { max-width: 780px; } /* About bio - larger, brighter, more readable body copy */ .about .wrap--narrow > p:not(.lead) { font-size: 1.6rem; line-height: 1.9; color: var(--cream); max-width: 66ch; margin-left: auto; margin-right: auto; } .wrap--wide { max-width: 1480px; } section { padding: var(--s-9) 0; } section.tight { padding: var(--s-7) 0; } /* ----------------------------------------------------- header / nav */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(30, 24, 18, .92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--hairline); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(1.5rem, 4vw, 3.5rem); padding: var(--s-4) var(--gutter); max-width: var(--content-max); margin: 0 auto; } .brand { font-family: var(--serif); font-size: 2.3rem; font-weight: 500; letter-spacing: .08em; color: var(--cream); white-space: nowrap; flex-shrink: 0; } .brand:hover { color: var(--cream); } .brand .dot { color: var(--gold-bright); } .nav { display: flex; gap: clamp(.85rem, 1.6vw, 1.6rem); align-items: center; flex-wrap: wrap; justify-content: flex-end; } .nav a { font-family: var(--sans); font-size: 1.02rem; letter-spacing: .085em; text-transform: uppercase; color: var(--cream); font-weight: 500; white-space: nowrap; } .nav a.is-active, .nav a:hover { color: var(--gold-bright); } .nav-toggle { display: none; background: transparent; border: 1px solid var(--hairline); color: var(--cream); padding: .65rem 1rem; border-radius: 2px; font-family: var(--sans); font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; } @media (max-width: 760px) { .nav { display: none; } .nav.is-open { display: flex; flex-direction: column; align-items: flex-start; position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elev); border-bottom: 1px solid var(--hairline); padding: var(--s-5) var(--gutter); gap: var(--s-4); } .nav-toggle { display: inline-block; } } /* ----------------------------------------------------- hero */ .hero { background: var(--bg-deep); padding: 0; position: relative; border-bottom: 1px solid var(--hairline); } .hero__media { display: block; margin: 0 auto; width: 100%; max-width: 1480px; height: auto; } .hero__caption { text-align: center; padding: var(--s-7) var(--gutter) var(--s-8); max-width: 760px; margin: 0 auto; } .hero__caption .eyebrow { margin-bottom: var(--s-3); } .hero__caption h1 { font-style: italic; font-weight: 300; margin-bottom: var(--s-5); } /* ----------------------------------------------------- buttons */ .btn { display: inline-block; font-family: var(--sans); font-size: 1.25rem; /* large readable button */ letter-spacing: .14em; text-transform: uppercase; padding: 1.15rem 2.2rem; border: 1px solid var(--gold); color: var(--gold-bright); background: transparent; border-radius: 1px; transition: all .25s ease; font-weight: 500; } .btn:hover, .btn:focus-visible { background: var(--gold); color: var(--bg); border-color: var(--gold); } .btn--solid { background: var(--gold); color: var(--bg); } .btn--solid:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--bg); } .btn--ghost { border-color: var(--hairline); color: var(--cream-soft); } .btn--ghost:hover { border-color: var(--gold); color: var(--gold); background: transparent; } /* ----------------------------------------------------- artwork grid */ .grid { display: flex; flex-wrap: wrap; justify-content: center; /* a lone or short last row centers itself */ gap: var(--s-7) var(--s-6); } .grid > * { flex: 0 1 340px; } .grid--wide > * { flex: 0 1 380px; } .card { display: block; color: var(--cream); text-align: center; } .card:hover { color: var(--cream); } .card__media { background: transparent; padding: 0; border: 0; transition: transform .4s ease; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Buckles are square coins - square media keeps titles close, no wasted space */ .grid--buckles .card__media { aspect-ratio: 1 / 1; } .grid--buckles .card__title { margin-top: var(--s-3); } .card__media img { width: 100%; height: 100%; object-fit: contain; transition: transform .8s cubic-bezier(.2,.7,.2,1); } .card:hover .card__media { border-color: var(--gold-deep); } .card:hover .card__media img { transform: scale(1.03); } .card__title { margin: var(--s-4) 0 var(--s-2); font-size: 1.85rem; font-weight: 400; letter-spacing: .015em; color: var(--cream); } .card__meta { font-family: var(--sans); font-size: 1.02rem; letter-spacing: .09em; text-transform: uppercase; color: var(--cream-mute); font-weight: 400; } .card__status--available { color: var(--gold-bright); } .card__status--sold { color: var(--cream-soft); font-style: italic; } .card__status--inprog { color: var(--cream-soft); font-style: italic; } .card__pending { display: inline-block; margin-top: var(--s-2); font-family: var(--sans); font-size: 1.15rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream-soft); font-style: italic; } /* ----------------------------------------------------- section heading */ .section-head { text-align: center; margin-bottom: var(--s-8); } .section-head .eyebrow { margin-bottom: var(--s-3); } .section-head h2 { margin-bottom: var(--s-3); } .section-head p { margin-left: auto; margin-right: auto; color: var(--cream-soft); } /* ----------------------------------------------------- artwork detail */ .artwork { padding-top: var(--s-3); } /* piece title sits above the photo so the name and image read in one frame */ .artwork__head { text-align: center; padding: var(--s-3) var(--gutter) var(--s-2); } .artwork__head .eyebrow { margin-bottom: var(--s-1); } .artwork__head .artwork__title { margin: 0; } .artwork__hero { background: var(--bg-deep); padding: var(--s-3) var(--gutter); display: flex; justify-content: center; border-bottom: 1px solid var(--hairline); } .artwork__hero img { height: 60vh; width: 100%; max-width: 820px; object-fit: contain; } .artwork__body { display: flex; flex-direction: column-reverse; /* specs sit above, inquire button below */ align-items: center; gap: var(--s-6); padding: var(--s-5) var(--gutter) var(--s-7); max-width: 540px; margin: 0 auto; } .artwork__body > aside { width: 100%; } .artwork__body > div:first-child { text-align: center; } .artwork__title { font-style: italic; font-weight: 300; } .artwork__meta { border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: var(--s-5) 0; margin: var(--s-6) 0; display: grid; grid-template-columns: max-content 1fr; column-gap: var(--s-6); row-gap: var(--s-3); } .artwork__meta { font-size: 1.5rem; line-height: 1.55; } .artwork__meta dt { font-family: var(--sans); font-size: 1.15rem; letter-spacing: .16em; text-transform: uppercase; color: var(--cream-mute); align-self: center; font-weight: 500; } .artwork__meta dd { margin: 0; color: var(--cream); font-size: 1.5rem; } .artwork__meta dd.edition-grid { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s-5); row-gap: .12rem; align-items: baseline; width: 100%; line-height: 1.18; } .artwork__meta dd.edition-grid > span:nth-child(even) { text-align: right; color: var(--gold-lite); font-variant-numeric: tabular-nums; white-space: nowrap; } .artwork__thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-3); margin-top: var(--s-5); } .artwork__thumbs a { display: block; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--hairline); background: var(--bg-elev); } .artwork__thumbs img { width: 100%; height: 100%; object-fit: cover; } .artwork__thumbs a:hover { border-color: var(--gold-deep); } /* ----------------------------------------------------- additional views (per-piece) */ .artwork__views { padding: var(--s-7) 0 var(--s-4); border-top: 1px solid var(--hairline); } .artwork__views h4 { margin-bottom: var(--s-7); } .artwork__views-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 240px)); justify-content: center; gap: var(--s-6); max-width: 1100px; margin: 0 auto; } .artwork__views-grid a { display: block; text-align: center; color: var(--cream-soft); transition: color .25s ease; } .artwork__views-grid a:hover { color: var(--gold-bright); } .artwork__views-grid img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: transparent; border: 0; margin-bottom: var(--s-3); } .artwork__views-grid a:hover img { border-color: var(--gold-deep); } .artwork__thumb-label { display: block; font-family: var(--sans); font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; } /* ----------------------------------------------------- contact form */ .form { max-width: 640px; margin: 0 auto; } .form__row { margin-bottom: var(--s-5); } .form label { display: block; font-family: var(--sans); font-size: 1.25rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cream); margin-bottom: var(--s-3); font-weight: 500; } .form input, .form textarea, .form select { width: 100%; background: transparent; border: 1px solid var(--cream-mute); color: var(--cream); font-family: var(--serif); font-size: 1.35rem; padding: 1.05rem 1.2rem; border-radius: 1px; transition: border-color .25s ease; } .form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--gold); } .form textarea { min-height: 160px; resize: vertical; } .form .btn { margin-top: var(--s-3); } /* ----------------------------------------------------- footer */ .site-footer { border-top: 1px solid var(--hairline); padding: var(--s-7) var(--gutter) var(--s-6); text-align: center; color: var(--cream-soft); font-family: var(--serif); font-size: 1.45rem; letter-spacing: .08em; } .site-footer a { color: var(--cream); } .site-footer a:hover { color: var(--gold-bright); } .site-footer__seal { display: block; width: 66px; height: 66px; margin: 0 auto var(--s-5); opacity: .92; } .site-footer__rule { width: 60px; height: 1px; background: var(--gold); margin: 0 auto var(--s-5); } .site-footer__nav { display: flex; justify-content: center; gap: var(--s-5); flex-wrap: wrap; margin-bottom: var(--s-5); font-family: var(--serif); font-size: 1.6rem; letter-spacing: .02em; text-transform: none; font-weight: 500; } /* ----------------------------------------------------- press list */ .press-list { list-style: none; padding: 0; margin: 0; max-width: 760px; margin-inline: auto; } .press-list li { border-bottom: 1px solid var(--hairline); padding: var(--s-6) 0; display: grid; grid-template-columns: 7rem 1fr; gap: var(--s-5); align-items: baseline; } .press-list .year { font-family: var(--sans); font-size: 1.45rem; letter-spacing: .1em; color: var(--gold-bright); font-weight: 500; } .press-list .item h3 { font-size: 1.75rem; margin-bottom: var(--s-2); } .press-list .item p { margin: 0; font-size: 1.4rem; } .press-figs { display: flex; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); } .press-figs a { flex: 0 1 240px; display: block; } .press-figs img { width: 100%; height: auto; display: block; border: 1px solid var(--hairline); background: var(--bg-elev); cursor: zoom-in; transition: border-color .25s ease; } .press-figs a:hover img { border-color: var(--gold-deep); } .press-figcap { font-family: var(--sans); font-size: 1.3rem; letter-spacing: .02em; color: var(--cream-soft); margin: var(--s-3) 0 0; } .awards-list { list-style: none; padding: 0; margin: var(--s-5) auto 0; max-width: 640px; text-align: center; } .awards-list li { font-family: var(--serif); font-size: 1.6rem; color: var(--cream); line-height: 1.45; padding: var(--s-4) 0; border-bottom: 1px solid var(--hairline); } .awards-list li:last-child { border-bottom: 0; } /* ----------------------------------------------------- utilities */ .text-center { text-align: center; } .italic { font-style: italic; } .muted { color: var(--cream-mute); } /* section-intro descriptions - keep legible (brighter + larger) for all readers */ .muted.text-center { color: var(--cream-soft); font-size: 1.3rem; line-height: 1.6; } .gold { color: var(--gold-lite); } .mt-7 { margin-top: var(--s-7); } .mb-7 { margin-bottom: var(--s-7); } .cluster { display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: center; } /* ========================================================================== Mobile-specific tuning (≤760px / ≤540px) ========================================================================== */ @media (max-width: 760px) { body { font-size: 19px; line-height: 1.6; } h1 { font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1.08; } h2 { font-size: clamp(1.6rem, 6vw, 2.1rem); } h3 { font-size: clamp(1.2rem, 5vw, 1.45rem); } h4 { font-size: 1.4rem; letter-spacing: .08em; } p.lead { font-size: 1.4rem; line-height: 1.45; } .eyebrow { font-size: 1.15rem; letter-spacing: .08em; } .brand { font-size: 1.5rem; } .nav a { font-size: 1.2rem; letter-spacing: .08em; } .btn { font-size: 1.1rem; letter-spacing: .1em; padding: 1rem 1.6rem; } .card__title { font-size: 1.55rem; } .card__meta { font-size: .92rem; letter-spacing: .07em; } .card__pending { font-size: 1rem; letter-spacing: .08em; } .artwork__meta dt { font-size: 1.05rem; letter-spacing: .07em; } .artwork__meta dd { font-size: 1.15rem; } .artwork__meta { font-size: 1.15rem; } /* breathing room above the inquire button on mobile */ .artwork__body .btn { margin-top: var(--s-5); } /* Hero - on mobile the photo fills the screen width (no letterboxing) */ .artwork__hero { padding: var(--s-4) var(--gutter); } .artwork__hero img{ width: 100%; height: auto; max-height: none; object-fit: contain; } .hero__caption { padding: var(--s-6) var(--gutter) var(--s-7); } /* Press list - stack year above title on narrow screens */ .press-list .year { font-size: 1.3rem; } .press-list .item h3 { font-size: 1.4rem; } .press-list .item p { font-size: 1.25rem; } /* Form - large enough to avoid iOS zoom-in on focus, not larger */ .form input, .form textarea, .form select { font-size: 1.2rem; padding: .9rem 1rem; } .form label { font-size: 1.1rem; letter-spacing: .08em; } /* Site footer */ .site-footer { font-size: 1.05rem; } .site-footer__nav { font-size: 1.05rem; gap: var(--s-4); letter-spacing: .08em; } /* Additional-views thumbnails - single column reads cleaner on phones */ .artwork__views-grid { gap: var(--s-5); } .artwork__thumb-label { font-size: 1rem; letter-spacing: .08em; } section { padding: var(--s-7) 0; } } @media (max-width: 540px) { /* Press list: stack year above title */ .press-list li { grid-template-columns: 1fr; gap: var(--s-2); padding: var(--s-5) 0; } .press-list .year { font-size: 1.15rem; } /* Sculpture catalog - let the grid relax to one comfortable column */ .grid { grid-template-columns: 1fr; gap: var(--s-6); } .grid--wide { grid-template-columns: 1fr; } .card__media { aspect-ratio: 1 / 1; } } /* Mobile nav slide-out - replace the basic stack with a centered, breathable menu that has its own backdrop tint and comfortable thumb-tap padding. */ @media (max-width: 760px) { .nav.is-open { align-items: center; text-align: center; background: rgba(30, 24, 18, .98); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); padding: var(--s-6) var(--gutter) var(--s-7); gap: 0; box-shadow: 0 12px 24px -12px rgba(0,0,0,.6); } .nav.is-open a { display: block; width: 100%; padding: 1.2rem 0; border-bottom: 1px solid var(--hairline); font-size: 1.35rem; letter-spacing: .1em; color: var(--cream); } .nav.is-open a:last-child { border-bottom: 0; } .nav.is-open a.is-active { color: var(--gold-bright); } .nav-toggle:hover, .nav-toggle:focus-visible { border-color: var(--gold); color: var(--gold-bright); } } /* ----------------------------------------------------- lightbox (detail images) */ .artwork__hero img { cursor: zoom-in; } .artwork__views-grid a { cursor: zoom-in; } .lb-overlay { position: fixed; inset: 0; background: rgba(12,9,6,.95); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 2rem; cursor: zoom-out; } .lb-overlay.is-open { display: flex; } .lb-overlay img { max-width: 94vw; max-height: 88vh; width: auto; height: auto; } .lb-close { position: fixed; top: 1rem; right: 1.25rem; background: transparent; border: 1px solid var(--gold); color: var(--gold-bright); font-family: var(--sans); font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; padding: .55rem 1.1rem; border-radius: 1px; cursor: pointer; } .lb-close:hover, .lb-close:focus-visible { background: var(--gold); color: var(--bg); } .artwork__views + section { padding-top: var(--s-2); } .artwork__views + section hr.rule { margin: var(--s-4) auto; } /* Tighten the bottom nav block on all detail pages (incl. hero-only) */ .artwork > section:last-of-type { padding-top: var(--s-4); } .artwork > section:last-of-type hr.rule { margin-top: var(--s-5); } /* Detail body: centered spec block with the inquire button beneath it */ .artwork__body > div:first-child { align-self: center; } .artwork__body .artwork__meta { margin: 0; } .artwork__body .btn--solid { margin-top: 0; } .artwork__body .lead { margin: 0 auto var(--s-4); } /* ----------------------------------------------------- in-frame photo carousel */ .carousel { position: relative; width: 100%; max-width: 820px; } .carousel__viewport { overflow: hidden; } .carousel__track { display: flex; transition: transform .45s ease; } .carousel__slide { flex: 0 0 100%; display: flex; justify-content: center; } .carousel__slide img { height: 60vh; width: 100%; max-width: 820px; object-fit: contain; cursor: zoom-in; } .carousel__slide video { height: 60vh; width: 100%; max-width: 820px; object-fit: contain; background: #000; outline: none; } .carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 4.2rem; height: 5.95rem; display: flex; align-items: center; justify-content: center; background: rgba(12, 9, 6, .42); border: 1px solid var(--hairline); color: var(--cream); font-family: var(--serif); font-size: 3.4rem; line-height: 1; cursor: pointer; z-index: 3; transition: background .25s ease, color .25s ease, border-color .25s ease; } .carousel__nav:hover, .carousel__nav:focus-visible { background: rgba(12, 9, 6, .82); color: var(--gold-bright); border-color: var(--gold); } .carousel__nav--prev { left: .6rem; } .carousel__nav--next { right: .6rem; } .carousel[data-single] .carousel__nav { display: none; } /* ----------------------------------------------------- left section sidebar (desktop) */ .site-sidebar { display: none; } @media (min-width: 768px) { /* sidebar carries navigation on desktop, so the top menu links are redundant */ .site-header .nav { display: none; } .site-sidebar { display: block; position: fixed; top: var(--header-h); left: 0; width: var(--sidebar-w); height: calc(100vh - var(--header-h)); padding: var(--s-7) var(--s-6); border-right: 1px solid var(--hairline); background: rgba(22, 17, 9, .45); overflow-y: auto; z-index: 40; } .site-sidebar__nav { display: flex; flex-direction: column; gap: var(--s-5); } .site-sidebar__nav a { font-family: var(--serif); font-size: 1.6rem; letter-spacing: .015em; color: var(--cream); font-weight: 500; padding-left: var(--s-3); border-left: 2px solid transparent; transition: color .25s ease, border-color .25s ease; } .site-sidebar__nav a.sub { font-size: 1.15rem; padding-left: calc(var(--s-3) + 1.25rem); color: var(--cream-soft); } .site-sidebar__nav a:hover, .site-sidebar__nav a:focus-visible, .site-sidebar__nav a.is-active { color: var(--gold-bright); border-left-color: var(--gold); } /* shift page content right of the sidebar, only on pages that have one */ body:has(.site-sidebar) main, body:has(.site-sidebar) .site-footer { margin-left: var(--sidebar-w); } /* home splash has no header bar, so its sidebar runs full height from the top */ body:has(.portal) .site-sidebar { top: 0; height: 100vh; display: flex; align-items: flex-start; padding-top: 10vh; } body:has(.portal) .site-sidebar__nav { width: 100%; } } /* on roomy screens, let the home hero center in the full viewport for balance */ @media (min-width: 1200px) { body:has(.portal) main { margin-left: 0; } } /* ----------------------------------------------------- photo galleries (Foundry, Buckle Gallery, Creature Shop) */ .gallery { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-7) var(--s-6); max-width: var(--content-max); margin: var(--s-7) auto 0; } .gallery figure { margin: 0; flex: 0 1 340px; } .gallery a { display: block; } .gallery img { width: 100%; height: auto; display: block; border: 1px solid var(--hairline); background: var(--bg-elev); cursor: zoom-in; transition: border-color .25s ease; } .gallery a:hover img { border-color: var(--gold-deep); } /* uniform square tiles (buckle gallery) - keeps every photo the same footprint */ .gallery--uniform img { aspect-ratio: 1 / 1; object-fit: contain; } /* 4-up gallery (keeps a 7-photo group from leaving a lone item) */ .gallery--four figure { flex: 0 1 22%; min-width: 200px; } .gallery .bts-pair { flex: 0 1 680px; min-width: 300px; } .gallery--four .bts-pair { flex: 0 1 46%; min-width: 300px; } .bts-pair { margin: 0; } .bts-pair__imgs { display: flex; gap: var(--s-6); } .bts-pair__imgs a { flex: 1; display: block; } .bts-pair figcaption { text-align: center; } .gallery figcaption { font-family: var(--sans); font-size: 1.2rem; letter-spacing: .03em; color: var(--cream-soft); margin-top: var(--s-3); line-height: 1.45; } /* ----------------------------------------------------- piece nav (under the hero photo) */ .artwork__piecenav { padding: 0 var(--gutter); } .artwork__piecenav .rule { margin: var(--s-3) auto var(--s-4); } @media (max-width: 760px) { /* force the whole carousel chain to full width so the hero photo fills the screen */ .carousel { width: 100%; max-width: 100%; } .carousel__viewport { width: 100%; } .carousel__track { width: 100%; } .carousel__slide { flex: 0 0 100%; width: 100%; display: block; } .carousel__slide a { display: block; width: 100%; } .carousel__slide img, .carousel__slide video { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: contain; } /* bare arrows on mobile - no box so they don't cover the sculpture */ .carousel__nav { width: 3.65rem; height: 5rem; font-size: 3rem; background: transparent; border: 0; color: var(--cream); text-shadow: 0 1px 5px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9); } .carousel__nav:hover, .carousel__nav:focus-visible { background: transparent; color: var(--gold-bright); } /* compact piece navigation: Previous | Next on one row, All sculpture beneath */ .artwork__piecenav nav { gap: .5rem !important; } .artwork__piecenav .btn { font-size: .95rem; letter-spacing: .05em; padding: .6rem .8rem; } .artwork__piecenav nav a:nth-child(1) { order: 1; flex: 1 1 0; } /* Previous */ .artwork__piecenav nav a:nth-child(3) { order: 2; flex: 1 1 0; } /* Next */ .artwork__piecenav nav a:nth-child(2) { order: 3; flex: 1 1 100%; } /* All sculpture */ } /* ----------------------------------------------------- footer social links */ .site-footer__social { display: flex; gap: var(--s-6); justify-content: center; align-items: center; margin: var(--s-4) 0 var(--s-2); } .site-footer__social a { display: inline-flex; align-items: center; gap: .55rem; color: var(--cream-soft); font-family: var(--serif); font-size: 1.4rem; letter-spacing: .02em; } .site-footer__social a:hover, .site-footer__social a:focus-visible { color: var(--gold-bright); } .site-footer__social svg { width: 1.3rem; height: 1.3rem; fill: currentColor; display: block; }