/* ═══════════════════════════════════════════════════════
   10-MACHINE — חדר המכונות
   Bauhaus industrial precision. 1930s Swiss machine catalog.
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500;700;900&family=Heebo:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ─── CSS VARIABLES ─── */
:root {
  --iron:        #262320;
  --iron-deep:   #1a1816;
  --steel:       #34302b;
  --steel-mid:   #3d3830;
  --brass:       #b08d3f;
  --brass-light: #c9a95a;
  --brass-dark:  #8a6b2a;
  --copper:      #a8643c;
  --cream:       #e8dfc8;
  --paper:       #e5dac4;
  --paper-dark:  #d6c9ad;
  --red:         #9c3b2c;
  --red-dark:    #7a2d1f;
  --white:       #f0ebe0;
  --text-dim:    #8a7f6a;

  --font-display: 'Rubik', sans-serif;
  --font-body:    'Heebo', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  --rivet-size: 8px;
  --border-brass: 1px solid var(--brass-dark);
  --border-steel: 1px solid rgba(176, 141, 63, 0.2);

  --shadow-plate: 0 4px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(176,141,63,0.15);
  --shadow-deep:  0 8px 40px rgba(0,0,0,0.7);
}

/* ─── RESET ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--iron-deep);
  color: var(--cream);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  direction: rtl;
  overflow-x: hidden;
  /* Subtle brushed metal texture */
  background-image:
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255,255,255,0.008) 2px,
      rgba(255,255,255,0.008) 4px
    );
}

/* ─── RIVET PATTERN ─── */
.riveted {
  position: relative;
}
.riveted::before,
.riveted::after {
  content: '';
  position: absolute;
  width: var(--rivet-size);
  height: var(--rivet-size);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
  box-shadow: 0 1px 2px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.2);
  z-index: 2;
}
.riveted::before { top: 10px; right: 10px; }
.riveted::after  { bottom: 10px; left: 10px; }

/* ─── TYPOGRAPHY ─── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--cream);
  line-height: 1.2;
}
.mono { font-family: var(--font-mono); }
a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-light); }

/* ─── SCROLLBAR ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--iron-deep); }
::-webkit-scrollbar-thumb { background: var(--brass-dark); border-radius: 3px; }

/* ═══════════════════════════════════════════════════════
   NAV HEADER
   ═══════════════════════════════════════════════════════ */
.site-nav {
  background: var(--iron-deep);
  border-bottom: 2px solid var(--brass-dark);
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}
.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 14px;
  color: var(--brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  direction: rtl;
}
.nav-links a {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--brass); }
.nav-serial {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════
   HERO — MACHINE ROOM
   ═══════════════════════════════════════════════════════ */
.hero {
  position: relative;
  background: var(--iron);
  padding: 60px 40px 0;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  border-bottom: 3px solid var(--brass-dark);
}

/* Brushed metal horizontal bands */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 39px,
    rgba(176,141,63,0.04) 39px,
    rgba(176,141,63,0.04) 40px
  );
  pointer-events: none;
}

/* Scroll-driven side gear */
.hero-scroll-gear {
  position: absolute;
  left: -80px;
  top: 50%;
  transform: translateY(-50%);
  width: 280px;
  height: 280px;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 1360px;
  margin: 0 auto;
  width: 100%;
}

