/* Dial-up, about 1996, on the wireless page.

   Kept off the two shapes this set already has plenty of. It is not a dark
   terminal (there are four of those) and it is not a grey beveled window (the
   AOL page owns that). It is a putty coloured desk with a slim dark modem on
   it, and then an ordinary light page: the modem is an object at the top and
   the argument underneath is set as a document, because the argument is a
   sequence of four things and a sequence wants to be read rather than admired.

   The lamps are the detail worth getting right. Seven of them, two letters
   each, in the order they sat on the front, and they light in sequence as the
   handshake runs. That is what somebody watched while they waited. */

:root {
  --du-desk:   #9c9587;
  --du-case:   #2f3338;
  --du-case2:  #23262a;
  --du-green:  #57e08a;
  --du-amber:  #ffb648;
  --du-red:    #ff5a4d;
  --du-off:    #4b5057;
  --du-ink:    #24262b;
  --du-paper:  #faf9f6;
  --du-dim:    #6d7178;
  --du-rule:   #e4e1da;
  --du-orange: #E87722;
}

body {
  background: var(--du-paper);
  color: var(--du-ink);
  font: 16px/1.65 "Helvetica Neue", Helvetica, Arial, sans-serif;
  padding: 0 0 46px;
}

.du { max-width: 800px; margin: 0 auto; padding: 0 26px; }

