/* ==========================================================================
   WEB 1.0 — Build with it board. Loaded on a/web-1-0.html only.
   A second canvas beside the room's: fixed 640px on the tiled weave, grey
   chrome cells, one white content cell, Times, FONT-tag Arial, rules as
   the hierarchy. The matte (the museum's) scrolls on narrow screens; the
   canvas never reflows. Contrast: black on #C0C0C0 11.5, on #DDDDDD 15.5;
   #0000EE on white 9.4; #551A8B 11.0; #B00000 7.4.
   ========================================================================== */
.gm--web-1-0 { max-width: none; margin: 0; padding: clamp(1.5rem, 4vw, 3rem) 1rem; background: var(--paper, #F4F2EC); color: #000000; --gm-tag-inverse: #FFFFFF; }
.gm--web-1-0 .gm__head { max-width: 640px; margin: 0 auto 1.25rem; grid-template-columns: 1fr; font: 400 0.78rem/1.65 var(--mono, "Courier New", monospace); color: var(--ink-3, #555555); }
.gm--web-1-0 .gm__title { grid-row: auto; font: 700 2em/1.1 "Times New Roman", Times, serif; color: #000000; }
.gm--web-1-0 .gm__lede { font-size: 0.85rem; }
.gm--web-1-0 .gm__head a { color: #0000EE; }

.gw1-matte { overflow-x: auto; }
.gw1-frame {
  width: 640px; max-width: 100%; box-sizing: border-box; overflow-x: auto; margin-inline: auto; padding: 8px; border: 2px inset #999999;
  background:
    repeating-linear-gradient(0deg, #B8B8B8 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, #B4B4B4 0 1px, #CFCFCF 1px 8px);
}
.gw1-t { background: #FFFFFF; border: 1px solid #808080; border-collapse: separate; }
.gw1-frame, .gw1-frame td, .gw1-frame th, .gw1-frame p, .gw1-frame li, .gw1-frame h4, .gw1-frame summary, .gw1-frame label {
  font-family: "Times New Roman", Times, serif; color: #000000; letter-spacing: normal;
}
.gw1-frame td { font-size: 1rem; line-height: 1.4; }
.gw1-frame p { margin: 0.5em 0; }
.gw1-frame a { color: #0000EE; text-decoration: underline; }
.gw1-frame .gw1-vis { color: #551A8B; text-decoration: underline; }
.gw1-frame hr { border: 0; border-top: 1px solid #808080; border-bottom: 1px solid #FFFFFF; margin: 0.9em 0; height: 0; }
.gw1-frame hr.gw1-flat { border: 0; height: 2px; background: #808080; }
.gw1-frame :focus-visible { outline: 2px solid #0000EE; outline-offset: 2px; }

/* each field: a heading tag and its content, nothing more */
.gw1-f .gm-f__head { margin: 0 0 0.3em; }
.gw1-f .gm-f__n { font-weight: 700; font-size: 1.5em; }
.gw1-f .gm-f__name { font-size: 1.5em; font-weight: 700; }
.gw1-f .gm-f__note { font-size: 0.85rem; opacity: 1; }
.gw1-f .gm-more summary { color: #0000EE; text-decoration: underline; font-weight: 400; font-size: 0.9rem; }
.gw1-f .gm-ls li { border-top: 1px dotted #808080; font-size: 0.9rem; }
.gw1-f .gm-t { border-radius: 0; font-family: Arial, Helvetica, sans-serif; font-size: 0.7rem; white-space: normal; }
.gw1-f .gm-ls__why, .gw1-f .gm-ls__from { opacity: 1; color: #333333; }

/* colour */
.gw1-sw { border-collapse: separate; }
.gw1-sw td { width: 64px; height: 28px; vertical-align: top; }
.gw1-sw tr + tr td { height: auto; background: #FFFFFF; }
.gw1-frame .gw1-sw font { font-size: 0.7rem; line-height: 1.2; }
.gw1-weave {
  background:
    repeating-linear-gradient(0deg, #B8B8B8 0 1px, transparent 1px 8px),
    repeating-linear-gradient(90deg, #B4B4B4 0 1px, #CFCFCF 1px 8px) !important;
}

/* type */
.gw1-frame .gw1-h1 { font-size: 2em; font-weight: 700; margin: 0.2em 0; }
.gw1-frame .gw1-h2 { font-size: 1.5em; font-weight: 700; margin: 0.2em 0; }
.gw1-frame font[face] { font-family: Arial, Helvetica, sans-serif; }
.gw1-frame font[size="2"] { font-size: 0.8125rem; }

/* layout */
.gw1-lay td { font-size: 0.8rem; border: 1px solid #808080; }

/* relief: the browser's bas-relief, restated because the house sheet flattens tables */
.gw1-relief { border: 4px outset #C0C0C0; border-spacing: 4px; background: #C0C0C0; }
.gw1-relief td { border: 1px inset #C0C0C0; background: #FFFFFF; }

/* imagery */
.gw1-img { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gw1-img a { display: inline-block; border: 2px solid #0000EE; text-decoration: none; }
.gw1-img a span { display: flex; align-items: center; justify-content: center; width: 96px; height: 64px; background: #EEEEEE; color: #555555; font: 400 11px/1.2 "Courier New", monospace; text-align: center; }
.gw1-88 { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 31px; box-sizing: border-box; border: 1px dashed #808080; font: 400 11px/1 "Courier New", monospace; color: #555555; }

/* components: the browser's own controls, left alone */
.gw1-form { margin: 0.6em 0 0; }
.gw1-form input { all: revert; }

/* motion: the GIF loop */
.gw1-frame .gw1-new { color: #B00000; font-weight: 700; margin: 0; }
@media (prefers-reduced-motion: no-preference) {
  .gw1-new { animation: gw1-blink 1.2s steps(2, jump-none) infinite; }
  @keyframes gw1-blink { 0% { opacity: 1; } 100% { opacity: 0.15; } }
}