/* ===========================================================================
   contraptions.css — the workshop page.

   A shadow board: the wall above a bench where every tool has its outline
   painted on, so you can see at a glance what is hanging there and what is
   missing. Each thing built gets a bay with its silhouette behind it and a
   stamped plate underneath. An unbuilt one is an empty outline, which is an
   honest thing for a workshop wall to have.

   This is the quietest page on the site and is meant to be: the drawing that
   opens it is deliberately small on the board. Pegboard, not slate, not paper.
   =========================================================================== */

:root {
  --peg:       #1a1f1c;
  --peg-lift:  #232925;
  --hole:      #0c0f0d;
  --steel:     #9aa39c;
  --steel-dim: #6f7872;
  --plate:     #2a302c;
  --stamp:     #cfd6cf;
  --brass:     #c9a349;   /* 7.0:1 on a bay */
  --faint-on-bay: #808781;  /* 4.5:1 on a bay — the floor for the plates */
}

body { background: #0c0f0d; }

.shop {
  min-block-size: 100svh;
  padding-block: clamp(1.4rem, 4vw, 2.6rem) 0;
  /* pegboard: a square grid of holes, drawn rather than tiled as an image */
  background-color: var(--peg);
  background-image:
    radial-gradient(60% 40% at 50% 0%, rgb(201 163 73 / .05), transparent 70%),
    radial-gradient(circle at 50% 50%, var(--hole) 1.4px, transparent 1.6px);
  background-size: auto, 26px 26px;
  background-position: 0 0, 0 0;
}
.bench { max-inline-size: 72rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2.4rem); }

.hook {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  font-family: var(--sans); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
}
.hook a { color: var(--chalk-faint); text-decoration: none; }
.hook a:hover { color: var(--chalk-soft); }

/* ============================================================== the heading
   Stencilled, the way a workshop labels its own wall. */
.head { padding-block: clamp(2.4rem, 7vw, 4rem) clamp(1.6rem, 4vw, 2.4rem); }
.head h1 {
  margin: 0; font-family: var(--sans); font-weight: 300;
  font-size: clamp(2.1rem, 7vw, 3.6rem); letter-spacing: .1em; text-transform: uppercase;
  color: var(--stamp); line-height: 1.05;
}
.head .rule {
  block-size: 3px; inline-size: 100%; margin-block: 1.3rem;
  background: repeating-linear-gradient(90deg, var(--steel-dim) 0 14px, transparent 14px 22px);
  opacity: .55;
}
.head p {
  margin: 0; max-inline-size: 56ch; color: var(--chalk-soft);
  font-size: clamp(1rem, .5vw + .9rem, 1.14rem); line-height: 1.66;
}
.head p b { font-weight: 400; color: var(--chalk); }

/* ================================================================ the bays */
.wall {
  list-style: none; margin: clamp(2.2rem, 6vw, 3.6rem) 0 0; padding: 0;
  display: grid; gap: clamp(1.2rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.bay {
  position: relative; overflow: clip;
  display: flex; flex-direction: column;
  border: 1px solid rgb(255 255 255 / .07);
  border-radius: 3px;
  background: linear-gradient(168deg, var(--peg-lift), rgb(12 15 13 / .78));
  padding: clamp(1.4rem, 3.4vw, 2.1rem);
  transition: border-color .35s var(--ease-out), transform .35s var(--ease-out);
}
.bay:hover, .bay:focus-within { border-color: rgb(201 163 73 / .5); transform: translateY(-3px); }

/* the painted silhouette behind the tool */
.bay .shadow {
  position: absolute; inset-block-start: -8%; inset-inline-end: -12%;
  inline-size: 62%; aspect-ratio: 1; pointer-events: none;
  color: rgb(255 255 255 / .045);
}
.bay .shadow svg { inline-size: 100%; block-size: 100%; }
.bay:hover .shadow, .bay:focus-within .shadow { color: rgb(201 163 73 / .1); }

.bay > * { position: relative; }

.bay .kind {
  font-family: var(--sans); font-size: .6rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--brass);
}
.bay h2 { margin: .7rem 0 .1rem; font-weight: 400; font-size: 1.55rem; line-height: 1.15; color: var(--chalk); }
.bay h2 a { text-decoration: none; }
.bay h2 a::after { content: ''; position: absolute; inset: 0; }   /* the whole bay is the hit area */
.bay:hover h2, .bay:focus-within h2 { color: var(--brass); }
.bay .fa {
  margin: .1rem 0 0; unicode-bidi: isolate; color: var(--chalk-faint); font-size: .95rem;
  font-family: 'Vazirmatn', 'Noto Naskh Arabic', 'Times New Roman', serif;
}
.bay .body {
  margin: 1rem 0 0; color: var(--chalk-soft); font-size: .99rem; line-height: 1.62; flex: 1;
}
.bay .body b { font-weight: 400; color: var(--chalk); }

/* the stamped plate screwed on under each tool */
.bay .plate {
  margin-block-start: 1.5rem; padding-block-start: .9rem;
  border-block-start: 1px solid rgb(255 255 255 / .085);
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  font-family: var(--sans); font-size: .63rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--faint-on-bay);
}
.bay .plate .addr { color: var(--steel); }

/* an outline with nothing hanging in it */
.bay.empty {
  border-style: dashed; border-color: rgb(255 255 255 / .11);
  background: transparent;
}
.bay.empty:hover { transform: none; border-color: rgb(255 255 255 / .16); }
.bay.empty .kind { color: var(--steel-dim); }
.bay.empty h2 { color: var(--chalk-faint); }
.bay.empty .body { color: var(--chalk-faint); }

/* ================================================================== footer */
.down {
  margin-block: clamp(3rem, 8vw, 4.6rem) 0;
  padding-block: clamp(2rem, 5vw, 3rem) clamp(3.4rem, 9vw, 5.5rem);
  border-block-start: 1px solid rgb(255 255 255 / .085);
}
.down p { margin: 0 0 1.6rem; max-inline-size: 62ch; color: var(--chalk-soft); line-height: 1.68; }
.down p a { color: var(--brass); text-decoration-color: rgb(201 163 73 / .4); text-underline-offset: .2em; }
.down p a:hover { text-decoration-color: currentColor; }
.down .exits { display: flex; flex-wrap: wrap; gap: .9rem 1.4rem;
  font-family: var(--sans); font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; }
.down .exits a {
  color: var(--chalk-soft); text-decoration: none;
  border: 1px solid var(--chalk-hair); border-radius: 2px; padding: .62em 1.1em;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.down .exits a:hover { color: var(--chalk); border-color: var(--chalk-soft); }

@media (prefers-reduced-motion: reduce) {
  .bay, .bay:hover { transform: none; transition: border-color .35s var(--ease-out); }
}