/* Hallmark · shape: Catalogue · genre: editorial · theme: Ink (deal: manual) · job: hire · draw: manual
 * hero: Wall · nav: wordmark, a status tag and one action · footer: a sentence with ruled links · imagery: the product (her own portal screenshots) · signature: a staggered wall of her own portal screenshots beside the headline, every project searchable further down · ink: paper
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* critique: a recruiter gets her role, her platforms and the full list of agencies in one screen, then four projects with context */
/* waive 22 · ink and greys at zero chroma · a notice board is printed in plain black */
/* waive 16 · sloplint not run · no Node on this machine; checked by hand in the browser */
@import url("tokens.css");
@import url("base.css");

:root { --container: 1240px; }
body { color: var(--color-ink-2); font-size: 1.0625rem; }
h1, h2, h3 { color: var(--color-ink); font-weight: var(--display-weight); line-height: 1.02; }
a { font-weight: 600; color: var(--color-ink); }
a:hover { text-decoration-color: var(--color-accent); }
::selection { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }

.btn { display: inline-flex; align-items: center; min-height: 44px; border: var(--rule-hair) solid var(--color-rule); border-radius: 10px; padding: 0 var(--space-md); font-weight: 600; font-size: var(--text-sm); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); cursor: pointer; }
.btn:hover { background: var(--color-paper-3); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }
.btn--primary:hover { background: var(--color-ink-2); }

.tag { display: inline-flex; align-items: center; padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; background: var(--color-paper-3); color: var(--color-ink-2); white-space: nowrap; }
.tag--in { background: var(--color-accent-soft); color: var(--color-accent-soft-ink); }
.tag--out { background: transparent; box-shadow: inset 0 0 0 var(--rule-hair) var(--color-rule); color: var(--color-muted); }

/* nav */
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-ink); }
.wordmark { font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.02em; text-decoration: none; }
.nav-right { display: flex; align-items: center; gap: var(--space-md); }
.nav-right a:not(.btn) { font-size: var(--text-sm); }

/* hero: Settled */
.hero { padding-block: var(--space-2xl) var(--space-3xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.hero h1 { font-size: clamp(2.75rem, 4vw + 0.75rem, 4.5rem); max-width: 10ch; }
.hero .lead { margin-top: var(--space-lg); max-width: 30ch; color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-xl); }

/* the shelf */
.finder label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-xs); }
.finder input { width: 100%; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); }
.finder input::placeholder { color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.chips button { border: 0; font: inherit; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.chips button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-paper); }
.chips button:hover:not([aria-pressed="true"]) { background: var(--color-rule); }
.shelf { list-style: none; margin: var(--space-lg) 0 0; padding: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.shelf li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 2fr) auto; gap: var(--space-md); align-items: center; padding-block: var(--space-sm); border-bottom: var(--rule-hair) solid var(--color-rule); }
.shelf .name { font-weight: 600; color: var(--color-ink); min-width: 0; }
.shelf .name a { text-decoration: none; }
.shelf .name a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.shelf .plat { font-size: var(--text-sm); color: var(--color-muted); }
.shelf.is-short li:nth-child(n+8) { display: none; }
.shelf-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-muted); }
.linkish { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--color-ink); text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; }
.linkish:hover { text-decoration-color: var(--color-accent); }

/* figures */
.band { background: var(--color-paper-2); border-block: var(--rule-hair) solid var(--color-rule); }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); padding-block: var(--space-2xl); }
.figures div { border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-md); }
.figures strong { display: block; font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.figures span { display: block; margin-top: var(--space-xs); font-size: var(--text-sm); }

/* featured */
.section { padding-block: var(--section-gap-s); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: var(--space-lg); margin-bottom: var(--space-xl); }
.section-head h2 { font-size: var(--text-section); }
.section-head p { max-width: 38ch; }
.cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.case .shot { aspect-ratio: 16 / 10; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; overflow: hidden; background: var(--color-paper-2); }
.case .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(0.75); }
.case-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); margin-top: var(--space-md); }
.case h3 { font-size: var(--text-title); }
.case dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2xs) var(--space-md); margin: var(--space-sm) 0 0; font-size: var(--text-sm); }
.case dt { color: var(--color-muted); }
.case dd { margin: 0; }
.case .visit { display: inline-block; margin-top: var(--space-sm); font-size: var(--text-sm); }

/* steps as a notice */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; border-top: var(--rule-hair) solid var(--color-ink); padding-top: var(--space-md); }
.steps li::before { content: counter(s); display: block; font-size: var(--text-display-s); font-weight: 700; letter-spacing: -0.04em; line-height: 1; color: var(--color-ink); margin-bottom: var(--space-md); }
.steps h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.steps p { font-size: var(--text-sm); }

