/* =====================================================================
   GENERATED FILE -- DO NOT EDIT.

   Built from _source/work/site/assets/site.css by _dev/generate/theme-assets.mjs. Edit the
   snapshot (or re-sync it from the original) and regenerate; a hand edit
   here fails the gate at commit rather than surviving to contradict its
   source.

     node _dev/sync-static-source.mjs sharpening-plus      pull the original in
     node _dev/generate/theme-assets.mjs sharpening-plus   rebuild this file

   The file below is the static site's stylesheet verbatim, comments and
   all, with one mechanical change: the logo is read from
   '../../../source/logos/', out of the design project's work/site/,
   and this copy reads it from the theme's '../images/'.

   NOTHING WORDPRESS-SPECIFIC GOES IN THIS FILE. Adapter rules that map
   block markup onto these components live in native-adapters.css, which
   is hand-written and loads after this one. Keeping them apart is what
   lets this copy stay diffable against the original.
   ===================================================================== */

/* =====================================================================
   site.css: the high-vis palette and the capped masthead

   The shared stylesheet for work/site/. All three work copies load it,
   after their own <style> block, so the token block below wins over the
   warm-paper one each page still carries in its head and the whole site
   is high-vis without any page being edited for colour. Keeping the old
   block underneath is deliberate: swapping the direction later is a
   change to this one file rather than to three pages.

   The masthead is the Wedge Tight capped-and-ruled cut, adopted out of
   variations/slant-capped-swatches.css on 2026-09-16. It arrived with two
   changes and no third:

     1. Every selector is scoped under .masthead, because the study ran on
        a page of its own where .btn and .nav belonged to it. Here they
        belong to the site, which has twenty buttons of its own.
     2. The sheet's 262px .phone frame becomes a real media query, since
        a site has viewports rather than frames.

   .mhframe carries the yellow ground: on narrow viewports the wedge's
   yellow comes off and the mark sits directly on the frame.
   ===================================================================== */

/* =====================================================================
   TOKENS
   The high-vis direction as the palette sets have it, which is the
   version tuned for a page of content: the hairlines are a darker yellow
   rather than black, because a whole calendar grid and a FAQ list ruled
   in full black is a different thing from a masthead study ruled in it.

   The --hv-* four are the masthead's own, and they are where the black
   hairline does belong.
   ===================================================================== */
:root {
  --bg:        #f8d117;
  --surface:   #ffffff;
  --fg:        #17150f;
  --muted:     #5f5514;
  /* Darker than the palette sets' #dbb70e, which measured 1.95:1 against a
     white card and 1.31:1 against the yellow page. This hairline is not
     only decorative: it draws the calendar's month-step buttons and its
     day grid, and WCAG 1.4.11 wants 3:1 on anything carrying the shape of
     a control. #8a6f07 is the lightest value in the same ochre family
     that clears it on both grounds, at 4.82:1 and 3.24:1. */
  --border:    #8a6f07;
  --accent:    #f8d117;
  --on-accent: #17150f;

  --ink:       #17150f;
  --ink-fg:    #f8f6f0;
  --ink-muted: #a09a86;

  --hv-bg:     #f8d117;
  --hv-fg:     #17150f;
  --hv-muted:  #5f5514;
  --hv-border: #17150f;

  --slant:     14deg;   /* the skewed constructions */
  --slant-run: 28px;    /* the clipped ones: 111px band x tan(14deg) */
}

/* =====================================================================
   THE PAGE, UNDER HIGH-VIS
   Two things the pages cannot be left to do for themselves once the
   ground is the accent.
   ===================================================================== */
/* A yellow button on a yellow page is not a button, so the primary goes
   black; inside an ink band it goes back to yellow, because there it is
   the only thing that reads. */
.btn-primary { background: var(--ink); color: var(--ink-fg); border-color: var(--ink); }
.btn-primary:hover { background: color-mix(in oklch, var(--ink) 82%, var(--ink-fg)); border-color: color-mix(in oklch, var(--ink) 82%, var(--ink-fg)); }
.on-ink .btn-primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.on-ink .btn-primary:hover { background: color-mix(in oklch, var(--accent) 88%, var(--on-accent)); border-color: color-mix(in oklch, var(--accent) 88%, var(--on-accent)); }
/* The about page's signature rule is drawn in the accent, which vanishes
   on this ground. */
.bio-sign { border-left-color: var(--ink); }
/* The outline on a secondary button inside an ink band was the ink
   foreground at 18%, which measured 1.69:1 and left the button reading as
   loose text beside a solid yellow one. At 45% it measures about 4.3:1,
   clearing the 3:1 a control boundary needs, and stays quieter than the
   primary it sits next to. */
