/* ==========================================================================
   GENERATED FILE -- do not edit.

   Assembled by webbench\stylesheet\build.py from src\*.css, in filename
   order. Edit a module there and run the build; publish.ps1 runs it first,
   before any page, so every page ships linking this exact content.

   modules: 00-import.css, 10-tokens.css, 20-base.css, 30-texture.css, 40-layout.css, 50-hero.css, 60-section-heads.css, 70-cards.css, 75-pipeline.css, 80-hero-facts.css, 90-about.css, 95-demo.css, 99-misc.css
   ========================================================================== */

/* ==========================================================================
   jordansboxofxyz - shared theme
   Qi. Black lacquer and graphite, brushed silver for the words, a thread of
   gold for what matters, and a deep blue that the metals sit against. Yin and
   yang: every warm mark has a cool one beside it. Built light for old laptops.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500&family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;500;700&display=swap');

:root{
  /* lacquer / graphite */
  --ink:        #07080b;
  --slate-900:  #0e1115;
  --slate-850:  #13171c;
  --slate-800:  #191e24;
  --slate-700:  #232a32;
  --slate-600:  #36404b;
  --slate-line: #283039;

  /* the gold thread (kept under the old names so every page follows) */
  --wood-900:   #241c0f;
  --wood-800:   #372b15;
  --wood-700:   #53421f;
  --wood-600:   #745c2b;
  --wood-500:   #9a7b38;
  --wood-400:   #bf9c4a;
  --wood-300:   #d8b968;
  --wood-200:   #ecd692;

  /* the deep water the metals sit against */
  --blue-900:   #0b1730;
  --blue-800:   #10234a;
  --blue-700:   #17346a;
  --blue-500:   #2a5cb0;
  --blue-300:   #6b98e6;
  --blue-200:   #9dbdf3;

  /* silver on lacquer */
  --paper:      #e8eaee;
  --paper-dim:  #b7bdc7;
  --paper-faint:#7f8894;

  /* one seal of colour, used sparingly */
  --hanko:      #b23a2c;
  --hanko-dim:  #82302a;

  --radius: 3px;
  --font-display: 'Cormorant Garamond', 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  --font-body: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }

