/* ============================================================
   MIDIOS VENTURES — v2 "THE WORKBENCH"   (2026-09-23)
   ------------------------------------------------------------
   Loaded after tokens.css and ventures.css on every Ventures page.
   §0 palette + type apply division-wide; the rest are components.

   Register: entrepreneurial, exploratory, founder-oriented —
   disciplined experimentation, not a pitch inbox.
   Voice: Cormorant Garamond (the division's own logotype face)
   set large, with italic margin notes, over Archivo.
   Surfaces: warm graph paper and index cards on a workbench.
   Signal: PROOF GREEN — a gate passed. A highlighter is used
   behind words, never as a text colour.
   ============================================================ */

/* ---------- §0 PALETTE + TYPE ---------- */
[data-division="ventures"] {
  --ground:        #F7F4EC;
  --ground-raised: #EFEADF;
  --card:          #FFFDF8;
  --line:          #D9D1C1;
  --type:          #16140F;   /* 16.7:1 */
  --type-2:        #4A453C;   /*  8.7:1 */
  --type-3:        #645D50;   /*  5.9:1 */
  --accent:        #1C6644;   /* proof green 6.3:1 */
  --accent-dim:    #9CC2AC;
  --on-accent:     #FFFFFF;
  --hl:            #F6E27A;   /* highlighter — behind text only */
  --grid:          rgba(22, 20, 15, .055);
  --serif: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
}
[data-division="ventures"] h1,
[data-division="ventures"] h2,
[data-division="ventures"] h3,
[data-division="ventures"] .statement { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
[data-division="ventures"] h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.9rem); line-height: 1; max-width: 18ch; }
[data-division="ventures"] h3 { font-size: clamp(1.5rem, 1.2rem + .9vw, 2rem); line-height: 1.08; }
[data-division="ventures"] .statement { font-size: clamp(2.8rem, 1.4rem + 5vw, 6rem); line-height: .96; max-width: 15ch; }
[data-division="ventures"] .masthead { background: rgba(247, 244, 236, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
[data-division="ventures"] .credit > .rail { font-family: var(--serif); font-style: italic; font-size: 1.15rem; letter-spacing: 0; text-indent: 0; color: var(--accent); border-top: 1px solid var(--type); }
[data-division="ventures"] .cta { border-radius: 999px; padding: .8rem 1.5rem; }
[data-division="ventures"] .cta--solid { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
[data-division="ventures"] .cta--solid:hover { background: transparent; color: var(--accent); }
[data-division="ventures"] .hero-rule { background: var(--type); height: 2px; max-width: 5rem; }
[data-division="ventures"] .band--raised { background: var(--ground-raised); }
.mark { background: linear-gradient(transparent 58%, var(--hl) 58%, var(--hl) 92%, transparent 92%); padding: 0 .08em; }
.note { font-family: var(--serif); font-style: italic; font-size: 1.2rem; color: var(--accent); }
.vx-label { font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--type-3); margin: 0; }

/* ---------- §1 HOME HERO — bench + card stack ---------- */
.vx-hero {
  position: relative; overflow: hidden; overflow: clip;
  padding: clamp(4rem, 9vw, 7.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--ground);
  border-bottom: 1px solid var(--line);
}
.vx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; max-width: 86rem; }
.vx-hero h1 { font-size: clamp(3.1rem, 1.3rem + 6.2vw, 7.6rem); line-height: .92; letter-spacing: -.02em; margin: 1rem 0 0; max-width: 13ch; }
.vx-hero h1 em { font-style: italic; }
.vx-hero .lede { margin-top: 1.6rem; font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem); line-height: 1.5; max-width: 34ch; color: var(--type); }
.vx-hero .sub { margin-top: 1rem; max-width: 52ch; color: var(--type-2); }
.vx-hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; max-width: none; }
@media (max-width: 900px) { .vx-hero-grid { grid-template-columns: minmax(0, 1fr); } }

