/* AGENCY PORTAL + COMPOUNDING SECTIONS (owner decision 2026-07-26).

   Owner 2026-07-27: "actually looking like our product... let them play around
   in the portal." So the mock below is not an impression of the portal, it is
   the portal's own structure and its own token values, lifted from
   client-portal/[token]/portal.module.css:

     canvas #0a0f0e · sidebar #0b1210 · panel #111916 · soft #17211e
     line #29332f · line-strong #45524d · ink #f8f1e7 · muted #adb7b2
     accent #de6378  (the contrast-adjusted dark accent the portal computes from
                      the agency's brand seed, NOT the raw workspace crimson)

   Structure matches too: the real portal is a LEFT SIDEBAR RAIL over a content
   pane, not a horizontal tab bar. Rail links are 42px tall, 9px radius, 13px/680
   muted text, with the active one taking a red-tinted border, background and
   text plus a mono count pill.

   The compounding ladder underneath stays on the marketing --aud-* tokens,
   because it is page furniture rather than a product surface. */

/* ------------------------------------------------------ the portal mock */

.aud-portal {
  overflow: hidden;
  border: 1px solid var(--aud-light-line);
  border-radius: 16px;
  background: #0a0f0e;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.3);
}

/* Browser chrome: this is the client's own URL, on the agency's domain. */
.aud-portal-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid #29332f;
  background: #0b1210;
}

.aud-portal-dots { display: inline-flex; flex: none; gap: 5px; }

.aud-portal-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #29332f;
}

