(links to LinkedIn) instead of a — display:block
restores the layout an inline anchor wouldn't have on its own.
No underline in any state; the global :focus-visible outline rule
already provides a non-underline keyboard focus indicator.
*/
.resume-sidebar__name {
display: block;
color: var(--text-main);
font-size:
clamp(
22px,
2.5vw,
40px
);
font-weight: 800;
line-height: 0.95;
letter-spacing: -0.045em;
text-transform: uppercase;
text-decoration: none;
}
.resume-sidebar__name:hover,
.resume-sidebar__name:focus,
.resume-sidebar__name:visited {
color: var(--text-main);
text-decoration: none;
}
.resume-sidebar__summary {
max-width: min(38ch, 100%);
margin-top:
clamp(
22px,
3vw,
34px
);
font-size:
clamp(
14px,
1vw,
17px
);
line-height: 1.5;
}
.resume-sidebar-section {
margin-top:
clamp(
46px,
6vw,
82px
);
}
/*
Sidebar list labels (SOFTWARE/SKILLS/LANGUAGES) stay on Inter —
small utility labels parallel to the list content beneath them,
not editorial section headings like .resume-section__title below.
*/
.resume-sidebar-section__title {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.resume-section__title {
font-family: var(--font-editorial);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.resume-sidebar-section__group {
margin-top: 18px;
}
.resume-sidebar-section__group:first-of-type {
margin-top: 0;
}
.resume-sidebar-section__group-title {
margin-top: 18px;
color: var(--text-main);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.resume-sidebar-section__list {
margin-top: 18px;
/*
Software/Skills/Languages are body-list content, not decorative
metadata — kept on --text-main (dark charcoal) rather than the
accent color per the "no ochre in body text" rule.
*/
color: var(--text-main);
font-size: 13px;
line-height: 1.25;
columns: 2;
column-gap: 20px;
}
.resume-sidebar-section__list li {
break-inside: avoid;
margin-bottom: 9px;
}
.resume-sidebar-section__group-title + .resume-sidebar-section__list {
margin-top: 12px;
}
.resume-main {
grid-column: 5 / -1;
border-left: 1px solid var(--color-line);
}
.resume-section {
display: grid;
grid-template-columns:
minmax(120px, 2fr)
minmax(0, 7fr);
gap: var(--grid-gutter);
padding:
clamp(
34px,
4vw,
70px
)
0
clamp(
50px,
7vw,
100px
)
var(--grid-gutter);
border-bottom: 1px solid var(--color-line);
}
.resume-section__entries {
display: grid;
}
.resume-entry {
display: grid;
grid-template-columns:
minmax(90px, 0.25fr)
minmax(0, 1fr);
gap: var(--grid-gutter);
padding:
0
0
clamp(
38px,
5vw,
72px
);
}
.resume-entry:last-child {
padding-bottom: 0;
}
.resume-entry__date {
color: var(--text-muted);
font-size: 10px;
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.resume-entry__role {
max-width: 26ch;
font-family: var(--font-editorial);
font-size:
clamp(
20px,
2.1vw,
34px
);
font-weight: 700;
line-height: 0.98;
letter-spacing: -0.05em;
text-transform: uppercase;
}
.resume-entry__subtitle {
margin-top: 9px;
color: var(--text-main);
font-size:
clamp(
13px,
1vw,
16px
);
font-weight: 500;
}
/*
Location subtitle — editorial blue token, sits directly beneath
the role/program subtitle. 12px on lavender measures ~4.52:1,
a pass at the 4.5:1 normal-text threshold.
*/
.resume-entry__location {
margin-top: 4px;
color: var(--accent-soft);
font-size: 12px;
}
.resume-entry__bullets {
display: grid;
gap: 10px;
max-width: min(66ch, 100%);
margin-top: 20px;
color: var(--text-muted-strong);
font-size:
clamp(
13px,
0.95vw,
15px
);
line-height: 1.5;
}
.resume-entry__bullets li {
position: relative;
padding-left: 16px;
}
.resume-entry__bullets li::before {
position: absolute;
top: 0.67em;
left: 0;
width: 5px;
height: 1px;
content: "";
background: currentColor;
}
/*
Compact sections (Selected Awards, Honor Society Memberships,
Clubs and Affiliations) drop the date/role/bullets entry layout
in favor of a single-column heading + flat list — no dates to
align, so the two-column .resume-section grid isn't used here.
*/
.resume-section--compact {
display: block;
}
.resume-section--compact .resume-section__header {
margin-bottom:
clamp(
20px,
2.5vw,
32px
);
}
.resume-compact-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 24px;
/* Honor Societies / Clubs are body-list content — same reasoning
as .resume-sidebar-section__list above: --text-main, not accent. */
color: var(--text-main);
font-size: 13px;
line-height: 1.3;
}
.resume-award-group {
margin-top:
clamp(
28px,
3.5vw,
44px
);
}
.resume-award-group:first-child {
margin-top: 0;
}
.resume-award-group__title {
margin-bottom: 14px;
color: var(--text-main);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.03em;
}
.resume-award-group__list {
display: grid;
gap: 10px;
max-width: min(66ch, 100%);
color: var(--text-muted-strong);
font-size:
clamp(
13px,
0.95vw,
15px
);
line-height: 1.5;
}
.resume-award-group__list li {
position: relative;
padding-left: 16px;
}
.resume-award-group__list li::before {
position: absolute;
top: 0.6em;
left: 0;
width: 5px;
height: 1px;
content: "";
background: currentColor;
}
/* ============================================================
16. ABOUT VIEW
============================================================ */
.about-layout {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
min-height: 100vh;
background: var(--color-paper);
}
.about-layout__media {
position: sticky;
top: 0;
align-self: start;
height: 100vh;
overflow: hidden;
background: var(--color-paper-deep);
}
.about-layout__media img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-layout__content {
min-width: 0;
}
.about-layout__content-inner {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100vh;
/*
Top/bottom padding is symmetric now that the eyebrow/title live
in their own .page-intro header above .about-layout — this
section no longer sits directly under the fixed site-header, so
it no longer needs header-height clearance of its own.
*/
padding:
var(--section-spacing)
var(--page-gutter);
}
.about-copy {
margin-top:
clamp(
50px,
7vw,
100px
);
}
.about-copy__body {
display: grid;
gap: 26px;
}
.about-copy__paragraph {
max-width: min(54ch, 100%);
font-size:
clamp(
17px,
1.6vw,
27px
);
line-height: 1.5;
letter-spacing: -0.018em;
overflow-wrap: break-word;
}
.about-copy__paragraph:first-child {
font-size:
clamp(
24px,
2.6vw,
44px
);
font-weight: 400;
line-height: 1.12;
letter-spacing: -0.04em;
}
/*
Single column now that Disciplines is gone and only Contact
remains — was a 2-column grid to hold both sections side by side.
*/
.about-copy__details {
max-width: 32ch;
margin-top:
clamp(
70px,
10vw,
130px
);
padding-top: 24px;
border-top: 1px solid var(--color-line);
}
.about-detail__title {
margin-bottom: 18px;
font-family: var(--font-editorial);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
}
.about-detail__list {
display: grid;
gap: 9px;
color: var(--text-muted-strong);
font-size: 13px;
line-height: 1.3;
}
/*
Personal colophon — an imprint-style credit block, deliberately
separate from .about-copy__details (Contact) above it: no social
links, no duplicated email/phone, just who built the site and
what it's built with. Compact and understated by design — this is
not another resume section.
*/
.about-colophon {
padding:
clamp(60px, 8vw, 100px)
var(--page-gutter)
clamp(48px, 6vw, 80px);
border-top: 1px solid var(--color-line);
background: var(--color-paper);
}
.about-colophon__inner {
max-width: min(46ch, 100%);
}
/*
10px on lavender measures ~4.52:1, a pass at the 4.5:1
normal-text threshold.
*/
.about-colophon__label {
color: var(--accent-soft);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.about-colophon__name {
margin-top: 8px;
color: var(--text-main);
font-size:
clamp(
15px,
1.3vw,
18px
);
font-weight: 500;
letter-spacing: -0.01em;
text-transform: uppercase;
}
.about-colophon__tech {
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
margin-top: 22px;
color: var(--text-muted-strong);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.about-colophon__updated {
margin-top: 28px;
}
.about-colophon__updated .about-colophon__label {
margin-bottom: 6px;
}
.about-colophon__value {
color: var(--text-main);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
}
/* ============================================================
17. LARGE TABLET
============================================================ */
@media (max-width: 1100px) {
.menu-drawer {
width: min(760px, 82vw);
}
.project-grid,
.media-grid {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.project-card,
.broadcast-card {
grid-column:
auto /
span var(--tablet-span, 3);
}
.resume-sidebar {
grid-column: 1 / span 4;
}
.resume-main {
grid-column: 5 / -1;
}
.resume-section {
grid-template-columns: 1fr;
}
.resume-entry {
grid-template-columns:
110px
minmax(0, 1fr);
}
}
/* ============================================================
18. MOBILE LANDSCAPE / TABLET
============================================================ */
@media (max-width: 767px) {
:root {
--header-height: 64px;
}
.site-header__inner {
padding-top: 18px;
}
.brand-button__descriptor {
display: none;
}
.menu-drawer {
width: 100%;
}
.menu-drawer__inner {
padding-top:
calc(var(--header-height) + 42px);
}
.menu-navigation__link {
grid-template-columns: 38px minmax(0, 1fr);
}
.menu-navigation__text {
font-size:
clamp(
34px,
10vw,
58px
);
}
.menu-drawer__footer {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.design-hero {
padding-top:
calc(var(--header-height) + 24px);
}
.design-hero__footer {
align-items: flex-end;
}
.design-hero__metadata {
flex-direction: column;
gap: 20px;
}
.project-dossier__intro {
padding:
clamp(
20px,
6vw,
32px
);
}
.project-grid,
.media-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap:
clamp(
48px,
15vw,
90px
);
}
.project-card,
.broadcast-card {
grid-column:
auto /
span var(--mobile-span, 2);
margin-top: 0;
}
.broadcast-card__information {
gap: 14px;
}
.project-index-row {
grid-template-columns:
44px
minmax(0, 1fr)
78px;
}
.project-index-row__typology {
display: none;
}
.page-intro {
min-height: 72vh;
}
.broadcast-card__play {
width: 54px;
height: 54px;
}
.resume-layout__grid {
display: block;
}
.resume-sidebar {
padding:
clamp(
34px,
9vw,
58px
)
0;
border-bottom: 1px solid var(--color-line);
}
.resume-main {
border-left: 0;
}
.resume-section {
display: block;
padding:
clamp(
34px,
9vw,
58px
)
0;
}
.resume-section__header {
margin-bottom: 42px;
}
.resume-entry {
grid-template-columns: 1fr;
gap: 12px;
}
.resume-section--compact {
padding:
clamp(
34px,
9vw,
58px
)
0;
}
.resume-compact-list {
grid-template-columns: 1fr;
}
.resume-sidebar-section__list {
columns: 1;
}
.about-layout {
display: block;
}
.about-layout__media {
position: relative;
height: 72vh;
}
.about-layout__content-inner {
min-height: auto;
}
}
/* ============================================================
19. SMALL MOBILE
============================================================ */
@media (max-width: 479px) {
/*
QA fix: at the 64px floor, "BROADCAST" (and other 9+ character
titles using this class) overflowed the viewport on narrow
phones — no override existed below 480px. Mirrors the same fix
already in place for .design-hero__title.
*/
.display-heading--large {
font-size: clamp(40px, 15vw, 64px);
}
.design-hero__title {
font-size: clamp(48px, 15vw, 72px);
line-height: 0.9;
}
.design-hero__footer {
display: grid;
gap: 26px;
}
.design-hero__scroll-button {
justify-self: start;
}
.broadcast-card__information {
display: grid;
}
.broadcast-card__meta {
justify-items: start;
text-align: left;
}
.project-index-row {
grid-template-columns:
34px
minmax(0, 1fr);
}
.project-index-row__year {
display: none;
}
.video-dialog__surface {
width: calc(100% - 24px);
}
.video-dialog__header {
gap: 14px;
}
.video-dialog__footer {
flex-direction: column;
gap: 6px;
}
.project-dossier__closing {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}
/* ============================================================
20. CONTEXTUAL CURSOR
============================================================
A limited image-inspection affordance, not a sitewide navigation
system: this pill only appears over elements carrying
[data-cursor-label] — currently just Design Project media cards,
labeled OPEN. Every other card, row, and button on the site keeps
the plain native cursor. `cursor: none` on labeled elements is
scoped to html.cursor-fx-ready — a class the controller script
only adds once it has successfully initialized — so a JS failure
never leaves the native cursor suppressed.
============================================================ */
.custom-cursor {
position: fixed;
top: 0;
left: 0;
z-index: 400;
pointer-events: none;
transform: translate3d(-100px, -100px, 0);
}
.custom-cursor__pill {
display: block;
padding: 0;
transform: translate(-50%, -50%) scale(0.6);
color: var(--color-ink);
background: var(--accent-bright);
border-radius: 999px;
opacity: 0;
transition:
opacity var(--duration-fast) var(--ease-cubic-out),
transform var(--duration-fast) var(--ease-cubic-out),
padding var(--duration-fast) var(--ease-cubic-out);
white-space: nowrap;
}
.custom-cursor__pill.is-visible {
padding: 8px 14px;
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.custom-cursor__label {
font-family: var(--font-functional);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
/*
Only devices that report an accurate, hover-capable pointer ever
get `cursor: none` on a labeled element — everything else (touch,
coarse pointers) keeps its native pointer at all times, and the
pill itself is display:none there as a second safeguard.
*/
@media (hover: none), (pointer: coarse) {
.custom-cursor {
display: none;
}
}
html.cursor-fx-ready [data-cursor-label] {
cursor: none;
}
/* ============================================================
21. REDUCED MOTION
============================================================ */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
transition-duration: 1ms !important;
}
}
/* ============================================================
22. PRINT
============================================================ */
@media print {
.site-header,
.menu-shell,
.video-dialog,
.app-view:not(.app-view--resume) {
display: none !important;
}
.app-view--resume {
display: block !important;
opacity: 1 !important;
}
.page-intro {
min-height: auto;
}
.page-intro__inner {
min-height: auto;
padding: 30px 0;
}
.resume-layout__grid {
display: block;
}
.resume-sidebar,
.resume-main {
border: 0;
}
}