/*
  Marzex Technologies, edition 4.2 (experiment): scale.com's shape and interaction layer on top of edition 4.1.
  Source: design-labs/scale (DESIGN-SYSTEM.md, tokens.css), captured 4 October 2026.

  Loaded after marzex.css, on revamp.html only. Colour, the two accents and their roles, the type families and the
  copy stay Marzex's. This file swaps the shape language:
    FlatCta buttons     6px fill and line, 8px arrow; a bg-current sweep enters from below (left on arrow) and
                        leaves through the top (right); the label eases to .9 (marzex-scale.js runs the cycle).
    Pill tabs           1px capsule, 4px padding, a sliding indicator (200ms power2.inOut), dividers that hide
                        beside the active tab.
    Cards and panels    rounded-2xl (16px) cards; surface sections become panels inset 24px from the screen and
                        stacked 8px apart; 8px for cards and media inside them; 24px for full-bleed media.
    Container           content sits in an 80rem column (container-7xl) instead of running full bleed.
    Type ramp           html[data-type="scale"] sizes the existing classes after scale.com's ramp
                        (64 / 40 / 32 / 24 / 20 / 16 / 14 / 13px at 1440, leading 1.25 to 1.5).
                        It is the only ramp: the html element carries data-type="scale" on every page.
  Colour stays monochrome, as in the scale lab. The one primary action, "Start a project", is the mono sandbox's
  arrow button with the halo ring (design-labs/sandbox/mono, R1): .cta--ring. Tabs and cards take no accent.
  Focus stays Marzex's 2px iris ring (scale.com uses 1px #86bff2).
*/

:root {
  /* radius: Tailwind v4 as scale.com uses it */
  --r-sm: .25rem;    /* 4px: chips, icon boxes, square controls */
  --r-md: .375rem;   /* 6px: FlatCta fill and line, arrow box, fields */
  --r-lg: .5rem;     /* 8px: arrow CTA, cards and media inside panels */
  --r-2xl: 1rem;     /* 16px: cards and panels (rounded-2xl) */
  --r-3xl: 1.5rem;   /* 24px: full-bleed media */
  --r-media: var(--r-lg); /* marzex.css .frame and .media pick this up */

  /* layout */
  --container: 80rem;        /* container-7xl */
  --inset: 1.5rem;           /* panels and full-bleed media stand 24px off the screen edge */
  --stack: .5rem;            /* gap between stacked panels, and between cards */

  /* motion (scale tokens: FlatCta, tabs, list reveal) */
  --s-ease: cubic-bezier(.4, 0, .2, 1);         /* Tailwind default: tab colour, fills */
  --s-ease-out: cubic-bezier(0, 0, .2, 1);      /* FlatCta sweep, label, chevron */
  --s-power2-inout: cubic-bezier(.65, 0, .35, 1); /* pill indicator */
  --s-power2-out: cubic-bezier(.33, 1, .68, 1); /* list items, reveals */
  --s-sweep: .3s;
  --s-sweep-arrow: .6s;
  --s-tab: .2s;

  /* sweep strength: bg-current at .35 on a paper fill, .3 on an ink fill (FlatCta white / black) */
  --sweep: .35;

  --icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3.5 10.5 8 6 12.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}
.theme-light, .theme-bone, .theme-stone, .theme-sage { --sweep: .3; }
@media (max-width: 768px) { :root { --inset: .5rem; } }

/* ---------- Container and panels ---------- */
.wrap { max-width: calc(var(--container) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
/* Inside an inset box (panel, full-bleed media) the column narrows by the inset, so its content lines up with .wrap. */
.wrap-in { max-width: calc(var(--container) + 2 * (var(--margin) - var(--inset))); margin-inline: auto; padding-inline: max(0px, calc(var(--margin) - var(--inset))); }
.panel { margin-inline: var(--inset); border-radius: var(--r-2xl); }
.panel + .panel { margin-top: var(--stack); }
.inset { padding-inline: var(--inset); }

/* ---------- Cards and chips ---------- */
.card { position: relative; border-radius: var(--r-2xl); background: color-mix(in srgb, var(--fg) 7%, transparent); }
.card .card { border-radius: var(--r-lg); background: color-mix(in srgb, var(--fg) 6%, transparent); }
.chip {
  display: inline-flex; align-items: center; gap: .375rem; width: fit-content; padding: .3rem .5rem .25rem;
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--fg) 8%, transparent);
}

