/* Portfolio A×B — Direction A layout with Direction B colours and type (Archivo + JetBrains Mono).
   Every value comes from tokens.css; the only literals are motion timings,
   which have no token family. Scope: everything lives under .pf. */

.pf {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 27px;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.pf *, .pf *::before, .pf *::after { box-sizing: border-box; }
.pf ::selection { background: var(--accent-tint); color: var(--ink); }
.pf h1, .pf h2, .pf h3, .pf h4, .pf p, .pf figure, .pf dl, .pf dd, .pf ul, .pf ol { margin: 0; padding: 0; }
.pf ul, .pf ol { list-style: none; }
:where(.pf) a { color: inherit; }
.pf :focus-visible { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }
.pf .muted { color: var(--ink-muted); }
.pf .upper { text-transform: uppercase; }
.pf .counter { font-family: var(--font-display); font-stretch: 62%; font-weight: 200; font-style: normal; letter-spacing: -0.02em; }
.pf-wordmark, .pf-section-head h2, .pf-menu li a, .pf-nextprev a strong, .pf-hero__headline, .pf-casehead__title, .pf-contact__head { font-stretch: 112%; font-weight: 800; }
.pf-card__title, .pf-case__label h3, .pf-btn, .pf-link--big { font-stretch: 106%; }

/* ---------- Layout: page and grid ---------- */
.pf-page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-margin); }
.pf-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); }
.pf-grid > * { grid-column: var(--col, 1 / -1); }
@media (max-width: 1023px) {
  .pf-page { padding: 0 var(--space-6); }
  .pf-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .pf-grid > * { grid-column: var(--col-t, 1 / -1); }
}
@media (max-width: 767px) {
  .pf-page { padding: 0 var(--page-margin-mobile); }
  .pf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-4); }
  .pf-grid > * { grid-column: var(--col-m, 1 / -1); }
}

/* ---------- Signature: the dot ---------- */
.pf-dot { display: inline-block; width: 0.18em; height: 0.18em; border-radius: var(--radius-round); background: var(--accent-text); vertical-align: baseline; margin-left: 0.02em; }
.pf-dot--sm { width: 8px; height: 8px; vertical-align: 0.1em; margin: 0 var(--space-2) 0 0; }

/* ---------- Kicker / label ---------- */
.pf-kicker { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); display: flex; gap: var(--space-3); align-items: baseline; }
.pf-kicker b { color: var(--ink); font-weight: 500; }

/* ---------- Placeholder (image slot) ---------- */
.pf-ph { position: relative; display: block; width: 100%; aspect-ratio: var(--ratio, var(--ratio-landscape)); background: var(--sand); color: var(--ink-muted); overflow: visible; }
.pf-ph > img, .pf-ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-ph__label { position: absolute; top: var(--space-4); left: var(--space-4); right: var(--space-4); display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.pf-ph__note { position: absolute; left: var(--space-4); bottom: var(--space-4); right: var(--space-4); font-size: 15px; line-height: 23px; max-width: 28ch; }
.pf-ph__cross { position: absolute; inset: 0; pointer-events: none; background:
    linear-gradient(var(--line-soft), var(--line-soft)) center / 1px 24px no-repeat,
    linear-gradient(var(--line-soft), var(--line-soft)) center / 24px 1px no-repeat; }
.pf-ph--landscape { --ratio: var(--ratio-landscape); }
.pf-ph--classic   { --ratio: var(--ratio-classic); }
.pf-ph--cinema    { --ratio: var(--ratio-cinema); }
.pf-ph--square    { --ratio: var(--ratio-square); }
.pf-ph--portrait  { --ratio: var(--ratio-portrait); }
.pf-ph--tall      { --ratio: var(--ratio-tall); }
.pf-ph--poster    { --ratio: var(--ratio-poster); }
.pf-ph--video .pf-ph__play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; transform: translate(-50%, -50%); border: var(--stroke-rule) solid var(--ink); border-radius: var(--radius-round); }
.pf-ph--video .pf-ph__play::after { content: ""; position: absolute; left: 25px; top: 19px; border-left: 18px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; }

/* Crop marks: drawn just outside the image corners. */
.pf-crop { position: relative; display: block; color: var(--ink-muted); }
.pf-crop::before { content: ""; position: absolute; inset: calc(-1 * var(--space-3)); pointer-events: none; z-index: 1; transition: color 160ms ease;
  background:
    linear-gradient(currentColor, currentColor) left 0 top 12px / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left 12px top 0 / 1px 8px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 top 12px / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right 12px top 0 / 1px 8px no-repeat,
    linear-gradient(currentColor, currentColor) left 0 bottom 12px / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) left 12px bottom 0 / 1px 8px no-repeat,
    linear-gradient(currentColor, currentColor) right 0 bottom 12px / 8px 1px no-repeat,
    linear-gradient(currentColor, currentColor) right 12px bottom 0 / 1px 8px no-repeat; }

