/* ===========================================================================
   WebDeviAnt — studios
   Loaded only by the pages under /studios/. Everything those pages share with
   the rest of the site still comes from core.css, components.css and
   adapt.css; this file adds the three things only Studios has: the Colony
   Circuit lockup, the venture rows, and the legal documents.

   Concept: "The Colony Circuit", after the chosen logo. Read it as ownership,
   not architecture: the products are separate businesses that share nothing
   technical, and the only thing routed back to the centre is who owns, runs
   and bills for them. Any copy or ornament implying the products are wired to
   each other is wrong — that claim was made once and corrected.

   The instrument does not change, the subject does: the home page is one
   person measured against a norm, Studios is what that person builds.

   Load order matters. This file is linked AFTER adapt.css so its own
   reduced-motion, high-contrast and print blocks (at the foot of the file)
   win at equal specificity. Keep new overrides down there, not scattered.
   ========================================================================= */

/* --------------------------------------------------------------- the rail --
   The rail is the site's and is identical everywhere except here: inside
   /studios/ the brand becomes the Colony mark and gains the sub-brand.
   aria-current in the nav says which section you are in; this says whose
   section it is, which is not the same thing — Studios is the thing the
   products are sold under, and it has to be visible on the pages that sell
   them.

   The mark is a mask swap, so it still inherits currentColor and still costs
   one cached request. It is a size-specific reduction of the lockup, not the
   lockup itself — see the note in colony-mark.svg. */

.mark--colony {
  -webkit-mask-image: url('/assets/img/colony-mark.svg');
          mask-image: url('/assets/img/colony-mark.svg');

  /* Green, not the inherited foreground. In the Colony Circuit artwork the ant
     is --live; the rest of the site's mark is monochrome only because it sits
     next to a wordmark that already carries the neon on "Ant". Here the mark is
     the sub-brand, so it takes the brand colour — and it matches the favicon,
     which is the same mark and cannot inherit anything. */
  background-color: var(--live);
}

/* The circuit needs a little more room than the bare ant to stay readable at
   rail size — the pads sit right on the edge of the box. */
.rail__brand .mark--colony { width: 1.75rem; height: 1.75rem; }

/* "Studios" is metadata on the wordmark, not part of it — the same treatment
   the home page gives ".io". One glance says sub-brand, not new brand. */
.studios-tag { color: var(--fg-faint); }

/* This brand is wider than the site's, and the nav it shares a row with
   carries "Enter Studios" — the longest label on the site. Measured at 375px
   the row lands 3px over, so three things give way together rather than
   shaving it to a single pixel: the sub-brand goes, the mark returns to its
   normal size, and the gap between brand and nav tightens. That is 14px of
   headroom, which survives a larger default font size.

   The sub-brand is hidden visually but not from the accessibility tree, so
   the home link keeps its full name. Scoped to the header: the footer uses
   the same .rail__brand markup and has all the width it needs.

   Below 23rem components.css hides the wordmark entirely, which still works
   — it targets the span wrapping this one. */
@media (max-width: 34rem) {
  .rail .rail__brand .studios-tag {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .studios-page .rail__brand .mark--colony { width: 1.5rem; height: 1.5rem; }
  .studios-page .rail__inner { gap: var(--m-2); }
}

/* The page-level hook is `studios-page`, NOT `studios`. `.studios` is already
   the hero wordmark below — display size, 0.32em tracking — so putting it on
   <body> inherits that typography into every element on the page. It is not a
   subtle failure: the whole document renders at 5rem. */

/* ------------------------------------------------------------- the lockup --
   The hero reproduces the Colony Circuit logo as a live composition rather
   than an <img>: the circuit is inline SVG so it inherits the design tokens
   (and therefore adapts to contrast, print and reduced-motion), while the
   wordmark stays real, selectable, resizable HTML text.                     */

.lockup {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--m-2) var(--m-6);
}

/* One breakpoint, chosen where the two columns stop being able to hold a
   readable measure side by side rather than at a device width. */
@media (max-width: 56rem) {
  .lockup { grid-template-columns: minmax(0, 1fr); }
  .lockup__art { max-width: 15rem; }
}

.lockup__art { width: 100%; }

.lockup__name { display: block; }

/* The type hierarchy is the artwork's, not the landing page's: in the Colony
   Circuit lockup the wordmark is the small line and STUDIOS is the big one
   (52pt against 90pt — a ratio of about 1.73, preserved below). Inverting it
   would make this read as the personal site with a subtitle, which is exactly
   the wrong way round for a holding brand. */

.lockup__row {
  display: flex;
  align-items: center;
  gap: var(--m-2);
}

