/* ============================================================
   ALKEMIA LABS — INSTRUMENT LANGUAGE (labs.html body)
   ------------------------------------------------------------
   The header plate establishes it; these rules carry it down the
   page. Labs is the one page that is not a landscape, so every
   ground below the fold is drawn rather than photographed: the
   same ruled graticule, the same gold hairlines, the same corner
   registration marks. Nothing in this file loads an image.

   Colour and type come from brand-tokens.css and nothing else.
   Gold stays structural — rules, borders, frames, chips, dots.
   It is never set as running text, and never as small text on
   cream: where a label has to be gold it is olive text on a gold
   fill, the way .btn-gold and .pill--live already do it.

   Sits alongside header-archetypes.css; folds into site.css on
   adoption, next to the .ground-* recipes it stands in for.
   ============================================================ */

/* ============================================================
   1 · THE PLATE — the drawn ground, in cream and in dark
   ============================================================ */
.plate{position:relative;background-color:var(--cream)}

/* the graticule rides on a pseudo-element so it can be masked back to
   solid ground at the seams — the same trick .ground-light plays with
   its scrim, so plates meet their neighbours without a hard edge */
.plate::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-position:center;
  background-image:
    repeating-linear-gradient(0deg,rgba(201,165,59,.20) 0 1px,transparent 1px 290px),
    repeating-linear-gradient(90deg,rgba(201,165,59,.20) 0 1px,transparent 1px 290px),
    repeating-linear-gradient(0deg,rgba(201,165,59,.10) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(90deg,rgba(201,165,59,.10) 0 1px,transparent 1px 58px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 86%,transparent 100%)}
.plate > *{position:relative;z-index:1}

/* the dark cut of the plate — the header's ground, reused once further
   down so the page closes the loop it opened with */
.plate--deep{background-color:#241e0d;color:var(--cream);
  background-image:radial-gradient(104% 170% at 50% 44%,rgba(98,82,39,.86) 0%,
    rgba(56,46,20,.94) 56%,rgba(28,23,10,.99) 100%);
  border-top:1px solid rgba(201,165,59,.4);
  border-bottom:1px solid rgba(201,165,59,.4)}
.plate--deep::before{
  background-image:
    repeating-linear-gradient(0deg,rgba(201,165,59,.19) 0 1px,transparent 1px 290px),
    repeating-linear-gradient(90deg,rgba(201,165,59,.19) 0 1px,transparent 1px 290px),
    repeating-linear-gradient(0deg,rgba(201,165,59,.10) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(90deg,rgba(201,165,59,.10) 0 1px,transparent 1px 58px);
  -webkit-mask-image:none;mask-image:none}

/* type on the dark plate, mirroring the .ground-deep contract */
.plate--deep h2,.plate--deep h3{color:var(--cream)}
.plate--deep p,.plate--deep .lede{color:var(--cream-90)}
.plate--deep .eyebrow,.plate--deep .kicker{color:var(--gold)}
.plate--deep .accent{color:var(--gold)}
.plate--deep a:not([class]){color:var(--gold)}

/* the plate frame and its corner registration marks, lifted off the header
   so a body plate can be built as an instrument face too */
.plate--framed::after{content:"";position:absolute;inset:20px;z-index:0;
  pointer-events:none;border:1px solid rgba(201,165,59,.16)}
.plate-reg{position:absolute;z-index:1;width:16px;height:16px;
  border-color:rgba(201,165,59,.7);border-style:solid;border-width:0}
.plate-reg--tl{top:20px;left:20px;border-top-width:1px;border-left-width:1px}
.plate-reg--tr{top:20px;right:20px;border-top-width:1px;border-right-width:1px}
.plate-reg--bl{bottom:20px;left:20px;border-bottom-width:1px;border-left-width:1px}
.plate-reg--br{bottom:20px;right:20px;border-bottom-width:1px;border-right-width:1px}

/* a gold hairline under a section head, so heads on a plate are ruled
   off the way the header's spec row is */
.plate-head{max-width:62ch}
.plate-head--center{margin-left:auto;margin-right:auto}
.head-rule{display:block;width:64px;height:1px;background:var(--gold);opacity:.75;
  margin:1.6rem auto 0}
.plate-head:not(.plate-head--center) .head-rule{margin-left:0}

/* ============================================================
   2 · THE SCALE BAND — replaces the leaf photograph divider
   ------------------------------------------------------------
   The strip between two sections used to be a full-bleed frame of
   the brand photography. On this page it is a measure: a ruled
   scale with major and minor ticks, broken at the centre by the
   device. Tick length is done with two background-size heights on
   one element, so it stays crisp at any width.
   ============================================================ */
.scale-band{position:relative;height:158px;overflow:hidden;
  /* its own ground: the plate radial is shaped for a tall section and
     compresses badly in a 158px strip */
  background-image:radial-gradient(74% 240% at 50% 50%,rgba(100,84,40,.82) 0%,
    rgba(52,43,19,.95) 58%,rgba(26,21,9,.99) 100%)}
/* the measure is the only structure in this strip — the graticule would
   just add noise behind it */
.scale-band.plate::before{content:none}
.scale-band .scale-rule{position:absolute;left:0;right:0;top:50%;height:1px;
  background:rgba(201,165,59,.62);z-index:1}
.scale-band .scale-ticks{position:absolute;left:0;right:0;z-index:1;
  background-repeat:repeat-x;background-position:center top,center top;
  background-image:
    repeating-linear-gradient(90deg,rgba(201,165,59,.66) 0 1px,transparent 1px 180px),
    repeating-linear-gradient(90deg,rgba(201,165,59,.42) 0 1px,transparent 1px 36px);
  background-size:100% 26px,100% 11px}
.scale-band .scale-ticks--down{top:50%;height:26px}
.scale-band .scale-ticks--up{bottom:50%;height:26px;transform:scaleY(-1)}
/* the device sits on the scale and breaks it, the way a pointer would */
.scale-band .scale-mark{position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,#221c0b 0%,#221c0b 50%,
    rgba(34,28,11,.74) 74%,rgba(34,28,11,0) 100%)}
