/* eskape.digital — site styles. Plain CSS, no build step. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-var-italic.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-var-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --yellow: #f5d90a;
  --ink: #15140f;
  --ink-soft: #3b392f;
  --on-yellow-soft: #3d3606;
  --paper: #f0f2f2;
  --rule: rgba(21, 20, 15, 0.9);
  --rule-soft: rgba(21, 20, 15, 0.18);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --step-display: clamp(2.9rem, 0.5rem + 8.4vw, 8.25rem);
  --step-display-de: clamp(2.6rem, 0.4rem + 6.3vw, 6.5rem);
  --step-title: clamp(2.6rem, 1.4rem + 5vw, 5.5rem);
  --step-h2: clamp(1.9rem, 1.2rem + 2.4vw, 3rem);
  --step-h3: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem);
  --step-lead: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --step-body: 1.125rem;
  --step-small: 0.9375rem;

  --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 3rem);
  --gap: clamp(1rem, 0.5rem + 1.4vw, 1.75rem);
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: clamp(3.5rem, 2rem + 5vw, 7rem);
  --space-6: clamp(5rem, 3rem + 7vw, 10rem);
  --max: 90rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 2rem; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--step-body);
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.55;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
  accent-color: var(--ink);
  caret-color: var(--ink);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }

::selection { background: var(--ink); color: var(--yellow); }

html { scrollbar-color: var(--ink) var(--paper); }

a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.075em;
  text-underline-offset: 0.18em;
  transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out), text-decoration-thickness 180ms var(--ease-out);
}
a:hover { text-decoration-thickness: 0.14em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; border-radius: 1px; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 50;
  background: var(--ink); color: var(--yellow); padding: 0.6rem 1rem; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 1rem; }

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

/* ---------- Grid ---------- */
.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }

/* ---------- Header ---------- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
  position: relative; z-index: 3;
}
.wordmark {
  font-weight: 800; font-stretch: 100%; font-size: 1.25rem; letter-spacing: -0.02em;
  text-decoration: none; line-height: 1;
}
.wordmark:hover { text-decoration: underline; text-decoration-thickness: 0.12em; }
.wordmark { display: inline-block; }
.wordmark .logo { display: block; height: 2.1rem; width: auto; aspect-ratio: 773 / 201; overflow: visible; }
.wordmark:hover .logo { opacity: 0.82; }
.site-footer .wordmark .logo { height: 2.6rem; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem clamp(1rem, 0.5rem + 1.4vw, 2rem); list-style: none; margin: 0; padding: 0; }
.site-nav a { font-weight: 600; font-size: 1rem; text-decoration: none; padding-block: 0.2rem; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 0.12em; }
.site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 0.14em; }
.site-nav .lang a { font-stretch: 80%; letter-spacing: 0.02em; }

/* ---------- Yellow field ---------- */
.field {
  background: var(--yellow);
  color: var(--ink);
  position: relative;
}
.field ::selection { background: var(--ink); color: var(--yellow); }
.field :focus-visible { outline-color: var(--ink); }

/* ---------- Masthead: laid over the first field ---------- */
.masthead { position: absolute; top: 0; left: 0; right: 0; z-index: 4; background: transparent; }

