/* ============================================================================
   ca-work.css — the "what we make" ledger
   ----------------------------------------------------------------------------
   These rules used to live inline in showcase.html. showcase.html is gone: its
   material now opens the home page, so the rules had to become a real
   stylesheet. Only the NON-overlapping half was lifted. The tile spread
   (.spread/.tile/.t-*), the drawn phone (.phone/.notif/.appcard), the masthead
   swap (.imprint) and the app list (.applist) already live in ca-moments.css
   and are shared with the four subject pages — copying them here would have
   given the home page a second, competing definition of the same object.
   Load order: ca-site.css → ca-tools.css → ca-moments.css → ca-work.css.
   ========================================================================== */

/* ---- the chain, directly under the hero --------------------------------
   This slot used to hold `.cycles`: four text cards, one per subject, 266px
   tall. They are gone. The four subjects are already in the header nav, in the
   hero's eyebrow and in their own blocks further down, and Erick has twice said
   he does not want the site to open on a grid of cards.

   What the site was never saying is that we do the whole chain: we compute it,
   we set it, and the finished object is what ships. That is what is actually
   being sold, so it belongs in the first screen, and it is drawn rather than
   written because it is a sequence.

   Kept small on purpose — it should not cost more than the cards it replaced.

   Three panels, each its own SVG, with the captions in HTML rather than inside
   the drawing. One 1120-wide SVG would have scaled as a single block and put
   its labels at about 4px on a phone; this way the type is real type at every
   width and the grid can drop to one column. */
.pipeline-section{ padding:22px 0 26px;
  border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); }
.pipeline-line{ margin:0 0 16px; font-size:1em; line-height:1.5; color:var(--muted); }
.pipeline-line b{ color:var(--ink); }

/* 900px, not the full container: these are line drawings and gain nothing at
   all from being wide, and the cap is what keeps the strip down to the height
   of the four cards it replaced. */
.pipeline{ max-width:900px; margin:0 auto;
  display:grid; grid-template-columns:1fr 48px 1fr 48px 1fr; align-items:start; }
.pipeline .stage{ margin:0; }
.pipeline .stage svg{ display:block; width:100%; height:auto; color:var(--ink); }
.pipeline figcaption{ padding:10px 2px 0; }
.pipeline figcaption b{ display:block; font-family:"Open Sans",sans-serif;
  font-size:.86em; font-weight:700; letter-spacing:.02em; color:var(--ink); }
.pipeline figcaption span{ display:block; margin-top:3px;
  font-size:.86em; line-height:1.45; color:var(--muted2); }
/* The arrow sits on the mid-line of the PANELS, not of the whole cell: each
   caption is two lines deep, so centring on the cell would drop the arrows
   well below the drawings they connect. The panel is 112/300 of its own
   width, which at these column widths puts its middle near 50px. */
.pipeline .arrow{ align-self:start; margin-top:44px; padding:0 8px; }
.pipeline .arrow svg{ display:block; width:100%; height:auto; color:var(--ink); }

@media (max-width:820px){
  /* One column: the arrows turn a quarter turn and the type stays full size. */
  .pipeline{ grid-template-columns:1fr; max-width:420px; }
  .pipeline .arrow{ margin:16px auto 12px; padding:0; width:22px;
    transform:rotate(90deg); }
  .pipeline figcaption{ padding-top:10px; }
}

/* ---- the collage: the whole product, in one block -----------------------
   This is the Cycles Arc entry block from kairoico.com, ported. That block is
   already the approved way this brand introduces itself to someone who has
   never heard of it, and the home page of the brand's own site had no
   equivalent — it had a hero and then a long scroll of sections.
   Geometry is Kairoi's, unchanged, because it is what was signed off: a tall
   cell down the left spanning two rows, three cells across the top, a wide cell
   and a square in the second row, and a band across the foot. Seven objects,
   each captioned on the image, one screen.
   What changed is the contents: Kairoi's tiles are a selection made to
   advertise a brand to a business audience, so they lead with renders. These
   are the brand's own files, and the wide cell is a real eclipse table rather
   than an app screenshot, because on this site the printed page is the product
   and a table of the year's eclipses says that faster than a photograph.
   The variables are swapped to the Cycles Arc palette: --nav-border for
   Kairoi's --rule, --accent for --gold-text. Nothing else is touched. */
