/* ---------------------------------------------------------------------------
   Pastemorphic — site styles

   The look is editorial rather than product-page: a warm paper ground, a serif
   for anything you actually read, and a monospace only for labels and numbers.
   The single accent is a marker-pen stroke, drawn behind words rather than
   under them, so nothing on the page is underlined.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Manrope';
  src: url('fonts/Manrope.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  color-scheme: light dark;

  --paper: #f6f3ec;
  --paper-deep: #efeadf;
  --ink: #17171c;
  --ink-soft: #56545f;
  --rule: #ddd6c7;
  --mark: #fbc711;
  --mark-soft: #fde9a4;
  --link: #1f5c53;
  --ribbon-1: #fbc711;
  --ribbon-2: #7fb2a6;
  --ribbon-3: #d98a6a;
  --ribbon-4: #8f8bc4;

  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua',
    Georgia, 'Times New Roman', serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas,
    'Liberation Mono', monospace;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --measure: 34rem;
}

/* Dark comes from the browser by default. The button in the corner overrides
   it either way, and that choice wins over the browser's. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #14141a;
    --paper-deep: #1b1b23;
    --ink: #f1eee4;
    --ink-soft: #a5a2ae;
    --rule: #2e2e39;
    --mark-soft: #4a3c07;
    --link: #8ecabe;
  }
}

:root[data-theme="dark"] {
  --paper: #14141a;
  --paper-deep: #1b1b23;
  --ink: #f1eee4;
  --ink-soft: #a5a2ae;
  --rule: #2e2e39;
  --mark-soft: #4a3c07;
  --link: #8ecabe;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}

/* ---- emphasis: letters that move --------------------------------------- */

/* No highlighter, no block, no line. The emphasised phrase is set letter by
   letter, each one sitting at its own slight angle as though it had been laid
   by hand, and rising in a slow wave. The motion is the emphasis. */
.mark {
  display: inline-block;
  white-space: nowrap;
}
.mark .l {
  display: inline-block;
  animation: hop 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 70ms);
  will-change: transform;
}
.mark .l:nth-child(odd)  { transform: rotate(-3deg); }
.mark .l:nth-child(even) { transform: rotate(2.5deg) translateY(0.03em); }
.mark .l:nth-child(3n)   { transform: rotate(-1.5deg) translateY(-0.02em); }

@keyframes hop {
  0%, 62%, 100% { transform: translateY(0) rotate(-3deg); }
  70%           { transform: translateY(-0.22em) rotate(-6deg); }
  78%           { transform: translateY(0.02em) rotate(-2deg); }
  84%           { transform: translateY(-0.05em) rotate(-3deg); }
}
.mark .l:nth-child(even) {
  animation-name: hop-even;
}
@keyframes hop-even {
  0%, 62%, 100% { transform: translateY(0) rotate(2.5deg); }
  70%           { transform: translateY(-0.24em) rotate(6deg); }
  78%           { transform: translateY(0.02em) rotate(1deg); }
  84%           { transform: translateY(-0.05em) rotate(2.5deg); }
}

/* a nudge from the reader makes the whole phrase go again, faster */
.mark:hover .l { animation-duration: 1.1s; }

@media (prefers-reduced-motion: reduce) {
  .mark .l { animation: none; }
}

/* Links carry their own colour. Nothing is drawn under them or behind them —
   on a hover they lift and deepen instead. */
a {
  color: var(--link);
  text-decoration: none;
  display: inline-block;
  transition: transform 0.14s ease, color 0.14s ease;
}
a:hover,
a:focus-visible {
  color: var(--ink);
  transform: translateY(-2px);
}
a:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  a { transition: color 0.14s ease; }
  a:hover, a:focus-visible { transform: none; }
}

/* ---- page frame --------------------------------------------------------- */

.page {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.5rem 6rem;
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0 3rem;
}

@media (max-width: 56rem) {
  .page { grid-template-columns: 1fr; gap: 0; }
}

/* the ribbon rail: section links drawn as bookmark tails */
.rail {
  grid-column: 1;
  position: sticky;
  top: 2rem;
  align-self: start;
  padding-top: 8.5rem;
}
@media (max-width: 56rem) { .rail { display: none; } }

.rail ol { list-style: none; margin: 0; padding: 0; }
.rail li { margin: 0 0 0.35rem; }
.rail a {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.4rem 0.7rem 0.4rem 1.6rem;
  position: relative;
}
.rail a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 0.55rem;
  height: 1.15rem;
  background: var(--ribbon-1);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
}
.rail li:nth-child(2) a::before { background: var(--ribbon-2); }
.rail li:nth-child(3) a::before { background: var(--ribbon-3); }
.rail li:nth-child(4) a::before { background: var(--ribbon-4); }
.rail li:nth-child(5) a::before { background: var(--ribbon-2); }
.rail li:nth-child(6) a::before { background: var(--ribbon-3); }
/* left over from when these sat on a yellow block: on hover they went almost
   black, which vanishes against a dark page */
.rail a:hover,
.rail a:focus-visible { color: var(--ink); }

