font-size: 14px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
/* ── HEADER ── */
header {
border-bottom: 1px solid var(--rule);
padding: 36px 48px 28px;
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
}
header .wordmark {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 28px;
letter-spacing: 0.04em;
color: var(--ink);
text-decoration: none;
}
header .wordmark span {
color: var(--mid);
font-style: italic;
}
header nav a {
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid);
text-decoration: none;
margin-left: 32px;
}
header nav a:hover { color: var(--ink); }
/* ── HERO ── */
.hero {
padding: 72px 48px 56px;
max-width: 680px;
}
.hero .label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.hero h1 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 48px;
line-height: 1.15;
letter-spacing: -0.01em;
margin-bottom: 20px;
}
.hero p {
color: var(--mid);
font-size: 14px;
line-height: 1.75;
max-width: 520px;
}
/* ── PRINT SPEC BAR ── */
.spec-bar {
background: var(--ink);
color: var(--bg);
display: flex;
gap: 0;
overflow: hidden;
}
.spec-bar .spec {
flex: 1;
padding: 20px 32px;
border-right: 1px solid rgba(255,255,255,0.08);
font-size: 12px;
line-height: 1.5;
}
.spec-bar .spec:last-child { border-right: none; }
.spec-bar .spec strong {
display: block;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
margin-bottom: 4px;
font-weight: 400;
}
/* ── SECTION TITLE ── */
.section-head {
padding: 64px 48px 32px;
border-bottom: 1px solid var(--rule);
display: flex;
align-items: baseline;
gap: 20px;
}
.section-head h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 32px;
letter-spacing: -0.01em;
}
.section-head .count {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--mid);
}
/* ── WORKS GRID ── */
.works-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
gap: 1px;
background: var(--rule);
border-top: 1px solid var(--rule);
}
.work-card {
background: var(--bg);
padding: 0;
display: flex;
flex-direction: column;
}
.work-card .image-wrap {
position: relative;
overflow: hidden;
background: #EDE9E3;
aspect-ratio: 4/3;
}
.work-card .image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.work-card:hover .image-wrap img {
transform: scale(1.03);
}
.work-card .series-tag {
position: absolute;
top: 16px;
left: 16px;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
background: rgba(248,245,240,0.92);
color: var(--accent);
padding: 4px 10px;
backdrop-filter: blur(4px);
}
.work-card .info {
padding: 24px 28px 20px;
border-bottom: 1px solid var(--rule);
flex: 1;
}
.work-card .title {
font-family: 'Cormorant Garamond', serif;
font-weight: 400;
font-size: 22px;
line-height: 1.2;
margin-bottom: 6px;
}
.work-card .meta {
font-size: 12px;
color: var(--mid);
letter-spacing: 0.03em;
margin-bottom: 12px;
}
.work-card .description {
font-size: 13px;
color: var(--mid);
line-height: 1.65;
}
.work-card .purchase {
padding: 20px 28px 24px;
}
.work-card .size-label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mid);
margin-bottom: 10px;
}
.size-options {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 18px;
}
.size-option {
display: none;
}
.size-option + label {
display: inline-block;
font-size: 12px;
padding: 7px 13px;
border: 1px solid var(--rule);
cursor: pointer;
color: var(--mid);
transition: all 0.15s;
user-select: none;
}
.size-option:checked + label {
border-color: var(--ink);
color: var(--ink);
background: white;
}
.size-option + label:hover {
border-color: var(--mid);
color: var(--ink);
}
.price-display {
font-family: 'Cormorant Garamond', serif;
font-size: 22px;
font-weight: 400;
margin-bottom: 16px;
min-height: 28px;
color: var(--ink);
}
.btn-buy {
display: block;
width: 100%;
padding: 13px 20px;
background: var(--btn-bg);
color: var(--btn-text);
border: none;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 400;
letter-spacing: 0.15em;
text-transform: uppercase;
cursor: pointer;
text-decoration: none;
text-align: center;
transition: background 0.15s;
}
.btn-buy:hover { background: var(--btn-hover); }
.btn-buy.disabled {
background: var(--rule);
color: var(--mid);
cursor: not-allowed;
pointer-events: none;
}
/* ── EDITION NOTE ── */
.edition-note {
padding: 48px;
background: white;
border-top: 1px solid var(--rule);
border-bottom: 1px solid var(--rule);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
margin-top: 1px;
}
.edition-note h3 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 24px;
margin-bottom: 12px;
}
.edition-note p {
font-size: 13px;
color: var(--mid);
line-height: 1.75;
}
/* ── INQUIRE ── */
.inquire {
padding: 72px 48px;
text-align: center;
}
.inquire .label {
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 16px;
}
.inquire h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 300;
font-size: 38px;
margin-bottom: 14px;
}
.inquire p {
color: var(--mid);
font-size: 14px;
margin-bottom: 32px;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.btn-outline {
display: inline-block;
padding: 13px 36px;
border: 1px solid var(--ink);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
transition: all 0.15s;
}
.btn-outline:hover {
background: var(--ink);
color: var(--bg);
}
/* ── FOOTER ── */
footer {
border-top: 1px solid var(--rule);
padding: 28px 48px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: var(--mid);
}
footer a { color: var(--mid); text-decoration: none; }
footer a:hover { color: var(--ink); }
@media (max-width: 720px) {
header { padding: 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
header nav a { margin-left: 0; margin-right: 20px; }
.hero { padding: 48px 24px 40px; }
.hero h1 { font-size: 36px; }
.spec-bar { flex-direction: column; }
.spec-bar .spec { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
.section-head { padding: 40px 24px 24px; }
.works-grid { grid-template-columns: 1fr; }
.edition-note { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; }
.inquire { padding: 48px 24px; }
footer { flex-direction: column; gap: 12px; padding: 24px; text-align: center; }
}
John R. Mangiardi Art
Archival Prints
Figures
Portraits
Figures
Landscape
Allegory
Allegory
Editions & Prints
Archival Prints
from Original Works
Each print is produced from a high-resolution scan of the original oil painting, output on heavyweight archival paper using pigment inks rated for over 100 years. Available in three sizes. Editions are limited; each print is hand-signed and numbered by the artist.
Available Works
8 editions
Figures
Yellow Woman
The first painting. Yellow — the colour of the living brain — became the foundation of a practice. Figurative, spare, commanding.
Portraits
1,000 Year Old Woman
Exhibited at Toolip Art Gallery, Barcelona, 2022. A portrait of accumulated time — dignity rendered in colour and form.
Figures
Floating Dream
From the early figures series. Dissolution of form into colour — body as atmosphere, presence as field.
Landscape
Caverns Measureless to Man
From the Xanadu Series. The Coleridge line given form — depth, shadow, and the vertigo of unknown space.
Allegory
Do What?
One of the largest works in the body of work. Exhibited at the Hamptons Fine Art Fair, Southampton, 2025.
Allegory
Tessy's Sunflowers
Painted in Brighton, England. A large-scale work — exuberant colour held within the discipline of close observation.
Image forthcoming
Allegory
Barcelona Death Watch
Painted in Barcelona. The city, witnessed at a particular moment — colour as historical record.
Image forthcoming
Allegory
Water Baby
A monumental vertical — one of the most recent works. Fluid, searching, unresolved in the best sense.
About the Editions
Each edition is produced in collaboration with a specialist fine art printer using archival pigment inks on Hahnemühle Photo Rag 308gsm — the same standard used by major museums for their print programmes. Colours are profiled directly from the original painting, not from photography. The result holds the depth and saturation of the oil with a surface quality appropriate to the work.
Each print ships flat-packed between acid-free tissue and reinforced board. Framing can be arranged upon request through the studio.
Edition Integrity
Editions are strictly limited to 50 prints per work per size. Once an edition sells out, it will not be reprinted. Each print carries a hand-signed certificate of authenticity with the edition number, title, date, and the artist's signature. A proportion of each sale goes directly to supporting new work.
Current availability: all editions open. To enquire about remaining numbers in any edition, contact the studio.
Original Works & Commissions
Looking for the original?
Several original works from the catalog raisonné are available for acquisition. Enquiries welcome from private collectors and institutions.
Contact the Studio