/* ---------- Buttons ---------- */
.pf-btn { display: inline-flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-5); border: var(--stroke-rule) solid var(--ink); border-radius: var(--radius-0); background: var(--ink); color: var(--paper); font-family: var(--font-display); font-size: 15px; line-height: 23px; font-weight: 600; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; }
.pf-btn__arrow { display: inline-block; transition: transform 160ms ease; }
.pf-btn:hover, .pf-btn.is-hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pf-btn:hover .pf-btn__arrow, .pf-btn.is-hover .pf-btn__arrow { transform: translateX(4px); }
.pf-btn:active, .pf-btn.is-active { transform: translateY(1px); }
.pf-btn.is-focus { outline: var(--stroke-focus) solid var(--focus); outline-offset: 3px; }
.pf-btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pf-btn--accent:hover, .pf-btn--accent.is-hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pf-btn--ghost { background: transparent; color: var(--ink); }
.pf-btn--ghost:hover, .pf-btn--ghost.is-hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pf-btn[disabled], .pf-btn.is-disabled { background: transparent; border-color: var(--line-soft); color: var(--ink-muted); cursor: not-allowed; }

/* ---------- Text links ---------- */
.pf-link { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--stroke-hairline); text-decoration-color: var(--ink-muted); text-underline-offset: 0.22em; transition: color 160ms ease, text-decoration-color 160ms ease; }
.pf-link:hover, .pf-link.is-hover { color: var(--accent-text); text-decoration-color: var(--accent-text); text-decoration-thickness: var(--stroke-rule); }
.pf-link--quiet { text-decoration-color: transparent; }
.pf-link--arrow::after { content: " \2192\FE0E"; display: inline-block; transition: transform 160ms ease; }
.pf-link--arrow:hover::after, .pf-link--arrow.is-hover::after { transform: translateX(4px); }
.pf-link--big { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.015em; }

/* ---------- Site header / navigation ---------- */
.pf-header { position: relative; height: var(--header-height); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border-bottom: var(--stroke-hairline) solid var(--ink); }
.pf-wordmark { font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.pf-nav { display: flex; gap: var(--space-6); }
.pf-nav a { display: inline-flex; align-items: baseline; gap: var(--space-1); font-size: 15px; line-height: 23px; color: var(--ink); text-decoration: none; padding: var(--space-2) 0; border-bottom: var(--stroke-rule) solid transparent; }
.pf-nav a sup { font-family: var(--font-mono); font-size: 10px; line-height: 10px; font-weight: 500; color: var(--ink-muted); letter-spacing: 0.04em; }
.pf-nav a:hover, .pf-nav a.is-hover { border-bottom-color: var(--ink); }
.pf-nav a[aria-current="page"] { border-bottom-color: var(--accent-text); }
.pf-nav a[aria-current="page"] sup { color: var(--accent-text); }
.pf-menu-btn { display: none; align-items: center; gap: var(--space-2); background: none; border: 0; padding: var(--space-2) 0; color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.pf-menu-btn__bars { width: 20px; height: 8px; border-top: var(--stroke-rule) solid currentColor; border-bottom: var(--stroke-rule) solid currentColor; }
.pf-menu { background: var(--paper-raised); padding: var(--space-6) var(--page-margin-mobile) var(--space-7); display: flex; flex-direction: column; gap: var(--space-6); }
.pf-menu ol { display: flex; flex-direction: column; }
.pf-menu li a { display: flex; align-items: baseline; justify-content: space-between; padding: var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--line-soft); text-decoration: none; color: var(--ink); font-size: 44px; line-height: 48px; font-weight: 700; letter-spacing: -0.03em; }
.pf-menu li a span { font-family: var(--font-mono); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); }
.pf-menu li a[aria-current="page"] span { color: var(--accent-text); }
.pf-header--compact .pf-nav { display: none; }
.pf-header--compact .pf-menu-btn { display: inline-flex; }
@media (max-width: 767px) {
  .pf-header .pf-nav { display: none; }
  .pf-header .pf-menu-btn { display: inline-flex; }
}

/* ---------- Availability chip ---------- */
.pf-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--accent-tint); color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; }
.pf-chip .pf-dot--sm { margin: 0; }

