/* RunicRoots — the page is a cross-section. The mark is planted on the
   surface line; its roots grow underground into one attack path, and the
   taproot carries on down the left edge as the rail every section hangs from. */

/* Archivo (variable: wdth 62–125, wght 100–900), self-hosted. SIL OFL 1.1, see assets/fonts/OFL.txt. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Survey variant, generated by make-survey.py. Token names are kept
     from the main site: --obsidian is Ink, --amethyst is Contour,
     --fog is Paper, --ember is Blaze. */
  --obsidian: #0B0E15;
  --rune: #3F5F8F;
  --amethyst: #8FB4E3;
  --slate: #33394A;
  --mist: #9AA0AA;
  --fog: #EFE9DC;

  /* derived */
  --dusk: #12161F;
  --sky-top: #080A10;
  --sky-horizon: #202936;
  --rune-deep: #36517A;
  --bedrock: #07090E;

  /* signal: the finding colour. Rare on purpose, only where impact lands. */
  --ember: #FF6B1A;

  --font: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --indent: clamp(28px, 6vw, 88px);
  --shell: 1200px;
  --root: 2.5px;
  --mark-w: clamp(150px, 17vw, 230px);
  --header-h: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bedrock); }
body {
  margin: 0;
  background: var(--obsidian);
  color: var(--fog);
  font-family: var(--font);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--rune); color: #fff; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 700; text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--amethyst); outline-offset: 3px; border-radius: 2px; }

.skip-link {
  position: absolute;
  left: 16px;
  top: 12px;
  z-index: 10;
  padding: 10px 14px;
  background: var(--fog);
  color: var(--obsidian);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Header ------------------------------------------------------------ */

.site-header { position: relative; z-index: 5; }
.nav-shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -.01em;
}
.brand img { width: 27px; height: auto; }

.site-nav { display: flex; gap: clamp(20px, 3vw, 40px); }
.site-nav a {
  font-size: 1rem;
  font-weight: 500;
  color: var(--mist);
  text-decoration: none;
  padding-block: 6px;
  background: linear-gradient(var(--amethyst), var(--amethyst)) left bottom / 0 2px no-repeat;
  transition: background-size .2s ease, color .2s ease;
}
.site-nav a:hover { color: var(--fog); background-size: 100% 2px; }

.menu-button {
  display: none;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--fog);
  background: none;
  border: 1.5px solid var(--slate);
  border-radius: 3px;
  padding: 6px 14px;
  cursor: pointer;
}

/* Hero -------------------------------------------------------------- */

.hero { position: relative; }

/* script.js draws the mark and its roots into this overlay, in hero pixel
   space, so they join as one shape. Above the soil, below the labels. */
.roots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* Above ground: night over a purple horizon, with the brand glow rising from
   where the mark stands. script.js adds the mountains, the scan rings, the
   sweep and the targets it finds. */
.surface {
  position: relative;
  text-align: center;
}