.on-ink .btn-secondary { border-color: color-mix(in oklch, var(--ink-fg) 45%, transparent); }

/* =====================================================================
   THE MASTHEAD WRAPPER
   Holds all four variants, one shown at a time. Sticky, which the work
   copies' nav bar was and this replaces.

   The wrapper never gets shorter. The scroll script measures the bar at
   rest into --mh-rest, and min-height holds the wrapper there while the
   frame inside condenses, so the page below does not move by a pixel
   when the bar changes size: no scroll jump, no scroll-anchoring
   correction, and nothing for the change to feed back into. The strip
   the condensed bar leaves free is transparent and lets clicks through,
   which is why the yellow ground sits on .mhframe rather than here.
   ===================================================================== */
.masthead {
  position: sticky; top: 0; z-index: 20;
  min-height: var(--mh-rest, 0px);
  pointer-events: none;
  --mh-dur:  .34s;
  --mh-ease: cubic-bezier(.2, 0, 0, 1);   /* fast out, long settle */
}
.masthead .mhframe { background: var(--hv-bg); pointer-events: auto; }
/* The shared panel gives every .variant a screen of height so a full-page
   variant fills the window. A masthead is not a page. */
.masthead .variant { min-height: 0; }

/* =====================================================================
   THE REGIONS
   .ink-tokens and .yellow-tokens flip the local palette without painting
   anything, which is what the slanted constructions need: their black is
   a clipped or skewed shape rather than a box background, so the type has
   to be told it is on ink separately from the ink being drawn.
   ===================================================================== */
.masthead .ink-tokens {
  --bg:     var(--ink);
  --fg:     var(--ink-fg);
  --muted:  var(--ink-muted);
  --border: color-mix(in oklch, var(--ink-fg) 22%, transparent);
  color: var(--ink-fg);
}
.masthead .yellow-tokens {
  --bg:     var(--hv-bg);
  --fg:     var(--hv-fg);
  --muted:  var(--hv-muted);
  --border: var(--hv-border);
  color: var(--hv-fg);
}

/* =====================================================================
   THE LOGO
   source/logos/logo-mark.svg is the mark alone: the blade outline and the
   "Sharpening plus" script, traced from the client's JPEG with the plate,
   the maroon field and the phone number left off, and the outline evened
   out. The art is a mask, so it takes the colour of the region it sits
   in: ink on the yellow wedge, yellow on an ink ground. The SVG carries
   its own ink fill for a browser without masks.

   The art fills 88% of the --lg-w box, so the --lg-w widths set below
   still size the masthead's mark.
   ===================================================================== */
.masthead .yellow-tokens { --lg-ink: var(--hv-fg); }
.masthead .ink-tokens    { --lg-ink: var(--accent); }
.masthead .lg {
  display: block;
  width: var(--lg-w, 226px);
  margin-inline: auto;
}
.masthead .lg-art {
  display: block;
  width: 88%;
  margin-inline: auto;
  aspect-ratio: 1339 / 778;
  background: url('../images/logo-mark.svg') center / contain no-repeat;
  transition: opacity .16s ease;
}
@supports (mask-size: contain) or (-webkit-mask-size: contain) {
  .masthead .lg-art {
    background: var(--lg-ink, currentColor);
    -webkit-mask: url('../images/logo-mark.svg') center / contain no-repeat;
            mask: url('../images/logo-mark.svg') center / contain no-repeat;
  }
}
.masthead .lock { display: block; text-decoration: none; color: inherit; border-radius: 6px; }
.masthead .lock:focus-visible { outline: 2px solid var(--fg); outline-offset: 5px; }
.masthead .lock:hover .lg-art { opacity: .78; }

/* =====================================================================
   THE SPLIT BAND, SHARED
   1fr auto 1fr, the mark in the middle column, the flanks pushed inward.
   Only the cut changes between the four.

   The hit targets are 44px here where the study had none: a study is
   looked at and this is used.
   ===================================================================== */
