/* ============================================================
   WITNESS MARK TOOL CO. — design system v1 "Workshop Industrial"
   Palette + motifs carried forward from the 2026-08 temp page.
   Theme tokens live in :root — a future theme swaps these only.
   ============================================================ */

:root{
  --ink:#131110;            /* machinist charcoal */
  --ink-2:#1c1916;
  --ink-3:#26221d;
  --paper:#ece5d8;          /* shop-drawing paper */
  --paper-dim:#b9b0a0;
  --brass:#c9a35b;
  --brass-deep:#9a7a3a;
  --walnut:#4a3222;
  --line:rgba(201,163,91,.35);
  --line-soft:rgba(201,163,91,.18);

  --font-display:'Bebas Neue',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --font-body:'Inter',system-ui,sans-serif;

  --w-page:1080px;
  --w-text:720px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}

body{
  font-family:var(--font-body);
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(236,229,216,.025) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(236,229,216,.025) 47px 48px),
    radial-gradient(120% 90% at 50% 0%, var(--ink-2) 0%, var(--ink) 60%);
  background-attachment:fixed;
  color:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
  display:flex; flex-direction:column;
}

img,svg{max-width:100%;display:block}
a{color:var(--brass);text-decoration:none}
a:hover{color:var(--paper)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.mono{font-family:var(--font-mono)}

/* ---------- corner brackets: the machinist drawing frame ---------- */
.frame{position:fixed; inset:14px; pointer-events:none; z-index:60}
.frame span{position:absolute; width:26px; height:26px; border:1px solid var(--line)}
.frame .tl{top:0;left:0;border-right:0;border-bottom:0}
.frame .tr{top:0;right:0;border-left:0;border-bottom:0}
.frame .bl{bottom:0;left:0;border-right:0;border-top:0}
.frame .br{bottom:0;right:0;border-left:0;border-top:0}

/* ---------- header ---------- */
header.site{
  position:sticky; top:0; z-index:50;
  background:rgba(19,17,16,.92);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft);
}
.site-bar{
  width:min(var(--w-page),94vw); margin:0 auto;
  display:flex; align-items:center; gap:18px;
  padding:12px 0;
}
.brand{display:flex; align-items:center; gap:12px; color:var(--paper)}
.brand:hover{color:var(--paper)}
.brand .mark{width:38px;height:38px;flex-shrink:0}
.brand .word{
  font-family:var(--font-display);
  font-size:22px; letter-spacing:.08em; line-height:1; white-space:nowrap;
}
.brand .word small{
  display:block; font-size:10px; letter-spacing:.42em; color:var(--brass);
  margin-top:2px; font-family:var(--font-mono);
}

nav.site-nav{margin-left:auto}
nav.site-nav ul{list-style:none; display:flex; flex-wrap:wrap; gap:2px 18px; justify-content:flex-end}
nav.site-nav a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.18em;
  color:var(--paper-dim); text-transform:uppercase;
  padding:6px 2px; border-bottom:1px solid transparent; white-space:nowrap;
}
nav.site-nav a:hover{color:var(--paper)}
nav.site-nav a[aria-current="page"]{color:var(--brass); border-bottom-color:var(--brass)}

.nav-toggle{
  display:none; margin-left:auto;
  background:none; border:1px solid var(--line); color:var(--brass);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.24em;
  padding:8px 14px; cursor:pointer;
}

@media (max-width:900px){
  .nav-toggle{display:block}
  nav.site-nav{
    display:none; position:absolute; left:0; right:0; top:100%;
    background:rgba(19,17,16,.98); border-bottom:1px solid var(--line);
    padding:10px 4vw 18px; margin-left:0;
  }
  nav.site-nav.open{display:block}
  nav.site-nav ul{flex-direction:column; gap:0}
  nav.site-nav a{display:block; padding:11px 2px; font-size:13px}
}

