/*
 * Direction A, The Seal: the family layer. Identical on every preview site.
 * The seal, the nine inks, the press between sites, the dock, the preview
 * note and the browser surfaces. Each site's own tokens and layout live in
 * site.css, loaded after this file.
 */

:root {
  /* The nine inks: the colour of each site's seal border, light and dark. */
  --ink-organise: light-dark(#ed802b, #f09a50);
  --ink-simplify: light-dark(#e2b21c, #ebc23f);
  --ink-juggle: light-dark(#6aa52e, #8cc452);
  --ink-declutter: light-dark(#3e9e7e, #5cc29f);
  --ink-stage: light-dark(#2a93a6, #4dbacd);
  --ink-style: light-dark(#34479a, #8698e0);
  --ink-celebrate: light-dark(#7b3fa6, #b285d6);
  --ink-design: light-dark(#c42a86, #e46bb2);
  --ink-share: light-dark(#d63447, #ee6b79);
  /* The same inks as text on the hub's paper (4.5:1 or more, both themes). */
  --say-organise: light-dark(#9a4307, #f6b47a);
  --say-simplify: light-dark(#7a5c00, #f0cf5e);
  --say-juggle: light-dark(#3c6a12, #a6d576);
  --say-declutter: light-dark(#1f6b52, #7dd3b4);
  --say-stage: light-dark(#136170, #7acfdd);
  --say-style: light-dark(#2c3d86, #a9b6eb);
  --say-celebrate: light-dark(#6a2f94, #c7a3e3);
  --say-design: light-dark(#9e1c6b, #ee93c7);
  --say-share: light-dark(#a81e31, #f39aa4);

  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-press: cubic-bezier(.3, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
body { margin: 0; min-height: 100vh; overflow-x: clip; }
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: .07em; }
h1, h2, h3, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:where(h1, h2, h3) { text-wrap: balance; }
p { text-wrap: pretty; }

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

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50; padding: .75rem 1rem;
  background: var(--text); color: var(--ground); border-radius: .5rem; font-weight: 600;
  transition: transform .2s var(--ease-out);
}
.skip-link:focus-visible { transform: translateY(5rem); }

/* Browser surfaces carry the design too. */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--select-bg); color: var(--select-text); }
html { scrollbar-color: var(--scroll-thumb) var(--ground); caret-color: var(--focus); accent-color: var(--focus); }

/* ---- the seal ---- */
.seal-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.seal { width: 100%; height: auto; overflow: visible; }
.seal-band { fill: var(--seal-ink, currentColor); }
.seal-wash { opacity: var(--seal-wash, .2); }
.seal-line { stroke: var(--seal-line, currentColor); }
.seal-mono { color: var(--seal-line, currentColor); }
.seal-text {
  fill: var(--seal-line, currentColor);
  font-family: "Shippori Mincho", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  font-weight: 600; font-size: 10.6px; letter-spacing: .3em;
}
.seal--organise { --seal-ink: var(--ink-organise); }
.seal--simplify { --seal-ink: var(--ink-simplify); }
.seal--juggle { --seal-ink: var(--ink-juggle); }
.seal--declutter { --seal-ink: var(--ink-declutter); }
.seal--stage { --seal-ink: var(--ink-stage); }
.seal--style { --seal-ink: var(--ink-style); }
.seal--celebrate { --seal-ink: var(--ink-celebrate); }
.seal--design { --seal-ink: var(--ink-design); }
.seal--share { --seal-ink: var(--ink-share); }
.seal-arc--organise { fill: var(--ink-organise); }
.seal-arc--simplify { fill: var(--ink-simplify); }
.seal-arc--juggle { fill: var(--ink-juggle); }
.seal-arc--declutter { fill: var(--ink-declutter); }
.seal-arc--stage { fill: var(--ink-stage); }
.seal-arc--style { fill: var(--ink-style); }
.seal-arc--celebrate { fill: var(--ink-celebrate); }
.seal-arc--design { fill: var(--ink-design); }
.seal-arc--share { fill: var(--ink-share); }

/* ---- the press between sites: the ink each destination is made of ---- */
.press-ink {
  position: fixed; z-index: 2147483646; border-radius: 50%; pointer-events: none;
  transform-origin: 50% 50%; will-change: transform;
}
.press-ink[hidden] { display: none; }
.press-ink--hub { background: light-dark(#eceee9, #16181d); }
.press-ink--organise { background: light-dark(#ed802b, #2a1407); }
.press-ink--style { background: light-dark(#dde3f1, #0f1630); }
.press-ink--celebrate { background: light-dark(#efe2f5, #160a1f); }

/* ---- the theme toggle ---- */
.theme-toggle {
  display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer; color: var(--text);
  transition: background-color .15s ease-out;
}
.theme-toggle:hover { background: var(--hover-wash); }
.theme-toggle svg { width: 1.375rem; height: 1.375rem; transition: transform .35s var(--ease-out); }
.theme-toggle:active svg { transform: rotate(-25deg) scale(.92); }
.theme-toggle .moon { display: none; }
.theme-toggle[aria-pressed="true"] .sun { display: none; }
.theme-toggle[aria-pressed="true"] .moon { display: block; }

/* ---- the preview note: a small paper slip, never a banner ---- */
.preview-note {
  display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .7rem .35rem .45rem;
  font-size: .8125rem; line-height: 1.3; border-radius: .35rem;
  background: var(--note-bg); color: var(--note-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / .12), 0 6px 14px -8px rgb(0 0 0 / .3);
  transform: rotate(-1.2deg);
}
.preview-note .seal { width: 1.35rem; flex: none; }

/* ---- the dock: every site in the family, from inside a spoke ---- */
.dock {
  display: grid; gap: 1.25rem .75rem;
  grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
}
.dock-link {
  display: grid; justify-items: center; gap: .35rem; padding: .5rem .25rem .6rem;
  text-decoration: none; text-align: center; border-radius: .75rem;
  transition: background-color .15s ease-out;
}
a.dock-link:hover { background: var(--hover-wash); }
.dock-link .seal { width: 3.75rem; transition: transform .3s var(--ease-press); }
a.dock-link:hover .seal { transform: translateY(-3px) rotate(-8deg); }
a.dock-link:active .seal { transform: scale(.9); transition-duration: .1s; }
.dock-name { font-weight: 600; font-size: .9375rem; line-height: 1.2; }
.dock-state { font-size: .8125rem; line-height: 1.2; color: var(--muted); }
.dock-item.is-quiet .seal { opacity: .45; }
.dock-item.is-here .seal { transform: rotate(-8deg); }
.dock-item--hub .dock-name { max-width: 7rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
  a.dock-link:hover .seal, .dock-item.is-here .seal { transform: none; }
}