/* Landing site styles. Colors, spacing, radii, and type sizes come from css/tokens.css; only new values are defined here. */

:root {
  /* Landing-only tokens. Shared colors, including the leather, brass, lining, and parchment values, live in css/tokens.css. */
  --font-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-80: calc(.8rem + 3px); --text-sm: calc(.9rem + 3px); --text-100: calc(1rem + 3px);
  --text-lg: calc(1.15rem + 3px);
  --text-xl: calc(clamp(1.45rem, 1.15rem + 1.2vw, 1.95rem) + 2pt);
  --text-hero: calc(min(clamp(2.8rem, 1.7rem + 4.4vw, 5rem), 13vw) + 2pt);
  --wrap: 70rem;
  --target: 48px;
  --flap-h: 76px;
  --icon-brand: 36px; --icon-md: 20px; --icon-glyph: 19px; --diamond: 9px;
  --rule: 2px;
  --section-pad: 3.25rem; --hero-pad: 3.5rem;
  --text-h3: calc(1.25rem + 2pt + 4px); --text-brand: calc(1.45rem + 2pt); --text-brand-sm: calc(1.25rem + 2pt);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: var(--space-24); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--text-100)/1.5 var(--font-sans);
  min-height: 100vh; display: flex; flex-direction: column; overflow-wrap: break-word;
}
main { flex: 1 0 auto; }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.15; margin: 0; overflow-wrap: anywhere; }
h1 { font-family: var(--font-display); }
p { margin: 0 0 var(--space-14); }
a { color: var(--planned); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-input); }
.band :focus-visible, .skip:focus-visible { outline-color: var(--lining-ink); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: max(var(--space-16), env(safe-area-inset-left, 0px)); }

/* Skip link: off-screen until focused, outside every landmark. */
.skip {
  position: absolute; left: var(--space-12); top: -4rem; z-index: 20;
  background: var(--tutorial); color: var(--on-tutorial-btn);
  padding: var(--space-10) var(--space-16); border-radius: var(--radius-control); font-weight: 600;
}
.skip:focus { top: var(--space-8); }

/* Satchel flap: a leather strip with a curved bottom edge, clipped to the curve so the clasp can hang below it. The stitch, brand, theme patch, and clasp are all placed from this one frame. */
.flap { position: relative; z-index: 10; --gut: max(var(--space-16), env(safe-area-inset-left, 0px)); --clasp-w: 44px; }
.flapframe {
  position: relative; isolation: isolate; display: grid;
  grid-template-columns: minmax(0, 1fr) min(calc(100% - 2 * var(--gut)), calc(var(--wrap) - 2 * var(--gut))) minmax(0, 1fr);
  grid-template-rows: var(--flap-h);
}
.flapleather {
  position: absolute; inset: 0; z-index: 1; grid-area: 1 / 1 / 2 / -1; overflow: hidden; background: var(--leather);
  border-radius: 0 0 64px 64px / 0 0 22px 22px; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .35);
}
/* The texture keeps one fixed size per breakpoint (it only grows past that when the window is wider) and is anchored to the bottom edge. */
.flapleather img { position: absolute; left: 0; bottom: 0; width: max(100%, 1280px); height: auto; max-width: none; }
@media (width < 36rem) { .flapleather img { width: max(100%, 800px); } }
@media (width >= 62rem) { .flapleather img { width: max(100%, 1600px); } }

.flapstitch { grid-area: 1 / 1 / 2 / -1; }