/* The sky runs up behind the header, so the beam is never cut off by it. */
.sky {
  position: absolute;
  inset: calc(-1 * var(--header-h)) 0 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(45% 55% at 50% 100%, rgb(103 138 185 / .3), transparent 70%),
    linear-gradient(to bottom, var(--sky-top) 0%, #11161F 50%, var(--sky-horizon) 100%);
}
.sky-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The radar beam: a bright leading edge with a fading tail, turning about the
   mark. Half of each turn it is below the horizon, which is the pause. */
.sweep {
  position: absolute;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgb(143 180 227 / 0) 0deg,
    rgb(143 180 227 / 0) 300deg,
    rgb(143 180 227 / .26) 357deg,
    rgb(210 225 244 / .85) 359.6deg,
    rgb(143 180 227 / 0) 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent 92%);
  mask-image: radial-gradient(closest-side, #000 25%, transparent 92%);
  will-change: transform;
}

/* Exposed assets. The beam pings each one as it passes; four of them are the
   scraps the roots below start from, each with its recon readout. */
.target { position: absolute; width: 0; height: 0; }
.target .blip {
  position: absolute;
  left: -2.5px;
  top: -2.5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amethyst);
  opacity: .3;
  transition: opacity .8s ease;
}
.target.found .blip { opacity: .8; }
.target .blip::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid var(--amethyst);
  opacity: 0;
}
.target.ping .blip::after { animation: ping 1.5s ease-out; }
/* The four scraps are findings: they light ember once the beam finds them. */
.target[data-side].found .blip { background: var(--ember); }
.target[data-side] .blip::after { border-color: var(--ember); }
@keyframes ping {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(8); opacity: 0; }
}
.target .tag {
  position: absolute;
  top: 0;
  transform: translateY(-50%);
  white-space: nowrap;
  font: 500 .75rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--mist);
  opacity: 0;
  transition: opacity .6s ease;
}
.target .tag b { font-weight: 500; color: var(--ember); }
.target[data-side="r"] .tag { left: 10px; }
.target[data-side="l"] .tag { right: 10px; }
.target.ping .tag,
.target.steady .tag { opacity: 1; }
.target .drop {
  position: absolute;
  left: -.5px;
  top: 8px;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--amethyst) 0 3px, transparent 3px 7px);
  opacity: .2;
  transition: opacity .6s ease;
}
.target.ping .drop,
.target.steady .drop { opacity: .5; }

.hero-copy { position: relative; padding-top: clamp(32px, 7vh, 88px); }

h1 {
  font-size: clamp(3.5rem, 9.2vw, 7.75rem);
  line-height: .9;
  font-weight: 800;
  font-variation-settings: "wdth" 68;
  letter-spacing: -.01em;
  color: var(--fog);
}

.hero-lead {
  max-width: 34em;
  margin: 28px auto 32px;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--mist);
}

.button {
  display: inline-block;
  padding: 14px 22px;
  border-radius: 3px;
  background: var(--rune);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  font-variation-settings: "wdth" 92;
  text-decoration: none;
  transition: background-color .15s ease;
}
.button:hover { background: var(--rune-deep); }

/* The mark stands on the surface line: the ring and tree above ground,
   the root tips just below it. 290/342 of the mark's height is the line. */
.planted {
  position: relative;
  z-index: 2;
  width: var(--mark-w);
  margin: clamp(48px, 8vh, 88px) auto calc(var(--mark-w) * -52 / 315);
}
.planted img { width: 100%; height: auto; }
/* script.js draws the same mark, as vectors, inside the roots layer */
.vector-mark .planted img { visibility: hidden; }

/* Below ground */
.soil {
  background: var(--obsidian);
  border-top: 1px solid var(--slate);
}
.trace {
  position: relative;
  z-index: 3;
  height: clamp(460px, 64vh, 620px);
}

.node {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0;
  height: 0;
}
.node .dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--obsidian);
  border: 2.5px solid var(--amethyst);
  transform: translate(-50%, -50%);
}
.node .label {
  position: absolute;
  top: 0;
  width: max-content;
  max-width: 12.5em;
  padding: 3px 6px;
  font-size: .875rem;
  line-height: 1.35;
  color: var(--fog);
  background: var(--obsidian);
  border-radius: 3px;
}
[data-side="r"] .label { left: 12px; transform: translateY(-50%); text-align: left; }
[data-side="l"] .label { right: 12px; transform: translateY(-50%); text-align: right; }

.node.end .dot {
  width: 17px;
  height: 17px;
  background: var(--ember);
  box-shadow: 0 0 0 5px var(--obsidian), 0 0 22px 6px rgb(255 107 26 / .35);
}
.node.end .label {
  max-width: 30em;
  left: 18px;
  transform: translateY(-14px);
  font-size: 1.0625rem;
  color: var(--mist);
  background: transparent;
}
.node.end strong { color: var(--ember); font-weight: 700; }

/* The root causes on the roots. Each node's label is a button; hover, focus
   or tap it and the breach it led to pops up beside the root (CSS :has; the
   click in script.js only pins it). The labels stay plain text without CSS. */
