/* ==========================================================================
   Schwwaaa // late-90s corporate edition
   A professionally built agency site of about 1999: navy masthead with a
   gradient bar, a sidebar of "What's New", Verdana throughout, bevelled
   buttons, and a footer that keeps its period legal line.
   ========================================================================== */

:root {
  --navy: #003366;
  --navy-2: #336699;
  --navy-3: #6b8fb5;
  --link: #0033cc;
  --link-visited: #5c2a8a;
  --page: #dde3ea;
  --panel: #ffffff;
  --panel-tint: #f1f4f8;
  --rule: #b7c3d1;
  --rule-strong: #8497ae;
  --text: #1a1a1a;
  --muted: #555c66;
  --alert: #8b0000;

  --font: Verdana, Arial, Helvetica, sans-serif;
  --width: 1000px;
}

/* Colour schemes. Navy is the base; the others replace these tokens. */
:root {
  --mast-top: #0a2a52;
  --nav-a: #2b5d91;
  --nav-b: #1d4a7a;
  --nav-line: #3a6b9c;
  --nav-hover: #3d72a8;
  --field-line: #5a7aa0;
  --field-label: #cfdbe8;
  --go-a: #7aa3cf;
  --go-b: #2f5f94;
  --go-hover-a: #8fb3da;
  --go-hover-b: #3a6fa6;
  --soft-a: #ffffff;
  --soft-b: #d8e0ea;
  --soft-hover: #c7d3e1;
  --head-a: #e7edf4;
  --head-b: #c9d6e4;
  --foot-a: #d8e0ea;
  --foot-b: #b7c6d8;
  --hover-tint: #e9eff6;
  --live-top: #1c3550;
}

/* Slate is the default: it applies to :root, and the other schemes override it. */
:root,
[data-colorway="slate"] {
  --navy: #2e3b4a;
  --navy-2: #5a6b7e;
  --navy-3: #8e9cad;
  --link: #2e4a6b;
  --page: #dfe3e8;
  --panel-tint: #f3f5f7;
  --rule: #b8c0ca;
  --rule-strong: #7d8a98;
  --mast-top: #1f262e;
  --nav-a: #3d4b5c;
  --nav-b: #2a3644;
  --nav-line: #4b5a6b;
  --nav-hover: #55667a;
  --field-line: #6d7d90;
  --field-label: #d7dde4;
  --go-a: #9aa8b8;
  --go-b: #55657a;
  --go-hover-a: #aeb9c7;
  --go-hover-b: #66788c;
  --soft-a: #ffffff;
  --soft-b: #e1e5ea;
  --soft-hover: #cfd6df;
  --head-a: #eef1f4;
  --head-b: #d3dae2;
  --foot-a: #e1e5ea;
  --foot-b: #c4ccd6;
  --hover-tint: #eceff3;
  --live-top: #222c38;
}

[data-colorway="olive"] {
  --navy: #34462a;
  --navy-2: #5d7645;
  --navy-3: #93a57d;
  --link: #35612e;
  --page: #e2e6d8;
  --panel-tint: #f4f6ee;
  --rule: #b7c0a6;
  --rule-strong: #7f8c6c;
  --mast-top: #1f2a17;
  --nav-a: #4a6236;
  --nav-b: #34462a;
  --nav-line: #5a7244;
  --nav-hover: #5f7c46;
  --field-line: #6b7f55;
  --field-label: #d5dfc6;
  --go-a: #a7bd86;
  --go-b: #5d7645;
  --go-hover-a: #bdd19c;
  --go-hover-b: #6f8b55;
  --soft-a: #ffffff;
  --soft-b: #e4e9d9;
  --soft-hover: #d3dcc3;
  --head-a: #f0f3e8;
  --head-b: #d4dcc4;
  --foot-a: #e4e9d9;
  --foot-b: #c5d0b2;
  --hover-tint: #eef2e4;
  --live-top: #26331d;
}

[data-colorway="oxblood"] {
  --navy: #5a1f2b;
  --navy-2: #8a4352;
  --navy-3: #b98c97;
  --link: #8a2238;
  --page: #ece4e5;
  --panel-tint: #f8f3f4;
  --rule: #cbb8bd;
  --rule-strong: #9d8189;
  --mast-top: #2a0f16;
  --nav-a: #7a2c3b;
  --nav-b: #5a1f2b;
  --nav-line: #8a4352;
  --nav-hover: #8f3c4d;
  --field-line: #9a6470;
  --field-label: #e6d3d8;
  --go-a: #c08e98;
  --go-b: #8a4352;
  --go-hover-a: #d3a9b1;
  --go-hover-b: #9c5566;
  --soft-a: #ffffff;
  --soft-b: #efe4e6;
  --soft-hover: #e2d1d5;
  --head-a: #f6eef0;
  --head-b: #e4d3d8;
  --foot-a: #efe4e6;
  --foot-b: #d9c6cb;
  --hover-tint: #f5eef0;
  --live-top: #32141c;
}

