@import url('https://fonts.googleapis.com/css2?family=UnifrakturCook:wght@700&display=swap');
/* =========================================================================
   THE SPECIMEN SYSTEM
   One source of truth for the document style. Every page that adopts it links
   this file instead of hand-rolling another copy — the same lesson footer.js
   learned after the site grew six different footers.

   The idea: Insanity Wolf is not a shop, it is a record. Every knife is held,
   inspected, photographed and written up exactly as it is. So the site is an
   archival document, on cold grey stock, and the photography is tipped into it.

   Three voices, and they never trade jobs:
     Archivo        the system  — labels, measures, identifiers, controls
     Spectral       the maker   — the letter, the prose, the human
     IBM Plex Mono  the data    — lots, specs, counts, status

   Colour is disciplined: ink on stock, and gold reserved for exactly two
   meanings — what is certified, and what is for sale. Nothing else is gold.
   ========================================================================= */

:root{
  /* --- Ground ------------------------------------------------------------ */
  --stock:#ffffff;        /* the page. white, printed, nothing on it that is not evidence */
  --stock-2:#f5f5f2;      /* a lighter sheet: rows, wells, tipped-in plates */
  --plate:#0c0d0e;        /* the dark signature: photographic sections */
  --ink:#15171a;
  --ink-2:#45483f;

  /* Contrast is measured, not eyeballed. Both of these carry 11-12px text, so
     they must clear 4.5:1 on the stock — not the 3:1 large-text allowance. */
  --muted:#6b6e66;        /* 5.19:1 on white */
  --gold:#856520;         /* 5.41:1 on white */
  --gold-lit:#c9a13f;     /* 7.40:1 on --ink. the dark-ground gold */

  --rule:#dfdfd9;
  --rule-2:#eceae5;
  --focus:#15171a;

  /* --- Voices ------------------------------------------------------------ */
  --font-system:"Archivo","Helvetica Neue",Arial,sans-serif;
  --font-voice:"Spectral",Georgia,"Times New Roman",serif;
  --font-data:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --text-micro:11px;
  --text-data:12.5px;
  --text-body:17px;
  --text-lede:clamp(19px,1.8vw,24px);
  --text-head:clamp(26px,3vw,40px);
  --text-hero:clamp(32px,4.6vw,64px);

  /* --- Measure ------------------------------------------------------------ */
  --s1:4px; --s2:8px; --s3:14px; --s4:22px; --s6:38px; --s8:64px; --s10:104px; --s12:150px;
  --radius:2px;           /* documents do not have rounded corners */

  --dur-fast:140ms; --dur:340ms; --dur-slow:900ms;
  --ease:cubic-bezier(.22,1,.36,1);

  --rail:76px;
  --gutter:clamp(20px,4vw,var(--s8));
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--stock);
  color:var(--ink);
  font-family:var(--font-voice);
  font-size:var(--text-body);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* Paper grain. It supports the document; it never announces itself. */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.26;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto}}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:var(--radius)}
img{max-width:100%}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--stock);
  padding:12px 18px;font-family:var(--font-system);font-size:13px}
.skip:focus{left:var(--s4);top:var(--s4)}