/* ─── NAMEPLATE ─── */
.nameplate {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(135deg, var(--steel) 0%, var(--steel-mid) 50%, var(--steel) 100%);
  border: 2px solid var(--brass-dark);
  padding: 16px 32px;
  position: relative;
  margin-bottom: 40px;
  box-shadow: var(--shadow-plate);
}
/* Nameplate rivet corners */
.nameplate::before,
.nameplate::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
  box-shadow: 0 1px 3px rgba(0,0,0,0.6), inset 0 1px 2px rgba(255,255,255,0.2);
}
.nameplate::before { top: -5px; right: -5px; }
.nameplate::after  { bottom: -5px; left: -5px; }
.nameplate-extra-rivets {
  position: absolute;
  top: -5px; left: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.nameplate-extra-rivets-br {
  position: absolute;
  bottom: -5px; right: -5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.nameplate-text h1 {
  font-size: clamp(28px, 3.5vw, 46px);
  font-weight: 900;
  color: var(--cream);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  /* Engraved letter effect */
  -webkit-text-stroke: 0.5px rgba(176,141,63,0.4);
}
.nameplate-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

/* ─── GEAR TRAIN CONTAINER ─── */
.gear-train-container {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  overflow: hidden;
}

.scroll-side-gear {
  position: absolute;
  left: -60px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.18;
  pointer-events: none;
  flex-shrink: 0;
}

.gear-svg-assembly {
  display: block;
  width: 100%;
  max-width: 700px;
  height: auto;
  margin-left: auto;  /* push toward left in RTL flow = visual right */
}

@media (max-width: 768px) {
  .gear-svg-assembly {
    max-width: 100%;
    height: 200px;
  }
  .scroll-side-gear { display: none; }
}

/* ─── CSS GEAR ANIMATIONS ─── */
@keyframes rotCW  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes rotCCW { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }

/* Applied via JS setProperty so --dur is set correctly per element */
.gear-spin-cw  { animation: rotCW  var(--dur, 12s) linear infinite; }
.gear-spin-ccw { animation: rotCCW var(--dur, 12s) linear infinite; }

/* Named duration classes as fallback */
.dur-5  { --dur: 5s; }
.dur-7  { --dur: 7s; }
.dur-9  { --dur: 9s; }
.dur-14 { --dur: 14s; }
.dur-18 { --dur: 18s; }

@media (prefers-reduced-motion: reduce) {
  .gear-spin-cw,
  .gear-spin-ccw { animation: none !important; }
  .piston-head   { transition: none !important; }
  .conveyor-track { animation: none !important; }
  .belt-track { animation: none !important; }
}

/* ═══════════════════════════════════════════════════════
   CONVEYOR BELT TICKER
   ═══════════════════════════════════════════════════════ */
.conveyor-section {
  background: var(--iron);
  border-top: 3px solid var(--brass-dark);
  border-bottom: 3px solid var(--brass-dark);
  overflow: hidden;
  position: relative;
}

/* Belt rollers at sides */
.belt-roller {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  background: linear-gradient(90deg, var(--steel-mid), var(--iron), var(--steel-mid));
  border-right: 2px solid var(--brass-dark);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.belt-roller.right { right: 0; border-right: none; border-left: 2px solid var(--brass-dark); }
.belt-roller-bolt {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
}

.belt-label {
  position: absolute;
  right: 36px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--brass-dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  z-index: 4;
}

/* The actual ticker */
.ticker-rail {
  padding: 0 44px;
  overflow: hidden;
  direction: ltr;
}
.ticker-inner {
  display: flex;
  align-items: center;
  padding: 10px 0;
  direction: ltr;
  white-space: nowrap;
}
.ticker-track {
  display: inline-flex;
  animation: tickerScroll 45s linear infinite;
  gap: 0;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 24px;
  border-right: 1px solid rgba(176,141,63,0.3);
  direction: rtl;
}
.ticker-item:last-child { border-right: none; }
.ticker-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}
.ticker-text {
  font-size: 13px;
  color: var(--cream);
  font-family: var(--font-body);
}

/* Belt chain links — decorative bottom strip */
.belt-chain {
  height: 8px;
  background: var(--iron-deep);
  border-top: 1px solid var(--brass-dark);
  overflow: hidden;
  direction: ltr;
}
.belt-chain-track {
  display: inline-flex;
  animation: beltMove 4s linear infinite;
}
@keyframes beltMove {
  from { transform: translateX(0); }
  to   { transform: translateX(-40px); }
}
.chain-link {
  width: 20px;
  height: 8px;
  background: linear-gradient(90deg, var(--steel-mid), var(--steel), var(--steel-mid));
  border-right: 1px solid var(--brass-dark);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════
   PRESSURE GAUGE CLUSTER
   ═══════════════════════════════════════════════════════ */
.gauge-cluster {
  padding: 60px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  background: var(--iron);
  border-bottom: 2px solid var(--brass-dark);
  flex-wrap: wrap;
  position: relative;
}
.gauge-cluster::before {
  content: 'לוח מדדים — פלט יצור';
  position: absolute;
  top: 20px;
  right: 40px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass-dark);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.gauge-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.gauge-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brass-light);
  text-align: center;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.gauge-value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--cream);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   PRODUCTION ORDERS — ARTICLE CARDS
   ═══════════════════════════════════════════════════════ */
.section-header-bar {
  padding: 32px 40px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--steel);
  border-bottom: 2px solid var(--brass-dark);
}
.section-header-bar h2 {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
  display: flex;
  align-items: center;
  gap: 12px;
}
.section-header-bar .count-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--brass-dark);
  color: var(--cream);
  padding: 2px 8px;
  border-radius: 2px;
}