body{
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 1.02rem;
  line-height: 1.72;
  letter-spacing: .004em;
  /* Grayscale antialiasing, softer edges, no RGB fringing on the stems.
     Both of these are macOS-only -- the platform quietly no-ops them on
     Windows, which is why turning them off and on changes nothing here and
     everything on a Mac. The Windows lever is one line down. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "kern", "liga", "palt";
}

/* Display type: a hair of tracking, weight held back so the strokes stay
   clean at every size, and a brushed sheen on the largest words.

   geometricPrecision is the Windows half of the smoothing answer. The default
   grid-fits glyphs to the pixel lattice, and on a high-contrast serif that
   snapping is exactly what squares off the corners of a curve. This asks for
   exact outlines and subpixel positioning instead: rounder, a shade softer.
   Display sizes only -- at body sizes that grid-fitting still earns its keep,
   and taking it away there reads as mush rather than as smooth. */
h1, h2, h3, h4, .brand{
  letter-spacing: .012em;
  font-feature-settings: "kern", "liga", "dlig";
  text-rendering: geometricPrecision;
}
.metal{
  background: linear-gradient(105deg, var(--paper) 0%, #f7f3e6 30%, var(--wood-200) 52%, var(--paper) 78%, var(--paper-dim) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
code, pre, kbd{ font-variant-ligatures: none; }

img{ max-width: 100%; display:block; }
a{ color: inherit; }

/* The charcoal ground.
   There used to be a 1px repeating stripe in here, 1px on and 2px off at
   100deg. That is a dither pattern sitting behind every word on the page, and
   a 1px comb never survives a fractional device pixel ratio: at 125% or 150%
   scaling it resamples into a moire that beats against the glyph edges. The
   type was never the problem -- the ground under it was, and text on it reads
   speckled and cornery. The depth here comes from the two radial washes
   instead; broad gradients have no high-frequency detail to alias. */
.grain-bg{
  position: relative;
  background:
    radial-gradient(ellipse at 18% -12%, rgba(42,92,176,0.16), transparent 55%),
    radial-gradient(ellipse at 92% 112%, rgba(191,156,74,0.10), transparent 55%),
    var(--ink);
}

/* Brushed metal: one gold hairline at the top edge, the faintest blue in the
   shadow. Its 1px horizontal comb is gone for the same reason as above -- the
   tip jar, the cards and the pipeline plaques all carry text, and that stripe
   was directly behind it. The sheen does the work now. */
.wood-panel{
  background:
    linear-gradient(90deg, rgba(216,185,104,0.10), transparent 30%, transparent 70%, rgba(107,152,230,0.08)),
    linear-gradient(165deg, var(--slate-700), var(--slate-800) 55%, var(--blue-900));
  border: 1px solid rgba(0,0,0,0.45);
  box-shadow: inset 0 1px 0 rgba(216,185,104,0.28), inset 0 -1px 0 rgba(0,0,0,0.5);
}

/* ---------- layout shell ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
  background: linear-gradient(var(--slate-900), rgba(20,24,26,0.94));
  border-bottom: 1px solid var(--slate-line);
  backdrop-filter: blur(6px);
}

.brand{
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: .02em;
  text-decoration: none;
  color: var(--paper);
}
.brand .kanji{
  color: var(--wood-300);
  font-size: 1.5rem;
}
.brand .sub{
  font-family: var(--font-body);
  font-size: .68rem;
  color: var(--paper-faint);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}

.site-nav{
  display: flex;
  gap: clamp(1rem, 3vw, 2.2rem);
  font-size: .92rem;
}
.site-nav a{
  text-decoration: none;
  color: var(--paper-dim);
  position: relative;
  padding-bottom: 2px;
  transition: color .2s ease;
}
.site-nav a:hover,
.site-nav a:focus-visible{ color: var(--paper); }
.site-nav a::after{
  content:"";
  position:absolute; left:0; right:100%; bottom:-2px;
  height:1px; background: linear-gradient(90deg, var(--wood-300), var(--blue-300));
  transition: right .25s ease;
}
.site-nav a:hover::after{ right:0; }

main{ min-height: 60vh; }

.site-footer{
  border-top: 1px solid var(--slate-line);
  padding: 2.4rem clamp(1.25rem, 4vw, 3rem) 3rem;
  color: var(--paper-faint);
  font-size: .85rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
}
.site-footer a{ color: var(--wood-300); text-decoration: none; }
.site-footer a:hover{ text-decoration: underline; }

/* ---------- hero ---------- */
.hero{
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 12vw, 7rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem, 8vw, 5rem);
  border-bottom: 1px solid var(--slate-line);
}
.hero-canvas-wrap{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .55;
}
#hero-canvas{ width: 100%; height: 100%; display:block; }
.hero-fade{
  position: absolute; inset:0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,13,14,0.25) 0%, rgba(11,13,14,0.55) 55%, var(--ink) 100%);
  pointer-events: none;
}
.hero-content{ position: relative; z-index: 2; max-width: 46rem; }
/* the yin-yang: one disc, gold turning into blue, barely there */
.hero::after{
  content:""; position:absolute; z-index:1; pointer-events:none;
  right: clamp(-6rem, -4vw, 2rem); top: 50%; width: clamp(18rem, 36vw, 30rem); aspect-ratio: 1;
  transform: translateY(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 25%, var(--ink) 0 7%, transparent 7.5%),
    radial-gradient(circle at 50% 75%, var(--wood-300) 0 7%, transparent 7.5%),
    conic-gradient(from 90deg, var(--wood-400) 0 50%, var(--blue-700) 50% 100%);
  opacity: .09;
  mask: radial-gradient(circle, black 60%, transparent 71%);
  -webkit-mask: radial-gradient(circle, black 60%, transparent 71%);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:.6rem;
  font-size: .75rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--wood-300); margin-bottom: 1.1rem;
}
.eyebrow::before{
  content:""; width: 1.6rem; height:1px; background: var(--wood-300);
}
.hero h1{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.3rem, 5.8vw, 3.9rem);
  line-height: 1.12;
  margin: 0 0 1.1rem;
}
.hero h1 em{
  font-style: italic;
  font-weight: 500;
  color: var(--blue-200);
}
.hero p{
  color: var(--paper-dim);
  font-size: 1.05rem;
  max-width: 38rem;
  margin: 0 0 2rem;
}
.hero-note{
  color: var(--paper-faint);
  font-size: .82rem;
}

.btn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1.5rem;
  background: linear-gradient(180deg, var(--wood-300), var(--wood-500));
  color: #14120c;
  border: 1px solid var(--wood-200);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .03em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 8px 22px -14px rgba(216,185,104,0.7);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:hover{ filter: brightness(1.08); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 10px 26px -12px rgba(216,185,104,0.8); }
.btn.ghost{
  background: transparent;
  border-color: var(--slate-600);
  color: var(--paper-dim);
  box-shadow: none;
}
.btn.ghost:hover{ border-color: var(--blue-300); color: var(--blue-200); background: rgba(42,92,176,0.10); filter: none; }

