/* The workbench: a light linen bench holding thirteen project objects.
   Objects are real links; their art is decorative SVG coloured by family tokens. */

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.bench-section { padding: clamp(12px, 2vw, 24px) 0 clamp(56px, 7vw, 96px); }
.bench-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px clamp(24px, 5vw, 64px); align-items: start; margin-bottom: 22px; }
.bench-head h2 { font: 700 var(--text-2xl)/1.05 var(--serif); letter-spacing: -.03em; margin-top: 10px; }
.bench-head-side { display: grid; gap: 14px; justify-items: start; }
.bench-intro { color: var(--ink-2); font-size: var(--text-l); line-height: 1.5; max-width: 46ch; }

.console-key { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px 6px 6px; border: 1px solid var(--line-strong); border-radius: 12px; background: linear-gradient(var(--porcelain), #f1ebe0); box-shadow: 0 3px 0 var(--bench-edge), 0 6px 14px -8px rgb(70 52 28 / 40%); font-weight: 600; font-size: var(--text-s); color: var(--ink); transition: transform .15s var(--ease), box-shadow .15s; }
.console-key:hover { transform: translateY(-1px); }
.console-key:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--bench-edge); }
.key-cap { display: grid; place-items: center; width: 38px; height: 34px; border-radius: 8px; background: var(--paper-deep); border: 1px solid var(--line-strong); font: 700 var(--text-s)/1 var(--mono); color: var(--ink); }

