/* ==========================================================================
   Hard As Nails — brand layer
   ==========================================================================

   WHY THIS FILE EXISTS

   Six pages carry ~96KB of inline CSS between them and no shared stylesheet.
   index alone declares 19 distinct colours; organisations declares 25. On a
   brand with four inks, that is where the incoherence comes from — there was
   no single place a decision could be made once, so every page drifted into
   its own opinion.

   This file is that single place. It loads AFTER each page's inline <style>,
   so it wins ties on source order without anything being deleted. That makes
   it reversible: remove the one <link> and the page is exactly as it was.

   WHAT IT DOES

   Translates the August 2026 creative direction ("Two Fingers Up") onto the
   existing markup. The direction is two-colour print — black plus rhodamine,
   hard edges, coarse halftone. The site as built wears dark-SaaS instead:
   pink radial glows, 999px pills, glow shadows, a gradient panel. Same
   palette, opposite grammar. Nearly everything below is that translation.

   No markup changes, no new fonts. The self-hosted Inter / Inter Tight pair
   stays exactly as it is — the no-third-party-font-request rule holds.

   Full direction: han-research repo, creative/HANDOVER.md
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. THE INKS

   Four, and they behave like ink rather than like light. Rhodamine is the
   brand pink already in use; it is process magenta, so it runs at full
   strength or not at all. A 40% pink is a nursery.

   --acid is the third ink and it does the big headline statistics. It comes
   from a participant describing his own nails as "neon pink and 'smiley'
   yellow" — the audience handed us the accent unprompted.

   THE ONE EXCEPTION: PAINTED NAILS KEEP THEIR OWN COLOUR

   In the treated photography the man goes black and white and his nails stay
   exactly as he painted them — purple, lime, blue, orange, hot pink, whatever
   he chose. That is outside the four inks on purpose.

   It earns the exception twice over. The colour marks the act: it lands on
   the one thing this project is actually about and on nothing else, so it
   stays meaningful instead of becoming decoration. And it keeps the men
   individual. A single-ink duotone flattens a fire crew and a bloke in a
   yellow jacket into one colour; letting each man keep his own nail colour
   means the range of them survives, in the nails rather than the clothes.

   It is not a licence to widen the palette. Nail colour is photographic,
   never graphic — it never appears in type, rules, panels, buttons or
   chevrons. If a colour is not on a fingernail, it is one of the four.
   -------------------------------------------------------------------------- */

:root{
  --black:      #0A0709;   /* warm near-black. Not #000 — black ink isn't neutral */
  --charcoal:   #120E11;
  --dark:       #191317;
  --mid:        #2A1F26;
  --line:       #2A1F26;
  --line-soft:  #1E1619;

  --pink:       #E6007E;   /* rhodamine. The ink. */
  --pink-bright:#FF338F;   /* screen-only lift for hover and focus. Never in artwork. */
  --pink-deep:  #C8006D;   /* the only pink that carries white body text at AA */
  --acid:       #E4FF3D;   /* third ink, rationed */

  --white:      #FFFFFF;   /* wordmark and headlines only */
  --text:       #F3ECEF;   /* off-white with a pink bias — printed, not lit */
  --text-dim:   #B9AAB1;
  --text-muted: #8B7C84;
  /* ── the last two the pages still owned ─────────────────────────────────
     Moved here so that deleting the per-page :root blocks changes nothing by
     accident. Both were found by enumerating every custom property declared
     and used across all ten pages, not by reading the CSS and hoping.

     --max is a genuine shared layout width; it belongs in one place like any
     other token.

     --pink-glow is the last surviving glow on the site: one radial bloom
     behind the research hero. Section 3 of this file removes the other two by
     name, and this one escaped because it hid behind a variable. Setting it
     transparent here retires it from the same place as the rest of the rule
     rather than editing that page's markup. Ink does not glow.

     --text-muted disagreed: research said #7A7A7A, the other nine said
     #8C8C8C. Nine wins, and it is also the more legible of the two on this
     ground (about 5.9:1 against 4.5:1). */
  --max:        1180px;
  --pink-glow:  transparent;

}


/* --------------------------------------------------------------------------
   2. THE GROUND

   A fixed halftone screen across the whole page at low opacity. This is the
   single cheapest way to stop a black background reading as "dark mode" and
   start it reading as printed matter. Fixed attachment so it behaves like
   paper the content moves across, rather than texture glued to the content.
   -------------------------------------------------------------------------- */