/* ---------- Badge (edition 4.3, proposal: see design-system.html#badge) ----------
   <span class="badge [badge--line | badge--solid] [badge--dot | badge--live | badge--new | badge--count]">Live</span>
   A chip names a category (Inter Tight caps, 4px corners). A badge says where a thing stands or how many there are:
   Share Tech Mono caps in a pill, so the two never read alike. Monochrome like the rest of the layer, drawn in
   currentColor so it follows the surface and whatever it sits in (a dimmed tab label dims its count with it):
     soft (default)  currentColor at 10%
     line            a 1px ring at 28%, no fill
     solid           the type colour, with the surface colour on it
   Markers: a 6px dot (dot), the dot with a slow ring (live; still under reduced motion), and the one accent, a flare
   dot on New. Flare clears 3:1 on ink, paper and bone only, so on stone, sage, olive and graphite the dot takes the
   type colour. Never the signal gradient, never a badge without words: the dot only adds to the label. */
.badge {
  --dot: currentColor;
  display: inline-flex; align-items: center; justify-content: center; gap: .375rem; flex: none; width: fit-content;
  height: 1.375rem; padding: .0625rem .5rem 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font: 400 .75rem/1 var(--label); letter-spacing: .03rem; text-transform: uppercase; white-space: nowrap;
  vertical-align: middle;
}
.badge--line { background: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 28%, transparent); }
.badge--solid { background: var(--fg); color: var(--bg); }
.badge--count { min-width: 1.375rem; padding-inline: .375rem; }
.badge--dot::before, .badge--live::before, .badge--new::before {
  content: ""; flex: none; width: .375rem; height: .375rem; margin-top: -.0625rem; border-radius: 50%; background: var(--dot);
}
.badge--new { --dot: var(--flare); }
.theme-stone .badge--new, .theme-sage .badge--new, .theme-olive .badge--new, .theme-graphite .badge--new { --dot: currentColor; }
.badge--solid.badge--new { --dot: var(--flare); } /* the dot then sits on the type colour: ink or paper, both clear */
@media (prefers-reduced-motion: no-preference) {
  .badge--live::before { animation: badge-live 2s var(--s-ease-out) infinite; }
}
@keyframes badge-live {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 .3125rem color-mix(in srgb, var(--dot) 0%, transparent); }
}
@media (max-width: 768px) { .badge { height: 1.5rem; font-size: .857rem; } .badge--count { min-width: 1.5rem; } }

/* ---------- FlatCta ----------
   <a class="cta [cta--line | cta--arrow]">
     <span class="cta__sweep" aria-hidden="true"></span>
     <span class="cta__row"><span class="cta__label">Start a project</span>
       <span class="cta__icon" aria-hidden="true"><span class="cta__track"></span></span>   (arrow only)
     </span>
   </a>
   Fill takes the surface's type colour and puts the surface colour on it, so one class works on ink, bone, sage,
   olive and either header tone. */
.cta {
  --sweep-dur: var(--s-sweep);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; width: fit-content; height: max-content;
  padding: 0; border: 0; border-radius: var(--r-md);
  background: var(--fg); color: var(--bg);
  font: 500 .875rem/1.3125rem var(--sans); letter-spacing: -.009rem; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-hover) var(--ease-cubic), color var(--s-sweep) var(--s-ease), border-color var(--s-sweep) var(--s-ease);
}
.cta__row { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: inherit; padding: .5rem 1rem; }
.cta__label { display: inline-block; transition: scale var(--s-sweep) var(--s-ease-out); }
.cta:not(.cta--arrow):hover .cta__label { scale: .9; }
.cta__sweep {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: currentColor; opacity: var(--sweep);
  translate: 0 100%; transition: translate var(--sweep-dur) var(--s-ease-out);
}
.cta__sweep[data-pos="on"] { translate: 0 0; }
.cta__sweep[data-pos="off"] { translate: 0 -100%; }
.cta:not(.is-wired):hover .cta__sweep { translate: 0 0; } /* no script: plain hover */
.cta .snap { transition: none !important; }
.cta:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* line: scale's muted border. 1px of the type colour at 20%, label at 80%; both firm up on hover */
.cta--line { border: 1px solid color-mix(in srgb, var(--fg) 20%, transparent); background: transparent; color: color-mix(in srgb, var(--fg) 82%, transparent); }
.cta--line .cta__row { padding: calc(.5rem - 1px) calc(1rem - 1px); }
.cta--line:hover { border-color: color-mix(in srgb, var(--fg) 40%, transparent); color: var(--fg); }

