/* The Maine Artists - Design tokens */
@import url('https://fonts.googleapis.com/css2?family=Jacques+Francois&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=Inter:wght@400;500;600;700&family=Caveat:wght@400;500;600;700&display=swap');
:root {
/* Color */
--violet: #7C3AED;
--violet-deep: #5B21B6;
--coral: #F9635E;
--coral-deep: #D8413C;
--teal: #9AD2CB;
--teal-deep: #6FB0A6;
--parchment: #F0EAE0;
--parchment-warm: #E8DFD0;
--granite: #2A2A32;
--granite-soft: #3D3D47;
--fog: #8A8078;
--tideline: #D8CFBF;
--foam: #FDFAF6;
--ink: #1A1A20;
/* Default accent (set per-site below) */
--accent: var(--coral);
--accent-deep: var(--coral-deep);
/* Type */
--display: 'Jacques Francois', 'Cormorant Garamond', Georgia, serif;
--body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
--ui: 'Inter', system-ui, sans-serif;
--hand: 'Caveat', 'Bradley Hand', cursive;
/* Shadow */
--shadow-hard: 4px 4px 0 var(--granite);
--shadow-hard-sm: 3px 3px 0 var(--granite);
--shadow-hard-coral: 4px 4px 0 var(--coral);
--shadow-hard-violet: 4px 4px 0 var(--violet);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--body);
color: var(--granite);
background: var(--parchment);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Site accent override - set via data-site on */
[data-site="tma"] { --accent: var(--teal); --accent-deep: var(--teal-deep); }
[data-site="mac"] { --accent: var(--coral); --accent-deep: var(--coral-deep); }
img { max-width: 100%; height: auto; display: block; }
/* Paper grain texture - applied to backgrounds */
.grain {
position: relative;
}
.grain::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
mix-blend-mode: multiply;
opacity: 0.55;
z-index: 0;
}
.grain > * { position: relative; z-index: 1; }
.grain-strong::before { opacity: 0.75; }
.grain-light::before { opacity: 0.30; }
/* Hand-drawn divider rule */
.rule-hand {
display: block;
width: 100%;
height: 14px;
background: url("data:image/svg+xml;utf8,") no-repeat center / 100% 100%;
opacity: 0.85;
}
/* Common type styles */
.kicker {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.eyebrow {
font-family: var(--ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fog);
}
.hand {
font-family: var(--hand);
color: var(--violet);
}
button { font-family: inherit; cursor: pointer; }
/* Pill button (UI) */
.btn {
font-family: var(--ui);
font-weight: 600;
font-size: 14px;
letter-spacing: 0.02em;
padding: 12px 22px;
border-radius: 999px;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 120ms ease, box-shadow 120ms ease;
text-decoration: none;
min-height: 44px;
justify-content: center;
}
.btn-primary { background: var(--accent); color: var(--foam); }
.btn-primary:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--granite); }
.btn-ghost { background: transparent; color: var(--granite); border: 1.5px solid var(--granite); }
.btn-ghost:hover { background: var(--granite); color: var(--foam); }
.btn-violet { background: var(--violet); color: var(--foam); }
.btn-violet:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--granite); }
/* Underlined text link (editorial) */
.link-edit {
color: var(--accent);
text-decoration: none;
font-family: var(--ui);
font-weight: 600;
border-bottom: 1.5px solid currentColor;
padding-bottom: 1px;
}
.link-edit:hover { color: var(--accent-deep); }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Helpers */
.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.container-wide { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) {
.container, .container-wide, .container-narrow { padding: 0 20px; }
}
/* Tape */
.tape {
position: absolute;
background: rgba(154, 210, 203, 0.55);
width: 70px;
height: 22px;
box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
/* ==========================================================
Skip link
========================================================== */
.skip-link {
position: absolute;
left: -9999px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
left: 12px; top: 12px;
width: auto; height: auto;
padding: 10px 16px;
background: var(--granite);
color: var(--foam);
z-index: 200;
border-radius: 8px;
font-family: var(--ui);
}
/* ==========================================================
Site header + nav (mobile-first, pure CSS hamburger)
========================================================== */
.nav-toggle-input { display: none; }
.site-header {
position: sticky; top: 0; z-index: 50;
background: rgba(253, 250, 246, 0.92);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--tideline);
padding: 14px 0;
}
.site-header .container {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
display: inline-flex; align-items: center; gap: 10px;
text-decoration: none;
color: var(--granite);
}
.brand:hover { text-decoration: none; }
.brand-name {
font-family: var(--display);
font-size: 18px;
letter-spacing: 0.01em;
color: var(--granite);
line-height: 1;
}
.nav-burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 44px; height: 44px;
cursor: pointer;
gap: 5px;
}
.nav-burger span {
display: block;
width: 22px; height: 2px;
background: var(--granite);
transition: transform 200ms ease, opacity 200ms ease;
}
.primary-nav {
display: none;
}
.primary-nav a {
font-family: var(--ui);
font-size: 14px;
font-weight: 500;
color: var(--granite);
text-decoration: none;
padding-bottom: 4px;
border-bottom: 1.5px solid transparent;
}
.primary-nav a:hover { color: var(--violet); border-color: var(--violet); text-decoration: none; }
.primary-nav .btn { padding: 10px 18px; font-size: 13px; min-height: 40px; }
/* Mobile menu open state */
@media (max-width: 859px) {
.nav-toggle-input:checked ~ .site-header .nav-burger span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle-input:checked ~ .site-header .nav-burger span:nth-child(2) {
opacity: 0;
}
.nav-toggle-input:checked ~ .site-header .nav-burger span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-toggle-input:checked ~ .site-header .primary-nav {
display: flex;
position: absolute;
left: 0; right: 0; top: 100%;
flex-direction: column;
background: var(--foam);
border-bottom: 1px solid var(--tideline);
padding: 14px 32px 24px;
gap: 14px;
align-items: stretch;
}
.nav-toggle-input:checked ~ .site-header .primary-nav a {
padding: 10px 0;
font-size: 16px;
border-bottom: 1px solid var(--tideline);
}
.nav-toggle-input:checked ~ .site-header .primary-nav .btn {
border-bottom: none;
margin-top: 6px;
}
}
@media (min-width: 860px) {
.nav-burger { display: none; }
.primary-nav {
display: flex;
align-items: center;
gap: 30px;
}
}
/* ==========================================================
Footer
========================================================== */
.site-footer {
background: var(--granite);
color: var(--parchment);
padding: 80px 0 40px;
margin-top: 80px;
position: relative;
overflow: hidden;
}
.site-footer .footer-grid {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: start;
}
@media (min-width: 860px) {
.site-footer .footer-grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 60px;
}
}
.footer-brand h3 {
font-family: var(--display);
font-size: 36px; line-height: 1.05;
color: var(--accent); margin: 0;
font-weight: 400;
letter-spacing: -0.01em;
}
.footer-brand p {
font-family: var(--body);
font-size: 15px;
color: var(--tideline);
max-width: 340px;
margin: 18px 0 0;
line-height: 1.6;
}
.footer-brand .hand-note {
margin-top: 24px;
font-family: var(--hand);
font-size: 22px;
color: var(--teal);
}
.footer-col-title {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal);
margin-bottom: 18px;
}
.site-footer ul {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: 10px;
}
.site-footer ul a {
font-family: var(--body);
font-size: 15px;
color: var(--parchment);
text-decoration: none;
}
.site-footer ul a:hover { color: var(--foam); text-decoration: underline; }
.site-footer .footer-meta {
margin-top: 60px; padding-top: 28px;
border-top: 1px solid rgba(216, 207, 191, 0.18);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 12px;
font-family: var(--ui); font-size: 12px; color: var(--fog);
}
/* ==========================================================
Masthead strip
========================================================== */
.masthead-strip {
background: var(--tideline);
border-top: 1px solid var(--granite);
border-bottom: 1px solid var(--granite);
padding: 10px 0;
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--granite);
text-align: center;
}
/* ==========================================================
Hero variants
========================================================== */
.hero { position: relative; overflow: hidden; }
/* Gallery wall hero (TMA) */
.hero-gallerywall {
background: var(--parchment-warm);
padding: 56px 0 80px;
}
.hero-gallerywall .hero-headline {
text-align: center;
margin: 0 auto 48px;
max-width: 1100px;
}
.hero-gallerywall h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 8vw, 116px);
line-height: 0.94;
letter-spacing: -0.025em;
color: var(--granite);
margin: 18px 0 0;
}
.hero-gallerywall h1 em {
font-family: 'Source Serif 4', serif;
font-style: italic;
color: var(--violet);
font-weight: 400;
}
.hero-gallerywall .hero-tagline {
font-family: var(--hand);
color: var(--accent);
font-size: 24px;
margin: 24px auto 0;
display: inline-block;
transform: rotate(-1deg);
}
.gallery-wall {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
max-width: 760px;
margin: 0 auto;
}
@media (min-width: 720px) {
.gallery-wall {
grid-template-columns: repeat(3, 1fr);
max-width: 1100px;
gap: 32px;
}
}
.wall-card {
background: var(--foam);
padding: 8px;
box-shadow: var(--shadow-hard);
position: relative;
display: block;
text-decoration: none;
color: inherit;
}
.wall-card:nth-child(3n+1) { transform: rotate(-1.5deg); box-shadow: 5px 5px 0 var(--granite); }
.wall-card:nth-child(3n+2) { transform: rotate(2deg); box-shadow: 5px 5px 0 var(--coral); }
.wall-card:nth-child(3n+3) { transform: rotate(-1deg); box-shadow: 5px 5px 0 var(--violet); }
.wall-card:nth-child(5n+4) { transform: rotate(3deg); box-shadow: 5px 5px 0 var(--teal-deep); }
.wall-card .wall-photo {
aspect-ratio: 4 / 5;
background: var(--parchment);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.wall-card .wall-photo img { width: 100%; height: 100%; object-fit: cover; }
.wall-card .wall-photo .placeholder {
font-family: var(--display);
font-size: 56px;
color: var(--violet);
}
.wall-card .wall-meta {
padding: 10px 6px 4px;
text-align: center;
}
.wall-card .wall-name {
font-family: var(--display);
font-size: 18px;
color: var(--granite);
line-height: 1.05;
}
.wall-card .wall-craft {
font-family: var(--body);
font-style: italic;
font-size: 12px;
color: var(--fog);
margin-top: 2px;
}
.hero-cta-row {
margin-top: 56px;
display: flex; justify-content: center; gap: 14px; flex-wrap: wrap;
text-align: center;
}
@media (max-width: 720px) {
.wall-card { transform: none !important; }
}
/* Editorial hero (MAC) */
.hero-editorial {
background: var(--parchment);
padding: 60px 0 100px;
}
.hero-editorial .editorial-eyebrow {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--ui);
font-size: 12px;
color: var(--fog);
letter-spacing: 0.18em;
text-transform: uppercase;
padding-bottom: 18px;
border-bottom: 1.5px solid var(--granite);
margin-bottom: 60px;
flex-wrap: wrap; gap: 12px;
}
.hero-editorial .editorial-eyebrow .accent { color: var(--accent); }
.hero-editorial .editorial-grid {
display: grid;
grid-template-columns: 1fr;
gap: 60px;
align-items: start;
}
@media (min-width: 900px) {
.hero-editorial .editorial-grid {
grid-template-columns: 1.4fr 1fr;
gap: 80px;
}
}
.hero-editorial h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(56px, 9vw, 152px);
line-height: 0.92;
letter-spacing: -0.025em;
color: var(--granite);
margin: 0;
}
.hero-editorial h1 em {
font-style: italic;
color: var(--violet);
font-family: 'Source Serif 4', serif;
font-weight: 400;
}
.editorial-body {
display: grid;
grid-template-columns: 1fr;
gap: 28px;
margin-top: 56px;
padding-top: 32px;
border-top: 1px solid var(--tideline);
}
@media (min-width: 720px) {
.editorial-body { grid-template-columns: 1fr 1fr; gap: 40px; }
}
.editorial-body p {
font-family: var(--body);
font-size: 17px;
line-height: 1.6;
color: var(--granite);
margin: 0;
}
.editorial-body .editorial-actions {
display: flex; flex-direction: column; gap: 12px; align-items: flex-start;
}
/* ==========================================================
Section: Recently joined
========================================================== */
.section-recently {
background: var(--foam);
padding: 80px 0;
}
.section-recently .recently-head {
display: flex; align-items: flex-end; justify-content: space-between;
margin-bottom: 50px; gap: 40px; flex-wrap: wrap;
}
.section-recently h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
letter-spacing: -0.02em;
color: var(--granite);
margin: 14px 0 0;
}
.section-recently h2 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
color: var(--violet);
font-weight: 400;
}
.section-recently .recently-tagline {
font-family: var(--hand);
color: var(--accent);
font-size: 22px;
margin-top: 14px;
display: inline-block;
transform: rotate(-1deg);
}
.section-recently .see-all {
margin-top: 36px;
text-align: center;
}
/* ==========================================================
Artist card (polaroid)
========================================================== */
.artist-grid {
display: grid;
gap: 28px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.artist-card {
background: var(--foam);
padding: 12px 12px 16px;
box-shadow: var(--shadow-hard);
display: block;
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease;
position: relative;
}
.artist-card:hover {
transform: translate(-2px, -2px);
box-shadow: 6px 6px 0 var(--granite);
text-decoration: none;
}
.artist-card .photo {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--parchment-warm);
display: flex; align-items: center; justify-content: center;
}
.artist-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.artist-card .photo .placeholder {
font-family: var(--display);
font-size: 52px;
color: var(--violet);
}
.artist-card .body { padding: 12px 4px 0; }
.artist-card h3 {
font-family: var(--display);
font-weight: 400;
font-size: 22px;
line-height: 1.05;
color: var(--granite);
margin: 0 0 4px;
}
.artist-card .craft {
font-family: 'Source Serif 4', serif;
font-style: italic;
font-size: 13px;
color: var(--fog);
}
.artist-card .location {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
margin-top: 6px;
}
/* ==========================================================
Why Maine
========================================================== */
.section-why {
background: var(--parchment-warm);
padding: 96px 0;
}
.section-why .why-head {
text-align: center;
max-width: 720px;
margin: 0 auto 60px;
}
.section-why h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 6vw, 72px);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--granite);
margin: 14px 0 0;
}
.section-why h2 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
color: var(--accent);
font-weight: 400;
}
.why-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 860px) {
.why-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
.why-card {
background: var(--foam);
padding: 36px 32px 40px;
border: 1px solid var(--tideline);
position: relative;
}
.why-card:nth-child(odd) { box-shadow: 5px 5px 0 var(--granite); }
.why-card:nth-child(even) { box-shadow: 5px 5px 0 var(--violet); }
.why-card .why-num {
font-family: var(--display);
font-size: 72px;
color: var(--accent);
line-height: 1;
letter-spacing: -0.04em;
margin-bottom: 8px;
}
.why-card .why-icon {
font-size: 36px;
margin-bottom: 14px;
line-height: 1;
}
.why-card .why-kicker {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--teal-deep);
margin-bottom: 10px;
}
.why-card h3 {
font-family: var(--display);
font-weight: 400;
font-size: 24px;
line-height: 1.1;
color: var(--granite);
margin: 0;
}
.why-card p {
font-family: var(--body);
font-size: 15.5px;
line-height: 1.6;
color: var(--granite-soft);
margin: 14px 0 0;
}
/* ==========================================================
Gallery locations (home)
========================================================== */
.section-galleries {
background: var(--granite);
color: var(--parchment);
padding: 96px 0 80px;
}
.section-galleries .gal-head {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 56px; flex-wrap: wrap; gap: 24px;
}
.section-galleries h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(40px, 6vw, 88px);
line-height: 0.98;
letter-spacing: -0.02em;
color: var(--foam);
margin: 14px 0 0;
}
.section-galleries h2 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
color: var(--coral);
font-weight: 400;
}
.section-galleries .gal-note {
font-family: var(--hand);
font-size: 22px;
color: var(--teal);
transform: rotate(-2deg);
max-width: 280px;
text-align: right;
}
.galleries-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
}
@media (min-width: 860px) {
.galleries-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; }
}
.gallery-card {
border-top: 2px solid var(--accent);
padding-top: 24px;
}
.gallery-card.tone-violet { border-top-color: var(--violet); }
.gallery-card.tone-coral { border-top-color: var(--coral); }
.gallery-card.tone-teal { border-top-color: var(--teal); }
.gallery-card .gal-kicker {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.gallery-card.tone-violet .gal-kicker { color: var(--violet); }
.gallery-card.tone-coral .gal-kicker { color: var(--coral); }
.gallery-card.tone-teal .gal-kicker { color: var(--teal); }
.gallery-card h3 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 5vw, 72px);
line-height: 0.95;
color: var(--foam);
margin: 0;
letter-spacing: -0.02em;
}
.gallery-card .gal-addr {
margin-top: 22px;
font-family: var(--body);
font-size: 15px;
color: var(--tideline);
line-height: 1.6;
}
.gallery-card .gal-hours { color: var(--fog); display: block; }
.gallery-card .gal-link {
display: inline-block;
margin-top: 20px;
font-family: var(--ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--accent);
text-decoration: none;
border-bottom: 1.5px solid var(--accent);
padding-bottom: 2px;
}
.gallery-card.tone-violet .gal-link { color: var(--violet); border-color: var(--violet); }
.gallery-card.tone-coral .gal-link { color: var(--coral); border-color: var(--coral); }
.gallery-card.tone-teal .gal-link { color: var(--teal); border-color: var(--teal); }
/* ==========================================================
Artists index (alphabetical)
========================================================== */
.alpha-page {
background: var(--parchment);
padding: 60px 0 100px;
}
.alpha-page-head {
margin-bottom: 48px;
}
.alpha-page-head h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 8vw, 128px);
line-height: 0.92;
letter-spacing: -0.025em;
color: var(--granite);
margin: 14px 0 0;
}
.alpha-page-head h1 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
color: var(--violet);
font-weight: 400;
}
.alpha-page-head .alpha-note {
font-family: var(--hand);
color: var(--accent);
font-size: 22px;
margin-top: 14px;
display: inline-block;
transform: rotate(-1deg);
}
.alpha-jump-nav {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 16px 0;
margin: 24px 0 16px;
border-top: 1.5px solid var(--granite);
border-bottom: 1.5px solid var(--granite);
}
.alpha-jump-nav a {
font-family: var(--ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--granite);
padding: 6px 10px;
text-decoration: none;
border-radius: 999px;
}
.alpha-jump-nav a:hover {
background: var(--granite); color: var(--foam);
text-decoration: none;
}
.alpha-group {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
padding: 40px 0;
border-top: 1px solid var(--tideline);
}
.alpha-group:first-of-type { border-top: 2px solid var(--granite); }
@media (min-width: 860px) {
.alpha-group {
grid-template-columns: 160px 1fr;
gap: 60px;
padding: 50px 0;
}
}
.alpha-letter {
font-family: var(--display);
font-weight: 400;
font-size: 64px;
line-height: 0.85;
color: var(--violet);
letter-spacing: -0.04em;
}
@media (min-width: 860px) {
.alpha-letter { font-size: 140px; position: sticky; top: 80px; height: fit-content; }
}
.alpha-letter .alpha-count {
display: block;
font-family: var(--ui);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--fog);
margin-top: 8px;
}
.alpha-artists {
display: flex; flex-direction: column;
}
.alpha-row {
display: grid;
grid-template-columns: 1fr;
gap: 4px;
padding: 18px 0;
border-bottom: 1px solid var(--tideline);
text-decoration: none;
color: inherit;
transition: color 150ms;
}
@media (min-width: 720px) {
.alpha-row {
grid-template-columns: 2fr 1.4fr 1fr;
gap: 24px;
align-items: center;
padding: 20px 0;
}
}
.alpha-row:hover { text-decoration: none; }
.alpha-row:hover .alpha-name { color: var(--violet); }
.alpha-name {
font-family: var(--display);
font-weight: 400;
font-size: clamp(24px, 3.4vw, 36px);
line-height: 1;
letter-spacing: -0.01em;
color: var(--granite);
transition: color 150ms;
}
.alpha-craft {
font-family: var(--ui);
font-size: 13px;
font-weight: 500;
color: var(--teal-deep);
}
.alpha-location {
font-family: var(--ui);
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--accent);
}
/* ==========================================================
Artist detail (bio hero + products)
========================================================== */
.artist-detail {
background: var(--parchment);
padding: 48px 0 80px;
}
.bio-hero {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
padding: 24px 0 40px;
}
@media (min-width: 760px) {
.bio-hero { grid-template-columns: 360px 1fr; gap: 56px; }
}
.bio-photo {
aspect-ratio: 1 / 1;
background: var(--parchment-warm);
box-shadow: 5px 5px 0 var(--granite);
overflow: hidden;
padding: 8px;
}
.bio-photo .inner {
width: 100%; height: 100%;
background: var(--parchment-warm);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.bio-photo img { width: 100%; height: 100%; object-fit: cover; }
.bio-eyebrow {
font-family: var(--ui);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.bio-name {
font-family: var(--display);
font-weight: 400;
font-size: clamp(36px, 6vw, 72px);
line-height: 0.96;
letter-spacing: -0.02em;
color: var(--granite);
margin: 12px 0 18px;
}
.bio-pills {
display: flex; gap: 8px; flex-wrap: wrap;
margin: 0 0 18px;
}
.pill {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: var(--foam);
border: 1px solid var(--tideline);
font-family: var(--ui);
font-size: 12px;
font-weight: 500;
color: var(--granite-soft);
}
.pill.accent {
background: var(--accent);
color: var(--foam);
border-color: var(--accent);
}
.bio-quote {
font-family: 'Source Serif 4', serif;
font-style: italic;
font-size: 19px;
line-height: 1.5;
color: var(--granite);
border-left: 3px solid var(--accent);
padding: 4px 0 4px 18px;
margin: 18px 0;
}
.bio-text {
font-family: var(--body);
font-size: 16px;
line-height: 1.7;
color: var(--granite);
}
.bio-text p + p { margin-top: 12px; }
.work-head {
margin: 48px 0 28px;
}
.work-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.05;
color: var(--granite);
margin: 0;
letter-spacing: -0.01em;
}
.product-grid {
display: grid;
gap: 28px;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.product-card {
background: var(--foam);
box-shadow: 4px 4px 0 var(--granite);
display: flex; flex-direction: column;
}
.product-card .photo {
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--parchment);
}
.product-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.product-card .body {
padding: 14px 16px 16px;
flex: 1;
display: flex; flex-direction: column;
}
.product-card h4 {
font-family: var(--display);
font-weight: 400;
font-size: 18px;
color: var(--granite);
margin: 0 0 4px;
}
.product-card .price {
font-family: var(--ui);
font-size: 14px;
color: var(--granite-soft);
margin-bottom: 12px;
}
.product-card .buy {
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
color: var(--accent);
letter-spacing: 0.04em;
border-bottom: 1.5px solid var(--accent);
padding-bottom: 2px;
margin-top: auto;
align-self: flex-start;
text-decoration: none;
}
.product-card .sold-out {
font-family: var(--ui);
font-size: 12px;
color: var(--fog);
margin-top: auto;
}
.empty-state {
background: var(--foam);
border: 1px dashed var(--tideline);
padding: 48px 24px;
text-align: center;
color: var(--fog);
font-family: var(--body);
}
/* ==========================================================
About page
========================================================== */
.about-hero {
background: var(--parchment);
padding: 80px 0 40px;
}
.about-hero h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 8vw, 116px);
line-height: 0.94;
letter-spacing: -0.025em;
color: var(--granite);
margin: 14px 0 0;
}
.about-hero h1 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
color: var(--violet);
font-weight: 400;
}
.about-hero .about-tagline {
font-family: var(--hand);
color: var(--accent);
font-size: 26px;
margin-top: 16px;
display: inline-block;
transform: rotate(-1.5deg);
}
.about-story {
background: var(--parchment);
padding: 40px 0 80px;
}
.about-story .story-card {
background: var(--foam);
padding: 48px 40px 40px;
box-shadow: 5px 5px 0 var(--granite);
border: 1px solid var(--tideline);
max-width: 760px; margin: 0 auto;
}
.about-story .story-card p {
font-family: 'Source Serif 4', serif;
font-size: 17.5px;
line-height: 1.7;
color: var(--granite);
margin: 0 0 14px;
}
.about-story .signoff {
font-family: var(--hand);
color: var(--accent);
font-size: 28px;
margin-top: 18px;
display: inline-block;
}
/* About: stats grid */
.about-stats {
background: var(--parchment-warm);
padding: 80px 0;
}
.stats-head { text-align: center; margin-bottom: 40px; }
.stats-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 5vw, 56px);
line-height: 1;
margin: 14px 0 0;
}
.stats-head h2 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
color: var(--accent);
font-weight: 400;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
max-width: 920px; margin: 0 auto;
}
@media (min-width: 720px) {
.stats-grid { grid-template-columns: repeat(4, 1fr); }
}
.stat {
background: var(--foam);
padding: 28px 16px;
text-align: center;
box-shadow: 4px 4px 0 var(--granite);
border: 1px solid var(--tideline);
}
.stat .num {
font-family: var(--display);
font-weight: 400;
font-size: 44px;
line-height: 1;
color: var(--accent);
letter-spacing: -0.02em;
}
.stat .label {
font-family: var(--ui);
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--fog);
margin-top: 8px;
}
/* About: how it works */
.about-how {
background: var(--parchment);
padding: 80px 0;
}
.how-head { text-align: center; margin-bottom: 40px; }
.how-head h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 5vw, 56px);
line-height: 1;
margin: 14px 0 0;
}
.how-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
max-width: 1020px; margin: 0 auto;
}
@media (min-width: 860px) { .how-grid { grid-template-columns: repeat(3, 1fr); } }
.how-card {
background: var(--foam);
padding: 32px 28px;
border: 1px solid var(--tideline);
box-shadow: 4px 4px 0 var(--granite);
}
.how-card .how-icon {
font-size: 30px;
line-height: 1;
margin-bottom: 14px;
}
.how-card h4 {
font-family: var(--display);
font-weight: 400;
font-size: 22px;
margin: 0 0 8px;
color: var(--granite);
}
.how-card p {
font-family: 'Source Serif 4', serif;
font-size: 15px;
line-height: 1.6;
color: var(--granite-soft);
margin: 0;
}
/* About: CTA block */
.about-cta {
background: var(--parchment);
padding: 60px 0 100px;
}
.cta-block {
background: var(--accent);
color: var(--foam);
padding: 56px 36px;
text-align: center;
box-shadow: 6px 6px 0 var(--granite);
max-width: 1060px; margin: 0 auto;
}
.cta-block h2 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1;
color: var(--foam);
margin: 0 0 12px;
}
.cta-block h2 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
font-weight: 400;
color: var(--foam);
}
.cta-block p {
font-family: 'Source Serif 4', serif;
font-style: italic;
font-size: 17px;
color: rgba(253, 250, 246, 0.88);
margin: 0 0 28px;
}
.cta-block .row { display: inline-flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.cta-block .btn-white {
background: var(--foam);
color: var(--accent);
padding: 12px 22px;
border-radius: 999px;
font-family: var(--ui);
font-weight: 600;
font-size: 14px;
text-decoration: none;
box-shadow: 3px 3px 0 var(--granite);
min-height: 44px;
display: inline-flex; align-items: center;
}
.cta-block .btn-white:hover { transform: translate(-1px, -1px); text-decoration: none; }
.cta-block .btn-ghost-light {
background: transparent;
color: var(--foam);
border: 1.5px solid rgba(253, 250, 246, 0.5);
padding: 11px 20px;
border-radius: 999px;
font-family: var(--ui);
font-weight: 600;
font-size: 14px;
text-decoration: none;
min-height: 44px;
display: inline-flex; align-items: center;
}
.cta-block .btn-ghost-light:hover { border-color: var(--foam); text-decoration: none; }
/* ==========================================================
Coming soon page
========================================================== */
.coming-soon {
min-height: calc(100vh - 60px);
display: flex;
align-items: center;
background: var(--parchment);
padding: 80px 0;
position: relative;
overflow: hidden;
}
.coming-soon-inner {
max-width: 880px;
margin: 0 auto;
padding: 0 32px;
position: relative;
}
.coming-soon-kicker {
font-family: var(--ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 18px;
}
.coming-soon h1 {
font-family: var(--display);
font-weight: 400;
font-size: clamp(48px, 9vw, 132px);
line-height: 0.94;
letter-spacing: -0.025em;
color: var(--granite);
margin: 0;
}
.coming-soon h1 em {
font-style: italic;
font-family: 'Source Serif 4', serif;
color: var(--violet);
font-weight: 400;
}
.coming-soon .accent-block {
display: inline-block;
margin-top: 36px;
padding: 14px 22px;
background: var(--accent);
color: var(--foam);
font-family: var(--ui);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
box-shadow: 5px 5px 0 var(--granite);
}
.coming-soon .location-line {
margin-top: 36px;
font-family: 'Source Serif 4', serif;
font-style: italic;
font-size: 17px;
color: var(--granite-soft);
}
/* ==========================================================
Reduced motion + print
========================================================== */
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; animation: none !important; }
html { scroll-behavior: auto; }
.wall-card { transform: none !important; }
}
@media print {
.site-header, .site-footer, .masthead-strip { display: none; }
body { background: #FFF; color: #000; }
.grain::before { display: none; }
.artist-card, .why-card, .stat, .product-card, .gallery-card,
.about-story .story-card, .cta-block, .coming-soon .accent-block {
box-shadow: none; border: 1px solid #ccc;
}
a { color: #000; text-decoration: underline; }
.hero, .section-recently, .section-why, .section-galleries,
.alpha-page, .about-hero, .about-story, .about-stats, .about-how, .about-cta {
padding: 16px 0; background: #FFF;
}
}