/* ==========================================================================
KHAWLA ABU SALEH — DESIGN SYSTEM TOKENS v1
Visual Artist / Conceptual Installation Artist
Two typefaces. One ground. No accent colour.
Bodoni Moda carries every display line. Instrument Sans carries
everything else. There is deliberately nothing in between.
========================================================================== */
/* --- FONT LOADING -------------------------------------------------------
Put this in BEFORE any stylesheet, not as a CSS @import
(@import blocks render and costs you a round trip):
The opsz axis on Bodoni Moda is not optional. It is the only reason
this typeface survives above 100px without the hairlines shattering.
---------------------------------------------------------------------- */
:root {
/* --- GROUND ----------------------------------------------------------
Unchanged from the live site. This part was already right.
Artwork supplies all colour. Nothing here competes with a painting. */
--ink: #101010; /* all text, all rules, all UI */
--paper: #f7f7f7; /* ground. cool off white. NOT cream, NOT parchment */
--dim: #888888; /* metadata, captions, secondary */
--hairline: rgba(16, 16, 16, 0.18);
/* Two derived values only. Resist adding more. */
--ink-quiet: rgba(16, 16, 16, 0.55); /* subordinate text on paper */
--paper-veil: rgba(247, 247, 247, 0.92); /* sticky nav over imagery */
/* --- TYPEFACES -------------------------------------------------------- */
--display: "Bodoni Moda", "Bodoni 72", Didot, "Times New Roman", serif;
--text: "Instrument Sans", -apple-system, "Helvetica Neue", Arial, sans-serif;
/* Fallback honesty: Times sits in the display stack only as a last
resort. If Bodoni fails to load the page degrades, it does not lie. */
/* --- TYPE SCALE -------------------------------------------------------
Fluid, clamped. Five sizes total. If a sixth is needed, the layout
is wrong, not the scale. */
--size-banner: clamp(3.25rem, 11vw, 9.25rem); /* 52 -> 148px section banners */
--size-title: clamp(1.75rem, 4.2vw, 3.25rem); /* 28 -> 52px work titles */
--size-lede: clamp(1.125rem, 1.6vw, 1.4rem); /* 18 -> 22px opening statement */
--size-body: 1.0625rem; /* 17px reading text */
--size-meta: 0.6875rem; /* 11px all metadata */
/* --- RHYTHM -----------------------------------------------------------
8px base. Section gaps are large on purpose: the restraint is the
brand. Never compress to fit, remove content instead. */
--pad-side: 3rem; /* 48px desktop */
--pad-side-sm: 1.5rem; /* 24px mobile */
--gap-section: clamp(5.5rem, 10vw, 8.75rem); /* 88 -> 140px */
--gap-block: 2.5rem;
--gap-title-cap: 0.625rem; /* 10px, title to its caption */
--measure: 62ch; /* max reading width. never wider. */
--motion: 1.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* ==========================================================================
ROLES
Six classes. Each does exactly one job.
========================================================================== */
body {
background: var(--paper);
color: var(--ink);
font-family: var(--text);
font-size: var(--size-body);
line-height: 1.62;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* 1. BANNER — section markers: ROSE SERIES, INSTALLATIONS, the name
Regular weight, not bold. A didone at 148px must never be bold:
bold Bodoni at display size reads as advertising, not wall text.
This is the single biggest correction to the previous system. */
.banner {
font-family: var(--display);
font-size: var(--size-banner);
font-optical-sizing: auto;
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.015em; /* didones tighten at scale */
text-transform: uppercase;
margin: 0;
}
/* 2. TITLE — individual works: ROSE III — Orbiting Flower
Title case. Never uppercase, that register belongs to the banner. */
.title {
font-family: var(--display);
font-size: var(--size-title);
font-optical-sizing: auto;
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.008em;
margin: 0;
}
/* 3. LEDE — the practice statement. One per page, maximum. */
.lede {
font-size: var(--size-lede);
line-height: 1.52;
font-weight: 400;
max-width: 46ch;
letter-spacing: -0.005em;
}
/* 4. META — dimensions, medium, year, nav, labels, everything small
Uppercase grotesque, not monospace. Monospace reads as software.
Museums set object labels in a grotesque. */
.meta {
font-family: var(--text);
font-size: var(--size-meta);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--dim);
}
.meta--strong { color: var(--ink); }
/* 5. RULE — the only structural device on the site */
.rule {
border: 0;
border-top: 1px solid var(--hairline);
margin: var(--gap-block) 0;
}
/* 6. PROSE — body copy blocks */
.prose {
max-width: var(--measure);
}
.prose p + p { margin-top: 1.35em; }
/* ==========================================================================
IMAGERY
========================================================================== */
.plate img { /* artwork: always full colour */
width: 100%;
display: block;
object-fit: cover;
transition: transform var(--motion);
}
.plate:hover img { transform: scale(1.015); } /* barely perceptible */
.portrait img { filter: grayscale(1); } /* the artist, never the work */
/* ==========================================================================
PROHIBITIONS — encoded so they cannot drift back in
========================================================================== */
*,
*::before,
*::after {
border-radius: 0; /* no rounded corners, anywhere */
box-shadow: none; /* no elevation, no cards */
}
/* No content is ever boxed. No background-colour blocks behind text.
No accent colour. No amber, no gold, no warm tone in the page itself.
No justified text: left align only.
No third typeface. */
/* ==========================================================================
FLOOR
========================================================================== */
:focus-visible {
outline: 1px solid var(--ink);
outline-offset: 3px;
}
@media (max-width: 720px) {
:root { --pad-side: var(--pad-side-sm); }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}