/* Homepage (EN + DA): editorial layout. Loaded after styles.css on index.html and da/index.html only.
   One idea carries the page: big Archivo headlines cross the photo edges,
   dark on the paper and white where they land on the picture (js/cross-text.js). */

.ed { --foot: clamp(28px, 4.5vh, 48px); }

/* Big type: the site's own Archivo, heavier and tighter */
.ed .cover__title, .ed .look__word, .ed .looks__title, .ed .look h3, .ed .pull__quote blockquote, .figures strong {
  font-family: var(--font); font-weight: 600; letter-spacing: -.035em;
}

/* ---------- Crossing text ---------- */
.x-wrap { position: relative; }
.x-text { color: var(--ink); }
.ed .x-text--on {
  position: absolute !important; margin: 0 !important; grid-area: auto !important; z-index: 5 !important; pointer-events: none;
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 28px rgba(0, 0, 0, .55);
}
.x-photo img { filter: grayscale(1) contrast(1.06) brightness(.9); }

/* ---------- Cover: three photos laid like prints, headline crossing two of them ---------- */
.ed .cover.hero { display: block; height: max(600px, calc(100svh - 72px)); padding: 0; overflow: hidden; background: var(--paper); }
.ed .cover.hero::after { content: none; }
.ed .cover figure { position: absolute; margin: 0; }
.ed .cover img { width: 100%; height: 100%; object-fit: cover; }

.ed { --mw: 40vw; --mr: 0px; }
/* Full bleed: the big photo runs off the top and right edges */
.cover__main { z-index: 1; right: var(--mr); width: var(--mw); top: 0; bottom: 0; }
.cover__main img { object-position: 45% 25%; }
/* Desktop: the headline stays grey all the way, also where it runs onto the big photo */
@media (min-width: 761px) { .cover .x-text--on { display: none; } }
/* The second print overlaps the first, with a paper border so it reads as a separate photo */
.cover__second { z-index: 2; right: calc(var(--mr) + var(--mw) - 5vw); width: 16vw; top: 40%; aspect-ratio: 3 / 4; box-shadow: 0 0 0 8px var(--paper); }
.cover__second img { object-position: 50% 20%; }

.ed .cover__title {
  position: absolute; z-index: 3; left: var(--gutter); top: calc(40% - 2.25em); margin: 0;
  font-size: clamp(2.6rem, 6.2vw, 7.2rem); line-height: .96; text-wrap: nowrap;
}
.cover__title span { display: block; }
.cover__title span + span { padding-left: 18vw; }
/* The Danish second line is longer: a smaller indent keeps it off the face in the photo */
@media (min-width: 761px) { html[lang="da"] .cover__title span + span { padding-left: 8vw; } }
.cover__btn { position: absolute; z-index: 2; left: var(--gutter); bottom: var(--foot); }
/* Headline colours: grey second line; white on the photo */
.cover__title:not(.x-text--on) span + span { color: #8A847C; }
/* One proof above the button: the number large, what it counts beside it */
.cover__proof {
  position: absolute; z-index: 2; left: var(--gutter); bottom: calc(var(--foot) + 48px + clamp(24px, 4.5vh, 44px));
  display: flex; align-items: center; gap: 18px; margin: 0;
}
.cover__proof strong { font-weight: 600; font-size: clamp(3rem, 5.4vw, 5.6rem); line-height: .8; letter-spacing: -.045em; }
.cover__proof span { max-width: 12.5rem; padding-left: 18px; border-left: 1px solid var(--ink); font-size: 1rem; line-height: 1.35; }

/* ---------- Intro: a dark band, so the cover and the page below are clearly apart ---------- */
.ed .standfirst { background: var(--ink); color: var(--paper); padding: clamp(40px, 7vh, 88px) 0; }
.standfirst__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.standfirst__text { margin: 0; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.3; letter-spacing: -.018em; text-indent: 18%; }
.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 40px); margin: clamp(28px, 4vh, 48px) 0 clamp(24px, 3vh, 36px); padding: 0; list-style: none; }
.figures li { border-top: 1px solid rgba(243, 241, 238, .45); padding-top: 14px; }
.figures strong { display: block; line-height: .9; font-size: clamp(2.2rem, 4.4vw, 4.2rem); margin-bottom: 10px; }
.figures span { display: block; color: rgba(243, 241, 238, .7); font-size: .9rem; line-height: 1.4; max-width: 15rem; }
.standfirst__fig { margin: 0; }
.standfirst__fig img { width: 100%; aspect-ratio: 4 / 5; max-height: 50svh; object-fit: cover; object-position: 50% 25%; filter: grayscale(1) contrast(1.06); }
.ed .standfirst .clients { margin-top: clamp(24px, 4vh, 48px); }
.ed .standfirst .clients__label { color: rgba(243, 241, 238, .6); }
.ed .standfirst .marquee__list img { filter: brightness(0) invert(1); opacity: .6; }
.ed .standfirst .marquee__list img.is-tone { filter: grayscale(1) invert(1) contrast(1.4); }
.ed .standfirst .marquee__word { color: var(--paper); }

