/* Polish pass — accent colour, focus, and a11y corrections.
   Loaded last, after hero.css. Deliberately touches nothing inside .mast:
   the hero banner is fixed and out of scope. */

:root {
  /* One signal colour, three jobs: action, focus, and "now".
     --accent is the pure brand value; --accent-ink is the darkened variant
     used wherever the colour has to carry text on the light ground
     (#C03F14 on #f6f6f6 = 4.9:1, AA). */
  --accent: #fd5321;
  --accent-ink: #c03f14;
  --accent-soft: rgba(253, 83, 33, 0.16);

  /* Was #8a8a8a from hero.css — 3.2:1 on the #f6f6f6 ground, which fails AA
     for the 16px secondary lines that use it (.cv-highlight, .arrow.external,
     .promotions .time). #6f6f6f measures 4.7:1. */
  --color-fill-light: #6f6f6f;

  /* The rgbsplit hover mechanic already offsets a warm and a cool layer
     behind the link. The warm one was a muddy brown; the accent is what it
     was always reaching for, and it sits beside the lime that stays. */
  --colorSplitR: rgba(253, 83, 33, 0.93);
}

/* --- Focus -------------------------------------------------------------
   The base stylesheet zeroes every outline (`a,:focus{outline:none}`) and
   never puts one back, so keyboard users had no visible position anywhere on
   the page. :focus-visible is later in the cascade at equal specificity. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 3px;
}
.rgbsplit:focus-visible,
.jelly:focus-visible {
  outline-offset: 6px;
}

/* --- Action ------------------------------------------------------------ */

/* The underline is the link affordance on this site — link text is the same
   colour and near the same weight as the body copy around it — so it carries
   the accent. The base rule paints it with currentColor and nests `&:before`
   under `a:not(.noline),[role=button]:not(.noline)`, so it carries the weight
   of the heavier branch of that list; [href] matches it. */
a[href]:not(.noline):before,
[role="button"]:not(.noline):before {
  background: var(--accent);
}

/* The swipe behind an external link on hover. #35ff92 mint was inherited
   from the site this design was remixed from and belonged to that brand. */
a.brilliant:after {
  background: var(--accent);
}

::selection {
  background: var(--accent-soft);
}

/* --- "Now" ------------------------------------------------------------- */

/* Current roles read as current at a glance. The word "Present" already
   carries the meaning in text, so the colour reinforces rather than encodes. */
.cv > li.current .title:before {
  background: var(--accent);
  border-color: var(--accent);
}
.cv > li.current .time {
  color: var(--accent-ink);
  font-weight: 500;
}

/* --- Arrows ------------------------------------------------------------
   Every arrow on the page is one of these spans: the ↗ that marks a link as
   external, the → beside a link label, and the → that introduces each CV
   takeaway. One value so they read as a single mark rather than three.
   .external is listed explicitly because the base rule paints it with
   --color-fill-light at equal weight. The label beside an arrow stays
   neutral; the glyph alone carries the colour. */
.arrow,
.arrow.external {
  color: var(--accent);
}

/* --- Local defects ----------------------------------------------------- */

/* .video-label is a flex row stretched by its column parent, so the shared
   a:before underline ran the full width of the card rather than the text. */
.videos .video-card .video-label {
  align-self: start;
}

/* --- Motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  /* The entrance states start hidden and are revealed by a transition, so
     zeroing the transition alone would leave them invisible. */
  .drift,
  .onscroll,
  .name-wordmark .line span,
  .name-photo {
    opacity: 1 !important;
    transform: none !important;
  }
  .mast-wipe {
    clip-path: inset(0) !important;
  }
  .name-photo {
    translate: none !important;
  }
}

/* Click-to-load YouTube facade. Matches the iframe box the embeds used:
   .videos .video-card iframe is aspect-ratio 9/16, 12px radius, full width. */
.videos .video-card .video-facade {
  appearance: none;
  aspect-ratio: 9 / 16;
  background: rgba(0, 0, 0, .06);
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  display: block;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: relative;
  width: 100%;
}
.videos .video-card .video-facade img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}
.videos .video-card .video-facade .video-play {
  background: rgba(20, 20, 20, .62);
  border-radius: 50%;
  height: 3.4em;
  inset: 50% auto auto 50%;
  position: absolute;
  transition: background .2s ease, transform .2s ease;
  translate: -50% -50%;
  width: 3.4em;
}
.videos .video-card .video-facade .video-play:before {
  border-block: .62em solid transparent;
  border-inline-start: 1.02em solid #fff;
  border-inline-end: 0;
  content: "";
  inset: 50% auto auto 54%;
  position: absolute;
  translate: -50% -50%;
}
.videos .video-card .video-facade:hover .video-play,
.videos .video-card .video-facade:focus-visible .video-play {
  background: var(--accent, #fd5321);
  transform: scale(1.06);
}

/* --- Mobile external links ---------------------------------------------
   vibes.tokenized.css carries a mobile-only block from the site this design
   was remixed from: under 768px it hides .brilliant's underline
   (`&:before{display:none}`) and pins the hover swipe open
   (`&:after{transform:scaleX(1)}`), so every external link reads as a solid
   filled highlight instead of underlined text. That was a mint highlighter in
   the original palette; in the accent it is an orange block with 0.84-black
   text on it. Restore desktop treatment: underline plus arrow, swipe only on
   hover. Specificity is raised past the nested `a.brilliant &:before` (0,1,2)
   branch it has to beat — see the nesting note above. */
@media screen and (width < 768px) {
  a[href].brilliant:not(.noline):before {
    display: block;
  }
  a[href].brilliant:after {
    transform: scaleX(0);
    transform-origin: center right;
  }
  a[href].brilliant:hover:after,
  a[href].brilliant:focus-visible:after {
    transform: scaleX(1);
    transform-origin: center left;
  }
}

/* --- Footer ------------------------------------------------------------ */

/* The name in the copyright line. --accent-ink rather than --accent: this is
   16px text on the light ground, where #FD5321 measures 3.2:1 and fails AA. */
footer .wrap p .byline {
  color: var(--accent-ink);
}

/* The KIWI credit is centred in the footer row. footer .wrap is a flex row of
   copyright / credit / social list; giving the copyright the same `flex: 1 1 0`
   the list already has makes those two outer blocks equal width, which puts the
   credit on the true centre line without absolute positioning. Under 768px the
   row becomes a column and all three stack left, so this stays desktop-only. */
@media screen and (width >= 768px) {
  footer .wrap p:not(.credit) {
    flex: 1 1 0;
  }
  footer .wrap .credit {
    flex: 0 0 auto;
    text-align: center;
  }
}