/* ---------- layout ---------- */
main{flex:1; width:min(var(--w-page),94vw); margin:0 auto; padding:0 0 70px}
.text-col{max-width:var(--w-text)}
section{margin-top:70px}
section.tight{margin-top:44px}

/* ---------- hero ---------- */
.hero{padding:76px 0 10px; text-align:center}
.hero .logo{width:110px;height:110px;margin:0 auto 24px}
h1{
  font-family:var(--font-display);
  font-size:clamp(46px,8.5vw,84px);
  letter-spacing:.06em; line-height:.95; color:var(--paper); font-weight:400;
}
h1 .co{display:block;font-size:.42em;letter-spacing:.34em;color:var(--brass);margin-top:6px}
.hero .tag{
  font-size:clamp(14px,2.4vw,18px); letter-spacing:.42em; color:var(--brass);
  text-transform:uppercase; margin-top:4px;
}
.hero .lede{
  max-width:620px; margin:30px auto 0;
  font-size:clamp(16px,2.3vw,19px); line-height:1.7; color:var(--paper);
}
.hero .lede strong{color:var(--brass); font-weight:500}

/* page hero (subpages): left-aligned, smaller */
.page-hero{padding:58px 0 6px}
.page-hero h1{font-size:clamp(38px,6.5vw,64px)}
.page-hero .lede{margin:18px 0 0; max-width:var(--w-text); font-size:clamp(15px,2.2vw,18px); color:var(--paper-dim)}
.page-hero .lede strong{color:var(--paper); font-weight:500}

/* ---------- the scribed line ---------- */
.scribe{width:min(420px,70vw); height:14px; margin:26px auto 20px; position:relative}
.scribe.left{margin-left:0}
.scribe::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  border-top:1px solid var(--brass); transform:scaleX(0); transform-origin:left;
  animation:scribe 1.4s .3s cubic-bezier(.65,0,.3,1) forwards;
}
.scribe::after{content:""; position:absolute; left:50%; top:0; bottom:0; border-left:1px solid var(--line)}
@keyframes scribe{to{transform:scaleX(1)}}

/* ---------- section headings ---------- */
.kicker{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.3em;
  color:var(--brass); text-transform:uppercase; margin-bottom:10px;
}
.kicker::before{content:"— "}
h2{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,4.4vw,42px); letter-spacing:.05em; line-height:1.05;
  color:var(--paper); margin-bottom:18px;
}
h3{
  font-family:var(--font-body); font-weight:600; font-size:17px;
  color:var(--paper); margin:26px 0 8px;
}
p{color:var(--paper-dim); margin-bottom:14px; max-width:var(--w-text)}
p strong,li strong{color:var(--paper); font-weight:500}
p.bright{color:var(--paper)}
ul.plain{list-style:none; max-width:var(--w-text)}
ul.plain li{padding:6px 0 6px 2px; color:var(--paper-dim)}
ul.plain li::before{content:"— "; color:var(--brass)}

/* ---------- plate: framed label box ---------- */
.plate{
  border:1px solid var(--line); background:rgba(28,25,22,.55);
  padding:22px 28px; position:relative; max-width:var(--w-text);
}
.plate[data-label]::before{
  content:attr(data-label); position:absolute; top:-9px; left:18px;
  background:var(--ink); padding:0 10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.28em; color:var(--brass);
  text-transform:uppercase;
}
.plate p:last-child{margin-bottom:0}
.plate.center{margin-left:auto; margin-right:auto; text-align:center}
.plate .big{
  font-family:var(--font-mono); color:var(--paper); font-size:15px; letter-spacing:.04em;
}