.aud-portal-url {
  flex: 1 1 auto;
  padding: 5px 11px;
  overflow: hidden;
  border: 1px solid #29332f;
  border-radius: 999px;
  background: #17211e;
  color: #adb7b2;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aud-portal-url b { color: #f8f1e7; font-weight: 600; }

.aud-portal-brand {
  flex: none;
  color: #de6378;
  font-size: 0.66rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* Shell: sidebar + main, the portal's own grid. */
.aud-portal-shell {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  min-height: 340px;
}

.aud-portal-rail {
  padding: 16px 12px;
  border-right: 1px solid #29332f;
  background: #0b1210;
}

.aud-portal-client {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 6px 14px;
  border-bottom: 1px solid #29332f;
}

.aud-portal-client i {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid #29332f;
  border-radius: 9px;
  background: #17211e;
  color: #de6378;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 820;
}

.aud-portal-client strong {
  display: block;
  color: #f8f1e7;
  font-size: 0.8rem;
  font-weight: 720;
  line-height: 1.2;
}

.aud-portal-client small {
  display: block;
  color: #adb7b2;
  font-size: 0.7rem;
  line-height: 1.25;
}

.aud-portal-nav {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}

/* A switched-off view leaves the rail entirely, and the flex display below
   would otherwise win over the UA `[hidden]` rule. */
.aud-portal-nav a[hidden] { display: none; }

/* The rail link, at the portal's real numbers. */
.aud-portal-nav a {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #adb7b2;
  font-size: 0.8rem;
  font-weight: 680;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 180ms cubic-bezier(.16, 1, .3, 1), border-color 180ms cubic-bezier(.16, 1, .3, 1), color 180ms cubic-bezier(.16, 1, .3, 1);
}

.aud-portal-nav a:hover {
  border-color: #45524d;
  background: #111916;
  color: #f8f1e7;
}

.aud-portal-nav a[aria-current="page"] {
  border-color: #6b4152;
  background: #241a1c;
  color: #de6378;
}

.aud-portal-nav a:focus-visible,
.aud-portal-switch:focus-visible {
  outline: 3px solid rgba(222, 99, 120, 0.3);
  outline-offset: 2px;
}

.aud-portal-nav a > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 18px;
  height: 18px;
}

.aud-portal-nav a > i svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aud-portal-nav a > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aud-portal-nav a > b {
  display: grid;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  place-items: center;
  border-radius: 999px;
  background: #31282a;
  font: 720 0.66rem/1 var(--aud-font-mono, ui-monospace, monospace);
}

/* Main pane */
.aud-portal-main { min-width: 0; padding: 16px; }

.aud-portal-eyebrow {
  margin: 0 0 12px;
  color: #de6378;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.64rem;
  font-weight: 760;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.aud-portal-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* ---- filled-out views ----------------------------------------------------
   Owner 2026-07-27: "it doesn't feel like a portal that's filled out."
   A portal with two sentences in it is a diagram. This fictional Northline
   demo uses generated catalog art and distinct illustrative field-test frames
   so it can show the product-to-footage interaction without posing as customer
   data. */

.aud-portal-split {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 16px;
}

/* The catalog rail: a thumbnail per product, because a product the client
   cannot recognize at a glance is a row in a database, not a catalog. */
.aud-portal-list {
  display: grid;
  align-content: start;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The row is the control: picking a product swaps the detail beside it, which
   is the reverse-search the product is actually for — start from the thing,
   land on the footage. So it is a real button, with the whole row as hit area. */
.aud-portal-list button {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 9px;
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color 160ms cubic-bezier(.16, 1, .3, 1), border-color 160ms cubic-bezier(.16, 1, .3, 1);
}

.aud-portal-list button:hover { border-color: #45524d; background: #111916; }

.aud-portal-list button:focus-visible {
  outline: 3px solid rgba(222, 99, 120, 0.3);
  outline-offset: 2px;
}

.aud-portal-list button[data-on="true"] {
  border-color: #6b4152;
  background: #241a1c;
}

.aud-portal-list img {
  flex: none;
  width: 54px;
  height: 34px;
  border-radius: 6px;
  object-fit: cover;
}

.aud-portal-list span { min-width: 0; }

.aud-portal-list b {
  display: block;
  overflow: hidden;
  color: #f8f1e7;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aud-portal-list small {
  display: block;
  color: #adb7b2;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  font-variant-numeric: tabular-nums;
}

.aud-portal-list button[data-on="true"] b { color: #de6378; }

/* A quiet label above a stack inside a view. */
.aud-portal-sub {
  margin: 0 0 7px;
  color: #adb7b2;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Only the picked product's detail is in the grid; the rest must actually
   leave, so the explicit [hidden] rule has to beat the grid display below. */
.aud-portal-detail[hidden] { display: none; }

.aud-portal-detail { display: grid; align-content: start; gap: 12px; }

/* The selected product opens into footage, not a second catalog grid. One
   dominant 16:9 frame carries the visual weight; the compact strip underneath
   behaves like the source-moment control in the real portal. */
.aud-portal-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.aud-portal-media-head .aud-portal-sub { margin: 0; }

.aud-portal-media-head > span {
  overflow: hidden;
  color: #7f8b86;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aud-portal-player {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #29332f;
  border-radius: 10px;
  background: #0c1211;
}

.aud-portal-player img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.aud-portal-player figcaption {
  position: absolute;
  right: 8px;
  bottom: 8px;
  left: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 9px;
  border: 1px solid rgba(248, 241, 231, 0.12);
  border-radius: 8px;
  background: rgba(10, 15, 14, 0.86);
  color: #f8f1e7;
}

.aud-portal-player figcaption b {
  overflow: hidden;
  font-size: 0.72rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aud-portal-player time,
.aud-portal-filmstrip time {
  color: #c5cec9;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.6rem;
  font-variant-numeric: tabular-nums;
}

.aud-portal-filmstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 7px;
}

.aud-portal-filmstrip button {
  display: grid;
  min-width: 0;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 4px;
  border: 1px solid #29332f;
  border-radius: 8px;
  background: #0c1211;
  color: #adb7b2;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 180ms cubic-bezier(.16, 1, .3, 1), background-color 180ms cubic-bezier(.16, 1, .3, 1);
}

.aud-portal-filmstrip button:hover {
  border-color: #45524d;
  background: #111916;
}

.aud-portal-filmstrip button:focus-visible {
  outline: 3px solid rgba(222, 99, 120, 0.3);
  outline-offset: 2px;
}

.aud-portal-filmstrip button[data-on="true"] {
  border-color: #6b4152;
  background: #241a1c;
}

.aud-portal-filmstrip button > img {
  display: block;
  width: 78px;
  height: 44px;
  aspect-ratio: 16 / 9;
  border-radius: 5px;
  object-fit: cover;
}

.aud-portal-filmstrip button > span { min-width: 0; }

.aud-portal-filmstrip b {
  display: block;
  overflow: hidden;
  margin-bottom: 2px;
  color: #f8f1e7;
  font-size: 0.66rem;
  font-weight: 680;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* margin:0 is load-bearing — the UA gives <figure> 40px side margins, which is
   wider than delivered-view columns and collapses the still to nothing. */
.aud-portal-shot {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #29332f;
  border-radius: 10px;
  background: #0c1211;
}

.aud-portal-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* A comment is only worth showing if you can see who said it and go read it. */
.aud-portal-comments {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aud-portal-comment {
  display: flex;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid #29332f;
  border-radius: 10px;
  background: #111916;
}

.aud-portal-comment > i {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #241a1c;
  color: #de6378;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 800;
}

.aud-portal-comment > div { min-width: 0; }

.aud-portal-comment p {
  margin: 0 0 3px;
  color: #f8f1e7;
  font-size: 0.78rem;
  line-height: 1.4;
}

.aud-portal-comment cite {
  color: #adb7b2;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  font-style: normal;
}

.aud-portal-comment cite b { color: #de6378; font-weight: 700; }

/* Insights feed: posts as rows, each with the still and its comment count. */
.aud-portal-feed {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aud-portal-feed li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid #29332f;
  border-radius: 10px;
  background: #111916;
}

.aud-portal-feed img {
  flex: none;
  width: 54px;
  height: 32px;
  border-radius: 6px;
  object-fit: cover;
}

/* Competitor rows carry a rank, not a thumbnail: these are other brands' videos
   and we do not hold their footage, so inventing a still for one would be
   dressing up a fabrication. The gap itself is the sell anyway. */
.aud-portal-rank {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #17211e;
  color: #adb7b2;
  font: 720 0.66rem/1 var(--aud-font-mono, ui-monospace, monospace);
  font-style: normal;
}

.aud-portal-feed span { min-width: 0; flex: 1 1 auto; }

.aud-portal-feed b {
  display: block;
  overflow: hidden;
  color: #f8f1e7;
  font-size: 0.76rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aud-portal-feed small {
  color: #adb7b2;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
}

.aud-portal-feed em {
  flex: none;
  color: #de6378;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.68rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 720;
}

/* Delivered: the shelf. Mostly picture, deliberately. */
.aud-portal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Assistant: a real exchange, grounded in the same catalog. */
.aud-portal-chat { display: grid; gap: 8px; }

.aud-portal-ask,
.aud-portal-said {
  max-width: min(88%, 62ch);
  margin: 0;
  padding: 10px 12px;
  font-size: 0.8rem;
  line-height: 1.5;
}

.aud-portal-ask {
  justify-self: end;
  border-radius: 12px 12px 4px 12px;
  background: #241a1c;
  color: #f8f1e7;
}

.aud-portal-said {
  justify-self: start;
  border: 1px solid #29332f;
  border-radius: 12px 12px 12px 4px;
  background: #111916;
  color: #adb7b2;
}

.aud-portal-said b { color: #f8f1e7; font-weight: 720; }

.aud-portal-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px;
  border: 1px solid #29332f;
  border-radius: 12px;
  background: #111916;
}

.aud-portal-card strong {
  color: #f8f1e7;
  font-size: 0.88rem;
  font-weight: 720;
  letter-spacing: -0.012em;
}

.aud-portal-card p {
  margin: 0;
  color: #adb7b2;
  font-size: 0.82rem;
  line-height: 1.5;
}

/* A real commenter line: the receipt is the point. */
.aud-portal-quote {
  margin: 2px 0 0;
  padding: 8px 10px;
  border-inline-start: 2px solid rgba(222, 99, 120, 0.55);
  border-radius: 0 8px 8px 0;
  background: #17211e;
  color: #f8f1e7;
  font-size: 0.8rem;
  line-height: 1.45;
}

.aud-portal-quote cite {
  display: block;
  margin-top: 4px;
  color: #adb7b2;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  font-style: normal;
}

.aud-portal-stat {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.aud-portal-stat b {
  color: #f8f1e7;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 1.3rem;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.aud-portal-stat span {
  color: #adb7b2;
  font-size: 0.76rem;
}

/* The switch row: the agency decides what the client sees. */
.aud-portal-switches {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 16px 16px;
  border-top: 1px solid #29332f;
  background: #0b1210;
}

.aud-portal-switch-label {
  width: 100%;
  margin: 0 0 2px;
  color: #adb7b2;
  font-size: 0.76rem;
}

.aud-portal-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid #29332f;
  border-radius: 999px;
  background: #111916;
  color: #adb7b2;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 680;
  cursor: pointer;
}

.aud-portal-switch i {
  width: 26px;
  height: 15px;
  padding: 2px;
  border-radius: 999px;
  background: #45524d;
  transition: background-color 160ms ease;
}

.aud-portal-switch i::after {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #0b1210;
  content: "";
  transition: margin-left 160ms cubic-bezier(.16, 1, .3, 1);
}

.aud-portal-switch[data-on="true"] {
  border-color: #6b4152;
  color: #f8f1e7;
}

.aud-portal-switch[data-on="true"] i { background: #de6378; }
.aud-portal-switch[data-on="true"] i::after { margin-left: 11px; }

/* ------------------------------------------------ the compounding ladder */

/* The rail fills as each rung lands, so the section performs the word
   "compounds" instead of only printing it. Its width is driven from script. */
.aud-compound-rail {
  overflow: hidden;
  height: 2px;
  margin-bottom: 16px;
  border-radius: 999px;
  background: var(--aud-light-line);
}

.aud-section-dark .aud-compound-rail,
.aud-section-wash .aud-compound-rail { background: rgba(248, 241, 231, 0.12); }

.aud-compound-rail i {
  display: block;
  width: var(--aud-compound-progress, 100%);
  height: 100%;
  border-radius: 999px;
  background: var(--aud-red);
  transition: width 620ms cubic-bezier(.16, 1, .3, 1);
}

.aud-compound {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.aud-compound li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--aud-light-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}

/* Only script arms the ladder, so with no JS every rung ships already landed
   rather than dimmed forever. */
.aud-compound[data-compound="armed"] li {
  opacity: 0.26;
  translate: 0 12px;
  transition: opacity 520ms ease, translate 520ms cubic-bezier(.16, 1, .3, 1), box-shadow 520ms ease;
}

.aud-compound[data-compound="armed"] li[data-landed="true"] {
  opacity: 1;
  translate: 0 0;
  box-shadow: 0 10px 26px rgba(23, 17, 14, 0.07);
}

.aud-section-dark .aud-compound li,
.aud-section-wash .aud-compound li {
  border-color: rgba(248, 241, 231, 0.12);
  background: rgba(255, 255, 255, 0.024);
}

/* ---- the rung visuals ----------------------------------------------------
   Owner 2026-07-27: the ladder needed to show what each rung actually
   produces, not just name it. Each visual is the artifact of its own step:
   the catalog is a grid of products, the footage is a frame with a timecode,
   the audience is the people who turned up under it, and memory is all of it
   stacked into one thing. Decorative, so they are aria-hidden and the copy
   below each still carries the meaning on its own. */
.aud-cv {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  margin-bottom: 12px;
  border: 1px solid var(--aud-light-line);
  border-radius: 10px;
  background: rgba(23, 17, 14, 0.06);
}

.aud-section-dark .aud-cv,
.aud-section-wash .aud-cv {
  border-color: rgba(248, 241, 231, 0.12);
  background: rgba(255, 255, 255, 0.03);
}

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

/* Catalog: four products at once. */
.aud-cv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}

/* Footage: one frame, and the second it was found at. */
.aud-cv-tc {
  position: absolute;
  right: 7px;
  bottom: 7px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(10, 15, 14, 0.86);
  color: #f8f1e7;
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.62rem;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

/* Audience: the people who showed up under it. */
.aud-cv-who {
  position: absolute;
  bottom: 7px;
  left: 7px;
  display: flex;
}

.aud-cv-who em {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1.5px solid #0a0f0e;
  border-radius: 50%;
  margin-right: -7px;
  background: #241a1c;
  color: #de6378;
  font-size: 0.56rem;
  font-style: normal;
  font-weight: 800;
}

/* Memory: the earlier rungs collapsed into one thing. */
.aud-cv-stack { display: grid; place-items: center; }

.aud-cv-stack img {
  position: absolute;
  width: 58%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: 7px;
  box-shadow: 0 5px 14px rgba(23, 17, 14, 0.22);
}

.aud-cv-stack img:nth-child(1) { rotate: -8deg; translate: -22% 0; }
.aud-cv-stack img:nth-child(2) { rotate: 4deg; translate: 0 6%; }
.aud-cv-stack img:nth-child(3) { rotate: 11deg; translate: 22% -4%; }

.aud-compound b {
  color: var(--aud-light-ink);
  font-family: var(--aud-font-display);
  font-size: 1.02rem;
  font-weight: 640;
  letter-spacing: -0.012em;
}

.aud-section-dark .aud-compound b,
.aud-section-wash .aud-compound b { color: #f8f1e7; }

.aud-compound p {
  margin: 0;
  color: var(--aud-light-muted);
  font-size: 0.9rem;
  line-height: 1.55;
}

.aud-section-dark .aud-compound p,
.aud-section-wash .aud-compound p { color: #b3ada3; }

.aud-compound span {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--aud-light-line);
  color: var(--aud-red-deep);
  font-family: var(--aud-font-mono, ui-monospace, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.aud-section-dark .aud-compound span,
.aud-section-wash .aud-compound span {
  border-top-color: rgba(248, 241, 231, 0.12);
  color: var(--aud-red);
}

@media (prefers-reduced-motion: reduce) {
  .aud-portal-nav a,
  .aud-portal-switch i,
  .aud-portal-switch i::after,
  .aud-portal-list button,
  .aud-portal-filmstrip button,
  .aud-compound-rail i,
  .aud-compound[data-compound="armed"] li { transition: none; }
}

@media (max-width: 1000px) {
  .aud-compound { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .aud-portal-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  /* The real portal collapses its rail below 980px; the mock narrows first. */
  .aud-portal-shell { grid-template-columns: 168px minmax(0, 1fr); }
  .aud-portal-cards { grid-template-columns: minmax(0, 1fr); }
  .aud-portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .aud-portal-shell { grid-template-columns: minmax(0, 1fr); }
  .aud-portal-rail { border-right: 0; border-bottom: 1px solid #29332f; }
  .aud-portal-nav { grid-auto-flow: column; grid-auto-columns: minmax(128px, auto); overflow-x: auto; }
  .aud-portal-nav a > b { display: none; }
  .aud-compound { grid-template-columns: minmax(0, 1fr); }
  .aud-portal-url { font-size: 0.64rem; }
  .aud-portal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aud-portal-filmstrip {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(180px, 70%);
    overflow-x: auto;
    padding-bottom: 4px;
    scroll-snap-type: x proximity;
  }
  .aud-portal-filmstrip button { scroll-snap-align: start; }
}