/* ---------- section headers ---------- */
.section{
  padding: clamp(3rem, 7vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}
.section-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--slate-line);
  padding-bottom: 1.1rem;
}
.section-head h2{
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0;
  font-weight: 700;
}
.section-head .count{
  color: var(--paper-faint);
  font-size: .85rem;
}

/* ---------- gallery cards (wooden plaques) ---------- */
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 1.4rem;
}
.card{
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--paper);
  border: 1px solid var(--slate-line);
  background: var(--slate-850);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover{
  transform: translateY(-3px);
  border-color: var(--blue-500);
  box-shadow: 0 14px 30px -18px rgba(0,0,0,0.8), 0 0 0 1px rgba(107,152,230,0.12);
}
.card-media{
  height: 150px;
  position: relative;
}
.card-media canvas{ width:100%; height:100%; display:block; }
.card-body{ padding: 1.1rem 1.25rem 1.3rem; }

/* The workbench card is the shop's headline item, and it sits alone in its
   grid. "span 2" is clamped to the single available track on a narrow screen,
   so this widens it where there is room and changes nothing where there is not.
   Above 760px it turns side-by-side, which keeps it from becoming a tall
   column of text on a desktop. */
.gallery .card.feature{ grid-column: span 2; }
.gallery .card.feature .card-media{ height: 190px; }
@media (min-width: 760px){
  .gallery .card.feature{
    display: grid;
    grid-template-columns: minmax(200px, 260px) 1fr;
    align-items: stretch;
  }
  .gallery .card.feature .card-media{ height: 100%; min-height: 210px; }
  .gallery .card.feature .card-body{ padding: 1.4rem 1.6rem 1.5rem; align-self: center; }
}
.card-tag{
  display:inline-block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--wood-300);
  border: 1px solid var(--wood-600);
  padding: .18rem .55rem;
  border-radius: 999px;
  margin-bottom: .7rem;
}
.card h3{
  font-family: var(--font-display);
  margin: 0 0 .4rem;
  font-size: 1.15rem;
}
.card p{
  margin: 0;
  color: var(--paper-dim);
  font-size: .88rem;
}
.card-foot{
  display:flex; justify-content:space-between; align-items:center;
  margin-top: .9rem; font-size: .78rem; color: var(--paper-faint);
}
.status-dot{
  display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--wood-300); margin-right:.4rem;
}
.status-dot.gpu{ background: var(--blue-300); }

/* ---------- "made with sniper" ----------
   The palette keeps one seal of colour for things that deserve emphasis, and
   this is what it was being saved for: the pieces on the shelf that were not
   just built here, but built THROUGH the tool this shop makes. It marks a
   provenance, so it is a seal rather than a label. */
.card-tag.made{
  color: var(--hanko);
  border-color: var(--hanko-dim);
  background: rgba(156,59,46,0.08);
}
.made-note{
  display:flex; align-items:center; gap:.5rem;
  margin-top: .8rem; padding-top: .7rem;
  border-top: 1px dashed var(--slate-line);
  font-size: .76rem; color: var(--paper-faint);
}
.made-note .seal{
  flex: none;
  width: 1.35rem; height: 1.35rem; line-height: 1.3rem; text-align: center;
  font-family: var(--font-display); font-size: .78rem;
  color: var(--hanko); border: 1px solid var(--hanko-dim); border-radius: 2px;
  background: rgba(156,59,46,0.07);
}

/* ---------- the pipeline strip ----------
   Four plaques and three arrows. It exists because "a tool that writes files"
   is abstract until you can see that the thing two sections down was made by
   it, so the last plaque is deliberately the playable one. */
