/* ARTILIER — collection tweaks. Every rule is gated on a data-tw-* attribute, so
   the default state is byte-for-byte the approved design. */

/* ── gallery rhythm ─────────────────────────────────────────────────────────
   editorial: a lead pair opens each cycle, the rest run three-up, and one item
   per cycle drops to break the baseline. Cycle of five fills a six-column grid
   exactly (3+3 / 2+2+2). */
html[data-tw-rhythm="editorial"] .cg{grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(22px,2.8vw,46px) clamp(16px,2vw,30px);align-items:start}
html[data-tw-rhythm="editorial"] .cgi{grid-column:span 2}
html[data-tw-rhythm="editorial"] .cgi:nth-child(5n+1),html[data-tw-rhythm="editorial"] .cgi:nth-child(5n+2){grid-column:span 3}
html[data-tw-rhythm="editorial"] .cgi:nth-child(5n+1) .ph,html[data-tw-rhythm="editorial"] .cgi:nth-child(5n+2) .ph{aspect-ratio:4/5}
html[data-tw-rhythm="editorial"] .cgi:nth-child(5n+4){margin-top:clamp(12px,2.6vw,44px)}
html[data-tw-rhythm="editorial"] .cgi:nth-child(5n+1) b,html[data-tw-rhythm="editorial"] .cgi:nth-child(5n+2) b{font-size:clamp(25px,2.2vw,32px)}

/* contact: the whole collection at a glance — square, dense, index-like */
html[data-tw-rhythm="contact"] .cg{grid-template-columns:repeat(auto-fill,minmax(clamp(116px,13vw,178px),1fr));gap:7px}
html[data-tw-rhythm="contact"] .cgi{gap:8px}
html[data-tw-rhythm="contact"] .cgi .ph{aspect-ratio:1}
html[data-tw-rhythm="contact"] .cgi b{font-size:16px}
html[data-tw-rhythm="contact"] .cgi .cgn{font-size:9px}
html[data-tw-rhythm="contact"] .cgi figcaption span[data-mf]{display:none}

/* ── naming ─────────────────────────────────────────────────────────────── */
html[data-tw-caption="overlaid"] .cgi{position:relative}
html[data-tw-caption="overlaid"] .cgi figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 13px;background:linear-gradient(to top,rgba(21,17,16,.72),rgba(21,17,16,.26) 58%,transparent);pointer-events:none}
html[data-tw-caption="overlaid"] .cgi b,html[data-tw-caption="overlaid"] .cgi .cgn,html[data-tw-caption="overlaid"] .cgi figcaption span[data-mf]{color:#F7F3EB}
html[data-tw-caption="overlaid"] .cgi .cgn{opacity:.7}

html[data-tw-caption="quiet"] .cgi .cgn{color:var(--tx-2)}
html[data-tw-caption="quiet"] .cgi figcaption span[data-mf]{display:none}
/* The reveal exists only where a real pointer does, so touch keeps the names. */
@media(hover:hover){
html[data-tw-caption="quiet"] .cgi b{color:transparent;transition:color .4s var(--e)}
html[data-tw-caption="quiet"] .cgi:hover b,html[data-tw-caption="quiet"] .cgi:focus-within b{color:var(--tx)}
@media(prefers-reduced-motion:reduce){html[data-tw-caption="quiet"] .cgi b{transition:none}}
}

/* ── ground ─────────────────────────────────────────────────────────────── */
html[data-tw-ground="paper"] .cgs.alt{background:var(--paper)}
html[data-tw-ground="paper"] .cgs.alt .cgi .ph{background:var(--bone)}

/* ink: one token flip carries the whole page — type, hairlines and empty
   frames all follow, so the rugs sit on a gallery wall instead of paper */
html[data-tw-ground="ink"]{--paper:#241C16;--bone:#1B1510;--stone:#3A2E24;--sand:rgba(247,243,235,.2);--ink:#F7F3EB;--tx:#F0EAE0;--tx-2:rgba(247,243,235,.66);--tx-3:rgba(247,243,235,.44);--rust:#C25E36;--rust-d:#A04A29}
html[data-tw-ground="ink"] body{background:#241C16}
/* The fixed, backdrop-filtered nav does not reliably re-resolve inherited custom
   properties in every engine, so its ink state is written out literally. */
html[data-tw-ground="ink"] nav,html[data-tw-ground="ink"] nav.s{background:rgba(36,28,22,.94)!important;box-shadow:0 1px 0 rgba(247,243,235,.16)!important}
html[data-tw-ground="ink"] nav .logo,html[data-tw-ground="ink"] nav .burger{color:#F0EAE0!important}
html[data-tw-ground="ink"] nav .nl a{color:rgba(247,243,235,.66)!important}
html[data-tw-ground="ink"] nav .nl a:hover{color:#F7F3EB!important}
html[data-tw-ground="ink"] .filt{background:rgba(36,28,22,.94);box-shadow:0 1px 0 rgba(247,243,235,.16)}
html[data-tw-ground="ink"] .mnav{background:#241C16}
html[data-tw-ground="ink"] media-slot,html[data-tw-ground="ink"] image-slot{--is-empty-bg:#2F251D}
html[data-tw-ground="ink"] .backhome{background:#1B1510}
html[data-tw-ground="ink"] .cta.ol{color:#F7F3EB;border-color:rgba(247,243,235,.5)}
html[data-tw-ground="ink"] .cta.ol:hover{background:#F7F3EB;color:#241C16}