:root {
--paper: #f7f5f0;          
--paper-white: #fffefb;    
--paper-shade: #eeeae1;    
--line: #d9d3c6;           
--line-soft: #e7e2d7;
--ink: #23303c;            
--ink-soft: #4d5a66;       
--ink-faint: #6b7680;      
--indigo: #2f4f73;         
--indigo-deep: #223b58;
--indigo-wash: rgba(47, 79, 115, 0.09);
--sap: #56694b;            
--sap-wash: rgba(86, 105, 75, 0.12);
--sienna: #8a5d1f;         
--sienna-wash: rgba(176, 124, 52, 0.14);
--madder: #8a4656;         
--madder-wash: rgba(138, 70, 86, 0.1);
--wash-a: rgba(47, 79, 115, 0.13);
--wash-b: rgba(86, 105, 75, 0.12);
--serif: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
--sans: 'Hanken Grotesk', 'Segoe UI', system-ui, -apple-system, sans-serif;
--script: 'La Belle Aurore', 'Brush Script MT', cursive;
--step--1: 0.875rem;
--step-0: 1.0625rem;
--step-1: 1.25rem;
--step-2: 1.6rem;
--step-3: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
--step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.2rem);
--step-5: clamp(2.5rem, 1.6rem + 4.4vw, 5.1rem);
--leading-tight: 1.12;
--leading-body: 1.6;
--leading-serif: 1.7;
--measure: 66ch;
--s-1: 0.25rem;
--s-2: 0.5rem;
--s-3: 0.75rem;
--s-4: 1rem;
--s-5: 1.5rem;
--s-6: 2rem;
--s-7: 3rem;
--s-8: 4.5rem;
--s-9: 7rem;
--gutter: clamp(1rem, 4vw, 3.5rem);
--page-max: 1360px;
--radius-ui: 3px;          
--radius-chip: 999px;      
--mat: clamp(10px, 4.5%, 28px);  
--shadow-hang: 0 1px 0 rgba(35, 48, 60, 0.04), 0 18px 32px -20px rgba(35, 48, 60, 0.35), 0 2px 6px -2px rgba(35, 48, 60, 0.08);
--shadow-lift: 0 1px 0 rgba(35, 48, 60, 0.05), 0 28px 44px -24px rgba(35, 48, 60, 0.42), 0 4px 10px -4px rgba(35, 48, 60, 0.1);
--shadow-note: 0 20px 40px -24px rgba(35, 48, 60, 0.45);
--ease-wash: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-settle: cubic-bezier(0.2, 0.7, 0.1, 1);
--dur-quick: 180ms;
--dur-soft: 420ms;
--dur-bloom: 1600ms;
--focus: 0 0 0 3px var(--paper), 0 0 0 5px var(--indigo);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
body {
margin: 0;
background-color: var(--paper);
background-image: url('/images/textures/paper-grain.svg');
background-size: 360px 360px;
background-attachment: fixed;
color: var(--ink);
font-family: var(--sans);
font-size: var(--step-0);
line-height: var(--leading-body);
font-kerning: normal;
font-variant-numeric: proportional-nums;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: var(--leading-tight); margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
a { color: var(--indigo); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--indigo-deep); text-decoration-thickness: 2px; }
strong { font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
main:focus { outline: none; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-ui); }
a:focus-visible { border-radius: 2px; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
position: absolute; left: var(--s-4); top: -100px; z-index: 100;
background: var(--ink); color: var(--paper-white); padding: var(--s-3) var(--s-4);
border-radius: var(--radius-ui); text-decoration: none;
}
.skip-link:focus { top: var(--s-4); }
.muted { color: var(--ink-soft); }
[hidden] { display: none !important; }
.prose { max-width: var(--measure); font-family: var(--serif); font-size: 1.125rem; line-height: var(--leading-serif); }
.prose h2 { font-size: var(--step-2); margin: var(--s-6) 0 var(--s-3); }
.prose p { margin-bottom: var(--s-4); }
.site-header {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; gap: var(--s-5);
padding: var(--s-4) var(--gutter);
background: var(--paper) url('/images/textures/paper-grain.svg') 0 0 / 360px 360px fixed;
border-bottom: 1px solid transparent;
transition: border-color var(--dur-soft) var(--ease-wash), padding var(--dur-soft) var(--ease-wash);
}
.site-header.is-scrolled { border-bottom-color: var(--line-soft); padding-block: var(--s-3); }
.wordmark { color: var(--ink); text-decoration: none; display: inline-block; flex: 0 0 auto; }
.wordmark:hover { color: var(--ink); }
.wordmark__text { display: flex; flex-direction: column; line-height: 1; }
.wordmark__l1 { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem); letter-spacing: -0.01em; }
.wordmark__l2 { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.06em; color: var(--ink-soft); margin-top: 0.35em; padding-left: 0.1em; }
.wordmark__logo { max-height: 56px; width: auto; }
.site-nav { margin-left: auto; display: none; }
.site-nav__list { list-style: none; display: flex; gap: clamp(1rem, 2vw, 2rem); }
.site-nav a {
color: var(--ink); text-decoration: none; font-size: 0.97rem; font-weight: 500;
padding: 0.6rem 0.1rem; display: inline-flex; align-items: center; min-height: 44px; position: relative;
}
.site-nav a::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 6px;
background: url('/images/textures/brush-underline.svg') no-repeat center / 100% 100%;
opacity: 0; transform: scaleX(0.4); transform-origin: left center;
transition: opacity var(--dur-soft) var(--ease-wash), transform var(--dur-soft) var(--ease-wash);
}
.site-nav a:hover::after, .site-nav a[aria-current='page']::after { opacity: 1; transform: scaleX(1); }
.site-header__tools { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.menu-toggle {
display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0 0.6rem;
background: none; border: 0; cursor: pointer; font-weight: 500; color: var(--ink);
}
.menu-toggle__lines { display: grid; gap: 5px; width: 22px; }
.menu-toggle__lines span { height: 1.5px; background: currentColor; border-radius: 2px; transition: transform var(--dur-soft) var(--ease-wash); }
.menu-toggle[aria-expanded='true'] .menu-toggle__lines span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle[aria-expanded='true'] .menu-toggle__lines span:last-child { transform: translateY(-3.25px) rotate(-45deg); }
.mobile-menu {
position: fixed; inset: 0; z-index: 35; padding: 7rem var(--gutter) var(--s-7);
background: var(--paper); overflow-y: auto;
display: flex; flex-direction: column; justify-content: space-between;
}
.mobile-menu ul { list-style: none; display: grid; gap: var(--s-2); }
.mobile-menu a {
font-family: var(--serif); font-size: var(--step-3); color: var(--ink); text-decoration: none;
display: block; padding: 0.35rem 0; min-height: 44px;
}
.mobile-menu a[aria-current='page'] { color: var(--indigo); font-style: italic; }
.mobile-menu__call { margin-top: var(--s-6); }
.mobile-menu__script { font-family: var(--script); font-size: 1.8rem; color: var(--ink-faint); margin-top: var(--s-6); }
body.menu-open { overflow: hidden; }
@media (min-width: 1000px) {
.site-nav { display: block; }
.site-header__tools { margin-left: var(--s-4); }
.menu-toggle { display: none; }
.mobile-menu { display: none !important; }
}
.demo-ribbon { margin: 0; padding: 0.4rem var(--gutter); background: var(--sienna-wash); color: var(--ink); font-size: 0.9rem; text-align: center; }
main { display: block; }
.section, .page-intro, .steps, .meet, .about, .contact, .thanks, .policy, .lost, .story, .artwork-page, .art-story {
width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter);
}
.section { padding-block: clamp(3rem, 7vw, 6.5rem); }
.section--quiet { padding-block: var(--s-6) var(--s-8); }
.section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-3) var(--s-5); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.section__link { font-weight: 500; }
.section-title { font-size: var(--step-3); font-weight: 300; }
.page-intro { padding-block: clamp(2.5rem, 7vw, 6rem) clamp(1rem, 3vw, 2.5rem); }
.page-title { font-size: var(--step-4); font-weight: 300; max-width: 22ch; }
.page-lede { font-family: var(--serif); font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; margin-top: var(--s-5); }
.link-list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); font-family: var(--serif); font-size: var(--step-1); }
.hang {
display: grid; grid-template-columns: minmax(0, 1fr);
row-gap: clamp(3rem, 9vw, 5rem);
}
.hang__item { min-width: 0; }
@media (max-width: 599px) {
.hang__item:is([data-pos='2'], [data-pos='5']) { padding-left: 14%; }
.hang__item:is([data-pos='3'], [data-pos='6']) { padding-right: 10%; }
}
@media (min-width: 600px) and (max-width: 899px) {
.hang { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.25rem, 4vw, 2.5rem); }
.hang__item:is([data-pos='2'], [data-pos='4'], [data-pos='6']) { margin-top: clamp(3rem, 12vw, 7rem); }
.hang--count-1 { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
.hang--count-1 .hang__item { margin-top: 0; }
}
@media (min-width: 900px) {
.hang { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 3vw, 3rem); row-gap: clamp(3.5rem, 6vw, 6rem); align-items: start; }
.hang__item[data-pos='1'] { grid-column: 1 / span 7; }
.hang__item[data-pos='2'] { grid-column: 9 / span 4; margin-top: clamp(4rem, 9vw, 9rem); }
.hang__item[data-pos='3'] { grid-column: 2 / span 4; }
.hang__item[data-pos='4'] { grid-column: 7 / span 6; margin-top: clamp(2rem, 5vw, 5rem); }
.hang__item[data-pos='5'] { grid-column: 1 / span 5; margin-top: clamp(0rem, 2vw, 2rem); }
.hang__item[data-pos='6'] { grid-column: 7 / span 5; margin-top: clamp(4rem, 8vw, 8rem); }
.hang--count-1 .hang__item { grid-column: 3 / span 8; }
.hang--count-3 .hang__item[data-pos='3'] { grid-column: 4 / span 5; }
}
.site-footer { margin-top: clamp(4rem, 8vw, 7rem); padding: 0 var(--gutter) var(--s-6); max-width: var(--page-max); margin-inline: auto; }
.site-footer__brushline { height: 18px; background: url('/images/textures/brush-rule.svg') no-repeat left center / min(100%, 900px) 100%; opacity: 0.8; margin-bottom: var(--s-7); }
.site-footer__grid { display: grid; gap: var(--s-7) var(--s-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .site-footer__grid { grid-template-columns: 1.8fr 1fr 1fr; } }
.site-footer__statement { color: var(--ink-soft); margin-top: var(--s-4); max-width: 34ch; }
.site-footer__h { font-family: var(--sans); font-size: 0.95rem; font-weight: 600; margin-bottom: var(--s-3); letter-spacing: 0; }
.site-footer__nav ul { list-style: none; display: grid; gap: 0.15rem; }
.site-footer__nav a { color: var(--ink); text-decoration: none; display: inline-block; padding: 0.35rem 0; }
.site-footer__nav a:hover { text-decoration: underline; }
.site-footer__buy { color: var(--ink-soft); margin-bottom: var(--s-3); max-width: 28ch; }
.site-footer__buy strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
.site-footer__copy { margin-top: var(--s-7); padding-top: var(--s-4); border-top: 1px solid var(--line-soft); font-size: var(--step--1); color: var(--ink-faint); }
.social-follow { margin-top: var(--s-7); }
.social-follow__heading { font-size: var(--step-1); }
.social-follow ul { list-style: none; display: flex; gap: var(--s-5); margin-top: var(--s-3); }
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
min-height: 48px; padding: 0.75rem 1.4rem;
font-family: var(--sans); font-size: 1rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.005em;
border-radius: var(--radius-ui); border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
transition: background-color var(--dur-quick) ease, color var(--dur-quick) ease, border-color var(--dur-quick) ease, transform var(--dur-quick) ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--indigo); color: var(--paper-white); }
.btn--primary:hover { background: var(--indigo-deep); color: var(--paper-white); }
.btn--secondary { background: transparent; color: var(--indigo); border-color: currentColor; }
.btn--secondary:hover { background: var(--indigo-wash); color: var(--indigo-deep); }
.btn--quiet { min-height: 44px; padding: 0.55rem 1rem; background: var(--paper-white); color: var(--indigo); border-color: var(--line); font-weight: 500; }
.btn--quiet:hover { border-color: var(--indigo); color: var(--indigo-deep); }
.btn--text { background: none; color: var(--indigo); padding-inline: 0.25rem; text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.btn--text:hover { text-decoration-thickness: 2px; color: var(--indigo-deep); }
.btn--wide { width: 100%; }
.btn[aria-disabled='true'], .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.frame {
--frame-max-h: 78vh;
position: relative;
width: min(100%, calc(var(--frame-max-h) * var(--ratio, 0.8)));
margin-inline: auto;
}
.frame__mat {
background: var(--paper-white);
padding: var(--mat);
box-shadow: var(--shadow-hang);
transition: box-shadow var(--dur-soft) var(--ease-wash), transform var(--dur-soft) var(--ease-wash);
}
.frame__paint { position: relative; aspect-ratio: var(--ratio, 0.8); overflow: hidden; background: var(--paper-shade); }
.frame__paint img { width: 100%; height: 100%; object-fit: cover; }
.frame__paint picture { height: 100%; }
.frame--deckle { filter: drop-shadow(0 22px 22px rgba(35, 48, 60, 0.18)) drop-shadow(0 2px 3px rgba(35, 48, 60, 0.08)); }
.frame--deckle .frame__mat {
box-shadow: none;
-webkit-mask: url('/images/textures/deckle-mask.svg') center / 100% 100% no-repeat;
mask: url('/images/textures/deckle-mask.svg') center / 100% 100% no-repeat;
padding: calc(var(--mat) * 1.35);
}
.frame--photo .frame__mat { padding: calc(var(--mat) * 0.8); }
.frame__paint--empty { background: var(--paper-white); }
.empty-art {
position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 0.5rem;
padding: 1rem; text-align: center; color: var(--ink-faint);
background:
linear-gradient(var(--line) 0 0) top 10% left 10% / 18% 1px no-repeat,
linear-gradient(var(--line) 0 0) top 10% left 10% / 1px 18% no-repeat,
linear-gradient(var(--line) 0 0) bottom 10% right 10% / 18% 1px no-repeat,
linear-gradient(var(--line) 0 0) bottom 10% right 10% / 1px 18% no-repeat,
radial-gradient(60% 50% at 55% 45%, var(--indigo-wash), transparent 70%);
}
.empty-art__mark { width: 2.4rem; height: 2.4rem; opacity: 0.7; }
.empty-art__line { font-family: var(--serif); font-style: italic; font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.15rem); max-width: 20ch; line-height: 1.35; color: var(--ink-soft); }
.empty-art__tag { font-size: 0.75rem; letter-spacing: 0.03em; padding: 0.15rem 0.55rem; border: 1px dashed var(--line); border-radius: var(--radius-chip); }
.wall-label { margin-top: var(--s-4); max-width: 38ch; }
.wall-label__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--step-1); line-height: 1.25; overflow-wrap: anywhere; }
.wall-label__title a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor 0 0) left bottom / 0 1px no-repeat; transition: background-size var(--dur-soft) var(--ease-wash); }
.wall-label__title a:hover { background-size: 100% 1px; }
.wall-label__meta { margin: 0.35rem 0 0; font-size: 0.93rem; color: var(--ink-soft); line-height: 1.45; }
.wall-label__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.55rem; }
.wall-label__price { font-weight: 600; font-variant-numeric: lining-nums; }
.badge { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; font-weight: 500; color: var(--ink-soft); }
.badge__dot { width: 0.7rem; height: 0.7rem; border-radius: 48% 52% 45% 55% / 55% 45% 55% 45%; background: currentColor; flex: none; }
.badge--available { color: var(--sap); }
.badge--reserved { color: var(--sienna); }
.badge--sold { color: var(--madder); }
.badge--coming-soon, .badge--not-for-sale { color: var(--ink-faint); }
.badge--not-for-sale .badge__dot { background: transparent; border: 1.5px dashed currentColor; }
.badge--coming-soon .badge__dot { background: transparent; border: 1.5px solid currentColor; }
.art-card { position: relative; }
.art-card__image { display: block; }
.art-card__image:hover .frame__mat { box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.art-card__image .frame__paint img { transition: transform 1.2s var(--ease-wash); }
.art-card__image:hover .frame__paint img { transform: scale(1.025); }
.art-card--sold .frame__paint img { filter: saturate(0.8); }
.hang__item .frame { margin-inline: 0; }
.hang__item:is([data-pos='2'], [data-pos='4']) .frame { --frame-max-h: 70vh; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-bottom: clamp(2.5rem, 5vw, 4rem); padding-bottom: var(--s-5); border-bottom: 1px solid var(--line-soft); }
.filters__group { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.filters__count { margin: 0 0 0 auto; color: var(--ink-soft); font-size: 0.95rem; }
.chip {
min-height: 44px; padding: 0.5rem 1.05rem; border-radius: var(--radius-chip); cursor: pointer;
background: transparent; border: 1px solid var(--line); color: var(--ink); font-weight: 500; font-size: 0.95rem;
transition: background-color var(--dur-quick) ease, border-color var(--dur-quick) ease;
}
.chip:hover { border-color: var(--ink-soft); }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--paper-white); }
.toggle { display: inline-flex; align-items: center; gap: 0.7rem; cursor: pointer; min-height: 44px; font-size: 0.95rem; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle__track { width: 2.6rem; height: 1.5rem; border-radius: 1rem; background: var(--line); position: relative; transition: background var(--dur-quick) ease; flex: none; }
.toggle__track::after { content: ''; position: absolute; top: 3px; left: 3px; width: calc(1.5rem - 6px); height: calc(1.5rem - 6px); border-radius: 50%; background: var(--paper-white); transition: transform var(--dur-soft) var(--ease-wash); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.toggle input:checked + .toggle__track { background: var(--sap); }
.toggle input:checked + .toggle__track::after { transform: translateX(1.1rem); }
.toggle input:focus-visible + .toggle__track { box-shadow: var(--focus); }
.field { display: grid; gap: 0.35rem; margin-bottom: var(--s-4); min-width: 0; }
.field label, .field__label-static { font-weight: 500; font-size: 0.95rem; }
.field__opt { font-weight: 400; color: var(--ink-faint); }
.field input, .field select, .field textarea {
width: 100%; min-height: 48px; padding: 0.7rem 0.85rem;
background: var(--paper-white); border: 1px solid #b9b2a4; border-radius: var(--radius-ui);
transition: border-color var(--dur-quick) ease, box-shadow var(--dur-quick) ease;
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-wash); }
.field [aria-invalid='true'] { border-color: var(--madder); }
.field__hint { margin: 0; font-size: 0.88rem; color: var(--ink-faint); }
.field__error { margin: 0; font-size: 0.9rem; color: var(--madder); font-weight: 500; }
.field__error:empty { display: none; }
.field__static { margin: 0; display: grid; gap: 0.35rem; }
.field-row { display: grid; gap: 0 var(--s-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1.6fr 1fr 1fr; } }
.fieldset { border: 0; padding: 0; margin: 0 0 var(--s-6); min-width: 0; }
.fieldset legend { font-family: var(--serif); font-size: var(--step-2); font-weight: 400; padding: 0; margin-bottom: var(--s-4); }
.form-status { margin: var(--s-3) 0 0; font-size: 0.95rem; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--madder); font-weight: 500; }
.form-status.is-success { color: var(--sap); font-weight: 500; }
.form-fineprint { font-size: 0.85rem; color: var(--ink-faint); margin-top: var(--s-3); line-height: 1.45; }
.pencil-note {
position: relative; max-width: 52ch; margin: var(--s-4) 0; padding: 0.85rem 1rem 0.85rem 1.1rem;
font-family: var(--serif); font-style: italic; color: var(--ink-soft); font-size: 1rem; line-height: 1.5;
border-left: 2px solid var(--line); background: linear-gradient(90deg, var(--sienna-wash), transparent 70%);
}
.pencil-note__tag { display: block; font-family: var(--sans); font-style: normal; font-size: 0.78rem; font-weight: 600; color: var(--sienna); margin-bottom: 0.15rem; letter-spacing: 0.02em; }
.notice { padding: var(--s-4) var(--s-5); background: var(--paper-white); border: 1px solid var(--line); border-radius: var(--radius-ui); max-width: 70ch; margin-block: var(--s-4); }
.notice--soft { background: var(--sienna-wash); border-color: transparent; }
.notice--placeholder { border-left: 3px solid var(--sienna); }
.empty-state { text-align: center; max-width: 34rem; margin: var(--s-6) auto; padding: var(--s-6) var(--s-4); position: relative; }
.empty-state__wash { width: min(240px, 60%); margin: 0 auto var(--s-4); }
.empty-state__title { font-size: var(--step-3); font-weight: 300; }
.empty-state__body { color: var(--ink-soft); margin-top: var(--s-3); }
.empty-state__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); }
.empty-state__form { margin-bottom: var(--s-7); }
.loading-state { display: grid; justify-items: center; gap: var(--s-3); padding: var(--s-8) 0; color: var(--ink-soft); }
.loading-state__stroke { width: 120px; height: 24px; }
.loading-state__stroke path { fill: none; stroke: var(--indigo); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 130; stroke-dashoffset: 130; animation: stroke-draw 1.4s var(--ease-wash) infinite alternate; opacity: 0.6; }
.signature { display: inline-block; font-family: var(--script); font-size: clamp(2.4rem, 2rem + 1.5vw, 3.2rem); color: var(--indigo); line-height: 1.1; padding: 0.1em 0.3em 0.1em 0; }
.signature--footer { font-size: 2.4rem; margin-top: var(--s-4); color: var(--ink-soft); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; font-size: 0.92rem; color: var(--ink-soft); }
.breadcrumb li + li::before { content: '/'; margin-right: 0.5rem; color: var(--line); }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb [aria-current] { color: var(--ink); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.collections-grid { display: grid; gap: clamp(3rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.collection-card__link { display: block; color: var(--ink); text-decoration: none; }
.collection-card__stack { position: relative; aspect-ratio: 1; display: grid; place-items: center; margin-bottom: var(--s-5); }
.collection-card__sheet { position: absolute; width: 74%; transition: transform var(--dur-soft) var(--ease-wash); }
.collection-card__sheet .frame { --frame-max-h: 100vh; width: 100%; }
.collection-card__sheet .frame__paint { aspect-ratio: 1; }
.collection-card__sheet--0 { z-index: 3; }
.collection-card__sheet--1 { z-index: 2; transform: translate(-12%, -6%) rotate(-4deg); }
.collection-card__sheet--2 { z-index: 1; transform: translate(12%, -3%) rotate(3.5deg); }
.collection-card__link:hover .collection-card__sheet--1 { transform: translate(-18%, -8%) rotate(-6deg); }
.collection-card__link:hover .collection-card__sheet--2 { transform: translate(18%, -5%) rotate(5deg); }
.collection-card__name { font-size: var(--step-2); font-weight: 400; }
.collection-card__count { color: var(--ink-soft); margin: 0.25rem 0 0; font-size: 0.95rem; }
.collection-card__desc { color: var(--ink-soft); margin-top: var(--s-2); max-width: 36ch; }
.modal { border: 0; padding: 0; max-width: none; max-height: none; width: 100vw; height: 100dvh; background: rgba(247, 245, 240, 0.98); color: var(--ink); }
.modal::backdrop { background: rgba(35, 48, 60, 0.4); }
.modal[open] { animation: fade-in var(--dur-soft) var(--ease-wash); }
.modal__close {
position: absolute; top: max(1rem, env(safe-area-inset-top)); right: 1rem; z-index: 3; width: 48px; height: 48px;
display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-white); cursor: pointer;
}
.modal__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.zoom__stage { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; cursor: zoom-in; padding: clamp(1rem, 4vw, 3rem); touch-action: pinch-zoom; }
.zoom__stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform var(--dur-soft) var(--ease-wash); box-shadow: var(--shadow-hang); }
.zoom__stage.is-zoomed { cursor: zoom-out; }
.zoom__stage.is-zoomed img { transform: scale(2.4); transition-duration: 300ms; }
.zoom__help { position: absolute; bottom: max(1rem, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 0.9rem; color: var(--ink-soft); margin: 0; pointer-events: none; }
.phone-icon { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.call { display: grid; gap: 0.4rem; justify-items: start; }
.call__line { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 1.1rem; }
.call__line .phone-icon { color: var(--indigo); }
.call__number { font-weight: 600; white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; color: var(--ink); }
.call__hours { color: var(--ink-soft); }
.call__pending {
display: inline-flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.8rem 1.1rem;
border: 1.5px dashed var(--line); border-radius: var(--radius-ui); color: var(--ink-soft); font-weight: 500; background: var(--paper-white);
}
.phone-note {
margin: var(--s-4) 0 0; padding: 0.85rem 1rem 0.85rem 1.1rem; max-width: 52ch; font-size: 0.95rem; line-height: 1.5; color: var(--ink);
border-left: 3px solid var(--madder); background: linear-gradient(90deg, var(--madder-wash), transparent 85%);
}
.phone-note__tag { display: block; font-size: 0.8rem; font-weight: 600; color: var(--madder); margin-bottom: 0.15rem; letter-spacing: 0.02em; }
.hero { overflow-x: clip; max-width: var(--page-max); margin-inline: auto; padding: clamp(2rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 8vw, 6rem); position: relative; }
.hero::before {
content: ''; position: absolute; z-index: -1; pointer-events: none;
left: 50%; top: 18%; width: min(1100px, 120vw); aspect-ratio: 1.6; translate: -50% 0;
background: url('/images/textures/hero-wash.svg') no-repeat center / contain;
}
.hero__title { font-size: var(--step-5); font-weight: 300; line-height: 1.04; letter-spacing: -0.02em; max-width: 16ch; }
.hero__wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-6); margin-top: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.hero__feature { margin: 0; }
.hero__feature .frame { --frame-max-h: 70vh; }
.hero__feature-link { display: block; }
.hero__label { display: flex; justify-content: center; }
.hero__label .wall-label { text-align: left; }
.hero__glimpse { display: block; }
.hero__glimpse .frame { --frame-max-h: 40vh; }
.hero__glimpse:hover .frame__mat { box-shadow: var(--shadow-lift); }
.hero__glimpse--0 { width: 46%; margin-left: auto; margin-top: calc(var(--s-6) * -1); transform: rotate(1.5deg); }
.hero__glimpse--1 { display: none; }
.hero__lede { font-family: var(--serif); font-size: var(--step-1); line-height: 1.55; color: var(--ink-soft); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-5); }
.hero__intro { order: -1; }
@media (min-width: 600px) and (max-width: 999px) {
.hero__wall { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--s-5); }
.hero__intro { order: 0; grid-column: 1 / -1; }
.hero__feature { grid-column: 1 / span 4; }
.hero__glimpse--0 { grid-column: 5 / span 2; width: 100%; margin-top: 30%; }
}
@media (min-width: 1000px) {
.hero__wall { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(1.5rem, 2.5vw, 2.5rem); margin-top: clamp(-4rem, -3vw, -1rem); }
.hero__feature { grid-column: 5 / span 6; grid-row: 1 / span 2; }
.hero__intro { order: 0; grid-column: 1 / span 4; grid-row: 1; align-self: start; margin-top: clamp(4rem, 6vw, 6rem); }
.hero__glimpse--0 { grid-column: 11 / span 2; grid-row: 1; width: 118%; margin: clamp(6rem, 12vw, 11rem) 0 0 4%; transform: rotate(2deg); }
.hero__glimpse--1 { display: block; grid-column: 2 / span 2; grid-row: 2; margin-top: var(--s-6); transform: rotate(-2deg); }
.hero__title { position: relative; z-index: 1; }
}
.meet { display: grid; gap: var(--s-7); padding-block: clamp(3rem, 8vw, 7rem); align-items: center; }
.meet__portrait .frame { --frame-max-h: 70vh; transform: rotate(-1.2deg); }
.meet__title { font-size: var(--step-4); font-weight: 300; }
.meet__lede { font-family: var(--serif); font-size: var(--step-2); line-height: 1.45; font-weight: 300; margin-top: var(--s-5); max-width: 30ch; }
.meet__text .signature { margin: var(--s-3) 0 var(--s-5); }
@media (min-width: 900px) {
.meet { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
.meet__portrait { grid-column: 2 / span 4; }
.meet__text { grid-column: 7 / span 6; }
}
.studio-table { position: relative; padding-block: clamp(4rem, 10vw, 8rem); isolation: isolate; }
.studio-table::before {
content: ''; position: absolute; inset: 0; z-index: -1;
background: var(--paper-shade) url('/images/textures/paper-grain.svg') repeat 0 0 / 360px;
-webkit-mask: url('/images/textures/wash-band-mask.svg') center / 100% 100% no-repeat;
mask: url('/images/textures/wash-band-mask.svg') center / 100% 100% no-repeat;
}
.studio-table__inner { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); display: grid; gap: var(--s-6); }
.studio-table__heading { font-size: var(--step-4); font-weight: 300; }
.studio-table__quote { margin: 0; max-width: 32ch; }
.studio-table__quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: var(--step-3); font-weight: 300; line-height: 1.3; }
.studio-table__photos { max-width: 820px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 3vw, 2.5rem); align-items: start; margin-top: var(--s-4); }
.studio-table__photo { margin: 0; background: var(--paper-white); padding: clamp(6px, 1.2vw, 12px); box-shadow: var(--shadow-hang); position: relative; aspect-ratio: 4 / 5; }
.studio-table__photo img { width: 100%; height: 100%; object-fit: cover; }
.studio-table__photo .empty-art { position: absolute; inset: clamp(6px, 1.2vw, 12px); }
.studio-table__photo .empty-art__line { font-size: 0.9rem; }
.studio-table__photo figcaption { font-size: 0.85rem; color: var(--ink-soft); padding-top: 0.4rem; }
.studio-table__photo--0 { transform: rotate(-2.5deg); }
.studio-table__photo--1 { transform: translateY(1.5rem) rotate(1.5deg); }
.studio-table__photo--2 { transform: rotate(-0.8deg); }
@media (max-width: 599px) { .studio-table__photo .empty-art__tag, .studio-table__photo .empty-art__mark { display: none; } }
.steps { padding-block: clamp(3.5rem, 8vw, 7rem); }
.steps__list { list-style: none; counter-reset: step; display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.steps__item { counter-increment: step; position: relative; padding-left: 4.2rem; max-width: 34ch; }
.steps__item::before {
content: counter(step); position: absolute; left: 0; top: -0.35rem; width: 3rem; height: 3rem;
display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; color: var(--indigo-deep);
background: url('/images/textures/pigment-ring.svg') no-repeat center / contain;
}
.steps__item h3 { font-size: var(--step-1); font-weight: 500; margin-bottom: var(--s-2); }
.steps__item p { color: var(--ink-soft); }
.steps__call { margin-top: var(--s-6); }
.steps__more { margin-top: var(--s-5); color: var(--ink-soft); }
@media (min-width: 900px) { .steps__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.artwork-page { padding-top: clamp(1.25rem, 3vw, 2.5rem); }
.artwork { display: grid; gap: var(--s-6); margin-top: var(--s-5); }
.artwork__media { min-width: 0; }
.artwork__media .frame { --frame-max-h: 80vh; }
.artwork__zoom { display: block; width: min(100%, calc(80vh * var(--ratio, 0.8))); margin-inline: auto; padding: 0; border: 0; background: none; cursor: zoom-in; position: relative; border-radius: 0; }
.artwork__zoom-hint {
position: absolute; right: 1.25rem; bottom: 1.25rem; padding: 0.45rem 0.85rem; font-size: 0.88rem; font-weight: 500;
background: var(--paper-white); color: var(--ink); box-shadow: var(--shadow-hang); border-radius: var(--radius-ui);
opacity: 0.92; transition: opacity var(--dur-quick) ease;
}
.artwork__zoom:hover .artwork__zoom-hint { opacity: 1; }
.artwork__caption { font-size: 0.9rem; color: var(--ink-soft); margin-top: var(--s-3); text-align: center; }
.thumbs { list-style: none; display: flex; gap: var(--s-3); justify-content: center; margin-top: var(--s-5); flex-wrap: wrap; }
.thumbs__btn { width: 72px; height: 72px; padding: 4px; background: var(--paper-white); border: 1px solid var(--line); cursor: pointer; border-radius: 0; }
.thumbs__btn img { width: 100%; height: 100%; object-fit: cover; }
.thumbs__btn[aria-pressed='true'] { border-color: var(--ink); }
.artwork__title { font-size: var(--step-4); font-weight: 300; font-style: italic; overflow-wrap: anywhere; }
.artwork__by { color: var(--ink-soft); margin-top: var(--s-3); font-size: 1.02rem; }
.artwork__price-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: var(--s-5) 0; }
.artwork__price { font-size: var(--step-2); font-weight: 500; font-variant-numeric: lining-nums; }
.artwork__desc { font-family: var(--serif); font-size: 1.12rem; line-height: var(--leading-serif); max-width: 46ch; }
.buy { margin: var(--s-5) 0; }
.buy__lead { color: var(--ink-soft); margin-bottom: var(--s-4); }
.buy--closed { padding: var(--s-4) var(--s-5); background: var(--paper-white); box-shadow: 0 0 0 1px var(--line-soft); }
.buy--closed p { margin-bottom: var(--s-4); }
.buy__sold { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--madder); }
.details { margin: var(--s-6) 0 0; border-top: 1px solid var(--line-soft); }
.details > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-4); padding: 0.65rem 0; border-bottom: 1px solid var(--line-soft); }
.details dt { color: var(--ink-soft); font-size: 0.95rem; }
.details dd { margin: 0; }
.artwork__ship { margin-top: var(--s-6); }
.artwork__ship-h { font-family: var(--sans); font-size: 1rem; font-weight: 600; margin-bottom: var(--s-2); }
.artwork__ship p { color: var(--ink-soft); }
.artwork__policies { font-size: 0.93rem; }
.artwork__ask { margin-top: var(--s-5); }
@media (min-width: 1000px) {
.artwork { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.artwork__info { position: sticky; top: 6.5rem; padding-top: var(--s-4); }
}
.art-story { display: grid; gap: var(--s-7); padding-block: clamp(3rem, 7vw, 6rem); }
.art-story__text { max-width: var(--measure); font-family: var(--serif); font-size: 1.15rem; line-height: var(--leading-serif); }
.art-story__text h2 { margin-bottom: var(--s-5); }
.art-note { margin: 0; padding: var(--s-6); background: var(--paper-white); box-shadow: var(--shadow-hang); max-width: 30rem; transform: rotate(-0.6deg); align-self: start; }
.art-note__h { font-family: var(--sans); font-weight: 600; font-size: 0.95rem; color: var(--ink-soft); margin-bottom: var(--s-3); }
.art-note blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.2rem; line-height: 1.55; }
@media (min-width: 900px) { .art-story { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
@media (min-width: 1000px) {  }
.about { padding-top: clamp(2rem, 6vw, 5rem); }
.about__head { display: grid; gap: var(--s-6); align-items: end; }
.about__portrait .frame { --frame-max-h: 72vh; }
.about__name { font-family: var(--sans); color: var(--ink-soft); margin-top: var(--s-5); font-size: 1.05rem; }
.about__lede { font-family: var(--serif); font-size: var(--step-2); font-weight: 300; line-height: 1.45; margin-top: var(--s-5); max-width: 32ch; }
@media (min-width: 900px) {
.about__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--s-6); }
.about__portrait { grid-column: 1 / span 5; }
.about__intro { grid-column: 7 / span 6; padding-bottom: var(--s-6); }
}
.pull-quote { margin: clamp(3rem, 8vw, 6rem) auto; max-width: 30ch; text-align: center; }
.pull-quote blockquote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: var(--step-4); line-height: 1.2; }
.pull-quote figcaption { margin-top: var(--s-4); color: var(--ink-soft); }
.about__chapters { display: grid; gap: clamp(2.5rem, 6vw, 4.5rem); padding-block: clamp(3rem, 8vw, 6rem); max-width: 980px; }
.chapter { display: grid; gap: var(--s-3) var(--s-7); }
.chapter__title { font-size: var(--step-3); font-weight: 300; font-style: italic; }
.chapter__body { font-family: var(--serif); font-size: 1.15rem; line-height: var(--leading-serif); max-width: var(--measure); }
@media (min-width: 900px) { .chapter { grid-template-columns: 1fr 1.7fr; } .chapter:nth-child(even) { margin-left: 8%; } }
.story-index { list-style: none; display: grid; gap: var(--s-5); max-width: 860px; }
.story-index a { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 0.2rem var(--s-5); color: var(--ink); text-decoration: none; }
.story-index__thumb { grid-row: span 2; }
.story-index__thumb .frame { --frame-max-h: 140px; }
.story-index__title { font-family: var(--serif); font-style: italic; font-size: var(--step-1); }
.story-index__excerpt { color: var(--ink-soft); }
.stories-list { list-style: none; display: grid; gap: clamp(3rem, 6vw, 5rem); max-width: 1000px; }
.story-card { display: grid; gap: var(--s-5); align-items: center; }
.story-card__img img { width: 100%; box-shadow: var(--shadow-hang); }
.story-card__date, .story__date { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: var(--s-2); }
.story-card__title { font-size: var(--step-3); font-weight: 300; margin-bottom: var(--s-3); }
.story-card__title a { color: var(--ink); text-decoration: none; }
.story-card__title a:hover { text-decoration: underline; }
@media (min-width: 800px) { .story-card { grid-template-columns: 1fr 1fr; } }
.story { padding-top: clamp(1.5rem, 4vw, 3rem); }
.story__head { margin: var(--s-6) 0; }
.story__image { margin: 0 0 var(--s-7); }
.story__image img { width: 100%; box-shadow: var(--shadow-hang); }
.contact { display: grid; gap: var(--s-7); padding-block: clamp(2.5rem, 7vw, 6rem); }
.contact__text > p { max-width: 44ch; color: var(--ink-soft); }
.contact__text .page-lede { color: var(--ink-soft); margin-bottom: var(--s-5); }
.contact__script { font-family: var(--script); font-size: 1.9rem; color: var(--madder); margin-top: var(--s-6); }
.contact__form { background: var(--paper-white); padding: clamp(1.25rem, 4vw, 2.5rem); box-shadow: var(--shadow-hang); align-self: start; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1.15fr; column-gap: clamp(3rem, 7vw, 7rem); } }
.thanks, .lost { text-align: center; padding-block: clamp(3rem, 10vw, 8rem); }
.thanks .page-title, .lost .page-title { margin-inline: auto; }
.thanks .page-lede, .lost .page-lede { margin-inline: auto; }
.thanks__wash { width: min(220px, 50%); margin: 0 auto var(--s-5); }
.thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3) var(--s-5); margin-top: var(--s-6); }
.thanks__items { list-style: none; margin-top: var(--s-5); font-family: var(--serif); font-style: italic; }
.lost__frame { width: min(240px, 60vw); margin: 0 auto var(--s-6); background: var(--paper-white); padding: 16px; box-shadow: var(--shadow-hang); transform: rotate(-3deg); }
.lost__mat { aspect-ratio: 4 / 5; border: 1px dashed var(--line); position: relative; overflow: hidden; background: radial-gradient(70% 40% at 50% 100%, var(--indigo-wash), transparent 70%); }
.lost__drip { position: absolute; left: 46%; top: -10%; width: 14%; height: 70%; background: url('/images/textures/drip.svg') no-repeat top center / contain; animation: drip 3.6s var(--ease-wash) infinite; }
.policy { padding-block: clamp(2.5rem, 7vw, 5rem); }
.policy .notice { margin-block: var(--s-6); }
.policy__section h2 { font-size: var(--step-2); }
.policy__todo { color: var(--ink-faint); font-style: italic; }
.artwork-page .section, .story + .section { padding-inline: 0; }
.page-intro__buy { display: grid; gap: var(--s-4); justify-items: start; margin-top: var(--s-5); }
.page-intro__buy .phone-note { margin: 0; }
.contact__call { padding: var(--s-5); background: var(--paper-white); box-shadow: var(--shadow-hang); margin: var(--s-6) 0 var(--s-7); max-width: 34rem; }
.contact__call-h { font-size: var(--step-2); font-weight: 400; margin-bottom: var(--s-4); }
.contact__msg-h { font-size: var(--step-1); font-weight: 400; margin-bottom: var(--s-3); }
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 380ms var(--ease-wash) both; }
::view-transition-new(root) { animation: vt-in 520ms var(--ease-wash) both; }
@keyframes vt-out { to { opacity: 0; filter: blur(6px) saturate(0.6); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px) saturate(0.5); } }
.loader {
position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; pointer-events: none;
background: var(--paper);
animation: loader-out 450ms var(--ease-wash) 850ms forwards;
}
.loader svg { width: min(220px, 50vw); overflow: visible; }
.loader__stroke {
fill: none; stroke: var(--indigo); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75;
stroke-dasharray: 260; stroke-dashoffset: 260;
filter: url(#wash-edge);
animation: stroke-draw 760ms var(--ease-wash) 60ms forwards;
}
.seen .loader { display: none; }
@keyframes loader-out { to { opacity: 0; visibility: hidden; } }
@keyframes stroke-draw { to { stroke-dashoffset: 0; } }
.js .bloom:not(.bloom-done) {
-webkit-mask-image: url('/images/textures/bloom-mask.svg');
mask-image: url('/images/textures/bloom-mask.svg');
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 50% 50%; mask-position: 50% 50%;
-webkit-mask-size: 0% 0%; mask-size: 0% 0%;
}
.js .bloom.is-blooming {
-webkit-mask-size: 340% 340%; mask-size: 340% 340%;
transition: -webkit-mask-size var(--dur-bloom) var(--ease-wash), mask-size var(--dur-bloom) var(--ease-wash);
}
.js .bloom:not(.bloom-done) img { filter: saturate(0.35) brightness(1.08); }
.js .bloom.is-blooming img { filter: none; transition: filter 2200ms var(--ease-wash); }
.js [data-brush] { width: fit-content; }
.js [data-brush]:not(.is-painted) {
-webkit-mask-image: url('/images/textures/brush-wipe-mask.svg');
mask-image: url('/images/textures/brush-wipe-mask.svg');
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-size: 340% 100%; mask-size: 340% 100%;
-webkit-mask-position: 100% 0; mask-position: 100% 0;
}
.js [data-brush].is-painting {
-webkit-mask-position: 0 0; mask-position: 0 0;
transition: -webkit-mask-position 1500ms var(--ease-wash), mask-position 1500ms var(--ease-wash);
}
.section-title, .page-title { position: relative; }
.js .section-title[data-brush]::after, .js .page-title[data-brush]::after {
content: ''; position: absolute; left: 0; bottom: -0.2em; width: min(7.5em, 70%); height: 0.26em;
background: url('/images/textures/brush-underline.svg') no-repeat left center / 100% 100%;
transform: scaleX(0); transform-origin: left center; opacity: 0.85;
transition: transform 900ms var(--ease-wash) 650ms;
}
.js .section-title.is-painting::after, .js .page-title.is-painting::after,
.js .section-title.is-painted::after, .js .page-title.is-painted::after { transform: scaleX(1); }
.thanks .page-title::after, .lost .page-title::after { left: 50% !important; translate: -50% 0; transform-origin: center !important; }
.section__head, .page-intro, .meet__text, .steps, .art-story__text { position: relative; isolation: isolate; }
.section__head::before, .page-intro::before, .meet__text::before, .steps::before {
content: ''; position: absolute; z-index: -1; pointer-events: none;
left: -6%; top: -55%; width: min(560px, 90vw); aspect-ratio: 2;
background: url('/images/textures/section-wash-blue.svg') no-repeat left center / contain;
}
.page-intro::before { left: calc(var(--gutter) - 4%); top: 4%; }
.meet__text::before { background-image: url('/images/textures/section-wash-rose.svg'); top: -20%; left: -12%; }
.steps::before { background-image: url('/images/textures/section-wash-green.svg'); top: 0; left: calc(var(--gutter) - 6%); }
main > section:nth-of-type(3n + 2) .section__head::before { background-image: url('/images/textures/section-wash-green.svg'); }
main > section:nth-of-type(3n) .section__head::before { background-image: url('/images/textures/section-wash-rose.svg'); }
.js [data-wash]::before, .js [data-wash] > .section__head::before {
opacity: 0; transform: scale(0.55) rotate(-4deg); filter: blur(10px);
transition: opacity 1600ms var(--ease-wash), transform 2000ms var(--ease-wash), filter 1800ms var(--ease-wash);
transform-origin: 20% 50%;
}
.js [data-wash].is-washed::before, .js [data-wash].is-washed > .section__head::before { opacity: 1; transform: none; filter: none; }
.js .studio-table[data-wash]::before { transform: scaleX(0.2) scaleY(0.6); transform-origin: 30% 50%; filter: blur(24px); }
.js .studio-table[data-wash].is-washed::before { transform: none; filter: none; }
.js .hero::before { opacity: 0; transform: scale(0.7); transition: opacity 2400ms var(--ease-wash) 500ms, transform 2600ms var(--ease-wash) 500ms; }
.js .hero.is-washed::before { opacity: 1; transform: none; }
.js .hero__glimpse { opacity: 0; transition: opacity 1400ms var(--ease-wash); }
.js .hero.is-washed .hero__glimpse { opacity: 1; transition-delay: 900ms; }
.js .hero.is-washed .hero__glimpse--1 { transition-delay: 1200ms; }
.js .hero__lede, .js .hero__actions { opacity: 0; filter: blur(4px); transition: opacity 1200ms var(--ease-wash), filter 1200ms var(--ease-wash); }
.js .hero.is-washed .hero__lede { opacity: 1; filter: none; transition-delay: 700ms; }
.js .hero.is-washed .hero__actions { opacity: 1; filter: none; transition-delay: 950ms; }
.js [data-signature] { clip-path: inset(0 100% 0 0); transition: clip-path 1600ms cubic-bezier(0.45, 0.05, 0.3, 1); }
.js [data-signature].is-signed { clip-path: inset(0 -10% 0 0); }
@keyframes drop-in { 0% { transform: scale(0.4); } 55% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes note-drop { from { opacity: 0; transform: translateY(-10px) rotate(-1deg); } }
@keyframes wash-out { to { opacity: 0; filter: blur(8px); transform: translateX(-12px); } }
@keyframes drip { 0% { transform: translateY(-40%); opacity: 0; } 25% { opacity: 1; } 80% { transform: translateY(40%); opacity: 1; } 100% { transform: translateY(46%); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
@view-transition { navigation: none; }
.loader { display: none; }
.js .bloom:not(.bloom-done), .js [data-brush]:not(.is-painted) { -webkit-mask: none; mask: none; }
.js .bloom:not(.bloom-done) img { filter: none; }
.js [data-wash]::before, .js [data-wash] > .section__head::before, .js .hero::before { opacity: 1; transform: none; filter: none; }
.js .hero__glimpse, .js .hero__lede, .js .hero__actions { opacity: 1; filter: none; }
.js [data-signature] { clip-path: none; }
.js .section-title[data-brush]::after, .js .page-title[data-brush]::after { transform: scaleX(1); }
.lost__drip { animation: none; transform: translateY(20%); }
.art-card__image:hover .frame__mat, .art-card__image:hover .frame__paint img { transform: none; }
}