body{
  background-color: var(--black);
  background-image: radial-gradient(circle at center, rgba(230,0,126,.30) 0.7px, transparent 0.9px);
  background-size: 5px 5px;
  background-attachment: fixed;
  color: var(--text);
}


/* --------------------------------------------------------------------------
   3. KILL THE GLOW

   Two radial pink blooms sit behind the hero and the final CTA. They are the
   most recognisable tell of a generic dark landing page, and print has no
   glow at all. Removing them is the single biggest change on the page.

   Same reasoning for the pink bloom under every button: a box-shadow in
   brand colour is a light effect. Ink doesn't do it.
   -------------------------------------------------------------------------- */

.hero::before,
.final::before{ display:none; }

.btn,
.btn-white,
.btn-ghost{ box-shadow:none; }

.btn:hover,
.btn-white:hover{ box-shadow:none; }


/* --------------------------------------------------------------------------
   4. HARD EDGES

   Every rounded corner goes. Two-colour offset has no radii — the 999px
   pills especially read as app UI. This one declaration does a lot of the
   work of making the page feel like it was set rather than assembled.
   -------------------------------------------------------------------------- */

.btn, .btn-sm, .btn-white, .btn-ghost,
.pill, .pill[open], .pill summary:focus-visible,
.card, .quote, .quote-feature, .auth-card,
.photo-slot, .share-preview,
.bar, .fill,
.skip{ border-radius:0; }


/* --------------------------------------------------------------------------
   5. STOP BOXING EVERYTHING

   The strongest note from the direction review: a 1px rectangle around every
   block, boxes nested inside boxes, is what makes the page feel blocky.
   Punk print uses rules, overlap and space — almost never containers.

   So the FAQ cards and authority cards lose their boxes and keep a single
   hairline above, which is what actually separates them. The panel fill goes
   too: on a halftone ground, a slightly-lighter rectangle is just a smudge.
   -------------------------------------------------------------------------- */

.card,
.auth-card{
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 26px 0 4px;
}
.card:hover,
.auth-card:hover{ border-top-color: var(--pink); }

.card h3::before,
.card h3::after{ content:none; }   /* the pink curly quotes read as decoration */

.share-preview{
  background: transparent;
  border: 0;
  border-left: 3px solid var(--pink);
  padding-left: 20px;
}


/* --------------------------------------------------------------------------
   6. QUOTES — back to the four inks

   The quote swatches shipped a coral (#FF6B4A) and a teal (#2DD4BF). Both
   are off-brand entirely and account for two of the nineteen colours on this
   page. Folded back onto the inks.
   -------------------------------------------------------------------------- */

.quote,
.quote-feature{
  background: transparent;
  border: 0;
  border-left: 4px solid var(--pink);
  padding-left: 24px;
}
.quote.swatch-magenta{ border-left-color: var(--pink); }
.quote.swatch-coral  { border-left-color: var(--text); }
.quote.swatch-teal   { border-left-color: var(--pink-deep); }


/* --------------------------------------------------------------------------
   7. TYPE

   No new families. Inter Tight is pushed harder — tighter tracking, heavier,
   and set properly uppercase — which is most of the distance to the poster
   grotesque the direction calls for. Body copy gets a real measure; the long
   lines were making the page feel loose.
   -------------------------------------------------------------------------- */

h1, .h2, .hero h1, .signup h2, .final h2{
  letter-spacing: -.02em;
  text-wrap: balance;
}

.hero h1{ line-height:.98; }

.kicker{
  color: var(--pink);
  letter-spacing: .28em;
}

.hero .sub,
.lead,
.final p,
.card p,
.pill .body{ max-width: 62ch; }


/* --------------------------------------------------------------------------
   8. SECTION NUMERALS

   Outlined numerals, drawn with a text stroke rather than an image. These
   earn their place because the page genuinely is a sequence — you are meant
   to read it in order — so the numbering encodes something true rather than
   decorating. Only sections carrying an .h2 are counted, which correctly
   leaves the two CTA panels unnumbered.
   -------------------------------------------------------------------------- */

main{ counter-reset: sec; }

main > section:has(.h2){ counter-increment: sec; }

main > section:has(.h2) .h2{
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 3vw, 28px);
}

main > section:has(.h2) .h2::before{
  content: counter(sec, decimal-leading-zero);
  flex: 0 0 auto;
  font-size: .92em;
  color: transparent;
  -webkit-text-stroke: 2px var(--pink);
  text-stroke: 2px var(--pink);
  letter-spacing: .02em;
}

