/* ==========================================================================
   Contact at the end of every page (styles/contact.css does the device).

   The case pages are built on styles/woodberg.css, which has its own palette
   and no spacing scale, so this hands the device the few things it expects
   and gives the block its own room at the foot of the page.
   ========================================================================== */
.page-contact {
  /* The case pages keep their palette inside the top bar, so the device is handed
     the same names it has on the home page, pointed at the WoodBerg colours. */
  --ink: var(--wb-page-bg, #151513);
  --ink-2: var(--wb-page-surface, #1b1a17);
  --ink-3: var(--wb-nav-hover, #221f1b);
  --line: var(--wb-line, rgb(237 234 227 / 0.18));
  --paper: var(--wb-page-text, #edeae3);
  --paper-dim: var(--wb-muted, #b7b3aa);
  --paper-mute: var(--wb-muted, #8a8479);
  --acid: var(--portfolio-acid, #c6f432);
  --on-acid: var(--portfolio-on-acid, #15150f);
  --accent-text: var(--portfolio-accent-text, #c6f432);
  --press: 90ms;
  --ease: var(--wb-ease, cubic-bezier(0.16, 1, 0.3, 1));
  --f-body: "Geist", ui-sans-serif, system-ui, sans-serif;

  /* the scale and type the device is drawn with */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;
  --label: 13px;
  --label-lh: 20px;
  --f-mono: var(--f-body, ui-monospace, "SF Mono", monospace);
  --paper-mute: var(--wb-muted, #8a8479);

  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Tall enough to feel like the home page's closing screen, but not forced to a
     full screen: the footer follows straight on, so a fixed height leaves a hole. */
  padding: clamp(96px, 15vh, 168px) var(--wb-pad, 48px) clamp(72px, 10vh, 120px);
  background: var(--wb-page-bg, #151513);
  color: var(--wb-page-text, #edeae3);
  text-align: left;
  overflow: hidden;
}

/* The same block as the home page: the words and the device in the left half */
.page-contact .reach--device {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0;
}

.page-contact .reach__title {
  margin: 0;
  max-width: 20ch;
  font-family: var(--wb-display, inherit);
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 650;
  line-height: 1.02;
  letter-spacing: -0.01em;
}

.page-contact .device { text-align: left; }

/* Wide screens: the left half, exactly as the home page does it */
@media (min-width: 1024px) {
  .page-contact .reach--device { width: min(580px, 44vw); }
  .page-contact .reach__title { font-size: clamp(40px, 3.6vw, 52px); }
}

/* ---------- The two things behind it, as on the home page ---------- */
/* The grain band that carries the page into the contact (scripts/seam.js) */
.page-contact .seam {
  position: absolute;
  z-index: 0;
  left: 0;
  top: -120px;
  width: 100%;
  height: calc(120px + 50svh);
  pointer-events: none;
}
.page-contact .seam canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}

/* The faint fingerprint on the right (scripts/print.js, echo only here) */
.page-contact .print-echo { display: none; }
.page-contact .print__ridges {
  fill: none;
  stroke: var(--paper);
  stroke-linecap: round;
  stroke-width: 1.6;
  vector-effect: non-scaling-stroke;
}
.page-contact .print-echo.is-inked .print__ridges path {
  stroke: var(--accent-text);
  stroke-opacity: 0.5;
}

@media (min-width: 1024px) {
  .page-contact .print-echo {
    display: block;
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -6%;
    width: min(88vh, 56vw);
    aspect-ratio: 1;
    translate: 0 -50%;
    pointer-events: none;
    background: radial-gradient(closest-side at 50% 54%, var(--ink) 52%, transparent 97%);
  }
  .page-contact .print-echo svg { display: block; width: 100%; height: 100%; }
  .page-contact .print__echo { stroke-opacity: 0.12; }
}

/* The words and the device sit over both */
.page-contact .reach--device { position: relative; z-index: 1; }