/* ole.dk — ported from the "Minimal interactive portfolio site" design.
   Palette + type as design tokens; screens recreated as classes. */

:root {
  --bg: #171310;
  --fg: #ece5dc;
  --fg-soft: #c4b9ad;
  --muted: #8f847a;
  --muted-2: #b5a99c;
  --accent: #c98f5f;
  --accent-bright: #e5b285;

  --font-display: 'Space Grotesk', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --pad-x: clamp(32px, 10vw, 140px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

/* Dot-grid canvas sits behind everything, fixed to the viewport. */
#dot-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

#view {
  position: relative;
  z-index: 1;
}

/* ---- Screens ---------------------------------------------------------- */

.screen {
  position: relative;
  min-height: 100dvh;
}

/* Home: centered stack with a contact row pinned to the bottom. */
.screen--home {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--pad-x);
  gap: 20px;
}

/* Projects / about: normal document flow, allowed to scroll. */
.screen--scroll {
  padding: clamp(48px, 8vh, 96px) var(--pad-x);
}

.screen--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wrap {
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.wrap--narrow {
  max-width: 620px;
  gap: 22px;
}

/* ---- Home ------------------------------------------------------------- */

.home__intro {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.home__title {
  font: 500 clamp(44px, 7vw, 72px)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}

.home__tag {
  font: 300 16px/1.5 var(--font-mono);
  color: var(--muted);
}

.home__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin-top: 36px;
  font: 400 14px var(--font-mono);
  align-items: baseline;
}

/* ---- Headings / body -------------------------------------------------- */

.heading {
  margin: 0;
  font: 500 clamp(30px, 4.5vw, 44px)/1.1 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg);
}

/* ---- Projects grid ---------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #221f1c;
  border: 1px solid rgba(236, 229, 220, 0.08);
  border-radius: 10px;
  padding: 18px;
  transition: border-color 0.3s ease, transform 0.3s ease;
}

.card:hover {
  border-color: rgba(201, 143, 95, 0.35);
  transform: translateY(-3px);
}

.card__img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

.card__img--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 229, 220, 0.04);
  border: 1px dashed rgba(236, 229, 220, 0.14);
  color: var(--muted);
  font: 300 13px var(--font-mono);
}

.card__title {
  margin: 0;
  font: 500 19px/1.2 var(--font-display);
  color: var(--fg);
}

.card__desc {
  margin: 0;
  font: 400 14px/1.6 var(--font-display);
  color: #a89c8e;
}

/* ---- About ------------------------------------------------------------ */

.about__meta {
  font: 300 14px/1.5 var(--font-mono);
  color: var(--muted);
}

.about__body {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.about__body p {
  margin: 0;
  font: 400 16px/1.75 var(--font-display);
  color: var(--fg-soft);
}

.about__body strong {
  color: var(--fg);
  font-weight: 400;
}

/* ---- Contact row (shared macro) --------------------------------------- */

.contact {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;
  font: 400 13px var(--font-mono);
}

/* On home, pinned to the bottom-left. */
.contact--home {
  position: absolute;
  left: var(--pad-x);
  right: 24px;
  bottom: 40px;
}

.contact--about {
  margin-top: 18px;
  gap: 28px;
  font-size: 14px;
}

/* ---- Links: animated underline ---------------------------------------- */

.link {
  text-decoration: none;
  padding-bottom: 3px;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(rgba(181, 169, 156, 0.25), rgba(181, 169, 156, 0.25));
  background-size: 0% 1px, 100% 1px;
  background-position: 0 100%, 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.4s var(--ease), color 0.4s ease;
}

.link:hover { background-size: 100% 1px, 100% 1px; }

.link--accent {
  color: var(--accent);
  /* draw the hover underline in the brighter accent */
  background-image:
    linear-gradient(var(--accent-bright), var(--accent-bright)),
    linear-gradient(rgba(201, 143, 95, 0.35), rgba(201, 143, 95, 0.35));
}

.link--accent:hover { color: var(--accent-bright); }

.link--muted {
  color: var(--muted);
  background-image:
    linear-gradient(var(--fg), var(--fg)),
    linear-gradient(rgba(181, 169, 156, 0.2), rgba(181, 169, 156, 0.2));
}

.link--muted:hover { color: var(--fg); }

.link--back {
  align-self: flex-start;
  font-size: 14px;
  /* back links have no baseline hint underline, just the sweep */
  background-image: linear-gradient(var(--accent-bright), var(--accent-bright));
  background-size: 0% 1px;
}

.link--back:hover { background-size: 100% 1px; }

/* ---- View transition (JS-enhanced navigation) ------------------------- */

#view {
  transition: opacity 0.4s ease, transform 0.4s var(--ease);
}

#view.is-leaving {
  opacity: 0;
  transform: translateY(-24px);
}

#view.is-entering {
  opacity: 0;
  transform: translateY(28px);
}

@media (prefers-reduced-motion: reduce) {
  #view, .card, .link { transition: none; }
}