/* ==========================================================================
BASE — SHARED, DO NOT EDIT IN TASK FILES
Reset, element defaults, typographic utilities, buttons, placeholder-art
helpers, accessibility helpers and the scroll-reveal contract.
Load order: tokens.css -> base.css -> layout.css -> main.css -> interactive.css
========================================================================== */
/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + var(--space-4));
scrollbar-gutter: stable; /* no layout shift when body.is-locked */
-webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--color-text);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* The hidden attribute always wins, so JS can hide filtered work tiles and
the lightbox without task CSS needing [hidden] overrides. */
[hidden] { display: none !important; }
/* Locks background scrolling while the lightbox or mobile nav is open.
JS (task t2) toggles this on . */
body.is-locked { overflow: hidden; }
img, svg, video { max-width: 100%; display: block; }
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: var(--lh-tight);
letter-spacing: var(--tracking-tight);
margin: 0;
font-weight: 500;
text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a {
color: var(--color-accent);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover { color: var(--color-accent-dark); }
button {
font-family: inherit;
font-size: inherit;
cursor: pointer;
background: none;
border: none;
color: inherit;
}
::selection { background: var(--color-accent-soft); color: var(--color-text); }
/* ---------- Accessibility ---------- */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
left: var(--space-3);
top: -4rem;
z-index: var(--z-skip);
background: var(--color-ink);
color: var(--color-ink-text);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-sm);
font-size: var(--fs-small);
font-weight: 600;
transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-3); color: var(--color-ink-text); }
:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
border-radius: var(--radius-sm);
}
.dark-section :focus-visible,
.site-footer :focus-visible {
outline-color: var(--color-focus-on-dark);
}
/* ---------- Typographic utilities ---------- */
.eyebrow {
display: block;
font-size: var(--fs-tiny);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
font-weight: 600;
color: var(--color-accent);
margin-bottom: var(--space-3);
}
.dark-section .eyebrow { color: var(--color-accent-on-dark); }
.lead {
font-size: var(--fs-lead);
line-height: var(--lh-snug);
color: var(--color-text-muted);
}
.dark-section .lead { color: var(--color-ink-text-muted); }
.text-muted { color: var(--color-text-muted); }
.dark-section .text-muted { color: var(--color-ink-text-muted); }
.measure { max-width: 38ch; }
.measure-wide { max-width: 62ch; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--tap-target);
padding: var(--space-3) var(--space-6);
border-radius: var(--radius-md);
background: var(--color-accent);
color: #fff;
font-weight: 600;
font-size: var(--fs-small);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
transition: background var(--transition-fast), transform var(--transition-fast),
color var(--transition-fast), border-color var(--transition-fast);
}
.btn:hover { background: var(--color-accent-dark); color: #fff; transform: translateY(var(--hover-lift)); }
.btn-ghost {
background: transparent;
border: 1px solid var(--color-border-strong);
color: var(--color-text);
}
.btn-ghost:hover { background: var(--color-surface-alt); color: var(--color-text); }
.dark-section .btn-ghost { border-color: var(--color-ink-border); color: var(--color-ink-text); }
.dark-section .btn-ghost:hover { background: var(--color-ink-surface); color: var(--color-ink-text); }
@media (prefers-reduced-motion: reduce) {
.btn:hover { transform: none; }
}
/* ---------- Placeholder art system ----------
Every placeholder graphic is an inline SVG inside a .placeholder frame at a
fixed aspect ratio, so swapping in a real ![]()
later is one-for-one:
.placeholder-label is the small uppercase caption drawn inside the SVG.
On a .dark-section the frame and caption flip to the ink palette, so no
inline fill overrides are needed in the markup. */
.placeholder {
position: relative;
aspect-ratio: var(--ratio, 4 / 3);
overflow: hidden;
background: var(--color-surface-alt);
border-radius: var(--radius-md);
}
.placeholder > svg,
.placeholder > img {
width: 100%;
height: 100%;
object-fit: cover;
}
.placeholder-label {
font: 600 12px/1 var(--font-body);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
fill: var(--color-text-muted);
}
.dark-section .placeholder { background: var(--color-ink-surface); }
.dark-section .placeholder-label { fill: var(--color-ink-text-muted); }
/* ---------- Scroll reveal contract ----------
Markup: add class="reveal" to a block. JS adds .js to and
.is-visible when the block enters the viewport. Without JS everything
is visible by default, and reduced-motion users get no transition. */
.js .reveal {
opacity: 0;
transform: translateY(var(--reveal-distance));
transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.js .reveal,
.js .reveal.is-visible { opacity: 1; transform: none; transition: none; }
}
/* ---------- Print ---------- */
@media print {
.site-header, .nav-toggle, .primary-nav, .back-to-top, .lightbox { display: none !important; }
body { background: #fff; color: #000; }
.js .reveal { opacity: 1 !important; transform: none !important; }
}