/* ==========================================================================
ARTIE PARADA — artieparada.com
Single stylesheet. No build step, no preprocessor.
Every colour, type size, spacing step and motion timing lives in the
:root block below. Change it there and the whole site follows.
Contents
01 Tokens (:root)
02 Reset + base
03 Utilities (birch rule, mono label, reveal, focus)
04 Site chrome (nav, footer)
05 Home
06 Bio
07 Photos + lightbox
08 Credentials
09 Reduced motion
========================================================================== */
/* ==========================================================================
01 TOKENS
========================================================================== */
:root {
/* --- Core palette ----------------------------------------------------- */
--ink: #0A0A0A; /* near-black */
--birch: #F2F0EB; /* off-white, faint warm cast */
--seafoam: #79C8AE; /* PRIMARY ACCENT — global links, hover, focus */
--retro-red: #E0533D; /* section identity: Bio */
--retro-blue: #4A6FE0; /* section identity: Photos */
/* Tints derived from the core palette (kept here so they stay in sync) */
--ink-60: rgba(10, 10, 10, 0.60);
--ink-40: rgba(10, 10, 10, 0.40);
--ink-12: rgba(10, 10, 10, 0.12);
--birch-60: rgba(242, 240, 235, 0.60);
--birch-40: rgba(242, 240, 235, 0.40);
--birch-12: rgba(242, 240, 235, 0.12);
/* --- Theme slots -------------------------------------------------------
Set per page by .theme-dark / .theme-light on . Everything else
in the sheet reads --bg / --fg / --rule-color, never the raw palette. */
--bg: var(--birch);
--fg: var(--ink);
--rule-color: var(--ink);
--rule-opacity: 0.6;
/* --- Section identity --------------------------------------------------
Overridden per page by [data-section]. Bio=red, Photos=blue,
Credentials=seafoam. Used for page accents only; interactive states
(links, hover, focus, active nav) always use --seafoam. */
--accent: var(--seafoam);
/* --- Typefaces ---------------------------------------------------------
Proxima Nova sits first in the stack in case you add a licensed copy
(see README). Figtree is the loaded webfont; Hanken Grotesk is the
second fallback. */
--font-sans: "Proxima Nova", "Figtree", "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* --- Type scale (fluid; min at 360px, max at ~1600px) ------------------ */
--fs-100: clamp(0.6875rem, 0.66rem + 0.13vw, 0.8125rem); /* mono micro */
--fs-200: clamp(0.8125rem, 0.78rem + 0.16vw, 0.9375rem); /* small */
--fs-300: clamp(1rem, 0.97rem + 0.16vw, 1.125rem); /* body */
--fs-400: clamp(1.125rem, 1.05rem + 0.36vw, 1.4375rem); /* lead */
--fs-500: clamp(1.375rem, 1.2rem + 0.85vw, 2rem); /* h3 */
--fs-600: clamp(1.875rem, 1.4rem + 2.3vw, 3.5rem); /* h2 */
--fs-700: clamp(2.5rem, 1.6rem + 4.4vw, 5.5rem); /* page title */
/* The home name is capped by viewport *height* as well as width, so the
name and the three tiles still share one screen on a short laptop. */
--fs-display: clamp(2.75rem, min(13.5vw, 17vh), 12rem); /* home name */
/* --- Weights ----------------------------------------------------------- */
--fw-light: 300;
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-display: 800;
/* --- Line heights + tracking -------------------------------------------- */
--lh-display: 0.86;
--lh-tight: 1.06;
--lh-heading: 1.14;
--lh-body: 1.62;
--ls-display: -0.045em;
--ls-tight: -0.02em;
--ls-mono: 0.14em;
/* --- Spacing scale ------------------------------------------------------ */
--space-3xs: 0.25rem;
--space-2xs: 0.5rem;
--space-xs: 0.75rem;
--space-s: 1rem;
--space-m: 1.5rem;
--space-l: 2.5rem;
--space-xl: 4rem;
--space-2xl: 6rem;
--space-3xl: 9rem;
/* --- Layout ------------------------------------------------------------- */
--gutter: clamp(1.25rem, 4vw, 4rem);
--measure: 66ch; /* comfortable reading width */
--max-width: 1600px;
--grid-gap: clamp(6px, 0.9vw, 12px);
--nav-height: 4.5rem;
--radius: 0; /* hard edges everywhere. Do not raise. */
--hairline: 1px;
/* --- Birch rule geometry ------------------------------------------------
Three layered repeating gradients with mismatched periods. Their least
common multiple is long, so the dashes read as irregular lenticels
rather than a repeating dashed border. */
--rule-weight: 2px;
--lenticel-1: 14px; --lenticel-gap-1: 33px;
--lenticel-2: 5px; --lenticel-gap-2: 41px;
--lenticel-3: 23px; --lenticel-gap-3: 89px;
/* --- Motion -------------------------------------------------------------
All durations funnel through these. prefers-reduced-motion zeroes them
in section 09. */
--dur-fast: 160ms;
--dur: 320ms;
--dur-slow: 640ms;
--dur-transition: 260ms; /* page-to-page fade */
--stagger: 90ms; /* per-item delay in load sequences */
--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.30, 1);
/* --- Focus --------------------------------------------------------------- */
--focus-width: 2px;
--focus-offset: 3px;
--z-nav: 50;
--z-lightbox: 100;
}
/* Theme slots ------------------------------------------------------------- */
.theme-dark {
--bg: var(--ink);
--fg: var(--birch);
--rule-color: var(--birch);
--rule-opacity: 0.5;
}
.theme-light {
--bg: var(--birch);
--fg: var(--ink);
--rule-color: var(--ink);
--rule-opacity: 0.6;
}
/* Section identity -------------------------------------------------------- */
[data-section="bio"] { --accent: var(--seafoam); }
[data-section="photos"] { --accent: var(--retro-blue); }
[data-section="credentials"] { --accent: var(--retro-red); }
/* ==========================================================================
02 RESET + BASE
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body,
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
margin: 0;
padding: 0;
}
ul[class], ol[class] { list-style: none; }
body {
min-height: 100vh;
min-height: 100dvh;
background-color: var(--bg);
color: var(--fg);
font-family: var(--font-sans);
font-size: var(--fs-300);
font-weight: var(--fw-regular);
line-height: var(--lh-body);
font-synthesis-weight: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
display: flex;
flex-direction: column;
}
img, svg, picture { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 {
font-weight: var(--fw-display);
line-height: var(--lh-heading);
letter-spacing: var(--ls-tight);
text-wrap: balance;
}
p { text-wrap: pretty; }
a {
color: inherit;
text-decoration: none;
transition: color var(--dur-fast) var(--ease);
}
/* Body copy links: seafoam underline that fills in on hover. */
.prose a,
a.link {
color: inherit;
background-image: linear-gradient(var(--seafoam), var(--seafoam));
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100% var(--hairline);
padding-bottom: 0.12em;
transition: background-size var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.prose a:hover,
a.link:hover {
color: var(--seafoam);
background-size: 100% 0.28em;
background-position: 0 100%;
}
/* Visible keyboard focus, everywhere, always seafoam. */
:focus-visible {
outline: var(--focus-width) solid var(--seafoam);
outline-offset: var(--focus-offset);
}
::selection {
background-color: var(--seafoam);
color: var(--ink);
}
/* ==========================================================================
03 UTILITIES
========================================================================== */
.wrap {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
padding-inline: var(--gutter);
}
.wrap--narrow { max-width: 78ch; }
/* --- Birch rule -----------------------------------------------------------
The site's one decorative device: an irregular horizontal dashed line
standing in for birch-bark lenticels. Use
or add the
class to any block element. Colour follows `currentColor`. */
.rule {
border: 0;
margin: 0; /* drop the UA
margin; spacing is set below */
height: var(--rule-weight);
color: var(--rule-color);
opacity: var(--rule-opacity);
background-color: transparent;
background-repeat: repeat-x;
background-image:
repeating-linear-gradient(90deg, currentColor 0 var(--lenticel-1), transparent var(--lenticel-1) var(--lenticel-gap-1)),
repeating-linear-gradient(90deg, currentColor 0 var(--lenticel-2), transparent var(--lenticel-2) var(--lenticel-gap-2)),
repeating-linear-gradient(90deg, currentColor 0 var(--lenticel-3), transparent var(--lenticel-3) var(--lenticel-gap-3));
background-position: 0 0, 7px 0, 19px 0;
}
.rule--accent { color: var(--accent); opacity: 1; }
/* Vertical variant — the "trunk". Same lenticels rotated onto the y-axis. */
.rule--vertical {
height: auto;
width: var(--rule-weight);
background-repeat: repeat-y;
background-image:
repeating-linear-gradient(180deg, currentColor 0 var(--lenticel-1), transparent var(--lenticel-1) var(--lenticel-gap-1)),
repeating-linear-gradient(180deg, currentColor 0 var(--lenticel-2), transparent var(--lenticel-2) var(--lenticel-gap-2)),
repeating-linear-gradient(180deg, currentColor 0 var(--lenticel-3), transparent var(--lenticel-3) var(--lenticel-gap-3));
background-position: 0 0, 0 7px, 0 19px;
}
/* --- Mono utility text: labels, dates, captions, counters ----------------- */
.mono {
font-family: var(--font-mono);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
line-height: 1.4;
}
.mono--accent { color: var(--accent); }
/* Marks placeholder copy so it is impossible to miss. Delete the class
(and the [ ] brackets in the HTML) as you replace each block. */
.placeholder {
/* Deliberately loud: this is scaffolding, not design. */
color: inherit;
opacity: 0.72;
}
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.skip-link {
position: absolute;
top: var(--space-2xs);
left: var(--space-2xs);
z-index: calc(var(--z-nav) + 1);
padding: var(--space-2xs) var(--space-s);
background-color: var(--seafoam);
color: var(--ink);
transform: translateY(-200%);
transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }
/* --- Reveal ---------------------------------------------------------------
Hidden only when JS is running (html.js), so a no-JS visitor still sees
everything. main.js adds .is-in — immediately on Home for the load
sequence, on intersection elsewhere. --i drives the stagger. */
.js [data-reveal] {
opacity: 0;
transform: translateY(1.75rem);
transition:
opacity var(--dur-slow) var(--ease-out-expo),
transform var(--dur-slow) var(--ease-out-expo);
transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js [data-reveal].is-in {
opacity: 1;
transform: none;
}
/* Clip-reveal used for the big home name. */
.js [data-reveal="clip"] {
transform: translateY(0.14em);
clip-path: inset(0 0 110% 0);
transition:
clip-path var(--dur-slow) var(--ease-out-expo),
transform var(--dur-slow) var(--ease-out-expo),
opacity var(--dur) linear;
}
.js [data-reveal="clip"].is-in {
clip-path: inset(-0.2em 0 -0.2em 0);
}
/* --- Page transition ------------------------------------------------------
Fade in on arrival, fade out on internal navigation (js/main.js). */
.js body { animation: page-in var(--dur-transition) var(--ease) both; }
.js.is-leaving body { opacity: 0; transition: opacity var(--dur-transition) var(--ease); }
@keyframes page-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* --- Button ---------------------------------------------------------------- */
.button {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: var(--space-xs) var(--space-m);
border: var(--hairline) solid currentColor;
border-radius: var(--radius);
background-color: transparent;
color: inherit;
font-family: var(--font-mono);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
cursor: pointer;
position: relative;
overflow: hidden;
isolation: isolate;
transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Accent washes up from the bottom edge. */
.button::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--seafoam);
transform: scaleY(0);
transform-origin: bottom;
transition: transform var(--dur) var(--ease-out-expo);
}
.button:hover { color: var(--ink); border-color: var(--seafoam); }
.button:hover::before { transform: scaleY(1); }
.button__arrow { transition: transform var(--dur) var(--ease); }
.button:hover .button__arrow { transform: translateX(0.35em); }
/* ==========================================================================
04 SITE CHROME — nav + footer
========================================================================== */
.site-nav {
position: sticky;
top: 0;
z-index: var(--z-nav);
background-color: var(--bg);
}
.site-nav__inner {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-s) var(--space-m);
min-height: var(--nav-height);
padding-block: var(--space-s);
}
.site-nav__wordmark {
font-size: var(--fs-200);
font-weight: var(--fw-display);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
}
.site-nav__wordmark:hover { color: var(--seafoam); }
.site-nav__list {
display: flex;
align-items: baseline;
gap: var(--space-m);
}
.site-nav__link {
position: relative;
font-family: var(--font-mono);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
padding-bottom: var(--space-3xs);
}
/* Underline grows from the left on hover. */
.site-nav__link::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: var(--rule-weight);
background-color: var(--seafoam);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur) var(--ease-out-expo);
}
.site-nav__link:hover { color: var(--seafoam); }
.site-nav__link:hover::after { transform: scaleX(1); }
.site-nav__link[aria-current="page"] { color: var(--seafoam); }
.site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
/* The nav sits on a birch rule instead of a solid border. */
.site-nav .rule { margin: 0; }
.site-footer { margin-top: auto; }
.site-footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s) var(--space-m);
padding-block: var(--space-m);
}
/* PLACEHOLDER SLOT — graffiti tag signature mark goes here. */
.site-footer__mark {
display: inline-flex;
align-items: center;
opacity: 0.75;
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-footer__mark:hover { opacity: 1; transform: translateY(-2px); }
.site-footer__mark img { width: 100px; height: auto; }
/* The placeholder mark is drawn in ink; invert it on the dark home page. */
.theme-dark .site-footer__mark img { filter: invert(1); }
.site-footer__colophon {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-m);
opacity: 0.7;
}
/* ==========================================================================
05 HOME
========================================================================== */
.home {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: var(--space-l);
padding-block: var(--space-m) 0;
}
.home__masthead { padding-top: var(--space-s); }
.home__eyebrow {
display: block;
margin-bottom: var(--space-s);
opacity: 0.66;
}
.home__name {
font-size: var(--fs-display);
font-weight: var(--fw-display);
line-height: var(--lh-display);
letter-spacing: var(--ls-display);
text-transform: uppercase;
text-wrap: nowrap;
}
/* Stack the two words on narrow screens, keep them locked on one line up top. */
.home__name span { display: block; }
.home__masthead .rule { margin-top: var(--space-m); }
/* --- Tiles ----------------------------------------------------------------
Three trunks. Tall vertical proportions, stacked on mobile. */
.tiles {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-l) var(--grid-gap);
padding-block: var(--space-m) var(--space-l);
}
.tile {
--tile-accent: var(--seafoam);
display: grid;
grid-template-rows: auto auto;
gap: var(--space-s);
color: inherit;
position: relative;
padding-left: var(--space-m);
}
.tile[data-tile="bio"] { --tile-accent: var(--seafoam); }
.tile[data-tile="photos"] { --tile-accent: var(--retro-blue); }
.tile[data-tile="credentials"] { --tile-accent: var(--retro-red); }
/* The lenticel trunk running up the left edge of every tile. */
.tile__trunk {
position: absolute;
left: 0;
top: 0;
bottom: 0;
color: var(--rule-color);
opacity: var(--rule-opacity);
transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.tile__media {
position: relative;
overflow: hidden;
aspect-ratio: 3 / 4.4;
background-color: var(--birch-12);
}
.tile__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out-expo);
}
/* Section colour wash — sits over the image, fades in on hover. */
.tile__wash {
position: absolute;
inset: 0;
background-color: var(--tile-accent);
opacity: 0;
mix-blend-mode: multiply;
transition: opacity var(--dur) var(--ease);
pointer-events: none;
}
/* Colour bar that draws across the bottom of the image. */
.tile__bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 0.5rem;
background-color: var(--tile-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--dur) var(--ease-out-expo);
}
.tile__body {
display: flex;
flex-direction: column;
gap: var(--space-2xs);
}
.tile__label {
font-size: var(--fs-500);
font-weight: var(--fw-display);
letter-spacing: var(--ls-tight);
text-transform: uppercase;
line-height: 1;
transition: color var(--dur) var(--ease);
}
.tile__desc {
font-size: var(--fs-200);
opacity: 0.72;
max-width: 34ch;
}
/* Hover / focus state — lift, scale, wash. Subtle and fast. */
.tile:hover,
.tile:focus-visible { transform: translateY(-6px); }
.tile { transition: transform var(--dur) var(--ease-out-expo); }
.tile:hover .tile__media img,
.tile:focus-visible .tile__media img { transform: scale(1.045); }
.tile:hover .tile__wash,
.tile:focus-visible .tile__wash { opacity: 0.32; }
.tile:hover .tile__bar,
.tile:focus-visible .tile__bar { transform: scaleX(1); }
.tile:hover .tile__label,
.tile:focus-visible .tile__label { color: var(--tile-accent); }
.tile:hover .tile__trunk,
.tile:focus-visible .tile__trunk { color: var(--tile-accent); opacity: 1; }
.tile:focus-visible { outline-offset: 6px; }
@media (min-width: 48em) {
.tiles {
grid-template-columns: repeat(3, 1fr);
gap: var(--grid-gap);
padding-block: var(--space-s) var(--space-m);
}
.tile { padding-left: var(--space-l); }
.home { padding-block: var(--space-m) 0; }
}
/* NOTE: do not put a max-height on .tile__media. Combined with aspect-ratio
on a stretched grid item, the browser satisfies the ratio by shrinking the
element's *width*, so the image stops filling its column and the displayed
box no longer matches the 3:4.4 source crop. Bound the hero with the type
scale (--fs-display is capped by vh) instead. */
/* ==========================================================================
06 PAGE HEADERS (shared by Bio / Photos / Credentials)
========================================================================== */
.page-header { padding-block: var(--space-xl) var(--space-l); }
.page-header__eyebrow {
display: flex;
align-items: center;
gap: var(--space-s);
margin-bottom: var(--space-m);
color: var(--accent);
}
/* Small solid square in the section colour — the one non-typographic mark. */
.page-header__eyebrow::before {
content: "";
width: 0.75rem;
height: 0.75rem;
background-color: var(--accent);
flex: none;
}
.page-title {
font-size: var(--fs-700);
font-weight: var(--fw-display);
line-height: var(--lh-tight);
letter-spacing: var(--ls-display);
text-transform: uppercase;
}
.page-header__standfirst {
margin-top: var(--space-m);
max-width: var(--measure);
font-size: var(--fs-400);
font-weight: var(--fw-light);
line-height: 1.45;
opacity: 0.8;
}
.page-header .rule { margin-top: var(--space-l); }
main { flex: 1; }
/* ==========================================================================
07 BIO
========================================================================== */
.bio {
display: grid;
gap: var(--space-xl);
padding-block: var(--space-l) var(--space-2xl);
}
.bio__portrait { position: relative; }
.bio__portrait img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
}
/* Offset accent block behind the portrait — brutalist registration mark. */
.bio__portrait::before {
content: "";
position: absolute;
inset: auto auto -0.75rem -0.75rem;
width: 45%;
height: 45%;
background-color: var(--accent);
z-index: -1;
}
.bio__caption {
margin-top: var(--space-s);
opacity: 0.6;
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-m); }
.prose h2 {
font-size: var(--fs-500);
margin-top: var(--space-xl);
}
.prose .rule { margin-block: var(--space-l); }
.prose__lead {
font-size: var(--fs-400);
font-weight: var(--fw-light);
line-height: 1.5;
}
/* Pull-quote / statement block. */
.statement {
font-size: var(--fs-500);
font-weight: var(--fw-semibold);
line-height: 1.24;
letter-spacing: var(--ls-tight);
padding-left: var(--space-m);
border-left: 4px solid var(--accent);
margin-block: var(--space-l);
}
.bio__facts {
display: grid;
gap: var(--space-s);
margin-top: var(--space-l);
}
.bio__fact {
display: grid;
grid-template-columns: 9rem 1fr;
gap: var(--space-s);
padding-block: var(--space-2xs);
}
.bio__fact dt { color: var(--accent); }
.bio__fact dd { font-size: var(--fs-200); }
@media (min-width: 60em) {
.bio {
grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
gap: var(--space-2xl);
align-items: start;
}
.bio__portrait { position: sticky; top: calc(var(--nav-height) + var(--space-l)); }
}
/* ==========================================================================
08 PHOTOS + LIGHTBOX
========================================================================== */
.photo-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--grid-gap);
padding-block: var(--space-l) var(--space-2xl);
}
@media (min-width: 40em) { .photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }
.photo {
position: relative;
display: block;
width: 100%;
padding: 0;
border: 0;
background-color: var(--ink-12);
aspect-ratio: 1 / 1;
overflow: hidden;
cursor: pointer;
}
.photo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--dur-slow) var(--ease-out-expo), filter var(--dur) var(--ease);
}
.photo::after {
content: "";
position: absolute;
inset: 0;
background-color: var(--accent);
opacity: 0;
mix-blend-mode: multiply;
transition: opacity var(--dur) var(--ease);
}
.photo:hover img,
.photo:focus-visible img { transform: scale(1.05); }
.photo:hover::after,
.photo:focus-visible::after { opacity: 0.28; }
.photo__index {
position: absolute;
left: var(--space-xs);
bottom: var(--space-xs);
z-index: 2;
color: var(--birch);
mix-blend-mode: difference;
opacity: 0;
transform: translateY(0.5rem);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.photo:hover .photo__index,
.photo:focus-visible .photo__index { opacity: 1; transform: none; }
/* --- Lightbox -------------------------------------------------------------- */
.lightbox {
position: fixed;
inset: 0;
z-index: var(--z-lightbox);
display: grid;
grid-template-rows: auto 1fr auto;
gap: var(--space-s);
padding: var(--space-s);
background-color: rgba(10, 10, 10, 0.97);
color: var(--birch);
}
.lightbox[hidden] { display: none; }
.js .lightbox { animation: page-in var(--dur) var(--ease) both; }
.lightbox__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
}
.lightbox__figure {
display: grid;
place-items: center;
min-height: 0;
margin: 0;
}
.lightbox__figure img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
}
.lightbox__footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-s);
}
.lightbox__caption { opacity: 0.7; }
.lightbox__controls { display: flex; gap: var(--space-2xs); }
.lightbox__btn {
display: grid;
place-items: center;
min-width: 3rem;
min-height: 3rem;
padding-inline: var(--space-s);
border: var(--hairline) solid var(--birch-40);
border-radius: var(--radius);
background-color: transparent;
color: var(--birch);
font-family: var(--font-mono);
font-size: var(--fs-100);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
cursor: pointer;
transition: background-color var(--dur-fast) var(--ease),
color var(--dur-fast) var(--ease),
border-color var(--dur-fast) var(--ease);
}
.lightbox__btn:hover {
background-color: var(--seafoam);
border-color: var(--seafoam);
color: var(--ink);
}
body.is-locked { overflow: hidden; }
/* ==========================================================================
09 CREDENTIALS
========================================================================== */
.cv-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-m);
padding-block: var(--space-l);
}
.cv-actions__note { opacity: 0.6; }
.credentials { padding-bottom: var(--space-2xl); }
.cred-section { padding-block: var(--space-l); }
.cred-section__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--space-2xs) var(--space-m);
margin-bottom: var(--space-s);
}
.cred-section__title {
font-size: var(--fs-600);
letter-spacing: var(--ls-display);
text-transform: uppercase;
}
.cred-section__count { color: var(--accent); }
.cred-list { display: grid; }
/* Each entry: title / institution / date / link. Stacked on mobile,
a four-column ledger on desktop. Legibility first on this page. */
.cred-item {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-3xs) var(--space-m);
padding-block: var(--space-m);
position: relative;
}
.cred-item + .cred-item { border-top: 0; }
/* Birch rule between rows, drawn as a pseudo-element so it inherits the
irregular lenticel pattern from .rule without extra markup. */
.cred-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--rule-weight);
color: var(--rule-color);
opacity: var(--rule-opacity);
background-repeat: repeat-x;
background-image:
repeating-linear-gradient(90deg, currentColor 0 var(--lenticel-1), transparent var(--lenticel-1) var(--lenticel-gap-1)),
repeating-linear-gradient(90deg, currentColor 0 var(--lenticel-2), transparent var(--lenticel-2) var(--lenticel-gap-2)),
repeating-linear-gradient(90deg, currentColor 0 var(--lenticel-3), transparent var(--lenticel-3) var(--lenticel-gap-3));
background-position: 0 0, 7px 0, 19px 0;
transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.cred-item:hover::before { color: var(--accent); opacity: 1; }
.cred-item__title {
font-size: var(--fs-400);
font-weight: var(--fw-semibold);
letter-spacing: var(--ls-tight);
line-height: 1.25;
}
.cred-item__meta {
font-size: var(--fs-200);
opacity: 0.72;
}
.cred-item__date { opacity: 0.72; padding-top: 0.35em; }
.cred-item__link {
font-family: var(--font-mono);
font-size: var(--fs-100);
font-weight: var(--fw-medium);
letter-spacing: var(--ls-mono);
text-transform: uppercase;
white-space: nowrap;
padding-top: 0.35em;
}
.cred-item__link:hover { color: var(--seafoam); }
.cred-item__link .button__arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.cred-item__link:hover .button__arrow { transform: translateX(0.35em); }
@media (min-width: 48em) {
.cred-item {
grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) 8rem 7rem;
align-items: start;
}
.cred-item__meta { padding-top: 0.35em; }
.cred-item__link { justify-self: end; }
}
/* ==========================================================================
10 REDUCED MOTION
Everything above degrades to instant. No transitions, no transforms,
no page fades, no scroll smoothing.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
transition-delay: 0ms !important;
scroll-behavior: auto !important;
}
.js [data-reveal],
.js [data-reveal="clip"] {
opacity: 1;
transform: none;
clip-path: none;
}
.tile:hover,
.tile:focus-visible { transform: none; }
.tile:hover .tile__media img,
.tile:focus-visible .tile__media img,
.photo:hover img,
.photo:focus-visible img { transform: none; }
.js.is-leaving body { opacity: 1; }
}