﻿/* ============================================================
   Vikas Hegde
   Abril Fatface for the loud voice, Archivo for the quiet one.
   Agency-roster brutalism: near-black, bone type, hard rules,
   enormous display, inverted bands. No boxes, no shadows.
   Dark is the default. Light is the alternate, via the switch.
   ============================================================ */

/* --paper is the page, --ink is the type. Dark is the default;
   the light set is the alternate. Names stay the same either way. */
:root {
  --paper:   oklch(0.145 0.006 60);
  --paper-2: oklch(0.195 0.008 62);
  --ink:     oklch(0.945 0.012 82);
  --ink-2:   oklch(0.680 0.016 72);
  --line:      oklch(0.360 0.012 68);
  --line-soft: oklch(0.945 0.012 82 / 0.16);
  --hot:       oklch(0.660 0.205 33);
  --grain-blend: screen;
  --grain-opacity: 0.07;
}

:root[data-theme="light"] {
  --paper:   oklch(0.930 0.018 75);
  --paper-2: oklch(0.895 0.024 76);
  --ink:     oklch(0.200 0.014 55);
  --ink-2:   oklch(0.470 0.018 58);
  --line:      oklch(0.200 0.014 55);
  --line-soft: oklch(0.200 0.014 55 / 0.18);
  --hot:       oklch(0.530 0.180 32);
  --grain-blend: multiply;
  --grain-opacity: 0.3;
}

:root {
  --rule: 1px solid var(--line);
  --rule-thick: 3px solid var(--line);

  --f-d: "Abril Fatface", Georgia, serif;
  --f-s: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(18px, 5.5vw, 90px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 68px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 var(--f-s);
  overflow-x: hidden;
  -webkit-tap-highlight-color: oklch(0.53 0.18 32 / 0.2);
}

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--hot); }
:where(a, button, input, textarea, summary):focus-visible { outline: 3px solid var(--hot); outline-offset: 2px; }

/* micro label, the only voice besides the display face */
.kicker, .role, .head .num, .group-h, .p-tags, .col h3, .f label, .kv dt, .chips a, .ticker span, .pk-n, .pk-c, .when, .stats dt, .foot .tiny {
  font-family: var(--f-s);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.skip {
  position: fixed; top: -70px; left: 12px; z-index: 60;
  background: var(--ink); color: var(--paper);
  padding: 14px 20px; font: 600 12px var(--f-s); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; transition: top 160ms var(--ease);
}
.skip:focus { top: 12px; }

/* ============================================================
   HEADER
   ============================================================ */
.bar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px var(--pad);
  padding-top: max(12px, env(safe-area-inset-top));
  background: var(--paper);
  border-bottom: var(--rule);
}
.mark {
  flex: none; font: 400 21px/1 var(--f-d); letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
}
.mark b { font-weight: 400; }
.mark span::after { content: " "; }

