/* color-cell-nav: a sticky bar of equal ruled cells either side of a centred logo cell. Hovering a cell floods it
   with that cell's OWN colour (fill eases .2s) while its text flips at once (0s); the CTA cell cycles its fill
   through the palette on a loop. Measured from heyjay.studio (.nav-link, css 2847; IX2 a-29).

   Markup:
   <nav class="ccn" aria-label="Main">
     <div class="ccn__side">                       left cells: rule on their right
       <a class="ccn__cell" href="#" data-ccn-fill="red" data-ccn-ink="white">Work</a> ...
     </div>
     <a class="ccn__logo" href="/">...</a>
     <div class="ccn__side ccn__side--end">        right cells: rule on their left
       ... <a class="ccn__cell" href="#" data-ccn-cycle="green red purple yellow blue pink">Say hi</a>
     </div>
   </nav>
   Colours: data-ccn-fill / data-ccn-ink take a palette name (base ink blue pink green yellow red purple white) or any
   CSS colour; or set --ccn-fill / --ccn-ink-on inline yourself. */

.ccn {
  /* palette (heyjay) */
  --ccn-base: #fffcf5;
  --ccn-ink: #000;
  --ccn-white: #fff;
  --ccn-blue: #3c8aff;
  --ccn-pink: #ffa9cd;
  --ccn-green: #299e00;
  --ccn-yellow: #ffbe2e;
  --ccn-red: #fc411f;
  --ccn-purple: #cd97e9;

  --ccn-rule: #000;                 /* the 1px rules */
  --ccn-h: 84px;                    /* cell height (86px bar with its two rules) */
  --ccn-h-collapsed: 64px;          /* bar height once collapsed (phone) */
  --ccn-logo-w: 33.333%;            /* the logo cell's share; the cells split the rest equally (160px each at 1440) */
  --ccn-cell-w: 160px;              /* used only with .ccn--fixed (data-ccn-cell): fixed cells, the logo takes the rest */
  --ccn-pad: 24px 16px;
  --ccn-font: italic 200 24px/1 "Instrument Serif", "Editorial New", Georgia, serif;
  --ccn-track: -.02em;
  --ccn-fill-dur: .2s;              /* hover fill: eases .2s (the source's `transition: all .2s, color`) */
  --ccn-fill-ease: ease;
  --ccn-ink-dur: 0s;                /* hover text colour: snaps (the bare `color` entry = 0s); try .2s to blend it */
  --ccn-blend: .2s;                 /* CTA cycle: each colour change blends this long (cell transition .2s) */
  --ccn-z: 1000;

  position: sticky;
  top: 0;
  z-index: var(--ccn-z);
  display: flex;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
  background: var(--ccn-base);
  border-block: 1px solid var(--ccn-rule);
  margin-bottom: -1px;              /* the next band's top rule sits on ours */
  overflow: hidden;
}
.ccn *, .ccn *::before, .ccn *::after { box-sizing: border-box; }

.ccn__side { display: flex; flex: 1 1 0; min-width: 0; }
.ccn__logo {
  flex: 0 0 var(--ccn-logo-w);
  display: flex; align-items: center; justify-content: center;
  min-width: 0; padding: 12px 4px;
  color: var(--ccn-ink); text-decoration: none;
}

.ccn__cell {
  --ccn-rest: transparent;
  flex: 1 1 0;
  min-width: 0;
  height: var(--ccn-h);
  display: flex; align-items: center; justify-content: center;
  padding: var(--ccn-pad);
  font: var(--ccn-font);
  letter-spacing: var(--ccn-track);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  color: var(--ccn-ink);
  background-color: var(--ccn-rest);
  border: 0 solid var(--ccn-rule);
  border-right-width: 1px;          /* left side: rule on the right */
  transition: background-color var(--ccn-fill-dur) var(--ccn-fill-ease), color var(--ccn-ink-dur) var(--ccn-fill-ease);
  -webkit-tap-highlight-color: transparent;
}
.ccn__side--end .ccn__cell { border-right-width: 0; border-left-width: 1px; }

/* the cycling cell: its resting fill is whatever the cycle says right now, blended over --ccn-blend */
.ccn__cell--cycle {
  --ccn-rest: var(--ccn-cycle-bg, var(--ccn-green));
  transition: background-color var(--ccn-blend) ease, color var(--ccn-ink-dur) var(--ccn-fill-ease);
}

/* hover / keyboard focus / .is-lit (demo autopilot, or a "you are here" cell) */
.ccn__cell:hover, .ccn__cell:focus-visible, .ccn__cell.is-lit {
  background-color: var(--ccn-fill, var(--ccn-ink));
  color: var(--ccn-ink-on, var(--ccn-base));
  transition: background-color var(--ccn-fill-dur) var(--ccn-fill-ease), color var(--ccn-ink-dur) var(--ccn-fill-ease);
}
.ccn__cell:focus-visible { outline: 2px solid var(--ccn-rule); outline-offset: -4px; }

/* fixed-width cells (data-ccn-cell="160" or add the class + --ccn-cell-w yourself) */
.ccn--fixed .ccn__side { flex: 0 0 auto; }
.ccn--fixed .ccn__cell { flex: 0 0 var(--ccn-cell-w); }
.ccn--fixed .ccn__logo { flex: 1 1 0; }

/* collapsed (phone): only the logo stays, centred, unless cells are kept (data-ccn-keep on the nav or a cell).
   part.js sets .ccn--collapsed below data-ccn-collapse (991px); without JS the same happens at 991px. */
.ccn--collapsed .ccn__cell:not(.is-kept) { display: none; }
.ccn--collapsed .ccn__side { flex: 0 0 auto; }
.ccn--collapsed .ccn__logo { flex: 1 1 0; padding-block: 8px; }
.ccn--collapsed .ccn__cell, .ccn--collapsed .ccn__logo { height: var(--ccn-h-collapsed); }
.ccn--collapsed .ccn__cell.is-kept { flex: 0 0 auto; padding-inline: 16px; font-size: min(24px, 5.6vw); }
@media (max-width: 991px) {
  .ccn:not(.ccn--ready) .ccn__cell { display: none; }
  .ccn:not(.ccn--ready) .ccn__logo { flex: 1 1 0; }
}