.node button.label {
  margin: 0;
  border: 0;
  font: inherit;
  font-size: .875rem;
  line-height: 1.35;
  font-weight: 500;
  cursor: pointer;
  transition: color .3s ease;
}
.node button.label:hover,
.node button.label[aria-expanded="true"] { color: var(--amethyst); }
.node:has(.label:hover, .label:focus-visible, .label[aria-expanded="true"], .pop:hover) .dot { background: var(--amethyst); }
.growing .node:not(.reached) .label { pointer-events: none; }
.pop {
  position: absolute;
  top: 26px;
  z-index: 5;
  width: min(24em, calc(100vw - 2 * var(--gutter)));
  padding: 16px 18px 18px;
  text-align: left;
  background: var(--dusk);
  border: 1px solid var(--slate);
  border-left: 2px solid var(--amethyst);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgb(0 0 0 / .45);
  opacity: 0;
  visibility: hidden;
  translate: 0 8px;
  transition: opacity .3s ease, translate .3s ease, visibility 0s linear .3s;
}
.pop.pair {
  width: min(42em, calc(100vw - 2 * var(--gutter)));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
}
[data-side="r"] .pop { left: 12px; }
[data-side="l"] .pop { right: 12px; }
/* The middle roots open beside their label, the bottom one opens upward, so
   nothing runs over the end of the path. */
[data-node="f1"] .pop { top: 0; left: calc(12px + 13em); transform: translateY(-50%); }
[data-node="f2"] .pop { top: 0; right: calc(12px + 13em); transform: translateY(-50%); }
[data-node="f3"] .pop, [data-node="g1"] .pop { top: auto; bottom: 26px; }
.node:has(.label:hover, .label:focus-visible, .label[aria-expanded="true"], .pop:hover) .pop {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
.hit .year {
  margin-bottom: 2px;
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--amethyst);
}
.hit h3 {
  font-size: 1.375rem;
  line-height: 1.1;
  font-weight: 650;
  font-variation-settings: "wdth" 80;
}
.hit p { font-size: .9375rem; }
.hit h3 + p { margin-top: 8px; }
.hit .cause { margin-top: 8px; }
.hit .cause b { font-weight: 650; color: var(--amethyst); }
@media (max-width: 1200px) {
  [data-node="f1"] .pop.pair, [data-node="f2"] .pop.pair, [data-node="g1"] .pop.pair { width: min(24em, calc(100vw - 2 * var(--gutter))); grid-template-columns: 1fr; }
  [data-node="f1"] .pop.pair .hit + .hit, [data-node="f2"] .pop.pair .hit + .hit, [data-node="g1"] .pop.pair .hit + .hit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate); }
}
@media (max-width: 880px) {
  .pop.pair { width: min(24em, calc(100vw - 2 * var(--gutter))); grid-template-columns: 1fr; }
  .pop.pair .hit + .hit { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--slate); }
}
@media (prefers-reduced-motion: reduce) {
  .node button.label, .pop { transition: none; }
}

/* Node positions, as % of the trace box. script.js draws roots between them. */
[data-node="s1"] { --x: 8%;  --y: 21%; }
[data-node="s2"] { --x: 27%; --y: 23%; }
[data-node="s3"] { --x: 67%; --y: 19%; }
[data-node="s4"] { --x: 92%; --y: 31%; }
[data-node="f1"] { --x: 23%; --y: 52%; }
[data-node="f2"] { --x: 78%; --y: 55%; }
[data-node="f3"] { --x: 55%; --y: 78%; }
[data-node="g1"] { --x: 92%; --y: 78%; }
[data-node="end"] { --x: 0%; --y: 100%; }

/* Labels wait for their root to arrive (only while script runs the growth). */
.growing .node .label,
.growing .node .dot { opacity: 0; transition: opacity .5s ease; }
.growing .node.reached .label,
.growing .node.reached .dot { opacity: 1; }

/* Depths: every section hangs off the taproot ----------------------- */