/* Desktop: the header stays; once its field has scrolled away it turns into an ink bar with yellow type */
@property --head-bg { syntax: "<color>"; inherits: true; initial-value: transparent; }
@property --head-ink { syntax: "<color>"; inherits: true; initial-value: #15140f; }
@media (min-width: 48.01rem) {
  @supports (animation-timeline: scroll()) {
    html { scroll-padding-top: 6rem; }
    main .row--marked > .row__aside { top: calc(5rem + 2.5rem); }
    .masthead {
      position: fixed;
      background: var(--head-bg);
      animation: head-solid linear both;
      animation-timeline: scroll(root block);
      animation-range: calc(100svh - 6rem) calc(100svh - 4.5rem);
    }
    body.no-photo .masthead { position: fixed; background: var(--head-bg); animation-range: 8rem 10rem; }
    body.no-photo .band { padding-top: 4.75rem; }
    .masthead .wordmark, .no-photo .masthead .site-nav a { color: var(--head-ink); }
    @keyframes head-solid {
      from { --head-bg: rgba(21, 20, 15, 0); --head-ink: #15140f; }
      to   { --head-bg: #15140f; --head-ink: #f5d90a; }
    }
  }
}
.no-photo .masthead { position: relative; background: var(--yellow); }
@media (min-width: 48.01rem) {
  .has-photo .site-nav a { color: var(--yellow); }
}

/* ---------- Photos: square, ink/yellow duotone, full height of the field ---------- */
.photo {
  position: absolute; top: 0; right: 0; z-index: 1;
  height: 100%; width: auto; aspect-ratio: 1; max-width: 62vw;
  object-fit: cover; object-position: 50% 40%;
  background: var(--ink);
}

/* ---------- Home hero ---------- */
.hero {
  --ph: 100svh;
  min-height: var(--ph);
  display: grid;
  grid-template-rows: 1fr auto;
  z-index: 2;
  overflow: hidden;
}
.hero .photo { height: var(--ph); width: var(--ph); max-width: 70vw; object-position: 60% 30%; }
.hero__foot {
  grid-row: 1; align-self: start;
  padding-block: calc(4.75rem + clamp(2rem, 6vh, 4rem)) 0;
  position: relative; z-index: 2;
}
.hero__foot .grid > div { grid-column: 1 / span 5; }
.hero__statement {
  grid-row: 2; align-self: end;
  padding-block: 0 clamp(2rem, 1rem + 4vh, 4rem);
  position: relative; z-index: 2;
}
.display {
  font-size: var(--step-display);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 0.92;
  letter-spacing: -0.02em;
}
.display:lang(de) { font-size: var(--step-display-de); }
.display span { display: block; }
@media (min-width: 48.01rem) { .display span span { white-space: nowrap; } }
/* One headline, two inks: ink on the field, yellow where it crosses the photo */
.split { position: relative; }
.split__light {
  position: absolute; inset: 0; color: var(--yellow);
  clip-path: inset(-0.2em 0 -0.2em calc(100vw - min(var(--ph), 70vw) - var(--gutter)));
}
.split__ink { clip-path: inset(-0.2em calc(100% - (100vw - min(var(--ph), 70vw) - var(--gutter))) -0.2em 0); }
.hero__sub { font-size: var(--step-lead); font-weight: 600; font-stretch: 90%; line-height: 1.2; max-width: 24ch; }
.mail-big {
  display: inline-block;
  margin-top: var(--space-3);
  font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem);
  font-weight: 750;
  font-stretch: 85%;
  letter-spacing: -0.01em;
  line-height: 1.1;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.16em;
  padding: 0.1em 0.15em;
  margin-left: -0.15em;
}
.mail-big:hover { background: var(--ink); color: var(--yellow); text-decoration-color: transparent; }

/* ---------- Page title band ---------- */
.band {
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr;
  z-index: 2;
  overflow: hidden;
}
.band--short { min-height: clamp(16rem, 36vh, 22rem); }
.no-photo .band { min-height: clamp(12rem, 30vh, 18rem); }
.band__title { align-self: end; padding-block: calc(4.75rem + var(--space-4)) clamp(2rem, 1rem + 4vh, 3.5rem); position: relative; z-index: 2; }
.no-photo .band__title { padding-top: var(--space-4); }
.title {
  font-size: var(--step-title);
  font-weight: 820;
  font-stretch: 72%;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 11ch;
}

/* ---------- Content sections ---------- */
main { display: block; }
.section { padding-block: var(--space-5); position: relative; }
.section + .section { padding-top: 0; }
.section--tight-top { padding-top: var(--space-4); }

.lead {
  font-size: var(--step-lead);
  font-weight: 500;
  font-stretch: 92%;
  line-height: 1.32;
  letter-spacing: -0.005em;
  max-width: 34ch;
  text-wrap: pretty;
}
.lead + .lead { margin-top: var(--space-3); }
.aside-line {
  margin-top: var(--space-4);
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 1.05;
  max-width: 22ch;
}

.intro { grid-column: 1 / span 7; }

/* Row: heading in the left columns, text on the right */
.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
}
.row + .row { margin-top: var(--space-5); }
.row > h2 { grid-column: 1 / span 4; }
.row > .row__body { grid-column: 5 / span 7; }
.h2 {
  font-size: var(--step-h2);
  font-weight: 800;
  font-stretch: 75%;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 14ch;
}
.prose { max-width: 66ch; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 1em; }
.prose strong { font-weight: 700; }

/* Questions on home */
.qa { list-style: none; margin: 0; padding: 0; }
.qa li { padding-block: var(--space-3); border-top: 1px solid var(--rule-soft); }
.qa li:first-child { border-top: 0; padding-top: 0; }
.qa h3 {
  font-size: var(--step-h3);
  font-weight: 750;
  font-stretch: 85%;
  line-height: 1.15;
  max-width: 30ch;
  margin-bottom: 0.5rem;
  text-wrap: balance;
}
.qa p { max-width: 62ch; color: var(--ink-soft); }
.next-links { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; margin-top: var(--space-4); font-weight: 700; font-size: 1.125rem; }

/* Industries list */
.industries { list-style: none; margin: var(--space-3) 0; padding: 0; }
.industries li {
  font-size: var(--step-h2);
  font-weight: 800;
  font-stretch: 70%;
  line-height: 1;
  letter-spacing: -0.015em;
  padding-block: 0.32em 0.28em;
  border-bottom: 1px solid var(--rule);
}
.industries li:first-child { border-top: 1px solid var(--rule); }

/* Offer: what we bring */
.bring { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: var(--gap); }
.bring li {
  break-inside: avoid;
  font-size: var(--step-h3);
  font-weight: 700;
  font-stretch: 82%;
  line-height: 1.2;
  padding-block: 0.6rem;
  border-bottom: 1px solid var(--rule-soft);
}

/* How we work: the loop */
.loop {
  grid-column: 1 / -1;
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gap);
  border-top: 1px solid var(--rule);
}
.loop li { padding-top: var(--space-3); padding-right: var(--space-2); position: relative; }
.loop li + li { border-left: 1px solid var(--rule-soft); padding-left: var(--gap); margin-left: calc(-1 * var(--gap) / 2); }
.loop__n {
  display: block;
  font-size: clamp(3.5rem, 2rem + 4vw, 6rem);
  font-weight: 300;
  font-stretch: 62%;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}