/* Overrides the display:block that .wordmark carries for the landing hero.
   The class is still worth reusing: it brings the one-sigma lift and the neon
   bleed on "Ant" with it, and those must be identical across all three sites. */
.lockup__word {
  display: inline-block;
  font-size: clamp(1.75rem, 4.6vw, 2.9rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  flex: none;
}

/* The engineering-drawing annotation from the artwork: a hairline running off
   the wordmark to a dimension label. Decorative, and marked aria-hidden in the
   markup so it stays out of the heading's accessible name. */
.lockup__sigma {
  display: flex;
  align-items: center;
  gap: var(--m-2);
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--t-micro);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.lockup__sigma::before {
  content: '';
  flex: 1 1 auto;
  min-width: 0;
  height: 1px;
  background: var(--rule-strong);
}
@media (max-width: 34rem) { .lockup__sigma { display: none; } }

/* STUDIOS, set as the logo sets it: wide-tracked, heavy, and stamped under
   the wordmark.
   Note the deliberate absence of a negative inline-end margin to "trim" the
   trailing letter-space. On a block element that widens the box rather than
   tightening the type, pushing the right edge past the shell — invisible only
   because html carries overflow-x: clip. The trailing space costs nothing
   here: the block is left-aligned and nothing sits to its right. */
.studios {
  display: block;
  font-size: clamp(2.25rem, 8vw, 5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.32em;
  margin-top: var(--m-2);
  color: var(--fg);
}

.lockup__lead { max-width: 48ch; margin-top: var(--m-3); }

/* ------------------------------------------------------- the colony circuit --
   Geometry lifted verbatim from the approved artwork (shared/img/
   colony-lockup.svg), cropped to the circuit and re-tokenised. Colour is
   applied through classes, never through fill/stroke attributes, so the high
   contrast and print blocks below can reach it.                             */

.circuit {
  width: 100%;
  height: auto;
  overflow: visible;

  /* A fourth duration, declared rather than sprinkled. The colony breathes;
     it does not flash. Slow enough to be felt and not watched. */
  --colony-pulse: calc(4.2s * var(--dur));
}

.circuit__atmos-stop { stop-color: var(--atmos); }

.circuit__trace {
  fill: none;
  stroke: var(--rule-strong);
  stroke-width: 2;
}

.circuit__stub {
  fill: none;
  stroke-width: 2.5;
  opacity: 0.95;
}
.circuit__stub--live { stroke: var(--live); }
.circuit__stub--past { stroke: var(--past); }

.circuit__pad {
  fill: var(--bg);
  stroke: var(--rule-strong);
  stroke-width: 2;
}
.circuit__core--live { fill: var(--live); }
.circuit__core--past { fill: var(--past); }

.circuit__ant {
  fill: var(--live);
  filter: url(#colony-glow);
}

/* The overture, in three beats on one easing family: the board draws itself,
   the pads land, the ant arrives. Same 900ms budget as the landing hero, so
   both front doors feel like the same building. */

.circuit__trace,
.circuit__stub {
  /* Comfortably longer than the longest path, so one value draws them all. */
  stroke-dasharray: 300;
  animation: circuit-draw var(--t-overture) var(--ease-out) both;
}

.circuit__node { animation: circuit-land var(--t-reveal) var(--ease-out) both; }
.circuit__node--2 { animation-delay: 80ms; }
.circuit__node--3 { animation-delay: 160ms; }
.circuit__node--4 { animation-delay: 240ms; }

.circuit__ant { animation: circuit-wake var(--t-overture) var(--ease-out) both; }

/* Only --live is permitted to glow, and only the cores do. */
.circuit__core--live { animation: circuit-pulse var(--colony-pulse) var(--ease-inout) infinite; }

@keyframes circuit-draw {
  from { stroke-dashoffset: 300; opacity: 0; }
  40%  { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes circuit-land {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: none; }
}

/* Scaling a pad about its own centre needs a box to scale about; without
   this the transform is measured from the SVG origin and the pads fly in
   from the top-left corner. */
.circuit__node { transform-box: fill-box; transform-origin: center; }

@keyframes circuit-wake {
  from { opacity: 0; }
  60%  { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes circuit-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* ------------------------------------------------------------- the roster --
   Ventures are rows, not tiles. Three products do not fill a card grid, and
   a row gives each one enough width to make its case — which is the entire
   job of this page. It also scales: a fourth product is another row, not a
   re-layout.                                                                */

.ventures { border-top: 1px solid var(--rule); }

.venture {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  gap: var(--m-2) var(--m-6);
  padding: var(--m-4) 0 var(--m-4) var(--m-3);
  border-bottom: 1px solid var(--rule);
  transition: border-color var(--t-micro-dur) var(--ease-out);
}
.venture:hover { border-bottom-color: var(--rule-strong); }

@media (max-width: 54rem) {
  .venture { grid-template-columns: minmax(0, 1fr); }
}

/* The node: each venture is a pad wired back to the centre of the hero
   circuit — to the owner, not to the venture above it. The dot restates the
   logo's idea in one mark rather than a paragraph, and the traces run inward
   only. Nothing here should ever be drawn joining one venture to the next:
   the products are independent, and the ornament must not claim otherwise. */
.venture::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc(var(--m-4) + 0.55rem);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--rule-strong);
  transition: border-color var(--t-micro-dur) var(--ease-out),
              background-color var(--t-micro-dur) var(--ease-out),
              box-shadow var(--t-micro-dur) var(--ease-out);
}
.venture:hover::before {
  background: var(--live);
  border-color: var(--live);
  box-shadow: 0 0 14px color-mix(in srgb, var(--live) 60%, transparent);
}

/* The trace running from the node into the row, drawn only on the wide
   layout where there is a gutter for it to cross. */
@media (min-width: 54.0625rem) {
  .venture::after {
    content: '';
    position: absolute;
    left: 9px;
    top: calc(var(--m-4) + 0.95rem);
    width: calc(var(--m-3) - 9px);
    height: 1px;
    background: var(--rule-strong);
  }
}

/* The identity column stacks: mark, index, name, tagline. The mark sits above
   rather than beside the name because the column is only 17rem wide and a
   product name at display size already fills it — putting a tile alongside
   "NitroSearch" pushes it straight out of the column. */
.venture__id { display: block; }
.venture__index { color: var(--live); }

/* Each product's real mark, self-hosted. These are the only full-colour
   artwork on a deliberately two-hue site, so each is contained in a tile with
   the site's own hairline: framed, the colour reads as a product badge rather
   than as a stray accent. The frame is the site's; the mark inside is theirs
   and is never recoloured — a showcase that desaturates the thing it is
   showcasing is not a showcase. */
.venture__logo {
  width: 3.25rem;
  height: 3.25rem;
  object-fit: contain;
  padding: 0.6rem;
  border: 1px solid var(--rule);
  border-radius: 7px;
  background: var(--bg-raised);
  margin-bottom: var(--m-2);
  transition: border-color var(--t-micro-dur) var(--ease-out),
              background-color var(--t-micro-dur) var(--ease-out);
}
.venture:hover .venture__logo {
  border-color: var(--rule-strong);
  background: var(--bg-sunken);
}

.venture__name {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: var(--m-1);
}

.venture__tagline {
  color: var(--fg-dim);
  font-size: var(--t-small);
  margin-top: var(--m-1);
  max-width: 30ch;
}

.venture__body { display: grid; gap: var(--m-2); align-content: start; }
.venture__text { color: var(--fg); max-width: 62ch; }

/* Claims, one per line, each one checkable against the product's own site.
   Bullets rather than prose because a visitor scanning three products reads
   the shapes, not the sentences. */
.venture__points {
  display: grid;
  gap: 0.35rem;
  color: var(--fg-dim);
  font-size: var(--t-small);
  max-width: 62ch;
}
.venture__points li { position: relative; padding-left: 1.5ch; }
.venture__points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 0.6ch;
  height: 1px;
  background: var(--rule-strong);
}

.venture__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--m-2);
  margin-top: var(--m-1);
}

.venture__link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6ch;
  color: var(--live);
  font-weight: 700;
  font-size: var(--t-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--live) 45%, transparent);
  transition: border-color var(--t-micro-dur) var(--ease-out);
}
.venture__link:hover { border-bottom-color: var(--live); }