.depths {
  background: linear-gradient(to bottom, var(--obsidian) 0%, var(--obsidian) 40%, var(--bedrock) 100%);
}

.stratum { padding-block: clamp(96px, 14vh, 160px) 0; }
.stratum:first-child { padding-top: clamp(120px, 16vh, 184px); }
.stratum.bedrock { padding-bottom: clamp(96px, 14vh, 160px); }

.rail {
  position: relative;
  isolation: isolate;
  padding-left: calc(var(--gutter) + var(--indent));
}
/* script.js draws each section's small root system here: behind the text,
   above the section background. */
.rail-roots {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: -1;
}
.js-roots .service::before { display: none; }
.rail::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  top: calc(-1 * clamp(96px, 14vh, 160px));
  bottom: calc(-1 * clamp(96px, 14vh, 160px));
  width: var(--root);
  background: var(--amethyst);
  transform: translateX(-50%);
}
.stratum:first-child .rail::before { top: calc(-1 * clamp(120px, 16vh, 184px)); }
.bedrock .rail::before {
  bottom: -72px;
  background: linear-gradient(var(--amethyst) 65%, transparent);
}

.rail h1,
.rail h2 {
  position: relative;
  max-width: 16em;
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1;
  font-weight: 760;
  font-variation-settings: "wdth" 72;
  letter-spacing: -.005em;
}
/* node on the rail, and the branch that carries it to the heading */
.rail h1::before,
.rail h1::after,
.rail h2::before,
.rail h2::after {
  content: "";
  position: absolute;
  top: .5em;
  left: calc(-1 * var(--indent));
}
.rail h1::before,
.rail h2::before {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--amethyst);
  transform: translate(-50%, -50%);
}
.rail h1::after,
.rail h2::after {
  width: calc(var(--indent) - 16px);
  height: var(--root);
  background: var(--amethyst);
  transform: translateY(-50%);
}

.intro {
  max-width: 34em;
  margin-top: 24px;
  font-size: 1.1875rem;
  color: var(--mist);
}

/* What we do */
.services { margin-top: clamp(48px, 7vh, 80px); }
.service {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px 48px;
  padding-block: 28px;
  position: relative;
}
.service::before {
  content: "";
  position: absolute;
  top: calc(28px + .7em);
  left: calc(-1 * var(--indent));
  width: calc(var(--indent) - 20px);
  height: 1px;
  background: var(--amethyst);
  opacity: .4;
}
.service h3 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.1;
  font-weight: 650;
  font-variation-settings: "wdth" 80;
}
.service p { max-width: 32em; }
.service .covers { margin-top: 10px; font-size: .9375rem; color: var(--mist); }

/* Method: a real sequence, so it is numbered, and it steps downward. */
.steps {
  list-style: none;
  margin: clamp(48px, 7vh, 80px) 0 0;
  padding: 0;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: 12px;
  max-width: 34rem;
  margin-left: calc(var(--i, 0) * clamp(0px, 7vw, 112px));
}
.steps li + li { margin-top: 36px; }
.steps li:nth-child(2) { --i: 1; }
.steps li:nth-child(3) { --i: 2; }
.steps li:nth-child(4) { --i: 3; }
.steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-size: 3rem;
  line-height: .9;
  font-weight: 300;
  font-variation-settings: "wdth" 70;
  color: var(--amethyst);
}
.steps h3 {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 650;
  font-variation-settings: "wdth" 85;
  margin-bottom: 6px;
}
.steps p { color: var(--mist); }

/* Principles */
.principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px clamp(32px, 6vw, 88px);
  margin-top: clamp(48px, 7vh, 72px);
  max-width: 62rem;
}
.principles h3 {
  font-size: 1.3125rem;
  line-height: 1.25;
  font-weight: 650;
  font-variation-settings: "wdth" 90;
  margin-bottom: 8px;
}
.principles p { color: var(--mist); max-width: 26em; }

