/*
 * Hub, Direction B "The sentence". One living sentence is the page and its
 * menu: every verb is a door in its own colour, and each verb behaves like
 * itself on arrival. The sentence is the one bold thing; everything else is
 * quiet ink on cool washi paper.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url(/_assets/previews/b/hub/fonts/bricolage-grotesque-var.a756882d8a.woff2) format("woff2");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/_assets/previews/b/hub/fonts/instrument-sans-var.8b74e9bc6e.woff2) format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-display: swap;
}
@font-face {
  font-family: "Instrument Sans";
  src: url(/_assets/previews/b/hub/fonts/instrument-sans-italic-var.9519d501bf.woff2) format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap;
}

:root {
  --ground: light-dark(#EEF0F3, #15141B);
  --raise: light-dark(#FFFFFF, #1F1E27);
  --ink: light-dark(#17161D, #ECEBF2);
  --muted: light-dark(#4A4857, #B5B3C2);
  --line: light-dark(#C9CCD6, #34323F);
  --display: "Bricolage Grotesque", "Instrument Sans", "Segoe UI", Arial, sans-serif;
}

/* ---------- Seal ---------- */
.seal { color: var(--ink); }
.seal .hair { stroke: currentColor; stroke-width: 1.2; }
.seal .arc-organise { stroke: var(--c-organise); }
.seal .arc-simplify { stroke: var(--c-simplify); }
.seal .arc-juggle { stroke: var(--c-juggle); }
.seal .arc-declutter { stroke: var(--c-declutter); }
.seal .arc-stage { stroke: var(--c-stage); }
.seal .arc-style { stroke: var(--c-style); }
.seal .arc-celebrate { stroke: var(--c-celebrate); }
.seal .arc-design { stroke: var(--c-design); }
.seal .arc-share { stroke: var(--c-share); }
.seal .mono path { fill: currentColor; }
.seal .ring-text { font: 600 10.5px/1 var(--body); letter-spacing: .32em; fill: currentColor; }
.seal-mini .arc { stroke-width: 14; }
.seal .ring-long { font-size: 9.6px; letter-spacing: .14em; }

