/* Martin Hofseth — portfolio
   Layout and scaling follow the original Cargo site; typography and details
   are tuned for a clear hierarchy: name → project title → image → description → tags. */

/* Fonts: one family (Inter) throughout. The Cargo site used Neue Haas Grotesk and
   Diatype, which are licensed through Cargo. If you buy licenses, add @font-face
   rules and put them first in these stacks. */
:root {
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-head: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ink: #111;
  --muted: rgba(0, 0, 0, 0.72);   /* descriptions, secondary text */
  --faint: rgba(0, 0, 0, 0.45);   /* years, labels */
  --line: rgba(0, 0, 0, 0.14);
  --placeholder: #f2f2f2;
  --p: 1; /* spacing multiplier: shrinks padding/gaps to 60% on phones, like Cargo */
}

/* Scaling (same as the Cargo site):
   desktop: 1rem = 1.44% of window height, capped at 1.53% of window width
   phone (≤768px wide): 1rem = 2.44% of width, capped at 1.45% of height */
html { font-size: min(1.44vh, 1.53vw); scroll-behavior: smooth; }
@media (max-width: 768px) {
  html { font-size: min(2.44vw, 1.45svh); }
  :root { --p: 0.6; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 2rem;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:active, .zoomable:active { opacity: 0.7; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
img { display: block; width: 100%; height: auto; background: var(--placeholder); }
p { margin: 0; }

/* ---------- Type scale ---------- */
.logo {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 9.4rem;
  line-height: 1;
  letter-spacing: -0.045em;
  color: #000;
}
h1 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #000;
}
h1 a { text-decoration: underline; text-underline-offset: 0.1em; text-decoration-thickness: 0.05em; }
h1 a:hover { text-decoration-thickness: 0.09em; }
h2 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 3.8rem;
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #000;
}

/* project title, year, description, tags */
.heading {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #000;
  margin-bottom: 0.55em;
}
.year { font-weight: 400; color: var(--faint); }
.desc {
  display: block;
  font-size: 1.8rem;
  line-height: 1.3;
  color: var(--muted);
  max-width: 30ch;
}
.tags { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tag {
  display: inline-block;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #111;
  border: 1px solid #111;
  border-radius: 999rem;
  padding: 0.5rem 0.95rem;
}
@media (max-width: 768px) {
  h2 { font-size: 3.5rem; }
  .heading { font-size: 3rem; }
  .desc { font-size: 2.1rem; max-width: none; }
  .tag { font-size: 1.6rem; }
}

.pill-outline {
  display: inline-block;
  font-size: 1.5rem;
  line-height: 1;
  color: #111;
  border: 1px solid #111;
  border-radius: 999rem;
  padding: 0.6rem 1.2rem;
}

.arrow { display: inline-block; margin-left: 0.15em; transition: transform 0.2s ease; }

/* ---------- Grid (12 columns) ---------- */
/* --gap = desktop gutter, --mgap = gap when stacked on phones */
.cols {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: calc(var(--gap, 3rem) * var(--p));
  align-items: start;
}
.s1 { grid-column: span 1; } .s2 { grid-column: span 2; } .s3 { grid-column: span 3; }
.s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s10 { grid-column: span 10; }
.s12 { grid-column: span 12; }

@media (max-width: 768px) {
  .cols:not(.no-stack) { grid-template-columns: minmax(0, 1fr); row-gap: calc(var(--mgap, var(--gap, 3rem)) * var(--p)); }
  .cols:not(.no-stack) > * { grid-column: 1 / -1; }
  .cols:not(.no-stack) > .spacer { display: none; }
}

/* ---------- Media ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
  gap: 1rem;
  align-items: var(--valign, start);
}
.gallery.one { --columns: 1; }
@media (max-width: 768px) { .gallery.m1 { --columns: 1; gap: calc(4rem * var(--p)); } }

.video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video.wide { aspect-ratio: 2 / 1; }
.video.r43 { aspect-ratio: 4 / 3; }

.embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); }

/* video still on the home page */
.poster { position: relative; display: block; }
.poster img { aspect-ratio: 2.11 / 1; object-fit: cover; }
.play {
  position: absolute;
  left: 1.6rem;
  bottom: 1.6rem;
  font-size: 1.3rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 999rem;
  padding: 0.7rem 1.1rem;
}
@media (max-width: 768px) { .play { font-size: 1.6rem; } }

.zoomable { cursor: zoom-in; }

/* hover feedback on anything that opens a project */
.project a img, .poster img { transition: opacity 0.25s ease; }
.project a:hover img, .poster:hover img { opacity: 0.88; }
.project-link:hover .heading { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
a:hover > .arrow { transform: translateX(0.15em); }

/* ---------- Home ---------- */
.site-header { padding: calc(2rem * var(--p)) calc(2rem * var(--p)) calc(14rem * var(--p)) calc(1.4rem * var(--p)); }
.site-header .cols { --gap: 1rem; }

.project { padding: 0 calc(2rem * var(--p)) calc(11rem * var(--p)); }
.project .cols { --gap: 3rem; }
.project.pt { padding-top: calc(2rem * var(--p)); }

.archive-link { padding: 0 calc(2rem * var(--p)) calc(8rem * var(--p)); text-align: right; }
.archive-link a:hover { text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; }
.archive-link .plus { color: var(--faint); font-weight: 400; }

/* ---------- About (black footer on the home page) ---------- */
.about {
  background: #000;
  color: #fff;
  padding: calc(6rem * var(--p)) calc(3rem * var(--p)) calc(3rem * var(--p));
  line-height: 1.5;
}
.about .cols { --gap: 2rem; }
.about .cols + .cols { margin-top: calc(2rem * var(--p)); }
.about .row > :last-child::after, .about .intro > .s6::after { content: ""; display: block; height: 1.5em; }
.about .row > :first-child { color: rgba(255, 255, 255, 0.6); }
.about .portrait { width: 100%; background: #222; }
.about .row a { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 0.15em; }
.about a:hover { text-decoration: underline; text-decoration-color: #fff; }
.about .contact { padding-top: calc(3rem * var(--p)); border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: calc(3rem * var(--p)); }
@media (max-width: 768px) {
  .about { font-size: 2.4rem; }
  .about .row { row-gap: 0.4rem; }
}

/* ---------- Project & archive pages ---------- */
.page-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  padding: calc(2.2rem * var(--p)) calc(2rem * var(--p)) 0 calc(1.4rem * var(--p));
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.page-header a { pointer-events: auto; }
.page-header .logo, .page-header h2 { color: #fff; }
.page-header .cols { --gap: 1rem; grid-template-columns: 1fr 1fr; align-items: start; }
.page-header .right { text-align: right; }
@media (max-width: 768px) {
  .page-header .cols.stack-m { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; }
  .page-header .cols.stack-m .right { text-align: left; }
}

/* content always starts below the fixed header */
.content {
  padding: max(var(--top, 10rem), calc(9.4rem + 2.2rem * var(--p) + 4rem)) calc(2rem * var(--p)) calc(2rem * var(--p));
}
.content.flush-right { padding-right: 0; }
@media (max-width: 768px) {
  body:has(.stack-m) .content { padding-top: max(var(--top, 10rem), 19rem); }
}
.g1 { margin-top: 1rem; } .g2 { margin-top: 2rem; } .g6 { margin-top: 6rem; }

.text-col { font-size: 1.8rem; line-height: 1.4; color: var(--muted); }
.text-col b { color: #000; font-weight: 600; }
.text-col p + p { margin-top: 1em; }
@media (max-width: 768px) { .text-col { font-size: 2.1rem; } }

/* "All work / Next project" bar at the end of each page */
.page-nav {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  margin: calc(8rem * var(--p)) calc(2rem * var(--p)) 0;
  padding: calc(3rem * var(--p)) 0 calc(4rem * var(--p));
  border-top: 1px solid var(--line);
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 2rem;
  letter-spacing: -0.01em;
}
.page-nav a:hover { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.12em; }
.page-nav a:first-child:hover .arrow { transform: translateX(-0.15em); }
.page-nav a:last-child:not(:first-child) { text-align: right; }
@media (max-width: 768px) { .page-nav { font-size: 2.2rem; } }

/* archive */
.archive-list { padding-top: calc(9.4rem + 13.2rem * var(--p)); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: none; }
.lightbox button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px; height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.06);
  color: #111;
  font-size: 16px;
  line-height: 36px;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(0, 0, 0, 0.12); }
.lightbox .prev { left: 20px; }
.lightbox .next { right: 20px; }
@media (max-width: 768px) { .lightbox { padding: 10px; } }

/* on phones, photos scaled down for desktop composition go full width */
@media (max-width: 768px) { .content img[style*="width"] { width: 100% !important; } }

/* line breaks: never strand a single word or symbol on its own line */
.nowrap { white-space: nowrap; }
h1, h2, .heading, .page-nav a { text-wrap: balance; }
.desc, .text-col, .about { text-wrap: pretty; }

/* middle link in the project nav bar */
.page-nav { align-items: baseline; }
.page-nav .mid { margin-right: auto; margin-left: auto; }
.page-nav .plus { color: var(--faint); font-weight: 400; }
@media (max-width: 768px) {
  .page-nav { flex-wrap: wrap; row-gap: 1.6rem; }
  .page-nav .mid { order: 3; flex-basis: 100%; margin: 0; }
}
@media (min-width: 769px) {
  .page-nav:has(.mid) { display: grid; grid-template-columns: 1fr auto 1fr; }
  .page-nav:has(.mid) .mid { margin: 0; }
  .page-nav:has(.mid) > :last-child { justify-self: end; }
}

/* ---------- Tag filter ---------- */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.4rem calc(2rem * var(--p));
  margin-bottom: calc(6rem * var(--p));
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 5;
  border-bottom: 1px solid transparent;
}
.filters.is-stuck { border-bottom-color: var(--line); }
.archive-list .filters { position: static; padding-left: 0; padding-right: 0; margin: 0 calc(2rem * var(--p)) calc(8rem * var(--p)); background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.filter-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.filter {
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: #111;
  background: transparent;
  border: 1px solid #111;
  border-radius: 999rem;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.filter:hover { background: rgba(0, 0, 0, 0.06); }
.filter[aria-pressed="true"] { background: #111; color: #fff; }
.filter-status { margin: 0; font-size: 1.4rem; color: var(--faint); white-space: nowrap; }

/* tags inside projects act as filter shortcuts */
.project .tag[role="button"] { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.project .tag[role="button"]:hover { background: rgba(0, 0, 0, 0.06); }
.project .tag.is-match { background: #111; color: #fff; }

.project[hidden] { display: none; }

@media (max-width: 768px) {
  .filters { padding-top: 1.2rem; padding-bottom: 1.2rem; }
  .filter-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -2rem; padding-right: 2rem; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .filter-list::-webkit-scrollbar { display: none; }
  .filter { font-size: 1.7rem; white-space: nowrap; padding: 0.8rem 1.3rem; }
  .filter-status { display: none; }
  .archive-list .filters .filter-list { margin-right: 0; }
}

/* phones: photo first, then title, text and tags */
@media (max-width: 768px) {
  .project .cols > .s8 { order: -1; }
  .project .cols { row-gap: 1.6rem; }
}