/* ============================================================================
   CAP TABLE — the capabilities table (Figma 407-6355 on Info, 2026-09-04; reused
   on Home, Figma 469-1891, 2026-09-07 — Markiian: "bring the one from info and
   reuse it here, but change the colour scheme to white"). One stylesheet, two
   schemes: the variables below default to the DARK table (Info); a light page
   sets them on its section (Home: `.caps-light`). The films in the coloured
   boxes are pencil-live.js on both pages.
   ========================================================================== */
.cap-table,.info-caps{
  --cap-line:#2C2C2C;                         /* the hairlines, both schemes */
  --cap-ink:#fff;                             /* the header labels */
  --cap-lab-ink:#fff;                         /* the focus tag's word on its colour */
  --cap-tag-bg:rgba(255,255,255,.1);          /* a tag's ground */
  --cap-tag-ink:rgba(255,255,255,.7);         /* a tag's word */
  --cap-hover-bg:#fff;--cap-hover-ink:#151515;/* a tag, hovered */
}
.caps-light,.caps-light .cap-table{
  --cap-ink:#000;--cap-lab-ink:#000;
  --cap-tag-bg:rgba(0,0,0,.1);--cap-tag-ink:rgba(0,0,0,.7);
  --cap-hover-bg:#000;--cap-hover-ink:#FCFBF8;
}

/* ---- 3 · the capabilities table (Figma 407-6355, 2026-09-04 — the General Sans build) ----
   Redesigned: the table stands inside the page margins (not 8 off the edge), four
   EQUAL columns — Focus · Design · Code · AI — a 65-tall header row, rows 240 tall,
   every cell padded 20, hairlines #2C2C2C, the table's outer corners rounded 4.
   The Focus cell carries a solid coloured tag (brand · Web · product) and, under it,
   the frame's COLOURED BOX — green, purple, blue — filling the rest of the cell; the
   drawing paints inside that box (cap-paint.js). The three tag columns each open
   with the row's own label in the row's colour (colour 20% ground, colour ink),
   then the tags as before. The title is General Sans here, as the frame sets it. */
.info-caps{padding-top:var(--section-gap);}
.caps-title{padding:0 var(--margin) 40px;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:40px;line-height:1.2;letter-spacing:.01em;}
.cap-table{margin:0 var(--margin);display:flex;flex-direction:column;border-radius:4px;overflow:hidden;}
.cap-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;min-height:240px;}   /* stretch: the page's generic row rule centres its cells */
.cap-cell{align-self:stretch;border-top:1px solid var(--cap-line);border-left:1px solid var(--cap-line);min-width:0;padding:20px;}
.cap-cell:last-child{border-right:1px solid var(--cap-line);}
.cap-row:last-child .cap-cell{border-bottom:1px solid var(--cap-line);}
/* the outer corners: the table clips them, the hairline follows */
.cap-table .cap-row:first-child .cap-cell:first-child{border-top-left-radius:4px;}
.cap-table .cap-row:first-child .cap-cell:last-child{border-top-right-radius:4px;}
.cap-table .cap-row:last-child .cap-cell:first-child{border-bottom-left-radius:4px;}
.cap-table .cap-row:last-child .cap-cell:last-child{border-bottom-right-radius:4px;}
.cap-head{min-height:65px;}
.cap-head .hlab{display:block;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:20px;line-height:1.25;letter-spacing:.01em;color:var(--cap-ink);}
/* the Focus cell: the solid tag, then the box */
.cap-focus{display:flex;flex-direction:column;align-items:flex-start;}
.cap-focus .cap-lab{display:flex;align-items:center;padding:2px 8px;font-size:20px;line-height:1.25;letter-spacing:.01em;color:var(--cap-lab-ink);background:var(--ground);}
.cap-art{position:relative;flex:1 1 auto;width:100%;min-height:0;overflow:hidden;background:var(--box,var(--ground));}
/* the table: the coloured boxes carry the pencil films (pencil-live.js); the gouache table it was compared with is gone (Markiian, 2026-09-04: "remove the first block") */
/* the canvas is 600 × 342 — the box's own shape at 1440; at any other width it is CONTAINED,
   never stretched (a canvas is a replaced element, `object-fit` applies), and the letterbox is
   the host's ground, the same colour */
.cap-art canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.cap-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;}   /* the placeholder, for no-JS */
.cap-art.live img{visibility:hidden;}
.cap-row.brand{--ground:var(--green);}
.cap-row.web{--ground:var(--purple);}
.cap-row.product{--ground:var(--blue);}
/* the tags (Figma 407-6375): Tanker 20 on a 125% line, 2/8 padding — 29 tall — 4 apart,
   TOP-aligned; white 10% ground, white 70% ink; the column's first tag is the row's own
   label in the row's colour. They are links: hover turns a tag white with the page-coloured
   letters (the frame shows Creative Direction in that state) */
/* the footer's selection logic (Markiian, 2026-09-07: "even if I hover a little to the right of
   the shorter items, it still gets selected"): the column is ONE grid track sized to its widest
   tag, every link spans the track, and the highlight is the inner span hugging the word */