.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--brass-dark);
  padding: 2px;
}

/* JOB CARD */
.job-card {
  background: var(--steel);
  position: relative;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: background 0.2s;
}
.job-card:hover { background: var(--steel-mid); }

/* Four corner rivets */
.card-rivets {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.card-rivet {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
  box-shadow: 0 1px 2px rgba(0,0,0,0.5), inset 0 1px 1px rgba(255,255,255,0.15);
}
.card-rivet.tl { top: 8px; right: 8px; }
.card-rivet.tr { top: 8px; left: 8px; }
.card-rivet.bl { bottom: 8px; right: 8px; }
.card-rivet.br { bottom: 8px; left: 8px; }

.card-header {
  background: linear-gradient(180deg, var(--iron) 0%, var(--steel) 100%);
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(176,141,63,0.25);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.card-serial {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass-dark);
  letter-spacing: 0.08em;
}
.card-category-stamp {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--copper);
  border: 1px solid var(--copper);
  padding: 2px 6px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 1px;
}

.card-body {
  padding: 16px;
}

/* Small corner gear on card */
.card-gear-wrap {
  position: absolute;
  top: 12px;
  left: 40px;
  width: 28px;
  height: 28px;
  opacity: 0.35;
  transition: opacity 0.2s, transform 0s;
  pointer-events: none;
}
.job-card:hover .card-gear-wrap {
  opacity: 0.8;
  animation: rotCW 2s linear infinite;
}

.card-headline {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.3;
  margin-bottom: 10px;
}

/* Paper inlay for excerpt */
.card-paper-inlay {
  background: var(--paper);
  color: var(--iron);
  padding: 10px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  line-height: 1.5;
  border: 1px solid var(--paper-dark);
  margin-bottom: 12px;
  position: relative;
}
.card-paper-inlay::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 3px;
  background: var(--copper);
}

.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 14px;
}
.card-author {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}
.card-date {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
}

/* Mini gauge on card */
.mini-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.mini-gauge-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════
   PRODUCTION LINE — NEWS ITEMS
   ═══════════════════════════════════════════════════════ */
.production-line {
  background: var(--iron-deep);
  padding: 40px;
}

.news-unit {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 20px;
  background: var(--steel);
  border: 1px solid rgba(176,141,63,0.2);
  border-right: 3px solid var(--brass-dark);
  margin-bottom: 2px;
  transition: background 0.15s;
  position: relative;
}
.news-unit:hover { background: var(--steel-mid); }

/* Punch-clock stamp for time */
.news-timestamp {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--brass);
  flex-shrink: 0;
  width: 52px;
  text-align: center;
  border: 1px solid var(--brass-dark);
  padding: 4px 4px;
  background: var(--iron);
}

.news-number {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  flex-shrink: 0;
  width: 24px;
}

.news-content { flex: 1; }
.news-headline {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 4px;
}
.news-dek {
  font-size: 13px;
  color: var(--text-dim);
  font-family: var(--font-body);
}
.news-source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--copper);
  letter-spacing: 0.06em;
  margin-top: 4px;
}

