@font-face {
  font-family: Newsreader;
  src: url('../porcupyn-interim/assets/fonts/newsreader.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url('../porcupyn-interim/assets/fonts/manrope.ttf') format('truetype');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  /* Approved V2 identity tokens. A variation re-points the ground and text roles. */
  --plum: #914C9A;
  --ground: #F6F3F7;
  --ink: #25232A;
  --muted: #625B63;
  --rule: #D8D1D5;
  --focus: var(--plum);
  --display: Newsreader, Georgia, serif;
  --body: Manrope, system-ui, sans-serif;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --page-width: 1280px;
  --gutter: 64px;
  --logo-width: 208px;
  --headline-size: clamp(80px, 10.4vw, 152px);
  --body-size: 20px;
  --ui-size: 16px;
  --feedback: 180ms;
}
* { box-sizing: border-box; }
html { background: var(--ground); color: var(--ink); }
body {
  margin: 0;
  font: 400 var(--ui-size)/1.65 var(--body);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--plum); color: #fff; }
.page {
  width: min(var(--page-width), 100%);
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100svh;
  padding-inline: var(--gutter);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.masthead { padding-top: var(--space-4); }
.brand { display: block; width: var(--logo-width); max-width: 100%; }
.brand img { display: block; width: 100%; height: auto; }
.introduction {
  padding-block: var(--space-7);
  align-self: center;
  --od-gap: var(--space-5);
}
h1 {
  margin: 0;
  font: 500 var(--headline-size)/1.06 var(--display);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.support { --od-gap: var(--space-4); }
.statement {
  margin: 0;
  max-width: 46ch;
  font-size: var(--body-size);
  line-height: 1.65;
  text-wrap: pretty;
}
.contact {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-4);
  min-height: 48px;
  padding-block: var(--space-1);
  color: var(--cta, var(--plum));
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
}
.contact .od-icon {
  --od-icon-size: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--feedback) ease-out;
}
.contact:focus-visible, .skip:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: var(--space-1);
}
.contact:active .od-icon { transform: translateX(4px); }
.footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-3) var(--space-4);
  color: var(--muted);
}
.footer p { margin: 0; }
.skip {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 1;
  padding: var(--space-2);
  background: var(--ground);
  color: var(--ink);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
@media (hover: hover) {
  .contact:hover .od-icon { transform: translateX(4px); }
  .contact:hover { border-bottom-width: 2px; padding-bottom: 7px; }
}
@media (min-width: 1440px) {
  :root { --gutter: 80px; }
}
@media (max-width: 1023px) {
  :root { --gutter: 48px; --headline-size: clamp(72px, 10.4vw, 112px); }
}
@media (max-width: 767px) {
  :root {
    --gutter: 24px;
    --logo-width: 176px;
    --headline-size: clamp(56px, 11.6vw, 88px);
    --body-size: 18px;
  }
  .masthead { padding-top: max(var(--space-3), env(safe-area-inset-top)); }
  .introduction { padding-block: var(--space-6); --od-gap: var(--space-4); }
  .statement { max-width: 36ch; }
  .footer { padding-bottom: max(var(--space-3), env(safe-area-inset-bottom)); }
}
@media (max-width: 374px) {
  :root { --gutter: 16px; --headline-size: clamp(40px, 13vw, 56px); }
  .contact { gap: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  .contact .od-icon { transition: none; transform: none !important; }
}