:root {
  --ink: #141414;
  --paper: #f2ede3;
  --red: #d8262c;
  --blue: #1c4f9c;
  --yellow: #f2b705;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; }

/* ============ Header ============ */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 2rem; height: 64px;
  background: var(--paper);
  border-bottom: 3px solid var(--ink);
}
header .name {
  font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  text-decoration: none; font-size: .95rem;
  display: flex; align-items: center; gap: .6rem;
}
header .name::before {
  content: ""; width: 14px; height: 14px; background: var(--red);
  border-radius: 50%; display: inline-block;
}
nav { display: flex; height: 100%; }
nav a {
  display: flex; align-items: center; padding: 0 1.1rem;
  text-decoration: none; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  border-left: 3px solid var(--ink);
  transition: background .15s, color .15s;
}
nav a:hover { background: var(--ink); color: var(--paper); }
nav a:nth-child(1):hover { background: var(--red); }
nav a:nth-child(2):hover { background: var(--blue); }
nav a:nth-child(3):hover { background: var(--yellow); color: var(--ink); }
nav a:nth-child(4):hover { background: var(--red); }
nav a:nth-child(5):hover { background: var(--blue); }

/* ============ Hero ============ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 120px 2rem 4rem;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-bottom: 3px solid var(--ink);
}
.hero h1 {
  position: relative; z-index: 2;
  font-size: clamp(3.5rem, 13vw, 11rem);
  line-height: .88; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.02em;
}
.hero h1 .outline-img {
  /* svg cap height maps to Inter's .727em cap height exactly */
  height: .787em; width: auto;
  /* svg bottom sits 62/2048 em below the font baseline */
  vertical-align: -.0303em;
}
.hero .sub {
  position: relative; z-index: 2;
  margin-top: 2.5rem; max-width: 38rem;
  font-size: clamp(1rem, 1.6vw, 1.25rem); font-weight: 500;
}
.hero .sub strong {
  background: var(--yellow); padding: 0 .3em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; font-size: .85em;
}
/* Bauhaus shapes */
.shape { position: absolute; z-index: 1; }
.sh-circle { top: 14vh; right: 8vw; width: 22vw; height: 22vw; max-width: 320px; max-height: 320px; background: var(--red); border-radius: 50%; }
.sh-half { top: 42vh; right: 20vw; width: 13vw; height: 6.5vw; max-width: 190px; max-height: 95px; background: var(--blue); border-radius: 190px 190px 0 0; transform: rotate(-24deg); }
.sh-square { top: 60vh; right: 6vw; width: 9vw; height: 9vw; max-width: 130px; max-height: 130px; background: var(--yellow); transform: rotate(18deg); border: 3px solid var(--ink); z-index: 3; }
.sh-bar { top: 20vh; left: 4vw; width: 16px; height: 34vh; background: var(--ink); transform: rotate(32deg); }
.sh-ring { bottom: 12vh; right: 34vw; width: 70px; height: 70px; border: 14px solid var(--blue); border-radius: 50%; }

/* ============ Projects ============ */
main { position: relative; }
section.project {
  position: relative;
  border-bottom: 3px solid var(--ink);
  padding: 5rem 2rem 6rem;
}
.p-top { display: flex; align-items: flex-start; gap: 2rem; flex-wrap: wrap; }
.p-num {
  font-size: clamp(4rem, 9vw, 8rem); font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 2.5px var(--ink);
  flex-shrink: 0;
}
.p-titles { flex: 1; min-width: 260px; }
.p-kicker {
  display: inline-block; font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
  padding: .35em .8em; margin-bottom: 1rem; border: 3px solid var(--ink);
}
.p-head h2 {
  font-size: clamp(2.4rem, 7vw, 5.5rem);
  line-height: .95; font-weight: 700; text-transform: uppercase;
  letter-spacing: -.01em;
}
.p-meta {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 1.75rem; border: 3px solid var(--ink); width: fit-content;
  max-width: 100%; background: #fff;
}
.p-meta span {
  font-size: .8rem; font-weight: 500; padding: .55em 1em;
  border-right: 3px solid var(--ink);
}
.p-meta span:last-child { border-right: none; }
.p-meta b { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; display: block; }
.p-desc { max-width: 42rem; margin-top: 2rem; font-weight: 500; }
.p-desc p + p { margin-top: 1em; }
.p-desc b { font-weight: 700; }
.p-link {
  display: inline-block; margin-top: 1.75rem;
  font-size: .8rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; text-decoration: none;
  background: var(--ink); color: var(--paper); padding: .8em 1.4em;
  transition: background .15s;
}
.p-link:hover { background: var(--red); }