.collage{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr;
  grid-template-rows:230px 190px 170px; gap:10px; margin:22px 0 0; }
.collage figure{ position:relative; margin:0; overflow:hidden;
  background:var(--bg); border:1px solid var(--nav-border); border-radius:8px; }
.collage figure:first-child{ grid-row:1/3; }
.collage figure.wide{ grid-column:span 2; }
/* Kairoi calls this cell `band`. Here it must not: ca-site.css owns a bare
   `.band` (a full-bleed dark hero strip with its own ::after scrim), and a
   figure carrying that class silently inherited a black ground and a dark
   overlay, which turned a cream world map into a black rectangle. Same trap
   as `.shelf`, which ca-site.css also owns. Renamed; geometry is Kairoi's. */
.collage figure.full{ grid-column:1/-1; }
.collage figure.full img{ object-position:center 45%; }
.collage img{ width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block; transition:transform .5s ease; }
.collage a{ display:block; width:100%; height:100%; position:relative;
  text-decoration:none; }
.collage a::after{ content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 0 var(--accent); transition:box-shadow .2s; }
.collage a:hover img,.collage a:focus-visible img{ transform:scale(1.028); }
.collage a:hover::after,.collage a:focus-visible::after{ box-shadow:inset 0 0 0 2px var(--accent); }
.collage a:focus-visible{ outline:none; }
/* A render has no top edge to hold to — its subject is in the middle. */
.collage figure.dark img{ object-position:center; }
/* A page of type, not a picture: never crop the type. `contain` letterboxes it
   on the sheet's own ground colour, which is invisible at any cell ratio. */