/* Status lamps */
.status-lamp {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lamp-label {
  font-family: var(--font-mono);
  font-size: 8px;
  color: var(--text-dim);
  text-align: center;
  width: 36px;
}

/* Breaking = pulsing red */
@keyframes lampPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.lamp-breaking circle.lamp-dome { fill: var(--red); }
.lamp-breaking { animation: lampPulse 2.4s ease-in-out infinite; }

/* ═══════════════════════════════════════════════════════
   INTERCOM / CHAT PHONE
   ═══════════════════════════════════════════════════════ */
.intercom-section {
  padding: 60px 40px;
  background: var(--iron);
  border-top: 2px solid var(--brass-dark);
  border-bottom: 2px solid var(--brass-dark);
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 60px;
  align-items: center;
}
.intercom-intro h2 {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 16px;
  color: var(--cream);
}
.intercom-intro p {
  font-size: 15px;
  color: var(--text-dim);
  max-width: 360px;
}
.intercom-unit-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* Wall-mounted brass grille frame */
.intercom-frame {
  background: linear-gradient(135deg, var(--steel) 0%, var(--steel-mid) 50%, var(--steel) 100%);
  border: 3px solid var(--brass-dark);
  padding: 24px;
  position: relative;
  box-shadow: var(--shadow-deep);
}
/* Grille pattern at top */
.grille {
  background: var(--iron-deep);
  height: 60px;
  margin-bottom: 16px;
  border: 1px solid var(--brass-dark);
  position: relative;
  overflow: hidden;
}
.grille::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 6px,
    rgba(176,141,63,0.25) 6px,
    rgba(176,141,63,0.25) 7px
  ),
  repeating-linear-gradient(
    180deg,
    transparent 0,
    transparent 8px,
    rgba(176,141,63,0.15) 8px,
    rgba(176,141,63,0.15) 9px
  );
}
/* Corner rivets on frame */
.intercom-frame::before,
.intercom-frame::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.intercom-frame::before { top: -6px; right: -6px; }
.intercom-frame::after  { bottom: -6px; left: -6px; }
.intercom-frame-rivets-extra {
  position: absolute;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, var(--brass-light), var(--brass-dark));
  box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.intercom-frame-rivets-extra.tl { top: -6px; left: -6px; }
.intercom-frame-rivets-extra.br { bottom: -6px; right: -6px; }

/* Skin switcher buttons */
.skin-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  justify-content: center;
}
.skin-btn {
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 4px 10px;
  border: 1px solid var(--brass-dark);
  background: var(--iron);
  color: var(--text-dim);
  cursor: pointer;
  letter-spacing: 0.06em;
  transition: all 0.2s;
}
.skin-btn:hover, .skin-btn.active {
  background: var(--brass-dark);
  color: var(--cream);
  border-color: var(--brass);
}

/* Phone device */
#phone-device {
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
  border: 2px solid #333;
}
.phone-header {
  background: #075e54;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.phone-header-name {
  font-size: 13px;
  font-weight: 700;
  color: white;
  font-family: var(--font-body);
}
.phone-status-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
}
.phone-messages {
  background: #ece5dd;
  padding: 12px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  direction: rtl;
}
.phone-bubble {
  max-width: 80%;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #1a1a1a;
  background: white;
  align-self: flex-start;
  position: relative;
  font-family: var(--font-body);
}
.phone-bubble.urgent { background: #ffeeba; }
.bubble-meta {
  font-size: 10px;
  color: #888;
  margin-top: 4px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.bubble-tag {
  background: rgba(0,0,0,0.08);
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 9px;
}

/* Skin overrides */
#phone-device.skin-telegram .phone-header { background: #2aabee; }
#phone-device.skin-telegram .phone-messages { background: #e8f5fe; }
#phone-device.skin-telegram .phone-bubble { border-radius: 14px; }

#phone-device.skin-messenger .phone-header { background: linear-gradient(135deg, #0099FF, #A033FF); }
#phone-device.skin-messenger .phone-messages { background: #f5f0fe; }
#phone-device.skin-messenger .phone-bubble { border-radius: 18px; }

/* ═══════════════════════════════════════════════════════
   PUNCH CARDS — DRAGGABLE QUOTES
   ═══════════════════════════════════════════════════════ */
.punchcards-section {
  padding: 60px 40px;
  background: var(--iron-deep);
  position: relative;
  min-height: 380px;
  overflow: hidden;
}
.punchcards-section h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--brass);
  text-transform: uppercase;
  margin-bottom: 40px;
}

.punch-card {
  position: absolute;
  width: 260px;
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  padding: 0;
  cursor: grab;
  box-shadow: 4px 6px 18px rgba(0,0,0,0.5);
  user-select: none;
  touch-action: none;
  z-index: 10;
  overflow: hidden;
}
.punch-card:active { cursor: grabbing; z-index: 50; }

/* Corner cut top-right */
.punch-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 0; height: 0;
  border-top: 20px solid var(--iron-deep);
  border-left: 20px solid transparent;
  z-index: 4;
}