/* ---------- Hero ---------- */
.pf-hero { padding: var(--space-8) 0 var(--space-9); row-gap: var(--space-7); }
.pf-hero__headline { --col: 1 / 11; font-size: 160px; line-height: 0.88; font-weight: 700; letter-spacing: -0.045em; font-stretch: 112%; }
.pf-hero__headline .counter { font-size: 1.04em; letter-spacing: -0.02em; }
.pf-hero__intro { --col: 1 / 5; align-self: end; display: flex; flex-direction: column; gap: var(--space-5); }
.pf-hero__intro p { font-size: 21px; line-height: 32px; max-width: 24ch; }
.pf-hero__visual { --col: 7 / 12; }
.pf-hero__aside { --col: 12 / 13; writing-mode: vertical-rl; align-self: end; }
@media (max-width: 1279px) { .pf-hero__headline { font-size: 112px; line-height: 0.9; letter-spacing: -0.04em; } }
@media (max-width: 1023px) {
  .pf-hero__headline { --col-t: 1 / -1; }
  .pf-hero__intro { --col-t: 1 / 5; }
  .pf-hero__visual { --col-t: 5 / 9; }
  .pf-hero__aside { display: none; }
}
@media (max-width: 767px) {
  .pf-hero { padding: var(--space-6) 0 var(--space-8); row-gap: var(--space-6); }
  .pf-hero__headline { font-size: 64px; line-height: 0.94; letter-spacing: -0.035em; }
  .pf-hero__intro, .pf-hero__visual { --col-m: 1 / -1; }
  .pf-hero__visual { --col-m: 2 / 5; order: 2; }
  .pf-hero__intro { order: 3; }
}

/* ---------- Section head ---------- */
.pf-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-4); border-bottom: var(--stroke-rule) solid var(--ink); margin-bottom: var(--space-9); }
.pf-section-head h2 { font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.03em; }
@media (max-width: 767px) { .pf-section-head { margin-bottom: var(--space-7); } .pf-section-head h2 { font-size: 40px; line-height: 44px; } }

/* ---------- Project card ---------- */
.pf-card { display: block; text-decoration: none; color: var(--ink); }
.pf-card__media { margin-bottom: var(--space-5); }
.pf-card__meta { display: grid; grid-template-columns: auto 1fr auto; column-gap: var(--space-4); row-gap: var(--space-1); padding-top: var(--space-3); border-top: var(--stroke-hairline) solid var(--ink); }
.pf-card__index { font-family: var(--font-mono); font-size: 13px; line-height: 26px; font-weight: 500; letter-spacing: 0.02em; color: var(--ink-muted); transition: color 160ms ease; }
.pf-card__title { font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -0.01em; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: var(--stroke-rule); text-underline-offset: 0.2em; transition: text-decoration-color 160ms ease; }
.pf-card__cat { grid-column: 2; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.pf-card__year { font-family: var(--font-mono); font-size: 13px; line-height: 26px; color: var(--ink-muted); }
.pf-card:hover .pf-crop, .pf-card.is-hover .pf-crop, .pf-card:focus-visible .pf-crop { color: var(--accent-text); }
.pf-card:hover .pf-card__index, .pf-card.is-hover .pf-card__index { color: var(--accent-text); }
.pf-card:hover .pf-card__title, .pf-card.is-hover .pf-card__title { text-decoration-color: var(--ink); }
.pf-card:focus-visible { outline-offset: calc(var(--space-3) + 4px); }
.pf-card--wide .pf-card__meta { grid-template-columns: auto 1fr 1fr auto; }
.pf-card--wide .pf-card__cat { grid-column: auto; line-height: 26px; }

/* ---------- Work grid: controlled asymmetry ---------- */
.pf-work { row-gap: var(--space-10); align-items: start; }
.pf-work > * { margin-top: var(--drop, 0); }
@media (max-width: 1023px) { .pf-work { row-gap: var(--space-9); } .pf-work > * { margin-top: var(--drop-t, 0); } }
@media (max-width: 767px) {
  .pf-work { row-gap: var(--space-8); }
  .pf-work > * { margin-top: 0; }
  .pf-work > *:nth-child(even) { --col-m: 2 / -1; }
}

/* ---------- Case study ---------- */
.pf-casehead { padding: var(--space-8) 0 var(--space-9); row-gap: var(--space-7); }
.pf-casehead__title { --col: 1 / 11; font-size: 112px; line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; font-stretch: 112%; }
.pf-casehead__cover { --col: 1 / -1; }
.pf-meta { --col: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--grid-gutter); border-top: var(--stroke-hairline) solid var(--ink); }
.pf-meta > div { padding: var(--space-3) 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pf-meta dt { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.pf-meta dd { font-size: 15px; line-height: 23px; }
.pf-case { padding: var(--space-9) 0; border-top: var(--stroke-hairline) solid var(--line-soft); row-gap: var(--space-7); }
.pf-case__label { --col: 1 / 4; display: flex; flex-direction: column; gap: var(--space-3); }
.pf-case__label h3 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -0.015em; }
.pf-case__body { --col: 5 / 12; display: flex; flex-direction: column; gap: var(--space-5); }
.pf-case__body p { max-width: var(--measure); }
.pf-case__body .lead { font-size: 21px; line-height: 32px; }
.pf-case__quote { font-family: var(--font-display); font-stretch: 62%; font-weight: 300; font-size: 34px; line-height: 38px; letter-spacing: -0.01em; max-width: 30ch; }
.pf-case__media { --col: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-7); }
.pf-case__media > * { grid-column: var(--m, 1 / -1); }
.pf-caption { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.pf-tools { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: 15px; line-height: 23px; }
.pf-nextprev { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-7) 0; border-top: var(--stroke-rule) solid var(--ink); }
.pf-nextprev a { display: flex; flex-direction: column; gap: var(--space-2); text-decoration: none; color: var(--ink); }
.pf-nextprev a strong { font-size: 40px; line-height: 44px; font-weight: 700; letter-spacing: -0.025em; }
.pf-nextprev a:last-child { text-align: right; }
.pf-nextprev a:hover strong { color: var(--accent-text); }
@media (max-width: 1023px) {
  .pf-case__label { --col-t: 1 / -1; }
  .pf-case__body { --col-t: 1 / 8; }
  .pf-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .pf-casehead__title { font-size: 64px; line-height: 0.94; }
  .pf-case { padding: var(--space-8) 0; }
  .pf-case__media > * { grid-column: 1 / -1; }
  .pf-nextprev a strong { font-size: 28px; line-height: 34px; }
}