/* arrow: 8px corners, the sweep crosses left to right over 600ms, two chevrons on a 200% track slide in */
.cta--arrow { --sweep-dur: var(--s-sweep-arrow); border-radius: var(--r-lg); }
.cta--arrow .cta__row { padding: .25rem .25rem .25rem 1rem; }
.cta--arrow .cta__sweep { translate: -100% 0; }
.cta--arrow .cta__sweep[data-pos="on"] { translate: 0 0; }
.cta--arrow .cta__sweep[data-pos="off"] { translate: 100% 0; }
.cta__icon {
  position: relative; flex: none; width: 2rem; height: 2rem; overflow: hidden; border-radius: var(--r-md);
  background: var(--bg); color: var(--fg); transition: background-color var(--t-hover) var(--ease-cubic), color var(--t-hover) var(--ease-cubic);
}
.cta__track { position: absolute; inset: 0; display: flex; width: 200%; translate: -50% 0; transition: translate var(--s-sweep-arrow) var(--s-ease-out); }
.cta__track::before, .cta__track::after { content: ""; flex: 0 0 50%; background: currentColor; -webkit-mask: var(--icon-chev) center / 1rem no-repeat; mask: var(--icon-chev) center / 1rem no-repeat; }
.cta:hover .cta__track:not(.snap) { translate: 0 0; }

/* ring: the mono sandbox's arrow button with the halo ring (design-labs/sandbox/mono, R1 "Halo · spin").
   <span class="cta__tile" aria-hidden="true"><span class="cta__ring"></span><span class="cta__icon">…</span></span>
   A 1.5px conic ring of the signal gradient sits 1.5px off the 32px box. It is still at rest; hover and focus turn it
   once every 1.6s, linear, and leaving pauses it where it is rather than snapping back. Room for it: row padding
   4 → 6px (button 40 → 44px) and corners 8 → 12px, so box (6), ring (9) and button (12) stay concentric. The fill
   follows the surface like any .cta: paper button and ink box on ink, ink button and paper box on light.
   Brand: this makes the ring a fourth signal-gradient object (edition 4.1 allows three). */
@property --ring-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.cta--ring { border-radius: .75rem; }
.cta--ring .cta__row { padding: .375rem .375rem .375rem 1.125rem; }
.cta__tile { position: relative; display: flex; flex: none; }
.cta__ring {
  position: absolute; inset: -3px; padding: 1.5px; border-radius: calc(var(--r-md) + 3px); pointer-events: none;
  background: conic-gradient(from var(--ring-a), var(--flare), var(--iris), var(--flare));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: cta-ring 1.6s linear infinite paused;
}
.cta--ring:is(:hover, :focus-visible) .cta__ring { animation-play-state: running; }
.cta--ring:focus-visible .cta__track:not(.snap) { translate: 0 0; }
@keyframes cta-ring { to { --ring-a: 360deg; } }

/* ---------- Underlined link with a 45° arrow: the secondary action beside a CTA ----------
   <a class="ulink"><span class="ulink__label">See our work</span><span class="ulink__icon" aria-hidden="true"></span></a>
   Always underlined, 1px in the type colour. On hover the line runs out to the right and back in from the left, and
   the arrow leaves to the top right as a second one comes in from the bottom left, both on the arrow CTA's 600ms.
   Leaving snaps the arrows back, which looks the same. Same type as the CTA it sits beside. */