/* Status is metadata about a product, so it is a readout, not a badge with a
   fill. `--past` for anything not yet generally available: it is the same
   "not the live thing" signal the CV uses for previous roles. */
.status {
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.7ch;
  white-space: nowrap;
}
.status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status--live { color: var(--live); }
.status--beta { color: var(--past-text); }

/* ------------------------------------------------------------------ legal --
   Terms and a privacy policy that people can actually read. Long-form legal
   text fails for two reasons — a measure that is too wide and clause numbers
   you cannot find — so this fixes both and does nothing else clever.        */

/* The floor is tuned for a landing page: short blocks, lots of air, and the
   eye moving. A legal document is the opposite — continuous reading, for
   minutes at a time — and a grid animating under the last few lines of every
   viewport is genuinely tiring. So the documents turn it down.

   Both selectors are needed and both must be on `body`: components.css
   declares --floor-intensity on `body` and on `body.is-lit`, and an
   inherited value from :root never reaches .baseline past those. The footer
   still gets its moment, just a quieter one. */
body.doc          { --floor-intensity: 0.07; }
body.doc.is-lit   { --floor-intensity: 0.3; }

.legal { max-width: 70ch; }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem var(--m-2);
  border-block: 1px solid var(--rule);
  padding-block: var(--m-1);
  margin-top: var(--m-3);
}