/* ---------- The hero: the sentence ---------- */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s6);
  align-content: center;
  min-height: calc(100svh - 4.25rem);
  padding-block: clamp(1.5rem, 5vh, 4rem) var(--s7);
}
.say {
  font-family: var(--display);
  font-size: clamp(2.3rem, 1.15rem + 4.7vw, 6rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  font-weight: 560;
  font-variation-settings: "opsz" 96;
}
.say.name { font-weight: 760; }
.say .w { display: inline-block; }
.sentence { max-width: 21ch; }
.sentence .sep { margin-left: -.06em; }
.hero-sentence { max-width: 76rem; }

/* Each verb is a door (a link) or, for the six built after the pick, a
   button that shows its entry. Both are the word, in its own colour. */
.verb {
  display: inline-block;
  margin: -.12em 0; padding: .12em .02em;
  border: 0; background: none;
  font: inherit; letter-spacing: inherit;
  color: var(--c);
  font-weight: 760;
  text-decoration: none;
  cursor: pointer;
  border-radius: .12em;
  -webkit-tap-highlight-color: transparent;
}
.verb:focus-visible { outline-offset: .08em; outline-width: 3px; outline-color: var(--c); }
.v-organise { --c: var(--c-organise); }
.v-simplify { --c: var(--c-simplify); }
.v-juggle { --c: var(--c-juggle); }
.v-declutter { --c: var(--c-declutter); }
.v-stage { --c: var(--c-stage); }
.v-style { --c: var(--c-style); }
.v-celebrate { --c: var(--c-celebrate); }
.v-design { --c: var(--c-design); }
.v-share { --c: var(--c-share); }
.vw { position: relative; display: inline-block; }
.vw .main { position: relative; display: inline-block; }
.vw .l { display: inline-block; will-change: transform; }
/* The door's mark: a solid underline for a site that opens, dotted for later. */
.vw::after {
  content: ""; position: absolute; left: .02em; right: .02em; bottom: -.02em; height: .075em;
  background: currentColor; border-radius: .04em;
  transform-origin: left; transition: transform .25s var(--ease-out);
}
.is-later .vw::after {
  height: .09em;
  background: radial-gradient(circle closest-side, currentColor 92%, transparent) 0 0 / .2em .09em repeat-x;
}
a.verb:hover .vw::after, a.verb:focus-visible .vw::after { transform: scaleY(1.7); }
.verb:hover, .verb:focus-visible { --hov: 1; }
.c-organise { color: var(--c-organise); } .c-simplify { color: var(--c-simplify); } .c-juggle { color: var(--c-juggle); }
.c-declutter { color: var(--c-declutter); } .c-stage { color: var(--c-stage); } .c-style { color: var(--c-style); }
.c-celebrate { color: var(--c-celebrate); } .c-design { color: var(--c-design); } .c-share { color: var(--c-share); }

/* Decorations that only exist while a verb performs: at rest they are gone. */
.vw .bit, .vw .alt, .vw .spark, .vw .ghost { position: absolute; pointer-events: none; opacity: 0; }
.vw .alt, .vw .ghost { left: .02em; top: 0; white-space: nowrap; }
.vw .alt.a1 { font-weight: 200; font-stretch: 75%; letter-spacing: .02em; }
.vw .alt.a2 { font-family: var(--body); font-style: italic; font-weight: 700; font-stretch: 75%; }
.vw .ghost.g1 { color: var(--c-stage); mix-blend-mode: multiply; }
.vw .ghost.g2 { color: var(--c-simplify); mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .vw .ghost { mix-blend-mode: screen; } }
:root[data-theme="dark"] .vw .ghost { mix-blend-mode: screen; }
.v-share .ghost { color: var(--c-share); mix-blend-mode: normal !important; }
.vw .bit { width: .14em; height: .14em; border-radius: 50%; background: currentColor; }
.vw .b0 { left: 8%; top: -12%; } .vw .b1 { left: 31%; top: 92%; width: .3em; height: .07em; border-radius: .04em; }
.vw .b2 { left: 55%; top: -16%; } .vw .b3 { left: 74%; top: 88%; } .vw .b4 { left: 96%; top: 18%; width: .26em; height: .07em; }
.vw .spark {
  width: .26em; height: .26em; background: currentColor;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.vw .k0 { left: -6%; top: -18%; } .vw .k1 { left: 22%; top: -38%; width: .18em; height: .18em; color: var(--c-simplify); }
.vw .k2 { left: 48%; top: -28%; } .vw .k3 { left: 76%; top: -36%; color: var(--c-simplify); }
.vw .k4 { left: 98%; top: -10%; width: .18em; height: .18em; } .vw .k5 { left: 60%; top: 92%; width: .16em; height: .16em; color: var(--c-design); }

/* When each verb takes its turn on arrival, in reading order. */
.v-organise { --vd: 520ms; } .v-simplify { --vd: 750ms; } .v-juggle { --vd: 980ms; }
.v-declutter { --vd: 1210ms; } .v-stage { --vd: 1440ms; } .v-style { --vd: 1670ms; }
.v-celebrate { --vd: 1900ms; } .v-design { --vd: 2130ms; } .v-share { --vd: 2360ms; }

/* Letter index and the scatter each letter starts from (the chaos it calms). */
.l0 { --i: 0; --ox: .55em; --oy: -.32em; --or: 14deg; }
.l1 { --i: 1; --ox: -.4em; --oy: .34em; --or: -11deg; }
.l2 { --i: 2; --ox: .8em; --oy: .2em; --or: 9deg; }
.l3 { --i: 3; --ox: -.65em; --oy: -.36em; --or: -15deg; }
.l4 { --i: 4; --ox: .3em; --oy: .4em; --or: 12deg; }
.l5 { --i: 5; --ox: -.85em; --oy: -.18em; --or: -9deg; }
.l6 { --i: 6; --ox: .5em; --oy: -.4em; --or: 17deg; }
.l7 { --i: 7; --ox: -.25em; --oy: .36em; --or: -12deg; }
.l8 { --i: 8; --ox: .18em; --oy: -.26em; --or: 7deg; }

/* ---------- The performances (motion allowed only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  :is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) :is(.l, .main, .bit, .alt, .spark, .ghost) {
    animation-fill-mode: both;
    animation-delay: calc(var(--vd, 0ms) + var(--i, 0) * var(--step, 40ms));
  }
  /* organise: letters arrive out of order and sort themselves into line */
  .v-organise:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .l { animation-name: v-sort; animation-duration: .8s; animation-timing-function: var(--ease-out); }
  /* simplify: a tangle that straightens, all at once */
  .v-simplify:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) { --step: 0ms; }
  .v-simplify:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .l { animation-name: v-untangle; animation-duration: .9s; animation-timing-function: var(--ease-out); }
  /* juggle: every letter goes up, is caught, and goes up again */
  .v-juggle:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) { --step: 85ms; }
  .v-juggle:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .l { animation-name: v-juggle; animation-duration: 1.05s; animation-timing-function: ease-in-out; }
  /* declutter: the clutter goes, the letters drop into place one by one */
  .v-declutter:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) { --step: 55ms; }
  .v-declutter:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .l { animation-name: v-drop; animation-duration: .6s; animation-timing-function: var(--ease-out); }
  .v-declutter:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .bit { --i: 0; animation-name: v-clear; animation-duration: .5s; animation-timing-function: ease-in; }
  /* stage: the lights come up on the word */
  .v-stage:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) { --step: 30ms; }
  .v-stage:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .l { animation-name: v-rise; animation-duration: .7s; animation-timing-function: var(--ease-out); }
  .v-stage:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .main { --i: 0; animation-name: v-lights; animation-duration: .9s; animation-timing-function: ease-out; }
  /* style: the word tries on two other styles of type, then settles */
  .v-style:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .alt, .v-style:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .main { --i: 0; animation-duration: 1.1s; animation-timing-function: linear; }
  .v-style:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .a1 { animation-name: v-try1; }
  .v-style:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .a2 { animation-name: v-try2; }
  .v-style:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .main { animation-name: v-settle; }
  /* celebrate: letters hop and the sparks go off */
  .v-celebrate:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) { --step: 45ms; }
  .v-celebrate:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .l { animation-name: v-hop; animation-duration: .7s; animation-timing-function: var(--ease-soft); }
  .v-celebrate:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .spark { animation-name: v-spark; animation-duration: .9s; animation-timing-function: var(--ease-out); }
  .v-celebrate:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .k1, .v-celebrate:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .k4 { --i: 3; }
  .v-celebrate:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .k2, .v-celebrate:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .k5 { --i: 6; }
  /* design: three print passes slide into register */
  .v-design:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .ghost, .v-design:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .main { --i: 0; animation-duration: .9s; animation-timing-function: var(--ease-out); }
  .v-design:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .g1 { animation-name: v-reg1; }
  .v-design:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .g2 { animation-name: v-reg2; }
  /* share: copies of the word fly off to their audience */
  .v-share:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .g1 { --i: 0; animation-name: v-send1; animation-duration: .85s; animation-timing-function: var(--ease-out); }
  .v-share:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .g2 { --i: 3; animation-name: v-send2; animation-duration: .85s; animation-timing-function: var(--ease-out); }
  .v-share:is(.replay, .lt-ready:not([data-arrived-from-hub], [data-seen]) .perform) .l { --step: 30ms; animation-name: v-pulse; animation-duration: .5s; animation-timing-function: var(--ease-soft); }

  /* The rest of the hero arrives around the verbs, once. */
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .name .w, :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .sentence > .w { animation: rise .7s var(--ease-out) both; }
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .name .w:nth-child(2) { animation-delay: 70ms; }
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .name .w:nth-child(3) { animation-delay: 140ms; }
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .sentence > .w { animation-delay: 260ms; }
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .sentence > .w + .w { animation-delay: 300ms; }
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .sep { animation: fade-in .5s ease-out .4s both; }
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .gloss { animation: rise .8s var(--ease-out) 1.1s both; }
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .hero-foot { animation: rise .8s var(--ease-out) .8s both; }
}
@media (prefers-reduced-motion: reduce) {
  :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .hero-sentence, :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .gloss, :root.lt-ready:not([data-arrived-from-hub], [data-seen]) .hero-foot { animation: fade-in .25s ease-out both; }
}

