:root{
    --paper:#E6E8E2;
    --paper-2:#DBDED5;
    --ink:#14181B;
    --ink-soft:#3B4046;
    --stone:#6E7570;
    --falu:#8C3A24;
    --falu-soft:#B0573A;
    --line:rgba(20,24,27,0.16);
    --serif:'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans:'Archivo', 'Helvetica Neue', Arial, sans-serif;
    /* One curve for the whole site: quick to leave, slow to settle. */
    --ease:cubic-bezier(.2,.7,.2,1);
    --ease-soft:cubic-bezier(.4,0,.2,1);
    --sig-filter:brightness(0) opacity(0.92);
}
@media (prefers-color-scheme: dark){
    :root{
        --paper:#14171A; --paper-2:#1B1F22; --ink:#ECEAE2; --ink-soft:#B9BEBA;
        --stone:#8A8F89; --falu:#C56A4A; --falu-soft:#D98763;
        --line:rgba(236,234,226,0.16);
        --sig-filter:none;
    }
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
    background:var(--paper); color:var(--ink); font-family:var(--sans);
    line-height:1.65; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }
img{ max-width:100%; }
/* <picture> is an inline wrapper that would otherwise break the height:100%
   and object-fit rules the figures rely on; let the <img> lay out directly. */
picture{ display:contents; }
::selection{ background:var(--falu); color:var(--paper); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--falu); outline-offset:3px;
}

