@font-face {
    font-family:Montserrat;
    src:url('assets/montserrat.woff2') format('woff2');
    font-display:swap;
    font-weight:400
}
:root {
    --paper:#f6f3ed;
    --ink:#172336;
    --muted:#5d6468;
    --accent:#c83d28;
    --line:#d9d5cb;
    --serif:Georgia,'Times New Roman',serif;
    --sans:Montserrat,'Trebuchet MS',sans-serif;
    color-scheme:light;
    scroll-behavior:smooth
}
* {
    box-sizing:border-box;
    caret-color:transparent
}
input,textarea {
    caret-color:auto
}
body {
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font:14px/1.8 var(--sans);
    -webkit-font-smoothing:antialiased
}
a {
    color:inherit
}
button,input,textarea {
    font:inherit
}
button,a,input,textarea {
    -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:5px
}
img {
    max-width:100%;
    display:block
}
button {
    cursor:pointer
}
button,a.button {
    user-select:none
}
::selection {
    background:#ead5bd
}
.wrap {
    width:min(1240px,calc(100% - 96px));
    margin-inline:auto
}
.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-block:28px;
    border-bottom:1px solid var(--line)
}
.brand {
    display:inline-flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
    font-size:23px;
    letter-spacing:-1px;
    font-weight:bold
}
.brand-domain {
    font-weight:400;
    color:var(--muted)
}
.header-link {
    text-decoration:none;
    font-size:12px;
    display:flex;
    align-items:center;
    gap:24px
}
.header-link span {
    font-size:21px
}
.hero {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:54px;
    align-items:center;
    padding-block:78px 90px
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:10px;
    font-weight:bold;
    margin:0 0 26px;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:10px
}
.small-square {
    width:7px;
    height:7px;
    background:var(--accent);
    display:inline-block
}
h1,h2 {
    font-family:var(--serif);
    font-weight:400;
    line-height:1.05;
    letter-spacing:-2px;
    margin:0 0 26px
}
h1 {
    font-size:clamp(44px,4.6vw,67px)
}
h1 em,h2 em {
    font-weight:400;
    color:var(--accent)
}
h2 {
    font-size:clamp(36px,3.5vw,50px);
    line-height:1.12
}
p {
    margin:0 0 20px
}
.intro {
    font-size:17px;
    line-height:1.7;
    max-width:440px
}
.hero-description {
    max-width:470px;
    color:var(--muted);
    font-size:13px
}
.hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-top:30px
}
.button {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:15px 21px;
    background:var(--ink);
    color:#fff;
    border:1px solid var(--ink);
    text-decoration:none;
    font-size:11px;
    font-weight:bold;
    line-height:1.7;
    transition:background .2s
}
.button:hover {
    background:var(--accent);
    border-color:var(--accent)
}
.button span {
    font-size:19px;
    line-height:1
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:20px;
    text-decoration:none;
    border-bottom:1px solid currentColor;
    padding-bottom:4px;
    font-size:11px;
    font-weight:bold
}
.text-link:hover {
    color:var(--accent)
}
.hero-note {
    font-size:10px;
    color:var(--muted);
    margin-top:24px
}
.hero-art {
    position:relative;
    margin:10px 0 0;
    transform:rotate(2deg)
}
.print-mount {
    padding:20px;
    background:#fff;
    box-shadow:0 6px 14px #17233626,0 24px 48px #17233638;
    position:relative
}
.mosaic-image {
    width:100%;
    height:auto
}
.detail-selector {
    position:absolute;
    left:calc(37.5% + 5px);
    top:calc(37.5% + 5px);
    width:calc(6.25% - 2.5px);
    aspect-ratio:1;
    border:2px solid #fff;
    outline:1px solid var(--accent);
    box-shadow:0 0 0 999px transparent;
    cursor:zoom-in;
    z-index:1
}
.detail-tooltip {
    position:absolute;
    left:50%;
    bottom:calc(100% + 10px);
    transform:translateX(-50%);
    padding:6px 10px;
    background:var(--ink);
    color:white;
    white-space:nowrap;
    font:11px/1.5 var(--sans);
    opacity:0;
    pointer-events:none
}
.detail-selector:hover .detail-tooltip,.detail-selector:focus-visible .detail-tooltip {
    opacity:1
}
#in-detail {
    scroll-margin-top:24px
}
.hero-art figcaption,.detail-art figcaption {
    display:flex;
    justify-content:space-between;
    gap:12px;
    margin-top:17px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:8px;
    color:var(--muted)
}
.art-stamp {
    position:absolute;
    bottom:45px;
    right:-24px;
    display:grid;
    place-content:center;
    width:125px;
    height:125px;
    background:var(--accent);
    color:white;
    border-radius:50%;
    padding:12px;
    font:italic 16px/1.2 var(--serif);
    text-align:center;
    transform:rotate(-10deg);
    box-shadow:0 4px 18px #17233618
}
.collection-strip {
    border-block:1px solid var(--line);
    background:#eee9e0;
    padding-block:20px;
    text-align:center;
    font-family:var(--serif);
    font-size:23px;
    letter-spacing:-.3px
}
.collection-strip span {
    font-style:italic;
    color:var(--accent)
}
.detail-section {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:100px;
    align-items:center;
    padding-block:100px
}
.detail-art {
    margin:0;
    max-width:520px
}
.detail-photo {
    padding:12px;
    border:1px solid var(--line);
    background:#fff
}
.detail-photo img {
    width:100%;
    height:auto
}
.detail-copy>p:not(.eyebrow) {
    color:var(--muted);
    max-width:460px
}
.detail-copy .text-link {
    margin-block:10px 20px
}
.caption-note {
    font-size:10px;
    line-height:1.8;
    color:var(--muted);
    max-width:380px
}
.platform-section {
    padding-block:75px;
    background:var(--ink);
    color:var(--paper);
    position:relative;
    overflow:hidden
}
.platform-section::after {
    content:'';
    position:absolute;
    right:-70px;
    top:-80px;
    width:360px;
    height:360px;
    background:repeating-linear-gradient(0deg,transparent 0 39px,#ffffff06 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#ffffff06 39px 40px);
    pointer-events:none;
    transform:rotate(12deg)
}
.platform-section .eyebrow {
    color:#ee9d89
}
.platform-section h2 em {
    color:#ee9d89
}
.section-heading {
    margin-bottom:45px
}
.steps {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:36px;
    position:relative;
    z-index:1
}
.steps article {
    border-top:1px solid #ffffff40;
    padding-top:20px
}
.step-number {
    color:#ee9d89;
    font:italic 25px var(--serif)
}
h3 {
    font-family:var(--serif);
    font-size:25px;
    font-weight:400;
    letter-spacing:-.5px;
    margin:18px 0 14px
}
.steps p {
    font-size:12px;
    color:#c4cad0;
    line-height:1.9
}
.platform-bottom {
    margin-top:25px;
    padding-top:28px;
    border-top:1px solid #ffffff25;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:30px
}
.platform-bottom p {
    font-family:var(--serif);
    font-size:23px;
    line-height:1.4;
    margin:0
}
.partner-section {
    padding-block:85px;
    border-bottom:1px solid var(--line)
}
.partner-heading {
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:80px;
    align-items:center;
    margin-bottom:28px
}
.partner-heading>p {
    color:var(--muted);
    max-width:460px
}
.partner-layout {
    display:grid;
    grid-template-columns:1.3fr 1fr;
    gap:80px
}
.partner-terms {
    margin:0
}
.partner-terms>div {
    padding-block:21px;
    border-top:1px solid var(--line)
}
.partner-terms dt {
    font:22px/1.3 var(--serif);
    margin-bottom:8px
}
.partner-terms dd {
    margin:0;
    font-size:12px;
    line-height:1.9;
    color:var(--muted)
}
.partner-services {
    background:#eee9e0;
    padding:34px;
    align-self:start
}
.partner-services h3 {
    font-size:30px;
    line-height:1.2
}
.partner-services ul {
    list-style:none;
    padding:0;
    margin:24px 0 30px
}
.partner-services li {
    padding-block:12px;
    border-bottom:1px solid #d3cfc5;
    font-size:12px
}
.partner-payout {
    margin-bottom:28px
}
.partner-payout h4 {
    margin:0 0 10px;
    font:24px/1.3 var(--serif)
}
.partner-payout p {
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.9
}
.contact-section {
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:100px;
    padding-block:100px
}
.contact-copy>p:not(.eyebrow) {
    max-width:380px;
    color:var(--muted)
}
.contact-email {
    font-size:13px;
    text-underline-offset:6px;
    display:inline-block;
    margin-block:4px 24px
}
.contact-email span {
    margin-left:12px
}
.contact-form {
    padding-top:5px
}
.contact-form label {
    display:block;
    font-size:11px;
    font-weight:bold;
    margin-bottom:20px
}
.optional {
    font-weight:400;
    color:var(--muted)
}
.form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px
}
input,textarea {
    display:block;
    width:100%;
    margin-top:8px;
    padding:12px 10px;
    border:1px solid #c9c6bd;
    background:#ffffff65;
    border-radius:0;
    color:var(--ink);
    font-size:13px;
    font-weight:400
}
textarea {
    resize:vertical;
    min-height:130px
}
input:focus,textarea:focus {
    background:white
}
textarea::placeholder {
    color:#747978;
    font-size:11px
}
.form-note {
    font-size:10px;
    color:var(--muted);
    line-height:1.8;
    margin-bottom:22px
}
.form-status {
    font-size:12px;
    margin:15px 0 0;
    min-height:24px
}
.form-status[data-state=error] {
    color:#a52219
}
.form-status[data-state=success] {
    color:var(--ink)
}
.button:disabled {
    opacity:.6;
    cursor:wait
}
.honeypot {
    position:absolute;
    left:-10000px;
    width:1px;
    height:1px;
    overflow:hidden
}
.footer {
    border-top:1px solid var(--line);
    display:flex;
    align-items:center;
    gap:25px;
    padding-block:28px 34px
}
.footer-brand {
    font-size:18px;
    gap:8px
}
.footer p {
    font-size:10px;
    color:var(--muted);
    margin:0
}
.copyright {
    margin-left:auto;
    font-size:9px;
    color:var(--muted)
}
.sr-only,.skip-link:not(:focus) {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap
}
.skip-link:focus {
    position:fixed;
    top:10px;
    left:10px;
    background:white;
    padding:15px;
    z-index:10
}
@media(prefers-reduced-motion:no-preference) {
    .hero-copy {
        animation:arrive .6s ease-out both
    }
    .hero-art {
        animation:print-arrive .8s ease-out both
    }
    @keyframes arrive {
        from {
            opacity:0;
            transform:translateY(12px)
        }
        to {
            opacity:1;
            transform:none
        }
    }
    @keyframes print-arrive {
        from {
            opacity:0;
            transform:translateY(15px) rotate(0)
        }
        to {
            opacity:1;
            transform:translateY(0) rotate(2deg)
        }
    }
}
@media(max-width:1000px) {
    .wrap {
        width:calc(100% - 64px)
    }
    .hero {
        gap:35px
    }
    .hero-actions {
        gap:16px
    }
    .hero-art {
        margin-right:10px
    }
    .detail-section,.contact-section {
        gap:50px
    }
    .steps {
        grid-template-columns:repeat(2,1fr);
        gap:30px
    }
    .art-stamp {
        width:105px;
        height:105px;
        font-size:14px;
        right:-18px
    }
}
@media(max-width:760px) {
    .partner-section {
        padding-block:55px
    }
    .partner-heading,.partner-layout {
        grid-template-columns:1fr;
        gap:20px
    }
    .partner-heading h2 {
        margin-bottom:0
    }
    .partner-heading>p {
        margin:0
    }
    .partner-services {
        padding:26px
    }
    .wrap {
        width:calc(100% - 40px)
    }
    .header {
        padding-block:20px
    }
    .brand {
        font-size:20px
    }
    .brand img {
        width:34px;
        height:34px
    }
    .header-link {
        gap:10px;
        font-size:11px
    }
    .hero {
        grid-template-columns:1fr;
        gap:35px;
        padding-block:48px 65px
    }
    .hero-copy {
        max-width:560px
    }
    h1 {
        font-size:clamp(42px,9.2vw,64px);
        letter-spacing:-1.5px
    }
    .intro {
        max-width:480px
    }
    .hero-description {
        max-width:500px
    }
    .hero-art {
        max-width:540px;
        margin:0 auto;
        width:92%
    }
    .hero-actions {
        gap:22px
    }
    .print-mount {
        padding:14px
    }
    .detail-selector {
        left:calc(37.5% + 3.5px);
        top:calc(37.5% + 3.5px);
        width:calc(6.25% - 1.75px)
    }
    .art-stamp {
        bottom:42px;
        right:-12px;
        width:102px;
        height:102px;
        font-size:14px
    }
    .collection-strip {
        padding:20px 0;
        font-size:21px
    }
    .collection-strip span {
        display:block
    }
    .detail-section {
        grid-template-columns:1fr;
        padding-block:65px;
        gap:38px
    }
    .detail-art {
        max-width:540px;
        width:100%;
        margin:auto
    }
    .detail-copy {
        max-width:540px;
        margin:auto
    }
    .detail-copy>p:not(.eyebrow) {
        max-width:none
    }
    .platform-section {
        padding-block:55px
    }
    .steps {
        grid-template-columns:1fr;
        gap:20px
    }
    .steps article {
        display:grid;
        grid-template-columns:40px 1fr;
        column-gap:10px
    }
    .steps h3 {
        margin:0 0 10px
    }
    .steps p {
        grid-column:2
    }
    .step-number {
        padding-top:3px
    }
    .section-heading {
        margin-bottom:35px
    }
    .platform-bottom {
        align-items:flex-start;
        flex-direction:column;
        gap:24px
    }
    .contact-section {
        grid-template-columns:1fr;
        gap:35px;
        padding-block:65px
    }
    .contact-copy>p:not(.eyebrow) {
        max-width:500px
    }
    .footer {
        flex-wrap:wrap;
        gap:15px 24px
    }
    .footer p {
        order:3;
        width:100%
    }
    .copyright {
        font-size:8px
    }
    .form-row {
        gap:14px
    }
    h2 {
        letter-spacing:-1px
    }
    .eyebrow {
        letter-spacing:1.6px
    }
}
@media(prefers-reduced-motion:reduce) {
    :root {
        scroll-behavior:auto
    }
}