/* The card stack — hypotheses under test, pinned to the bench */
.stack-cards { position: relative; min-height: 25rem; perspective: 1200px; }
.icard {
  position: absolute; inset: 0 0 auto 0;
  background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 1px 0 var(--line), 0 22px 40px -28px rgba(22, 20, 15, .45);
  padding: 1.4rem 1.5rem 1.5rem;
  background-image: linear-gradient(transparent 2.95rem, #E8B4A6 2.95rem, #E8B4A6 calc(2.95rem + 1px), transparent calc(2.95rem + 1px)),
                    repeating-linear-gradient(transparent 0 1.7rem, rgba(90, 130, 170, .16) 1.7rem calc(1.7rem + 1px));
  background-position: 0 0, 0 3.6rem;
  transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
}
.icard:nth-child(1) { transform: rotate(-1.2deg); z-index: 3; }
.icard:nth-child(2) { transform: rotate(2deg) translate(10px, 12px); z-index: 2; }
.icard:nth-child(3) { transform: rotate(-3deg) translate(-8px, 22px); z-index: 1; }
.icard:nth-child(n+4) { transform: rotate(1deg) translate(0, 30px); z-index: 0; opacity: 0; }
.icard .kicker { display: flex; justify-content: space-between; gap: 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--type-3); margin: 0 0 1.1rem; }
.icard .kicker .untested { color: #8A3B1E; }
.icard h3 { font-size: clamp(1.6rem, 1.2rem + 1vw, 2.1rem); margin: 0 0 .9rem; }
.icard dl { margin: 0; }
.icard dt { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-top: .75rem; }
.icard dd { margin: .2rem 0 0; font-size: .95rem; line-height: 1.5; color: var(--type-2); }
.stack-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.stack-nav button { appearance: none; border: 1px solid var(--type); background: var(--card); color: var(--type); border-radius: 999px; padding: .5rem 1rem; font: inherit; font-size: .9rem; cursor: pointer; }
.stack-nav button:hover { background: var(--type); color: var(--card); }
.stack-nav .count { font-size: .85rem; color: var(--type-3); font-variant-numeric: tabular-nums; }
html:not(.js) .stack-cards { min-height: 0; }
html:not(.js) .icard { position: relative; transform: none !important; opacity: 1 !important; margin-bottom: 1rem; }
html:not(.js) .stack-nav { display: none; }

/* Status strip under the hero */
.vx-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0 var(--gutter); border-bottom: 1px solid var(--line); background: var(--card); }
.vx-strip div { padding: 1rem 1.25rem 1.1rem 0; }
.vx-strip div + div { padding-left: 1.25rem; border-left: 1px solid var(--line); }
.vx-strip dt { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--type-3); }
.vx-strip dd { margin: .2rem 0 0; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--type); }
.vx-strip dd small { font-family: var(--ui); font-size: .8rem; color: var(--type-3); margin-left: .35rem; }
@media (max-width: 800px) {
  .vx-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vx-strip div:nth-child(3) { padding-left: 0; border-left: 0; }
  .vx-strip div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* ---------- §2 OUTCOMES — shapes a venture can take ---------- */
.shapes { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; max-width: 60rem; }
.shapes li { font-family: var(--serif); font-size: clamp(1.2rem, 1rem + .6vw, 1.55rem); padding: .35rem 1rem .45rem; border: 1px solid var(--type); border-radius: 999px; background: var(--card); }
.shapes li:last-child { background: var(--hl); border-color: var(--hl); }

/* ---------- §3 THE GATE RUN (signature) ---------- */
.band--bench {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--ground-raised);
}
.gaterun { max-width: 86rem; margin-top: clamp(2rem, 4vw, 3rem); }
.gr-track { position: relative; list-style: none; margin: 0; padding: 2.25rem 0 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; }
.gr-track::before { content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 2px; background: var(--type); }
.gr-gate {
  appearance: none; -webkit-appearance: none; position: relative; width: 100%;
  display: flex; flex-direction: column; align-items: flex-start; gap: .25rem;
  padding: 1rem .9rem 1.1rem; border: 0; border-left: 1px dashed var(--line); background: transparent;
  font: inherit; text-align: left; color: var(--type-2); cursor: pointer;
}
.gr-gate::before { content: ""; position: absolute; top: -1.6rem; left: -1px; width: 2px; height: 1.9rem; background: var(--type); }
.gr-gate .n { font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--type-3); }
.gr-gate .t { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 1rem + .9vw, 1.9rem); line-height: 1; color: var(--type); }
.gr-gate .s { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--type-3); }
.gr-gate:hover .t { color: var(--accent); }
.gr-gate[aria-selected="true"] .t { color: var(--accent); }
.gr-gate[aria-selected="true"] .s { color: var(--accent); }
.gr-gate:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The idea card riding the track */
.gr-token { position: absolute; top: .25rem; left: 0; width: 1.7rem; height: 1.7rem; margin-left: -.85rem; background: var(--card); border: 2px solid var(--accent); border-radius: 50%; display: none; transition: transform .8s cubic-bezier(.45,0,.2,1); }
.gr-token::after { content: ""; position: absolute; inset: .3rem; border-radius: 50%; background: var(--accent); }
.js .gr-token { display: block; }
/* The pile at Validate — most ideas stop there */
.gr-pile { position: absolute; top: -1.6rem; left: calc(100% / 6 * 1 + .6rem); display: flex; gap: 3px; }
.gr-pile i { display: block; width: .7rem; height: .9rem; background: var(--card); border: 1px solid var(--type-3); transform: rotate(-8deg); }
.gr-pile i:nth-child(2) { transform: rotate(6deg); } .gr-pile i:nth-child(3) { transform: rotate(-2deg); } .gr-pile i:nth-child(4) { transform: rotate(10deg); }

.gr-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); margin-top: 1.5rem; padding: clamp(1.4rem, 3vw, 2.25rem); background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 36px -30px rgba(22,20,15,.5); }
.gr-panel[hidden] { display: none; }
.gr-panel h3 { font-size: clamp(2.2rem, 1.5rem + 2.4vw, 3.6rem); line-height: .95; margin: .35rem 0 .9rem; }
.gr-panel .what { font-size: var(--step-1); line-height: 1.45; color: var(--type); margin: 0; }
.gr-panel .fails { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--type-2); font-size: .95rem; }
.gr-panel .fails b { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #8A3B1E; margin-bottom: .25rem; }
.gr-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.gr-list li { position: relative; padding: .75rem 0 .75rem 2.1rem; border-top: 1px solid var(--line); color: var(--type-2); line-height: 1.45; }
.gr-list li::before { content: ""; position: absolute; left: 0; top: .85rem; width: 1.1rem; height: 1.1rem; border: 1.5px solid var(--type-3); border-radius: 3px; background: var(--card); }
.gr-list li::after { content: ""; position: absolute; left: .38rem; top: .98rem; width: .35rem; height: .65rem; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: 0; }
.gr-list li.ok::before { background: var(--accent); border-color: var(--accent); }
.gr-list li.ok::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .gr-list li::before { transition: background-color .25s ease, border-color .25s ease; }
  .gr-list li::after { transition: opacity .25s ease .1s; }
}
html:not(.js) .gr-panel[hidden] { display: grid; }
html:not(.js) .gr-list li::before { background: var(--accent); border-color: var(--accent); }
html:not(.js) .gr-list li::after { opacity: 1; }
.gr-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem 2rem; margin-top: 1.5rem; }
.gr-foot .note { margin: 0; font-size: 1.4rem; }
@media (max-width: 900px) {
  .gr-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.25rem; }
  .gr-track::before, .gr-gate::before, .gr-token, .gr-pile { display: none !important; }
  .gr-gate { border-left: 0; border-top: 2px solid var(--type); }
  .gr-gate[aria-selected="true"] { border-top-color: var(--accent); }
  .gr-panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .gr-track { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- §4 ON THE BENCH — thesis cards ---------- */
.bench { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; max-width: 86rem; }
.bench li { background: var(--card); border: 1px solid var(--line); padding: 1.3rem 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; box-shadow: 0 12px 26px -24px rgba(22,20,15,.5); }
.bench li:nth-child(3n+1) { transform: rotate(-.5deg); } .bench li:nth-child(3n+2) { transform: rotate(.4deg); }
.bench .adj { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--type-3); }
.bench h3 { margin: 0; font-size: clamp(1.4rem, 1.15rem + .7vw, 1.8rem); }
.bench .hyp { margin: 0; color: var(--type-2); font-size: .95rem; line-height: 1.5; }
.bench .hyp b { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: .25rem; }
@media (max-width: 1000px) { .bench { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .bench { grid-template-columns: minmax(0, 1fr); } .bench li { transform: none !important; } }

/* ---------- §5 REGISTER ---------- */
.vx-register { width: 100%; border-collapse: collapse; max-width: 72rem; }
.vx-register th, .vx-register td { text-align: left; vertical-align: top; padding: .95rem 1rem .95rem 0; border-bottom: 1px solid var(--line); font-weight: 400; }
.vx-register thead th { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--type-3); border-bottom: 1px solid var(--type); }
.vx-register tbody th { font-family: var(--serif); font-size: 1.35rem; color: var(--type); }
.vx-register .code { display: block; font-family: var(--ui); font-size: .75rem; letter-spacing: .12em; color: var(--type-3); }
.vx-register td { color: var(--type-2); font-size: .95rem; }
.pill { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.pill--incubation { color: var(--accent); }
.pill--research { color: var(--type-2); border-style: dashed; }
@media (max-width: 700px) {
  .vx-register thead { display: none; }
  .vx-register tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .vx-register th, .vx-register td { display: block; border: 0; padding: .2rem 0; }
}

/* ---------- §6 BRING / MAY BRING ---------- */
.exchange { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; max-width: 72rem; }
.exchange > div { background: var(--card); border: 1px solid var(--line); padding: 1.5rem; }
.exchange h3 { margin: 0 0 .6rem; }
.exchange p { color: var(--type-2); margin: 0; }
@media (max-width: 760px) { .exchange { grid-template-columns: minmax(0, 1fr); } }

/* ---------- §7 PATHS (existing .path cards) ---------- */
[data-division="ventures"] .path { border-radius: 4px; background: var(--card); }
[data-division="ventures"] .path h3 { font-size: clamp(1.4rem, 1.15rem + .7vw, 1.8rem); }
[data-division="ventures"] .path:hover { border-color: var(--accent); }

/* ---------- §8 INTERIOR ---------- */
[data-division="ventures"] .lc-name { font-family: var(--serif); font-weight: 600; letter-spacing: .02em; }
[data-division="ventures"] .thesis { background: var(--card); }
[data-division="ventures"] .thesis-head h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 2rem); }
[data-division="ventures"] .pf-name { font-family: var(--serif); font-size: 1.3rem; }
[data-division="ventures"] .ledger .term { font-family: var(--serif); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem); }
[data-division="ventures"] .stack-lg > .ledger, [data-division="ventures"] .stack-lg > .gr-list { margin-top: 2.25rem; }
[data-division="ventures"] .band.hero {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--ground);
}
[data-division="ventures"] .footer { background: var(--ground-raised); }
[data-division="ventures"] .path-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); background: transparent; gap: 1rem; border: 0; }
[data-division="ventures"] .path { border: 1px solid var(--line); }
@media (max-width: 900px) { [data-division="ventures"] .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { [data-division="ventures"] .path-grid { grid-template-columns: minmax(0, 1fr); } }
.stack-cards { min-height: 21rem; }
/* Stack: every card shares one grid cell, so the stack is as tall as its tallest card. */
.stack-cards { display: grid; min-height: 0; padding-bottom: 1.75rem; }
.icard { position: relative; inset: auto; grid-area: 1 / 1; }
html:not(.js) .stack-cards { display: block; }