@font-face {
  font-family: "W-Droge-Itinerary";
  src: url("/fonts/W-Droge-Itinerary.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-text: #000;
  --color-muted: #000;
  --color-border: #000;
  --color-placeholder: #e0e0e0;
  --color-bg: #fff;
  --gutter: 20px;
  --header-h: 51px;
  /* Side margin for the projects grid — shrinks with the window (from
     180px on wide screens down to 40px), never below 40px. */
  --side-margin: clamp(40px, 12vw, 180px);
  --font-body: Verdana, Geneva, sans-serif;
  --font-display: "W-Droge-Itinerary", sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scrollbar-width: none; /* Firefox */
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.4;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: var(--color-bg);
}

.site-header-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--gutter);
  margin: 0 var(--gutter);
  padding-top: 1rem;
}

.logo {
  font-family: var(--font-display);
  font-size: 24px;
}

/* Header nav — "projet" link + "about" toggle, side by side on the right */

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--gutter);
}

.nav-link,
.about-toggle-label {
  font-family: var(--font-display);
  font-size: 24px;
  cursor: pointer;
}

/* About toggle (checkbox hack — no JavaScript) */

.about-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.about-toggle-label {
  border: none;
  padding: 0;
}

/* The label now lives inside .site-nav (not directly after the input), so
   the focus outline uses the general sibling combinator to reach it. */
.about-toggle-input:focus-visible ~ .site-nav .about-toggle-label {
  outline: 2px solid var(--color-text);
  outline-offset: 2px;
}

/* Panel: animates to its natural height via a 0fr -> 1fr grid track,
   no fixed height guess and no JavaScript required. */

.about-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s cubic-bezier(0.83, 0, 0.17, 1);
}

.about-panel-inner {
  overflow: hidden;
  min-height: 0;
}

/* Two columns inside the about panel: bio on the left, CV on the right.
   Collapses to a single stacked column on small screens. */
.about-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  padding: 1.5rem 0 1rem;
}

/* Bio and CV share this one rule, so both columns have the exact same
   size (12px, inherited), line spacing (1.4) and left alignment. Each line
   is its own <p>, so this bottom margin adds extra space at every line
   break (a naturally-wrapped sentence keeps the tight 1.4 leading). */
.about-panel p {
  margin: 0 0 0.6em;
  max-width: 60ch;
}

.about-panel p:last-child {
  margin-bottom: 0;
}

@media (max-width: 800px) {
  .about-columns {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.about-toggle-input:checked ~ .about-panel {
  grid-template-rows: 1fr;
}

/* Main layout */

.home {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: var(--gutter);
  padding: 2.5rem var(--gutter) 0;
}

.tag {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #997349;
  white-space: nowrap;
  cursor: pointer;
}

/* Tag filter (checkbox hack — no JavaScript). Clicking a TAG label toggles
   its shared hidden checkbox; the per-tag opacity rules that respond to it
   are generated in projects.html, since the set of tags is only known at
   build time. */
.filter-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tag {
  transition: opacity 0.2s;
}

.salut {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--color-text);
}

/* Images inside the project pages' media column. max-width fills the
   column (as before) while max-height keeps any image — portraits
   included — from exceeding the visible window height. width/height auto
   preserve each image's ratio: landscapes are limited by the width,
   portraits by the height. The subtracted 5rem matches the media column's
   own top+bottom padding. */
.thumb {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - var(--header-h) - 5rem);
  background-color: var(--color-placeholder);
}

/* Home gallery — « organic flow » (inspired by maxlamb.org but genuinely
   responsive). Images flow left-to-right and wrap like words. Each image's
   width is a fraction of the viewport (vw units) set by a size class
   (s / m / l / xl), so everything scales with the screen; height: auto
   keeps each image's own ratio, max-width: 100% guarantees no overflow. */

/* The home gallery just gets a light, even gutter on both sides (like the
   individual project pages) — no big side margins. */
.flow {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.4rem;
  padding: 2.5rem var(--gutter);
}

.flow img {
  display: block;
  height: auto;
  max-width: 100%;
}

/* Widths on large screens */
.flow .s  { width: 15vw; }
.flow .m  { width: 24vw; }
.flow .l  { width: 34vw; }
.flow .xl { width: 46vw; }

/* Medium screens / tablet — a bit larger */
@media (max-width: 900px) {
  .flow .s  { width: 26vw; }
  .flow .m  { width: 40vw; }
  .flow .l  { width: 56vw; }
  .flow .xl { width: 72vw; }
}

/* Mobile — images larger, 1 to 2 per row, never overflowing */
@media (max-width: 600px) {
  .flow {
    gap: 1rem;
  }
  .flow .s  { width: 44vw; }
  .flow .m  { width: 62vw; }
  .flow .l  { width: 84vw; }
  .flow .xl { width: 96vw; }
}