.chips {
  display: flex; align-items: center; gap: 18px; margin-left: auto;
  overflow-x: auto; scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chips a {
  flex: none; font-size: 11px; color: var(--ink-2); text-decoration: none;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.chips a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.chips a[aria-current] { color: var(--ink); border-bottom-color: var(--hot); }
.chips a.hot {
  background: var(--ink); color: var(--paper);
  padding: 10px 14px; border: 0;
}
.chips a.hot:hover { background: var(--hot); color: var(--paper); }

/* theme switch: a half-filled square, no icon set required */
.theme {
  flex: none; width: 40px; height: 40px; padding: 0;
  display: grid; place-items: center;
  background: transparent; border: var(--rule); cursor: pointer;
  transition: border-color 160ms var(--ease);
}
.theme span {
  width: 15px; height: 15px; border: 1px solid var(--ink);
  background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50%);
  transition: rotate 420ms var(--ease);
}
.theme:hover { border-color: var(--hot); }
.theme:hover span { rotate: 180deg; }

/* ============================================================
   HERO
   ============================================================ */
.hero { padding: clamp(28px, 7vw, 72px) var(--pad) 0; }

.kicker {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 clamp(18px, 4vw, 34px);
  font-size: 11px; color: var(--ink-2);
}
.led { width: 7px; height: 7px; flex: none; background: var(--hot); animation: blink 2.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.display {
  margin: 0 0 clamp(14px, 3vw, 26px);
  font: 400 clamp(58px, 17.5vw, 210px)/0.84 var(--f-d);
  letter-spacing: -0.025em;
}
.role { margin: 0 0 clamp(20px, 4vw, 32px); font-size: 12px; color: var(--ink-2); }
.sub {
  max-width: 46ch; margin: 0 0 clamp(24px, 4vw, 36px);
  font-size: clamp(18px, 2.2vw, 22px); line-height: 1.45;
}

.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 clamp(32px, 6vw, 56px); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 16px 30px;
  background: transparent; color: var(--ink);
  border: var(--rule); cursor: pointer;
  font: 600 12px/1 var(--f-s); letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.hot { background: var(--ink); color: var(--paper); }
.btn.hot:hover { background: var(--hot); color: var(--paper); }

/* stats: hairline-divided columns, numerals in the display face */
.stats {
  display: grid; grid-template-columns: 1fr 1fr;
  margin: 0; border-top: var(--rule-thick); border-left: var(--rule);
}
.stats div { padding: 16px 14px 14px; border-right: var(--rule); border-bottom: var(--rule); }
.stats dt { font-size: 10px; color: var(--ink-2); }
.stats dd {
  margin: 4px 0 0; font: 400 clamp(44px, 11vw, 76px)/0.9 var(--f-d);
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  margin: clamp(28px, 6vw, 56px) 0 0;
  padding: 14px 0;
  background: var(--ink); color: var(--paper);
  overflow: hidden;
}
.ticker > div { display: flex; width: max-content; animation: roll 34s linear infinite; }
.ticker span { font-size: 11px; white-space: nowrap; }
@keyframes roll { to { transform: translateX(-50%); } }

/* ============================================================
   SECTIONS
   ============================================================ */
.sect { padding: clamp(34px, 6vw, 64px) var(--pad) clamp(40px, 7vw, 78px); }
.sect.alt { background: var(--paper-2); }

.head {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 clamp(18px, 3vw, 30px); padding-bottom: 12px;
  border-bottom: var(--rule-thick);
  font: 400 clamp(34px, 7vw, 68px)/0.95 var(--f-d);
  letter-spacing: -0.02em;
}
.head .num { flex: none; font-size: 11px; color: var(--ink-2); letter-spacing: 0.2em; }
.intro { max-width: 58ch; margin: 0 0 clamp(20px, 3vw, 30px); color: var(--ink-2); font-size: 17px; }

/* ---------------- work: the index ---------------- */
.picker { border-top: var(--rule); margin: 0 0 4px; }
.pick {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: 46px 1fr auto auto; align-items: center; gap: 0 14px;
  width: 100%; min-height: 68px; padding: 18px 16px 18px 4px;
  background: transparent; border: 0; border-bottom: var(--rule);
  color: var(--ink); text-align: left; cursor: pointer;
  transition: color 220ms var(--ease);
}
/* the ink sweeps across from the left instead of snapping on */
.pick::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform 460ms var(--ease);
}
.pick:hover::before, .pick[aria-expanded="true"]::before { transform: scaleX(1); }
.pick:hover, .pick[aria-expanded="true"] { color: var(--paper); }
.pk-n, .pk-c { font-size: 11px; color: var(--ink-2); transition: color 220ms var(--ease); }
.pick:hover :is(.pk-n, .pk-c), .pick[aria-expanded="true"] :is(.pk-n, .pk-c) { color: var(--paper); opacity: 0.65; }
.pk-l { font: 400 clamp(22px, 4.5vw, 34px)/1.05 var(--f-d); letter-spacing: -0.015em; }
.pk-a {
  font-size: 20px; line-height: 1; margin-left: 10px;
  opacity: 0; translate: -10px 0;
  transition: opacity 300ms var(--ease), translate 300ms var(--ease);
}
.pick:hover .pk-a, .pick[aria-expanded="true"] .pk-a { opacity: 1; translate: 0 0; }
.pick[aria-expanded="true"] .pk-a { rotate: 90deg; }

.pick-hint { margin: 16px 0 0; color: var(--ink-2); font-size: 15px; }

/* the panel opens directly under its own button, so the pick's bottom rule
   already separates them and the rows just continue the ruled list */
.group { scroll-margin-top: 76px; }
.group[hidden] { display: none; }
.group-h { display: none; }

.items { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.cat .item { padding-left: 12px; background: var(--paper-2); }
.cat .item:hover { background: var(--line-soft); }
.item { border-bottom: var(--rule); transition: background 200ms var(--ease); }
.item:hover { background: var(--paper-2); }
.item-head, .item summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 4px 12px; align-items: baseline;
  padding: 18px 4px;
}
.p-n { grid-column: 1; grid-row: 1 / span 3; font: 600 11px var(--f-s); letter-spacing: 0.16em; color: var(--ink-2); }
.p-title, .p-blurb, .p-tags { grid-column: 2; }
.item summary {
  cursor: pointer; list-style: none; position: relative; padding-right: 44px;
  transition: padding-left 260ms var(--ease);
}
.item summary:hover { padding-left: 14px; }
.item summary::-webkit-details-marker { display: none; }
.item summary::after {
  content: "+";
  position: absolute; right: 6px; top: 17px;
  font: 400 26px/1 var(--f-s); color: var(--ink-2);
  transition: rotate 240ms var(--ease), color 160ms var(--ease);
}
.item summary:hover::after { color: var(--hot); }
.item details[open] summary::after { content: "â€“"; rotate: 180deg; color: var(--hot); }

.p-title { font: 600 clamp(19px, 2.6vw, 24px)/1.2 var(--f-s); letter-spacing: -0.01em; }
.p-blurb { max-width: 62ch; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.p-tags { display: flex; flex-wrap: wrap; gap: 0 14px; margin-top: 6px; }
.p-tags b { font-size: 10px; font-weight: 600; color: var(--ink-2); }
.p-tags b + b::before { content: "/ "; opacity: 0.5; }
.item-body { padding: 0 4px 22px 56px; }
.item-body p { max-width: 64ch; margin: 0 0 12px; font-size: 16.5px; color: var(--ink-2); }
.item-body p:last-child { margin-bottom: 0; }
details[open] .item-body p { animation: fadein 300ms var(--ease) both; }
@keyframes fadein { from { opacity: 0; translate: 0 -5px; } }

/* ---------------- experience ---------------- */
.path { list-style: none; margin: 0; padding: 0; border-top: var(--rule); counter-reset: role; }
.path > li { padding: 22px 0; border-bottom: var(--rule); counter-increment: role; }
.path p { margin: 0; }
.x-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.x-h b { font: 400 clamp(24px, 4.6vw, 40px)/1.05 var(--f-d); letter-spacing: -0.02em; font-weight: 400; }
.x-h b::before { content: counter(role, decimal-leading-zero) " "; font: 600 11px var(--f-s); letter-spacing: .2em; color: var(--ink-2); vertical-align: 0.4em; }
.when { margin-left: auto !important; font-size: 11px; color: var(--ink-2); }
.x-o { margin: 4px 0 10px !important; font-size: 13px; font-weight: 600; }
.x-t { max-width: 66ch; color: var(--ink-2); font-size: 16.5px; }
.dot { display: none; }
.x-h .dot.live { display: inline-block; width: 7px; height: 7px; background: var(--hot); align-self: center; animation: blink 2.4s steps(1) infinite; }

/* ---------------- stack: a spec sheet, not a box of chips ---------------- */
.cols { display: grid; gap: clamp(26px, 4vw, 40px); }
.col h3 { margin: 0 0 12px; padding-bottom: 8px; border-bottom: var(--rule); font-size: 11px; }

.specs { border-top: var(--rule-thick); }
.spec { padding: clamp(20px, 3vw, 32px) 0; border-bottom: var(--rule); }
.spec h3 { margin: 0 0 10px; font-size: 11px; color: var(--ink-2); }
.spec-list { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; }
.spec-list span {
  font: 400 clamp(20px, 2.8vw, 31px)/1.3 var(--f-s);
  letter-spacing: -0.015em;
  color: var(--ink);
  transition: color 160ms var(--ease), opacity 160ms var(--ease);
}
.spec-list span::after {
  content: "/";
  margin: 0 0.42em; color: var(--ink-2); opacity: 0.55;
  font-size: 0.72em; vertical-align: 0.06em;
}
.spec-list span:last-child::after { content: none; }
.spec-list:hover span { opacity: 0.42; }
.spec-list span:hover { opacity: 1; color: var(--hot); }

/* ---------------- about ---------------- */
.edu { margin: 0 0 14px; color: var(--ink-2); font-size: 16.5px; }
.edu b { color: var(--ink); font-weight: 600; }
.dashed { list-style: none; margin: 0 0 18px; padding: 0; border-top: var(--rule); }
.dashed li { padding: 11px 0; border-bottom: 1px solid var(--line-soft); font-size: 16px; color: var(--ink-2); }

.wins { list-style: none; margin: 0; padding: 0; border-top: var(--rule); }
.wins li {
  display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: baseline;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}
.wins span { font: 600 11px var(--f-s); letter-spacing: 0.14em; color: var(--hot); }

/* ---------------- contact ---------------- */
/* the address is the whole call to action, so it gets display type */
.mailto {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: clamp(18px, 3vw, 30px) 0 clamp(28px, 5vw, 48px);
  padding: clamp(16px, 2.6vw, 28px) 0;
  border-top: var(--rule-thick); border-bottom: var(--rule-thick);
  text-decoration: none; color: var(--ink);
  transition: color 220ms var(--ease), padding-left 320ms var(--ease);
}
.mailto span {
  font: 400 clamp(23px, 5.6vw, 62px)/1 var(--f-d);
  letter-spacing: -0.025em; word-break: break-word;
}
.mailto b {
  flex: none; font: 400 clamp(20px, 3vw, 34px)/1 var(--f-s);
  opacity: 0; translate: -12px 0;
  transition: opacity 280ms var(--ease), translate 280ms var(--ease);
}
.mailto:hover { color: var(--hot); padding-left: clamp(8px, 1.6vw, 18px); }
.mailto:hover b { opacity: 1; translate: 0 0; }

.card {
  display: grid; gap: 2px;
  padding: 18px 0; border-bottom: var(--rule);
  text-decoration: none; color: var(--ink);
  transition: padding-left 200ms var(--ease);
}
.card:first-of-type { border-top: var(--rule); }
.card:hover { padding-left: 12px; color: var(--ink); }
.card b { font: 400 clamp(22px, 3.4vw, 30px)/1.15 var(--f-d); letter-spacing: -0.015em; font-weight: 400; }
.card:hover b { color: var(--hot); }
.card span { font-size: 14px; color: var(--ink-2); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 24px 0 0; font-size: 16px; }
.kv dt { font-size: 10px; color: var(--ink-2); }
.kv dd { margin: 0; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  padding: clamp(34px, 6vw, 60px) var(--pad) calc(clamp(34px, 6vw, 60px) + env(safe-area-inset-bottom));
  background: var(--ink); color: var(--paper);
  font-size: 15px;
}
.foot .mark { display: block; margin: 0 0 14px; font-size: clamp(34px, 8vw, 64px); color: var(--paper); }
.foot p { margin: 0 0 6px; }
.foot a { color: var(--paper); }
.foot a:hover { color: var(--hot); }
.foot .tiny { margin-top: 16px; font-size: 10px; opacity: 0.6; }

/* ============================================================
   THE OPENING, THE TEXTURE, THE CURSOR
   ============================================================ */

/* curtain: one short beat before the page, once per session */
.curtain { display: none; }
.intro .curtain {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 100;
  background: var(--ink);
  animation: c-lift 760ms var(--ease) 1020ms both;
}
.curtain-name { margin: 0; font: 400 clamp(30px, 7vw, 76px)/1 var(--f-d); color: var(--paper); }
.intro .curtain-name { animation: c-name 720ms var(--ease) 100ms both; }
.curtain-bar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 4px;
  background: var(--hot); transform-origin: left;
}
.intro .curtain-bar { animation: c-bar 980ms var(--ease) both; }
@keyframes c-name { from { opacity: 0; transform: translateY(18px); } }
@keyframes c-bar  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes c-lift { to { transform: translateY(-101%); } }

/* paper grain. static texture, transform-only drift */
.grain {
  position: fixed; inset: -60px; z-index: 80; pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
  animation: grain 6s steps(5) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-12px, 6px); }
  40%  { transform: translate(9px, -10px); }
  60%  { transform: translate(-7px, -6px); }
  80%  { transform: translate(11px, 8px); }
}

