/* Site-level additions on top of components.css: page chrome, mobile menu,
   states that only exist on the live site. Values come from tokens.css. */

html { background: var(--paper); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + var(--space-5)); }
body { margin: 0; min-height: 100vh; }
img { max-width: 100%; display: block; }

.skip { position: absolute; left: -9999px; top: var(--space-2); z-index: 100; padding: var(--space-2) var(--space-3); background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 13px; }
.skip:focus { left: var(--space-2); }

/* Sticky header */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); }

/* Mobile menu overlay */
.site-menu { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; z-index: 19; display: none; overflow-y: auto; }
.site-menu.is-open { display: flex; }
@media (min-width: 768px) { .site-menu, .site-menu.is-open { display: none; } }
body:has(.site-menu.is-open) .site-header { background: var(--paper-raised); }

/* Project cards whose case study is not written yet */
.pf-card--soon { cursor: default; }
.pf-card--soon:hover .pf-crop { color: var(--ink-muted); }
.pf-card--soon:hover .pf-card__index { color: var(--ink-muted); }
.pf-card--soon:hover .pf-card__title { text-decoration-color: transparent; }
.pf-card__soon { grid-column: 2 / -1; font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--ink-muted); }

/* Page title block (About, Photography, legal pages) */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; padding: var(--space-8) 0 var(--space-4); border-bottom: var(--stroke-rule) solid var(--ink); margin-bottom: var(--space-8); }
.page-head h1 { font-size: 56px; line-height: 58px; font-weight: 800; font-stretch: 112%; letter-spacing: -0.03em; margin-top: var(--space-3); }
@media (max-width: 767px) { .page-head h1 { font-size: 40px; line-height: 44px; } }

/* Footer extras */
.pf-footer nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
.pf-footer a { color: var(--ink-muted); text-decoration: none; }
.pf-footer a:hover { color: var(--accent-text); }
.theme-toggle { background: none; border: 0; padding: 0; color: var(--ink-muted); font: inherit; cursor: pointer; }
.theme-toggle:hover { color: var(--accent-text); }

/* Legal pages */
.legal { padding-bottom: var(--space-9); }
.legal h2 { font-size: 28px; line-height: 34px; font-weight: 700; font-stretch: 106%; margin: var(--space-7) 0 var(--space-3); }
.legal p { max-width: var(--measure); margin-bottom: var(--space-4); }

figure[hidden] { display: none; }
.pf-case__label h2 { font-stretch: 106%; }

/* ---------- Header: nav + language switch + menu button ---------- */
.site-header__right { display: flex; align-items: center; gap: var(--space-6); }
.lang-switch { display: inline-flex; align-items: center; gap: var(--space-1); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; color: var(--ink-muted); }
.lang-switch a, .lang-switch span[aria-current] { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; text-decoration: none; }
.lang-switch a { color: var(--ink-muted); }
.lang-switch a:hover { color: var(--accent-text); }
.lang-switch span[aria-current] { color: var(--ink); border-bottom: var(--stroke-rule) solid var(--accent-text); }
@media (max-width: 767px) {
  .site-header__right { gap: var(--space-4); }
  .lang-switch a, .lang-switch span[aria-current] { min-width: 28px; min-height: 44px; }
}

/* ---------- Homepage hero with introduction ---------- */
.site-hero { padding-top: var(--space-7); row-gap: var(--space-6); }
.site-hero__kicker { --col: 1 / -1; }
.site-hero .pf-hero__headline { --col: 1 / -1; }
.site-hero .pf-hero__intro { --col: 1 / 7; align-self: start; gap: var(--space-4); }
.site-hero .pf-hero__intro p { max-width: 34ch; }
.site-hero .pf-hero__intro .site-hero__more { font-size: 17px; line-height: 27px; color: var(--ink-muted); max-width: 46ch; }
.site-hero__actions { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-3); }
.site-hero .pf-hero__visual { --col: 9 / 13; }
@media (max-width: 1023px) {
  .site-hero .pf-hero__intro { --col-t: 1 / 6; }
  .site-hero .pf-hero__visual { --col-t: 6 / 9; }
}
@media (max-width: 767px) {
  .site-hero .pf-hero__intro { --col-m: 1 / -1; order: 2; }
  .site-hero .pf-hero__visual { --col-m: 2 / 5; order: 3; }
}