.scale-band .scale-mark svg{width:56px;height:56px;display:block}

/* ============================================================
   3 · THE TOOLKIT — three tools as instrument cards
   ------------------------------------------------------------
   Numbered, ruled off in gold at the top, and carrying a status
   dot instead of a bare kicker: filled gold for what is live,
   hollow for what is still being finished. The number is olive
   on a gold chip, never gold text on cream.
   ============================================================ */
.tool--instr{position:relative;background:var(--cream-card);border-radius:0 0 4px 4px;
  border:1px solid rgba(86,72,35,.10);border-top:2px solid var(--gold);
  padding:1.5rem 1.6rem 1.6rem}
.tool--instr .tool-head{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
/* a drafting balloon, not a badge: the gold is the ring, the number is
   olive on cream — olive on a gold fill is only safe at button size */
.tool-no{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  width:1.75rem;height:1.75rem;border-radius:50%;
  border:1px solid var(--gold);background:var(--cream);color:var(--olive);
  font-family:var(--ui);font-weight:600;font-size:.7rem;letter-spacing:.03em}
.status{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--ui);
  font-weight:600;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--olive-90)}   /* .stat-label's weight — .64rem needs it to clear AA */
.status::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;
  border:1px solid var(--gold);background:transparent}
.status--live::before{background:var(--gold)}
.tool--instr h3{font-family:var(--display);font-size:1.2rem;color:var(--olive);
  margin-bottom:.45rem}
.tool--instr p{color:var(--ink);font-size:.93rem;line-height:1.55}

/* ============================================================
   4 · THE WINDOW — the "why Labs" statement, framed
   ------------------------------------------------------------
   The one section that is neither ruled ground nor cards: a plain
   cream field with a single drawn frame on it, registration marks
   at its corners. It is the header's plate, quoted small.
   ============================================================ */
.window-frame{position:relative;max-width:54rem;margin:0 auto;
  padding:3.6rem 3.2rem;border:1px solid rgba(201,165,59,.42)}
.window-frame .eyebrow{margin-bottom:1.1rem}
.window-frame h2{margin-bottom:1.5rem}
.window-frame .reg{position:absolute;width:15px;height:15px;
  border-color:var(--gold);border-style:solid;border-width:0}