@keyframes rise { from { transform: translateY(.45em); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes v-sort { from { transform: translate(var(--ox), var(--oy)) rotate(var(--or)); } }
@keyframes v-untangle { from { transform: translateY(calc(var(--oy) * .7)) rotate(calc(var(--or) * 2.2)) scaleX(.7); } }
@keyframes v-juggle {
  0% { transform: none; }
  28% { transform: translateY(-.5em) rotate(-10deg); }
  52% { transform: none; }
  74% { transform: translateY(-.22em) rotate(6deg); }
  100% { transform: none; }
}
@keyframes v-drop { from { transform: translateY(calc(var(--oy) * -1)) rotate(calc(var(--or) * 1.2)); } }
@keyframes v-clear { 0% { opacity: .85; transform: none; } 100% { opacity: 0; transform: translateY(.5em) scale(.3); } }
@keyframes v-rise { from { transform: translateY(.38em); } }
@keyframes v-lights { from { opacity: .18; } }
@keyframes v-try1 { 0%, 30% { opacity: 1; } 38%, 100% { opacity: 0; } }
@keyframes v-try2 { 0%, 32% { opacity: 0; } 40%, 62% { opacity: 1; } 70%, 100% { opacity: 0; } }
@keyframes v-settle { 0%, 64% { opacity: 0; } 76%, 100% { opacity: 1; } }
@keyframes v-hop { 0% { transform: none; } 40% { transform: translateY(-.28em) rotate(-4deg); } 100% { transform: none; } }
@keyframes v-spark { 0% { opacity: 0; transform: scale(0) rotate(0); } 25% { opacity: 1; transform: scale(1.2) rotate(30deg); } 100% { opacity: 0; transform: scale(.4) rotate(90deg) translateY(-.4em); } }
@keyframes v-reg1 { 0% { opacity: .95; transform: translate(-.11em, .07em); } 100% { opacity: 0; transform: none; } }
@keyframes v-reg2 { 0% { opacity: .95; transform: translate(.1em, -.08em); } 100% { opacity: 0; transform: none; } }
@keyframes v-send1 { 0% { opacity: .7; transform: none; } 100% { opacity: 0; transform: translate(.9em, -.8em) scale(.6); } }
@keyframes v-send2 { 0% { opacity: .6; transform: none; } 100% { opacity: 0; transform: translate(1.6em, -.1em) scale(.5); } }
@keyframes v-pulse { 0% { transform: none; } 45% { transform: translateY(-.08em) scale(1.05); } 100% { transform: none; } }

/* ---------- The gloss: the dictionary entry of the word in hand ---------- */
.gloss {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s4);
  align-items: center;
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
  background: var(--raise);
  border-radius: 14px;
  max-width: 30rem;
}
.gloss-pic { width: 5.5rem; aspect-ratio: 1; display: grid; place-items: center; }
.gloss-pic img { width: 100%; height: 100%; object-fit: contain; }
.gloss-head { font-size: .9375rem; color: var(--muted); }
.gloss-head .hw { font-family: var(--display); font-size: 1.6rem; font-weight: 760; letter-spacing: -.02em; margin-right: .25rem; }
.ipa { white-space: nowrap; font-family: "Segoe UI", "Lucida Sans Unicode", "Arial Unicode MS", "Noto Sans", sans-serif; }
.gloss-sense { margin-top: var(--s1); font-size: .9688rem; line-height: 1.45; }
.gloss-state { margin-top: var(--s2); font-size: .875rem; font-weight: 600; color: var(--muted); }
@media (min-width: 64rem) {
  .hero { grid-template-columns: minmax(0, 1fr) 18rem; column-gap: var(--s7); }
  .hero-sentence { grid-column: 1; }
  .gloss { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: var(--s8); grid-template-columns: 1fr; padding: var(--s5); }
  .gloss-pic { width: 9rem; }
  .hero-foot { grid-column: 1; }
}

.hero-foot { display: grid; gap: var(--s5); justify-items: start; }
.legend { font-size: .9375rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1.25rem; }
.legend > span { display: inline-flex; align-items: center; gap: .5rem; }
.key { display: inline-block; width: 1.6rem; height: .2rem; background: var(--ink); border-radius: 2px; }
.key-later { background: radial-gradient(circle closest-side, var(--ink) 92%, transparent) 0 0 / .3rem .2rem repeat-x; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }

/* ---------- Nine ways in: the glossary ---------- */
.ways { padding-block: var(--s9) var(--s9); }
.sec-head { max-width: 44rem; margin-bottom: var(--s7); }
.sec-title {
  font-family: var(--display); font-weight: 720; letter-spacing: -.025em;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.5rem); line-height: 1.05;
}
.sec-lede { margin-top: var(--s4); font-size: 1.125rem; color: var(--muted); max-width: 52ch; }
.glossary {
  display: grid; gap: var(--s6) var(--s6);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}