/* ---------- header ---------- */
header.site{
    position:sticky; top:0; z-index:50; background:var(--paper);
    border-bottom:1px solid var(--line);
}
.header-inner{
    max-width:1360px; margin:0 auto; padding:1rem 2.5rem;
    display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.sig-link{ display:flex; align-items:center; }
.sig-link img{
    height:42px; width:auto; display:block; filter:var(--sig-filter);
}
nav.main ul{ list-style:none; display:flex; gap:2rem; }
nav.main a{
    color:var(--ink); text-decoration:none; font-size:0.74rem; font-weight:600;
    letter-spacing:0.13em; text-transform:uppercase; opacity:0.68;
    padding-bottom:0.35rem; border-bottom:2px solid transparent;
    transition:opacity .3s var(--ease), border-color .3s var(--ease); white-space:nowrap;
}
nav.main a.active, nav.main a:hover{ opacity:1; border-color:var(--falu); }
@media (max-width:900px){
    .header-inner{ flex-direction:column; gap:0.9rem; padding:1rem 1.25rem 0.75rem; }
    .sig-link img{ height:34px; }
    nav.main{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
    nav.main ul{ gap:1.5rem; justify-content:center; min-width:max-content; margin:0 auto; padding:0 0.5rem; }
}

/* ---------- views ---------- */
.view{ display:none; }
.view.active{ display:block; animation:fadeUp .45s ease; }
@keyframes fadeUp{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .view.active{ animation:none; }
}

/* ---------- hero ---------- */
.hero{ display:grid; grid-template-columns:0.86fr 1.14fr; min-height:82vh; }
@media (max-width:900px){ .hero{ grid-template-columns:1fr; min-height:auto; } }
.hero-text{
    display:flex; flex-direction:column; justify-content:center;
    padding:4rem 3.5rem; gap:1.6rem;
}
@media (max-width:900px){ .hero-text{ padding:3rem 1.5rem; } }
.hero-eyebrow{ font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--stone); font-weight:600; }
.hero-text h1{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(2.6rem,4.6vw,4.1rem); line-height:1.02; letter-spacing:-0.018em;
}
.hero-text h1 em{ font-style:italic; color:var(--falu); }
.hero-text p{ color:var(--ink-soft); font-size:1.02rem; max-width:38ch; }
.cta-row{ display:flex; gap:0.9rem; flex-wrap:wrap; margin-top:0.6rem; }
.btn{
    font-family:var(--sans); font-size:0.76rem; font-weight:700; letter-spacing:0.11em;
    text-transform:uppercase; padding:1rem 1.9rem; border:1.5px solid var(--ink);
    background:transparent; color:var(--ink); cursor:pointer;
    transition:background-color .35s var(--ease), color .35s var(--ease),
               border-color .35s var(--ease), transform .35s var(--ease);
    text-decoration:none; display:inline-block; text-align:center;
}
.btn:hover{ background:var(--ink); color:var(--paper); }
.btn:active{ transform:translateY(1px); }
.btn.solid{ background:var(--falu); border-color:var(--falu); color:#F3EDE7; }
.btn.solid:hover{ background:var(--falu-soft); border-color:var(--falu-soft); }

.hero-figure{ position:relative; overflow:hidden; background:var(--paper-2); }
.hero-figure a{ position:absolute; inset:0; display:block; }
.hero-figure img{ width:100%; height:100%; object-fit:cover; object-position:50% 72%; display:block; }
@media (max-width:900px){ .hero-figure{ height:64vh; } }
.hero-figure .cap{
    position:absolute; left:1.4rem; bottom:1.4rem; z-index:2; background:var(--ink); color:var(--paper);
    font-size:0.72rem; letter-spacing:0.06em; padding:0.55rem 0.9rem;
    display:flex; gap:0.6rem; align-items:center; font-variant-numeric:tabular-nums;
    pointer-events:none;
}
.hero-figure .cap .rd{ width:7px; height:7px; border-radius:50%; background:var(--falu-soft); flex-shrink:0; }

/* ---------- sections ---------- */
.section{ max-width:1360px; margin:0 auto; padding:6rem 2.5rem; }
@media (max-width:900px){ .section{ padding:3.5rem 1.25rem; } }
.section-head{
    display:flex; justify-content:space-between; align-items:flex-end; gap:2rem;
    margin-bottom:2.4rem; flex-wrap:wrap; border-bottom:1px solid var(--line); padding-bottom:1.8rem;
}
.eyebrow{
    font-size:0.72rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--falu);
    font-weight:700; margin-bottom:0.7rem;
}
.section-head h2{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(1.9rem,3.2vw,2.7rem); letter-spacing:-0.012em;
}
.section-head p{ color:var(--stone); max-width:36ch; font-size:0.94rem; }

.intro-line{
    font-family:var(--serif); font-size:clamp(1.35rem,2.5vw,1.9rem); font-weight:400;
    line-height:1.55; max-width:44ch; margin:0 auto; text-align:center;
}
.intro-line em{ font-style:italic; color:var(--falu); }

/* ---------- filter bar ---------- */
.filter-bar{ display:flex; gap:0.6rem; flex-wrap:wrap; margin-bottom:2.6rem; }
.filter-bar [data-filter]{
    font-family:var(--sans); font-size:0.72rem; font-weight:700; letter-spacing:0.11em;
    text-transform:uppercase; padding:0.65rem 1.3rem; border:1.5px solid var(--line);
    background:transparent; color:var(--ink); cursor:pointer;
    text-decoration:none; display:inline-block; line-height:1.2;
    transition:background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.filter-bar [data-filter]:hover{ border-color:var(--ink); }
.filter-bar [data-filter].active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.filter-bar .count{ color:inherit; opacity:0.55; margin-left:0.4rem; font-variant-numeric:tabular-nums; }

/* ---------- masonry gallery ---------- */
.gallery{ columns:3 280px; column-gap:2rem; }
@media (max-width:700px){ .gallery{ columns:1; } }
.piece{
    break-inside:avoid; margin-bottom:2.4rem; display:block;
    color:var(--ink); text-decoration:none;
}
.piece figure{ background:var(--paper-2); overflow:hidden; position:relative; }
.piece img{
    width:100%; height:auto; display:block;
    transition:transform .9s var(--ease);
}
.piece:hover img{ transform:scale(1.03); }
@media (prefers-reduced-motion: reduce){
    .piece img{ transition:none; }
    .piece:hover img{ transform:none; }
}
.piece .tag{
    position:absolute; top:0.9rem; left:0.9rem; z-index:2; background:var(--ink); color:var(--paper);
    font-size:0.64rem; letter-spacing:0.12em; text-transform:uppercase; font-weight:700;
    padding:0.4rem 0.7rem;
}
.piece figcaption{ padding-top:0.9rem; }
.piece .row1{ display:flex; justify-content:space-between; align-items:baseline; gap:0.8rem; }
.piece h3{ font-family:var(--serif); font-weight:400; font-size:1.2rem; }
.piece .price{ font-size:0.92rem; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.piece .price.request{ color:var(--stone); font-weight:400; font-style:italic; font-family:var(--serif); font-size:0.95rem; }
.piece .dims{ color:var(--stone); font-size:0.8rem; margin-top:0.3rem; font-variant-numeric:tabular-nums; letter-spacing:0.02em; }

/* ---------- artwork detail ---------- */
.work-top{
    max-width:1360px; margin:0 auto; padding:1.6rem 2.5rem 0;
    display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
}
@media (max-width:900px){ .work-top{ padding:1.2rem 1.25rem 0; } }
.back-link, .worknav a{
    color:var(--stone); text-decoration:none; font-size:0.76rem; font-weight:600;
    letter-spacing:0.11em; text-transform:uppercase; transition:color .3s var(--ease);
}
.back-link:hover, .worknav a:hover{ color:var(--falu); }
.worknav{ display:flex; gap:1.6rem; }
.work-layout{
    max-width:1360px; margin:0 auto; padding:2.2rem 2.5rem 5rem;
    display:grid; grid-template-columns:1.15fr 0.85fr; gap:4rem; align-items:start;
}
@media (max-width:900px){ .work-layout{ grid-template-columns:1fr; gap:2.2rem; padding:1.6rem 1.25rem 3.5rem; } }
.work-figure{ background:var(--paper-2); padding:2.5rem; position:sticky; top:110px; }
@media (max-width:900px){ .work-figure{ position:static; padding:1.25rem; } }
.work-figure img{ width:100%; height:auto; display:block; max-height:78vh; object-fit:contain; }
.work-info .eyebrow{ margin-bottom:0.5rem; }
.work-info h1{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(2.1rem,3.6vw,3.1rem); line-height:1.05;
    letter-spacing:-0.015em; margin-bottom:1.6rem;
}
.spec-table{ border-top:1px solid var(--line); margin-bottom:1.8rem; }
.spec-row{
    display:flex; justify-content:space-between; gap:1.5rem;
    padding:0.8rem 0; border-bottom:1px solid var(--line); font-size:0.92rem;
}
.spec-row .k{
    color:var(--stone); font-size:0.72rem; font-weight:600; letter-spacing:0.13em;
    text-transform:uppercase; padding-top:0.15rem;
}
.spec-row .v{ text-align:right; font-variant-numeric:tabular-nums; }
.spec-row .v.price-lg{ font-family:var(--serif); font-size:1.35rem; }
.work-desc{ color:var(--ink-soft); font-size:0.98rem; margin-bottom:1.8rem; max-width:52ch; }
.avail-note{
    display:flex; gap:0.7rem; align-items:flex-start; background:var(--paper-2);
    padding:1rem 1.2rem; font-size:0.86rem; color:var(--ink-soft); margin-bottom:2.2rem;
}
.avail-note .rd{ width:8px; height:8px; border-radius:50%; background:var(--falu); flex-shrink:0; margin-top:0.45rem; }

/* ---------- forms ---------- */
.inquiry-form h3{
    font-family:var(--serif); font-weight:400; font-size:1.5rem; margin-bottom:0.4rem;
}
.inquiry-form .sub{ color:var(--stone); font-size:0.88rem; margin-bottom:1.6rem; }
.form-group{ margin-bottom:1.2rem; }
.form-group label{
    display:block; margin-bottom:0.45rem; font-size:0.72rem; font-weight:600;
    letter-spacing:0.13em; text-transform:uppercase; color:var(--ink-soft);
}
.form-group input, .form-group textarea{
    width:100%; padding:0.9rem 1rem; border:1.5px solid var(--line);
    font-size:0.95rem; font-family:var(--sans); background:var(--paper); color:var(--ink);
    transition:border-color .3s var(--ease);
}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:var(--falu); }
.form-group textarea{ min-height:110px; resize:vertical; }
.form-status{ margin-top:0.9rem; font-size:0.9rem; display:none; }
.form-status.ok{ display:block; color:var(--falu); font-weight:600; }
.form-status.err{ display:block; color:var(--falu); }
.direct-line{ margin-top:1.4rem; font-size:0.86rem; color:var(--stone); }
.direct-line a{ color:var(--falu); text-decoration:none; }
.direct-line a:hover{ text-decoration:underline; }

/* ---------- about ---------- */
.split{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:4rem; align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; gap:2.2rem; } }
.split img{ width:100%; height:auto; display:block; }
.split h2, .split h1{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(1.9rem,3.2vw,2.5rem); letter-spacing:-0.012em; margin-bottom:1.2rem;
}
.pull-quote{
    font-family:var(--serif); font-style:italic; font-size:clamp(1.3rem,2.4vw,1.6rem);
    line-height:1.5; border-left:3px solid var(--falu); padding-left:1.7rem; margin:1.8rem 0;
    hanging-punctuation:first; letter-spacing:-0.006em;
}
.body-text{ color:var(--ink-soft); font-size:0.98rem; margin-bottom:1.3rem; max-width:68ch; }
.about-body{ max-width:820px; margin:0 auto; }
.about-body .pull-quote{ margin:2.4rem 0; }

.newsletter{
    background:var(--paper-2); padding:3.5rem 2.5rem; text-align:center; margin-top:4rem;
}
.newsletter h3{ font-family:var(--serif); font-weight:400; font-size:1.8rem; margin-bottom:0.6rem; }
.newsletter p{ color:var(--stone); font-size:0.94rem; margin-bottom:1.8rem; }
.newsletter-form{ display:flex; max-width:560px; margin:0 auto; gap:0.8rem; }
@media (max-width:600px){ .newsletter-form{ flex-direction:column; } }
.newsletter-form input{
    flex:1; padding:0.95rem 1.2rem; border:1.5px solid var(--line);
    font-size:0.95rem; font-family:var(--sans); background:var(--paper); color:var(--ink);
}
.newsletter-form input:focus{ outline:none; border-color:var(--falu); }

/* ---------- cta band ---------- */
.cta-band{ background:var(--ink); color:var(--paper); text-align:center; padding:5.5rem 2.5rem; }
.cta-band h2{
    font-family:var(--serif); font-weight:400;
    font-size:clamp(1.9rem,3.4vw,2.7rem); letter-spacing:-0.012em; margin-bottom:1rem;
}
.cta-band p{ opacity:0.72; max-width:46ch; margin:0 auto 2rem; }
.cta-band .btn{ border-color:var(--paper); color:var(--paper); }
.cta-band .btn:hover{ background:var(--paper); color:var(--ink); }

/* ---------- footer ---------- */
footer{ padding:3.5rem 2.5rem 3rem; text-align:center; border-top:1px solid var(--line); }
footer .fsig{ height:34px; width:auto; filter:var(--sig-filter); margin-bottom:1.4rem; }
.social-links{ display:flex; gap:1.1rem; justify-content:center; margin-bottom:1.8rem; }
.social-links a{
    color:var(--ink); width:44px; height:44px; border:1.5px solid var(--line);
    display:flex; align-items:center; justify-content:center; border-radius:50%;
    transition:color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.social-links a:hover{ color:var(--falu); border-color:var(--falu); transform:translateY(-3px); }
footer p{ color:var(--stone); font-size:0.84rem; margin:0.3rem 0; }
footer a.mail{ color:var(--falu); text-decoration:none; }
footer a.mail:hover{ text-decoration:underline; }

/* ---------- progressive image reveal ---------- */
/* Each figure carries its blurred 20px preview as a background; the real image
   fades in on top once decoded, so nothing ever pops or shifts. */
.ph{
    position:relative; overflow:hidden; background:var(--paper-2);
    background-size:cover; background-position:center;
}
.ph::after{
    content:''; position:absolute; inset:0; backdrop-filter:blur(14px);
    transition:opacity .7s var(--ease-soft); pointer-events:none; z-index:1;
}
.ph.ready::after{ opacity:0; }
.ph img{ opacity:0; transition:opacity .7s var(--ease-soft); }
.ph.ready img{ opacity:1; }
/* Without JS the image must still be visible. */
.no-js .ph img{ opacity:1; }
.no-js .ph::after{ display:none; }

/* ---------- scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(18px); }
.reveal.seen{
    opacity:1; transform:none;
    transition:opacity .7s var(--ease-soft), transform .7s var(--ease);
}
.no-js .reveal{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
    .reveal, .reveal.seen{ opacity:1; transform:none; transition:none; }
    .ph img, .ph::after{ transition:none; }
    .ph img{ opacity:1; }
    .ph::after{ display:none; }
    .btn:active{ transform:none; }
    .social-links a:hover{ transform:none; }
}

/* ---------- skip link ---------- */
.skip-link{
    position:absolute; left:-9999px; top:0; z-index:100;
    background:var(--ink); color:var(--paper); padding:0.9rem 1.4rem;
    font-size:0.78rem; font-weight:700; letter-spacing:0.11em; text-transform:uppercase;
    text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ---------- form consent ---------- */
.consent{
    font-size:0.78rem; color:var(--stone); line-height:1.5; margin-top:1rem;
}
.consent a{ color:var(--falu); }
.newsletter .consent{ max-width:560px; margin:1rem auto 0; text-align:center; }

/* ---------- legal pages ---------- */
.legal{ max-width:760px; margin:0 auto; padding:4.5rem 2.5rem 5.5rem; }
@media (max-width:900px){ .legal{ padding:3rem 1.25rem 4rem; } }
.legal h1{
    font-family:var(--serif); font-weight:400; font-size:clamp(2.1rem,3.6vw,3rem);
    letter-spacing:-0.015em; margin-bottom:0.6rem;
}
.legal .updated{
    color:var(--stone); font-size:0.82rem; letter-spacing:0.04em;
    padding-bottom:1.8rem; margin-bottom:2.6rem; border-bottom:1px solid var(--line);
}
.legal h2{
    font-family:var(--serif); font-weight:400; font-size:1.55rem;
    letter-spacing:-0.008em; margin:2.8rem 0 0.9rem;
}
.legal h3{
    font-size:0.76rem; font-weight:700; letter-spacing:0.13em; text-transform:uppercase;
    color:var(--falu); margin:1.8rem 0 0.6rem;
}
.legal p, .legal li{ color:var(--ink-soft); font-size:0.97rem; margin-bottom:1rem; }
.legal ul, .legal ol{ padding-left:1.3rem; margin-bottom:1.2rem; }
.legal li{ margin-bottom:0.5rem; }
.legal a{ color:var(--falu); }
.legal strong{ color:var(--ink); font-weight:600; }
.legal .box{
    background:var(--paper-2); padding:1.5rem 1.7rem; margin:1.8rem 0;
    border-left:3px solid var(--falu);
}
.legal .box p:last-child{ margin-bottom:0; }
/* Marks details the artist still has to supply before this text is accurate. */
.legal .todo{
    background:var(--falu); color:#F3EDE7; padding:0.1em 0.45em;
    font-size:0.86em; font-weight:600; letter-spacing:0.03em; white-space:nowrap;
}

/* ---------- footer legal row ---------- */
.foot-links{
    display:flex; gap:1.6rem; justify-content:center; flex-wrap:wrap;
    margin-bottom:1.6rem;
}
.foot-links a{
    color:var(--stone); text-decoration:none; font-size:0.74rem; font-weight:600;
    letter-spacing:0.12em; text-transform:uppercase;
    transition:color .3s var(--ease);
}
.foot-links a:hover{ color:var(--falu); }

/* ---------- empty state ---------- */
.empty{ color:var(--stone); font-style:italic; font-family:var(--serif); font-size:1.15rem; }

/* ---------- quote attribution ---------- */
.pull-quote cite{
    display:block; margin-top:0.7rem; font-style:normal; font-family:var(--sans);
    font-size:0.74rem; font-weight:600; letter-spacing:0.13em; text-transform:uppercase;
    color:var(--stone);
}