@supports not ((-webkit-text-stroke: 2px red) or (text-stroke: 2px red)){
  main > section:has(.h2) .h2::before{ color: var(--pink); }
}


/* --------------------------------------------------------------------------
   9. BUTTONS

   Flat rhodamine block, hard edges, and a hover that inverts to paper rather
   than brightening. Inversion is a print move; brightness is a screen one.
   -------------------------------------------------------------------------- */

.btn{
  background: var(--pink);
  color: var(--white);
  letter-spacing: .16em;
  transition: background-color .12s linear, color .12s linear, transform .12s linear;
}
.btn:hover{
  background: var(--text);
  color: var(--black);
  filter: none;
  transform: none;
}
.btn-white:hover{ background: var(--pink); color: var(--white); }
.btn-ghost{ border:2px solid var(--line); }
.btn-ghost:hover{ background: var(--pink); border-color: var(--pink); color: var(--white); }

.btn:focus-visible,
.pill summary:focus-visible{ outline:3px solid var(--acid); outline-offset:3px; }


/* --------------------------------------------------------------------------
   10. NAV

   Solid rather than blurred. Backdrop blur is app chrome; a masthead is
   printed on the page. Hairline rule underneath in ink rather than grey.
   -------------------------------------------------------------------------- */

.nav{
  background: var(--black);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--line);
}
.nav-link{ letter-spacing:.14em; }
.nav-link.active{ border-bottom-color: var(--pink); }


/* --------------------------------------------------------------------------
   11. THE PILLS

   Kept as an accordion, but squared off and stripped to a rule. The circular
   pink plus becomes a square — same affordance, right grammar.
   -------------------------------------------------------------------------- */

.pill{
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
}
.pill[open]{ border-color: var(--line); }
.pill summary{ padding: 24px 4px; }
.pill .body{ padding: 0 4px 26px; }
.pill .plus{ border-radius:0; background: var(--pink); }


/* --------------------------------------------------------------------------
   12. THE SIGN-UP PANEL

   Was a two-stop pink gradient. Gradients are light; ink is flat. Held at
   --pink-deep rather than --pink because white body copy has to clear AA on
   it — that constraint was already solved in the original file and it still
   applies, so the deepened pink stays and only the gradient goes.

   The hazard stripe above it is the one place the third ink appears. It is
   the Haçienda / Designers Republic reference from the board: industrial
   signage borrowed for a thing that isn't industrial. Once per page.
   -------------------------------------------------------------------------- */

.signup{
  background: var(--pink-deep);
  position: relative;
}

.signup::before{
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--acid)  0 14px,
    var(--black) 14px 28px
  );
}

.signup .wrap{ padding-top: 14px; }

/* On an ink panel the button knocks out of the ink rather than sitting in it.
   The inherited pink-on-pink was near-invisible against --pink-deep. */
.signup .btn{ background: var(--text); color: var(--black); }
.signup .btn:hover{ background: var(--black); color: var(--text); }
.assure li{ border-left-color: rgba(255,255,255,.55); }


/* --------------------------------------------------------------------------
   13. PHOTOGRAPHY — colour by default

   An earlier pass ran every photograph through a black-plus-rhodamine duotone.
   It was wrong and it is gone. Two reasons, both from looking at the result:

   The pink plate erased the subject. The Nottinghamshire Fire & Rescue frame
   is a firefighter's raised finger with a red painted nail — the nail is the
   entire photograph — and the wash swallowed it completely. A treatment that
   deletes the point of the picture is not a treatment.

   And it flattened the men into one colour. The range of them is the argument:
   a fire crew, a bloke in a yellow jacket, a man against a Cotswold wall. The
   colour is where the joy is, and joy is not a decoration here — it is the
   thing that stops this looking like a public health campaign.

   So photographs run as shot. The ink goes where it means something instead,
   which is section 13b.
   -------------------------------------------------------------------------- */