.loop h2 {
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 80%;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}
.loop p { color: var(--ink-soft); max-width: 34ch; }
.loop__again { grid-column: 1 / -1; margin-top: var(--space-3); font-weight: 700; font-stretch: 85%; }

/* About */
.portrait { grid-column: 1 / span 5; align-self: start; }
.portrait img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.portrait figcaption { font-size: var(--step-small); margin-top: 0.6rem; color: var(--ink-soft); }
.about-text { grid-column: 7 / span 6; }
.about-text { padding-top: clamp(3rem, 1rem + 8vh, 7rem); }
.about-text .h2 { margin-bottom: var(--space-3); }

.ventures { grid-column: 5 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--space-4); }
.venture a.venture__name {
  display: inline-block;
  font-size: var(--step-h2);
  font-weight: 800;
  font-stretch: 72%;
  line-height: 1;
  letter-spacing: -0.015em;
  margin-bottom: 0.6rem;
  text-decoration-thickness: 0.05em;
}
.venture a.venture__name:hover { background: var(--yellow); }
.venture p { color: var(--ink-soft); max-width: 36ch; }
.venture .host { display: block; font-size: var(--step-small); font-weight: 600; margin-top: 0.4rem; color: var(--ink); }

/* Legal */
.legal { grid-column: 1 / span 8; }
.legal h2 {
  font-size: var(--step-h3);
  font-weight: 800;
  font-stretch: 82%;
  line-height: 1.15;
  margin-top: var(--space-4);
  margin-bottom: 0.6rem;
}
.legal p + p { margin-top: 1em; }
.legal .meta { color: var(--ink-soft); }

