@font-face {
    font-family: 'Instrument Serif';
    src: url('fonts/instrument-serif.ttf') format('truetype');
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Instrument Serif';
    src: url('fonts/instrument-serif-italic.ttf') format('truetype');
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('fonts/dm-sans.ttf') format('truetype');
    font-weight: 100 1000;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ink: #24222c;
    --muted: #5c5869;
    --accent: #51476e;
    --accent-hover: #3d3456;
    --paper: #f4f2f6;
    --silver: #e4e1ea;
    --light: #fbf9fc;
    --line: #c9c4d1;
    --focus: #6c4ca3;
    --danger: #8c3045;
    --success: #365a49;
    --scroll-thumb: #a7a0b3;
    --scroll-track: #e9e6ed;
    --scroll-hover: #817890;
    --scroll-active: #665a78;
    --sans: 'DM Sans', system-ui, sans-serif;
    --serif: 'Instrument Serif', 'Times New Roman', serif;
    --page-width: 76rem;
    --gutter: clamp(1.125rem, 4vw, 3.5rem);
    --radius: 0.75rem;
    --ease: cubic-bezier(.22, .61, .36, 1);
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    scrollbar-gutter: stable;
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { color: var(--ink); background: #d8cce9; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border: 2px solid var(--scroll-track); border-radius: 1rem; }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-hover); }
::-webkit-scrollbar-thumb:active { background: var(--scroll-active); }
@media (forced-colors: active) { :root { scrollbar-color: auto; } }

body { margin: 0; color: var(--ink); background: var(--paper); font: 1rem/1.55 var(--sans); }
body:has(dialog[open]) { overflow: hidden; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1; overflow-wrap: anywhere; }
h1 { font-size: clamp(3.7rem, 7vw, 6.9rem); }
h2 { font-size: clamp(3.2rem, 5vw, 5.25rem); letter-spacing: -.026em; }
h3 { font-size: 2rem; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.wrap { width: min(var(--page-width), calc(100% - 2 * var(--gutter))); margin-inline: auto; }
.icon { width: 1.1em; height: 1.1em; flex: none; display: inline-block; vertical-align: -.16em; }
.sr-only, .form-trap { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
.skip-link { position: fixed; top: 0.75rem; left: 0.75rem; padding: 0.75rem 1rem; background: var(--light); z-index: 50; transform: translateY(-200%); }
.skip-link:focus { transform: none; }

.button, .icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3.15rem;
    padding: .68rem 1.12rem;
    border: 1px solid transparent;
    border-radius: .42rem;
    font-size: .86rem;
    font-weight: 650;
    text-decoration: none;
    line-height: 1.2;
    transition: background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), transform .22s var(--ease);
}
.button-primary { background: var(--accent); color: #fff; box-shadow: inset 0 1px 0 #ffffff25, 0 5px 13px #2d253020; }
.button-primary:hover { background: var(--accent-hover); }
.button-outline, .icon-button { border-color: var(--line); background: #ffffff30; color: var(--ink); }
.button-outline:hover, .icon-button:hover { background: var(--light); border-color: var(--accent); color: var(--accent); }
.button-text { padding-inline: .35rem; background: transparent; color: var(--accent); }
.button-text:hover, .text-link:hover { color: var(--accent-hover); text-decoration-thickness: 2px; text-decoration-line: underline; }
.button:active:not(:disabled), .icon-button:active:not(:disabled) { transform: translateY(1px); }
.button:disabled, .icon-button:disabled { opacity: .48; box-shadow: none; }
.button-small { min-height: 2.6rem; padding: .55rem .8rem; font-size: .8rem; }
.icon-button { width: 2.9rem; min-height: 2.9rem; padding: 0; border-radius: 50%; font-size: 1.1rem; }
.text-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--accent); font-weight: 650; text-underline-offset: .18em; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid #c4becb96;
    background: #f3f1f6ed;
    backdrop-filter: blur(18px);
}
.header-inner { min-height: 4.6rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.75rem; }
.brand { display: inline-flex; align-items: center; justify-self: start; gap: .55rem; color: var(--ink); text-decoration: none; white-space: nowrap; font: 1.52rem/1 var(--serif); letter-spacing: .07em; }
.brand-art { color: var(--accent); }
.brand-image { display: grid; place-items: center; width: 2.9rem; height: 2.35rem; overflow: hidden; mix-blend-mode: multiply; }
.brand-image img { width: 100%; height: auto; transform: scale(1.06); filter: contrast(1.35) brightness(1.09); }
.site-nav { display: flex; gap: clamp(1rem, 3.3vw, 3.15rem); align-items: center; }
.site-nav a, .footer-inner nav a { font-size: .86rem; font-weight: 650; text-decoration: none; color: var(--muted); }
.site-nav a { padding-block: .8rem; }
.site-nav a:hover, .site-nav a[aria-current], .footer-inner nav a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: .42rem; }
.header-cta { justify-self: end; min-height: 2.75rem; }
.menu-button { display: none; }

.hero {
    background: radial-gradient(ellipse at 72% 15%, #fbf8ff 0, transparent 48%),
        radial-gradient(ellipse at 11% 6%, #f6f4f8 0, transparent 63%),
        linear-gradient(128deg, #edeaf0 6%, #dedbe6 61%, #eae7ef 95%);
}
.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .97fr) minmax(0, 1.03fr);
    gap: clamp(2.25rem, 5.2vw, 5.4rem);
    align-items: center;
    padding-block: clamp(2.6rem, 5.2vw, 4.7rem) clamp(2.6rem, 4.6vw, 4.1rem);
}
.hero-copy { padding-block: 1rem; }
.eyebrow { display: flex; gap: .55rem; align-items: center; color: var(--accent); font-size: .72rem; font-weight: 750; line-height: 1.4; letter-spacing: .15em; text-transform: uppercase; }
.eyebrow .icon { width: .92rem; height: .92rem; }
.hero h1 { margin-block: 1.12rem 1.25rem; line-height: .91; letter-spacing: -.032em; }
.hero h1 em { display: block; color: var(--accent); font-weight: 400; }
.intro { color: var(--muted); max-width: 29rem; font-size: clamp(1rem, 1.4vw, 1.14rem); line-height: 1.65; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .65rem 1.3rem; margin-top: 1.8rem; }
.hero-art {
    isolation: isolate;
    position: relative;
    aspect-ratio: 1.21;
    border: 1px solid #fff;
    border-radius: var(--radius);
    background: linear-gradient(150deg, #f7f4fa, #dad6e5);
    box-shadow: 0 0 0 1px #c4becf95, 0 24px 55px #453f601a, 0 0 52px #fff9;
}
.hero-paper { position: absolute; inset: .55rem; border: 1px solid #ccc5d684; border-radius: .42rem; overflow: hidden; }
.hero-moth { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.hero-moth.custom-hero { object-fit: contain; }
.corner {
    position: absolute;
    width: clamp(2rem, 5.4vw, 4.55rem);
    aspect-ratio: 1;
    background: url('corner.png') 0 0 / 218% auto no-repeat;
    mix-blend-mode: multiply;
    opacity: .37;
    pointer-events: none;
}
.corner-tl { top: .85rem; left: .85rem; }
.corner-tr { top: .85rem; right: .85rem; transform: rotate(90deg); }
.corner-bl { bottom: .85rem; left: .85rem; transform: rotate(-90deg); }
.corner-br { bottom: .85rem; right: .85rem; transform: rotate(180deg); }
.hero-art figcaption {
    position: absolute;
    inset: auto 12% 1.38rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    color: #51495d;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: center;
    text-wrap: balance;
}
.hero-art:has(.custom-hero) figcaption { background: #f5f2f5eb; padding: .25rem .4rem; border-radius: .25rem; }
.hero-art figcaption span { width: .85rem; height: 1px; background: #93889f; flex: none; }
.hero-rule { display: flex; align-items: center; justify-content: center; gap: 1rem; height: 1px; color: #8b829b; }
.hero-rule::before, .hero-rule::after { content: ''; height: 1px; flex: 1; background: linear-gradient(to right, transparent, #aaa0b5); }
.hero-rule::after { transform: scaleX(-1); }

.section { padding-block: clamp(3.6rem, 6.8vw, 6.6rem); }
.section h2 { margin-top: .55rem; }
.section-intro { margin-top: .8rem; color: var(--muted); max-width: 38rem; line-height: 1.65; }
.gallery { padding-top: clamp(3.6rem, 5.7vw, 5.15rem); background: linear-gradient(180deg, #eae7ef, #f7f5f8 17%, #f4f2f6 85%, #ebe8f0); }
.section-header { display: flex; align-items: end; justify-content: space-between; gap: 1.1rem; margin-bottom: 1.65rem; }
.gallery-controls { display: flex; gap: .55rem; }
.gallery-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3rem) / 3.28);
    align-items: start;
    gap: .95rem;
    list-style: none;
    margin: 0;
    padding: .15rem 0 .8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.gallery-track.is-dragging { cursor: grabbing; user-select: none; scroll-snap-type: none; }
.gallery-track.is-dragging * { cursor: inherit; }
.motif-card { min-width: 0; scroll-snap-align: start; }
.motif-link {
    display: block;
    border: 1px solid #d5cfdc;
    background: #faf8fc;
    text-decoration: none;
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .2s var(--ease), background .2s var(--ease);
}
.motif-link:focus-visible { outline-offset: -3px; }
.motif-link:hover { border-color: #9385a2; background: #fff; }
.motif-image { aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: #edeaf0; }
.motif-image img { width: 100%; height: 100%; object-fit: contain; transition: transform .4s var(--ease); user-select: none; -webkit-user-drag: none; }
.motif-image.sample img { position: absolute; inset: 0 auto auto 0; max-width: none; width: 200%; height: 200%; object-fit: fill; }
.sample.sample-top-right img, .sample.sample-bottom-right img { left: -100%; }
.sample.sample-bottom-left img, .sample.sample-bottom-right img { top: -100%; }
.motif-link:hover .motif-image:not(.sample) img { transform: scale(1.035); }
.motif-summary { padding: .85rem .95rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .45rem; border-top: 1px solid #ded9e2; }
.motif-summary > div { min-width: 0; }
.motif-summary h3 { margin: .14rem 0 .5rem; font-size: clamp(1.6rem, 2.6vw, 2.28rem); }
.motif-style { color: var(--accent); font-size: .65rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.motif-studio { display: flex; align-items: center; gap: .32rem; color: var(--muted); font-size: .8rem; overflow-wrap: anywhere; }
.motif-studio .icon { color: var(--accent); }
.motif-open { flex: none; display: grid; place-items: center; width: 2.45rem; height: 2.45rem; border-radius: 50%; border: 1px solid var(--line); color: var(--accent); transition: background .2s, color .2s; }
.motif-link:hover .motif-open { background: var(--accent); color: #fff; }
.carousel-position { display: flex; gap: .75rem; align-items: center; margin-top: .6rem; color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.carousel-line { width: 2.2rem; height: 1px; background: var(--line); }
.empty-gallery { display: grid; justify-items: start; gap: .65rem; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; background: #ffffff50; color: var(--muted); }
.empty-gallery > .icon { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.motif-details { display: none; }
.motif-details:target { display: grid; gap: 1rem; padding: .9rem; margin-top: .5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--light); }
.motif-details:target .detail-art { display: none; }
.motif-dialog { width: min(51rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); box-shadow: 0 28px 90px #251f3745; overflow: auto; }
.motif-dialog::backdrop { background: #28223580; backdrop-filter: blur(6px); }
.dialog-close { position: absolute; top: .65rem; right: .65rem; z-index: 1; background: var(--light); }
.dialog-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); align-items: center; }
.detail-copy { padding: 1rem; min-width: 0; }
.dialog-layout .detail-copy { padding: 2.7rem 1.45rem; }
.detail-copy h3 { margin: .45rem 0 .8rem; font-size: clamp(2.1rem, 4.1vw, 3.5rem); }
.description { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); }
.detail-studio { display: grid; gap: .2rem; padding: .85rem 0; margin: .7rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.detail-studio strong, .detail-studio .icon { color: var(--accent); }

.process { background: linear-gradient(180deg, #ebe8f0, #eeebf2 52%, #e7e4ee); }
.process-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; gap: clamp(1.1rem, 3.5vw, 3.65rem); padding: 0; margin: 2.2rem 0 0; }
.process-grid li { padding: 1.15rem .3rem 0 0; border-top: 1px solid #aba2b7; }
.step-number { display: block; margin-bottom: .85rem; color: var(--accent); font-size: .76rem; font-weight: 700; letter-spacing: .1em; }
.process-grid h3 { margin-bottom: .6rem; }
.process-grid p { color: var(--muted); font-size: .94rem; line-height: 1.65; }

.contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: radial-gradient(ellipse at 70% 23%, #f9f6fc, transparent 61%), linear-gradient(155deg, #e7e4ee, #ded9e7 56%, #eeebf2);
}
.contact::before {
    position: absolute;
    content: '';
    z-index: -1;
    inset: 16% 51% 0 0;
    background: url('chrysanthemum.png') right bottom / cover no-repeat;
    filter: invert(1) grayscale(1);
    mix-blend-mode: multiply;
    opacity: .32;
    mask-image: linear-gradient(to bottom, transparent, #000 47%);
}
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(1.8rem, 7vw, 6.2rem); }
.contact-copy { padding-top: .7rem; }
.contact-copy h2 { max-width: 30rem; }
.contact-copy .section-intro { max-width: 24rem; }
.contact-form { display: grid; gap: 1rem; padding: clamp(1.15rem, 3.3vw, 2.25rem); border: 1px solid #fff; background: #f9f7fbe8; border-radius: var(--radius); box-shadow: 0 10px 36px #4c43601c; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.contact-form .field:nth-child(3) { grid-column: 1 / -1; }
.field { display: grid; align-content: start; gap: .33rem; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label, .check-label { font-size: .87rem; font-weight: 650; }
.field input, .field textarea, .field select { min-width: 0; width: 100%; border: 1px solid #bcb4c7; border-radius: .4rem; background: var(--light); padding: .7rem .76rem; min-height: 2.85rem; font-size: .94rem; }
.field input::placeholder, .field textarea::placeholder { color: #6e687a; }
.field textarea { resize: none; min-height: 7.4rem; field-sizing: content; }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field small, .form-note { color: var(--muted); font-size: .8rem; }
.field .field-error { color: var(--danger); }
.form-actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.form-actions .text-link { font-size: .82rem; }
.chosen-motif { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .55rem; font-size: .83rem; background: #ede8f4; padding: .65rem .75rem; border-radius: .42rem; }
.chosen-motif a { margin-left: auto; }
.feedback { border-radius: .42rem; border: 1px solid; padding: .72rem .85rem; font-size: .89rem; overflow-wrap: anywhere; }
.feedback-error { color: var(--danger); background: #fff3f5; border-color: #e6bbc6; }
.feedback-success { color: var(--success); background: #edf7f1; border-color: #c2d8ca; }

.site-footer { border-top: 1px solid #c7c0d0; background: #e6e2eb; color: var(--muted); }
.footer-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-block: 1.3rem; }
.footer-inner p { font-size: .79rem; }
.footer-inner nav { display: flex; justify-self: end; flex-wrap: wrap; gap: .3rem 1rem; }
.footer-inner nav a { font-size: .79rem; }
.info-page { min-height: 62vh; }
.info-page h1 { font-size: clamp(2.9rem, 7vw, 5.5rem); margin-bottom: 1.25rem; }
.info-page .description { max-width: 65ch; margin-bottom: 1.45rem; }

#sparkles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }

@media (max-width: 900px) {
    .header-inner { gap: .9rem; }
    .hero-grid { gap: 1.8rem; }
    .gallery-track { grid-auto-columns: calc((100% - 2rem) / 2.65); }
}
@media (max-width: 700px) {
    :root { scroll-padding-top: 4.5rem; }
    .header-inner { min-height: 4.15rem; display: flex; justify-content: space-between; flex-wrap: wrap; }
    .header-cta { display: none; }
    .site-nav { gap: .8rem; }
    .site-header.has-menu .menu-button { display: inline-flex; width: 2.65rem; min-height: 2.65rem; }
    .site-header.has-menu .site-nav { display: none; }
    .site-header.has-menu .site-nav.is-open { display: grid; position: absolute; top: 100%; left: 0; right: 0; padding: .35rem var(--gutter) .7rem; background: var(--paper); border-bottom: 1px solid var(--line); gap: 0; box-shadow: 0 8px 20px #30273b10; }
    .site-nav.is-open a { min-height: 2.75rem; }
    .hero-grid { grid-template-columns: 1fr; padding-top: 2.5rem; gap: 1.7rem; }
    .hero-copy { padding: .25rem 0; }
    .hero h1 { font-size: clamp(4.1rem, 12vw, 6.7rem); margin-block: .95rem 1.1rem; }
    .hero-actions { margin-top: 1.3rem; }
    .hero-art { max-width: 36rem; width: 100%; }
    .hero-art figcaption { bottom: 1rem; font-size: .58rem; }
    .gallery-track { grid-auto-columns: calc((100% - 1.35rem) / 1.9); }
    .process-grid { grid-template-columns: 1fr; gap: 1.35rem; margin-top: 1.6rem; }
    .process-grid li { padding-top: .85rem; }
    .process-grid p { max-width: 45ch; }
    .contact-grid { grid-template-columns: 1fr; }
    .contact::before { inset: 0 0 52% 30%; opacity: .17; }
    .footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; }
}
@media (max-width: 460px) {
    .section-header { align-items: start; position: relative; }
    .section-header h2 { font-size: clamp(2.8rem, 12vw, 3.55rem); }
    .section-header:has(.gallery-controls:not([hidden])) .eyebrow { padding-right: 6.6rem; min-height: 2.4rem; }
    .gallery-controls { position: absolute; top: 0; right: 0; gap: .4rem; }
    .gallery-controls .icon-button { width: 2.45rem; min-height: 2.45rem; }
    .gallery-track { grid-auto-columns: 77%; gap: .7rem; }
    .form-grid, .dialog-layout { grid-template-columns: 1fr; }
    .dialog-layout .motif-image { max-height: 48dvh; }
    .dialog-layout .motif-image.sample { width: min(100%, 36dvh); margin-inline: auto; }
    .dialog-layout .detail-copy { padding: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
    #sparkles { display: none; }
}