.photo-slot,
.man,
.facecard,
.hero-photo{
  background: var(--charcoal);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

.photo-slot img,
.man img,
.facecard img,
.hero-photo img{ filter: none; }


/* --------------------------------------------------------------------------
   13b. MONO WITH THE NAILS LEFT IN

   The treatment Sam made by hand and the right one: the man goes black and
   white, the painted nails stay in colour. It is still two-colour thinking,
   but the second colour lands on the one thing the whole project is about
   rather than over the top of everything.

   assets/treatments.svg does it automatically with a saturation key — no
   masking, no re-export, and it works on the photographs already in /assets.

   WHERE IT IS SAFE

   The key finds the most saturated thing in the frame. In a hand shot that is
   always the nails, and the result is exactly right. In a wide group shot it
   is often a hi-vis jacket or a warm stone wall, and those light up too. So
   this is scoped by filename to the close-ups, and group photography is left
   in full colour where it belongs.

   For the 100 Men wall the fix is the crop, not the filter: tight to hands
   and faces takes the wall out of frame, and then the key has nothing to
   catch but nails. That is an asset job, and until those crops exist those
   portraits stay in colour.
   -------------------------------------------------------------------------- */

img[src*="/assets/hand-"],
img[src*="fireservice"],
.pop img{
  filter: url(/assets/treatments.svg#popnails);
}


/* --------------------------------------------------------------------------
   13c. THE THIRD INK DOES THE NUMBERS

   Acid yellow was being spent on routine labels, which turns a signal into
   decoration. It has one job now and it is the best one available: the big
   headline statistics. A number is the most quotable thing on any of these
   pages, and this is a project whose whole claim is that it has the data.
   Pink stays for structure and emphasis; yellow means "this is a finding".
   -------------------------------------------------------------------------- */

/* Specificity matters here and cost me a round. The pages declare these as
   .stat .num, .card .num and .happened .hl — two classes — so a bare .num or
   .hl loses no matter where it sits in the cascade. Matched depth for depth.

   .big is deliberately absent: it looked like a stat class and is actually
   body copy (.final p.big), so colouring it turned a paragraph yellow. */

.stat .num,
.card .num,
.happened .hl,
.bigfind,
.movement-num,
.tfnum,
.stat-num{ color: var(--acid); }

.stat .num small{ color: inherit; opacity: .8; }

/* The home page carries no research stat, so the live sign-up count takes the
   yellow. It is the one number on that page and it is the one that moves. */
.counter-line strong{ color: var(--acid); }


/* --------------------------------------------------------------------------
   13d. THE CHEVRON

   The hazard stripe reads properly in the social frames and never made it
   onto the site. It is the Haçienda and Designers Republic reference from the
   board — industrial signage borrowed for something that is not industrial —
   and it is the one device that says punk without saying nail salon.

   Rationed: two per page at the very most. A third makes it wallpaper.

   IT USED TO HANG OFF .nav, AND THAT WAS WRONG TWICE OVER.

   Wrong on the rule: .nav is on all ten pages, so "rationed" became an
   identical stripe under every masthead — the definition of wallpaper. Sam
   looked at ten pages side by side and said the only visible change was a
   chevron bar, and he was right.

   Wrong on the markup: .nav does not mean the same thing everywhere. On
   research it is the section-links row (Headline numbers / Expectation Gap /
   Results …), not the masthead, so the stripe rendered *through* the links at
   half width. Hanging a global device off a class whose meaning is per-page is
   fragile by construction, and no amount of care in the CSS fixes that.

   So the chevron is now opt-in only: put class="chevron" where a surface
   actually earns one. It already does its job in the social frames and on the
   deck.
   -------------------------------------------------------------------------- */

.chevron{
  content:"";
  display:block; height:10px;
  background: repeating-linear-gradient(
    -45deg,
    var(--acid)  0 10px,
    var(--black) 10px 20px
  );
}

.signup::before{ height:16px; }


/* --------------------------------------------------------------------------
   14. THE COUNTER

   Squared, and the fill runs in rhodamine at full strength against a bar
   that is a hairline rather than a grey slab.
   -------------------------------------------------------------------------- */

.bar{ background: var(--line); height:4px; }
.fill{ background: var(--pink); }



/* --------------------------------------------------------------------------
   15. RULES, NOT BORDERS

   Section dividers in ink rather than grey, so the horizontal rules read as
   printed rules. The partners band loses its separate fill for the same
   reason the cards did.
   -------------------------------------------------------------------------- */

.section-line{ border-bottom-color: var(--line); }

.partners{
  background: transparent;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.partner-list .dot{ color: var(--pink); }

footer{ border-top:1px solid var(--line); }


/* --------------------------------------------------------------------------
   16. MOTION

   The direction is print. Nothing should ease.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
  .btn, .pill, .pill .plus{ transition:none; }
}