.ulink {
  display: inline-flex; align-items: center; gap: .375rem; width: fit-content; min-height: 2.75rem;
  color: inherit; text-decoration: none; white-space: nowrap;
  font: 500 .875rem/1.3125rem var(--sans); letter-spacing: -.009rem;
}
.cta + .ulink { margin-inline-start: .5rem; }
.ulink__label { position: relative; }
.ulink__label::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -.125rem; height: 1px; background: currentColor;
}
.ulink:hover .ulink__label::after { animation: ulink-line var(--s-sweep-arrow) cubic-bezier(.65, 0, .35, 1); }
@keyframes ulink-line {
  0% { transform: scaleX(1); transform-origin: 100% 50%; }
  50% { transform: scaleX(0); transform-origin: 100% 50%; }
  50.01% { transform: scaleX(0); transform-origin: 0 50%; }
  100% { transform: scaleX(1); transform-origin: 0 50%; }
}
.ulink__icon { position: relative; flex: none; width: .75rem; height: .75rem; overflow: hidden; }
.ulink__icon::before, .ulink__icon::after {
  content: ""; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--icon-ne) center / contain no-repeat; mask: var(--icon-ne) center / contain no-repeat;
}
.ulink__icon::after { translate: -100% 100%; }
.ulink:hover .ulink__icon::before { translate: 100% -100%; transition: translate var(--s-sweep-arrow) var(--s-ease-out); }
.ulink:hover .ulink__icon::after { translate: 0 0; transition: translate var(--s-sweep-arrow) var(--s-ease-out); }
.ulink:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }

@media (max-width: 768px) { .cta, .ulink { font-size: 1rem; line-height: 1.5rem; } }
@media (pointer: coarse) { .cta { min-height: 44px; } }
@media (prefers-reduced-motion: reduce) {
  .cta:hover .cta__label { scale: 1; }
  .cta__track { translate: 0 0 !important; }
  .cta__ring { animation: none; }
}

/* ---------- Social row: header end and menu foot ----------
   36px squares with 6px corners (scale's icon button), an 18px glyph in currentColor so it follows the bar's tone,
   and a currentColor/10% tint on hover. No accent. The row sits 9px past the grid edge so the last glyph lines up
   with it. marzex.css's text-link rules for header links are undone here. */
.social { list-style: none; display: flex; align-items: center; gap: .25rem; margin: 0; padding: 0; }
.social a, .hdr__end .social a, .menu__foot .social a {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: var(--r-md);
  color: inherit; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease-cubic);
}
.social a:hover, .hdr__end .social a:hover, .menu__foot .social a:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.social a:focus-visible { outline: 1px solid currentColor; outline-offset: 1px; } /* iris drops under 3:1 on glass, as in the nav */
.social svg { width: 1.125rem; height: 1.125rem; fill: currentColor; }
.hdr__end .social { margin-right: -.5625rem; }
.menu__foot .social { display: flex; gap: .25rem; margin-left: -.5625rem; } /* over marzex.css's stacked .menu ul */

/* Header scramble (marzex-scale.js adds .hdr-fx unless motion is reduced): on wide screens the wordmark and social
   row no longer fade when the page moves. The script scrambles and wipes them out, then decodes and wipes them back
   in; CSS only holds them visible for the .6s the exit takes. */
@media (min-width: 1081px) {
  .hdr-fx .hdr__brand, .hdr-fx .hdr__end { transition: visibility 0s; }
  .hdr-fx .hdr.is-scrolled .hdr__brand, .hdr-fx .hdr.is-scrolled .hdr__end { opacity: 1; transition: visibility 0s linear .6s; }
}

/* Scroll-to square: 8px corners like the arrow CTA. Still the signal gradient (one of its three objects). */
.scrollto { border-radius: var(--r-lg); }

/* ---------- Pill tabs (Headless UI UseCaseTabs) ----------
   <div class="ptabs" role="tablist"><span class="ptabs__ind" aria-hidden="true"></span><button role="tab">…</button>…</div>
   The page script places the indicator; it scrolls sideways when the labels are wider than the screen. */