/* Projects listing (/projects/) — a 4-column image grid, with the tag
   filters fixed at the bottom-left of the screen (in the left margin).
   The grid content sits inside symmetric side margins (--side-margin) on
   desktop; the empty tag column follows it in flow (see the reordered
   markup) so on mobile the tags land at the very bottom of the page. */

.projects-view {
  grid-template-columns: 1fr;
}

@media (min-width: 801px) {
  .projects-view {
    padding-left: var(--side-margin);
    padding-right: var(--side-margin);
  }
}

.tag-column {
  min-width: 0;
}

.tag-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

/* 4 columns on desktop, stepping down to 3, 2, then 1 as the screen
   narrows. All images share the same 6:4 ratio (cropped, not distorted).
   gap is row-gap column-gap: the space between rows is a bit larger than
   the space between columns. */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem 2rem;
  min-width: 0;
}

/* 3 columns up to ~1500px (covers 13" laptops); 4 only on larger screens. */
@media (max-width: 1499px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1149px) {
  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 749px) {
  .projects-grid {
    grid-template-columns: 1fr;
  }
}

.grid-item {
  position: relative;
  grid-column: span 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: opacity 0.2s;
}

.grid-item img {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 4;
  object-fit: cover;
  background-color: var(--color-placeholder);
}

/* The title is hidden and fades in, centred over its image, only when the
   item is pointed at — on every screen size. On a mouse that's :hover; on a
   touch screen it's :active (while the finger presses the image) since there
   is no true hover without a pointer. :focus-within covers keyboard users. */
.grid-item-title {
  font-family: var(--font-display);
  font-size: 24px;
  overflow-wrap: break-word;
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
  background-color: rgba(255, 255, 255, 0.82);
  opacity: 0;
  transition: opacity 0.2s;
}

.grid-item:hover .grid-item-title,
.grid-item:active .grid-item-title,
.grid-item:focus-within .grid-item-title {
  opacity: 1;
}

/* Desktop: the tags are pinned to the bottom-left of the viewport, always
   visible while scrolling — sitting in the left side margin. The hidden
   filter checkboxes stay in flow inside .home, so the :has() filter and
   the label-for links keep working. */
@media (min-width: 801px) {
  .tag-nav {
    position: fixed;
    left: var(--gutter);
    bottom: 1.25rem;
  }
}

/* Mobile: everything is a single column and the tag column follows the
   grid in the markup, so the tags naturally land at the very bottom of the
   page; they lay out in a wrapping row there. */
@media (max-width: 800px) {
  .tag-column {
    /* small gap below the tags so they aren't flush against the page bottom */
    margin-bottom: 1.5rem;
  }
  .tag-nav {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
  }
}

/* Project page */

.project {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
  gap: var(--gutter);
  padding: 2.5rem var(--gutter);
}

.project-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  /* Negative top margin cancels the line-height leading above the capital
     letters, so the very top of the title's caps lines up with the top of
     the image in the right column (both columns start at the same y). */
  margin: -7.8px 0 0.5rem;
  overflow-wrap: break-word;
  min-width: 0;
  max-width: 100%;
}

/* Same look as the tags: small size + brown colour. */
.project-meta {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #997349;
  margin: 0 0 2rem;
}

/* min-width: 0 keeps it from growing past its grid column when it holds
   an unbreakable run of text (a long word, a URL) — same fix as elsewhere. */
.project-info {
  min-width: 0;
}

/* Same size as the tags (12px) but kept black (unlike the brown meta). */
.project-description p {
  font-size: 12px;
  margin: 0 0 1.25rem;
  max-width: 45ch;
}

.project-media {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.project-figure {
  margin: 0;
}

.project-figure figcaption {
  font-size: 12px;
  color: var(--color-muted);
  margin-top: 0.35rem;
}

/* Footer — stays in the normal document flow, so the email only appears
   once the page is scrolled all the way to the bottom (home page only). */
.site-footer {
  padding: 1.25rem var(--gutter);
  color: var(--color-muted);
}

/* Responsive: the projects layout and the individual project page both
   collapse to a single column on small screens. */
@media (max-width: 800px) {
  .home,
  .project {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 801px) {
  /* Project page: the image column scrolls independently of the text
     column, which stays put. Pure CSS — position: sticky + its own
     overflow-y. The subtracted 5rem accounts for .project's top AND
     bottom padding (2.5rem each). */
  .project-media {
    position: sticky;
    top: var(--header-h);
    max-height: calc(100vh - var(--header-h) - 5rem);
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
  }

  .project-media::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Edge */
  }
}