/* One production route, with a shared workbench rather than repeated cards. */
.production-entry { margin-top: 35px; }
.production-intro { margin-top: 24px; max-width: 660px; font-size: 13px; line-height: 1.8; color: var(--muted); }
.production-explorer { margin-top: 45px; }
.production-track { display: grid; grid-template-columns: repeat(8,minmax(0,1fr)); position: relative; }
.production-track::before { content: ''; position: absolute; top: 19px; left: 6.25%; right: 6.25%; height: 1px; background: var(--line); }
.production-track li { min-width: 0; position: relative; }
.production-track button { width: 100%; border: 0; background: none; padding: 0 8px 28px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 15px; opacity: .5; transition: color 200ms,opacity 200ms; }
.production-track button:hover { opacity: .85; }
.production-track button[aria-pressed="true"] { opacity: 1; color: var(--gold); }
.production-number { position: relative; background: var(--bg); border: 1px solid var(--line); border-radius: 50%; display: grid; place-items: center; width: 38px; height: 38px; font-size: 10px; }
[aria-pressed="true"] > .production-number { border-color: var(--gold); background: var(--card); }
.production-track svg { width: 72px; height: 58px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.diagram-guide { stroke-dasharray: 3 4; opacity: .65; }
.production-track strong { font-weight: 500; font-size: 12px; white-space: nowrap; }
.production-track strong span { font-size: 10px; }
.production-detail { padding: 38px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.15fr 1fr; column-gap: 64px; align-items: start; }
.production-table { min-width: 0; background: linear-gradient(130deg,#231b13,#130f0b 72%); border: 1px solid var(--line); padding: 20px 26px; }
.production-table > span { display: block; font-size: 8px; letter-spacing: .12em; color: var(--bronze); }
.production-table > span:last-child { font-size: 10px; letter-spacing: 0; color: var(--muted); margin-top: 4px; }
.production-table svg { display: block; width: 100%; height: auto; max-height: 270px; margin-block: 14px; stroke: var(--text); stroke-width: 1.5; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.production-table .paper { fill: #c2a884; fill-opacity: .13; stroke: var(--gold); }
.production-table .cloth { fill: #675c51; fill-opacity: .18; stroke: var(--text); }
.production-table .accent { stroke: var(--gold); }
.production-table .thread { stroke: #9DCBEC; }
.production-table .guide { stroke: var(--bronze); stroke-dasharray: 3 5; }
.production-table .solid { fill: var(--gold); stroke: none; }
.production-copy .eyebrow { font-size: 9px; }
.production-copy h3 { font-family: var(--heading); font-size: clamp(24px,2.4vw,34px); margin-top: 10px; letter-spacing: -.04em; }
.production-copy > p:not(.eyebrow) { font-size: 13px; line-height: 1.8; margin-top: 15px; color: var(--muted); }
.production-copy dl { margin: 24px 0 0; display: grid; gap: 18px; }
.production-copy dt { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--bronze); margin-bottom: 6px; }
.production-copy dd { margin: 0; font-size: 12px; line-height: 1.75; }
.production-methods { grid-column: 1/-1; border-top: 1px solid var(--line); margin-top: 30px; padding-top: 25px; }
.production-methods > p { font-size: 12px; color: var(--muted); margin-bottom: 18px; }
.production-methods > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 24px; }
.production-methods button { text-align: left; background: none; border: 0; border-left: 1px solid var(--bronze); padding: 5px 0 5px 15px; color: var(--text); }
.production-methods button:hover { border-color: var(--gold); }
.production-methods strong { display: block; color: var(--gold); font-size: 12px; font-weight: 500; }
.production-methods span { display: block; margin-top: 7px; font-size: 11px; line-height: 1.7; color: var(--muted); }
@media (max-width: 1100px) and (min-width: 761px) {
  .production-track strong { font-size: 10px; }
  .production-track svg { width: 58px; }
  .production-detail { column-gap: 30px; }
}
@media (max-width: 760px) {
  .production-intro { font-size: 12px; }
  .production-explorer { display: grid; grid-template-columns: 88px minmax(0,1fr); column-gap: 18px; margin-top: 30px; align-items: start; }
  .production-track { display: flex; flex-direction: column; }
  .production-track::before { top: 14px; bottom: 45px; left: 13px; right: auto; width: 1px; height: auto; }
  .production-track button { display: grid; grid-template-columns: 28px 38px; align-items: center; gap: 8px; padding: 0 0 28px; }
  .production-track .production-number { width: 28px; height: 28px; font-size: 8px; }
  .production-track svg { width: 38px; height: 32px; margin: 0; }
  .production-track strong { font-size: 10px; grid-column: 1/-1; text-align: left; }
  .production-detail { display: flex; flex-direction: column; gap: 22px; border-top: 0; padding: 0; position: sticky; top: 18px; min-width: 0; }
  .production-table { width: 100%; padding: 14px 12px; }
  .production-table > span { font-size: 6px; letter-spacing: .06em; }
  .production-table > span:last-child { font-size: 9px; line-height: 1.6; }
  .production-table svg { margin-block: 12px; }
  .production-copy h3 { font-size: 22px; overflow-wrap: anywhere; }
  .production-copy .eyebrow { font-size: 7px; }
  .production-copy > p:not(.eyebrow) { font-size: 11px; margin-top: 10px; }
  .production-copy dl { gap: 15px; margin-top: 18px; }
  .production-copy dt { font-size: 8px; }
  .production-copy dd { font-size: 11px; }
  .production-methods { margin: 0; padding-top: 18px; }
  .production-methods > p { font-size: 10px; line-height: 1.7; }
  .production-methods > div { grid-template-columns: 1fr; gap: 16px; }
  .production-methods strong { font-size: 11px; }
  .production-methods span { font-size: 10px; }
}
@media (max-width: 360px) {
  .production-explorer { grid-template-columns: 72px minmax(0,1fr); gap: 12px; }
  .production-copy h3 { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .production-track button { transition: none; }
}