/* Brand and theme patch are centered in the flap. The wordmark drops 2px because the q's descender makes it look high. */
.flap .brand { grid-column: 2; grid-row: 1; justify-self: start; align-self: center; position: relative; z-index: 3; color: var(--stamp); }
.flap .brand span { position: relative; top: 2px; color: var(--wordmark-stamp); text-shadow: 0 1px 0 rgba(255, 235, 190, .35); -webkit-text-stroke: 2px var(--stamp); paint-order: stroke fill; transition: color .2s ease; }
.flap .brand:hover span { color: color-mix(in srgb, var(--wordmark-stamp) 85%, white); }
.themebtn {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: center; position: relative; z-index: 3;
  width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  color: var(--stamp); border: 1px solid rgba(30, 16, 6, .55); border-radius: 9px; cursor: pointer;
  background-color: var(--leather);
  background-image: url("assets/header-800.jpg"); background-image: image-set(url("assets/header-800.webp") type("image/webp"), url("assets/header-800.jpg") type("image/jpeg"));
  background-size: 190px auto; background-position: -36px -14px;
}
.themebtn::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--thread); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' %3E%3Crect x='4' y='4' width='36' height='36' rx='6' pathLength='100' fill='none' stroke='black' stroke-width='1.4' stroke-dasharray='2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62 2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62 2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62 2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62'/%3E%3C/svg%3E") center / 100% 100% no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44' %3E%3Crect x='4' y='4' width='36' height='36' rx='6' pathLength='100' fill='none' stroke='black' stroke-width='1.4' stroke-dasharray='2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62 2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62 2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62 2.7 1.6 2.36 1.44 2.87 1.52 2.53 1.77 2.36 1.44 2.79 1.62'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.themebtn svg { width: var(--icon-glyph); height: var(--icon-glyph); flex: none; }
.themebtn { transition: filter .2s ease; }
.themebtn:hover { filter: brightness(1.12); }

/* Clasp: the menu button at every width. The strap tile scales with --clasp-w. */
.clasp {
  display: none; position: absolute; z-index: 4; left: 50%; top: calc(var(--flap-h) - var(--clasp-w) * 46 / 44);
  width: var(--clasp-w); aspect-ratio: 44 / 90; transform: translateX(-50%); padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: calc(var(--clasp-w) * .11) calc(var(--clasp-w) * .11) calc(var(--clasp-w) * .48) calc(var(--clasp-w) * .48);
}
.js .clasp { display: block; }
.claspart { position: absolute; inset: 0; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .35)); transition: transform .2s linear; }
/* Hovering lifts the strap 3px, and pressing keeps it lifted until the menu closes. The peek hint is the same lift, then back. */
.clasp:hover .claspart, .clasp[aria-expanded="true"] .claspart { transform: translateY(-3px); }
.clasp.peek .claspart { animation: lift .8s linear; }
@keyframes lift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .claspart { transition: none; } .clasp.peek .claspart { animation: none; } }
.knob { transition: filter .2s ease; }
.clasp:hover .knob { filter: brightness(1.2); }
.strap {
  position: absolute; inset: 0; background-color: var(--strap);
  background-image: url("assets/strap.jpg"); background-image: image-set(url("assets/strap.webp") type("image/webp"), url("assets/strap.jpg") type("image/jpeg"));
  background-size: calc(var(--clasp-w) * 4) calc(var(--clasp-w) * 4); background-repeat: repeat;
  clip-path: inset(0 round calc(var(--clasp-w) * .11) calc(var(--clasp-w) * .11) calc(var(--clasp-w) * .48) calc(var(--clasp-w) * .48));
}
.claspart svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flap :focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; box-shadow: 0 0 0 2px var(--lining); }