/* ---------- cards ---------- */
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{
  border:1px solid var(--line-soft); background:rgba(28,25,22,.55);
  padding:24px 22px 22px; position:relative;
  transition:border-color .25s;
  display:flex; flex-direction:column;
}
.card:hover{border-color:var(--line)}
a.card{color:inherit}
.card .c-kicker{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.26em;
  color:var(--brass); text-transform:uppercase; margin-bottom:12px;
}
.card h3{margin:0 0 8px; font-size:18px}
.card p{font-size:14.5px; line-height:1.6; margin-bottom:0}
.card .c-foot{
  margin-top:16px; padding-top:12px; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  color:var(--paper-dim); text-transform:uppercase;
}
.card:hover .c-foot{color:var(--brass)}
.card .c-art{margin:-24px -22px 18px; border-bottom:1px solid var(--line-soft)}
.card .c-art svg{width:100%; height:auto; display:block}

/* status chip on cards */
.chip{
  display:inline-block; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--brass);
  border:1px solid var(--line); padding:3px 9px; margin-bottom:12px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-block; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.24em; text-transform:uppercase; color:var(--brass);
  border:1px solid var(--brass); padding:13px 26px;
  transition:background .2s,color .2s;
}
.btn:hover{background:var(--brass); color:var(--ink)}
.btn.ghost{border-color:var(--line); color:var(--paper-dim)}
.btn.ghost:hover{background:none; border-color:var(--brass); color:var(--brass)}
.btn-row{display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:34px}
.btn-row.left{justify-content:flex-start}

/* ---------- feed items ---------- */
.feed{max-width:var(--w-text)}
.feed-item{
  border-top:1px solid var(--line-soft); padding:22px 0 20px;
}
.feed-item:last-child{border-bottom:1px solid var(--line-soft)}
.feed-item .f-meta{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em;
  color:var(--brass); text-transform:uppercase; margin-bottom:8px;
}
.feed-item h3{margin:0 0 6px; font-size:17px}
.feed-item p{font-size:14.5px; margin-bottom:8px}
.feed-item .f-src{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--paper-dim);
}
.feed-item .f-src a{color:var(--paper-dim); border-bottom:1px dotted var(--line)}
.feed-item .f-src a:hover{color:var(--brass)}

/* ---------- spec / info table ---------- */
table.spec{border-collapse:collapse; width:100%; max-width:var(--w-text); font-size:14.5px}
table.spec th,table.spec td{
  text-align:left; padding:10px 14px; border:1px solid var(--line-soft);
  color:var(--paper-dim); vertical-align:top;
}
table.spec th{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass); font-weight:500;
}

/* ---------- divider rule ---------- */
.rule{border:0; border-top:1px solid var(--line-soft); margin:56px 0}

/* ---------- grain band + footer ---------- */
.grain{
  width:100%; height:96px; flex-shrink:0; position:relative;
  background:var(--walnut); overflow:hidden;
  border-top:2px solid var(--brass-deep);
}
.grain svg.wood{position:absolute; inset:0; width:100%; height:100%; opacity:.8}
.grain::after{content:""; position:absolute; inset:0; box-shadow:inset 0 14px 34px rgba(0,0,0,.55), inset 0 -14px 34px rgba(0,0,0,.55)}
.grain .plate-line{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:rgba(19,17,16,.82); border:1px solid var(--line);
  padding:10px 22px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.3em; color:var(--paper); white-space:nowrap;
}
.grain .plate-line b{color:var(--brass); font-weight:500}

footer.site{
  width:100%; background:#0d0b0a; padding:30px 4vw 34px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em;
  color:#6f675c; line-height:2;
}
.foot-cols{
  width:min(var(--w-page),94vw); margin:0 auto;
  display:flex; flex-wrap:wrap; gap:18px 60px; justify-content:space-between;
}
footer.site a{color:#8d8374}
footer.site a:hover{color:var(--brass)}
footer.site .legal{margin-top:14px; width:100%; color:#575047}

/* ---------- motion & small screens ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scribe::before{animation:none;transform:none}
  .card{transition:none}
}
@media (max-width:480px){
  .hero{padding-top:54px}
  .hero .logo{width:88px;height:88px}
  .plate{padding:18px 16px}
  .grain .plate-line{white-space:normal; text-align:center; width:86vw}
  .frame{inset:8px}
  .frame span{width:18px;height:18px}
}