/* ---------- Homepage profile (skills & background) ---------- */
.site-profile { margin-top: var(--space-10); padding-top: var(--space-5); border-top: var(--stroke-rule) solid var(--ink); row-gap: var(--space-7); }
.site-profile__head { --col: 1 / 5; display: flex; flex-direction: column; gap: var(--space-3); }
.site-profile__head h2 { font-size: 40px; line-height: 44px; font-weight: 800; font-stretch: 112%; letter-spacing: -0.025em; }
.site-profile__col { --col: span 4; display: flex; flex-direction: column; gap: var(--space-4); }
.site-profile__links { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; margin-top: var(--space-3); }
@media (max-width: 1023px) { .site-profile__col { --col-t: span 4; } }
@media (max-width: 767px) { .site-profile__col { --col-m: 1 / -1; } .site-profile__head h2 { font-size: 28px; line-height: 34px; } }
/* "Portfolio." scales with the viewport so it always fits on one line */
.site-hero .pf-hero__headline { font-size: clamp(48px, 13vw, 180px); line-height: 0.86; }

/* Phone screenshots (UI design case studies) */
.pf-ph--phone { --ratio: 9 / 19.5; }

/* Two-column fact lists inside case-study text (variants, test results) */
.pf-case__body .pf-list li { grid-template-columns: 14rem 1fr; }
@media (max-width: 767px) { .pf-case__body .pf-list li { grid-template-columns: 1fr; gap: var(--space-1); } }
.pf-meta:has(> div:nth-child(5)) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1023px) { .pf-meta:has(> div:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Client blocks: image with its own short text (agency project) */
.site-client { margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.site-client h3 { font-size: 20px; line-height: 26px; font-weight: 700; font-stretch: 106%; }
.site-client p { font-size: 15px; line-height: 23px; color: var(--ink-muted); max-width: 44ch; }

/* "Portfolio": close the optical gap between t and f */
.kern-tf { letter-spacing: -0.07em; }

/* Selected work: tighter rhythm between rows */
.pf-work { row-gap: var(--space-8); }

/* ---------- Uniform project pages ---------- */
/* Head: title + details on the left, a smaller image on the right */
.site-casehead { padding: var(--space-8) 0 var(--space-9); row-gap: var(--space-7); align-items: start; }
.site-casehead__text { --col: 1 / 7; display: flex; flex-direction: column; gap: var(--space-5); }
.site-casehead__title { font-size: clamp(44px, 5vw, 80px); line-height: 0.92; font-weight: 800; font-stretch: 112%; letter-spacing: -0.035em; }
.site-casehead .pf-meta,
.site-casehead .pf-meta:has(> div:nth-child(5)) { grid-template-columns: 1fr; margin-top: var(--space-3); }
.site-casehead .pf-meta > div { display: grid; grid-template-columns: 9rem 1fr; gap: var(--space-4); align-items: baseline; padding: var(--space-3) 0; border-bottom: var(--stroke-hairline) solid var(--line-soft); }
.site-casehead__media { --col: 8 / 13; display: flex; flex-direction: column; gap: var(--space-6); }
/* Sections: label | text | small image at the side */
.site-sect .pf-case__label { --col: 1 / 4; }
.site-sect .site-sect__body { --col: 4 / 9; }
.site-sect--wide .site-sect__body { --col: 4 / 11; }
.site-sect__media { --col: 9 / 13; display: flex; flex-direction: column; gap: var(--space-6); }
.site-sect__media figure, .site-casehead__media figure { margin: 0; }
.site-gallery { padding-top: 0; border-top: 0; }
@media (max-width: 1023px) {
  .site-casehead__text { --col-t: 1 / -1; }
  .site-casehead__media { --col-t: 1 / 7; }
  .site-sect .pf-case__label { --col-t: 1 / -1; }
  .site-sect .site-sect__body, .site-sect--wide .site-sect__body { --col-t: 1 / 6; }
  .site-sect__media { --col-t: 6 / 9; }
}
@media (max-width: 767px) {
  .site-casehead__text, .site-casehead__media, .site-sect .pf-case__label,
  .site-sect .site-sect__body, .site-sect--wide .site-sect__body, .site-sect__media { --col-m: 1 / -1; }
  .site-casehead .pf-meta > div { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---------- Project pages, revision: full-width head, tighter spacing ---------- */
.site-casehead { padding: var(--space-8) 0 var(--space-6); }
.site-casehead__text { --col: 1 / -1; }
.site-casehead .pf-meta,
.site-casehead .pf-meta:has(> div:nth-child(5)) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-top: var(--space-3); }
.site-casehead .pf-meta > div { display: flex; flex-direction: column; gap: var(--space-1); border-bottom: 0; padding: var(--space-3) var(--space-4) var(--space-3) 0; }
.site-sect { padding: var(--space-7) 0; }
/* Two images side by side below the head (agency project) */
.site-pair { row-gap: var(--space-5); padding-bottom: var(--space-7); }
.site-pair__item:first-child { --col: 1 / 7; }
.site-pair__item:last-child { --col: 7 / 13; }
.site-pair figure { margin: 0; }
@media (max-width: 1023px) {
  .site-pair__item:first-child { --col-t: 1 / 5; }
  .site-pair__item:last-child { --col-t: 5 / 9; }
}
@media (max-width: 767px) {
  .site-pair__item:first-child, .site-pair__item:last-child { --col-m: 1 / -1; }
  .site-casehead .pf-meta > div { padding-right: 0; }
}

/* Project pages: intro paragraphs at body size (same as the following text) */
.site-sect .pf-case__body .lead { font-size: 17px; line-height: 27px; }

/* Café: the two variants side by side, text above its image */
.site-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-3); }
.site-variant { display: flex; flex-direction: column; gap: var(--space-3); }
.site-variant h3 { font-size: 20px; line-height: 26px; font-weight: 700; font-stretch: 106%; }
.site-variant p { max-width: none; }
.site-variant figure { margin: var(--space-2) 0 0; }
@media (max-width: 767px) { .site-variants { grid-template-columns: 1fr; } }

/* Social media: the two images a little smaller, still side by side */
.site-pair__item:first-child { --col: 1 / 6; }
.site-pair__item:last-child { --col: 6 / 11; }
.site-variant figure { margin-top: auto; padding-top: var(--space-2); }
/* Social media: center the pair on the grid */
.site-pair__item:first-child { --col: 2 / 7; }
.site-pair__item:last-child { --col: 7 / 12; }

/* Text and side image sit level: both vertically centred to each other */
.site-sect { align-items: center; }
.site-sect .pf-case__label { align-self: start; }

/* Hero portrait: closer to the intro text, clear of the right edge */
.site-hero .pf-hero__visual { --col: 8 / 12; align-self: start; }
/* Hero intro uses its full column, so the text reaches closer to the portrait */
.site-hero .pf-hero__intro p { max-width: 52ch; }
.site-hero .pf-hero__intro .site-hero__more { max-width: 62ch; }

/* Uniform text layout on all project pages:
   every section's text uses the same column (4–9), with or without an image,
   and highlighted sentences use body size (bold) instead of large type. */
.site-sect--wide .site-sect__body { --col: 4 / 9; }
.site-sect .pf-case__quote { font-family: var(--font-display); font-stretch: 100%; font-size: 17px; line-height: 27px; font-weight: 600; letter-spacing: 0; max-width: var(--measure); }
/* Café variants need the extra room for two images side by side */
.site-sect--wide .site-sect__body:has(.site-variants) { --col: 4 / 13; }
@media (max-width: 1023px) {
  .site-sect--wide .site-sect__body, .site-sect--wide .site-sect__body:has(.site-variants) { --col-t: 1 / -1; }
}

/* Photography: themed rows; every image in a row has the same height and the row fills the width */
.site-gallery__group { margin: var(--space-7) 0 var(--space-4); }
.site-gallery__group:first-child { margin-top: 0; }
.site-photo-row { display: flex; gap: var(--grid-gutter); margin-bottom: var(--space-5); }
.site-photo-row figure { flex-basis: 0; min-width: 0; margin: 0; }
@media (max-width: 767px) {
  .site-photo-row { flex-wrap: wrap; gap: var(--space-4); }
  .site-photo-row figure { flex: 1 1 calc(50% - var(--space-4)); }
}

/* Photography gallery: three columns again (previous size), no captions, even gaps */
.site-gallery .pf-photos > figure { margin: 0 0 var(--grid-gutter); }
@media (max-width: 767px) { .site-gallery .pf-photos > figure { margin-bottom: var(--space-4); } }

/* CV download in the contact block (sits below the contact links) */
.pf-contact__cv { --col: 7 / 13; display: flex; align-items: center; gap: var(--space-4); margin-top: calc(-1 * var(--space-4)); }
@media (max-width: 1023px) { .pf-contact__cv { --col-t: 1 / -1; } }
@media (max-width: 767px) { .pf-contact__cv { --col-m: 1 / -1; } }

/* Phones: section label wraps below the heading instead of overflowing */
@media (max-width: 767px) { .pf-section-head { flex-wrap: wrap; row-gap: var(--space-2); } }

/* Very small phones (e.g. iPhone SE 1st gen, 320px): tighter header */
@media (max-width: 374px) {
  .pf-wordmark { font-size: 16px; }
  .site-header__right { gap: var(--space-2); }
  .lang-switch a, .lang-switch span[aria-current] { min-width: 22px; }
  .pf-menu-btn { gap: var(--space-1); letter-spacing: 0.04em; }
  .pf-menu-btn__bars { width: 16px; }
}
/* Large display headings scale with very narrow screens so long words never overflow */
@media (max-width: 767px) { .pf-contact__head { font-size: clamp(40px, 15vw, 64px); } }
/* Phones: "all work" and "next project" stack instead of squeezing side by side */
@media (max-width: 767px) { .pf-nextprev { flex-direction: column; gap: var(--space-5); } .pf-nextprev a:last-child { align-self: flex-end; } }

/* Arrows always as text glyphs, never as colour emoji (iOS) */
.pf { font-variant-emoji: text; }