.cap-tags{display:grid;grid-template-columns:max-content;justify-content:start;align-content:start;gap:4px;}
.cap-tags a{display:flex;align-items:center;justify-content:flex-start;text-decoration:none;white-space:nowrap;}
.cap-tags a span{
  display:flex;align-items:center;padding:2px 8px;background:var(--cap-tag-bg);
  font-family:'Tanker','Anton',sans-serif;font-weight:400;   /* the frame sets the tags in Tanker even here, where the base is General Sans */
  font-size:20px;line-height:1.25;letter-spacing:.01em;color:var(--cap-tag-ink);
  transition:color .15s ease,background-color .15s ease;
}
/* the column's lead is a HEADER, not a link (Markiian, 2026-09-05: "it should not change
   state — it's like headers"): the row's colour on its 20% ground, the tag's box, no hover */
.cap-tags .lead{
  display:flex;align-items:center;padding:2px 8px;justify-self:start;   /* the header hugs its word; it is not a row */
  font-family:'Tanker','Anton',sans-serif;font-weight:400;font-size:20px;line-height:1.25;letter-spacing:.01em;white-space:nowrap;
  background:color-mix(in srgb,var(--ground) 20%,transparent);color:var(--ground);
}
.cap-tags a:hover span,.cap-tags a:focus-visible span{background:var(--cap-hover-bg);color:var(--cap-hover-ink);}
.cap-tags a:focus-visible{outline:none;}


/* ---- the hint card (Figma 518-3182, 2026-09-12; cap-hint.js) ----
   240 wide, #151515 on a 2px #2C2C2C line, padded 8 / 12 / 12; General Sans 15 / 135%
   at −.01em; the 40 scribble floats at the top-right and the text flows round it;
   8 under the text, the site's one button (grey, XS, full width): View work examples. The card's bottom-left corner sits on
   the tag's middle, 8 to its right; it arrives from the word — a short slide up and
   right with the fade, on the expo curve — and leaves by fading alone. Dark on both
   schemes (an ink note on the light page too). */
.cap-hint{
  position:absolute;left:0;top:0;z-index:40;box-sizing:border-box;width:240px;
  padding:8px 12px 12px;background:#151515;color:#fff;   /* no outline (Markiian, 2026-10-07: "we do not need that frame"); text and button 216 wide */
  pointer-events:none;opacity:0;visibility:hidden;
  transform:translate(-6px,6px);transform-origin:0 100%;
  transition:opacity .14s ease-out,transform .14s ease-out,visibility 0s linear .14s;
}
.cap-hint.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:opacity .22s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),transform .36s var(--ease-out-expo,cubic-bezier(.16,1,.3,1)),visibility 0s;}
.cap-hint.is-mirrored{transform-origin:100% 100%;}
.cap-hint.is-mirrored:not(.is-on){transform:translate(6px,6px);}
.cap-hint__icon{float:right;width:40px;height:40px;margin:0 0 4px 10px;display:block;}
.cap-hint__cta{display:flex;width:100%;margin-top:8px;}   /* Figma 518-3213: the one button, grey tone, XS size, full width */
.cap-hint__cta .btn-l{display:none;}   /* no ghost labels on this one (Markiian, 2026-09-12: "we don't need those appearing things on top and bottom, for this one specifically"); the label still swells */
.cap-hint__text{margin:0;font-family:'General Sans','Geist',sans-serif;font-weight:500;font-size:15px;line-height:1.35;letter-spacing:-.01em;color:#fff;}
@media (prefers-reduced-motion:reduce){.cap-hint,.cap-hint.is-on{transform:none;transition:opacity .12s linear,visibility 0s;}}

/* ---- responsive ---- */
@media (max-width:1020px){
  .cap-head{display:none;}
  .cap-row{grid-template-columns:1fr 1fr;min-height:0;}
  .cap-focus{grid-column:1 / -1;min-height:240px;}
  .cap-tags:last-child{grid-column:1 / -1;}   /* the AI column alone on its line spans it, so the table keeps its right edge */
}
/* phone (Markiian, 2026-10-15: "it looks pretty bad"): two-up at 390 left 139 px a column, so
   the longer tags ran over the hairlines, and only a row's last cell closed the right edge.
   Here every row is ONE column — the label and its box, then Design, Code, AI each full
   width — every cell closed on both sides, the corners only on the table's own four, and
   the tags flow side by side under their lead instead of one per line */
@media (max-width:640px){
  .caps-title{font-size:32px;}
  .cap-row{grid-template-columns:minmax(0,1fr);}
  .cap-focus{min-height:0;gap:0;}
  .cap-focus .cap-lab{font-size:20px;}
  .cap-art{flex:none;aspect-ratio:600 / 342;}   /* the film's own shape, so it fills the box */
  .cap-cell{border-right:1px solid var(--cap-line);border-radius:0 !important;}
  .cap-table .cap-row:first-child .cap-cell:first-child{border-radius:4px 4px 0 0 !important;}
  .cap-table .cap-row:last-child .cap-cell:last-child{border-radius:0 0 4px 4px !important;}
  .cap-row:last-child .cap-cell{border-bottom:0;}
  .cap-row:last-child .cap-cell:last-child{border-bottom:1px solid var(--cap-line);}
  .cap-tags{display:flex;flex-wrap:wrap;gap:4px;}
  .cap-tags::before{content:"";order:1;flex-basis:100%;height:0;margin-top:-4px;}   /* the break: the lead on its own line, the tags flowing under it */
  .cap-tags .lead{order:0;}
  .cap-tags a{order:2;}
  .cap-tags a span,.cap-tags .lead{font-size:18px;}
}