/* ---------- Closing contact field ---------- */
.contact { padding-block: var(--space-5) var(--space-4); z-index: 1; }
.contact .h2 { font-size: var(--step-title); font-stretch: 70%; max-width: 12ch; line-height: 0.92; }
.contact__body { grid-column: 1 / span 7; }
.contact__body p { margin-top: var(--space-3); font-size: var(--step-lead); font-stretch: 92%; line-height: 1.3; max-width: 32ch; }
.contact__addr { grid-column: 9 / span 4; align-self: end; font-size: var(--step-small); line-height: 1.5; color: var(--on-yellow-soft); }
.contact__addr strong { color: var(--ink); font-weight: 700; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--paper); padding-block: var(--space-4) var(--space-3); font-size: var(--step-small); }
.site-footer ::selection { background: var(--yellow); color: var(--ink); }
.site-footer :focus-visible { outline-color: var(--yellow); }
.site-footer .grid { row-gap: var(--space-3); }
.site-footer h2 { font-size: var(--step-small); font-weight: 700; font-stretch: 100%; margin-bottom: 0.5rem; color: var(--yellow); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: 0.3rem; }
.site-footer a { text-decoration-color: rgba(240, 242, 242, 0.4); }
.site-footer a:hover { color: var(--yellow); text-decoration-color: var(--yellow); }
.foot-brand { grid-column: 1 / span 4; }
.foot-brand .wordmark { font-size: 1.5rem; color: var(--yellow); }
.foot-brand p { margin-top: 0.75rem; max-width: 28ch; color: rgba(240, 242, 242, 0.78); }
.foot-col { grid-column: span 2; }
.foot-col--wide { grid-column: span 4; }
.foot-col--wide p { color: rgba(240, 242, 242, 0.78); max-width: 34ch; }
.foot-base { grid-column: 1 / -1; border-top: 1px solid rgba(240, 242, 242, 0.2); padding-top: var(--space-2); margin-top: var(--space-3); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 2rem; color: rgba(240, 242, 242, 0.7); }

/* ---------- 404 ---------- */
.notfound .title { max-width: 14ch; }

/* ---------- Section marks: one line drawing per section, kept in view while it is read ---------- */
.row--marked > .row__aside { grid-column: 1 / span 4; align-self: start; position: sticky; top: 2.5rem; }
.row--marked > .row__aside .mark { margin-top: var(--space-4); }
.mark { display: block; width: 8rem; height: auto; color: var(--ink); overflow: visible; }
.mark .acc { fill: var(--yellow); }
.mark .m-el { transform-box: fill-box; transform-origin: center; }
.mark .m-grow { transform-origin: left center; }
.row--marked { view-timeline: --row block; }