main { grid-column: 2; min-width: 0; }
@media (max-width: 56rem) { main { grid-column: 1; } }

/* ---- masthead ----------------------------------------------------------- */

.masthead {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 2.2rem 0 1.4rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3.5rem;
  flex-wrap: wrap;
}
.masthead img { width: 26px; height: 26px; align-self: center; }
.masthead .name {
  font-family: var(--sans);
  font-weight: 800;
  font-size: 1.0625rem;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.masthead nav {
  margin-left: auto;
  display: flex;
  gap: 1.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* the light and dark switch sits last, hard against the right edge */
.masthead .themer { margin-left: 1.4rem; align-self: center; }

/* ---- headings and text -------------------------------------------------- */

h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 1.6rem;
  max-width: 16ch;
}

h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.16;
  letter-spacing: -0.018em;
  font-weight: 400;
  margin: 4.5rem 0 1.1rem;
  max-width: 24ch;
}

h3 {
  font-family: var(--sans);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin: 2.4rem 0 0.5rem;
}

p, li { max-width: var(--measure); }
p { margin: 0 0 1.2rem; }

.lead {
  font-size: 1.3125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32rem;
}

.small {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

section { scroll-margin-top: 2rem; }

/* a number in the margin, the way a printed page numbers its notes */
.numbered { position: relative; }
.numbered > .num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}
@media (min-width: 56.01rem) {
  .numbered > .num {
    position: absolute;
    left: -3.3rem;
    top: 0.85rem;
  }
}

/* ---- figures ------------------------------------------------------------ */

figure {
  margin: 2.2rem 0 2.6rem;
  max-width: 42rem;
}
figure svg, figure img { width: 100%; height: auto; display: block; }
figcaption {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 0.7rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--mark);
  max-width: 30rem;
  text-transform: none;
}

/* ---- the install strip -------------------------------------------------- */

.ways {
  display: grid;
  gap: 1.4rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 2rem 0 1rem;
  max-width: 44rem;
}
.way {
  border: 1px solid var(--rule);
  padding: 1.3rem 1.3rem 1.5rem;
  background: var(--paper-deep);
  position: relative;
}
.way h3 { margin-top: 0; }
.way p { font-size: 1rem; margin-bottom: 0; }
.way .tag {
  position: absolute;
  top: -0.6rem;
  left: 1.1rem;
  background: var(--mark);
  color: #3d3103;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
}

/* ---- steps -------------------------------------------------------------- */

ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.4rem 0; }
ol.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
}
ol.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-family: var(--mono);
  font-size: 0.8125rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
}

ul.plain { list-style: none; padding: 0; }
ul.plain li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
}
ul.plain li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6rem;
  height: 2px;
  background: var(--mark);
}

kbd {
  font-family: var(--mono);
  font-size: 0.8125em;
  border: 1px solid var(--rule);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.05em 0.4em;
  background: var(--paper-deep);
  white-space: nowrap;
}

code {
  font-family: var(--mono);
  font-size: 0.875em;
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.02em 0.34em;
}

/* ---- questions ---------------------------------------------------------- */

.qa { border-top: 1px solid var(--rule); margin-top: 3rem; }
.qa details {
  border-bottom: 1px solid var(--rule);
  padding: 0;
}
.qa summary {
  cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0;
  position: relative;
  font-size: 1.1875rem;
  line-height: 1.4;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '';
  position: absolute;
  right: 0.4rem;
  top: 1.6rem;
  width: 0.75rem;
  height: 2px;
  background: var(--ink);
}
.qa summary::before {
  content: '';
  position: absolute;
  right: 0.75rem;
  top: 1.23rem;
  width: 2px;
  height: 0.75rem;
  background: var(--ink);
  transition: transform 0.16s;
}
.qa details[open] summary::before { transform: rotate(90deg); opacity: 0; }
.qa details > div { padding: 0 0 1.4rem; }
.qa details > div p:last-child { margin-bottom: 0; }

/* ---- footer ------------------------------------------------------------- */

footer {
  grid-column: 1 / -1;
  border-top: 1px solid var(--rule);
  margin-top: 5rem;
  padding-top: 1.6rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.footer-row {
  display: flex;
  gap: 1.6rem;
  flex-wrap: wrap;
  text-transform: uppercase;
}
footer p { margin: 0; max-width: none; }
footer .spacer { flex: 1 1 auto; }

/* Who is behind this. A UK company has to show its name, registered number,
   where it is registered and its registered office on its own sites, so this
   is quiet but plainly readable rather than hidden behind anything. */
.who {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--rule);
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.6;
  max-width: 34rem;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  background: var(--mark);
  color: #3d3103;
  padding: 0.6rem 1rem;
  z-index: 10;
}


/* ---- light and dark ----------------------------------------------------- */

.themer {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color 0.14s ease, border-color 0.14s ease, transform 0.14s ease;
}
.themer:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.themer:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
.themer svg { width: 17px; height: 17px; display: block; }
@media (prefers-reduced-motion: reduce) { .themer:hover { transform: none; } }