/* Lining: revealed behind the flap when the clasp is opened. Without JavaScript it stays open. */
.topnav {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 0; margin-top: -22px;
  padding: calc(22px + var(--clasp-w) + var(--space-14)) 0 var(--space-20); background: var(--lining); color: var(--lining-ink);
}
/* The tan panel reaches 300px up behind the flap, past its curved corners. With JavaScript the panel (not the nav box) carries the color, and its bottom edge starts 22px above the nav so it begins fully hidden behind the flap. */
.topnav::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: -300px; bottom: 0; background: var(--lining); border-radius: 0 0 64px 64px / 0 0 22px 22px; box-shadow: inset 0 -4px 6px -3px rgba(0, 0, 0, .3); }
.js .topnav { background: none; }
.js .topnav::before { bottom: 22px; transition: bottom .35s ease; }
.js .topnav.open::before { bottom: 0; }
html:not(.js) .topnav { padding-top: calc(22px + var(--space-14)); }
/* With JavaScript the lining's height animates from 0 to --navh (set from the list's real height in satchel.js). The list sits at the lining's bottom edge, carrying the padding with it, so it slides down from behind the flap as the lining grows and back up as it shrinks. */
.js .topnav {
  display: block; position: absolute; top: 100%; left: 0; right: 0; height: 0; margin-top: 0; padding: 0; visibility: hidden; clip-path: inset(-400px 0 0 0);
  transition: height .35s ease, margin-top .35s ease, visibility 0s linear .35s;
}
.js .topnav > ul {
  position: absolute; left: 0; right: 0; bottom: 22px; transition: bottom .35s ease;
  padding: calc(22px + var(--clasp-w) + var(--space-14)) var(--gut) var(--space-20);
}
.js .topnav.open > ul { bottom: 0; }
.js .topnav.open { height: var(--navh, auto); margin-top: -22px; visibility: visible; transition: height .35s ease, margin-top .35s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { .js .topnav, .js .topnav.open, .js .topnav::before, .js .topnav > ul { transition: none; } }
.topnav ul {
  list-style: none; margin: 0 auto; padding: 0 var(--gut); max-width: var(--wrap);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-20);
}
.topnav a {
  display: flex; align-items: center; gap: var(--space-8); min-height: 44px; padding: 0 var(--space-12);
  color: var(--lining-ink); font-weight: 500; text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--lining-ink) 55%, transparent);
}
.topnav a:hover { background: color-mix(in srgb, white 25%, transparent); }
.topnav a[aria-current="page"] { color: var(--lining-current); font-weight: 600; }
.topnav a[aria-current="page"]::before { content: ""; width: var(--diamond); height: var(--diamond); flex: none; background: var(--burn); border-radius: 2px; transform: rotate(45deg); }
@media (width >= 62rem) {
  .topnav ul { display: flex; justify-content: center; gap: var(--space-20); }
  .topnav li { flex: 0 0 auto; }
}
@media (width < 62rem) { main { padding-top: var(--space-24); } }
@media (width < 36rem) { .brand { font-size: var(--text-brand-sm); } }
@media (width < 62rem) { .flap .brand, .themebtn { top: -3px; } }

/* Footer band: the same tan as the menu lining. */
.band {
  background: var(--lining);
  color: var(--lining-ink);
  box-shadow: inset 0 4px 6px -3px rgba(0, 0, 0, .3);
}
.band a { color: var(--lining-ink); }
.band .wrap { padding-block: var(--space-10); }
.brand { display: inline-flex; align-items: center; gap: var(--space-10); text-decoration: none; font: 400 var(--text-brand)/1 var(--font-display); min-height: var(--control-height); min-width: 0; }
.brand svg { width: var(--icon-brand); height: var(--icon-brand); flex: none; }
.flap .brand svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }


/* Footer: support and source, then the copyright, all centered. */
.footband { margin-top: var(--space-30); }
.band .footrow {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: var(--space-12); padding-block: var(--space-22);
}
.footrow .footlinks { order: -1; }
.footlinks { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4) var(--space-20); }
.footlinks > a:not(.supportlink) { display: inline-flex; align-items: center; min-height: var(--control-height); }
.legal { margin: 0; font-size: var(--text-sm); }
.supportlink {
  display: inline-flex; align-items: center; gap: var(--space-10); min-height: var(--target); padding: 0 var(--space-20);
  border: var(--rule) solid var(--lining-ink); border-radius: var(--radius-card);
  font-weight: 600; text-decoration: none;
}
.supportlink:hover { background: color-mix(in srgb, var(--lining-ink) 12%, transparent); }
.supportlink svg { width: var(--icon-md); height: var(--icon-md); flex: none; }

/* Buttons. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: var(--target); padding: 0 var(--space-24); border-radius: var(--radius-card);
  font: 600 var(--text-100)/1 var(--font-sans); text-decoration: none; cursor: pointer;
  border: var(--rule) solid transparent;
}
.btn.door {
  background: var(--tutorial); color: var(--on-tutorial-btn); border-color: var(--tutorial-edge);
}
.btn.door:hover { background: var(--tutorial-hover); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn.ghost:hover { background: color-mix(in srgb, var(--ink) 9%, transparent); }
.btn.small { min-height: var(--control-height); padding: 0 var(--space-16); font-size: var(--text-sm); }
@media (prefers-reduced-motion: no-preference) {
  .btn { transition: box-shadow .2s, transform .2s, background .2s; }
  .btn.door:hover { transform: translateY(-1px); }
}
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-22); }

/* Kicker: small label above a heading, led by the milestone diamond from the icon. */
.kicker {
  display: flex; align-items: center; gap: var(--space-10);
  margin: 0 0 var(--space-8); font: 600 calc(var(--text-80) - 2px)/1.2 var(--font-sans);
  letter-spacing: .12em; text-transform: uppercase; color: var(--badge-active);
}
.kicker::before {
  content: ""; width: var(--diamond); height: var(--diamond); flex: none; background: var(--burn);
  border-radius: 2px; transform: rotate(45deg);
}