/* scroll progress, hairline, top of the viewport */
.progress {
  position: fixed; top: 0; left: 0; z-index: 55;
  width: 100%; height: 3px; background: var(--hot);
  transform: scaleX(0); transform-origin: left;
}

/* custom cursor, desktop pointers only. difference blend inverts over ink */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; top: 0; left: 0; z-index: 90;
    pointer-events: none; mix-blend-mode: difference; opacity: 0;
    transition: opacity 200ms var(--ease);
  }
  .cursor.on { opacity: 1; }
  .cursor > span {
    display: block; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    background: #fff; border-radius: 50%;
    transition: transform 260ms var(--ease);
  }
  .cursor.big > span { transform: scale(2.4); }
  .cursor::after {
    content: attr(data-label);
    position: absolute; left: 18px; top: -7px; white-space: nowrap;
    font: 600 10px var(--f-s); letter-spacing: 0.16em; text-transform: uppercase; color: #fff;
    opacity: 0; transition: opacity 180ms var(--ease);
  }
  .cursor.labelled::after { opacity: 1; }
}

/* statement band: the page stops and says one thing */
.statement {
  padding: clamp(60px, 11vw, 130px) var(--pad);
  background: var(--ink); color: var(--paper);
}
.statement p {
  margin: 0; max-width: 17ch;
  font: 400 clamp(32px, 6.6vw, 82px)/1.04 var(--f-d);
  letter-spacing: -0.025em;
}