/* The plain-English summary. Not a substitute for the clauses below it and
   labelled as such — a summary that claims to be the agreement is worse than
   no summary at all. */
.legal__summary {
  border-left: 3px solid var(--live);
  background: var(--bg-raised);
  padding: var(--m-2) var(--m-3);
  margin-top: var(--m-4);
}
.legal__summary p { color: var(--fg-dim); font-size: var(--t-small); }
.legal__summary p + p { margin-top: var(--m-1); }
.legal__summary b { color: var(--fg); }

.legal__toc {
  columns: 2;
  column-gap: var(--m-6);
  margin-top: var(--m-4);
  padding-top: var(--m-2);
  border-top: 1px solid var(--rule);
}
@media (max-width: 40rem) { .legal__toc { columns: 1; } }

.legal__toc li { break-inside: avoid; }
.legal__toc a {
  display: flex;
  gap: 1ch;
  color: var(--fg-dim);
  text-decoration: none;
  font-size: var(--t-small);
  padding-block: 0.15rem;
  transition: color var(--t-micro-dur) var(--ease-out);
}
.legal__toc a:hover { color: var(--live); }
.legal__toc .n { color: var(--fg-faint); font-variant-numeric: tabular-nums; }

.clause { margin-top: var(--m-6); scroll-margin-top: calc(var(--m-8) + var(--m-2)); }

.clause__title {
  display: flex;
  gap: 1.2ch;
  align-items: baseline;
  font-size: var(--t-h3);
  padding-bottom: var(--m-1);
  border-bottom: 1px solid var(--rule);
}
.clause__num {
  color: var(--live);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.clause p { margin-top: var(--m-2); color: var(--fg-dim); }
.clause p b, .clause li b { color: var(--fg); font-weight: 700; }
.clause a { color: var(--live); text-decoration: underline; text-underline-offset: 0.25em; }
.clause a:hover { background: var(--live); color: var(--live-ink); text-decoration: none; }

.clause ul, .clause ol {
  margin-top: var(--m-2);
  padding-left: 2.5ch;
  color: var(--fg-dim);
  display: grid;
  gap: 0.5rem;
}
.clause ul { list-style: none; padding-left: 0; }
.clause ul li { position: relative; padding-left: 2.5ch; }
.clause ul li::before {
  content: '';
  position: absolute;
  left: 0.4ch;
  top: 0.78em;
  width: 1ch;
  height: 1px;
  background: var(--rule-strong);
}

/* Definitions and the rights table read as data, so they are set as data. */
.deflist { margin-top: var(--m-2); display: grid; gap: var(--m-2); }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
  gap: 0.3rem var(--m-3);
  border-top: 1px solid var(--rule);
  padding-top: var(--m-1);
}
@media (max-width: 40rem) {
  .deflist > div { grid-template-columns: minmax(0, 1fr); }
}
.deflist dt { color: var(--fg); font-weight: 700; }
.deflist dd { color: var(--fg-dim); margin: 0; font-size: var(--t-small); }

/* --------------------------------------------------------------- adapting --
   Everything below overrides the three states core/components/adapt already
   define, for the components this file adds. It lives here, after the rest
   of the file, so the cascade resolves the way it reads.                    */

@media (prefers-reduced-motion: reduce) {
  /* Not "slower" — none. The board is simply already drawn. */
  .circuit__trace,
  .circuit__stub {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
  .circuit__node,
  .circuit__ant { animation: none; opacity: 1; transform: none; }
  .circuit__core--live { animation: none; opacity: 1; }
  .venture:hover::before { box-shadow: none; }
}

@media (prefers-contrast: more) {
  .circuit__ant { filter: none; }
  .circuit__core--live { animation: none; opacity: 1; }
  .venture:hover::before { box-shadow: none; }
  .legal__summary { background: transparent; }
}

@media print {
  /* The circuit is decoration; the roster is the document. Ventures print as
     plain blocks with their URLs resolved by the rule in adapt.css. */
  .circuit { display: none !important; }

  .studios { color: #000; letter-spacing: 0.2em; }
  .venture { break-inside: avoid; padding-left: 0; border-bottom-color: #ccc; }
  .venture::before, .venture::after { display: none !important; }
  .legal__toc { display: none !important; }
  .legal__summary { border-left-color: #000; background: transparent; }
  .clause { margin-top: var(--m-3); break-inside: auto; }
  .clause__title { break-after: avoid; }
  .status::before { display: none; }
}