.pipeline{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  align-items: stretch;
}
@media (max-width: 860px){ .pipeline{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px){ .pipeline{ grid-template-columns: 1fr; } }

.pipe-step{
  position: relative;
  border: 1px solid var(--slate-line);
  background: var(--slate-850);
  border-radius: var(--radius);
  padding: 1rem 1.1rem 1.1rem;
}
.pipe-step .jp{
  font-family: var(--font-display);
  font-size: .8rem; color: var(--wood-300); letter-spacing: .06em;
}
.pipe-step h4{
  margin: .35rem 0 .3rem; font-size: .95rem; font-weight: 600;
  font-family: var(--font-display);
}
.pipe-step p{ margin: 0; font-size: .82rem; color: var(--paper-dim); line-height: 1.6; }
.pipe-step.end{ border-color: var(--wood-600); }
.pipe-step.end .jp{ color: var(--wood-200); }

/* The connecting mark. Hidden where the grid wraps, because an arrow pointing
   at the edge of a column is worse than no arrow. */
.pipe-step + .pipe-step::before{
  content: "→";
  position: absolute; left: -.42rem; top: 50%; transform: translateY(-50%);
  color: var(--slate-600); font-size: .8rem; line-height: 1;
}
@media (max-width: 860px){ .pipe-step + .pipe-step::before{ display:none; } }

/* ---------- hero facts ---------- */
.hero-stats{
  display: flex; flex-wrap: wrap; gap: .5rem .6rem;
  margin: 1.6rem 0 0; padding: 0; list-style: none;
}
.hero-stats li{
  font-size: .76rem; color: var(--paper-faint);
  border: 1px solid var(--slate-line); border-radius: var(--radius);
  padding: .3rem .7rem; background: rgba(20,24,26,0.5);
}
.hero-stats b{ color: var(--wood-200); font-weight: 600; }

/* placeholder "coming soon" card */
.card.placeholder{
  display:flex; align-items:center; justify-content:center;
  min-height: 240px;
  border-style: dashed;
  color: var(--paper-faint);
  font-size: .85rem;
  text-align: center;
  padding: 1.5rem;
}

/* ---------- about / low-end-laptop pitch ---------- */
.about{
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 800px){ .about{ grid-template-columns: 1fr; } }
.about p{ color: var(--paper-dim); }
.about h2{ margin-top:0; }
.stat-plate{
  border: 1px solid var(--slate-line);
  background: var(--slate-850);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
}
.stat-plate ul{ margin:0; padding-left: 1.1rem; color: var(--paper-dim); font-size: .92rem; }
.stat-plate li{ margin-bottom: .5rem; }
.stat-plate li:last-child{ margin-bottom:0; }

/* ---------- the tip jar ----------
   Everything in the shop is free and the source ships in the zip, so this is
   the one place gratitude has anywhere to go. A plaque, a line, a button. */
.tipjar{
  border-radius: var(--radius);
  padding: 1.5rem clamp(1.2rem, 3vw, 2rem);
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem 2rem; flex-wrap: wrap;
}
.tipjar-text{ max-width: 46rem; }
.tipjar .jp{
  font-family: var(--font-display); font-size: .8rem; letter-spacing: .12em;
  color: var(--wood-300);
}
.tipjar h3{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin: .3rem 0 .5rem; line-height: 1.25;
}
.tipjar p{ margin: 0; color: var(--paper-dim); font-size: .9rem; }
.tipjar .btn{ flex: none; white-space: nowrap; }

/* ---------- demo page chrome ---------- */
.demo-body{ margin:0; background: var(--ink); }
.demo-stage{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
}
#demo-canvas{ width:100%; height:100%; display:block; }

.demo-hud{
  position: fixed;
  z-index: 10;
  left: 0; right: 0; top: 0;
  display:flex; align-items:center; justify-content:space-between;
  padding: 1rem clamp(1rem,3vw,2rem);
  background: linear-gradient(rgba(11,13,14,0.85), transparent);
  pointer-events: none;
}
.demo-hud > *{ pointer-events: auto; }
.demo-back{
  display:inline-flex; align-items:center; gap:.5rem;
  text-decoration:none; color: var(--paper-dim);
  font-size: .85rem;
  border: 1px solid var(--slate-line);
  background: rgba(20,24,26,0.6);
  padding: .5rem .9rem;
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
.demo-back:hover{ color: var(--wood-200); border-color: var(--wood-500); }
.demo-title{
  font-family: var(--font-display);
  font-size: .95rem;
  color: var(--paper);
  background: rgba(20,24,26,0.6);
  border: 1px solid var(--slate-line);
  padding: .5rem .9rem;
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}
.demo-hint{
  position: fixed; z-index: 10; left:0; right:0; bottom: 1.2rem;
  text-align:center; font-size: .78rem; color: var(--paper-faint);
  pointer-events:none;
}
.demo-fallback-note{
  position: fixed; z-index: 11; left: 50%; top: 4.6rem; transform: translateX(-50%);
  max-width: min(90vw, 26rem);
  background: rgba(20,24,26,0.9);
  border: 1px solid var(--wood-600);
  color: var(--paper-dim);
  font-size: .8rem;
  padding: .7rem 1rem;
  border-radius: var(--radius);
  display:none;
}
.demo-fallback-note.show{ display:block; }

/* ---------- misc ---------- */
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--slate-line) 20%, var(--slate-line) 80%, transparent);
  margin: 0;
}
.visually-hidden{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip: rect(0 0 0 0); white-space:nowrap;
}

@media (max-width: 640px){
  .site-nav{ gap: 1rem; font-size: .82rem; }
  .about{ gap: 1.6rem; }
}