/* Portfolio components. Every value comes from tokens.css; the only literals are sizes on the 8px baseline.
   Hover lifts up-right and leaves shadow-hard behind. Focus on light grounds: a 2px warm-black outline with a 2px highlight-green band inside it — the black edge carries the contrast (15.5:1), the green is identity only. On warm-black (nav) the green edge alone passes (11.4:1).
   `.is-hover` / `.is-focus` / `.is-selected` mirror the live states so previews and Webflow style guides can show them statically. */

:root {
  --pf-lift: translate(3px, -3px);
  --pf-ease: 120ms cubic-bezier(.2, .8, .2, 1);
  --pf-s1: calc(var(--baseline) * .5);  /* 4px  */
  --pf-s2: var(--baseline);             /* 8px  */
  --pf-s3: calc(var(--baseline) * 1.5); /* 12px */
  --pf-s4: calc(var(--baseline) * 2);   /* 16px */
  --pf-s5: calc(var(--baseline) * 3);   /* 24px */
  --pf-s6: calc(var(--baseline) * 4);   /* 32px */
}

.pf, .pf * { box-sizing: border-box; }
.pf-label-text { font: 500 13px/16px var(--font-sans); }
.pf-small-text { font: 400 13px/16px var(--font-sans); }

/* ---------- shared lift ---------- */
.pf-liftable { transition: transform var(--pf-ease), box-shadow var(--pf-ease), border-color var(--pf-ease), background-color var(--pf-ease); }
.pf-liftable:not(:disabled):not(.is-disabled):hover, .pf-liftable.is-hover { transform: var(--pf-lift); box-shadow: var(--shadow-hard); }
.pf-liftable:not(:disabled):not(.is-disabled):active, .pf-liftable.is-pressed { transform: none; box-shadow: none; }
/* Pressed: drops flat AND changes fill, so the press reads on touch screens where hover never shows. */
.pf-button:not(:disabled):active, .pf-button.is-pressed,
.pf-icon-button:not(:disabled):active, .pf-icon-button.is-pressed,
.pf-chip:not(:disabled):active, .pf-chip.is-pressed,
.pf-pagination__page:active, .pf-pagination__page.is-pressed { background: var(--mist-plum); }
.pf-tag:not(:disabled):active, .pf-tag.is-pressed { background: var(--soft-plum); }
.pf-button--secondary:not(:disabled):active, .pf-button--secondary.is-pressed,
.pf-icon-button.is-selected:active, .pf-chip.is-selected:active, .pf-tag.is-selected:active,
.pf-pagination__page[aria-current="page"]:active { background: var(--deep-grey); }
.pf-button--accent:not(:disabled):active, .pf-button--accent.is-pressed { background: var(--highlight-green); box-shadow: inset 0 0 0 2px var(--warm-black); }
@media (prefers-reduced-motion: reduce) { .pf-liftable { transition: none; } }

