:root {
  --paper: #f4eee4;
  --paper-bright: #fff9e9;
  --ink: #211d1a;
  --muted: #625c56;
  --coral: #ef765f;
  --mint: #a9dfc9;
  --yellow: #f2c84b;
  --focus: #1c5f8a;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --shadow: 9px 9px 0 var(--ink);
}

* { box-sizing: border-box; }

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

.portal {
  min-height: 100svh;
  padding: clamp(32px, 7vw, 88px) clamp(18px, 7vw, 96px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.portal::before,
.portal::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.portal::before {
  width: 43vw;
  height: 29vw;
  right: -12vw;
  top: -11vw;
  background: var(--coral);
  transform: rotate(10deg);
}

.portal::after {
  width: 39vw;
  height: 21vw;
  left: -14vw;
  bottom: 3vw;
  background: var(--mint);
  transform: rotate(-9deg);
}

.portal__inside {
  width: min(1080px, 100%);
  margin: 0 auto;
}

.eyebrow {
  display: inline-block;
  padding: 9px 13px;
  background: var(--ink);
  color: var(--paper);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  transform: rotate(-2deg);
}

h1 {
  max-width: 820px;
  margin: 42px 0 58px;
  font: 700 clamp(58px, 11vw, 150px)/.78 Georgia, "Times New Roman", serif;
  letter-spacing: -.08em;
}

.tools {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
}

.tool-card {
  display: flex;
  min-height: 184px;
  align-items: center;
  gap: var(--space-2);
  padding: 22px;
  border: 2px solid var(--ink);
  background: var(--paper-bright);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
  transform: rotate(-1.8deg);
  transition: transform .18s ease, box-shadow .18s ease;
}

.tool-card:nth-child(2) {
  margin-top: 26px;
  background: var(--yellow);
  transform: rotate(2.8deg);
}

.tool-card:nth-child(3) {
  background: #e8f4ec;
  transform: rotate(-1deg);
}

.tool-card:hover {
  transform: translateY(-5px) rotate(0deg);
  box-shadow: 13px 13px 0 var(--ink);
}

.tool-card:active { transform: translate(3px, 3px) rotate(0deg); box-shadow: 5px 5px 0 var(--ink); }

.tool-card:focus-visible {
  outline: 4px solid var(--focus);
  outline-offset: 5px;
}

.tool-card__icon {
  display: grid;
  width: 62px;
  height: 62px;
  flex: 0 0 62px;
  place-items: center;
  border: 2px solid var(--ink);
  background: var(--paper-bright);
}

.tool-card__icon svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.tool-card strong { display: block; font-size: clamp(18px, 1.55vw, 23px); line-height: 1.05; }

.tool-card small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.tool-card__arrow { margin-left: auto; align-self: center; font-size: 28px; line-height: 1; }

.footer { margin: 70px 0 0; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

@media (max-width: 900px) {
  .tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card:nth-child(3) { grid-column: 1 / -1; width: calc(50% - 12px); }
}

@media (max-width: 620px) {
  .portal { padding: 30px 18px 38px; }
  .portal::before { width: 78vw; height: 51vw; right: -30vw; top: -13vw; }
  .portal::after { width: 78vw; height: 33vw; left: -27vw; bottom: 8vw; }
  h1 { margin: 35px 0 48px; font-size: clamp(62px, 19vw, 104px); letter-spacing: -.09em; }
  .tools { display: grid; grid-template-columns: 1fr; gap: 21px; }
  .tool-card,
  .tool-card:nth-child(2),
  .tool-card:nth-child(3) { width: 100%; min-height: 150px; margin: 0; transform: none; }
  .tool-card:hover, .tool-card:focus-visible { transform: translateY(-3px); }
  .tool-card__icon { width: 56px; height: 56px; flex-basis: 56px; }
  .tool-card strong { font-size: 19px; }
  .footer { margin-top: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .tool-card, .tool-card:nth-child(2), .tool-card:nth-child(3), .eyebrow { transform: none; }
}