/* Site v11: the 2000px column on big monitors, shared by every page. Loads last.
   Nothing here does anything at 2000px wide or less: --edge is 0 until the window passes the column.
   Grounds still run edge to edge; what sits on them stays in the column. */
:root { --col-max: 2000px; --edge: max(0px, calc((100vw - var(--col-max)) / 2)); }

/* lenis.css, the parts this site needs */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
/* An embedded motion piece never takes the wheel. */
.lenis iframe { pointer-events: none; }

@media (min-width: 2001px) {
  /* the big fields: the gradient stays, the content comes in to the column */
  .v9e-field { padding-inline: max(max(32px, calc(var(--vw) * 3.4)), calc(var(--edge) - max(16px, calc(var(--vw) * 1.4)))); }
  /* motion and cards that sit straight on the page, with no field around them */
  .v9e-mo > :not(.v9e-field), .pgrid-in { max-width: var(--col-max); margin-inline: auto; }
  .twoup, .plain-stage { margin-inline: max(16px, var(--edge)); }
  /* the motion fit shrank with window width past 1440; hold it where the column stops */
  .m-place { width: min(100%, max(720px, calc((100vh - var(--less, 330px) - max(0px, (var(--col-max) - 1440px) * .13)) * var(--w) / var(--h)))); }
  /* pinned to the window: line up with the column */
  .mo-switch, .m-toggle { left: var(--edge); }
  .v9e-field .mo-label { left: calc(var(--edge) - max(16px, calc(var(--vw) * 1.4))); }
  .fx-plum .mo-label { left: 20px; }
  .ag-toast { right: var(--edge); }
  .mo-tag--hero { left: var(--edge); }
  .v9e-field > .v9e-pp, .v9e-field > .x-gfoot > .v9e-pp, .v9e-field .mo-pp { right: calc(var(--edge) - max(16px, calc(var(--vw) * 1.4))) !important; }
}


/* Phones (release pass, 4 Nov 2026): the two-column sections stack, so nothing is squeezed or cut. Nothing here reaches a wider screen. */
@media (max-width: 700px) {
  .mock-split, .twoup, .v11-side, .v11-side.flip, .x-split, .x-split--l, .ag-tools-in { grid-template-columns: minmax(0, 1fr) !important; row-gap: 28px; }
  .mock-split > *, .twoup > *, .v11-side > *, .x-split > *, .ag-tools-in > * { min-width: 0; }
  .v11-side .v9e-head, .v11-side.flip .v9e-head, .x-split .v9e-head, .x-split .x-head { order: -1; max-width: none; }
  .ag-names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
  .ag-names li b { font-size: 26px; }
  .ag-addr { flex-wrap: wrap; border-radius: 22px; padding: 14px 16px; }
  .ag-addr-url { font-size: 19px; white-space: normal; overflow-wrap: anywhere; }
  .kinds { columns: 2; column-gap: 20px; }
  .kinds p { overflow-wrap: anywhere; }
}