/* Punch holes grid at top */
.card-punch-holes {
  background: var(--paper-dark);
  padding: 8px 12px;
  border-bottom: 1px dashed var(--paper-dark);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.punch-hole {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--iron-deep);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}

.card-content {
  padding: 14px 14px 12px;
}
.card-quote-text {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--iron);
  line-height: 1.5;
  margin-bottom: 10px;
  font-style: italic;
}
.card-quote-author {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass-dark);
  font-weight: 700;
}
.card-quote-role {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
}
.card-serial-number {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 8px;
  border-top: 1px dashed var(--paper-dark);
  padding-top: 6px;
}

/* ═══════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════ */
.site-footer {
  background: var(--iron-deep);
  border-top: 3px solid var(--brass-dark);
  padding: 32px 40px;
  position: relative;
  overflow: hidden;
}
/* Rivet band across top */
.footer-rivet-band {
  position: absolute;
  top: -4px;
  left: 0; right: 0;
  height: 8px;
  background: linear-gradient(90deg, var(--steel) 0%, var(--iron) 50%, var(--steel) 100%);
  border-bottom: 1px solid var(--brass-dark);
}
.footer-inner {
  max-width: 1360px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-brand {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--brass);
  letter-spacing: 0.06em;
}
.footer-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
  text-align: center;
}
.footer-serial {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

/* ═══════════════════════════════════════════════════════
   NEWS PAGE
   ═══════════════════════════════════════════════════════ */
.news-page-header {
  background: var(--iron);
  padding: 48px 40px;
  border-bottom: 3px solid var(--brass-dark);
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 60px;
  align-items: center;
}
.news-page-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 900;
  color: var(--cream);
  margin-bottom: 8px;
}
.news-page-subtitle {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--brass);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.shift-header {
  background: linear-gradient(180deg, var(--steel) 0%, var(--iron) 100%);
  padding: 14px 40px;
  border-bottom: 2px solid var(--brass-dark);
  border-top: 2px solid var(--brass-dark);
  border-right: 4px solid var(--brass);
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}
.shift-label {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass-light);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
}
.shift-date {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--cream);
  font-weight: 700;
}
.shift-count {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  margin-right: auto;
}

.news-full-unit {
  padding: 20px 40px;
  border-bottom: 1px solid rgba(176,141,63,0.15);
  display: grid;
  grid-template-columns: 36px 36px 52px 1fr 100px;
  gap: 14px;
  align-items: start;
  background: var(--iron-deep);
  transition: background 0.15s;
}
.news-full-unit:hover { background: var(--steel); }

.unit-number {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  text-align: center;
  padding-top: 4px;
}

.unit-headline {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: 6px;
}
.unit-dek {
  font-size: 13px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.unit-source {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--copper);
  letter-spacing: 0.06em;
}
.unit-source-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}

/* ═══════════════════════════════════════════════════════
   ARTICLE PAGE
   ═══════════════════════════════════════════════════════ */
.article-page {
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 40px 80px;
}

/* Reading progress gauge — fixed right-center (switcher pill is bottom-left) */
.progress-gauge-wrap {
  position: fixed;
  bottom: 80px;
  left: 24px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(26,24,22,0.85);
  border: 1px solid var(--brass-dark);
  padding: 8px;
  border-radius: 4px;
}
.progress-label {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.done-lamp {
  display: none;
  font-family: var(--font-mono);
  font-size: 9px;
  color: #5a9e4a;
  letter-spacing: 0.06em;
  margin-top: 2px;
}
.done-lamp.active { display: block; }

/* Job ticket header */
.job-ticket {
  background: var(--paper);
  border: 2px solid var(--paper-dark);
  padding: 40px;
  margin-bottom: 40px;
  position: relative;
  box-shadow: var(--shadow-plate);
}

/* Brass corner brackets — inset so they're always visible */
.job-ticket::before,
.job-ticket::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid var(--brass);
  z-index: 2;
}
.job-ticket::before { top: 6px; right: 6px; border-left: none; border-bottom: none; }
.job-ticket::after  { bottom: 6px; left: 6px; border-right: none; border-top: none; }

