/* ============================================================================
   workers.vc apex pages — one shared paper-light sheet.

   Grown from the GovKit pattern language (govkit/docs/design/pattern-language.md
   + govkit/static/govkit.css): warm paper, ink not paint, hairline structure,
   small quiet buttons, no animation anywhere (do not add transitions).

   Apex differences from GovKit: the accent is the workers.vc teal (#0f766e,
   AA on the paper bg), and the face is Plus Jakarta Sans for body AND
   headings (loaded by base_apex.html via Google Fonts; system-ui fallback).

   Light only — paper in every OS theme. No dark-mode block. No dependencies.
   ============================================================================ */

:root {
  /* warm paper */
  --bg: #faf9f6;
  --surface: #fffefb;
  --ink: #26221c;
  --ink-2: #5d574d;
  --muted: #8a8378;
  --border: #e6e1d8;
  --border-strong: #cbc4b6;

  /* the one accent — workers.vc teal */
  --accent: #0f766e;
  --accent-deep: #115e59;
  --on-accent: #ffffff;

  /* status is a word in a quiet tint */
  --ok: #4a7020;      --ok-soft: #e4e9d9;
  --warn: #8a6508;    --warn-soft: #eee7d5;
  --bad: #b03a44;     --bad-soft: #f3e1e0;
  --neutral-soft: #edeae3;

  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  --radius: 6px;        /* controls */
  --radius-card: 10px;  /* cards */

  color-scheme: light;
}

/* ---- base ------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  line-height: 1.25;
  margin: 0 0 0.5rem;
}
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; font-weight: 700; margin-top: 1.75rem; }
h3 { font-size: 1rem; font-weight: 700; margin-top: 1rem; }

p { margin: 0.4rem 0 0.8rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-deep); text-decoration: underline; }

small { color: var(--ink-2); }
.muted { color: var(--muted); }

/* ---- chrome: the thin top band and footer ------------------------------ */

.topband {
  padding: 0.8rem 1.25rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.topband .mark {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
.topband .mark img {
  width: 26px;
  height: 26px;
  border-radius: 5px;
  display: block;
}
.topband .mark .tld { color: var(--accent); }

footer {
  text-align: center;
  font-size: 0.78rem;
  color: var(--muted);
  padding: 1.5rem 0 2rem;
}

/* ---- the readable column ----------------------------------------------- */

.page {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}
.page-narrow { max-width: 38rem; }
.page-wide { max-width: 68rem; }

/* ---- crumbs and back links --------------------------------------------- */

.crumb { font-size: 0.85rem; margin-bottom: 0.75rem; }
.crumb a, .back {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
}
.crumb a:hover, .back:hover { text-decoration: underline; }

/* ---- cards: paper on paper, hairline, no shadow ------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* ---- small quiet buttons; one filled action per page --------------------- */

.btn {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { border-color: var(--ink-2); text-decoration: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }

/* ---- badges: a word in a quiet tint -------------------------------------- */

.badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  color: var(--ink-2);
  background: var(--bg);
  white-space: nowrap;
}
.badge a { color: inherit; text-decoration: underline; }
.badge-open { border-color: var(--ok-soft); background: var(--ok-soft); color: var(--ok); }
.badge-gate { border-color: var(--warn-soft); background: var(--warn-soft); color: var(--warn); }

/* ---- notes and error blocks ---------------------------------------------- */

.banner, .errors {
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  background: var(--surface);
  border: 1px solid var(--border);
}
.banner { border-left: 2px solid var(--accent); font-weight: 600; }
.errors { border-color: var(--bad-soft); border-left: 2px solid var(--bad); color: var(--bad); }

/* ---- forms: light fields, dark ink, visible borders ----------------------- */

label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 0.35rem;
}
.hint { font-weight: 400; color: var(--muted); font-size: 0.8rem; }

input[type=text], input[type=email], input[type=url], select, textarea {
  width: 100%;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
textarea { min-height: 110px; resize: vertical; }

input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* form-field groups (fieldset used as a plain field wrapper) */
.formwrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.5rem 1.75rem;
  max-width: 42rem;
}
.formwrap fieldset { border: 0; margin: 0 0 1.3rem; padding: 0; }

/* ---- details unfold quietly ----------------------------------------------- */

details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--accent);
}
details summary:hover { color: var(--accent-deep); }

/* ---- a venture's own page: the link a team shares ------------------------ */

/* The header: cover, the logo tucked into its bottom edge, then the name clear
   of the picture. A cover is usually a wordmark or a busy hero shot, so a name
   printed across one is unreadable however the gradient is tuned; tucking only
   the logo keeps the layered look and never collides with type. */