/* ---------- Photography gallery ---------- */
.pf-photos { columns: 3; column-gap: var(--grid-gutter); }
.pf-photos > figure { break-inside: avoid; margin: 0 0 var(--space-7); }
.pf-photos--two { columns: 2; }
.pf-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pf-filter { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-4); border: var(--stroke-hairline) solid var(--ink); border-radius: var(--radius-pill); background: transparent; color: var(--ink); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.04em; cursor: pointer; }
.pf-filter:hover, .pf-filter.is-hover { background: var(--accent-tint); }
.pf-filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (max-width: 767px) { .pf-photos { columns: 2; column-gap: var(--space-4); } .pf-photos > figure { margin-bottom: var(--space-5); } }

/* ---------- About ---------- */
.pf-about { padding: var(--space-9) 0; row-gap: var(--space-7); }
.pf-about__portrait { --col: 1 / 5; }
.pf-about__text { --col: 6 / 12; display: flex; flex-direction: column; gap: var(--space-7); }
.pf-list { display: flex; flex-direction: column; }
.pf-list li { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--stroke-hairline) solid var(--line-soft); font-size: 15px; line-height: 23px; }
.pf-list li > :first-child { font-family: var(--font-mono); font-size: 13px; line-height: 23px; color: var(--ink-muted); }
.pf-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--grid-gutter); row-gap: var(--space-2); font-size: 15px; line-height: 23px; }
@media (max-width: 1023px) { .pf-about__portrait { --col-t: 1 / 4; } .pf-about__text { --col-t: 4 / -1; } }
@media (max-width: 767px) { .pf-about__portrait { --col-m: 1 / 4; } .pf-about__text { --col-m: 1 / -1; } .pf-list li { grid-template-columns: 6rem 1fr; } }

/* ---------- Contact ---------- */
.pf-contact { padding: var(--space-10) 0 var(--space-9); row-gap: var(--space-7); }
.pf-contact__head { --col: 1 / 11; font-size: 112px; line-height: 0.9; font-weight: 700; letter-spacing: -0.04em; font-stretch: 112%; }
.pf-contact__lead { --col: 1 / 6; font-size: 21px; line-height: 32px; }
.pf-contact__links { --col: 7 / 13; display: flex; flex-direction: column; border-top: var(--stroke-rule) solid var(--ink); }
.pf-contact__links a { display: grid; grid-template-columns: 8rem 1fr auto; align-items: baseline; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: var(--stroke-hairline) solid var(--line-soft); text-decoration: none; color: var(--ink); font-size: 21px; line-height: 32px; }
.pf-contact__links a span { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.pf-contact__links a::after { content: "\2197\FE0E"; transition: transform 160ms ease, color 160ms ease; }
.pf-contact__links a:hover { color: var(--accent-text); }
.pf-contact__links a:hover::after { transform: translate(3px, -3px); }
@media (max-width: 1023px) { .pf-contact__lead { --col-t: 1 / -1; } .pf-contact__links { --col-t: 1 / -1; } }
@media (max-width: 767px) { .pf-contact__head { font-size: 64px; line-height: 0.94; } .pf-contact__links a { grid-template-columns: 1fr auto; } .pf-contact__links a span { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.pf-footer { display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-5) 0 var(--space-6); border-top: var(--stroke-hairline) solid var(--ink); font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }

@media (prefers-reduced-motion: reduce) {
  .pf *, .pf *::before, .pf *::after { transition: none !important; }
}