/* ---------- Events: three columns, the word across the bottom edge of each photo ---------- */
.ed .looks { overflow-x: clip; }
.ed .looks__title { font-size: clamp(1.8rem, 3vw, 2.8rem); line-height: 1; margin-bottom: clamp(20px, 3.5vh, 40px); }
.looks__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; }
.looks__row .look:nth-child(2) { margin-top: clamp(12px, 3vh, 36px); }
.look__fig { margin: 0; height: min(36svh, 400px); }
.look__fig img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.ed .look__word {
  position: relative; z-index: 2; margin: -.5em 0 0 -.03em;
  line-height: .8; letter-spacing: -.05em; white-space: nowrap; font-size: clamp(2.4rem, 4.6vw, 4.4rem);
}
.ed .look h3 { font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.15; letter-spacing: -.02em; margin: 18px 0 8px; }
.look > p:not(.look__word) { color: var(--ink-2); font-size: .95rem; line-height: 1.55; margin: 0; }
.look__moments { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 12px 0 14px; padding: 10px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .85rem; }
.look__link { display: inline-block; font-weight: 600; font-size: .95rem; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.look .look__link { border-bottom-color: var(--line); }
/* The whole column is the link */
.look .look__link::after { content: ""; position: absolute; inset: 0; z-index: 6; }
.look:has(.look__link:focus-visible) { outline: 2px solid var(--ink); outline-offset: 10px; }
.look .look__link:focus-visible { outline: none; }
.look__fig { overflow: hidden; }
.look__fig img { transition: transform .9s cubic-bezier(.2, .7, .2, 1); }
.looks__row .look { transition: opacity .35s ease; }
.look .look__link { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat border-box; transition: background-size .45s ease; }
/* Hover: the photo moves in, the line under the link draws across, the other two step back */
@media (hover: hover) {
  .look:hover .look__fig img { transform: scale(1.06); }
  .look:hover .look__link { background-size: 100% 1px; }
  .looks__row:hover .look:not(:hover) { opacity: .4; }
}
.look:focus-within .look__fig img { transform: scale(1.06); }
.looks__row:focus-within .look:not(:focus-within) { opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  .look__fig img, .looks__row .look, .look .look__link { transition: none; }
  .look:hover .look__fig img, .look:focus-within .look__fig img { transform: none; }
}

/* ---------- Pull quote ---------- */
.pull__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.pull__fig { margin: 0; }
.pull__fig img { width: 100%; aspect-ratio: 4 / 5; max-height: 72svh; object-fit: cover; filter: grayscale(1) contrast(1.06); }
.pull__quote { margin: 0; }
.ed .pull__label { font: 600 .95rem/1.3 var(--font); letter-spacing: 0; color: var(--ink-2); margin-bottom: 20px; }
.ed .pull__quote blockquote { margin: 0 0 24px; text-indent: -.4em; line-height: 1.08; letter-spacing: -.03em; font-size: clamp(1.8rem, 3.3vw, 3.2rem); }
.pull__quote blockquote::before { content: "“"; }
.pull__quote figcaption { color: var(--ink-2); margin-bottom: 28px; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  .ed .cover.hero { display: grid; grid-template-columns: minmax(0, 1fr) 38%; column-gap: 16px; align-items: start; height: auto; padding: 16px var(--gutter) 28px; }
  .ed .cover figure { position: relative; }
  .ed .cover__title { position: relative; top: auto; left: auto; grid-column: 1 / -1; grid-row: 1; margin: 0 0 -1.1em; text-wrap: balance; font-size: 11vw; }
  .cover__title span + span { padding-left: 0; }
  .cover__main { grid-column: 1 / -1; grid-row: 2; right: auto; top: auto; bottom: auto; width: 100%; height: 40svh; }
  .cover__second { grid-column: 2; grid-row: 3; right: auto; top: auto; width: 100%; margin-top: -18vw; box-shadow: 0 0 0 6px var(--paper); }
  .cover__proof { position: static; grid-column: 1; grid-row: 3; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 16px; }
  .cover__proof strong { font-size: 3.2rem; }
  .cover__proof span { padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--ink); font-size: .85rem; }
  .cover__btn { position: static; grid-column: 1 / -1; grid-row: 4; justify-self: start; margin-top: 20px; }

  .standfirst__grid { grid-template-columns: 1fr; }
  .standfirst__text { text-indent: 0; }
  .standfirst__fig { display: none; }
  .figures { gap: 12px; }
  .figures strong { font-size: 1.9rem; }
  .figures span { font-size: .8rem; }

  .looks__row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter) 8px; scrollbar-width: none; }
  .looks__row::-webkit-scrollbar { display: none; }
  .looks__row .look { flex: 0 0 82%; scroll-snap-align: start; }
  .looks__row .look:nth-child(2) { margin-top: 0; }
  .look__fig { height: 48svh; }
  .ed .look__word { font-size: 14vw; }

  .pull__grid { grid-template-columns: 1fr; }
  .pull__fig img { aspect-ratio: 3 / 2; }
}