.venture { max-width: 44rem; }
.venture .coverband {
  height: 128px;
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background-size: cover;
  background-position: center;
}
.venture .idrow { margin-bottom: 0.2rem; }
.venture .vlogo {
  display: block;
  width: 84px; height: 84px; object-fit: contain;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 9px;
}
/* Only when there is a cover to tuck into. */
.venture .idrow.tucked .vlogo { margin: -42px 0 0.55rem 14px; position: relative; }
.venture h1 { font-size: 2.1rem; margin: 0.5rem 0 0; }
.venture .idrow.tucked h1 { margin-top: 0; }
.venture .vmeta { color: var(--ink-2); font-size: 0.88rem; margin: 0.9rem 0 1.4rem; }
.venture .vmeta .dot { color: var(--border-strong); margin: 0 0.35rem; }
.venture .vmeta a { color: inherit; text-decoration: underline; }
.venture .pitch { font-size: 1.08rem; margin: 0 0 1.6rem; white-space: pre-wrap; }

/* Their own site, as the card a pasted link would make. Their brand is one
   click away, which is why this page never needs to imitate it. */
.venture .linkcard {
  display: flex; align-items: stretch; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-card); overflow: hidden; margin: 0 0 1.6rem;
}
.venture .linkcard:hover { border-color: var(--border-strong); text-decoration: none; }
.venture .linkcard .shot { width: 200px; flex: none; object-fit: cover; background: var(--neutral-soft); }
.venture .linkcard .lbody { padding: 1rem 1.2rem; min-width: 0; align-self: center; }
/* No picture on their site: their logo, sitting in the space instead of
   filling it. */
.venture .linkcard.logoshot .shot {
  display: flex; align-items: center; justify-content: center;
  background: var(--neutral-soft); padding: 1rem;
}
.venture .linkcard.logoshot .shot img { max-width: 100%; max-height: 84px; object-fit: contain; }
.venture .lhost { font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.venture .linkcard .ltitle { font-weight: 700; margin: 0.1rem 0 0.15rem; }
.venture .linkcard .ldesc { font-size: 0.9rem; color: var(--ink-2); margin: 0; }

.venture .joincard { border-color: var(--accent); border-top: 3px solid var(--accent); }
.venture .joincard h2 { font-size: 1.15rem; margin: 1.4rem 0 0.6rem; }

/* The doors. Two when the team shares a calendar, one when it does not; they
   wrap to a stack on a phone rather than shrinking to fit. */
.venture .doors { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.venture .doors .btn { flex: 0 1 auto; text-align: center; }

.venture .secthead {
  font-size: 0.78rem; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 2.2rem 0 0.8rem;
}

.venture .roles { margin: 0 0 1.1rem; padding: 0; list-style: none; }
.venture .roles li { border-top: 1px solid var(--border); }
.venture .roles li:first-child { border-top: none; }
.venture .roles a {
  display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: 0.65rem 0; color: inherit; text-decoration: none;
}
.venture .roles a:hover { color: var(--accent); text-decoration: none; }
.venture .roles a:hover .go { opacity: 1; }
.venture .roles .role { font-weight: 600; flex: 0 1 auto; }
/* The detail wraps. A team that writes a sentence here rather than three words
   gets a taller row; it used to get a line running off the side of the page,
   which widened everything. */
.venture .roles .go {
  color: var(--accent); font-size: 0.85rem; font-weight: 600; opacity: 0.45;
  flex: 1 1 auto; min-width: 0; max-width: 62%; text-align: right;
}

.btn-big { padding: 0.7rem 1.5rem; font-size: 1rem; }

/* The answer to "what am I actually being asked" sits under the button, where
   the question gets asked. */
.venture .equity {
  margin: 1.1rem 0 0; padding: 0.9rem 0 0;
  border-top: 1px solid var(--border);
  font-size: 0.94rem; color: var(--ink-2);
}
.venture .equity b { color: var(--ink); }
.venture .equity a { text-decoration: underline; }

.venture .links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.venture .links a {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--border); border-radius: var(--radius-card);
  background: var(--surface); overflow: hidden;
}
.venture .links a:hover { border-color: var(--border-strong); text-decoration: none; }
.venture .links img { width: 100%; height: 124px; object-fit: cover; border-bottom: 1px solid var(--border); display: block; }
.venture .links .lb { padding: 0.7rem 0.9rem; }
.venture .links .ltitle { font-weight: 600; }

.venture .gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px; margin: 1.6rem 0 0;
}
.venture .gallery img {
  width: 100%; height: 118px; object-fit: cover; display: block;
  border-radius: 8px; border: 1px solid var(--border);
}

.venture .feed { margin: 0; padding: 0; list-style: none; }
.venture .feed li { display: flex; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.venture .feed li:first-child { border-top: none; }
.venture .feed .when {
  color: var(--muted); font-size: 0.82rem; white-space: nowrap;
  width: 4.6rem; flex: none; padding-top: 0.15rem;
}
.venture .feed .thumb {
  width: 68px; height: 48px; object-fit: cover; flex: none;
  border-radius: 6px; border: 1px solid var(--border);
}
.venture .feed .what { margin: 0; }
.venture .feed .what a { text-decoration: underline; }

/* A quote is set as a quote, not filed in a box (golda 2026-07-29). Bigger than
   the body, marks around it, nothing drawn round it. The marks are added here
   rather than stored, so what a team typed stays exactly what they typed. */
.venture .quotes { display: block; }
.venture .quote { margin: 0 0 1.2rem; }
.venture .quote:last-child { margin-bottom: 0; }
.venture .quote p {
  margin: 0;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--ink);
  text-wrap: balance;
}
.venture .quote p::before { content: "\201C"; }
.venture .quote p::after { content: "\201D"; }
.venture .quote .by { font-size: 0.85rem; color: var(--muted); margin-top: 0.5rem; }
.venture .quote .by a { color: inherit; text-decoration: underline; }

