:root {
  --paper: #ffffff;
  --ink: #050505;
  --link: #0000ee;
  --visited: #551a8b;
  --acid: #1f9d55;
  --highlight: #ffb300;
  --line: #111111;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Times New Roman", Times, serif;
  line-height: 1.35;
}

.page {
  width: min(980px, 94vw);
  margin: 0 auto;
  padding: 12px 10px 28px;
}

h1,
h2,
h3 {
  margin: 0 0 10px;
}

h1 {
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

p {
  margin: 0 0 12px;
}

a {
  color: var(--link);
}

a:visited {
  color: var(--visited);
}

marquee {
  display: block;
  margin-bottom: 12px;
  border: 1px solid var(--line);
  padding: 5px 0;
  background: #f7f7f7;
  font-weight: bold;
}

.rule {
  width: 100%;
  display: block;
  margin: 10px 0;
}

.logo-3d-wrap {
  perspective: 900px;
  margin: 0 0 14px;
  text-align: center;
}

.logo-3d {
  position: relative;
  display: inline-block;
  transform-style: preserve-3d;
  animation: logo-spin 8s linear infinite;
}

.logo-face {
  display: block;
  font-family: "Arial Black", "Impact", sans-serif;
  font-size: clamp(2rem, 7vw, 4.3rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.logo-face-front {
  position: relative;
  color: #111111;
}

.logo-face-mid,
.logo-face-back {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.logo-face-mid {
  color: #7a2400;
  transform: translateZ(-15px) translateX(5px) translateY(5px);
}

.logo-face-back {
  color: #1a4d2e;
  transform: translateZ(-28px) translateX(10px) translateY(10px);
}

.nav-links,
.utility-links,
.link-roll {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.nav-links li,
.utility-links li {
  display: inline;
  margin-right: 10px;
}

.utility-links {
  font-size: 0.94rem;
}

.panel {
  border: 2px solid var(--line);
  padding: 10px;
  margin-bottom: 12px;
}

.panel h2,
.panel h3 {
  margin-bottom: 8px;
}

.scanline {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent,
    transparent 3px,
    rgba(0, 0, 0, 0.045) 3px,
    rgba(0, 0, 0, 0.045) 4px
  );
}

.layout-table,
.product-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
}

.layout-table th,
.layout-table td,
.product-table th,
.product-table td {
  border: 1px solid var(--line);
  padding: 6px;
  text-align: left;
  vertical-align: top;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 12px;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.photo-box {
  border: 1px dashed var(--line);
  background: #f2f2f2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.82rem;
  color: #666;
  margin-bottom: 12px;
  text-align: center;
  padding: 8px;
}

.badge-row {
  margin: 10px 0 14px;
}

.badge {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 2px 6px;
  margin: 0 6px 6px 0;
  font-size: 0.88rem;
}

.button88-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.button88 {
  width: 88px;
  height: 31px;
  display: inline-block;
  border: 1px solid var(--line);
}

.button88 img {
  width: 100%;
  height: 100%;
  display: block;
}

.section-list {
  margin: 0 0 12px;
}

.section-list li,
.link-roll li {
  margin-bottom: 6px;
}

.blink {
  animation: blink 1s steps(1, end) infinite;
}

@keyframes blink {
  50% {
    visibility: hidden;
  }
}

@keyframes logo-spin {
  0% {
    transform: rotateY(0deg) rotateX(8deg);
  }
  50% {
    transform: rotateY(180deg) rotateX(-8deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(8deg);
  }
}

.terminal {
  margin: 10px 0 12px;
  border: 1px solid var(--line);
  padding: 8px;
  background: #f6f6f6;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.87rem;
  white-space: pre-wrap;
}

.web-ring {
  border: 1px dashed var(--line);
  padding: 8px;
  margin-bottom: 12px;
}

.product-code {
  color: var(--acid);
  font-weight: bold;
}

.order-link {
  font-weight: bold;
}

.order-help {
  font-size: 0.92rem;
  background: #f9f9f9;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.form-field {
  display: block;
  margin-bottom: 9px;
}

label {
  display: block;
  font-weight: bold;
  margin-bottom: 3px;
}

input,
select,
textarea,
button {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  padding: 6px;
  background: #ffffff;
  color: var(--ink);
}

button {
  background: #f2f2f2;
  cursor: pointer;
}

button:hover {
  background: #e9e9e9;
}

.small-note {
  font-size: 0.9rem;
}

.highlight {
  background: #fff5cc;
  padding: 2px 4px;
}

/* ── PHOTO RAILS ─────────────────────────────────────────────────────────── */

.photo-rail {
  width: 120px;
  flex-shrink: 0;
  height: 100vh;
  overflow: hidden;
  position: sticky;
  top: 0;
  display: none;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

.photo-rail-track {
  display: flex;
  flex-direction: column;
  animation: rail-scroll 50s linear infinite;
}

.photo-rail-right .photo-rail-track {
  animation-direction: reverse;
}

.photo-rail-track img {
  width: 100%;
  display: block;
  border-bottom: 1px solid var(--line);
}

.photo-rail-placeholder {
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.58rem;
  color: #bbb;
  border-bottom: 1px dashed var(--line);
  text-align: center;
  padding: 4px;
}

@keyframes rail-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* show photo rails only on very wide viewports */
@media (min-width: 1500px) {
  .photo-rail { display: block; }
}

/* ── AD RAILS ─────────────────────────────────────────────────────────────── */

.site-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 12px;
}

.site-layout .page {
  margin: 0;
}

.ad-rail {
  position: sticky;
  top: 12px;
  width: 120px;
  flex-shrink: 0;
  display: none;
}

.ad-slot {
  width: 120px;
  border: 1px solid var(--line);
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.68rem;
  color: #777;
  text-align: center;
  margin-bottom: 8px;
}

.ad-slot-label {
  width: 100%;
  padding: 3px 0;
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.6rem;
  background: #ebebeb;
  color: #555;
}

.ad-slot-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  gap: 6px;
}

.ad-slot-body img {
  width: 100%;
  display: block;
}

/* show rails only when viewport is wide enough to clear the 980px content */
@media (min-width: 1260px) {
  .ad-rail { display: block; }
}

/* ── GALLERY / EVIDENCE WALL ─────────────────────────────────────────────── */

.evidence-wall {
  column-count: 3;
  column-gap: 12px;
  margin-bottom: 24px;
}

.proof-print {
  break-inside: avoid;
  display: block;
  margin-bottom: 12px;
  border: 2px solid var(--line);
  padding: 6px;
  background: var(--paper);
}

.proof-print img {
  width: 100%;
  display: block;
}

.proof-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 5px;
  gap: 6px;
}

.proof-ref {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.6rem;
  color: #999;
  flex-shrink: 0;
}

.proof-caption {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.66rem;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: right;
}

@media (max-width: 760px) {
  .grid-2,
  .grid-3,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .page {
    padding-left: 8px;
    padding-right: 8px;
  }

  .logo-face-mid {
    transform: translateZ(-8px) translateX(3px) translateY(3px);
  }

  .logo-face-back {
    transform: translateZ(-15px) translateX(6px) translateY(6px);
  }

  .evidence-wall {
    column-count: 2;
  }
}

/* ── HOLD INSPECTOR ──────────────────────────────────────────────────────── */

.viewer-row { display: none; }
.viewer-row.is-open { display: table-row; }

.viewer-cell {
  padding: 0;
  border: 2px solid var(--line);
  background: #f6f6f6;
}

.viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  background: #ebebeb;
}

.viewer-code { color: var(--acid); }

.viewer-close {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.inspector-hint {
  font-family: "Courier New", Courier, monospace;
  font-size: 0.78rem;
  color: #888;
}

model-viewer.hold-viewer {
  width: 100%;
  height: 400px;
  display: block;
  background: #f6f6f6;
  --progress-bar-height: 0px;
  --progress-bar-color: transparent;
}

model-viewer.hold-viewer::part(default-progress-bar),
model-viewer.hold-viewer::part(default-ar-button) { display: none; }

.viewer-fallback {
  padding: 18px 8px;
  text-align: center;
  font-family: "Courier New", Courier, monospace;
  font-size: 0.87rem;
}

tr.product-row { cursor: pointer; }
tr.product-row.row-active { background: #f0f0f0; }

@media (max-width: 760px) {
  model-viewer.hold-viewer { height: 280px; }
}