/* ============================================================
   Junkyard Butcher — shared skin
   Tokens, reset, nav, buttons, type, footer, grain, mono.
   Loaded by every page BEFORE its own <style>, so a page can
   still override, but nothing has to be copy-pasted to match.
   Extracted 15 Sep 2026: philosophy.html was carrying 326 lines
   of this verbatim and had already drifted out of texture.
   ============================================================ */



  /* ============ TOKENS ============ */
  :root{
    --ink: #0c0c0a;
    --iron: #18170f;
    --iron-2: #201f16;
    --bone: #ece6d8;
    --bone-dim: #cfc8b6;
    --smoke: #8a8371;
    --acid: #c9ff3f;
    --rust: #ff5b23;
    --line: rgba(236,230,216,0.16);
    --line-strong: rgba(236,230,216,0.32);
    --ghost: rgba(236,230,216,0.055);

    --fs-display: clamp(3rem, 11.5vw, 9.5rem);
    --fs-h1: clamp(2.1rem, 6vw, 4.2rem);
    --fs-h2: clamp(1.5rem, 3.6vw, 2.4rem);
    --fs-h3: clamp(1.15rem, 2.4vw, 1.5rem);
    --fs-lead: clamp(1.05rem, 1.6vw, 1.3rem);
    --fs-body: 1rem;
    --fs-label: 0.74rem;

    --gutter: clamp(20px, 5vw, 64px);
    --maxw: 1320px;

    --font-display: "Anton", "Arial Narrow", sans-serif;
    --font-body: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  }

  /* Junkyard Butcher is a committed dark-canvas punk-flyer identity —
     one visual world by design, painted explicitly on every host theme. */

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
  }

  body{
    margin:0;
    background:var(--ink);
    color:var(--bone);
    font-family:var(--font-body);
    font-size:var(--fs-body);
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  img{ max-width:100%; }

  a{ color:inherit; text-decoration:none; }

  ::selection{ background:var(--acid); color:var(--ink); }

  html{
    scrollbar-color:var(--iron-2) var(--ink);
    scrollbar-width:thin;
  }
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--ink); }
  ::-webkit-scrollbar-thumb{ background:var(--iron-2); border:2px solid var(--ink); }
  ::-webkit-scrollbar-thumb:hover{ background:var(--smoke); }

  /* ============ CUSTOM CURSOR + PROGRESS ============ */
  .progress-bar{
    position:fixed; top:0; left:0;
    height:2px; width:100%;
    background:var(--acid);
    transform:scaleX(0);
    transform-origin:left center;
    z-index:1001;
    pointer-events:none;
  }
  .cursor-dot, .cursor-ring{
    position:fixed; top:0; left:0;
    border-radius:50%;
    pointer-events:none;
    z-index:1000;
    transform:translate(-50%,-50%);
  }
  .cursor-dot{
    width:6px; height:6px;
    background:var(--acid);
  }
  .cursor-ring{
    width:34px; height:34px;
    border:1px solid var(--line-strong);
    transition:width .2s ease, height .2s ease, border-color .2s ease, background-color .2s ease;
  }
  .cursor-ring.is-active{
    width:64px; height:64px;
    border-color:var(--acid);
  }
  html.has-custom-cursor body{ cursor:none; }
  html.has-custom-cursor a,
  html.has-custom-cursor button{ cursor:none; }
  html.has-custom-cursor input,
  html.has-custom-cursor textarea{ cursor:text; }

  /* ============ SLUG LABELS ============ */
  .slug{
    position:fixed;
    top:50%;
    writing-mode:vertical-rl;
    font-family:var(--font-mono);
    font-size:0.64rem;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--smoke);
    opacity:0.6;
    z-index:40;
    pointer-events:none;
  }
  .slug-left{ left:12px; transform:translateY(-50%) rotate(180deg); }
  .slug-right{ right:12px; transform:translateY(-50%); }
  @media (max-width:980px){ .slug{ display:none; } }

  /* ============ FILM REEL DIVIDER ============ */
  .cutline{
    height:15px;
    position:relative;
    background-color:var(--iron-2);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='15'%3E%3Crect x='9' y='3.5' width='10' height='8' rx='2' fill='%230c0c0a'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-position:left center;
    border-top:1px solid var(--line-strong);
    border-bottom:1px solid var(--line-strong);
    overflow:hidden;
  }
  .cutline::after{
    content:"";
    position:absolute; inset:0;
    opacity:0.3;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    pointer-events:none;
  }

  h1,h2,h3,p{ margin:0; text-wrap:balance; }

  .wrap{
    max-width:var(--maxw);
    margin-inline:auto;
    padding-inline:var(--gutter);
  }

  .eyebrow{
    font-family:var(--font-mono);
    font-size:var(--fs-label);
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--acid);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:7px; height:7px;
    background:var(--rust);
    display:inline-block;
    flex:none;
  }

  /* ============ GRAIN OVERLAY ============ */
  .grain{
    position:fixed; inset:0;
    pointer-events:none;
    z-index:999;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ============ NAV ============ */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(12,12,10,0.86);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav{
    display:flex; align-items:center; justify-content:space-between;
    padding-block:16px;
  }
  .nav-mark{
    font-family:var(--font-display);
    font-size:1.3rem;
    letter-spacing:0.02em;
    text-transform:uppercase;
    display:flex; align-items:center; gap:10px;
  }
  .jb-mark{ width:1.15em; height:1.15em; flex:none; color:var(--bone); }
  .nav-links{
    display:flex; gap:clamp(14px,2.4vw,32px);
    font-family:var(--font-mono);
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
  }
  .nav-links a{
    padding-bottom:3px;
    border-bottom:1px solid transparent;
    transition:border-color .15s, color .15s;
  }
  .nav-links a:hover, .nav-links a:focus-visible{
    color:var(--acid);
    border-color:var(--acid);
    outline:none;
  }
  .nav-toggle{
    display:none;
    align-items:center; gap:8px;
    background:none;
    border:1px solid var(--line-strong);
    color:var(--bone);
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    padding:9px 14px;
    cursor:pointer;
  }
  .nav-toggle:hover, .nav-toggle:focus-visible{ border-color:var(--acid); color:var(--acid); outline:none; }
  @media (max-width:760px){
    .nav-toggle{ display:inline-flex; }
    .nav-mark{ font-size:1.05rem; }
    .nav > .link-cta.quiet{ display:none; }
    .nav-links{
      display:none;
      position:absolute; top:100%; left:0; right:0;
      flex-direction:column; gap:0;
      background:rgba(12,12,10,0.98);
      border-bottom:1px solid var(--line);
      padding:4px var(--gutter) 18px;
    }
    .nav-links.is-open{ display:flex; }
    .nav-links a{
      padding-block:14px;
      border-bottom:1px solid var(--line);
    }
  }

  /* ============ GHOST LINKS (no filled buttons anywhere) ============ */
  .link-cta{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:none;
    border:none;
    padding:0 0 4px;
    margin:0;
    font-family:var(--font-mono);
    font-size:0.82rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--bone);
    cursor:pointer;
  }
  .link-cta::after{
    content:"";
    position:absolute;
    left:0; right:100%;
    bottom:0;
    height:1px;
    background:currentColor;
    transition:right .25s cubic-bezier(.2,.8,.2,1);
  }
  .link-cta:hover, .link-cta:focus-visible{ color:var(--acid); outline:none; }
  .link-cta:hover::after, .link-cta:focus-visible::after{ right:0; }
  .link-cta.primary{ color:var(--acid); }
  .link-cta.quiet{ font-size:0.78rem; letter-spacing:0.06em; }

  /* ============ SECTION SHELL ============ */
  section{ padding-block:clamp(64px,10vw,120px); }
  .section-title{
    font-family:var(--font-display);
    font-size:var(--fs-h1);
    text-transform:uppercase;
    line-height:0.95;
    margin-top:14px;
  }
  .section-title::after{
    content:"";
    display:block;
    width:56px;
    height:3px;
    background:var(--rust);
    margin-top:20px;
  }

  /* ============ FOOTER ============ */
  footer{
    border-top:1px solid var(--line);
    padding-block:36px;
  }
  .foot-grid{
    display:flex; flex-wrap:wrap;
    justify-content:space-between;
    gap:20px;
    align-items:center;
  }
  .foot-mark{
    font-family:var(--font-display);
    font-size:1rem;
    text-transform:uppercase;
    letter-spacing:0.02em;
    display:flex; align-items:center; gap:8px;
  }
  .foot-links{
    display:flex; flex-wrap:wrap; gap:20px;
    font-family:var(--font-mono);
    font-size:0.72rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--smoke);
  }
  .foot-links a:hover, .foot-links a:focus-visible{ color:var(--acid); outline:none; }
  .foot-copy{
    font-family:var(--font-mono);
    font-size:0.7rem;
    color:var(--smoke);
  }

  /* ===================================================================
     TEXTURE — the two grain layers and the mono rule. Extracted from
     index.html so every page wears the same skin instead of drifting.
     =================================================================== */

  /* ============ GRAIN OVERLAY ============ */
  .grain{
    position:fixed; inset:0;
    pointer-events:none;
    z-index:999;
    opacity:0.05;
    mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  /* ============ FILM GRAIN ============ */
  #grit{
    position:fixed; inset:0; z-index:200; pointer-events:none;
    opacity:0.40; mix-blend-mode:overlay;
    background-size:180px 180px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  }

  /* ============ MONO UNTIL ENGAGED ============
     Stills rest desaturated and colour on hover; that is the whole
     visual signature of the site, and philosophy.html was the one page
     not wearing it. Page-specific image wrappers join by adding their
     selector here, not by re-declaring the filter locally. */
  .work-frame img,
  .collage-tile img,
  .founder-frame img,
  .byline-frame img,
  .essay-pull-img img{
    filter:grayscale(1) contrast(1.06);
    transition:filter .5s ease;
  }
  @media (hover:hover){
    .essay-pull-img:hover img{ filter:none; }
  }
  .lightbox-media img,
  .lightbox-media video{ filter:none !important; }