/* ---------------------------------------------------------------
   tinakrusepalm.dk
   Type on the Wix original was Futura LT Light. That face is not
   licensed for web use here, so Jost (a geometric sans cut from the
   same Futura lineage) stands in for it.
   --------------------------------------------------------------- */

:root {
  --ink: #2e2e2e;
  --ink-strong: #000;
  --stage: #e8e8e8;
  --rule: #6e6e6e;
  --content: 980px;
  --gutter: 22px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Jost", "Futura", "Century Gothic", sans-serif;
  font-weight: 300;
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

.wrap {
  max-width: var(--content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* --- header ---------------------------------------------------- */

.site-header {
  padding: 34px 0 0;
}

.site-header--over {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  background: transparent;
}

.portrait {
  width: 130px;
  height: 130px;
  margin: 0 auto;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1);
}

.nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 6px;
  margin-top: 18px;
  list-style: none;
  padding: 0;
}

.nav a {
  display: block;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  color: var(--ink-strong);
  transition: opacity 0.2s ease;
}

.nav a:hover,
.nav a:focus-visible {
  opacity: 0.55;
}

.nav li:first-child a {
  text-align: left;
}

.nav li:last-child a {
  text-align: right;
}

/* --- full-bleed photo bands ------------------------------------ */

/* The Wix original scrolls all three photo bands as parallax: the image
   holds still (or nearly so) while the band scrolls over it, so you see
   a moving window onto a stationary photo. `fixed` sizes the background
   to the viewport rather than the element, which is what produces that.
   Turned off further down for touch and for reduced-motion. */
.band {
  position: relative;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.band--hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 768px;
  padding: 260px var(--gutter) 90px;
  background-image: url("/images/hero.jpg");
}

.band--dandelion {
  height: 520px;
  background-image: url("/images/dandelion.jpg");
}

.band--sailing {
  height: 560px;
  background-image: url("/images/sailing.jpg");
}

/* The Wix original laid a green wash over both lower photo bands. */
.band--dandelion::after,
.band--sailing::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(26, 122, 92, 0.72) 0%,
    rgba(46, 166, 160, 0.45) 45%,
    rgba(120, 214, 208, 0.22) 100%
  );
  mix-blend-mode: multiply;
}

.hero-intro {
  max-width: 760px;
  margin: 0;
  font-size: 35px;
  font-style: italic;
  line-height: 1.32;
  text-align: center;
  color: var(--ink-strong);
}

/* --- sections -------------------------------------------------- */

.section {
  padding: 96px 0 104px;
}

.section-title {
  margin: 0 0 56px;
  font-size: 85px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--ink-strong);
}

.about-text {
  max-width: 773px;
  margin: 0 auto;
  font-size: 18px;
  line-height: 1.55;
  text-align: center;
}

.about-text p + p {
  margin-top: 1.1em;
}

/* --- project grid ---------------------------------------------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-grid a {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

.project-grid img {
  width: 100%;
  aspect-ratio: 1.6;
  object-fit: cover;
  transition: transform 0.45s ease, opacity 0.3s ease;
}

.project-grid a:hover img,
.project-grid a:focus-visible img {
  transform: scale(1.04);
  opacity: 0.88;
}

.project-grid span {
  position: absolute;
  inset: auto 0 0;
  padding: 10px 12px;
  font-size: 15px;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.project-grid a:hover span,
.project-grid a:focus-visible span {
  opacity: 1;
}

/* --- contact --------------------------------------------------- */

.contact-body {
  text-align: center;
  font-size: 22px;
  line-height: 1.6;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 14px 30px;
  border: 1px solid var(--rule);
  font-size: 18px;
  text-decoration: none;
  transition: background 0.25s ease, color 0.25s ease;
}

.contact-link:hover,
.contact-link:focus-visible {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.contact-link svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.contact-link:hover svg,
.contact-link:focus-visible svg {
  fill: #fff;
}

/* --- project page ---------------------------------------------- */

.project-head {
  padding: 60px 0 0;
}

.project-title {
  margin: 0;
  font-size: 33px;
  font-weight: 300;
  line-height: 1.2;
}

.project-desc {
  margin: 12px 0 0;
  font-size: 22px;
  line-height: 1.35;
}

.gallery {
  margin: 44px 0 0;
}

.gallery-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1.55;
  background: var(--stage);
  overflow: hidden;
}

.gallery-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.gallery-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.78);
  color: var(--ink);
  font-size: 14px;
  line-height: 1;
  transition: background 0.2s ease;
}

.gallery-arrow:hover,
.gallery-arrow:focus-visible {
  background: #fff;
}

.gallery-arrow--prev {
  left: 0;
}

.gallery-arrow--next {
  right: 0;
}

.gallery-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-top: 14px;
}

.gallery-caption {
  font-size: 18px;
  line-height: 1.4;
}

.gallery-count {
  flex: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.back-link {
  display: block;
  margin: 64px 0 0;
  font-size: 14px;
  text-align: center;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  text-decoration: underline;
}

/* --- footer ---------------------------------------------------- */

.site-footer {
  padding: 26px 0 34px;
  font-size: 13px;
  text-align: center;
  color: #8a8a8a;
}

/* --- responsive ------------------------------------------------ */

@media (max-width: 900px) {
  .section-title {
    font-size: 58px;
  }

  .hero-intro {
    font-size: 26px;
  }

  .nav a {
    font-size: 22px;
  }

  .project-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .band--hero {
    min-height: 600px;
    padding-top: 220px;
  }
}

@media (max-width: 560px) {
  .section {
    padding: 64px 0 70px;
  }

  .section-title {
    font-size: 42px;
    margin-bottom: 36px;
  }

  .hero-intro {
    font-size: 21px;
  }

  .nav {
    gap: 0 4px;
  }

  .nav a {
    font-size: 16px;
    padding-top: 10px;
  }

  .project-grid {
    grid-template-columns: 1fr;
  }

  .project-title {
    font-size: 27px;
  }

  .project-desc,
  .contact-body {
    font-size: 18px;
  }

  .band--dandelion,
  .band--sailing {
    height: 320px;
  }

  /* Captions are always visible on touch, where there is no hover. */
  .project-grid span {
    opacity: 1;
  }
}

@media (hover: none) {
  .project-grid span {
    opacity: 1;
  }
}

/* iOS Safari does not honour a fixed background attachment — it falls back
   to scroll and can jump or over-zoom while doing it. Opt touch devices out
   deliberately rather than leaving it to the browser. */
@media (hover: none) {
  .band {
    background-attachment: scroll;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .band {
    background-attachment: scroll;
  }

  .project-grid img,
  .project-grid span,
  .gallery-arrow {
    transition: none;
  }
}