/* ---------- Motion: marks draw in as their section is read; the loop turns ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mark .m-el {
      animation: m-in linear both;
      animation-timeline: --row;
      animation-range: entry calc(12% + var(--i, 0) * 7%) cover calc(35% + var(--i, 0) * 4%);
    }
    .mark .m-grow { animation-name: m-grow; }
    @keyframes m-in { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
    @keyframes m-grow { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
    .mark .m-spin { transform-box: view-box; transform-origin: 60px 60px; animation: m-spin linear both; animation-timeline: --row; }
    @keyframes m-spin { from { transform: rotate(0deg); } to { transform: rotate(300deg); } }
  }
}

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .row > h2 { grid-column: 1 / -1; margin-bottom: var(--space-3); }
  .row--marked > .row__aside { grid-column: 1 / -1; position: static; display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: var(--space-3); }
  .row--marked > .row__aside .mark { width: 5.5rem; margin-top: 0.3rem; flex: none; }
  .row > .row__body { grid-column: 1 / -1; }
  .intro { grid-column: 1 / span 10; }
  .about-text { grid-column: 6 / span 7; }
  .ventures { grid-column: 1 / -1; }
  .legal { grid-column: 1 / span 11; }
  .contact__body { grid-column: 1 / span 8; }
  .contact__addr { grid-column: 9 / span 4; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-col { grid-column: span 4; }
  .foot-col--wide { grid-column: span 4; }
}

@media (max-width: 48rem) {
  .site-header { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .site-nav ul { gap: 0.2rem 1.1rem; }
  .site-nav a { font-size: 0.975rem; }

  .has-photo .masthead, .has-photo .masthead a { color: var(--yellow); }

  /* photo first, full width; the heading sits on its lower edge in yellow */
  .hero, .band { min-height: auto; grid-template-rows: auto auto; grid-template-columns: 100%; }
  .hero > *, .band > * { grid-column: 1; }
  .hero .photo, .band .photo { position: relative; grid-row: 1; width: 100%; height: auto; max-width: none; }
  .hero .photo { aspect-ratio: 4 / 5; object-position: 62% 18%; }
  .hero__statement, .band__title { grid-row: 1; align-self: end; padding-block: 0 1rem; }
  .split .split__ink { display: none; }
  .split__light { position: static; clip-path: none; }
  .has-photo .band .title { color: var(--yellow); }
  /* ink scrims keep the yellow header and heading legible over bright photo areas */
  .has-photo .hero::after, .has-photo .band::after {
    content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none;
    height: 100vw;
    background: linear-gradient(to bottom, rgba(21,20,15,.86) 0%, rgba(21,20,15,.55) 14%, rgba(21,20,15,0) 30%, rgba(21,20,15,0) 50%, rgba(21,20,15,.78) 100%);
  }
  .has-photo .hero::after { height: 125vw; }
  .hero__foot { grid-row: 2; padding-block: var(--space-3) var(--space-4); }
  .hero__foot .grid > div { grid-column: 1 / -1; }
  .no-photo .band__title { padding-block: var(--space-4); }

  .row--marked > .row__aside { grid-column: 1 / -1; position: static; display: flex; justify-content: space-between; align-items: start; gap: 1rem; margin-bottom: var(--space-3); }
  .row--marked > .row__aside .mark { width: 4.5rem; margin-top: 0.3rem; flex: none; }

  .section { padding-block: var(--space-5); }
  .intro { grid-column: 1 / -1; }
  .loop { grid-template-columns: 1fr; }
  .loop li + li { border-left: 0; margin-left: 0; padding-left: 0; border-top: 1px solid var(--rule-soft); margin-top: var(--space-3); }
  .loop li { display: grid; grid-template-columns: 4.5rem 1fr; column-gap: 1rem; padding-right: 0; }
  .loop__n { grid-row: span 2; font-size: 4rem; margin-bottom: 0; }

  .portrait { grid-column: 1 / -1; margin-bottom: var(--space-4); }
  .about-text { grid-column: 1 / -1; padding-top: 0; }
  .ventures { grid-template-columns: 1fr; }
  .legal { grid-column: 1 / -1; }
  .contact__body { grid-column: 1 / -1; }
  .contact__addr { grid-column: 1 / -1; margin-top: var(--space-4); }
  .foot-col, .foot-col--wide { grid-column: 1 / -1; }
}

@media print {
  .field { background: none; }
  .photo, .mark, .site-nav, .skip { display: none; }
  .site-footer { background: none; color: var(--ink); }
}

/* Long German compounds in titles */
.band--short .title { max-width: none; }
.title, .h2, .display { hyphens: manual; }
:lang(de) .title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }