/* Page styles for work-heineken.html.
   Extracted from the inline <style> blocks on 2026-09-11, byte for byte and in
   the same order, and linked from the same position in the head. The cascade is
   unchanged; what changed is that the CSS is now a file the browser can cache
   and a person can read. */

/* ── designed process figures (replace the wireframe SVG diagrams): visual but restrained ── */
  .pf { margin: clamp(24px,3.5vw,36px) 0 0; }
  .pf__card { padding:0; }
  .pf__row { display:flex; align-items:center; gap:clamp(10px,1.6vw,18px); }
  .pf__col { display:flex; flex-direction:column; gap:9px; flex:1; min-width:0; }
  .pf__k { font-family:inherit; font-size:11.5px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--muted); margin:0 0 6px; }
  .pf__k--accent { color:#3f8d5a; } .pf__k--alert { color:#c0593f; }
  .pf-node { background:#fff; border:1px solid var(--rule); border-radius:11px; padding:11px 13px; box-shadow:0 8px 18px -14px rgba(20,18,14,.4); }
  .pf-node__n { font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
  .pf-node__s { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 11px; letter-spacing:.03em; color:var(--muted); margin-top:5px; }
  .pf-node--accent { border-color:rgba(63,141,90,.42); } .pf-node--accent .pf-node__s { color:#3b8454; }
  .pf-node--alert { border-color:rgba(192,89,63,.42); } .pf-node--alert .pf-node__s { color:#be583e; }
  .pf-node--io { background:transparent; border-style:dashed; box-shadow:none; }
  .pf-node--io .pf-node__n { color:var(--ink-soft,#4a4a44); font-weight:500; }
  .pf-arrow { flex:0 0 auto; color:#c3bba8; display:flex; align-items:center; justify-content:center; }
  .pf-arrow svg { width:20px; height:20px; }
  .pf-cap { text-align:left; font-size:13px; color:var(--muted); line-height:1.55; margin:16px 0 0; max-width:60ch; }
  .pf-bar { margin-top:15px; font-family:inherit; font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; color:#3f8d5a; }
  @media (max-width: 720px) {
    .pf__row { flex-direction:column; align-items:stretch; }
    .pf-arrow { transform:rotate(90deg); align-self:center; margin:2px 0; }
  }

/* ── fortnightly workshop cycle: the operating cadence, clickable ── */
  .cycle { max-width: 760px; margin: clamp(56px,8vw,96px) auto; padding: 0 clamp(20px,5vw,40px); }
  .cycle__eyebrow { font-family:'JetBrains Mono',ui-monospace,monospace; font-size:11px; letter-spacing: 0.02em; color:var(--muted); margin:0 0 12px; }
  .cycle__h { font-size:clamp(1.4rem,2.4vw,1.9rem); font-weight:600; letter-spacing:-.015em; line-height:1.12; margin:0 0 24px; color:var(--ink); }

  .cycle__stage { background:#FCFAF4; border:1px solid var(--rule); border-radius:16px; padding:clamp(20px,3vw,30px); }

  /* City nodes feeding the loop */
  .cycle__cities { display:flex; gap:clamp(8px,1.4vw,14px); }
  .cycle__city { flex:1; min-width:0; background:transparent; border:1px dashed #CDC6B5; border-radius:11px; padding:11px 13px; transition:border-color .25s ease; }
  .cycle__city-name { display:block; font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
  .cycle__city-sub { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 11px; letter-spacing:.03em; color:var(--muted); margin-top:5px; }
  .cycle[data-step="0"] .cycle__city { border-color:rgba(63,141,90,.5); }

  /* Feed cue: cities into the loop */
  .cycle__feed { display:flex; align-items:center; gap:9px; color:#3f8d5a; margin:14px 0 16px; padding-left:2px; }
  .cycle__feed svg { width:18px; height:18px; flex:0 0 auto; }
  .cycle__feed-label { font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 11px; letter-spacing: 0.02em; color:var(--muted); }

  /* The repeating loop */
  .cycle__loop { list-style:none; margin:0; padding:0; display:flex; align-items:stretch; gap:clamp(8px,1.2vw,12px); }
  .cycle__node { flex:1; min-width:0; background:#fff; border:1px solid var(--rule); border-radius:11px; padding:12px 14px; box-shadow:0 8px 18px -14px rgba(20,18,14,.4); cursor:pointer; text-align:left; font-family:inherit; transition:border-color .25s ease, box-shadow .25s ease, transform .2s ease; }
  .cycle__node:hover { transform:translateY(-1px); box-shadow:0 12px 26px -16px rgba(20,18,14,.45); }
  .cycle__node-tag { display:block; font-family:'JetBrains Mono',ui-monospace,monospace; font-size: 11px; letter-spacing:.03em; color:var(--muted); margin:0 0 7px; }
  .cycle__node-name { display:block; font-size:13px; font-weight:600; color:var(--ink); line-height:1.2; }
  .cycle__node-desc { display:block; font-size:11.5px; color:var(--ink-soft,#4a4a44); line-height:1.45; margin-top:6px; }
  .cycle__node.is-active { border-color:rgba(63,141,90,.55); box-shadow:0 14px 28px -16px rgba(63,141,90,.5); }
  .cycle__node.is-active .cycle__node-tag { color:#3f8d5a; }
  .cycle__node--key { border-color:rgba(63,141,90,.3); }

  .cycle__arrow { flex:0 0 auto; align-self:center; color:#c3bba8; display:flex; align-items:center; justify-content:center; }
  .cycle__arrow svg { width:18px; height:18px; }

  /* Loop-back cue */
  .cycle__return { display:flex; align-items:center; gap:9px; margin:18px 0 0; font-family:inherit; font-size:12.5px; font-weight:500; letter-spacing:0; color:#3f8d5a; }
  .cycle__return-icon { display:flex; align-items:center; }
  .cycle__return-icon svg { width:16px; height:16px; }

  .cycle__cap { font-size:13px; color:var(--muted); line-height:1.55; margin:18px 0 0; max-width:62ch; }

  @media (max-width: 720px) {
    .cycle__loop { flex-direction:column; align-items:stretch; }
    .cycle__arrow { transform:rotate(90deg); align-self:center; margin:2px 0; }
  }
  @media (max-width:520px) {
    .cycle__cities { flex-direction:column; }
  }