/* The events section starts closer under the dark band */
.ed .looks.sec { padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(48px, 8vh, 96px); }


/* Phones: the big photo runs edge to edge */
@media (max-width: 760px) {
  .cover__main { margin: 0 calc(var(--gutter) * -1); width: calc(100% + 2 * var(--gutter)); }
  /* The headline's last line sits on the bright sky: a soft dark fade keeps it readable */
  .cover__main::after { content: ""; position: absolute; inset: 0 0 auto; height: 45%; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); pointer-events: none; }
}

/* ---------- Hovers on the homepage: no red; buttons invert, text links draw a line ---------- */
.ed .btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.ed .btn--solid:hover, .ed .btn--solid:focus-visible { background: var(--paper); color: var(--ink); border-color: var(--ink); }
.ed .cta-band .btn--solid:hover, .ed .cta-band .btn--solid:focus-visible { background: transparent; color: var(--paper); border-color: var(--paper); }
.ed .standfirst .look__link, .ed .pull .look__link {
  border-bottom-color: rgba(20, 20, 20, .25);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat border-box; transition: background-size .45s ease;
}
.ed .standfirst .look__link { border-bottom-color: rgba(243, 241, 238, .35); }
.ed .standfirst .look__link:hover, .ed .standfirst .look__link:focus-visible,
.ed .pull .look__link:hover, .ed .pull .look__link:focus-visible { color: inherit; background-size: 100% 1px; }
.ed .look .look__link:hover { color: inherit; }
@media (prefers-reduced-motion: reduce) { .ed .btn, .ed .standfirst .look__link, .ed .pull .look__link { transition: none; } }

/* Hover line on text links: the dark line is drawn as a layer above the thin grey line
   (as a border, the grey line covered it, so the hover could not be seen) */
.ed .look .look__link { border-bottom: 0; padding-bottom: 4px; transition: background-size .45s ease;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat, linear-gradient(var(--line), var(--line)) 0 100% / 100% 1px no-repeat; }
.ed .look:focus-within .look__link { background-size: 100% 2px, 100% 1px; }
@media (hover: hover) { .ed .look:hover .look__link { background-size: 100% 2px, 100% 1px; } }
.ed .standfirst .look__link { border-bottom: 0; padding-bottom: 4px; transition: background-size .45s ease;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat, linear-gradient(rgba(243, 241, 238, .35), rgba(243, 241, 238, .35)) 0 100% / 100% 1px no-repeat; }
.ed .standfirst .look__link:hover, .ed .standfirst .look__link:focus-visible { background-size: 100% 2px, 100% 1px; }
.ed .pull .look__link { border-bottom: 0; padding-bottom: 4px; transition: background-size .45s ease;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat, linear-gradient(rgba(20, 20, 20, .25), rgba(20, 20, 20, .25)) 0 100% / 100% 1px no-repeat; }
.ed .pull .look__link:hover, .ed .pull .look__link:focus-visible { background-size: 100% 2px, 100% 1px; }
@media (prefers-reduced-motion: reduce) { .ed .look .look__link, .ed .standfirst .look__link, .ed .pull .look__link { transition: none; } }