[data-colorway="navy"] {
  --navy: #003366;
  --navy-2: #336699;
  --navy-3: #6b8fb5;
  --link: #0033cc;
  --page: #dde3ea;
  --panel-tint: #f1f4f8;
  --rule: #b7c3d1;
  --rule-strong: #8497ae;
  --mast-top: #0a2a52;
  --nav-a: #2b5d91;
  --nav-b: #1d4a7a;
  --nav-line: #3a6b9c;
  --nav-hover: #3d72a8;
  --field-line: #5a7aa0;
  --field-label: #cfdbe8;
  --go-a: #7aa3cf;
  --go-b: #2f5f94;
  --go-hover-a: #8fb3da;
  --go-hover-b: #3a6fa6;
  --soft-a: #ffffff;
  --soft-b: #d8e0ea;
  --soft-hover: #c7d3e1;
  --head-a: #e7edf4;
  --head-b: #c9d6e4;
  --foot-a: #d8e0ea;
  --foot-b: #b7c6d8;
  --hover-tint: #e9eff6;
  --live-top: #1c3550;
}

/* Arrow pointer in navy and white. Links and buttons get a blue arrow. */
html,
body {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Cpath d='M2 1 L2 19 L6.5 14.8 L9.6 22 L12.6 20.7 L9.6 13.6 L15.5 13.6 Z' fill='%23ffffff' stroke='%23003366' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 1, auto;
}

a,
button,
summary,
[role="tab"],
label[for],
input[type="checkbox"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='24' viewBox='0 0 20 24'%3E%3Cpath d='M2 1 L2 19 L6.5 14.8 L9.6 22 L12.6 20.7 L9.6 13.6 L15.5 13.6 Z' fill='%238fd0ff' stroke='%23003366' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 1, pointer;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font: 12px/1.5 var(--font);
}

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

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

a:hover {
  color: var(--navy);
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--navy);
  font-family: var(--font);
}

p {
  margin: 0;
}

:focus-visible {
  outline: 1px dotted var(--navy);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  padding: 4px 8px;
  background: #fff;
  color: var(--navy);
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

[hidden] {
  display: none !important;
}

/* ---------- page frame ---------- */

.page {
  max-width: var(--width);
  margin: 0 auto;
  background: var(--panel);
  border-left: 1px solid var(--rule-strong);
  border-right: 1px solid var(--rule-strong);
  min-height: 100vh;
}

/* ---------- masthead ---------- */

.masthead {
  background: linear-gradient(180deg, var(--mast-top) 0%, var(--navy) 55%, var(--navy-2) 100%);
  color: #fff;
}

.masthead-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 22px;
}

.colourways {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--field-label);
}

.swatch {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #fff;
  background: var(--sw);
  cursor: pointer;
}

.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff;
}

.masthead-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 22px;
}

.brand img {
  display: block;
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
}

.search {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search label {
  font-size: 11px;
  color: var(--field-label);
}

.search input {
  width: 190px;
  padding: 3px 6px;
  border: 1px solid var(--field-line);
  background: #fff;
  color: var(--text);
  font: 11px var(--font);
}

.mainnav {
  border-top: 1px solid var(--field-line);
  background: linear-gradient(180deg, var(--nav-a) 0%, var(--nav-b) 100%);
}

.mainnav ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0 14px;
  list-style: none;
}