/* ---------- Button ---------- */
.pf-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pf-s2);
  height: 40px; padding: 0 var(--pf-s4);
  font: 500 13px/16px var(--font-sans); color: var(--warm-black); text-decoration: none; white-space: nowrap;
  background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control);
  cursor: pointer;
}
.pf-button--secondary { background: var(--warm-black); color: var(--white); }
.pf-button--tertiary { background: var(--mist-plum); border-color: var(--mist-plum); }
.pf-button--accent { background: var(--highlight-green); border-color: var(--warm-black); }
.pf-button:focus-visible, .pf-button.is-focus { outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-button:disabled, .pf-button.is-disabled { background: var(--disabled-grey); border-color: var(--disabled-ink); color: var(--disabled-ink); cursor: not-allowed; }
.pf-button svg { width: 16px; height: 16px; flex: none; }

/* ---------- Icon button ---------- */
.pf-icon-button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  color: var(--warm-black); background: var(--white);
  border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control); cursor: pointer;
}
.pf-icon-button svg { width: 20px; height: 20px; }
.pf-icon-button:focus-visible, .pf-icon-button.is-focus { outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-icon-button.is-selected, .pf-icon-button[aria-pressed="true"] { background: var(--warm-black); color: var(--white); }
.pf-icon-button:disabled, .pf-icon-button.is-disabled { background: var(--disabled-grey); border-color: var(--disabled-ink); color: var(--disabled-ink); cursor: not-allowed; }

/* ---------- Text link ---------- */
.pf-text-link {
  display: inline-flex; align-items: center; gap: var(--pf-s1);
  font: 500 13px/16px var(--font-sans); color: var(--warm-black); text-decoration: none;
  padding: 2px var(--pf-s1); margin: -2px calc(var(--pf-s1) * -1); border-radius: 4px;
  border: var(--outline-default) solid transparent; cursor: pointer; background: none;
}
.pf-text-link svg { width: 16px; height: 16px; flex: none; transition: transform var(--pf-ease); }
.pf-text-link:hover, .pf-text-link.is-hover { text-decoration: underline; text-underline-offset: 3px; }
.pf-text-link:hover svg, .pf-text-link.is-hover svg { transform: translate(2px, -2px); }
.pf-text-link:focus-visible, .pf-text-link.is-focus { background: var(--mist-plum); outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-text-link.is-selected::before, .pf-text-link[aria-current]::before { content: ""; width: 6px; height: 6px; background: var(--highlight-green); border: 1px solid var(--warm-black); order: 2; }
.pf-text-link.is-disabled, .pf-text-link[aria-disabled="true"] { color: var(--disabled-ink); pointer-events: none; }

/* ---------- Field (text input, textarea, select) ---------- */
.pf-field { display: flex; flex-direction: column; gap: var(--pf-s1); font-family: var(--font-sans); min-width: 0; }
.pf-field__top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pf-s2); }
.pf-field__label { font: 500 13px/16px var(--font-sans); color: var(--warm-black); }
.pf-field__meta { font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.pf-field__help { font: 400 13px/16px var(--font-sans); color: var(--deep-grey); margin: 0; }
.pf-field__control {
  width: 100%; height: 40px; padding: 0 var(--pf-s3);
  font: 400 13px/16px var(--font-sans); color: var(--warm-black);
  background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control);
  appearance: none; -webkit-appearance: none;
}
.pf-field__control::placeholder { color: var(--deep-grey); }
textarea.pf-field__control { height: auto; min-height: 88px; padding: var(--pf-s3); resize: vertical; }
.pf-field__select { position: relative; }
.pf-field__select .pf-field__control { padding-right: var(--pf-s6); cursor: pointer; }
.pf-field__select svg { position: absolute; right: var(--pf-s3); top: 50%; width: 12px; height: 12px; margin-top: -6px; pointer-events: none; color: var(--warm-black); }
.pf-field__control:not(:disabled):hover, .pf-field.is-hover .pf-field__control { transform: var(--pf-lift); box-shadow: var(--shadow-hard); }
.pf-field__control:focus, .pf-field.is-focus .pf-field__control { transform: none; outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-field.is-error .pf-field__label, .pf-field.is-error .pf-field__help { color: var(--error-red); }
.pf-field.is-error .pf-field__control { border-color: var(--error-red); }
.pf-field.is-disabled .pf-field__control { background: var(--disabled-grey); border-color: var(--disabled-ink); color: var(--disabled-ink); cursor: not-allowed; }
.pf-field.is-disabled .pf-field__select svg { color: var(--disabled-ink); }
.pf-field__control { transition: transform var(--pf-ease), box-shadow var(--pf-ease); }

/* ---------- Checkbox & radio ---------- */
.pf-check { display: inline-flex; align-items: flex-start; gap: var(--pf-s2); cursor: pointer; font-family: var(--font-sans); position: relative; }
.pf-check input { position: absolute; opacity: 0; width: 16px; height: 16px; margin: 0; }
.pf-check__box {
  flex: none; display: grid; place-items: center; width: 16px; height: 16px; margin-top: 0;
  background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: 3px; color: var(--warm-black);
  transition: transform var(--pf-ease), box-shadow var(--pf-ease);
}
.pf-check--radio .pf-check__box { border-radius: 50%; }
.pf-check__box svg { width: 10px; height: 10px; opacity: 0; }
.pf-check__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--warm-black); opacity: 0; }
.pf-check__text { display: flex; flex-direction: column; }
.pf-check__label { font: 500 13px/16px var(--font-sans); color: var(--warm-black); }
.pf-check__hint { font: 400 10px/16px var(--font-sans); color: var(--deep-grey); }
.pf-check:hover .pf-check__box, .pf-check.is-hover .pf-check__box { transform: var(--pf-lift); box-shadow: -2px 2px 0 0 var(--warm-black); }
.pf-check input:focus-visible + .pf-check__box, .pf-check.is-focus .pf-check__box { outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-check input:checked + .pf-check__box, .pf-check.is-selected .pf-check__box { background: var(--highlight-green); }
.pf-check input:checked + .pf-check__box svg, .pf-check.is-selected .pf-check__box svg,
.pf-check input:checked + .pf-check__box .pf-check__dot, .pf-check.is-selected .pf-check__box .pf-check__dot { opacity: 1; }
.pf-check.is-disabled { cursor: not-allowed; }
.pf-check.is-disabled .pf-check__box { background: var(--disabled-grey); border-color: var(--disabled-ink); transform: none; box-shadow: none; }
.pf-check.is-disabled .pf-check__label, .pf-check.is-disabled .pf-check__hint { color: var(--disabled-ink); }

/* ---------- Toggle ---------- */
.pf-toggle { display: inline-flex; align-items: center; gap: var(--pf-s2); cursor: pointer; position: relative; font-family: var(--font-sans); }
.pf-toggle input { position: absolute; opacity: 0; width: 36px; height: 20px; margin: 0; }
.pf-toggle__track {
  flex: none; position: relative; width: 36px; height: 20px; border-radius: var(--radius-pill);
  background: var(--mist-plum); border: var(--outline-default) solid var(--warm-black);
  transition: transform var(--pf-ease), box-shadow var(--pf-ease), background-color var(--pf-ease);
}
.pf-toggle__knob { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--warm-black); transition: left var(--pf-ease); }
.pf-toggle__label { font: 500 13px/16px var(--font-sans); color: var(--warm-black); }
.pf-toggle:hover .pf-toggle__track, .pf-toggle.is-hover .pf-toggle__track { transform: var(--pf-lift); box-shadow: -2px 2px 0 0 var(--warm-black); }
.pf-toggle input:focus-visible + .pf-toggle__track, .pf-toggle.is-focus .pf-toggle__track { outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-toggle input:checked + .pf-toggle__track, .pf-toggle.is-selected .pf-toggle__track { background: var(--highlight-green); }
.pf-toggle input:checked + .pf-toggle__track .pf-toggle__knob, .pf-toggle.is-selected .pf-toggle__knob { left: 18px; }
.pf-toggle.is-disabled { cursor: not-allowed; }
.pf-toggle.is-disabled .pf-toggle__track { background: var(--disabled-grey); border-color: var(--disabled-ink); transform: none; box-shadow: none; }
.pf-toggle.is-disabled .pf-toggle__knob { background: var(--disabled-ink); }
.pf-toggle.is-disabled .pf-toggle__label { color: var(--disabled-ink); }

/* ---------- Chip & tag ---------- */
.pf-chip, .pf-tag {
  display: inline-flex; align-items: center; gap: var(--pf-s1);
  font: 500 13px/16px var(--font-sans); color: var(--warm-black); white-space: nowrap;
  background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-pill); cursor: pointer;
}
.pf-chip { height: 32px; padding: 0 var(--pf-s3); }
.pf-tag { height: 24px; padding: 0 var(--pf-s2); font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; background: var(--mist-plum); border-color: transparent; }
.pf-tag.is-disabled, .pf-tag:disabled { border-color: transparent !important; }
.pf-chip:focus-visible, .pf-chip.is-focus, .pf-tag:focus-visible, .pf-tag.is-focus { outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-chip.is-selected, .pf-chip[aria-pressed="true"], .pf-tag.is-selected, .pf-tag[aria-pressed="true"] { background: var(--warm-black); color: var(--white); }
.pf-chip__mark { width: 6px; height: 6px; background: var(--highlight-green); }
.pf-chip__remove { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: -4px; padding: 0; color: inherit; background: none; border: 0; cursor: pointer; }
.pf-chip__remove svg { width: 8px; height: 8px; }
.pf-chip:disabled, .pf-chip.is-disabled, .pf-tag:disabled, .pf-tag.is-disabled { background: var(--disabled-grey); border-color: var(--disabled-ink); color: var(--disabled-ink); cursor: not-allowed; }

/* ---------- Navigation ---------- */
.pf-nav {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s5);
  padding: var(--pf-s3) var(--pf-s4); background: var(--warm-black); color: var(--white); border-radius: var(--radius-control);
  font-family: var(--font-sans);
}
.pf-nav__brand { display: inline-flex; align-items: center; gap: var(--pf-s2); font: 500 17px/24px var(--font-sans); color: var(--white); text-decoration: none; white-space: nowrap; }
.pf-nav__brand::before { content: ""; width: 12px; height: 12px; background: var(--highlight-green); }
.pf-nav__links { display: flex; align-items: center; gap: var(--pf-s1); margin: 0; padding: 0; list-style: none; }
.pf-nav__link {
  display: inline-block; padding: var(--pf-s1) var(--pf-s2); border-radius: 4px; border: var(--outline-default) solid transparent;
  font: 500 13px/16px var(--font-sans); color: var(--white); text-decoration: none; position: relative;
}
.pf-nav__link:hover, .pf-nav__link.is-hover { text-decoration: underline; text-underline-offset: 4px; }
.pf-nav__link:focus-visible, .pf-nav__link.is-focus { outline: none; background: var(--plum-lead); border-color: var(--highlight-green); }
.pf-nav__link[aria-current="page"], .pf-nav__link.is-selected { text-decoration: none; }
.pf-nav__link[aria-current="page"]::after, .pf-nav__link.is-selected::after { content: ""; position: absolute; left: var(--pf-s2); right: var(--pf-s2); bottom: -2px; height: 2px; background: var(--highlight-green); }
.pf-nav__link.is-disabled, .pf-nav__link[aria-disabled="true"] { color: var(--disabled-ink); pointer-events: none; }
.pf-nav__end { display: flex; align-items: center; gap: var(--pf-s4); }
.pf-nav__menu { display: none; }
@media (max-width: 767px) {
  .pf-nav__links { display: none; }
  .pf-nav__menu { display: inline-grid; }
  .pf-nav .pf-nav__cta { display: none; }
  .pf-nav.is-open { flex-wrap: wrap; }
  .pf-nav.is-open .pf-nav__links { display: flex; flex-direction: column; align-items: flex-start; width: 100%; order: 3; padding-top: var(--pf-s2); }
  .pf-nav.is-open .pf-nav__cta { display: inline-flex; order: 4; }
}
.pf-nav .pf-icon-button { background: transparent; color: var(--white); border-color: var(--white); }
.pf-demo--dark .pf-icon-button:focus-visible, .pf-nav .pf-icon-button:focus-visible, .pf-nav .pf-icon-button.is-focus { outline-color: var(--highlight-green); box-shadow: none; }