/* experience timetable */
.roles { border-top: var(--rule-hair) solid var(--color-ink); }
.role { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 3fr); gap: var(--space-md); align-items: center; padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.role .when { font-size: var(--text-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }
.role .what { font-weight: 600; color: var(--color-ink); }
.role .where { font-size: var(--text-sm); }

/* contact: ink band */
.contact { background: var(--color-ink); color: var(--color-paper); padding-block: var(--section-gap-s); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl); align-items: end; }
.contact h2 { color: var(--color-paper); font-size: var(--text-section); max-width: 14ch; }
.contact p { margin-top: var(--space-md); color: var(--color-paper-3); }
.contact a { color: var(--color-paper); }
.contact .btn--primary { background: var(--color-paper); color: var(--color-ink); border-color: var(--color-paper); }
.contact .btn--primary:hover { background: var(--color-paper-3); }
.contact .btn:not(.btn--primary) { background: transparent; color: var(--color-paper); border-color: var(--color-ink-2); }
.contact .btn:not(.btn--primary):hover { border-color: var(--color-paper); }
.contact :focus-visible { outline-color: var(--color-accent-soft); }

.footer { padding-block: var(--space-2xl); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); font-size: var(--text-sm); }
.footer p { max-width: 48ch; }
.footer ul { display: flex; gap: var(--space-lg); list-style: none; margin: 0; padding: 0; }

@media (max-width: 60rem) {
  .hero-grid, .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .cases { grid-template-columns: minmax(0, 1fr); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .role { grid-template-columns: minmax(0, 1fr); }
  .role { gap: var(--space-2xs); }
  .section-head { flex-direction: column; align-items: start; }
}
@media (max-width: 40rem) {
  .figures { grid-template-columns: minmax(0, 1fr); padding-block: var(--space-xl); }
  .nav-right a:not(.btn) { display: none; }
  .shelf li { grid-template-columns: minmax(0, 1fr) auto; }
  .shelf .plat { display: none; }
}

/* all projects */
.shelf-all { margin-top: var(--space-md); font-size: var(--text-sm); }
.gallery-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-lg); margin-bottom: var(--space-xl); }
.gallery-tools input { flex: 1 1 260px; max-width: 420px; min-height: 48px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: 10px; background: var(--color-paper); color: var(--color-ink); }
.gallery-tools input::placeholder { color: var(--color-muted); }
.gallery-tools .chips { margin-top: 0; }
.gallery-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-muted); }
.gallery { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl) var(--gap-columns); }
.card[hidden] { display: none; }
.thumb { aspect-ratio: 16 / 10; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; overflow: hidden; background: var(--color-paper-2); }
.thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(0.75); }
.card-title { display: flex; justify-content: space-between; align-items: start; gap: var(--space-sm); margin-top: var(--space-sm); }
.card h3 { font-size: var(--text-md); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.card-meta { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-muted); }
.card-links { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xs); font-size: var(--text-sm); }
.gallery-empty { margin-top: var(--space-lg); }
@media (max-width: 60rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .gallery { grid-template-columns: minmax(0, 1fr); } .gallery-count { margin-left: 0; } }
.thumb-empty { display: flex; align-items: center; justify-content: center; height: 100%; font-size: var(--text-sm); color: var(--color-muted); }

/* hero: Wall, the headline beside a staggered wall of her own screenshots */
.wall-hero { padding-block: var(--space-2xl) var(--space-3xl); }
.wall-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.wall-hero h1 { font-size: clamp(2.75rem, 4vw + 0.75rem, 4.5rem); max-width: 10ch; }
.wall-hero .lead { margin-top: var(--space-lg); max-width: 30ch; }
.agencies { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); max-width: 40ch; }
.agencies strong { color: var(--color-ink); font-weight: 600; }
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); height: 620px; overflow: clip; mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.wall-col { display: grid; gap: var(--space-md); align-content: start; }
.wall-col:nth-child(2) { margin-top: var(--space-2xl); }
.wall-col:nth-child(3) { margin-top: var(--space-lg); }
.tile { display: block; position: relative; text-decoration: none; }
.tile .shot { aspect-ratio: 3 / 4; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; overflow: hidden; background: var(--color-paper-2); }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; filter: saturate(0.75); transition: filter var(--dur-short) var(--ease-out); }
.tile span { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); font-weight: 600; color: var(--color-ink); }
.tile:hover img { filter: saturate(1); }
.wall-more { margin-top: var(--space-md); font-size: var(--text-sm); }

@media (max-width: 60rem) { .wall-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } .wall { height: 440px; } }
@media (max-width: 40rem) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wall-col:nth-child(3) { display: none; } }

/* footer: Card, one quiet panel with the actions as buttons */
.f-rule { border-top: var(--rule-hair) solid var(--color-ink); }
.f-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm) var(--space-lg); font-size: var(--text-sm); color: var(--color-muted); }
.f-base a { color: var(--color-ink); }
.f-links { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); list-style: none; margin: 0; padding: 0; }

.fc { padding-block: var(--space-xl) var(--space-xl); }
.fc-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); padding: var(--space-xl); border-radius: 20px; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); }
.fc-card h2 { font-size: var(--text-2xl); letter-spacing: -0.03em; }
.fc-card p { margin-top: var(--space-xs); color: var(--color-muted); font-size: var(--text-sm); }
.fc-card p a { color: var(--color-ink); }
.fc-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.fc .f-base { margin-top: var(--space-lg); padding-inline: var(--space-xs); }

@media (max-width: 60rem) { .fc-card { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .fc-card { padding: var(--space-lg); } }