/* ---------------------------------------------------------------------------
   Louis Snauwaert — one-screen identity page.
   The desktop composition is a 1:1 rebuild of the 8000x4500 reference artwork,
   so most positions below are expressed as percentages of that canvas.
--------------------------------------------------------------------------- */

@font-face {
  font-family: "Absans";
  src: url("/fonts/absans-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aileron";
  src: url("/fonts/aileron-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #faf9f6;
  --ink: #100f0c;

  /* Reference canvas: name 495px tall type on an 8000px stage -> 6.19vw. */
  --fs-name: clamp(2.5rem, 6.19vw, 11rem);
  /* Reference canvas: 152px caps on an 8000px stage -> 1.9vw. */
  --fs-foot: clamp(0.78rem, 1.9vw, 1.9rem);
  --lh-foot: 1.157;
  /* The about copy is set at the same 152px as the footer -> 1.9vw. */
  --fs-about: clamp(0.8rem, 1.9vw, 1.9rem);
  --lh-about: 0.954;   /* 145px baseline-to-baseline / 152px type size */

  --inset-x: 1.875vw;   /* footer gutters, from the reference */
  --inset-name: 4.7vw;  /* the name sits further in than the footer */
  --inset-about: 5.15vw;/* left edge of the about panel, x=412 in the reference */
  --inset-b: 2.4vh;
  --inset-t: 2.1vh;     /* lands the ABOUT cap top at y=130 in the reference */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Aileron", "Helvetica Neue", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  text-rendering: optimizeLegibility;
}

.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

/* --- artwork ------------------------------------------------------------- */

/* The scan is black ink on white; multiply drops the white out so the poppy
   sits directly on the paper colour without shipping an alpha channel. */
.art {
  position: absolute;
  top: 0;
  left: 41.85%;              /* horizontal centre of the artwork in the reference */
  height: 100%;
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
  animation: art-in 1400ms var(--ease) both;
}

/* --- name ---------------------------------------------------------------- */

.name {
  position: absolute;
  top: 54.05%;               /* line-box top that lands the baseline at 63.5% */
  left: var(--inset-name);
  right: var(--inset-name);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  font-family: "Absans", "Helvetica Neue", Helvetica, sans-serif;
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.name__part {
  display: inline-block;
  animation: rise 1000ms var(--ease) both;
}

.name__part:nth-child(1) { animation-delay: 120ms; }
.name__part:nth-child(2) { animation-delay: 220ms; }

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

.foot {
  position: absolute;
  bottom: var(--inset-b);
  left: var(--inset-x);
  right: var(--inset-x);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
  text-transform: uppercase;
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li {
  animation: rise 800ms var(--ease) both;
}

.disciplines li:nth-child(1) { animation-delay: 360ms; }
.disciplines li:nth-child(2) { animation-delay: 420ms; }
.disciplines li:nth-child(3) { animation-delay: 480ms; }

.links { text-align: right; }
.links li:nth-child(1) { animation-delay: 400ms; }
.links li:nth-child(2) { animation-delay: 460ms; }
.links li:nth-child(3) { animation-delay: 520ms; }

.links a {
  position: relative;
  color: inherit;
  text-decoration: none;
  outline: none;
}

/* Rule drawn under the link on hover, wiping in from the trailing edge. */
.links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 420ms var(--ease);
}

.links a:hover::after,
.links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.links a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.28em;
}

/* --- about --------------------------------------------------------------- */

/* A native disclosure, so the panel opens and closes without any script.
   The element spans the full measure of the panel; only the toggle and the
   open panel take pointer events, leaving the top band selectable. */
.about {
  position: absolute;
  top: var(--inset-t);
  left: var(--inset-about);
  right: var(--inset-x);
  z-index: 3;
  font-size: var(--fs-foot);
  line-height: var(--lh-foot);
  text-align: right;
  pointer-events: none;
}

.about__toggle {
  display: inline-block;
  list-style: none;
  cursor: pointer;
  pointer-events: auto;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  outline: none;
  animation: rise 800ms var(--ease) both;
  animation-delay: 320ms;
}

.about__toggle::-webkit-details-marker { display: none; }

.about__toggle:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 0.28em;
}

.about__panel {
  margin-top: 0.95vh;      /* 34px below the ABOUT line box in the reference */
  padding: 1.13vw 1.25vw 1.08vw;
  border: 1px solid var(--ink);
  background: var(--paper);
  pointer-events: auto;
  font-size: var(--fs-about);
  line-height: var(--lh-about);
  text-align: left;
  text-transform: none;
  max-height: calc(100dvh - var(--inset-t) - 8vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: panel-in 420ms var(--ease) both;
}

/* Paragraphs are separated by exactly one blank line, as in the reference. */
.about__panel p { margin: 0 0 calc(var(--lh-about) * 1em); }
.about__panel p:last-child { margin-bottom: 0; }

/* --- portrait / small screens -------------------------------------------- */

@media (orientation: portrait), (max-width: 640px) {
  :root {
    --fs-name: clamp(2.25rem, 13.5vw, 5.5rem);
    --fs-foot: clamp(0.72rem, 3.3vw, 1.05rem);
    --fs-about: clamp(0.88rem, 3.5vw, 1.1rem);
    --lh-about: 1.4;   /* body copy needs air at this size, unlike the poster */
    --inset-x: 6vw;
    --inset-name: 6vw;
  }

  /* Source order is artwork -> name -> footer, which mirrors the vertical
     order of the reference. The artwork row absorbs all the slack. */
  .stage {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto auto;
    row-gap: 3vh;
    padding: 0 var(--inset-x) max(3.5vh, 1.5rem);
  }

  .name {
    position: static;
    display: block;
    line-height: 0.94;
    margin-bottom: 2vh;
  }

  .name__part {
    display: block;
  }

  .name__part:nth-child(2) {
    text-indent: 0.9em;      /* keeps the split-line tension of the original */
  }

  /* Oversized and pinned to the top edge so the crop reads as a bleed,
     the way it does on the landscape composition. */
  .art {
    position: static;
    transform: none;
    height: 100%;
    width: 122vw;
    max-width: none;
    margin-left: calc(50% - 61vw);
    object-fit: cover;
    object-position: 50% 0;
    animation-duration: 1100ms;
  }

  .foot {
    position: static;
    gap: 1rem;
  }

  /* The stage is padded here, but the panel is still absolutely positioned
     against its padding box, so the gutters have to be restated. */
  .about {
    top: 2.2vh;
    left: var(--inset-x);
    right: var(--inset-x);
  }

  /* The artwork bleeds to the top edge on phones, so the toggle needs its own
     patch of paper to stay legible over the halftone. */
  .about__toggle {
    padding: 0 0.35em;
    background: var(--paper);
  }

  .about__panel {
    padding: 4vw;
    max-height: 74dvh;
  }
}

/* Roomier portrait screens (tablets): show the whole plant rather than a
   tight crop of it — there is enough height to fit the full drawing. */
@media (orientation: portrait) and (min-width: 640px) {
  :root {
    --fs-name: clamp(3.25rem, 10.5vw, 7rem);
    --fs-foot: clamp(0.85rem, 2vw, 1.15rem);
    --inset-x: 5vw;
    --inset-name: 5vw;
  }

  .art {
    width: 100%;
    margin-left: 0;
    object-fit: contain;
  }
}

/* A phone held sideways keeps the landscape composition, but --fs-about is a
   vw, so below ~950px the about copy drops under 18px — the size at which the
   poster's 0.954 leading stops being readable. Loosen it there; the reference
   has nothing to say about a 390px-tall viewport. */
@media (min-width: 641px) and (max-width: 950px) and (orientation: landscape) {
  :root {
    --lh-about: 1.25;
  }
}

@media (max-width: 380px) {
  .foot { font-size: 0.7rem; }
}

/* --- motion -------------------------------------------------------------- */

@keyframes art-in {
  from { opacity: 0; transform: translateX(-50%) scale(1.015); }
  to   { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.32em); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes panel-in {
  from { opacity: 0; transform: translateY(-0.35em); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (orientation: portrait), (max-width: 640px) {
  @keyframes art-in {
    from { opacity: 0; transform: scale(1.015); }
    to   { opacity: 1; transform: scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .art,
  .name__part,
  .foot li,
  .about__toggle,
  .about__panel {
    animation: none;
  }

  .links a::after {
    transition: none;
  }
}