@font-face { font-family: Vonca; src: url(/fonts/vonca-light.woff2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: Vonca; src: url(/fonts/vonca-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Vonca; src: url(/fonts/vonca-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --black: #000;
  --white: #fff;
  --grey: #8a8a8a;
  --gutter: clamp(20px, 3vw, 40px);
  --ease: cubic-bezier(.2,.7,.1,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--black);
  font-family: Vonca, "Helvetica Neue", Arial, sans-serif; font-weight: 300;
  font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--black); color: var(--white); }

/* ---------- Header: logo left, menu right, fixed to the top ---------- */
:root { --header-h: 72px; }
@media (min-width: 900px) { :root { --header-h: 88px; } }
html { scroll-padding-top: var(--header-h); }

.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 var(--gutter); background: var(--white);
}
/* Logo lockup. Landing screen: PHOTOGRAPHY centred under the name. Header: PHOTOGRAPHY beside the name.
   The two swap (cross-fade) as the logo moves up on scroll. */
.brand { display: flex; align-items: center; gap: 1.1em; flex: 0 0 auto; font-size: 9px; }
.mark {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: .62em;
  width: 170px;
}
.mark img { width: 100%; height: auto; }
.tag {
  display: block; font-size: 1em; line-height: 1; letter-spacing: .45em; text-transform: uppercase;
  color: #5f5f5f; font-weight: 400; white-space: nowrap; padding-left: .45em; /* balances trailing letter-space */
}
.tag-under { position: absolute; top: calc(100% + .7em); left: 50%; transform: translateX(-50%); opacity: 0; }
.tag-inline { padding-left: 0; padding-top: .15em; font-size: 10px; letter-spacing: .32em; color: #4a4a4a; }
@media (min-width: 700px) {
  .brand { font-size: clamp(8px, .95vw, 10px); }
  .mark { width: clamp(170px, 22vw, 230px); }
  .tag-inline { font-size: 11px; }
}

/* Menu: a row of links on desktop, a burger with a full-screen list on phones */
.menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(16px, 3vw, 36px); }
.menu a {
  display: inline-block; font-size: 13px; line-height: 1; letter-spacing: .16em; text-transform: uppercase;
  padding: 6px 0; transition: opacity .3s;
}
.menu a:hover { opacity: .5; }
.menu a[aria-current="page"] { font-weight: 700; }
.menu a[aria-current="page"]:hover { opacity: 1; }

.burger {
  display: none; position: relative; width: 40px; height: 40px; margin-right: -9px; padding: 0;
  border: 0; background: none; color: inherit;
}
.burger span {
  position: absolute; left: 9px; right: 9px; height: 1.5px; background: currentColor;
  transition: transform .35s var(--ease), top .35s var(--ease);
}
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 23px; }
.menu-open .burger span:first-child { top: 19.5px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 19.5px; transform: rotate(-45deg); }

@media (max-width: 699px) {
  .burger { display: block; }
  .menu {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: -1;
    flex-direction: column; align-items: flex-start; gap: 6px;
    padding: 28px var(--gutter); background: var(--white);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .menu-open .menu { opacity: 1; visibility: visible; transform: none; }
  .menu a { font-size: 30px; letter-spacing: .06em; padding: 6px 0; }
}

/* Home: the header starts invisible apart from the logo, which sits large in the middle of the
   white intro screen. Scrolling carries the logo up into place; the menu fades in once it lands. */
.js .home .site-header { background: transparent; transition: background .4s var(--ease); }
.js .home .site-header nav { opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.js .home .site-header.docked { background: var(--white); }
.js .home .site-header.docked nav { opacity: 1; visibility: visible; }
.landing { display: none; }
.js .landing { display: block; height: 100vh; height: 100svh; }

/* ---------- Layout ---------- */
.layout { min-height: 100vh; display: flex; flex-direction: column; padding-top: var(--header-h); }
.js .home .layout { padding-top: var(--header-h); min-height: 0; }
.page { flex: 1; padding: clamp(12px, 2vw, 24px) var(--gutter) var(--gutter); }
.page:has(.prose) { padding-top: clamp(40px, 8vw, 96px); }

/* Page title kept for screen readers and search engines only — the menu shows where you are */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Footer ---------- */
.footer { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 28px var(--gutter); font-size: 13px; }
.footer a:hover { opacity: .5; }
.footer span { color: var(--grey); }

/* ---------- Gallery ---------- */
.gallery { columns: 1; column-gap: 14px; }
@media (min-width: 600px) { .gallery { columns: 2; } }
@media (min-width: 1100px) { .gallery { columns: 3; } }
.tile {
  display: block; width: 100%; margin: 0 0 14px; padding: 0; border: 0; background: #eee;
  break-inside: avoid; overflow: hidden;
}
.tile img, .tile .ph {
  width: 100%; filter: grayscale(1); transition: filter .6s var(--ease);
}
.tile:hover img, .tile:hover .ph, .tile:focus-visible img, .tile:focus-visible .ph { filter: grayscale(0); }
.tile:focus-visible { outline: 1px solid var(--black); outline-offset: 3px; }
@media (hover: none) { .tile img, .tile .ph { filter: grayscale(1); } }

/* ---------- Viewer (opens in colour, swipe / arrow left-right) ---------- */
.viewer {
  position: fixed; inset: 0; z-index: 10; background: var(--white);
  display: grid; grid-template-rows: auto 1fr auto;
  opacity: 0; visibility: hidden; transition: opacity .4s var(--ease), visibility .4s;
}
.viewer.open { opacity: 1; visibility: visible; }
.viewer-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px var(--gutter); font-size: 13px; }
.viewer button { font: inherit; color: inherit; background: none; border: 0; padding: 6px 0; }
.viewer button:hover { opacity: .5; }
.track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; min-height: 0;
}
.track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; scroll-snap-align: center; display: grid; place-items: center;
  padding: 0 var(--gutter); min-height: 0;
}
.slide img, .slide .ph { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; }
.slide .ph { height: calc(100vh - 160px); }

/* ---------- Text pages ---------- */
.prose { max-width: 34em; }
.prose p { margin: 0 0 1.1em; }
.link { border-bottom: 1px solid currentColor; }
.link:hover { opacity: .5; }
.prose .intro { font-size: 22px; line-height: 1.35; margin-bottom: .9em; }
.footer .copyright { margin-left: auto; color: var(--grey); }
@media (max-width: 899px) { .footer .copyright { margin-left: 0; width: 100%; } }
.footer .c { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 1.05em; }

/* ---------- Smiley cursor (option B, "Fine") — centred on the face ---------- */
html, body, a, button, .tile, label { cursor: url("/assets/cursors/smiley.svg") 16 16, auto; }