/* =========================================================
   UNHAVE/STUDIO — background line art
   One hairline drawing per page, parked in the clean space at
   the top right of the opening section. Same three rules
   everywhere: ink hairlines, one solid red accent, mono
   caption. The curves are built by artwork.js so the hanging
   detail (bridge suspenders, balloon gores) sits on the real
   geometry — this file only decides where it sits and how it
   behaves.
   ========================================================= */

/* ---------- placement ---------- */

/* One source of truth for how much room the drawing takes: the mount
   sizes itself from it, and the rule reservation below hands that same
   share of the section back to the content. */
:root {
  --art-w: clamp(12rem, 28vw, 26rem);
  --art-gap: clamp(1rem, 3vw, 3rem);
}

.artwork {
  position: absolute;
  top: clamp(0.5rem, 1.2vw, 1.75rem);
  right: var(--pad);
  z-index: 0;
  width: var(--art-w);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

/* The drawing shares a section with the headline, so it has to paint
   behind it. Positioning the content instead of pushing the artwork
   to a negative z-index keeps it visible either way — a negative
   index would drop it under the section background. */
.hero__grid,
.page-head > .shell {
  position: relative;
}

/* On the index the eyebrow rule belongs to the hero's left grid column,
   so it stops short of the drawing on its own. The page heads have no
   such column — their eyebrow spans the whole shell — which draws its
   rule straight across the artwork. Capping the eyebrow to leave the
   drawing its width reproduces the hero's behaviour exactly. */
@media (min-width: 52rem) {
  .page-head__eyebrow {
    max-width: calc(100% - var(--art-w) - var(--art-gap));
  }
}

.artwork__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  transform: translate3d(var(--px, 0), var(--py, 0), 0);
  transition: transform 0.7s var(--ease);
}

/* ---------- the drawing ---------- */
.a {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* hairline weight has to survive the drawing being scaled down */
  vector-effect: non-scaling-stroke;
  opacity: 0.82;
}

.a--soft {
  opacity: 0.36;
  stroke-width: 1;
}

.a--red {
  stroke: var(--red);
  opacity: 1;
}

.a--solid {
  fill: var(--red);
  stroke: none;
  opacity: 1;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- caption ---------- */
.artwork__label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

.artwork__label::before {
  content: "";
  flex: none;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--red);
}

/* ---------- draw-in ---------- */
/* pathLength="1" is set on every node in artwork.js, so a dash
   offset of 1 is the whole path no matter how long it is. */
.js .a {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.js .a--solid {
  opacity: 0;
}

.js .artwork.is-in .a {
  animation: a-draw 1.5s var(--ease) both;
  animation-delay: var(--d, 0ms);
}

.js .artwork.is-in .a--solid {
  animation: a-pop 0.9s var(--ease) both;
  animation-delay: calc(var(--d, 0ms) + 220ms);
}

@keyframes a-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes a-pop {
  from {
    opacity: 0;
    transform: scale(0.55);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- reveal ---------- */
.js .artwork {
  opacity: 0;
  transform: translateY(1.5rem);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}

.js .artwork.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- responsive ---------- */
/* Under this the opening section is a single column of oversized
   type edge to edge. There is no clean space left on the right,
   so the drawing would sit on top of the headline. */
@media (max-width: 52rem) {
  .artwork {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .artwork__svg {
    transform: none;
  }
}

@media print {
  .artwork {
    display: none;
  }
}