/* Hero (home) and page heads (every other page). */
.hero { padding-block: var(--space-30) var(--hero-pad); }
.hero h1 { font-size: var(--text-hero); letter-spacing: -.01em; }
.pagehead { padding-block: var(--space-30) var(--space-8); }
.pagehead h1 { font-size: var(--text-hero); letter-spacing: -.01em; }
.pagehead p:not(.kicker) { font-size: var(--text-lg); margin-top: var(--space-12); }
.lede { font-size: var(--text-xl); font-family: var(--font-serif); line-height: 1.3; margin-top: var(--space-14); }
.hero-grid { display: grid; gap: var(--space-30); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (width >= 56rem) { .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }

/* Sections. */
.section { padding-block: var(--section-pad) 1rem; }
.section > .wrap > header { margin-bottom: var(--space-24); }
.section h2 { font-size: var(--text-xl); }
.section h3 { font-size: var(--text-h3); margin-bottom: var(--space-10); }
.section::before {
  content: ""; display: block; max-width: var(--wrap); height: var(--rule); margin: 0 auto var(--space-30);
  background: linear-gradient(90deg, transparent, var(--brass) 18%, var(--brass) 82%, transparent);
}
.pagehead + .section { padding-top: var(--space-22); }
.pagehead + .section::before { display: none; }
main .wrap { container-type: inline-size; }
.grid { --gap: var(--space-18); --n: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gap); }
.grid > * { flex: 0 0 calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); min-width: 0; }
.grid.two, .grid.ways { --n: 1; }
/* A grid gets n columns once its container fits n cards at the card minimum plus (n - 1) gaps of 1.125rem (--gap). The card minimum is 17.5rem for .grid, 24rem for .grid.two, and 15rem for .grid.ways; container conditions cannot read custom properties. */
@container (width >= calc(2 * 17.5rem + 1.125rem)) { .grid { --n: 2; } }
@container (width >= calc(3 * 17.5rem + 2 * 1.125rem)) { .grid { --n: 3; } }
@container (width >= calc(2 * 24rem + 1.125rem)) { .grid.two { --n: 2; } }
@container (width >= calc(2 * 15rem + 1.125rem)) { .grid.ways { --n: 2; } }
@container (width >= calc(3 * 15rem + 2 * 1.125rem)) { .grid.ways { --n: 3; } }
@container (width >= calc(4 * 15rem + 3 * 1.125rem)) { .grid.ways { --n: 4; } }
.posting ul, .perks { margin: 0; padding-left: var(--space-18); }
.posting li, .perks li { margin-bottom: var(--space-8); }
.posting li:last-child { margin-bottom: 0; }
.posting p:last-child { margin-bottom: 0; }
.stack-gap { margin-top: var(--space-22); }

.way { border-top: 5px solid var(--bar-pending); }
.way.pwa { border-top-color: var(--bar-done); }
.way.claude { border-top-color: var(--bar-active); }
.way.muse { border-top-color: var(--brand-muse); }
.way.trello { border-top-color: var(--brand-trello); }
.way.todoist { border-top-color: var(--brand-todoist); }
.way .actions { margin-top: var(--space-16); }
.postlink { display: inline-block; margin-top: var(--space-12); font-weight: 600; }


.chip {
  display: inline-block; margin: 0 var(--space-4) var(--space-8) 0; padding: var(--space-2) var(--space-10);
  border-radius: var(--radius-pill); font-size: var(--text-80); font-weight: 600;
  background: var(--badge-neutral-bg); color: var(--badge-neutral);
}
.chip.pending { background: var(--badge-pending-bg); color: var(--badge-pending); }
.chip.done { background: var(--badge-done-bg); color: var(--badge-done); }
.chip.active { background: var(--badge-active-bg); color: var(--badge-active); }
.chip.info { background: var(--badge-info-bg); color: var(--badge-info); }