.mainnav a {
  display: block;
  padding: 8px 14px;
  border-right: 1px solid var(--nav-line);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.mainnav a:hover,
.mainnav a:focus-visible {
  background: var(--nav-hover);
  color: #fff;
}

/* ---------- buttons ---------- */

.button {
  display: inline-block;
  padding: 4px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  background: linear-gradient(180deg, var(--soft-a) 0%, var(--soft-b) 100%);
  color: var(--navy);
  font: bold 11px var(--font);
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  background: linear-gradient(180deg, var(--soft-a) 0%, var(--soft-hover) 100%);
  color: var(--navy);
}

.button-go {
  background: linear-gradient(180deg, var(--go-a) 0%, var(--go-b) 100%);
  border-color: var(--nav-b);
  color: #fff;
}

.button-go:hover {
  background: linear-gradient(180deg, var(--go-hover-a) 0%, var(--go-hover-b) 100%);
  color: #fff;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

/* ---------- two-column layout ---------- */

.layout {
  display: grid;
  grid-template-columns: 210px 1fr;
}

.sidebar {
  padding: 16px 12px 16px 16px;
  background: var(--panel-tint);
  border-right: 1px solid var(--rule);
}

.panel {
  margin-bottom: 18px;
  border: 1px solid var(--rule);
  background: #fff;
}

.panel > summary.panel-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  cursor: default;
}

.panel > summary.panel-title::-webkit-details-marker {
  display: none;
}

.panel-title {
  padding: 5px 8px;
  background: linear-gradient(180deg, var(--head-a) 0%, var(--head-b) 100%);
  border-bottom: 1px solid var(--rule);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.news-list,
.link-list {
  margin: 0;
  padding: 6px 8px 8px 22px;
}

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

.news-list .news-date {
  display: block;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.news-list a,
.link-list a {
  text-decoration: none;
}

.news-list a:hover,
.link-list a:hover {
  text-decoration: underline;
}

.content {
  padding: 18px 26px 26px;
  min-width: 0;
}

.content-error {
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid #c79a9a;
  background: #fbeaea;
  color: var(--alert);
}

/* ---------- featured intro ---------- */

.featured {
  padding-bottom: 18px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--navy);
}

.kicker {
  margin-bottom: 6px;
  color: var(--navy-2);
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.featured h1 {
  margin-bottom: 8px;
  font-size: 26px;
  font-weight: bold;
  letter-spacing: -0.01em;
}

.featured > p:not(.kicker) {
  max-width: 70ch;
  font-size: 13px;
}

/* ---------- content blocks ---------- */

.block {
  padding: 22px 0 18px;
  border-bottom: 1px solid var(--rule);
}

.block:last-of-type {
  border-bottom: 0;
}

.block-title {
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--navy);
  font-size: 17px;
  font-weight: bold;
}

.block-intro {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
}

.block-foot {
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
}

.sub-title {
  margin: 18px 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy-2);
}

/* ---------- tabs ---------- */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-strong);
}

.tab {
  margin-bottom: -1px;
  padding: 4px 12px;
  border: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  background: linear-gradient(180deg, var(--soft-a) 0%, var(--soft-b) 100%);
  color: var(--navy);
  font: 11px var(--font);
  cursor: pointer;
}

.tab[aria-selected="true"] {
  background: #fff;
  border-bottom-color: #fff;
  font-weight: bold;
}

/* ---------- live ---------- */

.live-stage {
  position: relative;
  min-height: 300px;
  background: #000;
  border: 2px solid var(--navy-3);
  overflow: hidden;
}

.live-cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: linear-gradient(180deg, var(--live-top) 0%, #000 100%);
  color: #fff;
  font: bold 13px var(--font);
  cursor: pointer;
}

.live-cover small {
  color: #aebfd3;
  font-size: 11px;
  font-weight: normal;
}

.play-mark {
  display: block;
  width: 0;
  height: 0;
  margin-left: 6px;
  border-left: 16px solid #fff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.live-frame {
  display: block;
  width: 100%;
  height: 520px;
  border: 0;
  background: #000;
}

/* ---------- software cards ---------- */

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px 12px;
  border: 1px solid var(--rule);
  background: var(--panel-tint);
}

.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 32px;
}

.card-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.status {
  padding: 1px 6px;
  border: 1px solid currentColor;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
}

.status-live { color: #1f6b2a; }
.status-partner { color: var(--navy-2); }
.status-beta { color: #8a5a00; }
.status-idea { color: var(--muted); }

.card h3 {
  font-size: 13px;
}

.card > p {
  font-size: 12px;
}

.card-more {
  font-size: 11px;
}

.card-more summary {
  cursor: pointer;
  color: var(--link);
}

.card-more p {
  margin-top: 4px;
  color: var(--muted);
}

.tag-row {
  color: var(--muted);
  font-size: 10px;
}

.tag-row span + span::before {
  content: " | ";
}

.card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px solid var(--rule);
  font-size: 11px;
}

/* ---------- productions ---------- */

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}

.media-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--rule);
  background: var(--panel-tint);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.media-tile:hover {
  border-color: var(--navy-2);
  background: var(--hover-tint);
}

.thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--rule-strong);
  overflow: hidden;
}

.thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-empty {
  display: grid;
  place-items: center;
  background: #e4eaf1;
  color: var(--muted);
  font-size: 11px;
}

.play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  background: rgba(0, 51, 102, 0.75);
  border: 1px solid #fff;
}