/* Contact */
.contact-mail {
  display: inline-block;
  max-width: 100%;
  margin-top: clamp(32px, 5vh, 48px);
  font-size: clamp(2rem, 6.4vw, 4.25rem);
  line-height: 1;
  font-weight: 800;
  font-variation-settings: "wdth" 72;
  color: var(--fog);
  overflow-wrap: anywhere;
  text-decoration: underline;
  text-decoration-color: var(--rune);
  text-decoration-thickness: .08em;
  text-underline-offset: .14em;
  transition: color .2s ease, text-decoration-color .2s ease;
}
.contact-mail:hover { color: var(--amethyst); text-decoration-color: var(--amethyst); }
.contact-mail:focus-visible { outline: 3px solid var(--amethyst); outline-offset: 6px; }
.contact-note { max-width: 34em; margin-top: 28px; font-size: .9375rem; color: var(--mist); }
.contact-note a, .site-footer a { color: inherit; text-underline-offset: 3px; }
.contact-note a:hover, .site-footer a:hover { color: var(--fog); }

/* About, at bedrock */
.about p { max-width: 33em; margin-top: 24px; color: var(--mist); font-size: 1.1875rem; }
.up-link {
  display: inline-block;
  margin-top: 32px;
  font-weight: 600;
  color: var(--amethyst);
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}
.up-link:hover { color: var(--fog); }

.site-footer { background: var(--bedrock); color: var(--mist); font-size: .875rem; }
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 32px;
  padding-block: 28px 36px;
  border-top: 1px solid rgb(51 57 74 / .5);
}

/* Responsive -------------------------------------------------------- */

@media (max-width: 880px) {
  .service { grid-template-columns: 1fr; }
  .principles { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  body { font-size: 1.0625rem; }
  .menu-button { display: block; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 4px var(--gutter) 16px;
    background: var(--dusk);
    border-bottom: 1px solid var(--slate);
  }
  .site-nav.open { display: flex; }
  .site-nav a { padding-block: 12px; font-size: 1.125rem; }
  :root { --header-h: 68px; }

  .hero-lead { font-size: 1.125rem; }

  /* On a phone the root system runs as a narrow column under the mark,
     with labels hanging off either side. */
  .trace { height: 820px; }
  .node .label { max-width: min(29vw, 9.5em); font-size: .8125rem; }
  [data-side-sm="r"] .label { left: 12px; right: auto; transform: translateY(-50%); text-align: left; }
  [data-side-sm="l"] .label { right: 12px; left: auto; transform: translateY(-50%); text-align: right; }
  .node.end .label { max-width: 19em; left: 18px; transform: translateY(-14px); font-size: .9375rem; }

  [data-node="s1"] { --x: 36%; --y: 8%; }
  [data-node="s4"] { --x: 64%; --y: 11%; }
  [data-node="s2"] { --x: 33%; --y: 26%; }
  [data-node="s3"] { --x: 67%; --y: 23%; }
  [data-node="f1"] { --x: 37%; --y: 43%; }
  [data-node="f2"] { --x: 63%; --y: 57%; }
  [data-node="f3"] { --x: 54%; --y: 74%; }
  [data-node="g1"] { --x: 64%; --y: 66%; }

  .steps li { margin-left: calc(var(--i, 0) * 14px); grid-template-columns: 2.5rem minmax(0, 1fr); }
  .steps li::before { font-size: 2.25rem; }

  /* On a phone the breach opens as a sheet at the bottom of the screen; a tap
     on the root cause opens it, a tap elsewhere closes it. */
  .pop, .pop.pair, [data-side="r"] .pop, [data-side="l"] .pop,
  [data-node="f1"] .pop, [data-node="f2"] .pop, [data-node="f3"] .pop, [data-node="g1"] .pop {
    transform: none;
    position: fixed;
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: var(--gutter);
    width: auto;
    max-height: 70vh;
    overflow-y: auto;
    grid-template-columns: 1fr;
    translate: 0 12px;
  }
}

/* Survey: the button is map paper with ink text. */
.button { background: #EFE9DC; color: #0B0E15; }
.button:hover { background: #F1ECE1; }