.perks { list-style: none; padding: 0; columns: 18rem 3; column-gap: var(--space-30); }
.perks li { padding-left: var(--space-18); position: relative; margin: 0 0 var(--space-12); break-inside: avoid; }
.perks li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px;
  background: var(--brass); border-radius: 1px; transform: rotate(45deg);
}
.subhead { margin-top: var(--space-30); }

/* Prompts. */
details { margin: var(--space-14) 0 var(--space-20); }
summary {
  display: inline-flex; align-items: center; gap: var(--space-10); cursor: pointer; list-style: none;
  min-height: var(--target); padding: 0 var(--space-20); border: var(--rule) solid var(--ink); border-radius: var(--radius-card);
  background: var(--surface); font-weight: 600;
}
summary::-webkit-details-marker { display: none; }
summary::before {
  content: ""; width: 8px; height: 8px; flex: none; border-right: var(--rule) solid currentColor; border-bottom: var(--rule) solid currentColor;
  transform: translateY(-2px) rotate(-45deg);
}
details[open] > summary::before { transform: translateY(-3px) rotate(45deg); }
summary:hover { background: color-mix(in srgb, var(--ink) 9%, var(--surface)); }
details > p:last-child { margin-bottom: 0; }
pre {
  margin: var(--space-10) 0 var(--space-12); padding: var(--space-14);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-control);
  font: var(--text-80)/1.55 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere;
}
code { font-family: var(--font-mono); font-size: .92em; }
.copystatus { margin-left: var(--space-10); font-size: var(--text-sm); color: var(--muted); }
.section .posting h2 { font-size: var(--text-h3); margin-bottom: var(--space-10); }

/* Split: prose with a screenshot beside it from 56rem. */
.split { display: grid; gap: var(--space-24); grid-template-columns: minmax(0, 1fr); align-items: start; }
.prose > :last-child { margin-bottom: 0; }
.prose > h2.lede { margin: 0 0 var(--space-18); font-weight: 400; }
.prose > .quotehead { width: fit-content; max-width: 100%; margin: 0 0 var(--space-18); }
.quotehead > h2.lede { margin: 0; }
.quotehead > .byline { margin: var(--space-8) 0 0; color: var(--muted); text-align: right; }
@media (width >= 56rem) {
  .split { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .shot.side { position: sticky; top: var(--space-24); }
}

/* Screenshot placeholders. Replace .shotframe with an <img> that has real alt text. */
.shot { margin: 0; }
.shotframe {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4);
  aspect-ratio: 16 / 10; width: 100%; padding: var(--space-16); text-align: center;
  border: var(--rule) dashed var(--brass); border-radius: var(--radius-card);
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, color-mix(in srgb, var(--brass) 14%, transparent) 14px 15px),
    color-mix(in srgb, var(--surface) 70%, var(--chip-work));
  color: var(--muted);
}
.shot.wide .shotframe { aspect-ratio: 21 / 9; }
.shotlabel { font: 600 calc(var(--text-80) - 2px)/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; }
.shotname { font: 400 calc(1.1rem + 2pt)/1.3 var(--font-serif); color: var(--ink); }
.posting .shot { margin-top: var(--space-16); }

/* The launch splash, played inline in the hero: not an overlay, no scroll lock, the same shadow as the cards. */
.heroquote { margin: 0; }
.splash.inline { position: relative; inset: auto; z-index: auto; touch-action: auto; overscroll-behavior: auto; }
html:has(.splash.inline:not([hidden])) { overflow: visible; }
.splash.inline .splashpanel { width: min(100%, 26rem); margin-inline: auto; }
html:not(.js) .splash.inline .splashtitle, html:not(.js) .splash.inline .splashaffirm { --wipe: 1; }

/* Pinned cards sit a little off true (offsets are set by satchel.js). */
.grid[data-rows="side"] > .posting { transform: translateY(calc(var(--ry, 0) * 10px)); }
.grid[data-rows="stacked"] > .posting { transform: translate(calc(var(--rx, 0) * 5px), calc(var(--ry, 0) * 10px)); }