/* Bench surface */
.bench { position: relative; padding: clamp(18px, 3vw, 34px) clamp(14px, 2.6vw, 32px) 0; border-radius: 22px 22px 10px 10px; background:
    radial-gradient(1200px 400px at 30% 0%, rgb(255 255 255 / 55%), transparent 70%),
    repeating-linear-gradient(90deg, rgb(120 96 60 / 3.5%) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, #efe7d8, var(--linen));
  border: 1px solid #d8ccb7;
  box-shadow: inset 0 2px 0 rgb(255 255 255 / 70%), 0 9px 0 var(--bench-edge), 0 11px 0 #c2b59d, 0 30px 46px -26px rgb(60 44 22 / 50%); }
.screw { position: absolute; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbfbfa, #bfc5c9 70%); border: 1px solid #a9a395; }
.screw::after { content: ""; position: absolute; inset: 5px 2px; background: #8f8a7c; border-radius: 1px; transform: rotate(35deg); }
.screw-tl { left: 14px; } .screw-tr { right: 14px; }

.bench-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); margin: 0; padding: 0; list-style: none; }
.slot { min-width: 0; display: flex; }
.slot-hero { grid-column: span 2; grid-row: span 2; }

/* Each slot is a recessed compartment in the tray; the object sits inside it. */
.object { position: relative; display: flex; flex-direction: column; width: 100%; padding: 12px 12px 14px; border-radius: 16px; color: var(--ink); text-decoration: none;
  background: linear-gradient(180deg, #e3d8c4, #ebe2d2 38%, #efe8dc);
  box-shadow: inset 0 3px 7px rgb(90 70 40 / 20%), inset 0 -1px 0 rgb(255 255 255 / 70%), 0 1px 0 rgb(255 255 255 / 80%); }
.object:hover, .object:focus-visible { text-decoration: none; }
.object:focus-visible { outline-offset: 4px; }

.object-art { display: grid; place-items: center; height: 150px; margin: 2px 0 10px; filter: drop-shadow(0 7px 8px rgb(70 52 28 / 18%)); transition: transform .3s var(--ease), filter .3s var(--ease); }
.object-art svg { width: 100%; height: 100%; }
.object:hover .object-art, .object:focus-visible .object-art { transform: translateY(-6px) rotate(-1.2deg); filter: drop-shadow(0 14px 12px rgb(70 52 28 / 22%)); }
.object:active .object-art { transform: translateY(-2px); }

/* Label tag: a porcelain plate with a family-coloured indicator light */
.object-label { display: grid; gap: 3px; padding: 10px 12px 11px; border-radius: 10px; background: linear-gradient(180deg, #fffefb, #f6f1e8); border: 1px solid rgb(120 100 70 / 22%); box-shadow: 0 2px 0 rgb(120 100 70 / 14%); transition: border-color .2s; }
.object:hover .object-label, .object:focus-visible .object-label { border-color: color-mix(in srgb, var(--fam-ink) 45%, transparent); }
.object-no { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--text-xs)/1.4 var(--mono); letter-spacing: .1em; color: var(--fam-ink); }
.object-no::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--fam-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fam-accent) 28%, transparent), inset 0 -1px 1px rgb(0 0 0 / 18%); }
.object-title { font: 700 1.0625rem/1.25 var(--serif); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.object-sub { display: block; margin-top: 2px; font: 600 var(--text-s)/1.35 var(--sans); letter-spacing: 0; color: var(--fam-ink); }
.object-hint { font-size: var(--text-s); line-height: 1.45; color: var(--ink-2); }
.object-status { justify-self: start; margin-top: 4px; font: 600 var(--text-xs)/1.4 var(--mono); letter-spacing: .03em; color: var(--fam-ink); }

/* Smaller drawer compartments for 06–13 */
.slot-small .object-art { height: 112px; margin-bottom: 8px; }
.slot-small .object-title { font-size: 1rem; }

/* The centrepiece */
.slot-hero .object { padding: 16px 16px 18px; }
.slot-hero .object-label { order: -1; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: baseline; padding: 14px 18px; }
.slot-hero .object-no { grid-row: span 3; font-size: var(--text-s); }
.slot-hero .object-title { font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem); line-height: 1.12; }
.slot-hero .object-hint { font-size: var(--text-m); }
.slot-hero .object-status { grid-column: 2; }
.slot-hero .object-art { flex: 1 1 auto; height: auto; min-height: 300px; margin: 14px 0 0; }
.slot-hero .object-art svg { max-height: 460px; }

.bench-lip { display: flex; justify-content: space-between; gap: 16px; margin: clamp(18px, 2.5vw, 28px) calc(-1 * clamp(14px, 2.6vw, 32px)) 0; padding: 12px clamp(18px, 3vw, 36px); border-top: 1px solid #d3c6b0; font: 600 var(--text-xs)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.bench-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 30px; font-size: var(--text-s); color: var(--ink-2); }
.bench-foot a { font-weight: 600; display: inline-flex; min-height: 44px; align-items: center; }
.synthetic-note { display: flex; align-items: baseline; gap: 10px; max-width: 70ch; line-height: 1.55; }
.synthetic-dot { flex: none; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); transform: translateY(-1px); }

/* SVG material classes. .ln comes first so a fill class on the same element wins. */
.art .ln { stroke: #a99d88; stroke-width: 1.2; fill: none; }
.art .sk { stroke: var(--fam-ink); fill: none; }
.art .por { fill: url(#g-porcelain); }
.art .alu { fill: url(#g-alu); }
.art .scr { fill: url(#g-screen); }
.art .pap { fill: url(#g-paper); }
.art .t { fill: var(--fam-tint); }
.art .k { fill: var(--fam-ink); }
.art .a { fill: var(--fam-accent); }
.art .d { fill: var(--fam-deep); }
.art .wht { fill: #fff; }
.art .k-none { fill: none; }
.art .o2 { opacity: .2; } .art .o4 { opacity: .4; } .art .o7 { opacity: .7; } .art .o9 { opacity: .9; }
.art .vent { fill: none; stroke: #9aa2a8; stroke-width: 1; stroke-dasharray: 2 3; }
.art .led-ok { fill: #3f9a6c; }
.art .led-amb { fill: #d99a2b; }
.art .led-off { fill: #c6cbcf; }
.art .cable { fill: none; stroke: var(--fam-ink); stroke-width: 4; stroke-linecap: round; opacity: .55; }
.art .cable-a { fill: none; stroke: var(--fam-accent); stroke-width: 5; stroke-linecap: round; }
.art .cable-k { fill: none; stroke: var(--fam-ink); stroke-width: 5; stroke-linecap: round; opacity: .75; }
.art .a-stroke { fill: none; stroke: var(--fam-accent); stroke-width: 5; }
.art .stroke-white { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art .ring { fill: none; stroke: url(#g-alu-h); stroke-width: 5; }
.art .glass { opacity: .78; stroke: var(--fam-ink); stroke-opacity: .25; }
.art .glass-lens { fill: rgb(255 255 255 / 55%); stroke: var(--fam-ink); stroke-width: 4; }
.art .leaf { fill: none; stroke: var(--fam-ink); stroke-width: 2.2; stroke-linecap: round; }

/* Responsive bench */
@media (max-width: 1100px) {
  .bench-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .slot-hero { grid-column: span 3; grid-row: auto; }
  .slot-hero .object { flex-direction: row; align-items: center; gap: 22px; }
  .slot-hero .object-label { order: 0; flex: 1 1 52%; }
  .slot-hero .object-art { order: -1; flex: 0 0 42%; min-height: 0; height: 280px; margin: 0; }
}
@media (max-width: 760px) {
  .bench-head { grid-template-columns: minmax(0, 1fr); }
  .bench-grid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .slot-hero { grid-column: auto; }
  .object, .slot-hero .object { flex-direction: row; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; }
  .object-art, .slot-small .object-art { flex: 0 0 92px; height: 78px; margin: 0; }
  .slot-hero .object-art { flex: 0 0 120px; height: 150px; }
  .object-label, .slot-hero .object-label { flex: 1 1 auto; min-width: 0; padding: 9px 11px; }
  .slot-hero .object-label { grid-template-columns: minmax(0, 1fr); }
  .slot-hero .object-no { grid-row: auto; }
  .slot-hero .object-status { grid-column: auto; }
  .slot-hero .object-title { font-size: 1.25rem; }
  .object-title, .slot-small .object-title { font-size: 1rem; }
  .object-hint { display: none; }
  .slot-hero .object-hint { display: block; font-size: var(--text-s); }
  .object-sub { font-size: var(--text-xs); }
  .object-label { gap: 2px; }
  .bench-lip span:last-child { display: none; }
}

@media (max-width: 400px) {
  /* very narrow phones: the centrepiece stacks so its long title fits */
  .slot-hero .object { flex-direction: column; align-items: stretch; }
  .slot-hero .object-art { flex: none; width: 100%; height: 150px; }
  .object-title { overflow-wrap: break-word; hyphens: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .object:hover .object-art, .object:focus-visible .object-art, .console-key:hover { transform: none; }
}
@media (forced-colors: active) {
  .object, .object-label { border: 2px solid CanvasText; }
}