.ticket-corners-extra {
  position: absolute;
  width: 22px; height: 22px;
  border: 3px solid var(--brass);
  z-index: 2;
}
.ticket-corners-extra.tl { top: 6px; left: 6px; border-right: none; border-bottom: none; }
.ticket-corners-extra.br { bottom: 6px; right: 6px; border-left: none; border-top: none; }

.job-ticket-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.5vw, 40px);
  font-weight: 900;
  color: var(--iron);
  margin-bottom: 24px;
  line-height: 1.15;
  /* Engraved effect */
  text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 -1px 0 rgba(0,0,0,0.2);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
}
.spec-table th {
  background: var(--paper-dark);
  color: var(--iron);
  padding: 6px 10px;
  text-align: right;
  border: 1px solid var(--paper-dark);
  font-weight: 700;
  width: 120px;
}
.spec-table td {
  background: white;
  color: var(--iron);
  padding: 6px 10px;
  border: 1px solid var(--paper-dark);
}

/* Article body */
.article-body {
  background: var(--paper);
  border: 1px solid var(--paper-dark);
  padding: 36px 40px;
  margin-bottom: 32px;
  position: relative;
}
.article-body p {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--iron);
  line-height: 1.75;
  margin-bottom: 18px;
}
.article-body p:last-child { margin-bottom: 0; }

/* TL;DR stamped plate */
.tldr-plate {
  background: var(--steel);
  border: 2px solid var(--brass-dark);
  padding: 24px 28px;
  margin-bottom: 28px;
  position: relative;
}
.tldr-plate::before {
  content: 'תקציר ביצוע';
  position: absolute;
  top: -10px;
  right: 20px;
  background: var(--steel);
  padding: 0 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tldr-text {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--cream);
  line-height: 1.6;
}

/* Takeaways with hex-bolt bullets */
.takeaways-section {
  margin-bottom: 28px;
}
.takeaways-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brass-dark);
}
.takeaway-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.takeaway-text {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--cream);
  line-height: 1.5;
}

/* Sources */
.sources-section {
  margin-bottom: 28px;
}
.sources-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brass-dark);
}
.source-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 13px;
}
.source-number {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass-dark);
  width: 20px;
  flex-shrink: 0;
}
.source-link { color: var(--brass); }
.source-link:hover { color: var(--brass-light); text-decoration: underline; }

/* Related articles */
.related-section {
  margin-bottom: 28px;
}
.related-title {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--brass);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--brass-dark);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}
.related-card {
  background: var(--steel);
  border: 1px solid var(--brass-dark);
  padding: 14px;
  cursor: pointer;
  transition: background 0.15s;
}
.related-card:hover { background: var(--steel-mid); }
.related-card-cat {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--copper);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.related-card-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  color: var(--cream);
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .hero { padding: 32px 20px 0; min-height: auto; }
  .gear-train { height: 200px; }
  .nameplate { padding: 12px 20px; }
  .nameplate-text h1 { font-size: 24px; }

  .articles-grid { grid-template-columns: 1fr; gap: 2px; }
  .intercom-section { grid-template-columns: 1fr; gap: 32px; }
  .news-full-unit { grid-template-columns: 48px 28px 32px 1fr; gap: 10px; }
  .news-full-unit .unit-source-col { display: none; }

  .gauge-cluster { padding: 32px 20px; gap: 24px; }
  .production-line { padding: 24px 20px; }
  .punchcards-section { padding: 32px 20px; min-height: 600px; }
  .article-page { padding: 32px 20px 60px; }
  .job-ticket { padding: 24px 20px; }
  .article-body { padding: 24px 20px; }

  .site-nav { padding: 0 20px; }
  .nav-links { display: none; }
  .news-page-header { grid-template-columns: 1fr; gap: 24px; }
  .section-header-bar { padding: 20px 20px; }
  .shift-header { padding: 12px 20px; }

  .progress-gauge-wrap { left: 70px; bottom: 16px; }

  .site-footer { padding: 24px 20px; }
  .footer-inner { flex-direction: column; gap: 12px; text-align: center; }

  .hero-scroll-gear { display: none; }
  .flywheel-wrap { display: none; }
}

@media (max-width: 480px) {
  .gear-assembly { transform: scale(0.65); transform-origin: center; }
  .punch-card { width: 200px; }
}