/* --- The voices, as utilities ------------------------------------------- */
.lab{font-family:var(--font-system);font-weight:600;font-size:var(--text-micro);line-height:1.3;
  letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.dat{font-family:var(--font-data);font-size:var(--text-data);line-height:1.55;letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.voice{font-family:var(--font-voice)}

h1,h2,h3{font-family:var(--font-system);letter-spacing:-.02em;margin:0}
h1{font-weight:700;font-size:var(--text-hero);line-height:1;text-transform:uppercase;letter-spacing:-.03em}
h2{font-weight:700;font-size:var(--text-head);line-height:1.06;text-transform:uppercase}
h3{font-weight:600;font-size:18px;line-height:1.3}

/* --- Layout -------------------------------------------------------------- */
.wrap{margin-left:var(--rail)}
.pad{padding-left:var(--gutter);padding-right:var(--gutter)}
.hold{max-width:1240px;margin:0 auto}

/* =============================== MASTHEAD ================================
   A document is headed, not navigated by a floating pill. Rendered by
   /assets/masthead.js so there is one nav, not forty.
   ========================================================================= */
.masthead{position:sticky;top:0;z-index:70;display:flex;align-items:center;justify-content:space-between;
  gap:var(--s4);background:var(--stock);border-bottom:1px solid var(--rule);
  padding:var(--s3) var(--gutter)}
.masthead__mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--ink);z-index:2;text-decoration:none}
.mk__txt{display:block;font-family:'UnifrakturCook','Old English Text MT',serif;font-weight:700;font-size:19px;line-height:.84;color:var(--ink);text-align:center}
.masthead__menu{display:contents}
.masthead__burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:38px;height:38px;padding:8px;background:none;border:0;cursor:pointer;z-index:3}
.masthead__burger span{display:block;width:100%;height:1.5px;background:var(--ink);transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.masthead ul{display:flex;gap:var(--s4);list-style:none;margin:0;padding:0;flex-wrap:wrap}
.masthead a{display:inline-block;padding:10px 0;border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.masthead ul a:hover{border-color:var(--ink);color:var(--ink)}
.masthead a[aria-current="page"]{color:var(--gold);border-color:var(--gold)}
.masthead__util{display:flex;align-items:center;gap:var(--s4)}
.masthead__ctl{background:none;border:0;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--muted);cursor:pointer;padding:10px 0;border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.masthead__ctl:hover{border-color:var(--ink);color:var(--ink)}
.masthead__bag{display:inline-flex!important;align-items:center;padding:6px 0!important;border-bottom:0!important;color:var(--muted)}
.masthead__bag:hover{color:var(--ink)}
.masthead__bag svg{display:block}
@media(max-width:720px){
  .masthead{justify-content:flex-end;gap:var(--s2)}
  .masthead__mark{z-index:80}
  .mk__txt{font-size:16px}
  .masthead__burger{display:flex;z-index:80}
  .masthead__menu{display:none;position:fixed;inset:0;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--stock);overflow-y:auto;
    padding:88px var(--gutter) var(--s8)}
  .masthead.open .masthead__menu{display:flex}
  .masthead__menu ul{flex-direction:column;align-items:stretch;gap:0;width:100%;flex-wrap:nowrap}
  .masthead__menu ul li{width:100%;border-bottom:1px solid var(--rule)}
  .masthead__menu ul a{display:block;width:100%;padding:var(--s4) 0;font-size:16px}
  .masthead__util{width:100%;gap:var(--s6);padding-top:var(--s5);justify-content:flex-start}
  .masthead__util a,.masthead__util .masthead__ctl{font-size:13px}
  .masthead.open .masthead__burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .masthead.open .masthead__burger span:nth-child(2){opacity:0}
  .masthead.open .masthead__burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
}

/* ========================= SIGNATURE: THE CALIPER RAIL ====================
   A measuring scale down the left edge with real ticks, and a caliper jaw that
   tracks the reader. The instrument the subject is actually measured with,
   doing real wayfinding. Driven by /assets/rail.js.
   ========================================================================= */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;
  border-right:1px solid var(--rule);background:var(--stock);padding:var(--s4) 0}
