/* ---------------------------------------------------------------------------
   Lightmorphic Paste, site styles

   The look is editorial rather than product-page: a dark ground, a serif for
   anything you actually read, and a monospace only for labels and numbers.
   Dark is the only theme here. The extension itself still follows the browser
   and still has a switch; the website does not.
   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: dark;

  --paper: #14141a;
  --paper-deep: #1b1b23;
  --ink: #f1eee4;
  --ink-soft: #a5a2ae;
  --rule: #2e2e39;
  --mark: #fbc711;
  --link: #8ecabe;
  --on-mark: #3d3103;
  --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;
}

* { 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;
}
/* the letters are separate boxes so each can move on its own, which also means
   a line could break between any two of them. Words are held together here so
   it only ever breaks at a space. */
.mark .w {
  display: inline-block;
  white-space: nowrap;
}
.mark .l {
  display: inline-block;
  animation: hop 3.4s ease-in-out infinite;
  will-change: transform;
}
/* the wave runs left to right through each word */
.mark .l:nth-child(1) { animation-delay: 0ms; }
.mark .l:nth-child(2) { animation-delay: 70ms; }
.mark .l:nth-child(3) { animation-delay: 140ms; }
.mark .l:nth-child(4) { animation-delay: 210ms; }
.mark .l:nth-child(5) { animation-delay: 280ms; }
.mark .l:nth-child(6) { animation-delay: 350ms; }
.mark .l:nth-child(7) { animation-delay: 420ms; }
.mark .l:nth-child(8) { animation-delay: 490ms; }
.mark .l:nth-child(9) { animation-delay: 560ms; }
.mark .l:nth-child(10) { animation-delay: 630ms; }
.mark .l:nth-child(11) { animation-delay: 700ms; }
.mark .l:nth-child(12) { animation-delay: 770ms; }
.mark .l:nth-child(13) { animation-delay: 840ms; }
.mark .l:nth-child(14) { animation-delay: 910ms; }
.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;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}


.masthead nav .join { color: var(--mark); }

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

h1 {
  font-size: clamp(2.6rem, 7vw, 4.4rem);
  text-wrap: balance;
  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);
  text-wrap: balance;
  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;
  text-wrap: pretty;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 32rem;
}

.small {
  font-family: var(--mono);
  font-size: 0.875rem;
  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: var(--on-mark);
  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 h2 {
  font: inherit;
  margin: 0;
  display: inline;
  letter-spacing: inherit;
}
.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.875rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.project {
  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 {
  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: var(--on-mark);
  padding: 0.6rem 1rem;
  z-index: 10;
}


/* the guidelines ask for this on anything tapped: it removes the browser's
   300ms wait for a possible double-tap */
a, button, summary { touch-action: manipulation; }

/* On anything without a fine pointer, the standalone controls grow to a size a
   thumb can hit. Links inside a sentence are left alone: they are exempt, and
   padding them out would break the line spacing of the prose around them. */
@media (pointer: coarse), (max-width: 1023px) {
  .masthead nav a,
  .rail a,
  .masthead .name,
  footer a,
  .marks a,
  .skip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
  }
  /* a short word like Help was 33px across; the target grows, the text does not */
  .masthead nav a { min-width: 44px; }
}


/* the link on to the next page, set apart from the section above it */
.onward { margin-top: 2.4rem; }

/* The sub-footer: company details on the left, the legal pages hard against
   the right edge. On a narrow screen they stack rather than crowd. */
.subfooter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 2rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.subfooter .who {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--ink-soft);
  /* each of the three lines is one sentence, so none of them wraps mid-way */
  max-width: none;
}
.subfooter .legal {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
}
.subfooter .legal a { color: var(--ink-soft); }
.subfooter .legal a:hover,
.subfooter .legal a:focus-visible { color: var(--ink); }

@media (max-width: 44rem) {
  .subfooter .legal { margin-left: 0; }
}

/* The repository band: the two marks on the left, the links about this project
   on the right. Same shape as the legal band under it, so the footer reads as
   three rules across the page rather than three unrelated rows. */
.repo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}
.marks {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.marks a {
  color: var(--ink-soft);
  display: inline-flex;
  transition: color 0.14s ease;
}
.marks a:hover,
.marks a:focus-visible { color: var(--ink); }
.marks svg { display: block; }

.repo-links {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
}
.repo-links a { color: var(--ink-soft); }
.repo-links a:hover,
.repo-links a:focus-visible { color: var(--ink); }

@media (max-width: 52rem) {
  .repo-links { margin-left: 0; }
}