.entry {
  position: relative;
  display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--s4);
  padding: var(--s5);
  border-radius: 14px;
  transition: background-color .25s var(--ease-out);
}
.entry.is-open { background: var(--raise); }
.entry.is-open:hover { background: color-mix(in srgb, var(--raise) 82%, var(--ink) 6%); }
.entry-pic { width: 5.5rem; aspect-ratio: 1; display: grid; place-items: center; }
.entry-pic img { width: 100%; height: 100%; object-fit: contain; }
.head { font-size: .9375rem; font-weight: 500; color: var(--muted); }
.head .hw { display: block; font-family: var(--display); font-weight: 760; letter-spacing: -.025em; font-size: 2rem; line-height: 1.05; }
.head .pos { font-style: italic; }
.sense { margin-top: var(--s2); }
.who { margin-top: var(--s2); color: var(--muted); font-size: .9688rem; }
.entry-go {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: var(--s3); min-height: 44px;
  font-weight: 650; color: inherit; text-decoration: underline; text-decoration-thickness: 2px;
}
.entry-go svg { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease-out); }
.entry-go::before { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.entry-go:hover svg { transform: translateX(4px); }
.entry-later { margin-top: var(--s3); font-size: .875rem; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: .45rem; min-height: 2rem; }
.entry-later::before { content: ""; width: 1.4rem; height: .18rem; background: radial-gradient(circle closest-side, currentColor 92%, transparent) 0 0 / .28rem .18rem repeat-x; }
.e-organise .hw { color: var(--c-organise); } .e-simplify .hw { color: var(--c-simplify); } .e-juggle .hw { color: var(--c-juggle); }
.e-declutter .hw { color: var(--c-declutter); } .e-stage .hw { color: var(--c-stage); } .e-style .hw { color: var(--c-style); }
.e-celebrate .hw { color: var(--c-celebrate); } .e-design .hw { color: var(--c-design); } .e-share .hw { color: var(--c-share); }
.entry.is-flagged { background: color-mix(in srgb, var(--raise) 70%, var(--ground)); }

/* ---------- The call ---------- */
.calltime { padding-block: var(--s9); background: var(--raise); }
.calltime .wrap { display: grid; gap: var(--s6); }
.call-title {
  font-family: var(--display); font-weight: 760; letter-spacing: -.03em;
  font-size: clamp(2.2rem, 1.2rem + 4vw, 5.25rem); line-height: 1; max-width: 14ch;
}
.call-body { display: grid; gap: var(--s5); justify-items: start; max-width: 40rem; font-size: 1.125rem; }
.routes { color: var(--muted); font-size: 1rem; }
.routes a { color: var(--ink); font-weight: 600; display: inline-block; padding-block: .7rem; }
@media (min-width: 60rem) {
  .calltime .wrap { grid-template-columns: 1.1fr 1fr; align-items: end; column-gap: var(--s8); }
}

/* ---------- About ---------- */
.about { padding-block: var(--s9); }
.about-grid { display: grid; gap: var(--s7); }
.about-seal { width: min(18rem, 70vw); }
.about-seal .seal { width: 100%; }
.quotes { margin-top: var(--s6); display: grid; gap: var(--s5); }
.quotes blockquote p {
  font-family: var(--display); font-weight: 480; font-size: clamp(1.3rem, 1rem + 1.1vw, 1.9rem);
  line-height: 1.22; letter-spacing: -.012em; max-width: 34ch;
  text-indent: -.42em;
}
.quotes blockquote p::before { content: "“"; color: var(--c-organise); }
.quotes blockquote p::after { content: "”"; color: var(--c-organise); }
.insured { margin-top: var(--s7); display: flex; gap: var(--s3); align-items: flex-start; max-width: 46rem; font-weight: 550; }
.insured-mark { flex: none; width: 1.4rem; height: 1.4rem; margin-top: .15rem; border-radius: 50%; border: 2px solid var(--ink); background: radial-gradient(circle, var(--thread) 0 38%, transparent 40%); }
.source { margin-top: var(--s4); color: var(--muted); font-size: .9375rem; }
@media (min-width: 60rem) {
  .about-grid { grid-template-columns: 20rem 1fr; column-gap: var(--s9); align-items: start; }
  .about-seal { position: sticky; top: 7rem; }
}

.foot .seal-mini { width: 3.25rem; height: 3.25rem; }