/* masked type: each line or word slides up out of its own box */
.lm { display: block; overflow: hidden; }
.wm { display: inline-block; overflow: hidden; vertical-align: bottom; }
.js .lm > span, .js .wm > span {
  display: block; will-change: transform;
  transform: translateY(110%);
  transition: transform 900ms var(--ease);
}
.js .mask.in .lm > span, .js .mask.in .wm > span { transform: none; }

/* ============================================================
   REVEAL
   ============================================================ */
.js .mask { opacity: 1 !important; translate: none !important; }
.js .rv { opacity: 0; translate: 0 14px; }
.js .rv.in { opacity: 1; translate: 0; transition: opacity 520ms var(--ease), translate 520ms var(--ease); }
.js .rv.in:nth-child(2) { transition-delay: 70ms; }
.js .rv.in:nth-child(3) { transition-delay: 140ms; }
.js .rv.in:nth-child(4) { transition-delay: 210ms; }

/* ============================================================
   LARGER SCREENS
   ============================================================ */
@media (min-width: 700px) {
  .stats { grid-template-columns: repeat(4, 1fr); }
  .cols { grid-template-columns: repeat(3, 1fr); }
  .cols.two { grid-template-columns: 1fr 1fr; gap: clamp(34px, 5vw, 64px); }
  /* roster row: number in the margin, name and line in the middle, kit on the right */
  .item-head, .item summary {
    grid-template-columns: 52px minmax(0, 1fr) minmax(0, 230px);
    gap: 4px 26px; padding: 22px 4px;
  }
  .item .p-title { grid-column: 2; grid-row: 1; }
  .item .p-blurb { grid-column: 2; grid-row: 2; }
  .item .p-tags  { grid-column: 3; grid-row: 1 / span 2; justify-content: flex-end; text-align: right; align-content: start; margin-top: 4px; }
  .item summary { padding-right: 52px; }
  .item-body { padding: 0 4px 26px 78px; }
}

@media (min-width: 1024px) {
  .sub { font-size: 23px; }
  .cols.two { grid-template-columns: 1fr 1fr; }
  .item-head, .item summary { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 280px); gap: 4px 40px; }
  .spec { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 30px; align-items: baseline; }
  .spec h3 { margin: 0; }
}

/* ============================================================
   REDUCED MOTION / PRINT
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .js .rv { opacity: 1; translate: none; }
  .js .lm > span, .js .wm > span { transform: none; }
  .grain, .cursor, .curtain { display: none !important; }
}

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .bar, .ticker, .skip, .form, .picker, .pick-hint { display: none !important; }
  .sect, .sect.alt { padding: 0 0 16pt; background: none; }
  .group[hidden] { display: block !important; }
  .group-h { display: block !important; font-size: 11pt; margin: 12pt 0 4pt; }
  .item summary::after { display: none; }
  .js .rv { opacity: 1 !important; translate: none !important; }
  .foot { background: none; color: #000; }
  a { color: #000; }
}