.ptabs {
  position: relative; isolation: isolate; display: inline-flex; max-width: 100%;
  padding: .25rem; border: 1px solid color-mix(in srgb, var(--fg) 15%, transparent); border-radius: var(--r-pill);
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.ptabs::-webkit-scrollbar { display: none; }
.ptabs__ind {
  position: absolute; top: .25rem; left: 0; z-index: -1; width: 0; height: calc(100% - .5rem);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--fg) 10%, transparent); opacity: 0;
  transition: translate var(--s-tab) var(--s-power2-inout), width var(--s-tab) var(--s-power2-inout), opacity var(--s-tab) linear;
}
.ptabs__ind.is-placed { opacity: 1; }
.ptabs__ind.snap { transition: none; }
.ptabs [role="tab"] {
  position: relative; flex: none; padding: .5rem 1rem; border: 0; border-radius: var(--r-pill); background: none;
  color: color-mix(in srgb, var(--fg) 50%, transparent); white-space: nowrap;
  font: 400 .875rem/1.375rem var(--sans); letter-spacing: -.009rem;
  transition: color var(--s-tab) var(--s-ease);
}
.ptabs [role="tab"]:hover, .ptabs [role="tab"][aria-selected="true"] { color: var(--fg); }
.ptabs [role="tab"]:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.ptabs [role="tab"]:not(:last-of-type)::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 50%; translate: 0 -50%;
  background: color-mix(in srgb, var(--fg) 20%, transparent); transition: scale .1s var(--s-ease);
}
.ptabs [role="tab"].no-div::after { scale: 1 0; }
@media (max-width: 768px) { .ptabs [role="tab"] { font-size: 1rem; line-height: 1.5rem; } }

/* ---------- Type ramp: scale.com sizes on the existing classes ----------
   Families, weights, case and copy stay as edition 4.1 sets them; only size, leading and tracking move. */
:root[data-type="scale"] body { font-size: 1rem; line-height: 1.5; letter-spacing: -.01em; }
:root[data-type="scale"] .t-display-3 { font-size: 4rem; line-height: 1.05; letter-spacing: -.02em; }
:root[data-type="scale"] .t-display-4 { font-size: 4rem; line-height: 1.05; letter-spacing: -.01em; }
:root[data-type="scale"] .t-h2 { font-size: 2rem; line-height: 1.25; letter-spacing: -.03em; }
:root[data-type="scale"] .t-h3, :root[data-type="scale"] .t-h4 { font-size: 2.5rem; line-height: 1.25; letter-spacing: -.01em; }
:root[data-type="scale"] .t-h5, :root[data-type="scale"] .t-h6, :root[data-type="scale"] .t-lead { font-size: 1.5rem; line-height: 1.4; letter-spacing: -.01em; }
:root[data-type="scale"] .t-h7 { font-size: 1.25rem; line-height: 1.4; letter-spacing: -.01em; }
:root[data-type="scale"] .t-h8 { font-size: 1rem; line-height: 1.375; letter-spacing: -.025em; font-weight: 500; }
:root[data-type="scale"] .t-body-1 { font-size: 1rem; line-height: 1.5; letter-spacing: -.01em; }
:root[data-type="scale"] .t-body-2 { font-size: .875rem; line-height: 1.5; letter-spacing: -.01em; }
:root[data-type="scale"] .t-body-3 { font-size: .875rem; line-height: 1.43; letter-spacing: -.01em; }
:root[data-type="scale"] .t-cta { font-size: .875rem; line-height: 1.5; }
:root[data-type="scale"] .t-detail, :root[data-type="scale"] .t-label { font-size: .8125rem; line-height: 1.2; }
:root[data-type="scale"] .prose p { line-height: 1.5; }
@media (max-width: 768px) {
  :root[data-type="scale"] .t-display-3, :root[data-type="scale"] .t-display-4 { font-size: 2.571rem; line-height: 1.05; }
  :root[data-type="scale"] .t-h2 { font-size: 1.714rem; line-height: 1.25; letter-spacing: -.02em; }
  :root[data-type="scale"] .t-h3, :root[data-type="scale"] .t-h4 { font-size: 2rem; line-height: 1.1; }
  :root[data-type="scale"] .t-h5, :root[data-type="scale"] .t-h6, :root[data-type="scale"] .t-lead { font-size: 1.429rem; }
  :root[data-type="scale"] .t-h7 { font-size: 1.286rem; }
  :root[data-type="scale"] .t-h8, :root[data-type="scale"] .t-body-1, :root[data-type="scale"] body { font-size: 1.143rem; }
  :root[data-type="scale"] .t-body-2, :root[data-type="scale"] .t-body-3, :root[data-type="scale"] .t-cta { font-size: 1rem; }
  :root[data-type="scale"] .t-detail, :root[data-type="scale"] .t-label { font-size: .857rem; }
}