.window-frame .reg--tl{top:-1px;left:-1px;border-top-width:2px;border-left-width:2px}
.window-frame .reg--tr{top:-1px;right:-1px;border-top-width:2px;border-right-width:2px}
.window-frame .reg--bl{bottom:-1px;left:-1px;border-bottom-width:2px;border-left-width:2px}
.window-frame .reg--br{bottom:-1px;right:-1px;border-bottom-width:2px;border-right-width:2px}
.window-frame .lede{max-width:56ch;margin-left:auto;margin-right:auto}

/* ============================================================
   5 · WHERE LABS SITS — ruled columns on the dark plate
   ============================================================ */
.labs-sits.plate--deep{padding:4.4rem 0 4.2rem}
.labs-sits.plate--deep .labs-sits-grid{margin-top:1.8rem;
  border-top:1px solid rgba(201,165,59,.34);padding-top:2rem;gap:0}
.labs-sits.plate--deep .labs-sits-grid > div{padding:0 2rem;
  border-left:1px solid rgba(201,165,59,.22)}
.labs-sits.plate--deep .labs-sits-grid > div:first-child{padding-left:0;border-left:0}
.labs-sits.plate--deep .labs-sits-grid > div:last-child{padding-right:0}

/* ============================================================
   6 · THE CLOSE — quiet cream, ruled off, device in outline
   ============================================================ */
.labs-close{position:relative;background:var(--cream);padding:4.6rem 0 5.4rem;
  border-top:1px solid rgba(201,165,59,.35);text-align:center}
.labs-close .close-mark{display:block;width:44px;height:44px;margin:0 auto 1.5rem;
  opacity:.72}
.labs-close .close-mark svg{display:block;width:100%;height:100%}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .window-frame{padding:2.4rem 1.8rem}
  .labs-sits.plate--deep .labs-sits-grid{gap:1.6rem}
  .labs-sits.plate--deep .labs-sits-grid > div{padding:0 0 0 1.2rem;
    border-left:1px solid rgba(201,165,59,.22)}
  .labs-sits.plate--deep .labs-sits-grid > div:first-child{padding-left:1.2rem;
    border-left:1px solid rgba(201,165,59,.22)}
}
@media (max-width:640px){
  .scale-band{height:118px}
  .scale-band .scale-mark{width:60px;height:60px}
  .scale-band .scale-mark svg{width:42px;height:42px}
  .window-frame{padding:2rem 1.3rem}
}

/* ============================================================
   OVERRIDES — retiring the photographic grounds on this page
   ------------------------------------------------------------
   .labs in site.css carries its own photograph. On the Labs page
   the products band is a plate, so the picture is switched off
   here rather than edited out of the shared rule.
   ============================================================ */
.labs.plate{background-image:none}
.plate--deep h2 .accent,.plate--deep h3 .accent{color:var(--gold)}

/* ============================================================
   TEXTURE — photographs back under the plates (Kat, Sept 17)
   ------------------------------------------------------------
   With "Where Labs sits" gone the lower page ran three flat cream
   fields in a row. The cream plates keep their graticule but carry a
   photograph under it; "Why Labs" takes the dark photographic ground
   the removed band used to supply; the close warms up with dusk.
   These beat .labs and .labs-close, which set their own backgrounds.
   ============================================================ */
.plate.ground-light,.labs-close.ground-light{background-color:var(--cream);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  background-image:
    linear-gradient(180deg,var(--cream) 0%,rgba(248,241,234,.88) 14%,
      rgba(248,241,234,.62) 50%,rgba(248,241,234,.88) 86%,var(--cream) 100%),
    var(--pic)}
.labs-close.ground-light{border-top:0}

#why-labs.ground-deep{border-top:1px solid rgba(201,165,59,.4);
  border-bottom:1px solid rgba(201,165,59,.4);padding:5.6rem 0}
.ground-deep .window-frame{background:rgba(28,23,10,.30);
  border-color:rgba(201,165,59,.55)}
.ground-deep .window-frame .lede{color:var(--cream-90)}
@media (max-width:640px){#why-labs.ground-deep{padding:3.6rem 0}}
.ground-deep h2 .accent{color:var(--gold)}