.masthead .band {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 0; padding: 0;
  text-align: center;
}
.masthead .band .lock { --lg-w: 226px; }
.masthead .nav-left  { justify-self: stretch; align-self: stretch; display: flex; align-items: center; justify-content: flex-end; }
.masthead .nav-right { justify-self: stretch; align-self: stretch; display: flex; align-items: center; justify-content: flex-start; gap: var(--gap-sm); }
.masthead .nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.masthead .nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--muted); text-decoration: none; padding: 0 13px; border-radius: 6px;
  transition: color .15s ease, background-color .15s ease,
              font-size var(--mh-dur) var(--mh-ease), padding var(--mh-dur) var(--mh-ease);
}
.masthead .nav a:hover { color: var(--accent); }
.masthead .nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.masthead .nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.masthead .btn {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
  padding: 0 16px; border-radius: 8px; border: 1.5px solid var(--fg); color: var(--fg);
  background: transparent;
  transition: background-color .15s ease, color .15s ease,
              font-size var(--mh-dur) var(--mh-ease), padding var(--mh-dur) var(--mh-ease);
}
.masthead .btn:hover { background: var(--fg); color: var(--bg); }
.masthead .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- the condensed state ---------------------------------------------
   Driven by the scroll handler in each page. The bar is roughly a third
   the resting height, so --slant-run is restated to hold the angle rather
   than flatten it. The 44px targets stay: the bar is 62px tall, so they
   fit, and the floor does not move because the page scrolled. */
.masthead .is-condensed { --slant-run: 15px; }   /* 62px bar x tan(14deg) */
.masthead .is-condensed .band { box-shadow: 0 2px 10px rgb(0 0 0 / .18); }
.masthead .is-condensed .band .lock { --lg-w: 126px; }
.masthead .is-condensed .nav a { font-size: 13px; padding: 0 10px; }
.masthead .is-condensed .btn { padding: 0 12px; font-size: 12.5px; }

/* --- the change between the two --------------------------------------
   Every property the condensed state moves runs on the one duration and
   curve, so the pieces land together rather than the bar settling in
   stages. The mark tweens its box width rather than --lg-w, which as an
   unregistered custom property would snap. --slant-run is registered so
   the narrow cut's clip-path can tween its lean instead of jumping.
   .is-measuring switches all of it off for the one synchronous read the
   scroll script takes of the resting height. */
@property --slant-run { syntax: '<length>'; inherits: true; initial-value: 28px; }
.masthead .mhframe { transition: --slant-run var(--mh-dur) var(--mh-ease); }
.masthead .band    { transition: box-shadow var(--mh-dur) var(--mh-ease); }
.masthead .lg      { transition: width var(--mh-dur) var(--mh-ease); }
.masthead .nav-left, .masthead .nav-right, .masthead .wedge {
  transition: padding var(--mh-dur) var(--mh-ease);
}
.masthead .wedge::before, .masthead .mid::before, .masthead .mid::after {
  transition: left var(--mh-dur) var(--mh-ease), right var(--mh-dur) var(--mh-ease);
}
.masthead.is-measuring *, .masthead.is-measuring *::before, .masthead.is-measuring *::after {
  transition: none !important;
}

/* =====================================================================
   THE MIDDLE CELL
   Holds the mark and, in the ruled pair, the two rules as its own
   pseudo-elements.
   ===================================================================== */
.masthead .mid {
  position: relative; align-self: stretch;
  display: flex; align-items: center; justify-content: center;
}
.masthead .wedge { display: flex; align-items: center; }

/* The rules, shared by the two ruled variants. A 2px line on the same
   lean as the cut beside it, standing in the gap between the menu and the
   mark. z-index lifts them over .wedge, which is positioned and would
   otherwise paint on top of them. */
.masthead .v-wedge-capped-rule .mid::before, .masthead .v-wedge-capped-rule .mid::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 2px; z-index: 1;
}

/* =====================================================================
   shared   ·   f-wedgecap   ·   v-wedge-capped, v-wedge-capped-rule
   Wedge at the Tight setting, 12px of overshoot. The band's far ends are
   square, so the ink runs to both edges of the viewport.

   The ink is a pseudo behind the band and the yellow a skewed pseudo
   behind the wedge; isolation keeps each pseudo's z-index: -1 inside its
   own box, so the yellow paints over the ink and under the mark.
   ===================================================================== */
.masthead .f-wedgecap .band { position: relative; isolation: isolate; background: transparent; }
.masthead .f-wedgecap .band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
}
.masthead .f-wedgecap .nav-left, .masthead .f-wedgecap .nav-right { padding-block: 22px; }
.masthead .f-wedgecap .nav-left  { padding-left: var(--gutter);  padding-right: var(--gap-lg); }
.masthead .f-wedgecap .nav-right { padding-right: var(--gutter); padding-left: var(--gap-lg); }
.masthead .f-wedgecap .wedge {
  position: relative; isolation: isolate;
  align-self: stretch; padding: 22px;
}
.masthead .f-wedgecap .wedge::before {
  content: ''; position: absolute; inset: 0 -12px; z-index: -1;
  background: var(--hv-bg);
  transform: skewX(calc(var(--slant) * -1));
}
.masthead .f-wedgecap .is-condensed .nav-left, .masthead .f-wedgecap .is-condensed .nav-right { padding-block: 10px; }
.masthead .f-wedgecap .is-condensed .wedge { padding: 10px 18px; }
.masthead .f-wedgecap .is-condensed .wedge::before { inset: 0 -8px; }

