:root {
/* Color: her words were sage to dark greens, touches of blue, copper. */
--cream: #F6F3EC;
--paper: #FFFDF8;
--sage: #A9BBA0;
--sage-2: #DCE4D3;
--moss: #6E8B62;
--green: #2F5D43;
--deep: #1F3D2B;
--ink: #1E2A22;
--ink-soft:#4E5A52;
--faint: #8A9187;
--copper: #B87333;
--copper-2:#8F5A26;
--blue: #5B8FA8;
--blue-ink:#2F6478;
--rose: #CC6082;
--rose-ink:#9E3F5E;
--rose-2: #F6E1E8;
--copper-light: #D9A066;
--sage-3: #EEF2E7;
--line: #E3E0D6;
/* Type */
--font-display: "Fraunces", Georgia, serif;
--font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
--track-display: -0.015em;
--h1-size: clamp(2.6rem, 6.2vw, 4.6rem);
--h2-size: clamp(1.75rem, 3.4vw, 2.5rem);
/* Shape and space */
--r-sm: 8px; --r-md: 16px; --r-lg: 28px; --r-leaf: 48% 52% 46% 54% / 55% 45% 55% 45%;
--section-y: 84px;
--gap: 22px;
--wrap: 1120px;
--ease: .18s ease;
--shadow: 0 1px 2px color-mix(in srgb, var(--deep) 8%, transparent), 0 14px 40px color-mix(in srgb, var(--deep) 10%, transparent);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--cream); line-height: 1.6; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: var(--track-display); margin: 0; font-weight: 600; color: var(--deep); }
h1 { font-size: var(--h1-size); line-height: 1.02; }
h2 { font-size: var(--h2-size); line-height: 1.12; }
h3 { font-size: 1.25rem; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-family: var(--font-body); font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-ink); }
.sec-head h2::after { content: ''; display: block; width: 56px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--copper), var(--sage)); margin-top: 14px; }
.lead { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--ink-soft); max-width: 48ch; }
/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: .7rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .95rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background var(--ease), color var(--ease), border-color var(--ease); font-family: var(--font-body); }
.btn.primary { background: var(--green); color: var(--cream); }
.btn.primary:hover { background: var(--deep); }
.btn.ghost { background: transparent; color: var(--copper-2); border-color: var(--copper); }
.btn.ghost:hover { background: color-mix(in srgb, var(--copper) 12%, transparent); }
.btn.copper { background: var(--copper); color: #fff; }
.btn.copper:hover { background: var(--copper-2); }
/* Header */
header.site { position: sticky; top: 0; z-index: 20; position: -webkit-sticky; background: color-mix(in srgb, var(--cream) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .3s ease, background .3s ease, margin-bottom .3s ease; }
/* The bar shrinks 42px when compacted (118px to 76px); the margin gives that back, in step,
so the page never gets shorter mid-scroll. A shorter page stops a smooth scroll to a
section (Order page, Find me in person, the menu) short of where it was going. */
header.site.scrolled { margin-bottom: 42px; background: color-mix(in srgb, var(--paper) 94%, transparent); box-shadow: 0 6px 24px color-mix(in srgb, var(--deep) 10%, transparent); }
header.site.scrolled .bar { min-height: 76px; }
header.site.scrolled .brand img { width: 60px; height: 60px; }
header.site.scrolled .brand .name { font-size: 1.3rem; }
header.site.scrolled .brand .tag { font-size: 0; margin: 0; opacity: 0; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 118px; position: relative; transition: min-height .3s ease; }
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand img { width: 104px; height: 104px; transition: width .3s ease, height .3s ease; }
@media (max-width: 520px) { .brand img { width: 72px; height: 72px; } }
.brand .name { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; color: var(--deep); line-height: 1.02; letter-spacing: -0.01em; transition: font-size .3s ease; }
.brand .tag { display: block; font-family: var(--font-body); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--copper-2); font-weight: 600; margin-top: 6px; transition: font-size .3s ease, opacity .3s ease, margin .3s ease; }
nav.links { display: flex; gap: 22px; }
nav.links a { position: relative; text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: .95rem; padding: 10px 2px; white-space: nowrap; transition: color var(--ease); }
nav.links a::after { content: ''; position: absolute; left: 2px; right: 2px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--copper), var(--rose)); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
nav.links a:hover, nav.links a.current { color: var(--deep); }
nav.links a:hover::after, nav.links a.current::after { transform: scaleX(1); }
.bar > .btn { white-space: nowrap; }
.bar > .btn { transition: transform var(--ease), box-shadow var(--ease), background var(--ease); }
.bar > .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px color-mix(in srgb, var(--deep) 22%, transparent); }
.nav-hamburger { display: none; min-width: 48px; min-height: 48px; align-items: center; justify-content: center; background: var(--green); border: 0; border-radius: 50%; color: var(--cream); cursor: pointer; padding: 0; position: relative; z-index: 40; transition: background var(--ease), transform var(--ease); }
.nav-hamburger:hover { background: var(--deep); }
.nav-hamburger[aria-expanded=true] { background: var(--copper); }
.nav-hamburger svg { width: 24px; height: 24px; }
.nav-hamburger .close { display: none; }
.nav-hamburger[aria-expanded=true] .open { display: none; }
.nav-hamburger[aria-expanded=true] .close { display: block; }
.nav-drawer { display: none; }
@media (max-width: 1040px) {
nav.links { display: none; }
.nav-hamburger { display: inline-flex; }
/* header.site has backdrop-filter, which makes it the containing block for fixed children; size the panel to the viewport explicitly. */
.nav-drawer { display: grid; grid-template-rows: auto 1fr auto; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 30; background:
radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--sage) 60%, transparent), transparent 60%),
radial-gradient(60% 50% at 0% 100%, color-mix(in srgb, var(--rose) 22%, transparent), transparent 65%),
var(--cream); padding: 118px 28px 28px; visibility: hidden; opacity: 0; transform: translateY(-2%); transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s; overflow: auto; }
.nav-drawer.open { visibility: visible; opacity: 1; transform: none; transition: opacity .32s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s; }
.nav-drawer .drawer-logo { width: 120px; height: 120px; justify-self: start; margin: 0 0 8px -6px; }
.nav-drawer .drawer-links { display: grid; align-content: start; gap: 4px; }
.nav-drawer .drawer-links a { display: flex; align-items: baseline; gap: 14px; padding: 12px 4px; min-height: 44px; text-decoration: none; color: var(--deep); font-family: var(--font-display); font-weight: 600; font-size: clamp(1.8rem, 8vw, 2.4rem); line-height: 1.1; border-bottom: 0; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s cubic-bezier(.2,.8,.2,1), color var(--ease); }
.nav-drawer .drawer-links a small { font-family: var(--font-body); font-weight: 600; font-size: .8rem; letter-spacing: .14em; color: var(--copper-2); }
.nav-drawer .drawer-links a:hover, .nav-drawer .drawer-links a:focus-visible { color: var(--copper-2); }
.nav-drawer.open .drawer-links a { opacity: 1; transform: none; }
.nav-drawer.open .drawer-links a:nth-child(1) { transition-delay: .06s; } .nav-drawer.open .drawer-links a:nth-child(2) { transition-delay: .11s; }
.nav-drawer.open .drawer-links a:nth-child(3) { transition-delay: .16s; } .nav-drawer.open .drawer-links a:nth-child(4) { transition-delay: .21s; }
.nav-drawer.open .drawer-links a:nth-child(5) { transition-delay: .26s; } .nav-drawer.open .drawer-links a:nth-child(6) { transition-delay: .31s; }
.nav-drawer .drawer-foot { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid color-mix(in srgb, var(--deep) 18%, transparent); }
.nav-drawer .drawer-foot .btn { justify-self: start; }
.nav-drawer .drawer-social { display: flex; gap: 12px; }
.nav-drawer .drawer-social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--paper); color: var(--green); box-shadow: var(--shadow); }
.nav-drawer .drawer-social svg { width: 22px; height: 22px; }
body.nav-open { overflow: hidden; }
}
/* On a phone the hero shows the same button a few lines down; keep the header to logo and name. */
@media (max-width: 1040px) { .bar > .btn { display: none; } }
/* The menu (with its icons) fills the bar on laptops and its first item is "Find me", and the hero
repeats the button, so the header keeps to logo, name and menu at every width. */
.bar > .btn { display: none; }
@media (min-width: 1041px) { .brand { flex: none; } .brand .name { white-space: nowrap; } }
@media (min-width: 1041px) and (max-width: 1179px) {
.brand { gap: 12px; } .brand img { width: 84px; height: 84px; }
.brand .name { font-size: 1.5rem; } .brand .tag { font-size: .68rem; letter-spacing: .08em; }
nav.links { gap: 12px; } nav.links a .ico { margin-right: 4px; }
}
@media (max-width: 520px) { .brand .name { font-size: 1.25rem; white-space: nowrap; } .brand .tag { font-size: .7rem; letter-spacing: .1em; margin-top: 3px; } }
/* Hero */
.hero { position: relative; overflow: hidden; background:
radial-gradient(70% 90% at 85% 15%, color-mix(in srgb, var(--sage) 55%, transparent), transparent 65%),
radial-gradient(45% 55% at 10% 95%, color-mix(in srgb, var(--copper) 16%, transparent), transparent 70%),
radial-gradient(40% 50% at 55% 100%, color-mix(in srgb, var(--rose) 14%, transparent), transparent 70%),
var(--cream); }
.hero .wrap { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.hero h1 { margin: 14px 0 18px; max-width: 14ch; }
.hero h1 em { font-style: italic; color: var(--green); font-weight: 500; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.hero-art { position: relative; }
.hero-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-leaf); box-shadow: var(--shadow); }
.hero-art .leaf { position: absolute; inset: -9% -8% auto auto; width: 46%; padding: 3%; background: var(--paper); border-radius: 50%; box-shadow: 0 10px 30px color-mix(in srgb, var(--deep) 22%, transparent); pointer-events: none; }
.peace { margin-top: 26px; display: inline-flex; gap: 14px; align-items: center; background: linear-gradient(90deg, color-mix(in srgb, var(--copper) 22%, var(--paper)), var(--rose-2)); border: 1.5px solid var(--copper); border-radius: var(--r-md); padding: 12px 16px; box-shadow: var(--shadow); max-width: 100%; }
.peace strong { font-family: var(--font-display); font-weight: 700; color: var(--copper-2); white-space: nowrap; font-size: 1.1rem; }
.peace span { color: var(--deep); font-size: .95rem; font-weight: 500; }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; gap: 34px; padding-top: 44px; } .hero-art { max-width: 460px; margin: 0 auto; } }
/* Sections */
section { padding: var(--section-y) 0; }
section.alt { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
section.sage { background: linear-gradient(180deg, var(--sage-3), var(--sage-2)); }
section.deep { background: var(--deep); color: var(--cream); }
section.deep h2 { color: var(--cream); }
section.deep .eyebrow { color: var(--copper-light); }
section.deep .sec-head h2::after { background: linear-gradient(90deg, var(--copper-light), var(--sage)); }
section.deep .lead, section.deep .how p { color: color-mix(in srgb, var(--cream) 82%, transparent); }
section.deep .how strong { color: var(--cream); }
section.deep .how .n { background: var(--copper-light); color: var(--deep); }
section.deep :where(a, button, input, select, textarea):focus-visible { outline-color: var(--copper-light); }
.sec-head { max-width: 60ch; margin-bottom: 36px; }
.sec-head h2 { margin: 8px 0 12px; }
.sec-head p { color: var(--ink-soft); font-size: 1.05rem; margin: 0; }
/* Portfolio */
.gallery { columns: 3; column-gap: var(--gap); }
.gallery figure { break-inside: avoid; margin: 0 0 var(--gap); border-radius: var(--r-md); overflow: hidden; background: var(--sage-2); }
.gallery img { width: 100%; height: auto; transition: transform .5s ease; }
.gallery figure:hover img { transform: scale(1.02); }
.gallery figcaption { padding: 10px 14px 12px; font-size: .9rem; color: var(--deep); font-weight: 600; background: var(--sage-2); border-top: 3px solid var(--moss); }
.gallery figure:nth-child(3n+2) figcaption { background: color-mix(in srgb, var(--copper) 18%, var(--paper)); border-top-color: var(--copper); color: var(--copper-2); }
.gallery figure:nth-child(3n) figcaption { background: var(--rose-2); border-top-color: var(--rose); color: var(--rose-ink); }
.gallery figure:nth-child(4n+1) figcaption { background: color-mix(in srgb, var(--blue) 16%, var(--paper)); border-top-color: var(--blue); color: var(--blue-ink); }
@media (max-width: 860px) { .gallery { columns: 2; } }
@media (max-width: 520px) { .gallery { columns: 1; } }
/* Made to order */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.card img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.card .body { padding: 16px 18px 18px; display: grid; gap: 6px; }
.card h3 { font-size: 1.15rem; }
.card .price { display: inline-block; color: var(--copper-2); font-weight: 700; font-size: .9rem; background: color-mix(in srgb, var(--copper) 16%, var(--paper)); padding: 3px 10px; border-radius: 999px; justify-self: start; }
.card { border-top: 4px solid var(--moss); }
.card:nth-child(2n) { border-top-color: var(--copper); }
.card:nth-child(3n) { border-top-color: var(--blue); }
.card:nth-child(4n) { border-top-color: var(--rose); }
.card p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.note { font-size: .9rem; color: var(--faint); margin-top: 18px; }
/* Form */
.split { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 28px; } }
form.order { display: grid; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow); }
form.order .row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { form.order .row { grid-template-columns: 1fr; } }
label { display: grid; gap: 6px; font-size: .9rem; font-weight: 500; color: var(--ink-soft); }
input, select, textarea { font: inherit; color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 11px 12px; min-height: 44px; }
textarea { min-height: 120px; resize: vertical; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-size: .95rem; color: var(--ink-soft); min-height: 1.4em; }
.form-status.ok { color: var(--green); font-weight: 600; }
.form-status.err { color: #9b2c2c; }
.how { display: grid; gap: 14px; }
.how .step { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.how .n { width: 36px; height: 36px; border-radius: 50%; background: var(--sage-2); color: var(--deep); font-family: var(--font-display); font-weight: 600; display: grid; place-items: center; }
.how p { margin: 0; color: var(--ink-soft); }
.how strong { color: var(--ink); }
/* Shows */
.shows { display: grid; gap: 12px; }
.show { display: grid; grid-template-columns: 96px 1fr auto; gap: 18px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 20px; }
.show { border-left: 5px solid var(--copper); }
.show:nth-child(2n) { border-left-color: var(--blue); }
.show .date { font-family: var(--font-display); font-weight: 600; color: var(--copper-2); line-height: 1.1; }
.show .date small { display: block; font-family: var(--font-body); font-weight: 500; color: var(--faint); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.show .where { color: var(--ink-soft); font-size: .95rem; }
.show .pill { font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--blue-ink); white-space: nowrap; }
@media (max-width: 600px) { .show { grid-template-columns: 1fr; gap: 6px; } }
/* Interview */
.qa { display: grid; gap: 26px; max-width: 72ch; }
.qa h3 { font-weight: 500; font-style: italic; color: var(--copper-2); font-size: 1.3rem; }
.qa p { color: var(--ink-soft); font-size: 1.05rem; }
.qa p.todo { color: var(--faint); font-style: italic; border-left: 3px dashed var(--rose); padding-left: 14px; }
.about-grid { display: grid; grid-template-columns: 1.3fr .7fr; gap: 48px; align-items: start; }
.about-grid figure { margin: 0; position: sticky; top: 96px; }
.about-grid img { border-radius: var(--r-leaf); box-shadow: var(--shadow); aspect-ratio: 4 / 5; object-fit: cover; }
.about-grid figcaption { margin-top: 10px; color: var(--faint); font-size: .85rem; text-align: center; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-grid figure { position: static; max-width: 420px; margin: 0 auto; } }
/* Follow */
.follow { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.follow a { display: flex; align-items: center; gap: 14px; text-decoration: none; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; min-height: 72px; box-shadow: var(--shadow); transition: transform var(--ease); }
.follow a:hover { transform: translateY(-2px); }
.follow svg { width: 28px; height: 28px; color: var(--green); flex: none; }
.follow a { border-top: 4px solid var(--green); }
.follow a.ig { border-top-color: var(--copper); } .follow a.ig svg { color: var(--copper); }
.follow a.tt { border-top-color: var(--deep); } .follow a.tt svg { color: var(--deep); }
.follow a.fb { border-top-color: var(--blue); } .follow a.fb svg { color: var(--blue-ink); }
.follow a.et { border-top-color: var(--moss); } .follow a.et svg { color: var(--moss); }
.follow strong { display: block; color: var(--deep); }
.follow span { color: var(--faint); font-size: .85rem; }
form.list { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
form.list input { flex: 1 1 260px; }
footer.site { padding: 56px 0 64px; background: var(--deep); color: color-mix(in srgb, var(--cream) 80%, transparent); }
.foot { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; font-size: .92rem; }
.foot .logo { width: 190px; height: 190px; }
.foot .lines { display: grid; gap: 6px; }
.foot .lines strong { font-family: var(--font-display); font-size: 1.4rem; color: var(--cream); font-weight: 600; }
.foot a { color: var(--copper-light); }
@media (max-width: 600px) { .foot { grid-template-columns: 1fr; justify-items: center; text-align: center; } .foot .logo { width: 150px; height: 150px; } }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
.gallery figure:hover img { transform: none; }
}
/* --- Two ways to order: the choice cards on the home page --- */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 760px) { .paths { grid-template-columns: 1fr; } }
.path { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-top: 5px solid var(--moss); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow); }
.path.is-custom { border-top-color: var(--copper); }
.path img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.path .body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.path h3 { font-size: 1.5rem; margin: 0; }
.path p { margin: 0; color: var(--ink-soft); }
.path ul { margin: 4px 0 0; padding-left: 1.1rem; color: var(--ink-soft); font-size: .95rem; display: grid; gap: 4px; }
.path .btn { align-self: start; margin-top: 16px; }
/* --- Subpage headers --- */
.page-head { padding: 54px 0 44px; background: linear-gradient(180deg, var(--sage-3), var(--cream)); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(2.1rem, 4.4vw, 3.2rem); margin: 8px 0 14px; }
.page-head .lead { max-width: 62ch; margin: 0; }
.page-head .back { display: inline-block; margin-top: 20px; color: var(--copper-2); font-size: .92rem; font-weight: 600; }
/* --- Classics: order buttons on each card --- */
/* Three across so five pieces land 3 + 2 instead of a lone card on its own row. */
@media (min-width: 900px) { #pieces .cards { grid-template-columns: repeat(3, 1fr); } }
#pieces .card .body { display: flex; flex-direction: column; align-items: flex-start; }
#pieces .card .body .btn { margin-top: auto; padding-top: 10px; }
.piece-field select { font-weight: 600; }
.form-intro { max-width: 60ch; margin: 0 0 22px; color: color-mix(in srgb, var(--cream) 82%, transparent); }
/* --faint is unreadable on the deep green panels. */
section.deep .note { color: color-mix(in srgb, var(--cream) 72%, transparent); }
section.deep .note a { color: var(--copper-light); }
/* --- Find me in person: the Soda City feature --- */
.soda { display: grid; grid-template-columns: 1.1fr .9fr; gap: 44px; align-items: center; }
.soda img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 18px 50px color-mix(in srgb, #000 35%, transparent); }
.soda h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin: 8px 0 10px; }
.soda .where { font-weight: 600; letter-spacing: .02em; color: var(--copper-light); margin: 0 0 14px; }
.soda .lead { margin-bottom: 22px; }
.btn.light { background: transparent; color: var(--cream); border-color: color-mix(in srgb, var(--cream) 55%, transparent); }
.btn.light:hover { background: color-mix(in srgb, var(--cream) 14%, transparent); }
.more-shows { margin-top: 48px; padding-top: 30px; border-top: 1px solid color-mix(in srgb, var(--cream) 18%, transparent); scroll-margin-top: 100px; }
.more-shows h3 { color: var(--cream); margin-bottom: 16px; }
@media (max-width: 860px) { .soda { grid-template-columns: 1fr; gap: 26px; } }
/* --- Photo-first gallery: no captions, the work does the talking --- */
.gallery.bare figure { background: none; box-shadow: var(--shadow); }
@media (max-width: 520px) { .gallery.bare { columns: 2; column-gap: 12px; } .gallery.bare figure { margin-bottom: 12px; border-radius: var(--r-sm); } }
.after-gallery { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.todo-block { color: var(--faint); font-style: italic; border: 2px dashed var(--rose); border-radius: var(--r-md); padding: 40px 24px; text-align: center; margin: 0; }
/* --- Commissions signpost --- */
.commission-strip { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.commission-strip h2 { margin: 8px 0 10px; }
.commission-strip p { margin: 0; color: var(--ink-soft); max-width: 52ch; }
.form-note { margin: 0; font-size: .9rem; font-weight: 600; color: var(--copper-2); }
/* --- Story --- */
.story h2 { margin: 8px 0 18px; }
.story p { color: var(--ink-soft); font-size: 1.05rem; max-width: 66ch; }
.story summary { cursor: pointer; font-weight: 600; color: var(--copper-2); min-height: 44px; display: inline-flex; align-items: center; }
.story details[open] summary { margin-bottom: 12px; }
/* Anchor jumps land below the sticky header, not under it. */
section[id] { scroll-margin-top: 84px; }
/* Compact header on a phone: the 1.3rem name ran under the menu button. */
@media (max-width: 520px) { header.site.scrolled .brand .name { font-size: 1.1rem; } }
@media (max-width: 360px) { header.site.scrolled .brand img { width: 44px; height: 44px; } header.site.scrolled .brand .name { font-size: .95rem; } }
/* The original iPhone SE is 320px wide. */
@media (max-width: 360px) { .brand { gap: 10px; } .brand img { width: 54px; height: 54px; } .brand .name { font-size: 1.05rem; } .brand .tag { display: none; } .bar { gap: 10px; } }
/* Short screens (an iPhone with Safari's bars showing is about 660px tall): tighten the panel so the action button and socials stay on screen. */
@media (max-width: 1040px) and (max-height: 780px) {
.nav-drawer { padding: 84px 24px 20px; }
.nav-drawer .drawer-logo { width: 78px; height: 78px; margin-bottom: 2px; }
.nav-drawer .drawer-links { gap: 0; }
.nav-drawer .drawer-links a { font-size: clamp(1.45rem, 6.4vw, 1.9rem); padding: 8px 4px; }
.nav-drawer .drawer-foot { gap: 12px; padding-top: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.nav-drawer, .nav-drawer .drawer-links a, .brand img, .brand .name, .brand .tag, .bar, nav.links a::after { transition: none !important; }
.nav-drawer .drawer-links a { opacity: 1; transform: none; }
}
/* ---------- Round 3 (2026-10-06): more flowery, more graphic ----------
Kate liked both vision looks: the vine-and-flower drawing goes on the
site, and arch-topped photos mix in with the others for variety. The
vine is a CSS background so every page shares it from this one file. */
:root { --vine: url("data:image/svg+xml,"); --sprig: url("data:image/svg+xml,"); --r-arch: 999px 999px 18px 18px; }
.hero::before, .hero::after, section.alt::before, section.sage::before {
content: ''; position: absolute; pointer-events: none; z-index: 0;
background: var(--vine) no-repeat center / contain; }
.hero::before { top: -18px; right: -26px; width: min(44vw, 440px); aspect-ratio: 420 / 260; opacity: .9; }
.hero::after { bottom: -20px; left: -30px; width: min(36vw, 340px); aspect-ratio: 420 / 260; transform: scale(-1, -1); opacity: .75; }
.hero .wrap, section > .wrap { position: relative; z-index: 1; }
section.alt, section.sage { position: relative; overflow: hidden; }
/* Headings sit on the left, so the section vines stay on the right. */
section.alt::before { top: -14px; right: -30px; width: min(30vw, 300px); aspect-ratio: 420 / 260; opacity: .55; }
section.sage::before { bottom: -16px; right: -24px; width: min(30vw, 300px); aspect-ratio: 420 / 260; transform: scaleY(-1); opacity: .6; }
.sec-head h2::after { width: 120px; height: 24px; border-radius: 0; background: var(--sprig) no-repeat left center / contain; margin-top: 10px; }
section.deep .sec-head h2::after { background: var(--sprig) no-repeat left center / contain; filter: brightness(1.6) saturate(.8); }
/* Hero slideshow: photos stacked, one shown, crossfading. */
/* The photos are all absolutely placed, so the frame has no width of its own:
without this it collapses to nothing in the one-column phone layout. */
.hero-art { width: 100%; }
.hero-slides { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-arch); overflow: hidden; box-shadow: var(--shadow); background: var(--sage-2); }
.hero-art .hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; box-shadow: none; opacity: 0; transition: opacity 1.4s ease; }
.hero-art .hero-slides img.on { opacity: 1; }
.slide-dots { position: absolute; left: 0; right: 0; bottom: 14px; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.slide-dots button { width: 10px; height: 10px; padding: 0; border-radius: 50%; border: 1.5px solid var(--paper); background: color-mix(in srgb, var(--paper) 35%, transparent); cursor: pointer; }
.slide-dots button[aria-current="true"] { background: var(--paper); }
.slide-dots button:focus-visible { outline: 2px solid var(--copper-light); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hero-art .hero-slides img { transition: none; } }
.gallery figure:nth-child(4n+2), .gallery figure:nth-child(4n+4):not(:nth-child(8n)) { border-radius: var(--r-arch); }
.about-grid figure img { border-radius: var(--r-arch); }
@media (max-width: 860px) {
.hero::before { width: 62vw; top: -10px; right: -18px; opacity: .55; }
.hero::after { display: none; }
section.alt::before, section.sage::before { width: 46vw; opacity: .35; }
}
/* More vines (2026-10-06): leafy sprigs and a hanging garland, scattered so
every section carries some. Leaves only, no flowers: Kate's call, the
coloured dots read as Christmas lights on the dark green. Decorative only. */
:root { --blossoms: url("data:image/svg+xml,"); --blossoms-light: url("data:image/svg+xml,"); --garland: url("data:image/svg+xml,"); }
section.alt::after, section.deep::before, section.deep::after, .hero-art::after, footer.site::before {
content: ''; position: absolute; pointer-events: none; z-index: 0; background-repeat: no-repeat; background-size: contain; }
section.deep { position: relative; overflow: hidden; }
/* Bottom right: buttons and links sit bottom left. */
section.alt::after { bottom: -8px; right: -14px; width: min(22vw, 220px); aspect-ratio: 220 / 150; background-image: var(--blossoms); opacity: .7; }
section.deep::before { top: -10px; right: -20px; width: min(30vw, 300px); aspect-ratio: 420 / 260; background-image: var(--vine); opacity: .28; }
section.deep::after { bottom: -6px; left: -10px; width: min(22vw, 220px); aspect-ratio: 220 / 150; background-image: var(--blossoms-light); opacity: .55; }
.hero-art::after { bottom: -26px; left: -34px; width: 42%; aspect-ratio: 220 / 150; background-image: var(--blossoms); z-index: 3; }
footer.site { position: relative; }
footer.site::before { top: 0; left: 0; right: 0; height: 40px; background-image: var(--garland); background-repeat: repeat-x; background-size: auto 40px; opacity: .8; }
footer.site > * { position: relative; z-index: 1; }
@media (max-width: 860px) {
section.alt::after, section.deep::after { width: 38vw; opacity: .45; }
section.deep::before { width: 50vw; }
.hero-art::after { left: -14px; bottom: -18px; width: 38%; }
}
/* Admin-driven pieces (2026-10-06): shown only when Kaitlyn switches them on. */
.announce { background: var(--deep); color: var(--cream); text-align: center; font-size: .92rem; font-weight: 600; padding: 9px 16px; }
.announce a { color: var(--copper-light); text-decoration: none; }
/* Launch countdown (2026-10-10): a deep-green band under the header. */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.launch { background: var(--deep); color: var(--cream); text-align: center; padding: 44px 0 40px; }
.launch-in { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.launch-when { margin: 0; font-size: .8rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--copper-light); }
.launch-title { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: var(--track-display); font-size: clamp(2rem, 5.5vw, 3.4rem); line-height: 1.08; color: var(--cream); max-width: 18ch; }
.launch-clock { display: flex; align-items: flex-start; justify-content: center; gap: clamp(10px, 3vw, 28px); margin: 6px 0 2px; }
.launch-clock div { display: flex; flex-direction: column; align-items: center; min-width: 3.2ch; }
.launch-clock b { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--cream); }
.launch-clock span { margin-top: 6px; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--sage); }
.launch-msg { margin: 0; max-width: 56ch; color: var(--sage-2); font-size: 1rem; }
.launch-msg:empty { display: none; }
.launch-form { display: flex; gap: 8px; width: 100%; max-width: 440px; flex-wrap: wrap; justify-content: center; }
.launch-form input[type=email] { flex: 1 1 220px; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--sage); background: var(--paper); color: var(--ink); font: inherit; }
.launch-form .btn.primary { background: var(--copper); }
.launch-form .btn.primary:hover { background: var(--copper-2); }
.launch .form-status { color: var(--sage-2); }
.launch .form-status.ok { color: var(--copper-light); }
.launch .form-status.err { color: #f2b8b8; }
.launch.is-open .launch-clock, .launch.is-open .launch-form { display: none; }
.launch #launchSee { background: var(--copper); }
.card.coming-soon img { filter: saturate(.85); }
.card .pill.soon { background: var(--deep); color: var(--cream); }
.pay-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--gap); }
.pay { display: grid; gap: 2px; padding: 18px 20px; border-radius: var(--r-md); background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--moss); text-decoration: none; color: var(--deep); box-shadow: var(--shadow); transition: transform var(--ease); }
.pay:hover { transform: translateY(-2px); }
.pay strong { font-family: var(--font-display); font-size: 1.25rem; }
.pay span { color: var(--ink-soft); }
.pay.venmo { border-top-color: var(--blue); }
.pay.cashapp { border-top-color: var(--moss); }
.pay.square { border-top-color: var(--copper); }
.pay-note { color: var(--ink-soft); margin: 16px 0 0; }
.list-offer { flex-basis: 100%; margin: 0; color: var(--copper-2); font-weight: 600; }
.form-status .code { font-family: var(--font-display); letter-spacing: .06em; color: var(--deep); background: var(--rose-2); padding: 2px 10px; border-radius: 999px; }
.supplies-link { margin: 18px 0 0; }
.supplies-link a { color: var(--green); font-weight: 600; }
.show strong a { color: inherit; }
.supplies { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); }
/* Meet the artist page (2026-10-06). */
.artist { display: grid; grid-template-columns: 1.1fr .9fr; gap: 46px; align-items: start; }
.artist .story p { font-size: 1.05rem; }
.artist figure { margin: 0; position: sticky; top: 96px; }
.artist figure img { width: 100%; border-radius: var(--r-arch); box-shadow: var(--shadow); }
.tip { margin-top: 26px; display: grid; gap: 8px; justify-items: start; }
.tip small { color: var(--ink-soft); }
@media (max-width: 860px) { .artist { grid-template-columns: 1fr; } .artist figure { position: static; max-width: 420px; margin: 0 auto; } }
/* Phone header (2026-10-06): before scrolling, the name ran 12-26px under the
menu button on every page. Let the brand shrink, and on narrow phones let
the name wrap to two lines instead of forcing it onto one. */
@media (max-width: 1040px) {
.bar { gap: 12px; }
.brand { min-width: 0; flex: 1 1 auto; }
.brand > span { min-width: 0; }
.nav-hamburger { flex: none; }
}
@media (max-width: 520px) { .brand .name { white-space: normal; font-size: 1.2rem; } }
/* Event titles sit on white cards inside the dark section: they must not
inherit its cream text colour (they were nearly invisible). */
.show strong, .show strong a { color: var(--deep); }
/* `hidden` always wins over a component's own display rule (the tip box is a
grid, the admin's save bar is flex): twice now that made hidden things show. */
[hidden] { display: none !important; }
/* Line icons on the menu and buttons (2026-10-06). */
.ico { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.18em; }
nav.links a .ico { margin-right: 6px; opacity: .85; }
.btn .ico { width: 1.15em; height: 1.15em; }
.nav-drawer .drawer-links a .ico { width: .8em; height: .8em; align-self: center; color: var(--moss); }
.supplies-link a .ico { margin-right: 6px; }
.pay strong .ico { margin-right: 6px; color: var(--moss); }
/* For sale: counts and sold out (site.js renderSale) */
.card .count { display: inline-block; margin-left: 8px; font-size: .8rem; color: var(--ink-soft); }
.card.sold-out img { opacity: .55; filter: grayscale(.4); }
.card .pill { justify-self: start; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, var(--paper)); color: var(--ink-soft); }
/* Commissions form opened from "Ask about this one" */
.piece-banner { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--sage) 35%, var(--paper)); color: var(--deep); font-size: .95rem; }
.piece-banner img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; flex: none; }
.piece-banner[hidden] { display: none; }
/* Order: the copper pill in every header (next to the menu button on phones). */
.order-cta { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 44px; padding: 0 1.05rem; border-radius: 999px; background: var(--copper); color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 16px color-mix(in srgb, var(--copper) 30%, transparent); transition: background var(--ease), transform var(--ease); }
.order-cta:hover, .order-cta.current { background: var(--copper-2); }
.order-cta:hover { transform: translateY(-1px); }
.order-cta .ico { width: 1.1em; height: 1.1em; }
@media (max-width: 1040px) { .order-cta { margin-left: auto; } }
@media (max-width: 380px) { .order-cta { padding: 0 .8rem; } }
/* Home hero: "or see the work" under the two buttons. */
.see-work { display: inline-block; margin-top: 14px; color: var(--ink-soft); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.see-work:hover { color: var(--deep); }
/* "Custom orders open" stamp on the hero photo: a tilted copper seal. */
.hero-art .stamp { position: absolute; left: -5%; bottom: 7%; width: 27%; min-width: 92px; max-width: 150px; aspect-ratio: 1; transform: rotate(-12deg); transition: transform .25s ease; filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--deep) 28%, transparent)); z-index: 2; }
.hero-art .stamp:hover, .hero-art .stamp:focus-visible { transform: rotate(-4deg) scale(1.05); }
.stamp svg { width: 100%; height: 100%; display: block; }
.stamp .s-bg { fill: var(--copper); }
.stamp .s-line { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.2; stroke-dasharray: 2 3; }
.stamp .s-ring { fill: #fff; font-family: var(--font-body); font-weight: 600; font-size: 10.5px; letter-spacing: .06em; }
.stamp .s-mid { fill: #fff; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 15px; }
@media (max-width: 860px) { .hero-art .stamp { left: -2%; bottom: 4%; } }
@media (prefers-reduced-motion: reduce) { .hero-art .stamp, .order-cta { transition: none; } }
/* Order page: two clear paths. */
#choose { padding: 46px 0 56px; }
.choose { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 22px; }
.choice { display: grid; grid-template-rows: auto 1fr; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink); box-shadow: var(--shadow); transition: transform var(--ease), box-shadow var(--ease); }
.choice:hover { transform: translateY(-3px); box-shadow: 0 18px 40px color-mix(in srgb, var(--deep) 16%, transparent); }
.choice img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.choice-body { display: grid; align-content: start; gap: 10px; padding: 22px 24px 26px; }
.choice-body h2 { margin: 0; color: var(--deep); }
.choice-body p { margin: 0; color: var(--ink-soft); }
.choice-body .btn { justify-self: start; margin-top: 6px; }
#ready .remakes { margin-top: 10px; display: grid; justify-items: start; gap: 6px; }
#ready #available + .remakes { margin-top: 48px; }
/* Phones: the header has no room for the Order pill, so it floats bottom-right
instead (a sibling of the header; see the note in the pages). Not on the
Order page itself, and hidden while the menu is open. */
.order-float { display: none; }
@media (max-width: 520px) {
.bar .order-cta { display: none; }
.order-float { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; min-height: 52px; padding: 0 1.3rem; border-radius: 999px; background: var(--copper); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; box-shadow: 0 10px 26px color-mix(in srgb, var(--copper-2) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--deep) 20%, transparent); }
.order-float:active { background: var(--copper-2); }
.order-float .ico { width: 1.15em; height: 1.15em; }
body.nav-open .order-float, body.hero-ctas-visible .order-float { display: none; }
/* Leave room so the floating button never hides the last line of the footer. */
footer.site { padding-bottom: 84px; }
}
/* Wide screens: cap the hero photo's height to the window, so the headline
isn't centered far down beside a very tall picture (the empty band above
"Handmade ยท One of a kind", 2026-10-07). */
@media (min-width: 861px) {
.hero .wrap { padding-top: 48px; padding-bottom: 56px; }
/* Only the slideshow photos (not the round logo badge, also an img). */
.hero-slides img { max-height: min(620px, calc(100svh - 230px)); min-height: 380px; }
/* Text starts at the top of the photo instead of being centered beside it. */
.hero .wrap > div:first-child { align-self: start; padding-top: clamp(24px, 6vh, 64px); }
}