.venture .altdoor { margin-top: 2rem; color: var(--ink-2); font-size: 0.92rem; }
.venture .altdoor a { color: inherit; text-decoration: underline; }

@media (max-width: 620px) {
  .venture h1 { font-size: 1.6rem; }
  .venture .vlogo { width: 66px; height: 66px; }
  .venture .idrow.tucked .vlogo { margin: -34px 0 0.5rem 10px; }
  .venture .coverband { height: 104px; }
  .venture .linkcard { display: block; }
  .venture .linkcard .shot { width: 100%; height: 130px; }
  .venture .linkcard.logoshot .shot { height: 110px; }
  .venture .roles a { display: block; }
  .venture .roles .go { display: block; opacity: 1; white-space: normal; }
  .venture .gallery img { height: 96px; }
  .venture .doors { display: block; }
  .venture .doors .btn { display: block; margin-bottom: 0.6rem; }
}

/* ---- sheen: the star fade behind a page that is made to be shared -------- */

/* A wash of the accent under the top of a page, a field of stars in it, and
   both fading out before the content below. These pages get pasted into a
   feed, where flat paper catches nobody's eye.

   The stars are two SVG tiles at different sizes and depths, over a fine dust
   grid, all faded out by one mask so the page returns to plain paper before
   the first card. Decorative only: nothing depends on it, nothing moves (the
   sheet's no-animation rule holds), and it sits behind everything. */

.sheen {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 36rem;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(72rem 30rem at 50% -6rem,
                    rgba(15, 118, 110, 0.30), rgba(15, 118, 110, 0.06) 58%,
                    rgba(15, 118, 110, 0) 76%),
    linear-gradient(to bottom, rgba(255, 255, 253, 0.75), rgba(255, 254, 251, 0) 62%);
}

.sheen::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22280%22%20height%3D%22280%22%20viewBox%3D%220%200%20280%20280%22%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.55%22%20transform%3D%22translate%2834%2C46%29%20scale%280.6%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.38%22%20transform%3D%22translate%28118%2C22%29%20scale%280.38%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.62%22%20transform%3D%22translate%28196%2C74%29%20scale%280.85%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.34%22%20transform%3D%22translate%2866%2C148%29%20scale%280.44%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.46%22%20transform%3D%22translate%28158%2C186%29%20scale%280.62%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.28%22%20transform%3D%22translate%28238%2C214%29%20scale%280.34%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.3%22%20transform%3D%22translate%2812%2C212%29%20scale%280.48%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%230f766e%22%20opacity%3D%220.32%22%20transform%3D%22translate%28252%2C132%29%20scale%280.42%29%20translate%28-12%2C-12%29%22%2F%3E%3C%2Fsvg%3E"),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22190%22%20height%3D%22190%22%20viewBox%3D%220%200%20190%20190%22%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%23115e59%22%20opacity%3D%220.34%22%20transform%3D%22translate%2824%2C118%29%20scale%280.34%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%23115e59%22%20opacity%3D%220.26%22%20transform%3D%22translate%2896%2C40%29%20scale%280.28%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%23115e59%22%20opacity%3D%220.38%22%20transform%3D%22translate%28150%2C150%29%20scale%280.4%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%23115e59%22%20opacity%3D%220.22%22%20transform%3D%22translate%28172%2C18%29%20scale%280.24%29%20translate%28-12%2C-12%29%22%2F%3E%3Cpath%20d%3D%22M12%200c.9%208.2%202.9%2010.2%2011.1%2011.1C14.9%2012%2012.9%2014%2012%2022.2%2011.1%2014%209.1%2012%20.9%2011.1%209.1%2010.2%2011.1%208.2%2012%200z%22%20fill%3D%22%23115e59%22%20opacity%3D%220.24%22%20transform%3D%22translate%2858%2C176%29%20scale%280.26%29%20translate%28-12%2C-12%29%22%2F%3E%3C%2Fsvg%3E"),
    radial-gradient(circle, rgba(15, 118, 110, 0.30) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(38, 34, 28, 0.14) 0.9px, transparent 1.4px);
  background-size: 280px 280px, 190px 190px, 44px 44px, 67px 67px;
  background-position: 0 0, 90px 30px, 0 0, 21px 33px;
  -webkit-mask-image: radial-gradient(62rem 26rem at 50% -2rem, #000 12%, transparent 80%);
  mask-image: radial-gradient(62rem 26rem at 50% -2rem, #000 12%, transparent 80%);
}

@media (max-width: 620px) {
  .sheen { height: 27rem; }
}