/* =====================================================================
   v-wedge-capped-rule   ·   the masthead   ·   ADOPTED 2026-09-16
   Adopted into work/site/, out of variations/slant-capped-swatches.html,
   which keeps the three cuts that lost.

   Wedge Tight, ruled. The band is ink running square to both edges, so
   the yellow wedge around the mark is the only cut across the header.
   A 2px rule stands in each gap between the menu and the
   mark, on that same lean. The rule is yellow because the gap it stands
   in is ink; there is nowhere on this masthead a light rule could go and
   still be seen.
   ===================================================================== */
.masthead .v-wedge-capped-rule .band .lock { padding-inline: 0; }
/* The menu has to move out to make room: the rule sits 34px past the
   wedge's yellow, and a link ending at the family's 32px would land on it. */
.masthead .v-wedge-capped-rule .nav-left  { padding-right: 64px; }
.masthead .v-wedge-capped-rule .nav-right { padding-left:  64px; }
.masthead .v-wedge-capped-rule .is-condensed .nav-left  { padding-right: 44px; }
.masthead .v-wedge-capped-rule .is-condensed .nav-right { padding-left:  44px; }
.masthead .v-wedge-capped-rule .mid::before, .masthead .v-wedge-capped-rule .mid::after {
  background: var(--accent);
  transform: skewX(calc(var(--slant) * -1));
}
.masthead .v-wedge-capped-rule .mid::before { left: -34px; }
.masthead .v-wedge-capped-rule .mid::after  { right: -34px; }
.masthead .v-wedge-capped-rule .is-condensed .mid::before { left: -24px; }
.masthead .v-wedge-capped-rule .is-condensed .mid::after  { right: -24px; }

/* =====================================================================
   NARROW
   The study ran its mobile state inside a 262px frame; a site has
   viewports, so that frame becomes this media query. What it runs is
   Slash from split-nav-slant-sheet.html unchanged: stacked, the slant
   leaves the vertical edges for the horizontal ones and the two ink rows
   shear past each other, with the mark on the yellow between them.

   This is the whole of what happens below 1120px. No caps, no wedge, and
   no rule: the header the study drew for this width is a different design
   from the one above, and that was true of all four cuts.

   Every selector carries .variant purely for weight: the family rules
   above are .masthead .f-x .nav-left, and a rule without it would lose to
   them however late it is written.
   ===================================================================== */
@media (max-width: 1119px) {
  .masthead { --slant-run: 20px; }
  .masthead .variant .band { grid-template-columns: 1fr; justify-items: stretch; }
  .masthead .variant .band .lock { --lg-w: 190px; padding: 14px 12px; }
  .masthead .variant .nav { justify-content: center; gap: 5px; }
  .masthead .variant .nav a { font-size: 13px; }

  .masthead .variant .nav-left, .masthead .variant .nav-right {
    justify-content: center; padding: 12px;
    background: var(--ink); background-image: none;
  }
  .masthead .variant .nav-right { flex-wrap: wrap; }
  .masthead .variant .nav-left {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--slant-run)), 0 100%);
  }
  .masthead .variant .nav-right {
    clip-path: polygon(0 var(--slant-run), 100% 0, 100% 100%, 0 100%);
  }

  /* The middle cell carries nothing of its own here: the ink and yellow
     pseudos the wedge family draws come off, with the isolation that held
     them, and the mark sits on the frame's yellow. */
  .masthead .variant .mid::before, .masthead .variant .mid::after { display: none; }
  .masthead .variant .band::before { display: none; }
  .masthead .variant .wedge::before { display: none; }
  .masthead .variant .band { isolation: auto; }
  .masthead .variant .wedge { padding: 0; isolation: auto; position: static; }

  /* Condensing a bar that is already three stacked rows only makes it
     harder to read, so the scroll state stops applying at this width. */
  .masthead .variant .is-condensed .band .lock { --lg-w: 190px; }
  .masthead .variant .is-condensed .nav a { font-size: 13px; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .masthead *, .masthead *::before, .masthead *::after { transition-duration: .001ms !important; }
}