.play::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 12px;
  border-left: 10px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.media-tile strong {
  font-size: 12px;
  color: var(--navy);
}

.media-tile small {
  color: var(--muted);
  font-size: 11px;
}

.media-tile.is-empty {
  cursor: default;
}

/* ---------- events ---------- */

.event-list {
  border-top: 1px solid var(--rule);
}

.event {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 4px 16px;
  align-items: start;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
}

.event-date {
  color: var(--navy-2);
  font-size: 11px;
  font-weight: bold;
}

.event h4 {
  margin: 0 0 2px;
  color: var(--navy);
  font-size: 13px;
}

.event p {
  color: var(--muted);
  font-size: 11px;
}

.event-empty {
  padding: 10px;
  border: 1px solid var(--rule);
  background: var(--panel-tint);
}

.text-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--link);
  font: 11px var(--font);
  cursor: pointer;
  text-decoration: underline;
}

.card-links a,
.event .card-links a {
  white-space: nowrap;
}

/* ---------- newsletter form ---------- */

.form {
  display: grid;
  gap: 12px;
  max-width: 640px;
  padding: 14px;
  border: 1px solid var(--rule);
  background: var(--panel-tint);
}

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

.field {
  display: grid;
  gap: 3px;
}

.field > span {
  color: var(--navy);
  font-size: 11px;
  font-weight: bold;
}

input,
textarea {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: var(--text);
  font: 12px var(--font);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy-2);
  box-shadow: 0 0 0 1px var(--navy-3);
}

.check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}

.form-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.form-status {
  font-size: 11px;
  color: #1f6b2a;
  min-height: 1.4em;
}

.form-status.error {
  color: var(--alert);
}

/* ---------- connect ---------- */

.social-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.social-list li {
  border-bottom: 1px solid var(--rule);
}

.social-list a {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 8px 4px;
  color: var(--text);
  text-decoration: none;
}

.social-list a:hover .social-go {
  text-decoration: underline;
}

.social-name {
  color: var(--navy);
  font-weight: bold;
}

.social-blurb {
  color: var(--muted);
}

.social-go {
  color: var(--link);
}

/* ---------- media dialog ---------- */

.media-dialog {
  width: min(900px, calc(100vw - 24px));
  max-width: none;
  margin: auto;
  padding: 0;
  border: 1px solid var(--navy);
  background: #fff;
  color: var(--text);
  box-shadow: 0 20px 50px -20px rgba(0, 0, 0, 0.6);
}

.media-dialog::backdrop {
  background: rgba(0, 20, 40, 0.6);
}

.media-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: linear-gradient(180deg, var(--nav-a) 0%, var(--nav-b) 100%);
}

.media-dialog-head h2 {
  color: #fff;
  font-size: 13px;
}

.media-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}

.media-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.media-note {
  padding: 8px 12px 12px;
  color: var(--muted);
  font-size: 11px;
}

/* ---------- footer ---------- */

.footer {
  padding: 16px 22px 20px;
  background: linear-gradient(180deg, var(--foot-a) 0%, var(--foot-b) 100%);
  border-top: 2px solid var(--navy);
  color: var(--navy);
}

.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 560px;
  margin-bottom: 12px;
}

.footer h3 {
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer ul {
  margin: 0;
  padding-left: 16px;
  font-size: 11px;
}

.footer-legal {
  padding-top: 10px;
  border-top: 1px solid var(--rule-strong);
  font-size: 10px;
  color: var(--navy);
}

/* ---------- responsive ---------- */

@media (max-width: 800px) {
  .layout {
    grid-template-columns: 1fr;
  }

  .panel > summary.panel-title {
    cursor: pointer;
  }

  .panel > summary.panel-title::after {
    content: "+";
    font-size: 14px;
    line-height: 1;
  }

  .panel[open] > summary.panel-title::after {
    content: "\2212";
  }

  .masthead-tools {
    justify-content: stretch;
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }

  .sidebar .panel {
    margin-bottom: 10px;
  }

  .masthead-top {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .search input {
    flex: 1;
    width: auto;
  }

  .mainnav ul {
    padding: 0;
  }

  .mainnav a {
    padding: 7px 10px;
    font-size: 10px;
  }

  .live-frame {
    height: 340px;
  }
}

@media (max-width: 600px) {
  .page {
    border-left: 0;
    border-right: 0;
  }

  .content {
    padding: 14px 14px 20px;
  }

  .featured h1 {
    font-size: 21px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .event {
    grid-template-columns: 1fr;
  }

  .social-list a {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .live-frame {
    height: 230px;
  }
}