============================================================ */
.prose h2 {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 32px);
font-weight: 400;
line-height: 1.25;
margin-top: 56px;
margin-bottom: 18px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--color-muted); margin-bottom: 20px; line-height: 1.8; }
.prose ul { list-style: none; padding: 0; margin-bottom: 20px; }
.prose ul li {
position: relative;
padding-left: 20px;
color: var(--color-muted);
margin-bottom: 10px;
}
.prose ul li::before { content: '—'; position: absolute; left: 0; color: var(--color-accent); }
.prose strong { color: var(--color-text); font-weight: 500; }
/* ============================================================
PROJECT CASE STUDY — image layouts
A) .img-full — spans full page width
B) .img-contained — stays within the text column
C) .img-pair — two images side by side
.img-caption — caption under any image block
============================================================ */
.img-full { width: 100%; overflow: hidden; background: var(--color-border); margin: 44px 0; }
.img-full img { width: 100%; object-fit: cover; }
.img-contained { overflow: hidden; background: var(--color-border); margin: 44px 0; }
.img-contained img { width: 100%; object-fit: cover; }
.img-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 44px 0; }
.img-pair__item { overflow: hidden; background: var(--color-border); }
.img-pair__item img { width: 100%; height: 100%; object-fit: cover; }
.img-caption {
font-size: 13px;
color: var(--color-muted);
text-align: center;
margin-top: -28px;
margin-bottom: 44px;
}
/* ============================================================
PROJECT CASE STUDY — next project link
============================================================ */
.next-project {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
padding: 56px 0;
border-top: 1px solid var(--color-border);
}
.next-project a { text-decoration: none; }
.next-project__label {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--color-muted);
margin-bottom: 8px;
}
.next-project__title {
font-family: var(--font-display);
font-size: clamp(24px, 4vw, 40px);
font-weight: 400;
color: var(--color-text);
transition: color 0.2s;
}
.next-project a:hover .next-project__title { color: var(--color-accent); }
.next-project__arrow { font-size: 32px; color: var(--color-accent); flex-shrink: 0; }
/* ============================================================
PHOTOGRAPHY PAGE
============================================================ */
/* Page header */
.photo-header {
padding: 64px 0 48px;
border-bottom: 1px solid var(--color-border);
}
.photo-header h1 {
font-family: var(--font-display);
font-size: clamp(40px, 7vw, 80px);
font-weight: 400;
line-height: 1.05;
}
.photo-header p {
font-size: 22px;
color: var(--color-muted);
margin-top: 16px;
max-width: 480px;
}
/* ── Category section ──────────────────────────────────────
Each .photo-section groups a set of rows under a label.
Duplicate the whole block to add a new category.
──────────────────────────────────────────────────────────── */
.photo-section {
padding: 72px 0 0;
}
.photo-section:last-of-type {
padding-bottom: 80px;
}
/* Category label + optional count */
.photo-section__header {
display: flex;
align-items: baseline;
gap: 14px;
margin-bottom: 32px;
padding-bottom: 14px;
border-bottom: 1px solid var(--color-border);
}
.photo-section__title {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 32px);
font-weight: 400;
line-height: 1;
}
.photo-section__count {
font-size: 16px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-muted);
}
/* ── Rows ──────────────────────────────────────────────────
Each .photo-row is one horizontal unit.
ONE image (full width):
TWO images side by side:
Gap between rows is controlled by --photo-gap.
──────────────────────────────────────────────────────────── */
.photo-rows {
--photo-gap: 10px;
display: flex;
flex-direction: column;
gap: var(--photo-gap);
}
.photo-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--photo-gap);
}
.photo-row--two {
grid-template-columns: 1fr 1fr;
}
/* Individual photo cell — height controlled by aspect-ratio
inline style on the .photo-item itself, e.g.:
style="aspect-ratio: 3/2" (landscape)
style="aspect-ratio: 1/1" (square)
style="aspect-ratio: 2/3" (portrait)
Omit the style entirely to let the image's natural
proportions determine the height. */
.photo-item {
background: var(--color-border);
position: relative;
cursor: zoom-in;
overflow: hidden;
}
/* Natural aspect ratio — image sets its own height */
.photo-item img {
width: 100%;
height: auto;
display: block;
transition: transform 0.55s ease;
}
.photo-item:hover img { transform: scale(1.025); }
/* ── Lightbox ───────────────────────────────────────────────
Opens when any .photo-item is clicked.
Close by clicking the backdrop, the × button, or Escape.
──────────────────────────────────────────────────────────── */
.photo-lightbox {
display: none;
position: fixed;
inset: 0;
z-index: 200;
background: rgba(10, 10, 10, 0.95);
align-items: center;
justify-content: center;
padding: 24px;
}
.photo-lightbox.is-open { display: flex; }
.photo-lightbox__img {
max-width: 92vw;
max-height: 92vh;
width: auto;
height: auto;
object-fit: contain;
display: block;
box-shadow: 0 32px 80px rgba(0,0,0,0.6);
cursor: default;
}
/* Caption under the image in the lightbox */
.photo-lightbox__caption {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: rgba(245,244,240,0.6);
font-size: 13px;
letter-spacing: 0.06em;
white-space: nowrap;
pointer-events: none;
}
/* Prev / Next arrows */
.photo-lightbox__prev,
.photo-lightbox__next {
position: fixed;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: rgba(245,244,240,0.5);
font-size: 36px;
line-height: 1;
cursor: pointer;
padding: 16px;
transition: color 0.2s;
z-index: 201;
user-select: none;
}
.photo-lightbox__prev { left: 12px; }
.photo-lightbox__next { right: 12px; }
.photo-lightbox__prev:hover,
.photo-lightbox__next:hover { color: #f5f4f0; }
/* Close button */
.photo-lightbox__close {
position: fixed;
top: 18px;
right: 22px;
background: none;
border: none;
color: rgba(245,244,240,0.6);
font-size: 32px;
line-height: 1;
cursor: pointer;
z-index: 201;
transition: color 0.2s;
}
.photo-lightbox__close:hover { color: #f5f4f0; }
/* Optional caption — shown on hover at bottom of image */
.photo-item__caption {
position: absolute;
bottom: 0; left: 0; right: 0;
padding: 10px 14px;
background: rgba(26,26,26,0.55);
color: #f5f4f0;
font-size: 20px;
letter-spacing: 0.04em;
opacity: 0;
transition: opacity 0.3s ease;
}
.photo-item:hover .photo-item__caption { opacity: 1; }
/* ============================================================
GRAPHIC DESIGN PAGE — header
============================================================ */
.design-header {
padding: 64px 0 48px;
border-bottom: 1px solid var(--color-border);
}
.design-header h1 {
font-family: var(--font-display);
font-size: clamp(40px, 7vw, 80px);
font-weight: 400;
line-height: 1.05;
}
.design-header p {
font-size: 22px;
color: var(--color-muted);
margin-top: 16px;
max-width: 480px;
}
/* ============================================================
GRAPHIC DESIGN PAGE — scroll feed
A centred single-column feed. Each .design-piece is one
item: image on top, caption below. Images display at their
natural proportions — no cropping.
Click any image to open the shared lightbox (same one used
on the photography page — styles live in the photo-lightbox
block above).
============================================================ */
.design-feed {
max-width: 780px; /* comfortable reading / viewing width */
margin: 0 auto;
padding: 64px 5% 80px;
display: flex;
flex-direction: column;
gap: 72px; /* space between pieces */
}
/* One piece: image + caption */
.design-piece {
display: flex;
flex-direction: column;
gap: 16px;
}
/* The image — natural size, click to zoom */
.design-piece__img {
cursor: zoom-in;
overflow: hidden;
background: var(--color-border);
position: relative;
}
.design-piece__img img {
width: 100%;
height: auto; /* natural proportions, no cropping */
display: block;
transition: transform 0.45s ease;
}
.design-piece__img:hover img { transform: scale(1.02); }
/* Subtle zoom hint on hover */
.design-piece__img::after {
content: 'Click to enlarge';
position: absolute;
bottom: 12px;
right: 14px;
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #f5f4f0;
background: rgba(26,26,26,0.55);
padding: 5px 10px;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.design-piece__img:hover::after { opacity: 1; }
/* Caption row: title left, tags right */
.design-piece__caption {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
padding-top: 4px;
border-top: 1px solid var(--color-border);
}
.design-piece__title {
font-family: var(--font-display);
font-size: 20px;
font-weight: 400;
color: var(--color-text);
}
.design-piece__meta {
font-size: 14px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* Optional longer description below the title/meta row */
.design-piece__desc {
font-size: 14px;
color: var(--color-muted);
line-height: 1.65;
margin-top: 6px;
}
/* Section divider label inside the feed */
.design-feed__section {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: -32px; /* pull it closer to the first item after it */
}
.design-feed__section h2 {
font-family: var(--font-display);
font-size: clamp(20px, 2.5vw, 28px);
font-weight: 400;
white-space: nowrap;
}
.design-feed__section::after {
content: '';
flex: 1;
height: 1px;
background: var(--color-border);
}
/* ============================================================
RESUME PAGE
============================================================ */
/* Page header */
.resume-header {
padding: 64px 0 48px;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.resume-header h1 {
font-family: var(--font-display);
font-size: clamp(40px, 7vw, 80px);
font-weight: 400;
line-height: 1;
}
.resume-header__download {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
transition: color 0.2s;
}
.resume-header__download::before { content: '↓'; }
.resume-header__download:hover { color: var(--color-accent); text-decoration: none; }
/* PDF viewer — fills a comfortable portion of the viewport */
.resume-viewer {
padding: 56px 0 80px;
}
.resume-viewer__frame {
display: block;
width: 100%;
height: 85vh; /* tall enough to read comfortably */
min-height: 500px;
border: 1px solid var(--color-border);
background: #fff;
}
/* Fallback shown when the browser can't embed the PDF */
.resume-viewer__fallback {
display: none;
padding: 48px 32px;
border: 1px solid var(--color-border);
text-align: center;
}
.resume-viewer__fallback p {
color: var(--color-muted);
margin-bottom: 20px;
}
/* ============================================================
TALL IMAGE PAGE
For displaying a long vertical JPEG / PNG (e.g. a resume
exported as an image, an infographic, a mood board).
============================================================ */
.tall-header {
padding: 64px 0 48px;
border-bottom: 1px solid var(--color-border);
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.tall-header h1 {
font-family: var(--font-display);
font-size: clamp(40px, 7vw, 80px);
font-weight: 400;
line-height: 1;
}
.tall-header__download {
font-size: 15px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--color-muted);
display: flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
transition: color 0.2s;
}
.tall-header__download::before { content: '↓'; }
.tall-header__download:hover { color: var(--color-accent); text-decoration: none; }
/* The image sits in a centred column, scrolls naturally */
.tall-viewer {
padding: 56px 0 80px;
}
.tall-viewer__img {
display: block;
width: 100%;
max-width: 900px; /* comfortable reading width — adjust freely */
height: auto; /* natural height — no cropping */
margin: 0 auto;
border: 1px solid var(--color-border);
box-shadow: 0 8px 40px rgba(0,0,0,0.08);
}
/* ============================================================
RESPONSIVE — mobile at 768px
============================================================ */
@media (max-width: 768px) {
:root { --gap-section: 56px; }
/* Nav */
.nav__links { display: none; }
.nav__links.is-open {
display: flex;
flex-direction: column;
position: absolute;
top: var(--nav-height);
left: 0; right: 0;
background: var(--color-nav-bg);
padding: 24px 5%;
gap: 20px;
}
.nav__toggle { display: flex; }
/* Home */
.hero__inner { grid-template-columns: 1fr; }
.hero__photo { order: -1; aspect-ratio: 4 / 3; }
.work-grid { grid-template-columns: 1fr; }
.about { grid-template-columns: 1fr; }
.about__photo { order: -1; aspect-ratio: 4 / 3; }
/* Projects list */
.project-card {
grid-template-columns: 1fr;
}
.project-card:nth-child(even) .project-card__img { order: 0; }
.project-card:nth-child(even) .project-card__info { order: 0; }
.project-card__info { padding: 28px 24px; }
/* Case study */
.project-meta { grid-template-columns: 1fr; }
.img-pair { grid-template-columns: 1fr; }
.next-project { flex-direction: column; align-items: flex-start; }
/* Photography */
.photo-row--two { grid-template-columns: 1fr; }
.photo-section__header { flex-direction: column; gap: 4px; }
/* Graphic design */
.design-feed { padding: 40px 0 64px; }
.design-piece__caption { flex-direction: column; gap: 4px; }
.design-piece__meta { white-space: normal; }
/* ----------- BACK TO TOP --------------- */
.back-to-top {
display: inline-block;
margin-top: 1rem;
color: #006b54;
text-decoration: underline;
font-size: 20px;
transition: color 0.2s ease;
text-decoration: none;
color: #202123;
}
.back-to-top:hover {
color: #202123;
cursor: pointer;
}
}