/* KLOC components — fork-4. Shared by index.html and design-system.html; reads only tokens.css.
   Page-specific placement lives with each section; nothing here knows about a section. */

/* ---------- CTAs: two components, no fills, no text scramble (design-system audit). Both share the label roll (the
   label slides up and an accent copy of itself rises in: one element and a text-shadow copy, so the accessible name
   never changes) and the arrow pass (the arrow leaves right, a new one enters from the left).
   .cta  primary, at most one per section: a HUD frame. At rest only its four accent corner ticks show over a faint
         outline; on hover the ticks draw out along the edges into a full accent frame and the inside takes a wash.
   .link secondary: label + arrow over a dim hairline that is always there; on hover an accent line draws over it. ---------- */
.cta,.link{position:relative;display:inline-flex;align-items:center;gap:var(--s-3);font-family:var(--f-mono);font-size:var(--t-label-lg);line-height:1;letter-spacing:var(--ls-label-lg);text-transform:uppercase;font-weight:var(--w-medium);color:var(--text-1);text-decoration:none;cursor:pointer;background:none;border:0;-webkit-tap-highlight-color:transparent}
.cta__l{display:block;height:1.4em;line-height:1.4em;overflow:hidden}
.cta__l > span{display:block;white-space:nowrap;text-shadow:0 1.4em 0 var(--accent);transition:transform var(--dur-3) var(--ease-out)}
.cta:hover .cta__l > span,.link:hover .cta__l > span,.cta:focus-visible .cta__l > span,.link:focus-visible .cta__l > span{transform:translateY(-1.4em)}
.arw{position:relative;flex:none;width:14px;height:10px;overflow:hidden}
.arw::before,.arw::after{content:"";position:absolute;inset:0;background:var(--accent);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M0 5h12.5M8.5 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--dur-3) var(--ease-out)}
.arw::after{transform:translateX(-160%)}
.cta:hover .arw::before,.link:hover .arw::before,.cta:focus-visible .arw::before,.link:focus-visible .arw::before{transform:translateX(160%)}
.cta:hover .arw::after,.link:hover .arw::after,.cta:focus-visible .arw::after,.link:focus-visible .arw::after{transform:none}
.cta{height:48px;padding:0 var(--s-5);--t:10px;box-shadow:inset 0 0 0 1px var(--line-1);background:
  linear-gradient(var(--accent),var(--accent)) left top/var(--t) 1px no-repeat,linear-gradient(var(--accent),var(--accent)) left top/1px var(--t) no-repeat,
  linear-gradient(var(--accent),var(--accent)) right top/var(--t) 1px no-repeat,linear-gradient(var(--accent),var(--accent)) right top/1px var(--t) no-repeat,
  linear-gradient(var(--accent),var(--accent)) left bottom/var(--t) 1px no-repeat,linear-gradient(var(--accent),var(--accent)) left bottom/1px var(--t) no-repeat,
  linear-gradient(var(--accent),var(--accent)) right bottom/var(--t) 1px no-repeat,linear-gradient(var(--accent),var(--accent)) right bottom/1px var(--t) no-repeat,
  transparent;transition:background-size var(--dur-3) var(--ease-out),background-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.cta:hover,.cta:focus-visible{background-size:52% 1px,1px 52%,52% 1px,1px 52%,52% 1px,1px 52%,52% 1px,1px 52%;background-color:var(--accent-wash)}
.cta:active{transform:translateY(1px);background-color:var(--accent-halo)}
.cta[disabled],.cta[aria-disabled="true"]{cursor:not-allowed;color:var(--text-3);opacity:.6;background-size:var(--t) 1px,1px var(--t),var(--t) 1px,1px var(--t),var(--t) 1px,1px var(--t),var(--t) 1px,1px var(--t)}
.link{padding:6px 0}
.link::before,.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line-2)}
.link::after{background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-3) var(--ease-out)}
.link:hover::after,.link:focus-visible::after{transform:none}
.link:active{opacity:.8}

/* pill: one recipe for tags, sources and meta chips */
.pill{display:inline-flex;align-items:center;padding:6px 12px;border:1px solid var(--line-1);border-radius:var(--r-pill);font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;line-height:1.2;color:var(--text-1)}
.pill--accent{border-color:var(--accent-line);color:var(--accent)}
/* counter: "01 / 07", mono, the current number in primary text */
.counter{font-family:var(--f-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-2);font-variant-numeric:tabular-nums}
.counter b{color:var(--text-1);font-weight:var(--w-medium)}
/* progress: a 1px track and a 1px accent fill */
.progress{position:relative;height:1px;background:var(--line-1)}
.progress i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(var(--p,0))}
/* eyebrow: serif italic, secondary, in parentheses */
.eyebrow{margin:0 0 var(--s-4);font-family:var(--f-serif);font-style:italic;font-weight:var(--w-regular);font-size:var(--t-body);line-height:var(--lh-body);color:var(--text-2)}