.rail__scale{position:absolute;inset:0;
  background-image:repeating-linear-gradient(to bottom,var(--rule-2) 0 1px,transparent 1px 14px);
  -webkit-mask-image:linear-gradient(to right,#000 0 14px,transparent 14px);
          mask-image:linear-gradient(to right,#000 0 14px,transparent 14px);opacity:.85}
.rail__scale::after{content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(to bottom,var(--rule) 0 1px,transparent 1px 70px);
  -webkit-mask-image:linear-gradient(to right,#000 0 26px,transparent 26px);
          mask-image:linear-gradient(to right,#000 0 26px,transparent 26px)}
.rail__wolf{position:relative;z-index:2;display:block;margin:0 auto;width:max-content;
  font-family:var(--font-system);font-weight:700;font-size:13px;letter-spacing:.06em;
  writing-mode:vertical-rl;transform:rotate(180deg);color:var(--ink)}
.rail__jaw{position:absolute;left:0;width:var(--rail);height:2px;background:var(--gold);
  transition:top var(--dur) var(--ease)}
.rail__jaw::before,.rail__jaw::after{content:"";position:absolute;left:0;width:14px;height:9px;background:var(--gold)}
.rail__jaw::before{top:-9px}
.rail__jaw::after{top:2px}
.rail__mark{position:absolute;left:var(--rail);transform:translateY(-50%);writing-mode:vertical-rl;
  padding-left:var(--s3);white-space:nowrap;font-family:var(--font-data);font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);transition:top var(--dur) var(--ease)}
.rail__id{position:absolute;left:50%;bottom:var(--s4);transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-family:var(--font-data);font-size:11px;letter-spacing:.26em;color:var(--muted)}
@media(max-width:960px){
  .rail{display:none}
  :root{--rail:0px}
}

/* --- Controls ------------------------------------------------------------
   Every state, because a control with no focus ring or no loading state is
   not finished.
   ------------------------------------------------------------------------ */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:46px;padding:12px 24px;border-radius:var(--radius);cursor:pointer;
  font-family:var(--font-system);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  border:1px solid var(--ink);background:var(--ink);color:var(--stock);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease)}
.btn:hover{background:transparent;color:var(--ink)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--stock)}
.btn[aria-disabled="true"],.btn:disabled{opacity:.42;pointer-events:none}
.btn[data-loading="true"]{color:transparent}
.btn[data-loading="true"]::after{content:"";position:absolute;width:14px;height:14px;
  border:2px solid var(--stock);border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.link{color:var(--gold);border-bottom:1px solid var(--gold);transition:background var(--dur-fast) var(--ease)}
.link:hover{background:rgba(112,86,23,.12)}

.field{width:100%;min-height:46px;padding:11px 14px;background:var(--stock-2);color:var(--ink);
  border:1px solid var(--rule);border-radius:var(--radius);
  font-family:var(--font-data);font-size:var(--text-data)}
.field::placeholder{color:var(--muted)}
.field:focus{outline:2px solid var(--focus);outline-offset:2px;border-color:var(--ink)}

/* --- Tables: a register is a table, so it is rendered as one -------------- */
.tab{width:100%;border-collapse:collapse}
.tab caption{text-align:left;padding-bottom:var(--s3);border-bottom:1px solid var(--ink)}
.tab td,.tab th{padding:9px 0;border-bottom:1px solid var(--rule-2);vertical-align:top;text-align:left}
.tab td:first-child,.tab th:first-child{color:var(--muted)}
.tab td:last-child{text-align:right}

/* --- The photograph, tipped in ------------------------------------------
   NOT a Polaroid: no white mat, no drop shadow, no floating card. The
   photographs' ground is 240 against a 255 page, so they sit a shade below the
   paper — close enough to read as printed on it, and they cannot be lifted to
   pure white without brightening the knife itself, which the listing promise
   forbids. So they are printed true, bounded by a hairline.
   ------------------------------------------------------------------------ */
.tip{display:block;border:0;background:none}
.tip--cut{border:0;background:none}     /* transparent cut-outs need no sheet */
.tipcap{display:flex;justify-content:space-between;gap:var(--s4);
  margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--rule)}

/* --- The dark signature: photographic sections --------------------------- */
.dark{background:var(--plate);color:var(--stock);
  margin-left:calc(-1 * var(--rail));padding-left:var(--rail)}
.dark h1,.dark h2,.dark h3{color:var(--stock)}
.dark .lab{color:#8f9089}
.dark .link{color:var(--gold-lit);border-color:var(--gold-lit)}
.dark .link:hover{background:rgba(201,161,63,.16)}
.dark .btn{border-color:var(--stock);background:var(--stock);color:var(--ink)}
.dark .btn:hover{background:transparent;color:var(--stock)}
.dark .btn[data-loading="true"]::after{border-color:var(--ink);border-top-color:transparent}
.dark .tab td,.dark .tab th{border-color:rgba(215,216,208,.2)}
.dark .tab td:first-child{color:#8f9089}

/* --- Status: gold means exactly two things ------------------------------- */
.status--sale{color:var(--gold);font-family:var(--font-data);font-size:var(--text-data);font-weight:500}
.status--held{color:var(--muted);font-family:var(--font-data);font-size:var(--text-data)}
.stamp{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--gold);color:var(--gold);
  padding:5px 10px;border-radius:var(--radius);font-family:var(--font-data);font-size:var(--text-data)}
.stamp .dot{width:5px;height:5px;border-radius:50%;background:var(--gold)}

/* --- Failure is designed, never silent ----------------------------------- */
.notice{padding:var(--s3) var(--s4);border:1px solid var(--gold);border-radius:var(--radius);
  color:var(--ink);background:rgba(112,86,23,.09);display:none}
.notice[data-shown="true"]{display:block}
.dark .notice{border-color:var(--gold-lit);color:#e3d5b0;background:rgba(201,161,63,.09)}

/* --- Entrance: one orchestrated sequence, not scattered twitching --------- */
.rise{opacity:0;transform:translateY(18px)}
.rise.in{opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease),transform var(--dur-slow) var(--ease)}

/* --- Colophon ------------------------------------------------------------ */
.colophon{border-top:1px solid var(--rule);padding:var(--s6) var(--gutter) var(--s8);
  display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;align-items:baseline}
.colophon nav{display:flex;gap:var(--s4);flex-wrap:wrap}
.colophon nav a{padding:6px 0;border-bottom:1px solid transparent;
  transition:border-color var(--dur-fast) var(--ease)}
.colophon nav a:hover{border-color:var(--ink)}

/* Cart lives in the masthead on pages that have one. */
.masthead__cart{display:flex;align-items:center;gap:var(--s3);
  font-family:var(--font-system);font-weight:600;font-size:var(--text-micro);
  letter-spacing:.19em;text-transform:uppercase}
.masthead__cart a{padding:10px 0;border-bottom:1px solid transparent}
.masthead__cart a:hover{border-color:var(--ink)}

/* =============================== THE FOOTER ==============================
   One big functional footer on every page (rendered by specimen.js into
   <footer data-colophon>). Brand, a working newsletter, the real nav, contact.
   ========================================================================= */
.foot{border-top:1px solid var(--ink);margin-top:var(--s12);
  padding:var(--s10) var(--gutter) var(--s8)}
.foot__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8);
  padding-bottom:var(--s8);border-bottom:1px solid var(--rule)}
.foot__mark{display:inline-block;color:var(--ink);text-decoration:none}
.foot__mark .mk__txt{font-size:clamp(30px,3.4vw,42px);line-height:.82}
.foot__tag{font-family:var(--font-voice);font-style:italic;font-size:var(--text-lede);
  color:var(--ink-2);margin:var(--s3) 0 0;max-width:30ch}
.foot__news{max-width:420px;justify-self:end;width:100%}
.foot__sub{font-family:var(--font-voice);font-size:14.5px;line-height:1.55;color:var(--ink-2);
  margin:var(--s2) 0 var(--s3);max-width:44ch}
.foot__row{display:flex;gap:var(--s2)}
.foot__row .field{flex:1;min-width:0}
.foot__row .btn{flex:none}
.foot__status{font-family:var(--font-data);font-size:var(--text-data);margin:var(--s3) 0 0;min-height:18px}
.foot__status.ok{color:var(--gold)}
.foot__status.err{color:var(--ink);font-weight:500}

.foot__cols{display:flex;gap:var(--s10);flex-wrap:wrap;padding:var(--s8) 0}
.foot__col .lab{margin:0 0 var(--s3)}
.foot__col ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.foot__col a{font-family:var(--font-voice);font-size:15px;color:var(--ink-2);
  border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease)}
.foot__col a:hover{color:var(--ink);border-color:var(--ink)}

.foot__bottom{display:flex;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;
  padding-top:var(--s6);border-top:1px solid var(--rule);color:var(--muted)}

@media(max-width:760px){
  .foot{margin-top:var(--s10)}
  .foot__top{grid-template-columns:1fr;gap:var(--s6)}
  .foot__news{justify-self:start}
  .foot__cols{gap:var(--s6) var(--s8)}
}