/* ---------- Project card ---------- */
.pf-card {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; text-decoration: none; color: var(--warm-black);
  background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control);
  font-family: var(--font-sans);
}
.pf-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--mist-plum); overflow: hidden; }
.pf-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(.2, .8, .2, 1); }
.pf-card:hover .pf-card__media img, .pf-card.is-hover .pf-card__media img { transform: scale(1.03); }
.pf-card__go { position: absolute; right: var(--pf-s2); bottom: var(--pf-s2); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--warm-black); color: var(--white); }
.pf-card__go svg { width: 16px; height: 16px; }
.pf-card__body { display: flex; flex-direction: column; gap: var(--pf-s1); padding: var(--pf-s3) var(--pf-s3) var(--pf-s4); }
.pf-card__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--pf-s2); }
.pf-card__title { margin: 0; font: 500 17px/24px var(--font-sans); letter-spacing: -.1px; }
.pf-card__year { font: 400 13px/16px var(--font-sans); color: var(--deep-grey); }
.pf-card__discipline { font: 500 10px/16px var(--font-sans); letter-spacing: .8px; text-transform: uppercase; color: var(--deep-grey); }
.pf-card:focus-visible, .pf-card.is-focus { outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-card.is-selected { border: var(--outline-strong) solid var(--warm-black); }
.pf-card.is-selected .pf-card__media { border-bottom: 4px solid var(--highlight-green); }

/* ---------- Pagination ---------- */
.pf-pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--pf-s4); flex-wrap: wrap; font-family: var(--font-sans); }
.pf-pagination__pages { display: flex; align-items: center; gap: var(--pf-s2); margin: 0; padding: 0; list-style: none; }
.pf-pagination__page {
  display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--pf-s2);
  font: 500 13px/16px var(--font-sans); color: var(--warm-black); text-decoration: none;
  background: var(--white); border: var(--outline-default) solid var(--warm-black); border-radius: var(--radius-control); cursor: pointer;
}
.pf-pagination__page[aria-current="page"] { background: var(--warm-black); color: var(--white); }
.pf-pagination__page:focus-visible, .pf-pagination__page.is-focus { outline: var(--outline-strong) solid var(--warm-black); outline-offset: 2px; box-shadow: 0 0 0 2px var(--highlight-green); }
.pf-pagination__status { display: flex; flex-direction: column; align-items: flex-end; }
.pf-pagination__count { font: 500 13px/16px var(--font-sans); color: var(--warm-black); }
.pf-pagination__hint { font: 400 10px/16px var(--font-sans); color: var(--deep-grey); }