a { color: #1c5fa8; }

/* ── The desk ──────────────────────────────────────────────────────────── */

.du-desk {
  margin: 0 -26px 32px;
  padding: 34px 26px 30px;
  background: linear-gradient(180deg, #a9a294 0%, var(--du-desk) 100%);
  display: flex; flex-wrap: wrap; gap: 22px; align-items: center; justify-content: center;
}

/* The modem: a slim wedge, darker at the bottom, sitting on its own shadow. */
.du-modem {
  background: linear-gradient(165deg, #3b4046 0%, var(--du-case) 45%, var(--du-case2) 100%);
  border-radius: 5px 5px 3px 3px;
  padding: 13px 18px 15px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 8px 18px rgba(0,0,0,.42);
  min-width: 300px;
}
.du-modem-name {
  margin: 0 0 12px;
  font: 700 9px/1 Arial, sans-serif;
  letter-spacing: .24em; text-transform: uppercase;
  color: #8a9098;
}
.du-lamps { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.du-lamps li { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.du-lamp {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--du-off);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.6);
}
.du-lamp.is-on   { background: var(--du-green); box-shadow: 0 0 8px var(--du-green); }
.du-lamp.is-busy { background: var(--du-amber); box-shadow: 0 0 8px var(--du-amber); }
.du-lamp.is-bad  { background: var(--du-red);   box-shadow: 0 0 8px var(--du-red); }
.du-lamp-label {
  font: 700 8px/1 Arial, sans-serif;
  letter-spacing: .1em;
  color: #7f858d;
}

.du-panel { min-width: 240px; }
.du-status {
  margin: 0 0 12px;
  font: 14px/1.45 ui-monospace, Consolas, "Courier New", monospace;
  color: #23262a;
  background: rgba(255,255,255,.55);
  padding: 9px 12px;
  border-radius: 3px;
  min-height: 40px;
}
.du-controls { display: flex; gap: 10px; margin: 0; }
.du-dial, .du-hang {
  border: 0; border-radius: 3px; cursor: pointer;
  padding: 10px 22px;
  font: 700 13px/1 "Helvetica Neue", Arial, sans-serif;
}
.du-dial { background: var(--du-ink); color: #fff; }
.du-mute { background: rgba(255,255,255,.6); color: var(--du-ink); }
.du-mute:hover, .du-mute:focus { background: #fff; }
.du-mute.is-muted { background: var(--du-ink); color: #fff; }
.du-mute:focus-visible { outline: 2px solid var(--du-orange); outline-offset: 2px; }
.du-sound-note {
  margin: 10px 0 0 !important;
  max-width: 34ch;
  font-size: 12px; line-height: 1.5;
  color: #33363b;
}
.du-dial:hover, .du-dial:focus { background: var(--du-orange); }
.du-hang { background: rgba(255,255,255,.6); color: var(--du-ink); }
.du-hang:hover, .du-hang:focus { background: #fff; }
.du-dial:focus-visible, .du-hang:focus-visible { outline: 2px solid var(--du-orange); outline-offset: 2px; }

/* ── The page ──────────────────────────────────────────────────────────── */

.du h1 { font-size: clamp(24px, 4.2vw, 34px); line-height: 1.2; margin: 0 0 12px; }
.du h2 { font-size: 20px; margin: 34px 0 8px; color: #7a3f10; }
.du h3 { font-size: 15px; margin: 18px 0 2px; }
.du p  { margin: 8px 0; max-width: 70ch; }
.du-lead { font-size: 18px; color: #3a3f45; }
.du-note { color: var(--du-dim); font-size: 14px; }
.du-list { margin: 8px 0; padding: 0 0 0 24px; max-width: 70ch; }
.du-list li { margin-bottom: 9px; }

/* ── The handshake ─────────────────────────────────────────────────────── */

.du-seq { list-style: none; counter-reset: stage; margin: 16px 0 0; padding: 0; }
.du-seq > li {
  counter-increment: stage;
  position: relative;
  padding: 16px 0 16px 52px;
  border-top: 1px solid var(--du-rule);
  transition: opacity .2s linear;
}
.du-seq > li::before {
  content: counter(stage);
  position: absolute; left: 0; top: 16px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--du-rule); color: #5c6067;
  font: 700 14px/30px "Helvetica Neue", Arial, sans-serif;
  text-align: center;
  transition: background .2s linear, color .2s linear;
}
/* The stage the modem is on. Only ever one at a time. */
.du-seq > li.is-live::before { background: var(--du-orange); color: #fff; }
.du-seq > li.is-done::before { background: var(--du-ink); color: #fff; }
/* Dimmed only while a connection is actually running, so the page at rest is
   fully legible and nothing is hidden behind the button. */
.du-seq.is-running > li { opacity: .45; }
.du-seq.is-running > li.is-live,
.du-seq.is-running > li.is-done { opacity: 1; }

.du-stage-name { margin: 0 0 2px !important; font-weight: 700; font-size: 17px; }
.du-heard { margin: 0 0 6px !important; color: var(--du-dim); font-style: italic; }
.du-now { margin: 0 !important; }

.du-result {
  border-left: 4px solid var(--du-rule);
  padding: 14px 18px;
  margin: 20px 0 0;
  background: #f2f1ec;
}
.du-result-ok   { border-left-color: #2f8f4e; }
.du-result-fail { border-left-color: var(--du-red); }
.du-code {
  margin: 0 0 6px !important;
  font: 700 15px/1.3 ui-monospace, Consolas, "Courier New", monospace;
  letter-spacing: .06em;
}
.du-result-ok .du-code   { color: #226b3a; }
.du-result-fail .du-code { color: #a8291c; }

/* ── The form ──────────────────────────────────────────────────────────── */

.du-box {
  background: #fff;
  border: 1px solid var(--du-rule);
  border-radius: 4px;
  padding: 18px 22px 22px;
  margin: 32px 0 0;
  max-width: 560px;
}
.du-box h2 { margin-top: 0; }

.du-field { margin: 0 0 12px; }
.du-field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.du-field input, .du-field textarea {
  width: 100%; padding: 8px 10px;
  border: 1px solid #b8b4ab; border-radius: 2px; background: #fff;
  font: 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.du-field input:focus, .du-field textarea:focus { outline: 2px solid var(--du-orange); outline-offset: 1px; }
.du-field.is-bad input, .du-field.is-bad textarea { border-color: var(--du-red); background: #fff7f6; }

.rt-field-err { color: #a8291c; font-size: 13px; font-weight: 700; margin: 4px 0 0; }
.rt-err { border: 1px solid var(--du-red); background: #fff7f6; color: #7d1c12; padding: 10px 12px; font-size: 14px; margin: 0 0 12px; }

.du-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 16px 0 0; }
.du-actions button {
  background: var(--du-ink); color: #fff; border: 0;
  padding: 11px 30px; border-radius: 3px;
  font: 700 15px/1.2 "Helvetica Neue", Arial, sans-serif; cursor: pointer;
}
.du-actions button:hover, .du-actions button:focus { background: var(--du-orange); }

@media (max-width: 560px) {
  .du { padding: 0 16px; }
  .du-desk { margin: 0 -16px 24px; padding: 24px 16px 22px; }
  .du-modem { min-width: 0; width: 100%; }
  .du-lamps { justify-content: space-between; gap: 6px; }
  .du-seq > li { padding-left: 42px; }
}