.collage figure.fit{ background:#f5f4f0; }
.collage figure.fit img{ object-fit:contain; }
.collage figure.fit a:hover img,.collage figure.fit a:focus-visible img{ transform:none; }
.collage figcaption{ position:absolute; left:0; right:0; bottom:0; padding:.55rem .8rem;
  font-size:.8rem; line-height:1.35; color:var(--ink);
  background:linear-gradient(transparent,rgba(245,244,240,.94) 40%); }
.collage figure.dark figcaption{ color:#E5E3DF;
  background:linear-gradient(transparent,rgba(5,7,13,.85) 45%); }
@media (max-width:900px){
  /* Kairoi's own phone rearrangement, same idea: the tall cell goes full width
     at the top, everything else falls into two columns. */
  .collage{ grid-template-columns:1fr 1fr; grid-template-rows:200px 150px 150px 130px 130px; }
  .collage figure:first-child{ grid-column:1/3; grid-row:1; }
  .collage figure.wide{ grid-column:1/3; }
  .collage figure.full{ grid-column:1/3; }
}

/* ---- the shelf: every form the product takes, one line each -------------
   The list half of the Kairoi entry block. The collage shows what the objects
   look like; this says what they are, and it is the part that stops a reader
   thinking this is a poster shop. Seven lines is the whole catalogue.

   It is centred and held narrower than the collage, and it is pushed well clear
   of the last plate above it. At 22px it read as a caption hanging off the
   bottom of the world map; it is not a caption, it is the catalogue, and it
   needs air on its own account before a reader will read it as a new thought. */
.forms{ list-style:none; max-width:760px;
  margin:clamp(56px,7vw,96px) auto 0; padding:0;
  border-top:1px solid var(--hair); text-align:center; }
.forms li{ padding:15px 0; border-bottom:1px solid var(--hair); font-size:1.02em;
  line-height:1.55; color:var(--muted); }
.forms li b{ color:var(--ink); font-weight:600; }
.forms li a{ color:var(--accent); text-decoration:none; font-weight:600;
  white-space:nowrap; }
.forms li a:hover{ text-decoration:underline; }
.forms-close{ max-width:760px; margin:18px auto 0; text-align:center;
  font-size:.95em; color:var(--muted); }

/* ---- one offer: a heading, a count, and the objects themselves ---------- */
.offer{ padding:52px 0; border-top:1px solid var(--hair); }
.offer:first-of-type{ border-top:none; }
.offer-h{ display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:6px; }
.offer h2{ margin:0; font-size:1.7em; }
.offer .count{ font-family:"Open Sans",sans-serif; font-size:.74em;
  letter-spacing:.06em; color:var(--muted2); }
.offer .lede{ margin-bottom:22px; }

/* ---- four doors, side by side ------------------------------------------- */
.doorrow{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:22px; }
.doorrow a{ display:block; text-decoration:none; color:inherit; }
.doorrow img{ width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:12px;
  border:1px solid var(--nav-border); background:#05070d; }
.doorrow b{ display:block; margin-top:10px; font-size:1.05em; }
.doorrow span{ font-size:.84em; color:var(--muted); line-height:1.5; display:block; }

/* ---- a shelf of real artefacts, and the whole-plate band ----------------- */
/* MOVED to ca-moments.css. `.gallery` (with .sq/.tall/.relief/.three) and
   `.band-img.whole` started here, but the four subject pages show the same
   objects and they do NOT load this file — only index.html and
   organisations.html do. Left here, the galleries on earth.html and sky.html
   rendered as unstyled stacked blocks. They now live in ca-moments.css, which
   every page loads, and are deliberately not repeated here: this file loads
   afterwards and a second copy would be a competing definition of one object. */

/* ---- prose beside one object -------------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:center; }
.artefact{ border:1px solid var(--nav-border); border-radius:12px; overflow:hidden; background:#fff; }
.artefact img{ width:100%; display:block; }
.artefact-dark{ background:#05070d; }
/* The caption is a SIBLING of .artefact, not a child — <figure> holds the
   framed object and then the caption. `.artefact figcaption` matched nothing,
   so on the emerald band the caption fell back to inherited dark ink and went
   invisible against the dark green. */
.artefact figcaption,
.artefact + figcaption{ font-size:.8em; color:var(--muted2); margin-top:10px; line-height:1.6; }

/* The masthead swap. ca-moments.css DOES define .imprint, but only as
   `.v .imprint` — scoped inside a verb card, where the card supplies the frame
   and the absolute positioning. Used on its own inside .artefact, as the home
   page and the organisations page do, none of that scoped block applies and the
   <b> and <span> collapse into one run of text ("YOUR MASTHEADSky almanac").
   This is the standalone frame. It cannot shadow the scoped version: inside a
   .v, `.v .imprint .masthead b` is the more specific selector and still wins.

   The colours here are deliberately literal rather than var(--ink)/var(--muted2).
   This object is a picture of a printed page, and it sits on the emerald band —
   which locally redefines --ink to cream so that body text reads on dark green.
   A masthead drawn with var(--ink) therefore came out cream on its own cream
   paper and vanished. Paper carries the paper's palette, in any band and in
   either theme. */
.artefact.imprint .masthead{ display:flex; align-items:baseline;
  justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:#f5f4f0; border-bottom:2px solid #272424;
  padding:10px 14px; font-family:"Raleway",sans-serif; }
.artefact.imprint .masthead b{ font-size:.95em; letter-spacing:.06em;
  text-transform:uppercase; color:#272424; }
.artefact.imprint .masthead span{ font-family:"Open Sans",sans-serif;
  font-size:.74em; letter-spacing:.04em; color:#666; }

/* ---- the thread: one moment shown through four different objects -------- */
/* Two explicit rows — object, then caption — and each figure takes both via
   subgrid. Without this the figures are independent boxes: the app card holds
   four rows of figures and overflows the 16/10 ratio (168px against 152px), so
   its caption alone sat 15px lower than the other three and the row read as
   misaligned rather than as one moment shown four ways. */
.thread{ display:grid; grid-template-columns:repeat(4,1fr);
  grid-template-rows:auto auto; gap:14px; margin-top:20px; }
.thread figure{ margin:0; display:grid; grid-row:span 2;
  grid-template-rows:subgrid; }
.thread img,.thread .mini{ width:100%; height:100%; aspect-ratio:16/10; object-fit:contain;
  box-sizing:border-box; padding:8px; border-radius:12px;
  border:1px solid var(--nav-border); background:#fff; }
.thread figcaption{ font-size:.8em; color:var(--muted); margin-top:8px; }
.thread .mini{ background:#0d2a1e; display:flex; flex-direction:column;
  justify-content:center; padding:14px; }

/* ---- the closing note ---------------------------------------------------- */
.quiet-end{ background:var(--card); border:1px solid var(--nav-border);
  border-radius:16px; padding:28px 30px; }
.quiet-end p{ color:var(--muted); font-size:.94em; line-height:1.7; margin:0 0 10px; }
.provenance{ font-family:"Open Sans",sans-serif; font-size:.72em; letter-spacing:.06em;
  color:var(--muted2); margin-top:14px; }

/* ---- the app row: two drawn screens and the roster ---------------------- */
.apps{ display:grid; grid-template-columns:1fr 1fr 1.3fr; gap:24px; align-items:start; }

/* ---- the same row, folded into the "in any form you can hold" section ----
   Nothing here changes the drawings; they keep their own tokens, their own
   colours and the figures from a real New York day. It is a scale, not a
   redesign: the phones come down from 280px to 210, the dial and the big
   figure come down with them so the card keeps its proportions, and the
   roster loses a little leading. .verbs centres everything inside .vwrap,
   which is right for a heading and wrong for a list of eight apps, so the
   block sets itself back to left. */
.vapps{ max-width:1060px; margin:6px auto 0; text-align:left;
  border-top:1px solid var(--hair); padding-top:32px; }
.vapps-h{ display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.vapps-h b{ font-family:"Raleway",sans-serif; font-size:1.3em; font-weight:700; color:var(--ink); }
.vapps-h span{ font-family:"Open Sans",sans-serif; font-size:.74em;
  letter-spacing:.06em; color:var(--muted2); }
.vapps .apps{ grid-template-columns:1fr 1fr 1.45fr; gap:26px; }
.vapps .phone{ width:210px; padding:13px 10px 18px; border-radius:28px; }
.vapps .appcard{ padding:12px; }
.vapps .appcard .big{ font-size:1.2em; }
.vapps .appcard .disc{ width:42px; height:42px; }
.vapps .phone .home{ width:84px; margin-top:14px; }
.vapps .cap{ margin:12px 0 0; text-align:center; font-size:.78em;
  line-height:1.45; color:var(--muted2); }
.vapps .applist li{ padding:9px 0; font-size:.88em; }
.vapps-foot{ margin:24px 0 0; font-size:.92em; color:var(--muted); }
.vapps-foot .cta-quiet{ margin-left:10px; white-space:nowrap; }

/* ---- #integrate: the invitation, as the page's closing note -------------
   It borrows .quiet wholesale (ca-moments.css) because apps.html already closes
   in that language and this should read the same way. Only three additions, all
   scoped to the one id so the apps.html strip is untouched: a heading small
   enough not to compete with the section titles above it, a second paragraph
   that needs a gap after the first (.quiet p sets margin:0), and a control row
   that must escape .quiet a's underline — a button with a line under its label
   looks like a mistake. .quiet a also repaints that label green, which on a
   green pill is invisible, so the white is set back explicitly. */
#integrate .quiet-h{ font-size:clamp(1.35em,2.4vw,1.75em); font-weight:600;
  color:var(--ink); line-height:1.25; margin:0 0 14px; }
#integrate .quiet-second{ margin-top:14px; font-size:.96em; }
#integrate .quiet-cta{ margin-top:26px; }
#integrate .cta-button{ color:#fff; text-decoration:none; }
#integrate .cta-button:hover{ color:#fff; text-decoration:none; }

@media (max-width:980px){
  .doorrow,.thread{ grid-template-columns:1fr 1fr; }
  .apps{ grid-template-columns:1fr; }
  /* .vapps .apps is two classes deep, so it outranks the single-class rule
     above and kept three columns on a phone — 592px of content in a 375px
     window. It has to be restated at the same depth to collapse. */
  .vapps .apps{ grid-template-columns:1fr; }
  .vapps .phone{ margin:0 auto; }
  .split{ grid-template-columns:1fr; }
}