/* per-project accents */
#turn-take   { --acc: var(--red); }
#lilien      { --acc: var(--blue); }
#typografie  { --acc: var(--yellow); }
#twisted-cube{ --acc: var(--red); }
.project .p-kicker { background: var(--acc); color: var(--paper); }
#typografie .p-kicker { color: var(--ink); }
.project::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 100%; height: 12px; background: var(--acc);
}
.deco { position: absolute; pointer-events: none; }
#turn-take .deco { top: 6rem; right: 4vw; width: 90px; height: 90px; background: var(--red); border-radius: 50%; }
#lilien .deco { top: 7rem; right: 5vw; width: 0; height: 0; border-left: 55px solid transparent; border-right: 55px solid transparent; border-bottom: 95px solid var(--blue); }
#typografie .deco { top: 6rem; right: 4vw; width: 95px; height: 95px; background: var(--yellow); border: 3px solid var(--ink); transform: rotate(12deg); }
#twisted-cube .deco { top: 5rem; right: 4vw; width: 110px; height: 55px; background: var(--red); border-radius: 110px 110px 0 0; transform: rotate(-16deg); }

/* ============ Galleries ============ */
.gallery { margin-top: 3rem; display: grid; gap: 1.5rem; }
.g-full { grid-template-columns: 1fr; }
.g-2 { grid-template-columns: 1fr 1fr; }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.gallery figure {
  background: #fff; border: 3px solid var(--ink);
  box-shadow: 8px 8px 0 var(--acc);
  transition: transform .18s ease, box-shadow .18s ease;
}
.gallery figure:hover {
  transform: translate(-4px, -4px);
  box-shadow: 12px 12px 0 var(--acc);
}
.gallery figcaption {
  font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; padding: .6em 1em;
  border-top: 3px solid var(--ink);
}
.center-crop { overflow: hidden; max-height: 520px; }
.center-crop img { height: 100%; object-fit: cover; }

/* ============ Footer ============ */
footer {
  padding: 5rem 2rem 3rem;
  display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; justify-content: space-between;
  background: var(--ink); color: var(--paper);
}
footer h3 {
  font-size: .8rem; letter-spacing: .18em; text-transform: uppercase;
  margin-bottom: 1rem; display: flex; align-items: center; gap: .6rem;
}
footer h3::before { content: ""; width: 12px; height: 12px; background: var(--yellow); display: inline-block; }
footer p { max-width: 34rem; font-weight: 500; }
footer .col a { text-decoration: none; border-bottom: 2px solid var(--yellow); }
footer .col a:hover { color: var(--yellow); }
.copyright { width: 100%; font-size: .78rem; margin-top: 2rem; opacity: .6; }
.copyright a { text-decoration: none; border-bottom: 2px solid var(--yellow); }
.copyright a:hover { color: var(--yellow); }

/* ============ Reveal ============ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

@media (max-width: 860px) {
  header { padding: 0 1rem; }
  nav a { padding: 0 .6rem; font-size: .62rem; letter-spacing: .06em; }
  .hero, section.project, footer { padding-left: 1.25rem; padding-right: 1.25rem; }
  .g-2, .g-3 { grid-template-columns: 1fr; }
  .deco, .sh-ring, .sh-bar { display: none; }
  .sh-circle { width: 34vw; height: 34vw; top: 10vh; right: 4vw; opacity: .9; }
  .sh-half { transform: scale(.7); }
  .sh-square { top: 42vh; right: 8vw; transform: rotate(18deg) scale(.7); }
}