;
named here so collections.php stays free of style attributes. */
.collection-rows{display:grid;gap:calc(var(--space-8) * 1.2)}
.collection-row{text-decoration:none;color:inherit}
.collection-row-title{font-size:clamp(24px,2.6vw,34px)}
.collection-row p{color:var(--color-neutral-800)}
.collection-row .tile-tag{margin:0}
/* ---- artwork.php furniture the mockup's example never showed ---- */
.art-name{color:var(--color-accent)}
.art-figure{margin:0;background:var(--mount-bg);padding:14px}
.art-figure a{display:block}
.art-image{width:100%;height:auto;display:block}
.art-meta{font-size:12px;color:var(--color-neutral-700);margin:var(--space-3) 0 var(--space-6)}
.mini-desc{font-size:18px;line-height:1.5;color:var(--color-neutral-800);margin-bottom:var(--space-4)}
.main-desc{color:var(--color-neutral-800)}
.wall-views,.canvas-views,.formats{margin-top:var(--space-6)}
.wall-views h2,.canvas-views h2,.formats h2{font-size:19px;margin-bottom:var(--space-2)}
.wall-views-cta,.formats-intro{font-size:13px;color:var(--color-neutral-700);margin-bottom:var(--space-3)}
.wall-views-more{margin-top:var(--space-4)}
.wall-views-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3)}
.wall-views-grid > a,.wall-views-grid > picture,.wall-views-grid > img{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--mount-bg)}
.wall-views-grid picture{width:100%;height:100%}
.wall-views-grid img{width:100%;height:100%;object-fit:cover}
.canvas-views-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-3);max-width:520px}
.canvas-views-grid img{width:100%;height:auto;display:block;box-shadow:var(--shadow-sm)}
@media (max-width:640px){.wall-views-grid{grid-template-columns:repeat(2,1fr)}}
.pictorem-mediums{color:var(--color-neutral-800);margin-bottom:var(--space-6)}
.pictorem-mediums .sep{margin:0 5px;color:var(--color-neutral-600)}
.intro-link,.wall-link{color:var(--color-accent)}
.intro-link:hover,.wall-link:hover{color:var(--color-accent-600)}
.medium{color:var(--color-neutral-800)}
.buy-links{margin-top:var(--space-6)}
.buy-btn{display:block;width:100%;text-align:center;padding:12px 22px;font-family:var(--font-heading);font-weight:600;font-size:16px;border:none;border-radius:2px;background:var(--color-accent);color:#fff}
.buy-btn:hover{background:var(--color-accent-600);color:#fff}
.shipping-note{text-align:center;margin-top:var(--space-3);font-size:13.5px;color:#2f8f1e}
.inquire-link{text-align:center;margin-top:var(--space-4);font-size:15px}
.inquire-link a{color:var(--color-neutral-800)}
.share-links{text-align:center;margin-top:var(--space-3);font-size:13px;color:var(--color-neutral-700)}
.share-links .share-label{margin-right:4px}
.share-links a{color:var(--color-neutral-700)}
.share-links .sep{margin:0 6px;color:var(--color-neutral-600)}
.related{margin-top:var(--space-8);border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.related + .related{margin-top:var(--space-6)}
.related h2{font-size:18px;margin-bottom:var(--space-3)}
.related-list{list-style:none;margin:0;padding:0}
.related-list li{margin:0;line-height:1.8}
.related-list a{color:var(--color-neutral-800)}
.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}
/* Still-needed odds and ends that have no design-reference rule:
the about page's small print, the 404 link list, and the contact
form's honeypot + AJAX response line. */
.legal{font-size:13px;color:var(--color-neutral-700);margin-top:var(--space-6);border-top:1px solid var(--color-divider);padding-top:var(--space-4)}
.notfound-links{list-style:none;padding:0;margin:var(--space-4) 0 0}
.notfound-links li{margin-bottom:var(--space-2)}
.response-area{min-height:40px;display:flex;align-items:center;font-size:14px;margin-bottom:var(--space-3)}
.response-area.success{color:#2ea44f}
.response-area.error{color:#cb2431}
.honeypot{position:absolute;left:-9999px;opacity:0}
/* =========================================================
HONESTY NOTE
This file is layout and style only. No prose from the
claude-design bundle was carried into the PHP templates or the
database: that bundle's own copy used "palette knife",
"brushwork" and "museum-quality", which fail
includes/honesty_rules.php (H3, H11). Any new copy must still
pass admin/lint.php's engine self-test and
admin/audit_honesty.php before it ships.
========================================================= */
/* Artwork-page section headings: the design renders these at a fixed
22px rather than the fluid .section-title scale, so this narrows it
back down where .section-title is reused inside the artwork columns. */
.art-h2{font-size:22px;margin-top:var(--space-8);margin-bottom:var(--space-2)}
.related .art-h2{margin-top:0}
/* =========================================================
PART 4 — ARTWORK PAGE v3
=========================================================
⚠️ READ THIS BEFORE ASSUMING THIS BLOCK IS NEW.
Everything from `.art-kicker` down to `.lb-caption` belongs to the v3
artwork page (handoff §6) and was MISSING from this file. artwork.php
emits 24 class names that had no rule anywhere in style2.css:
art-kicker art-title art-subtitle art-cta btn-outline
edition-note spec-heading format-grid spec-row spec-palette
swatch art-about about-title about-kicker disclosure-note
art-figure-hint lb lb-open lb-btn lb-close lb-prev lb-next
lb-stage lb-img lb-caption
That is why the page rendered as v2-with-v3-markup: an unstyled kicker,
an H1 whose two spans ran together with the wrong colour, the format
grid falling back to plain bullets, and "Preview on your wall"
losing its outline because `.btn-outline` did not exist.
The likely history is an FTP upload of an older copy of this file over
the v3 one — the same class of accident handoff §9 warns about, and
invisible because nothing 500s. If you still have the real v3
style2.css in a backup, PREFER IT over this block: what follows is
reconstructed from artwork.php's markup and a screenshot, so it will
match closely but not necessarily to the pixel.
The lightbox rules matter most. Without them `.lb` is a plain in-flow
div: opening the viewer would have dumped a raw image into the bottom
of the page instead of overlaying it.
========================================================= */
/* ---- kicker + heading ---- */
.art-kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent-700);margin:0 0 var(--space-3)}
/* art_name and the subtitle both live inside the (§6: the heading
text is byte-identical to v2, only the visual weight differs), so they
are styled as two blocks rather than two elements. */
.art-title{font-size:clamp(34px,4.4vw,56px);letter-spacing:-.02em;margin:0 0 var(--space-4)}
.art-title .art-name{display:block;color:var(--color-text)}
.art-title .art-subtitle{display:block;font-size:clamp(17px,1.7vw,23px);font-weight:400;font-style:italic;line-height:1.25;letter-spacing:0;margin-top:var(--space-3);color:var(--color-text)}
/* Overrides the v2 `.art-name{color:var(--color-accent)}` higher up in
this file, which is still correct for the gallery tiles but turns the
v3 headline blue. Scoped to .art-title so tiles keep it. */
/* ---- CTAs ---- */
.art-cta{display:grid;gap:var(--space-3);margin:0 0 var(--space-4)}
.btn-outline{background:transparent;border-color:var(--color-divider);color:var(--color-text)}
.btn-outline:hover{border-color:var(--color-accent);color:var(--color-accent)}
/* ---- edition / authenticity / shipping ---- */
.edition-note{margin:0 0 var(--space-6);padding-left:1.15em;font-size:13.5px;line-height:1.55;color:var(--color-neutral-700)}
.edition-note li{margin-bottom:var(--space-2)}
.edition-note li:last-child{margin-bottom:0}
/* ---- section headings inside the info column ---- */
/* Rule underneath, uppercase, at the small letter-spaced scale this site
uses for .dateline and .breadcrumb. Not .section-title: that is the
fluid page-level scale and is far too large in a 32% column. */
.spec-heading{font-size:15px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin:0 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--color-divider)}
/* ---- formats ---- */
.format-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--space-6)}
.format-grid li{font-family:var(--font-heading);font-weight:600;font-size:15px;padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider)}
@media (max-width:520px){.format-grid{grid-template-columns:1fr}}
/* ---- spec table ---- */
/* `.spec-list p` further up styles the HOMEPAGE format column, which is a
stack of
. The artwork page's is a
of .spec-row, so the two do
not collide. */
.spec-list{margin:var(--space-6) 0 0}
.spec-row{display:grid;grid-template-columns:minmax(92px,26%) 1fr;gap:var(--space-4);padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);align-items:baseline}
.spec-row dt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)}
.spec-row dd{margin:0;font-size:15px;color:var(--color-neutral-800);overflow-wrap:break-word}
@media (max-width:420px){.spec-row{grid-template-columns:1fr;gap:4px}}
.spec-palette{display:flex;flex-wrap:wrap;gap:6px}
.swatch{display:inline-block;width:24px;height:24px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(20,18,16,.10)}
/* ---- about ---- */
.art-about{margin-top:var(--space-8)}
.about-title{font-size:22px;line-height:1.15;margin:0 0 var(--space-2)}
.about-kicker{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-neutral-600);margin:0 0 var(--space-3)}
/* §6: the disclosure is split off the end of main_description and set in
italic. Never hidden or shrunk below body size — it is the one sentence
that says how the piece was finished. */
.disclosure-note{font-style:italic;color:var(--color-neutral-700)}
/* ---- media column ---- */
.art-figure-hint{font-size:12px;color:var(--color-neutral-600);margin:var(--space-3) 0 0;text-align:center}
/* §6: sticky above 900px so the image stays beside the longer text column. */
@media (min-width:901px){.art-media{position:sticky;top:var(--space-4)}}
/* ---- lightbox ---- */
/* The triggers are