/* monkeycymbal — blueprint of a meaningless machine
   Palette: prussian blue paper, chalk line work, brass cymbal. */

:root {
  --paper:  #11283f;   /* prussian blue */
  --paper2: #0d2034;
  --chalk:  #dce8f2;   /* line work */
  --faint:  #6f8aa3;   /* annotations */
  --rule:   #28415c;   /* hairlines */
  --brass:  #d9a441;   /* the cymbal */
  --confis: #e06a5a;   /* inspector's red pencil */
  --ok:     #7fc28f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background:
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(220,232,242,0.035) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(220,232,242,0.035) 39px 40px),
    var(--paper);
  color: var(--chalk);
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: 15.5px;
  line-height: 1.7;
}

.sheet {
  max-width: 760px;
  margin: 40px auto 64px;
  padding: 56px 40px 48px;
  border: 1.5px solid var(--chalk);
  outline: 1px solid var(--rule);
  outline-offset: 6px;
  background: var(--paper2);
}

/* ------------------------------------------------------------ title block */

.titleblock { text-align: center; margin-bottom: 40px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: 0.32em;
  color: var(--faint);
  margin-bottom: 22px;
}

.titleblock h1 {
  font-family: 'Graduate', serif;
  font-weight: 400;
  font-size: clamp(34px, 7.5vw, 62px);
  letter-spacing: 0.06em;
  color: var(--chalk);
}

.titleblock .amp { color: var(--brass); }

.subtitle { color: var(--faint); margin-top: 12px; font-style: italic; }

/* ----------------------------------------------------------------- fig 1 */

.fig1 { margin: 44px 0 48px; text-align: center; }

.fig1 svg { width: 100%; max-width: 640px; height: auto; overflow: visible; }

.fig1 .line  { fill: none; stroke: var(--chalk); stroke-width: 1.5; }
.fig1 .dim   { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 4 4; }
.fig1 .anno  { fill: var(--faint); font-family: 'Courier Prime', monospace; font-size: 11px; letter-spacing: 0.18em; }

.fig1 .cymbal-a { animation: clash-a 6s ease-in-out infinite; }
.fig1 .cymbal-b { animation: clash-b 6s ease-in-out infinite; }
.fig1 .clangtext {
  fill: var(--brass);
  font-family: 'Graduate', serif;
  font-size: 26px;
  letter-spacing: 0.2em;
  opacity: 0;
  animation: clang 6s ease-in-out infinite;
}

@keyframes clash-a {
  0%, 78%, 100% { transform: translateX(0); }
  85%, 91%      { transform: translateX(28px); }
}
@keyframes clash-b {
  0%, 78%, 100% { transform: translateX(0); }
  85%, 91%      { transform: translateX(-28px); }
}
@keyframes clang {
  0%, 84%, 96%, 100% { opacity: 0; }
  87%, 93%           { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fig1 .cymbal-a, .fig1 .cymbal-b, .fig1 .clangtext { animation: none; }
  .fig1 .clangtext { opacity: 1; }
}

figcaption {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--faint);
}

/* --------------------------------------------------------------- sections */

section { border-top: 1px solid var(--rule); padding: 30px 0; }

.label {
  display: block;
  font-family: 'Graduate', serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0.28em;
  color: var(--brass);
  margin-bottom: 16px;
}

/* current build */
.current { text-align: center; }
.currentword { font-size: 26px; font-weight: 700; letter-spacing: 0.04em; }
.currentword a { color: var(--chalk); text-decoration: none; border-bottom: 2px solid var(--brass); }
.currentword a:hover, .currentword a:focus-visible { color: var(--brass); outline: none; }
.currentword em { font-size: 16px; color: var(--faint); font-weight: 400; }
.currentmeta { color: var(--faint); font-size: 13.5px; margin-top: 8px; }

/* past builds */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-weight: 700; font-size: 11px; letter-spacing: 0.22em;
  color: var(--faint); padding: 0 10px 8px 0; border-bottom: 1px solid var(--chalk);
}
td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--rule); color: var(--chalk); }
td a { color: var(--chalk); text-decoration: none; border-bottom: 1px solid var(--brass); }
td a:hover, td a:focus-visible { color: var(--brass); outline: none; }

/* about */
.about ol { padding-left: 22px; color: var(--chalk); }
.about li { margin-bottom: 8px; }
.about li::marker { color: var(--brass); }
.about strong { color: var(--brass); font-weight: 700; }

/* form */
.inputrow { display: flex; border: 1.5px solid var(--chalk); }
.inputrow input[type="text"] {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: 0;
  color: var(--chalk); font: 700 18px/1 'Courier Prime', monospace;
  letter-spacing: 0.06em; padding: 16px 14px; caret-color: var(--brass);
}
.inputrow input::placeholder { color: #44607c; }
.inputrow input:focus-visible { background: rgba(220,232,242,0.05); }
.inputrow button {
  font-family: 'Graduate', serif; font-size: 16px; letter-spacing: 0.14em;
  background: var(--brass); color: var(--paper2); border: 0; padding: 0 26px;
  cursor: pointer; transition: filter 120ms ease;
}
.inputrow button:hover, .inputrow button:focus-visible { filter: brightness(1.15); outline: none; }

.hp { position: absolute; left: -9999px; }
.hint { margin-top: 12px; color: var(--faint); font-size: 13.5px; }

.msg { margin-top: 16px; font-size: 14px; padding: 10px 14px; border-left: 3px solid; }
.msg-error { color: var(--confis); border-color: var(--confis); background: rgba(224,106,90,0.08); }
.msg-ok    { color: var(--ok); border-color: var(--ok); background: rgba(127,194,143,0.08); }

footer {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  color: var(--faint);
  font-size: 13px;
  font-style: italic;
}

@media (max-width: 600px) {
  .sheet { margin: 16px 10px; padding: 36px 20px 32px; }
  th:nth-child(4), td:nth-child(4) { display: none; }
}