/* ============================================================
   MEDATLAS LEARNING MINDS
   ATLAS PUBLIC
   PUBLIC LEARNING LIBRARY

   Presentation layer only.
   ============================================================ */


:root {

  --navy:
    #14213d;

  --navy-deep:
    #0d1830;

  --navy-soft:
    #263654;

  --navy-muted:
    #42516a;

  --gold:
    #ad7a20;

  --gold-deep:
    #8d6118;

  --gold-soft:
    #d7b56f;

  --ivory:
    #faf7ef;

  --ivory-deep:
    #f1eadc;

  --paper:
    #fffdf8;

  --white:
    #ffffff;

  --ink:
    #1d2a42;

  --muted:
    #6b7688;

  --line:
    rgba(
      20,
      33,
      61,
      0.10
    );

  --gold-line:
    rgba(
      173,
      122,
      32,
      0.22
    );

  --gold-line-strong:
    rgba(
      173,
      122,
      32,
      0.38
    );

  --paper-glass:
    rgba(
      255,
      253,
      248,
      0.78
    );

  --shadow-soft:
    0 18px 50px
    rgba(
      25,
      31,
      45,
      0.07
    );

  --shadow-card:
    0 24px 60px
    rgba(
      25,
      31,
      45,
      0.10
    );

  --shadow-deep:
    0 34px 90px
    rgba(
      13,
      24,
      48,
      0.18
    );

  --radius:
    22px;

  --radius-small:
    14px;
}


/* ============================================================
   RESET
   ============================================================ */


* {

  box-sizing:
    border-box;
}


html {

  min-height:
    100%;

  scroll-behavior:
    smooth;

  background:
    var(--ivory);
}


body {

  margin:
    0;

  min-height:
    100vh;

  color:
    var(--ink);

  background:

    radial-gradient(
      circle at 82% -5%,
      rgba(
        215,
        181,
        111,
        0.16
      ),
      transparent 29%
    ),

    radial-gradient(
      circle at 5% 18%,
      rgba(
        255,
        255,
        255,
        0.95
      ),
      transparent 27%
    ),

    linear-gradient(
      135deg,
      var(--paper) 0%,
      var(--ivory) 46%,
      var(--ivory-deep) 100%
    );

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}


button,
input,
select {

  font:
    inherit;
}


button {

  color:
    inherit;
}


a {

  color:
    inherit;
}


img {

  display:
    block;

  max-width:
    100%;
}


main {

  overflow:
    hidden;
}


/* ============================================================
   ACCESSIBILITY
   ============================================================ */


.sr-only {

  position:
    absolute;

  width:
    1px;

  height:
    1px;

  padding:
    0;

  margin:
    -1px;

  overflow:
    hidden;

  clip:
    rect(
      0,
      0,
      0,
      0
    );

  white-space:
    nowrap;

  border:
    0;
}


:focus-visible {

  outline:
    3px solid
    rgba(
      173,
      122,
      32,
      0.48
    );

  outline-offset:
    3px;
}


/* ============================================================
   HEADER
   ============================================================ */


.site-header {

  position:
    relative;

  z-index:
    50;

  width:
    min(
      1460px,
      calc(100% - 48px)
    );

  min-height:
    78px;

  margin:
    0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    32px;

  border-bottom:
    1px solid
    var(--gold-line);
}


.brand {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    12px;

  flex:
    0 0 auto;

  text-decoration:
    none;
}


.brand-seal {

  width:
    45px;

  height:
    45px;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 6px 12px
      rgba(
        13,
        24,
        48,
        0.08
      )
    );
}


.brand-copy {

  display:
    flex;

  flex-direction:
    column;

  line-height:
    1;
}


.brand-copy strong {

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    16px;

  font-weight:
    600;

  letter-spacing:
    0.035em;
}


.brand-copy > span {

  margin-top:
    6px;

  color:
    var(--gold);

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    0.18em;

  text-transform:
    uppercase;
}


.site-nav {

  margin-left:
    auto;

  display:
    flex;

  align-items:
    center;

  gap:
    22px;
}


.site-nav > a {

  position:
    relative;

  padding:
    29px 0 27px;

  color:
    var(--navy-muted);

  text-decoration:
    none;

  font-size:
    11px;

  font-weight:
    700;

  letter-spacing:
    0.015em;

  transition:
    color 160ms ease;
}


.site-nav > a::after {

  content:
    "";

  position:
    absolute;

  left:
    50%;

  bottom:
    17px;

  width:
    0;

  height:
    1px;

  background:
    var(--gold);

  transform:
    translateX(-50%);

  transition:
    width 180ms ease;
}


.site-nav > a:hover,
.site-nav > a[aria-current="page"] {

  color:
    var(--gold-deep);
}


.site-nav > a:hover::after,
.site-nav > a[aria-current="page"]::after {

  width:
    100%;
}


/* ============================================================
   THEME TOGGLE
   ============================================================ */


.theme-toggle {

  min-height:
    37px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    7px;

  padding:
    0 12px;

  border:
    1px solid
    var(--gold-line);

  border-radius:
    999px;

  color:
    var(--navy);

  background:
    rgba(
      255,
      255,
      255,
      0.58
    );

  cursor:
    pointer;

  font-size:
    9px;

  font-weight:
    750;

  box-shadow:
    0 5px 18px
    rgba(
      13,
      24,
      48,
      0.035
    );

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}


.theme-toggle:hover {

  transform:
    translateY(-1px);

  border-color:
    var(--gold-line-strong);

  background:
    rgba(
      255,
      255,
      255,
      0.86
    );
}


#themeIcon {

  color:
    var(--gold);

  font-size:
    14px;
}


/* ============================================================
   HERO
   ============================================================ */


.hero {

  position:
    relative;

  width:
    min(
      1360px,
      calc(100% - 64px)
    );

  min-height:
    660px;

  margin:
    0 auto;

  padding:
    105px 0 110px;

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1.35fr
    )
    minmax(
      340px,
      0.65fr
    );

  gap:
    clamp(
      60px,
      8vw,
      130px
    );

  align-items:
    center;
}


.hero::before {

  content:
    "";

  position:
    absolute;

  width:
    640px;

  height:
    640px;

  right:
    -330px;

  top:
    -230px;

  border:
    1px solid
    rgba(
      173,
      122,
      32,
      0.08
    );

  border-radius:
    50%;

  box-shadow:

    inset 0 0 0 80px
    rgba(
      173,
      122,
      32,
      0.014
    ),

    inset 0 0 0 160px
    rgba(
      173,
      122,
      32,
      0.010
    );

  pointer-events:
    none;
}


.hero-copy {

  position:
    relative;

  z-index:
    2;
}


.eyebrow,
.section-kicker {

  display:
    inline-block;

  margin:
    0 0 15px;

  color:
    var(--gold);

  font-size:
    9px;

  font-weight:
    850;

  letter-spacing:
    0.19em;

  text-transform:
    uppercase;
}


.hero h1 {

  margin:
    0;

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      4.6rem,
      8.5vw,
      8.6rem
    );

  font-weight:
    500;

  line-height:
    0.84;

  letter-spacing:
    -0.065em;
}


.hero h1 em {

  display:
    block;

  margin-top:
    18px;

  color:
    var(--gold);

  font-size:
    0.64em;

  font-weight:
    400;

  line-height:
    1;

  letter-spacing:
    -0.04em;
}


.hero-lead {

  max-width:
    780px;

  margin:
    38px 0 0;

  color:
    var(--navy-muted);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1.18rem,
      2vw,
      1.52rem
    );

  line-height:
    1.62;
}


.hero-actions {

  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    11px;

  margin-top:
    31px;
}


/* ============================================================
   BUTTONS
   ============================================================ */


.primary-btn,
.secondary-btn {

  min-height:
    46px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 19px;

  border-radius:
    999px;

  text-decoration:
    none;

  font-size:
    11px;

  font-weight:
    750;

  cursor:
    pointer;

  transition:
    transform 170ms ease,
    box-shadow 170ms ease,
    border-color 170ms ease,
    background 170ms ease;
}


.primary-btn {

  border:
    1px solid
    var(--navy);

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-deep)
    );

  box-shadow:
    0 12px 30px
    rgba(
      13,
      24,
      48,
      0.16
    );
}


.secondary-btn {

  border:
    1px solid
    var(--gold-line);

  color:
    var(--navy);

  background:
    rgba(
      255,
      255,
      255,
      0.60
    );
}


.primary-btn:hover,
.secondary-btn:hover {

  transform:
    translateY(-2px);
}


.primary-btn:hover {

  box-shadow:
    0 18px 38px
    rgba(
      13,
      24,
      48,
      0.21
    );
}


.secondary-btn:hover {

  border-color:
    var(--gold-line-strong);

  background:
    rgba(
      255,
      255,
      255,
      0.92
    );
}


/* ============================================================
   HERO PRINCIPLES
   ============================================================ */


.hero-principles {

  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    12px;

  margin-top:
    38px;

  color:
    var(--muted);

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;
}


.hero-principles i {

  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    var(--gold-soft);
}


/* ============================================================
   HERO SEAL
   ============================================================ */


.hero-seal-panel {

  position:
    relative;

  min-height:
    430px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.hero-seal-panel::before {

  content:
    "";

  position:
    absolute;

  width:
    400px;

  height:
    400px;

  border:
    1px solid
    rgba(
      173,
      122,
      32,
      0.13
    );

  border-radius:
    50%;

  box-shadow:

    inset 0 0 0 30px
    rgba(
      255,
      255,
      255,
      0.20
    ),

    0 25px 70px
    rgba(
      13,
      24,
      48,
      0.045
    );
}


.hero-seal-panel::after {

  content:
    "";

  position:
    absolute;

  width:
    330px;

  height:
    330px;

  border:
    1px solid
    rgba(
      20,
      33,
      61,
      0.055
    );

  border-radius:
    50%;
}


.hero-seal-ring {

  position:
    relative;

  z-index:
    3;

  width:
    225px;

  height:
    225px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(
      173,
      122,
      32,
      0.32
    );

  border-radius:
    50%;

  background:

    radial-gradient(
      circle,
      rgba(
        255,
        255,
        255,
        0.96
      ),
      rgba(
        250,
        247,
        239,
        0.76
      )
    );

  box-shadow:

    0 22px 55px
    rgba(
      13,
      24,
      48,
      0.10
    ),

    inset 0 0 0 8px
    rgba(
      173,
      122,
      32,
      0.035
    );
}


.hero-seal-ring img {

  width:
    178px;

  height:
    178px;

  object-fit:
    contain;

  filter:
    drop-shadow(
      0 10px 16px
      rgba(
        13,
        24,
        48,
        0.10
      )
    );
}


.hero-seal-kicker {

  position:
    relative;

  z-index:
    3;

  margin-top:
    29px;

  color:
    var(--gold);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.20em;
}


.hero-seal-panel > strong {

  position:
    relative;

  z-index:
    3;

  margin-top:
    7px;

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    25px;

  font-weight:
    500;
}


.hero-seal-panel > small {

  position:
    relative;

  z-index:
    3;

  margin-top:
    7px;

  color:
    var(--muted);

  font-size:
    9px;

  letter-spacing:
    0.04em;
}


/* ============================================================
   ARCHITECTURE PANEL
   ============================================================ */


.figure8-panel {

  position:
    relative;

  padding:

    95px
    max(
      32px,
      calc(
        (100vw - 1320px) / 2
      )
    );

  color:
    #ffffff;

  background:

    radial-gradient(
      circle at 88% 15%,
      rgba(
        215,
        181,
        111,
        0.15
      ),
      transparent 29%
    ),

    radial-gradient(
      circle at 8% 80%,
      rgba(
        255,
        255,
        255,
        0.045
      ),
      transparent 30%
    ),

    linear-gradient(
      135deg,
      var(--navy-deep),
      var(--navy) 58%,
      #203451
    );
}


.figure8-panel::before {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background-image:

    linear-gradient(
      rgba(
        255,
        255,
        255,
        0.018
      )
      1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.018
      )
      1px,
      transparent 1px
    );

  background-size:
    48px 48px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      #000 20%,
      #000 80%,
      transparent
    );
}


.figure8-copy {

  position:
    relative;

  z-index:
    2;

  max-width:
    900px;
}


.figure8-copy .section-kicker {

  color:
    var(--gold-soft);
}


.figure8-copy h2 {

  margin:
    0;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.7rem,
      5vw,
      4.8rem
    );

  font-weight:
    500;

  line-height:
    1.04;

  letter-spacing:
    -0.045em;
}


.figure8-copy h2 em {

  display:
    block;

  margin-top:
    6px;

  color:
    var(--gold-soft);

  font-weight:
    400;
}


.figure8-copy p {

  max-width:
    800px;

  margin:
    25px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.65
    );

  font-size:
    13px;

  line-height:
    1.8;
}


/* ============================================================
   ROUTE
   ============================================================ */


.figure8-route {

  position:
    relative;

  z-index:
    2;

  margin-top:
    58px;

  display:
    grid;

  grid-template-columns:
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr auto
    1fr;

  gap:
    10px;

  align-items:
    center;
}


.route-node {

  min-height:
    145px;

  padding:
    20px 17px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}


.route-node:hover {

  transform:
    translateY(-3px);

  border-color:
    rgba(
      215,
      181,
      111,
      0.26
    );

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


.route-node small {

  color:
    var(--gold-soft);

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.14em;
}


.route-node strong {

  margin-top:
    22px;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    17px;

  font-weight:
    500;
}


.route-node span {

  margin-top:
    7px;

  color:
    rgba(
      255,
      255,
      255,
      0.50
    );

  font-size:
    8px;

  line-height:
    1.4;
}


.route-node-active {

  border-color:
    rgba(
      215,
      181,
      111,
      0.43
    );

  background:

    linear-gradient(
      145deg,
      rgba(
        215,
        181,
        111,
        0.15
      ),
      rgba(
        255,
        255,
        255,
        0.045
      )
    );

  box-shadow:
    inset 0 0 0 1px
    rgba(
      215,
      181,
      111,
      0.05
    );
}


.figure8-route > b {

  color:
    rgba(
      215,
      181,
      111,
      0.60
    );

  font-size:
    15px;

  font-weight:
    400;
}


/* ============================================================
   LIBRARY SECTIONS
   ============================================================ */


.library-section {

  width:
    min(
      1360px,
      calc(100% - 64px)
    );

  margin:
    0 auto;

  padding:
    110px 0;
}


.section-title-row {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    minmax(
      300px,
      0.58fr
    );

  gap:
    60px;

  align-items:
    end;

  margin-bottom:
    46px;
}


.section-title-row h2,
.collection-heading h2,
.governance-panel h2 {

  margin:
    0;

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      2.5rem,
      4.7vw,
      4.5rem
    );

  font-weight:
    500;

  line-height:
    1.06;

  letter-spacing:
    -0.045em;
}


.section-title-row > p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.75;
}


/* ============================================================
   SPECIALTY SUITE GRID
   ============================================================ */


.suite-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    16px;
}


/* ============================================================
   SPECIALTY SUITE CARD
   ============================================================ */


.suite-card {

  position:
    relative;

  min-width:
    0;

  min-height:
    390px;

  overflow:
    hidden;

  padding:
    0;

  display:
    grid;

  grid-template-rows:
    215px 1fr;

  border:
    1px solid
    var(--gold-line);

  border-radius:
    20px;

  color:
    var(--ink);

  text-align:
    left;

  background:

    radial-gradient(
      circle at 50% 16%,
      rgba(
        215,
        181,
        111,
        0.10
      ),
      transparent 34%
    ),

    linear-gradient(
      155deg,
      rgba(
        255,
        255,
        255,
        0.96
      ),
      rgba(
        250,
        247,
        239,
        0.86
      )
    );

  box-shadow:
    0 9px 28px
    rgba(
      13,
      24,
      48,
      0.045
    );

  cursor:
    pointer;

  isolation:
    isolate;

  transition:

    transform 190ms ease,
    box-shadow 190ms ease,
    border-color 190ms ease,
    background 190ms ease;
}


.suite-card::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    50%;

  width:
    68px;

  height:
    2px;

  z-index:
    6;

  background:
    var(--gold);

  transform:
    translateX(-50%);

  opacity:
    0.72;

  transition:
    width 190ms ease,
    opacity 190ms ease;
}


.suite-card::after {

  content:
    "";

  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  background:

    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0
      )
      0%,

      rgba(
        255,
        255,
        255,
        0.08
      )
      48%,

      rgba(
        255,
        253,
        248,
        0.55
      )
      100%
    );
}


.suite-card:hover {

  transform:
    translateY(-6px);

  border-color:
    var(--gold-line-strong);

  box-shadow:
    var(--shadow-card);
}


.suite-card:hover::before {

  width:
    112px;

  opacity:
    1;
}


.suite-card-active {

  border-color:
    rgba(
      173,
      122,
      32,
      0.55
    );

  background:

    radial-gradient(
      circle at 50% 14%,
      rgba(
        215,
        181,
        111,
        0.18
      ),
      transparent 38%
    ),

    linear-gradient(
      155deg,
      #ffffff,
      #f8f1e4
    );

  box-shadow:
    0 20px 50px
    rgba(
      13,
      24,
      48,
      0.10
    );
}


.suite-card-active::before {

  width:
    118px;

  opacity:
    1;
}


/* ============================================================
   SPECIALTY MANIFESTATION FIELD

   Intentionally isolated above typography.
   The visual gets its own clean stage and does not muddy copy.
   ============================================================ */


.suite-manifest {

  position:
    relative;

  z-index:
    2;

  width:
    100%;

  height:
    215px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  overflow:
    hidden;

  pointer-events:
    none;

  border-bottom:
    1px solid
    rgba(
      173,
      122,
      32,
      0.10
    );

  background:

    radial-gradient(
      circle at center,
      rgba(
        255,
        255,
        255,
        0.94
      )
      0%,

      rgba(
        250,
        247,
        239,
        0.54
      )
      46%,

      rgba(
        241,
        234,
        220,
        0.15
      )
      70%,

      transparent
      72%
    );
}


.suite-manifest::before {

  content:
    "";

  position:
    absolute;

  width:
    170px;

  height:
    170px;

  left:
    50%;

  top:
    50%;

  border:
    1px solid
    rgba(
      173,
      122,
      32,
      0.10
    );

  border-radius:
    50%;

  transform:
    translate(
      -50%,
      -50%
    );

  box-shadow:

    inset 0 0 0 22px
    rgba(
      173,
      122,
      32,
      0.012
    ),

    0 14px 38px
    rgba(
      13,
      24,
      48,
      0.025
    );

  pointer-events:
    none;
}


.suite-manifest > svg {

  position:
    relative;

  z-index:
    3;

  display:
    block;

  width:
    min(
      78%,
      190px
    );

  height:
    min(
      78%,
      175px
    );

  max-width:
    190px;

  max-height:
    175px;

  overflow:
    visible;

  margin:
    auto;

  filter:
    drop-shadow(
      0 12px 13px
      rgba(
        13,
        24,
        48,
        0.10
      )
    );

  transform-origin:
    center;

  transition:
    transform 260ms ease,
    filter 260ms ease;
}


.suite-card:hover
.suite-manifest > svg {

  transform:
    scale(1.045);

  filter:
    drop-shadow(
      0 16px 17px
      rgba(
        13,
        24,
        48,
        0.14
      )
    );
}


/*
 * Renderer compatibility.
 * Allows alternate SVG class names without affecting layout.
 */


.suite-manifest svg,
.suite-manifest-svg,
.manifest-svg {

  max-width:
    190px;

  max-height:
    175px;

  overflow:
    visible;
}


/* ============================================================
   ALL LEARNING MANIFEST
   ============================================================ */


.suite-manifest-all {

  color:
    var(--gold);

  background:

    radial-gradient(
      circle at center,
      rgba(
        215,
        181,
        111,
        0.15
      ),
      transparent 48%
    );
}


.suite-manifest-all > span {

  position:
    relative;

  z-index:
    3;

  width:
    126px;

  height:
    126px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    rgba(
      173,
      122,
      32,
      0.30
    );

  border-radius:
    50%;

  color:
    var(--gold);

  background:
    rgba(
      255,
      255,
      255,
      0.52
    );

  box-shadow:

    0 18px 38px
    rgba(
      13,
      24,
      48,
      0.06
    ),

    inset 0 0 0 8px
    rgba(
      173,
      122,
      32,
      0.025
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    48px;

  font-weight:
    400;

  transition:
    transform 220ms ease;
}


.suite-card:hover
.suite-manifest-all > span {

  transform:
    scale(1.045);
}


/* ============================================================
   SUITE COPY
   ============================================================ */


.suite-card-copy {

  position:
    relative;

  z-index:
    4;

  min-height:
    174px;

  padding:
    23px 24px 25px;

  background:

    linear-gradient(
      180deg,
      rgba(
        255,
        253,
        248,
        0.72
      ),
      rgba(
        255,
        255,
        255,
        0.90
      )
    );
}


.suite-label {

  display:
    block;

  color:
    var(--gold);

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.suite-card h3 {

  margin:
    8px 0 0;

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    22px;

  font-weight:
    500;

  line-height:
    1.16;

  letter-spacing:
    -0.025em;
}


.suite-card p {

  margin:
    11px 0 0;

  color:
    var(--muted);

  font-size:
    10.5px;

  line-height:
    1.65;
}


/* ============================================================
   GENERIC MANIFESTATION PHENOTYPE SUPPORT
   ============================================================ */


.suite-manifest path,
.suite-manifest circle,
.suite-manifest ellipse,
.suite-manifest polygon,
.suite-manifest polyline,
.suite-manifest line {

  vector-effect:
    non-scaling-stroke;
}


.suite-manifest
.organ-fill {

  fill:
    rgba(
      38,
      54,
      84,
      0.10
    );

  stroke:
    rgba(
      20,
      33,
      61,
      0.78
    );

  stroke-width:
    2;
}


.suite-manifest
.organ-detail {

  fill:
    none;

  stroke:
    rgba(
      20,
      33,
      61,
      0.62
    );

  stroke-width:
    1.5;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


.suite-manifest
.organ-detail-soft {

  opacity:
    0.56;
}


.suite-manifest
.organ-vessel {

  fill:
    none;

  stroke:
    rgba(
      173,
      122,
      32,
      0.74
    );

  stroke-width:
    4;

  stroke-linecap:
    round;
}


.suite-manifest
.organ-vessel-major {

  stroke-width:
    6;
}


.suite-manifest
.organ-airway {

  fill:
    none;

  stroke:
    rgba(
      38,
      54,
      84,
      0.65
    );

  stroke-width:
    3;

  stroke-linecap:
    round;
}


.suite-manifest
.organ-airway-major {

  stroke-width:
    5;
}


.suite-manifest
.organ-ureter {

  fill:
    none;

  stroke:
    rgba(
      38,
      54,
      84,
      0.55
    );

  stroke-width:
    2;

  stroke-linecap:
    round;
}


/* ============================================================
   MANIFESTATION MOTION
   ============================================================ */


.suite-card:hover
.manifest-heart {

  animation:
    atlas-public-heart
    1.15s
    ease-in-out
    infinite;
}


@keyframes atlas-public-heart {

  0%,
  100% {

    transform:
      scale(1);
  }

  14% {

    transform:
      scale(1.035);
  }

  26% {

    transform:
      scale(1);
  }

  38% {

    transform:
      scale(1.017);
  }

  52% {

    transform:
      scale(1);
  }
}


.suite-card:hover
.manifest-lungs {

  animation:
    atlas-public-respiratory
    4.8s
    ease-in-out
    infinite;
}


@keyframes atlas-public-respiratory {

  0%,
  100% {

    transform:
      scale(
        0.985,
        0.98
      );
  }

  50% {

    transform:
      scale(
        1.025,
        1.035
      );
  }
}


.suite-card:hover
.manifest-kidneys {

  animation:
    atlas-public-renal
    3.6s
    ease-in-out
    infinite;
}


@keyframes atlas-public-renal {

  0%,
  100% {

    opacity:
      0.88;
  }

  50% {

    opacity:
      1;
  }
}


/* ============================================================
   CATALOG SECTION
   ============================================================ */


.catalog-section {

  padding-top:
    35px;

  border-top:
    1px solid
    var(--gold-line);
}


.collection-heading {

  display:
    grid;

  grid-template-columns:
    minmax(
      0,
      1fr
    )
    auto;

  gap:
    40px;

  align-items:
    end;

  margin-bottom:
    38px;
}


.collection-heading > div:first-child {

  max-width:
    900px;
}


.collection-heading p {

  max-width:
    760px;

  margin:
    15px 0 0;

  color:
    var(--muted);

  font-size:
    12px;

  line-height:
    1.7;
}


.collection-count {

  min-width:
    145px;

  padding:
    17px 20px;

  border:
    1px solid
    var(--gold-line);

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );

  text-align:
    center;

  box-shadow:
    0 8px 24px
    rgba(
      13,
      24,
      48,
      0.035
    );
}


.collection-count strong {

  display:
    block;

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    31px;

  font-weight:
    500;
}


.collection-count span {

  display:
    block;

  margin-top:
    4px;

  color:
    var(--muted);

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


/* ============================================================
   PRODUCT RIBBON
   ============================================================ */


.product-ribbon {

  display:
    grid;

  grid-template-columns:
    repeat(
      7,
      minmax(
        0,
        1fr
      )
    );

  gap:
    8px;

  margin:
    0 0 18px;
}


.product-chip {

  min-height:
    76px;

  padding:
    12px 10px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-start;

  gap:
    10px;

  border:
    1px solid
    var(--line);

  border-radius:
    12px;

  color:
    var(--navy-muted);

  background:
    rgba(
      255,
      255,
      255,
      0.55
    );

  cursor:
    pointer;

  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}


.product-chip:hover {

  transform:
    translateY(-2px);

  border-color:
    var(--gold-line-strong);

  box-shadow:
    0 10px 26px
    rgba(
      13,
      24,
      48,
      0.055
    );
}


.product-chip > span {

  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--gold-line);

  border-radius:
    50%;

  color:
    var(--gold);

  background:
    rgba(
      173,
      122,
      32,
      0.035
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    12px;
}


.product-chip strong {

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.3;
}


.product-chip-active {

  border-color:
    rgba(
      173,
      122,
      32,
      0.45
    );

  color:
    var(--navy);

  background:

    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.96
      ),
      rgba(
        215,
        181,
        111,
        0.10
      )
    );

  box-shadow:
    0 10px 28px
    rgba(
      13,
      24,
      48,
      0.06
    );
}


.product-chip-active > span {

  color:
    #ffffff;

  border-color:
    var(--gold);

  background:
    var(--gold);
}


/* ============================================================
   CATALOG TOOLBAR
   ============================================================ */


.catalog-toolbar {

  display:
    grid;

  grid-template-columns:
    minmax(
      280px,
      1fr
    )
    minmax(
      210px,
      270px
    )
    auto;

  gap:
    10px;

  align-items:
    stretch;

  padding:
    13px;

  border:
    1px solid
    var(--gold-line);

  border-radius:
    16px;

  background:
    rgba(
      255,
      255,
      255,
      0.54
    );

  box-shadow:
    0 12px 34px
    rgba(
      13,
      24,
      48,
      0.035
    );

  backdrop-filter:
    blur(10px);
}


.search-field {

  min-width:
    0;

  min-height:
    50px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    0 15px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      0.76
    );
}


.search-icon {

  flex:
    0 0 auto;

  color:
    var(--gold);

  font-size:
    20px;
}


.search-field input {

  width:
    100%;

  min-width:
    0;

  border:
    0;

  outline:
    0;

  color:
    var(--navy);

  background:
    transparent;

  font-size:
    11px;
}


.search-field input::placeholder {

  color:
    #8b93a0;
}


.filter-field {

  min-height:
    50px;

  display:
    grid;

  grid-template-columns:
    auto 1fr;

  align-items:
    center;

  gap:
    10px;

  padding:
    0 13px;

  border:
    1px solid
    var(--line);

  border-radius:
    10px;

  background:
    rgba(
      255,
      255,
      255,
      0.76
    );
}


.filter-field > span {

  color:
    var(--gold);

  font-size:
    7px;

  font-weight:
    850;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.filter-field select {

  width:
    100%;

  min-width:
    0;

  border:
    0;

  outline:
    0;

  color:
    var(--navy);

  background:
    transparent;

  font-size:
    10px;

  cursor:
    pointer;
}


.catalog-toolbar .secondary-btn {

  border-radius:
    10px;
}


/* ============================================================
   STATUS BANNER
   ============================================================ */


.status-banner {

  margin-top:
    16px;

  padding:
    15px 18px;

  border:
    1px solid
    var(--gold-line);

  border-left:
    3px solid
    var(--gold);

  border-radius:
    8px;

  color:
    var(--navy-muted);

  background:
    rgba(
      255,
      255,
      255,
      0.70
    );

  font-size:
    11px;

  line-height:
    1.6;
}


.status-banner[hidden] {

  display:
    none !important;
}


/* ============================================================
   HIERARCHICAL CATALOG
   ============================================================ */


.catalog-hierarchy {

  margin-top:
    28px;

  display:
    grid;

  gap:
    18px;
}


/*
 * Broad compatibility styling for dynamically generated
 * catalog structures. The runtime may generate nested sections,
 * articles, buttons and links.
 */


.catalog-hierarchy > section,
.catalog-hierarchy > article,
.catalog-hierarchy > div {

  min-width:
    0;
}


.catalog-hierarchy section {

  border:
    1px solid
    var(--gold-line);

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.61
    );

  box-shadow:
    0 10px 34px
    rgba(
      13,
      24,
      48,
      0.035
    );
}


.catalog-hierarchy h2,
.catalog-hierarchy h3,
.catalog-hierarchy h4,
.catalog-hierarchy h5 {

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    500;
}


.catalog-hierarchy p {

  color:
    var(--muted);

  line-height:
    1.65;
}


.catalog-hierarchy button {

  cursor:
    pointer;
}


/* ============================================================
   COMMON DYNAMIC CATALOG CLASS SUPPORT
   ============================================================ */


.specialty-group,
.catalog-specialty,
.product-group,
.catalog-product,
.topic-group,
.catalog-topic {

  overflow:
    hidden;

  border:
    1px solid
    var(--gold-line);

  border-radius:
    18px;

  background:
    rgba(
      255,
      255,
      255,
      0.60
    );

  box-shadow:
    0 12px 38px
    rgba(
      13,
      24,
      48,
      0.04
    );
}


.specialty-header,
.catalog-specialty-header,
.product-header,
.catalog-product-header,
.topic-header,
.catalog-topic-header {

  padding:
    21px 24px;

  border-bottom:
    1px solid
    var(--line);
}


.artifact-grid,
.catalog-artifact-grid {

  padding:
    18px;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px;
}


.artifact-card,
.catalog-artifact,
.publication-card {

  position:
    relative;

  min-height:
    205px;

  padding:
    22px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  color:
    var(--ink);

  background:

    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.96
      ),
      rgba(
        250,
        247,
        239,
        0.78
      )
    );

  box-shadow:
    0 8px 25px
    rgba(
      13,
      24,
      48,
      0.035
    );

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.artifact-card:hover,
.catalog-artifact:hover,
.publication-card:hover {

  transform:
    translateY(-3px);

  border-color:
    var(--gold-line-strong);

  box-shadow:
    var(--shadow-soft);
}


.artifact-card::before,
.catalog-artifact::before,
.publication-card::before {

  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    22px;

  width:
    45px;

  height:
    2px;

  background:
    var(--gold);
}


.artifact-card h3,
.artifact-card h4,
.catalog-artifact h3,
.catalog-artifact h4,
.publication-card h3,
.publication-card h4 {

  margin:
    15px 0 9px;

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-weight:
    500;
}


.artifact-card p,
.catalog-artifact p,
.publication-card p {

  color:
    var(--muted);

  font-size:
    10px;

  line-height:
    1.65;
}


/* ============================================================
   GENERIC TAGS / BADGES GENERATED BY CATALOG
   ============================================================ */


.badge,
.tag,
.pill,
.governance-badge,
.artifact-badge,
.competency-tag {

  display:
    inline-flex;

  align-items:
    center;

  min-height:
    24px;

  padding:
    0 9px;

  margin:
    3px 4px 3px 0;

  border:
    1px solid
    var(--gold-line);

  border-radius:
    999px;

  color:
    var(--navy-muted);

  background:
    rgba(
      173,
      122,
      32,
      0.045
    );

  font-size:
    7px;

  font-weight:
    750;

  letter-spacing:
    0.04em;
}


/* ============================================================
   GENERIC CATALOG LINKS
   ============================================================ */


.catalog-hierarchy a {

  color:
    var(--navy);

  text-decoration-color:
    rgba(
      173,
      122,
      32,
      0.45
    );

  text-underline-offset:
    3px;
}


.catalog-hierarchy a:hover {

  color:
    var(--gold-deep);
}


/* ============================================================
   EMPTY STATE
   ============================================================ */


.empty-state {

  margin-top:
    30px;

  padding:
    75px 30px;

  text-align:
    center;

  border:
    1px solid
    var(--gold-line);

  border-radius:
    20px;

  background:

    radial-gradient(
      circle at 50% 15%,
      rgba(
        215,
        181,
        111,
        0.14
      ),
      transparent 35%
    ),

    rgba(
      255,
      255,
      255,
      0.55
    );
}


.empty-state[hidden] {

  display:
    none !important;
}


.empty-mark {

  width:
    92px;

  height:
    92px;

  margin:
    0 auto;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid
    var(--gold-line-strong);

  border-radius:
    50%;

  color:
    var(--gold);

  background:
    rgba(
      255,
      255,
      255,
      0.52
    );

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    34px;
}


.empty-state h3 {

  max-width:
    680px;

  margin:
    26px auto 0;

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(
      1.6rem,
      3vw,
      2.35rem
    );

  font-weight:
    500;
}


.empty-state p {

  max-width:
    600px;

  margin:
    14px auto 0;

  color:
    var(--muted);

  font-size:
    11px;

  line-height:
    1.7;
}


/* ============================================================
   GOVERNANCE PANEL
   ============================================================ */


.governance-panel {

  position:
    relative;

  padding:

    105px
    max(
      32px,
      calc(
        (100vw - 1320px) / 2
      )
    );

  color:
    #ffffff;

  background:

    radial-gradient(
      circle at 90% 0%,
      rgba(
        215,
        181,
        111,
        0.15
      ),
      transparent 31%
    ),

    linear-gradient(
      135deg,
      var(--navy-deep),
      var(--navy) 58%,
      #203451
    );
}


.governance-panel > div:first-child {

  max-width:
    900px;
}


.governance-panel .section-kicker {

  color:
    var(--gold-soft);
}


.governance-panel h2 {

  color:
    #ffffff;
}


.governance-panel h2 em {

  color:
    var(--gold-soft);

  font-weight:
    400;
}


.governance-grid {

  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap:
    1px;

  margin-top:
    55px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  background:
    rgba(
      255,
      255,
      255,
      0.09
    );
}


.governance-grid article {

  position:
    relative;

  min-height:
    230px;

  padding:
    31px 28px;

  background:
    rgba(
      13,
      24,
      48,
      0.76
    );

  transition:
    background 180ms ease;
}


.governance-grid article:hover {

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


.governance-grid article::before {

  content:
    "";

  position:
    absolute;

  left:
    28px;

  top:
    0;

  width:
    38px;

  height:
    2px;

  background:
    var(--gold-soft);
}


.governance-grid strong {

  display:
    block;

  margin-top:
    30px;

  color:
    #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    20px;

  font-weight:
    500;
}


.governance-grid p {

  margin:
    14px 0 0;

  color:
    rgba(
      255,
      255,
      255,
      0.57
    );

  font-size:
    10px;

  line-height:
    1.72;
}


/* ============================================================
   FOOTER
   ============================================================ */


.site-footer {

  width:
    min(
      1360px,
      calc(100% - 64px)
    );

  min-height:
    145px;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    auto minmax(
      280px,
      650px
    );

  gap:
    70px;

  align-items:
    center;

  justify-content:
    space-between;
}


.site-footer > div {

  display:
    flex;

  flex-direction:
    column;
}


.site-footer strong {

  color:
    var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    15px;

  font-weight:
    600;

  letter-spacing:
    0.04em;
}


.site-footer span {

  margin-top:
    5px;

  color:
    var(--gold);

  font-size:
    8px;

  font-weight:
    850;

  letter-spacing:
    0.17em;

  text-transform:
    uppercase;
}


.site-footer p {

  margin:
    0;

  color:
    var(--muted);

  font-size:
    9px;

  line-height:
    1.65;

  text-align:
    right;
}


/* ============================================================
   NIGHT THEME

   Supports common theme attributes/classes without changing JS.
   ============================================================ */


html[data-theme="dark"] body,
html[data-theme="night"] body,
body[data-theme="dark"],
body[data-theme="night"],
body.theme-dark,
body.night-theme {

  --ink:
    #eef1f6;

  --muted:
    #aab3c2;

  --line:
    rgba(
      255,
      255,
      255,
      0.10
    );

  --gold-line:
    rgba(
      215,
      181,
      111,
      0.20
    );

  --gold-line-strong:
    rgba(
      215,
      181,
      111,
      0.40
    );

  color:
    #eef1f6;

  background:

    radial-gradient(
      circle at 80% 0%,
      rgba(
        173,
        122,
        32,
        0.13
      ),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #091427,
      #0d1830 52%,
      #14213d
    );
}


html[data-theme="dark"] .site-header,
html[data-theme="night"] .site-header,
body[data-theme="dark"] .site-header,
body[data-theme="night"] .site-header,
body.theme-dark .site-header,
body.night-theme .site-header {

  border-bottom-color:
    rgba(
      215,
      181,
      111,
      0.17
    );
}


html[data-theme="dark"] .brand-copy strong,
html[data-theme="night"] .brand-copy strong,
body[data-theme="dark"] .brand-copy strong,
body[data-theme="night"] .brand-copy strong,
body.theme-dark .brand-copy strong,
body.night-theme .brand-copy strong {

  color:
    #ffffff;
}


html[data-theme="dark"] .site-nav > a,
html[data-theme="night"] .site-nav > a,
body[data-theme="dark"] .site-nav > a,
body[data-theme="night"] .site-nav > a,
body.theme-dark .site-nav > a,
body.night-theme .site-nav > a {

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );
}


html[data-theme="dark"] .site-nav > a:hover,
html[data-theme="dark"] .site-nav > a[aria-current="page"],
html[data-theme="night"] .site-nav > a:hover,
html[data-theme="night"] .site-nav > a[aria-current="page"],
body[data-theme="dark"] .site-nav > a:hover,
body[data-theme="dark"] .site-nav > a[aria-current="page"],
body[data-theme="night"] .site-nav > a:hover,
body[data-theme="night"] .site-nav > a[aria-current="page"],
body.theme-dark .site-nav > a:hover,
body.theme-dark .site-nav > a[aria-current="page"],
body.night-theme .site-nav > a:hover,
body.night-theme .site-nav > a[aria-current="page"] {

  color:
    var(--gold-soft);
}


html[data-theme="dark"] .theme-toggle,
html[data-theme="night"] .theme-toggle,
body[data-theme="dark"] .theme-toggle,
body[data-theme="night"] .theme-toggle,
body.theme-dark .theme-toggle,
body.night-theme .theme-toggle {

  color:
    #ffffff;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


html[data-theme="dark"] .hero h1,
html[data-theme="night"] .hero h1,
body[data-theme="dark"] .hero h1,
body[data-theme="night"] .hero h1,
body.theme-dark .hero h1,
body.night-theme .hero h1 {

  color:
    #ffffff;
}


html[data-theme="dark"] .hero-lead,
html[data-theme="night"] .hero-lead,
body[data-theme="dark"] .hero-lead,
body[data-theme="night"] .hero-lead,
body.theme-dark .hero-lead,
body.night-theme .hero-lead {

  color:
    rgba(
      255,
      255,
      255,
      0.69
    );
}


html[data-theme="dark"] .hero-seal-ring,
html[data-theme="night"] .hero-seal-ring,
body[data-theme="dark"] .hero-seal-ring,
body[data-theme="night"] .hero-seal-ring,
body.theme-dark .hero-seal-ring,
body.night-theme .hero-seal-ring {

  background:

    radial-gradient(
      circle,
      rgba(
        38,
        54,
        84,
        0.95
      ),
      rgba(
        13,
        24,
        48,
        0.94
      )
    );
}


html[data-theme="dark"] .hero-seal-panel > strong,
html[data-theme="night"] .hero-seal-panel > strong,
body[data-theme="dark"] .hero-seal-panel > strong,
body[data-theme="night"] .hero-seal-panel > strong,
body.theme-dark .hero-seal-panel > strong,
body.night-theme .hero-seal-panel > strong {

  color:
    #ffffff;
}


html[data-theme="dark"] .suite-card,
html[data-theme="night"] .suite-card,
body[data-theme="dark"] .suite-card,
body[data-theme="night"] .suite-card,
body.theme-dark .suite-card,
body.night-theme .suite-card {

  color:
    #ffffff;

  background:

    radial-gradient(
      circle at 50% 16%,
      rgba(
        215,
        181,
        111,
        0.09
      ),
      transparent 36%
    ),

    linear-gradient(
      155deg,
      rgba(
        38,
        54,
        84,
        0.94
      ),
      rgba(
        13,
        24,
        48,
        0.97
      )
    );
}


html[data-theme="dark"] .suite-manifest,
html[data-theme="night"] .suite-manifest,
body[data-theme="dark"] .suite-manifest,
body[data-theme="night"] .suite-manifest,
body.theme-dark .suite-manifest,
body.night-theme .suite-manifest {

  background:

    radial-gradient(
      circle at center,
      rgba(
        255,
        255,
        255,
        0.055
      ),
      rgba(
        215,
        181,
        111,
        0.025
      )
      50%,
      transparent 72%
    );
}


html[data-theme="dark"] .suite-card-copy,
html[data-theme="night"] .suite-card-copy,
body[data-theme="dark"] .suite-card-copy,
body[data-theme="night"] .suite-card-copy,
body.theme-dark .suite-card-copy,
body.night-theme .suite-card-copy {

  background:

    linear-gradient(
      180deg,
      rgba(
        20,
        33,
        61,
        0.55
      ),
      rgba(
        13,
        24,
        48,
        0.90
      )
    );
}


html[data-theme="dark"] .suite-card h3,
html[data-theme="night"] .suite-card h3,
body[data-theme="dark"] .suite-card h3,
body[data-theme="night"] .suite-card h3,
body.theme-dark .suite-card h3,
body.night-theme .suite-card h3 {

  color:
    #ffffff;
}


html[data-theme="dark"] .suite-card p,
html[data-theme="night"] .suite-card p,
body[data-theme="dark"] .suite-card p,
body[data-theme="night"] .suite-card p,
body.theme-dark .suite-card p,
body.night-theme .suite-card p {

  color:
    rgba(
      255,
      255,
      255,
      0.58
    );
}


html[data-theme="dark"] .section-title-row h2,
html[data-theme="dark"] .collection-heading h2,
html[data-theme="night"] .section-title-row h2,
html[data-theme="night"] .collection-heading h2,
body[data-theme="dark"] .section-title-row h2,
body[data-theme="dark"] .collection-heading h2,
body[data-theme="night"] .section-title-row h2,
body[data-theme="night"] .collection-heading h2,
body.theme-dark .section-title-row h2,
body.theme-dark .collection-heading h2,
body.night-theme .section-title-row h2,
body.night-theme .collection-heading h2 {

  color:
    #ffffff;
}


html[data-theme="dark"] .product-chip,
html[data-theme="night"] .product-chip,
body[data-theme="dark"] .product-chip,
body[data-theme="night"] .product-chip,
body.theme-dark .product-chip,
body.night-theme .product-chip {

  color:
    rgba(
      255,
      255,
      255,
      0.72
    );

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );
}


html[data-theme="dark"] .product-chip-active,
html[data-theme="night"] .product-chip-active,
body[data-theme="dark"] .product-chip-active,
body[data-theme="night"] .product-chip-active,
body.theme-dark .product-chip-active,
body.night-theme .product-chip-active {

  color:
    #ffffff;

  background:
    rgba(
      215,
      181,
      111,
      0.09
    );
}


html[data-theme="dark"] .catalog-toolbar,
html[data-theme="night"] .catalog-toolbar,
body[data-theme="dark"] .catalog-toolbar,
body[data-theme="night"] .catalog-toolbar,
body.theme-dark .catalog-toolbar,
body.night-theme .catalog-toolbar {

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}


html[data-theme="dark"] .search-field,
html[data-theme="dark"] .filter-field,
html[data-theme="night"] .search-field,
html[data-theme="night"] .filter-field,
body[data-theme="dark"] .search-field,
body[data-theme="dark"] .filter-field,
body[data-theme="night"] .search-field,
body[data-theme="night"] .filter-field,
body.theme-dark .search-field,
body.theme-dark .filter-field,
body.night-theme .search-field,
body.night-theme .filter-field {

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


html[data-theme="dark"] .search-field input,
html[data-theme="dark"] .filter-field select,
html[data-theme="night"] .search-field input,
html[data-theme="night"] .filter-field select,
body[data-theme="dark"] .search-field input,
body[data-theme="dark"] .filter-field select,
body[data-theme="night"] .search-field input,
body[data-theme="night"] .filter-field select,
body.theme-dark .search-field input,
body.theme-dark .filter-field select,
body.night-theme .search-field input,
body.night-theme .filter-field select {

  color:
    #ffffff;
}


html[data-theme="dark"] .filter-field select option,
html[data-theme="night"] .filter-field select option,
body[data-theme="dark"] .filter-field select option,
body[data-theme="night"] .filter-field select option,
body.theme-dark .filter-field select option,
body.night-theme .filter-field select option {

  color:
    var(--navy);

  background:
    #ffffff;
}


html[data-theme="dark"] .collection-count,
html[data-theme="night"] .collection-count,
body[data-theme="dark"] .collection-count,
body[data-theme="night"] .collection-count,
body.theme-dark .collection-count,
body.night-theme .collection-count {

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );
}


html[data-theme="dark"] .collection-count strong,
html[data-theme="night"] .collection-count strong,
body[data-theme="dark"] .collection-count strong,
body[data-theme="night"] .collection-count strong,
body.theme-dark .collection-count strong,
body.night-theme .collection-count strong {

  color:
    #ffffff;
}


html[data-theme="dark"] .empty-state,
html[data-theme="night"] .empty-state,
body[data-theme="dark"] .empty-state,
body[data-theme="night"] .empty-state,
body.theme-dark .empty-state,
body.night-theme .empty-state {

  background:
    rgba(
      255,
      255,
      255,
      0.035
    );
}


html[data-theme="dark"] .empty-state h3,
html[data-theme="night"] .empty-state h3,
body[data-theme="dark"] .empty-state h3,
body[data-theme="night"] .empty-state h3,
body.theme-dark .empty-state h3,
body.night-theme .empty-state h3 {

  color:
    #ffffff;
}


html[data-theme="dark"] .site-footer strong,
html[data-theme="night"] .site-footer strong,
body[data-theme="dark"] .site-footer strong,
body[data-theme="night"] .site-footer strong,
body.theme-dark .site-footer strong,
body.night-theme .site-footer strong {

  color:
    #ffffff;
}


/* ============================================================
   RESPONSIVE — LARGE TABLET
   ============================================================ */


@media (
  max-width:
  1180px
) {

  .site-header {

    flex-wrap:
      wrap;

    padding:
      17px 0;
  }


  .site-nav {

    width:
      100%;

    margin-left:
      0;

    flex-wrap:
      wrap;
  }


  .site-nav > a {

    padding:
      7px 0 10px;
  }


  .site-nav > a::after {

    bottom:
      3px;
  }


  .suite-grid {

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .figure8-route {

    grid-template-columns:
      repeat(
        3,
        minmax(
          0,
          1fr
        )
      );
  }


  .figure8-route > b {

    display:
      none;
  }


  .product-ribbon {

    grid-template-columns:
      repeat(
        4,
        minmax(
          0,
          1fr
        )
      );
  }


  .governance-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */


@media (
  max-width:
  900px
) {

  .hero {

    grid-template-columns:
      1fr;

    padding-top:
      80px;
  }


  .hero-copy {

    max-width:
      850px;
  }


  .hero-seal-panel {

    min-height:
      430px;

    max-width:
      520px;

    margin:
      0 auto;
  }


  .section-title-row {

    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .suite-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .collection-heading {

    grid-template-columns:
      1fr;

    align-items:
      start;
  }


  .collection-count {

    width:
      max-content;
  }


  .catalog-toolbar {

    grid-template-columns:
      1fr 1fr;
  }


  .catalog-toolbar .secondary-btn {

    grid-column:
      1 / -1;
  }


  .artifact-grid,
  .catalog-artifact-grid {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}


/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */


@media (
  max-width:
  680px
) {

  .site-header,
  .hero,
  .library-section,
  .site-footer {

    width:
      calc(
        100% - 30px
      );
  }


  .site-header {

    gap:
      18px;
  }


  .brand-copy strong {

    font-size:
      14px;
  }


  .site-nav {

    gap:
      13px;
  }


  .site-nav > a {

    font-size:
      10px;
  }


  .hero {

    min-height:
      auto;

    padding:
      66px 0 75px;

    gap:
      55px;
  }


  .hero h1 {

    font-size:
      clamp(
        4rem,
        22vw,
        6.2rem
      );
  }


  .hero-principles {

    align-items:
      flex-start;

    flex-direction:
      column;

    gap:
      8px;
  }


  .hero-principles i {

    display:
      none;
  }


  .hero-seal-panel {

    min-height:
      350px;
  }


  .hero-seal-panel::before {

    width:
      320px;

    height:
      320px;
  }


  .hero-seal-panel::after {

    width:
      270px;

    height:
      270px;
  }


  .hero-seal-ring {

    width:
      190px;

    height:
      190px;
  }


  .hero-seal-ring img {

    width:
      150px;

    height:
      150px;
  }


  .figure8-panel,
  .governance-panel {

    padding:
      75px 20px;
  }


  .figure8-route {

    grid-template-columns:
      1fr;
  }


  .route-node {

    min-height:
      120px;
  }


  .library-section {

    padding:
      78px 0;
  }


  .suite-grid {

    grid-template-columns:
      1fr;
  }


  .suite-card {

    min-height:
      380px;

    grid-template-rows:
      215px 1fr;
  }


  .suite-manifest {

    height:
      215px;
  }


  .product-ribbon {

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }


  .catalog-toolbar {

    grid-template-columns:
      1fr;
  }


  .catalog-toolbar .secondary-btn {

    grid-column:
      auto;
  }


  .filter-field {

    grid-template-columns:
      1fr;
  }


  .artifact-grid,
  .catalog-artifact-grid,
  .governance-grid {

    grid-template-columns:
      1fr;
  }


  .site-footer {

    min-height:
      auto;

    padding:
      38px 0;

    grid-template-columns:
      1fr;

    gap:
      18px;
  }


  .site-footer p {

    max-width:
      560px;

    text-align:
      left;
  }

}


/* ============================================================
   RESPONSIVE — SMALL MOBILE
   ============================================================ */


@media (
  max-width:
  430px
) {

  .brand-seal {

    width:
      38px;

    height:
      38px;
  }


  .brand-copy strong {

    font-size:
      12px;
  }


  .theme-toggle {

    min-height:
      34px;
  }


  .hero-actions {

    flex-direction:
      column;

    align-items:
      stretch;
  }


  .primary-btn,
  .secondary-btn {

    width:
      100%;
  }


  .hero-seal-panel::before {

    width:
      285px;

    height:
      285px;
  }


  .hero-seal-panel::after {

    width:
      240px;

    height:
      240px;
  }


  .suite-card-copy {

    padding:
      22px;
  }


  .product-ribbon {

    grid-template-columns:
      1fr;
  }


  .product-chip {

    min-height:
      62px;
  }


  .collection-count {

    width:
      100%;
  }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */


@media (
  prefers-reduced-motion:
  reduce
) {

  html {

    scroll-behavior:
      auto;
  }


  *,
  *::before,
  *::after {

    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;

    scroll-behavior:
      auto !important;
  }

}

/* ============================================================
   ATLAS PUBLIC — RICH LEARNING ARTIFACTS
   TUXEDO LAYER
   ============================================================ */


/* ------------------------------------------------------------
   PRODUCT DIVISIONS
------------------------------------------------------------ */

.product-division {
  overflow: hidden;

  margin-bottom: 24px;

  border:
    1px solid var(--gold-line);

  border-radius:
    18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.96),
      rgba(250, 247, 239, 0.84)
    );

  box-shadow:
    0 18px 48px
    rgba(13, 24, 48, 0.055);
}


.product-division-header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding: 23px 25px;

  border-bottom:
    1px solid var(--gold-line);

  background:
    linear-gradient(
      100deg,
      rgba(20, 33, 61, 0.035),
      rgba(173, 122, 32, 0.035)
    );
}


.product-identity {
  display: flex;

  align-items: center;

  gap: 14px;
}


.product-mark {
  width: 46px;

  height: 46px;

  flex: 0 0 46px;

  display: grid;

  place-items: center;

  border:
    1px solid var(--gold-line-strong);

  border-radius: 50%;

  color: var(--gold);

  background:
    rgba(255, 255, 255, 0.78);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 15px;

  font-weight: 600;

  box-shadow:
    inset 0 0 0 4px
    rgba(173, 122, 32, 0.035);
}


.product-identity small {
  display: block;

  color: var(--gold);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.product-identity h3 {
  margin: 4px 0 0;

  color: var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 24px;

  font-weight: 500;
}


.product-artifact-count {
  color: var(--muted);

  font-size: 8px;

  font-weight: 750;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


/* ------------------------------------------------------------
   TOPIC / SUBMODULE
------------------------------------------------------------ */

.topic-list {
  display: grid;

  gap: 12px;

  padding: 14px;
}


.topic-group {
  overflow: hidden;

  border:
    1px solid
    rgba(20, 33, 61, 0.09);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.52);
}


.topic-toggle {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    auto
    auto;

  gap: 16px;

  align-items: center;

  padding: 20px 22px;

  border: 0;

  border-bottom:
    1px solid var(--line);

  text-align: left;

  background:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.80),
      rgba(250, 247, 239, 0.62)
    );

  cursor: pointer;
}


.topic-toggle-copy {
  display: grid;

  gap: 4px;
}


.topic-toggle-copy small {
  color: var(--gold);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.topic-toggle-copy strong {
  color: var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 17px;

  font-weight: 500;
}


.topic-count {
  color: var(--muted);

  font-size: 8px;

  font-weight: 750;

  white-space: nowrap;
}


.topic-chevron {
  color: var(--gold);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 24px;

  transform:
    rotate(90deg);

  transition:
    transform 160ms ease;
}


.topic-group[data-open="false"]
.topic-chevron {
  transform:
    rotate(0deg);
}


.topic-group[data-open="false"]
.topic-artifacts {
  display: none;
}


/* ------------------------------------------------------------
   ARTIFACT GRID
------------------------------------------------------------ */

.topic-artifacts {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap: 16px;

  padding: 18px;

  background:
    linear-gradient(
      180deg,
      rgba(250, 247, 239, 0.42),
      rgba(255, 255, 255, 0.56)
    );
}


/* ------------------------------------------------------------
   THE ARTIFACT CARD
------------------------------------------------------------ */

.public-artifact-card {
  position: relative;

  min-width: 0;

  min-height: 390px;

  display: flex;

  flex-direction: column;

  padding: 27px;

  overflow: hidden;

  border:
    1px solid
    rgba(173, 122, 32, 0.24);

  border-radius: 16px;

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(215, 181, 111, 0.16),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.99),
      rgba(250, 247, 239, 0.90)
    );

  box-shadow:
    0 12px 34px
    rgba(13, 24, 48, 0.06);

  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


.public-artifact-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: 27px;

  width: 62px;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--gold),
      var(--gold-soft)
    );
}


.public-artifact-card::after {
  content: "";

  position: absolute;

  width: 110px;

  height: 110px;

  top: -72px;

  right: -58px;

  border:
    1px solid
    rgba(173, 122, 32, 0.14);

  border-radius: 50%;

  pointer-events: none;
}


.public-artifact-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(173, 122, 32, 0.42);

  box-shadow:
    0 24px 54px
    rgba(13, 24, 48, 0.11);
}


/* ------------------------------------------------------------
   CARD TOP LINE
------------------------------------------------------------ */

.artifact-topline {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

  margin-bottom: 20px;
}


.artifact-engine {
  color: var(--gold-deep);

  font-size: 8px;

  font-weight: 850;

  letter-spacing: 0.14em;

  text-transform: uppercase;
}


.governance-badge {
  display: inline-flex;

  align-items: center;

  min-height: 25px;

  padding: 0 9px;

  border:
    1px solid
    rgba(173, 122, 32, 0.24);

  border-radius: 999px;

  color: var(--gold-deep);

  background:
    rgba(173, 122, 32, 0.055);

  font-size: 7px;

  font-weight: 800;

  letter-spacing: 0.04em;

  white-space: nowrap;
}


/* ------------------------------------------------------------
   TYPE / TITLE / DESCRIPTION
------------------------------------------------------------ */

.artifact-type {
  display: block;

  margin-bottom: 8px;

  color: var(--navy-muted);

  font-size: 8px;

  font-weight: 850;

  letter-spacing: 0.13em;

  text-transform: uppercase;
}


.public-artifact-card h4 {
  margin: 0;

  color: var(--navy);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 23px;

  font-weight: 500;

  line-height: 1.18;

  letter-spacing: -0.018em;
}


.public-artifact-card
.artifact-description {
  margin: 13px 0 0;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.7;
}


/* ------------------------------------------------------------
   CLINICAL / LEARNING METADATA
------------------------------------------------------------ */

.artifact-metadata {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 1px;

  margin: 23px 0 0;

  overflow: hidden;

  border:
    1px solid
    rgba(20, 33, 61, 0.085);

  border-radius: 11px;

  background:
    rgba(20, 33, 61, 0.085);
}


.artifact-metadata > div {
  min-width: 0;

  padding: 12px 13px;

  background:
    rgba(255, 255, 255, 0.78);
}


.artifact-metadata dt {
  margin: 0 0 5px;

  color: var(--gold);

  font-size: 7px;

  font-weight: 850;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.artifact-metadata dd {
  margin: 0;

  overflow-wrap: anywhere;

  color: var(--navy);

  font-size: 10px;

  font-weight: 700;

  line-height: 1.4;
}


/* ------------------------------------------------------------
   COMPETENCY TAGS
------------------------------------------------------------ */

.artifact-tags {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 17px;
}


.competency-tag {
  display: inline-flex;

  align-items: center;

  min-height: 24px;

  padding: 0 9px;

  border:
    1px solid
    rgba(20, 33, 61, 0.09);

  border-radius: 999px;

  color: var(--text-soft);

  background:
    rgba(20, 33, 61, 0.035);

  font-size: 7px;

  font-weight: 750;

  letter-spacing: 0.025em;
}


/* ------------------------------------------------------------
   ARTIFACT FOOTER / OPEN LEARNING
------------------------------------------------------------ */

.artifact-actions,
.artifact-footer {
  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

  margin-top: auto;

  padding-top: 22px;
}


.artifact-date {
  color: var(--muted);

  font-size: 8px;

  font-weight: 750;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}


.artifact-open {
  min-height: 40px;

  padding: 0 16px;

  border:
    1px solid var(--navy);

  border-radius: 999px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--navy),
      var(--navy-deep)
    );

  cursor: pointer;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 0.025em;

  box-shadow:
    0 8px 20px
    rgba(13, 24, 48, 0.13);

  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}


.artifact-open:hover {
  transform:
    translateY(-1px);

  border-color:
    var(--gold);

  box-shadow:
    0 12px 27px
    rgba(13, 24, 48, 0.19);
}


/* ------------------------------------------------------------
   PULSETALK GETS ITS OWN SUBTLE SIGNATURE
------------------------------------------------------------ */

.product-division[data-product="pulsetalk"]
.public-artifact-card::before {
  width: 84px;
}


.product-division[data-product="pulsetalk"]
.artifact-open {
  border-color:
    rgba(173, 122, 32, 0.72);

  background:
    linear-gradient(
      135deg,
      var(--navy),
      #263654
    );
}


/* ------------------------------------------------------------
   ATLASQ GETS ITS OWN SUBTLE SIGNATURE
------------------------------------------------------------ */

.product-division[data-product="atlasq"]
.public-artifact-card {
  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(173, 122, 32, 0.16),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      #ffffff,
      rgba(250, 247, 239, 0.93)
    );
}


/* ============================================================
   NIGHT MODE
============================================================ */

html[data-theme="night"]
.product-division {
  border-color:
    rgba(215, 181, 111, 0.20);

  background:
    linear-gradient(
      145deg,
      rgba(20, 33, 61, 0.97),
      rgba(13, 24, 48, 0.97)
    );
}


html[data-theme="night"]
.product-division-header {
  background:
    rgba(255, 255, 255, 0.025);
}


html[data-theme="night"]
.product-mark {
  background:
    rgba(255, 255, 255, 0.035);
}


html[data-theme="night"]
.product-identity h3,
html[data-theme="night"]
.topic-toggle-copy strong {
  color: #ffffff;
}


html[data-theme="night"]
.topic-group {
  border-color:
    rgba(255, 255, 255, 0.07);

  background:
    rgba(255, 255, 255, 0.018);
}


html[data-theme="night"]
.topic-toggle {
  background:
    rgba(255, 255, 255, 0.025);
}


html[data-theme="night"]
.topic-artifacts {
  background:
    rgba(0, 0, 0, 0.08);
}


html[data-theme="night"]
.public-artifact-card {
  border-color:
    rgba(215, 181, 111, 0.18);

  background:
    radial-gradient(
      circle at 92% 0%,
      rgba(215, 181, 111, 0.11),
      transparent 31%
    ),
    linear-gradient(
      145deg,
      rgba(38, 54, 84, 0.98),
      rgba(20, 33, 61, 0.98)
    );
}


html[data-theme="night"]
.public-artifact-card h4 {
  color: #ffffff;
}


html[data-theme="night"]
.artifact-metadata {
  border-color:
    rgba(255, 255, 255, 0.075);

  background:
    rgba(255, 255, 255, 0.075);
}


html[data-theme="night"]
.artifact-metadata > div {
  background:
    rgba(255, 255, 255, 0.035);
}


html[data-theme="night"]
.artifact-metadata dd {
  color:
    rgba(255, 255, 255, 0.88);
}


html[data-theme="night"]
.competency-tag {
  border-color:
    rgba(255, 255, 255, 0.09);

  color:
    rgba(255, 255, 255, 0.72);

  background:
    rgba(255, 255, 255, 0.04);
}


/* ============================================================
   RESPONSIVE
============================================================ */

@media (max-width: 1100px) {

  .topic-artifacts {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}


@media (max-width: 720px) {

  .product-division-header {
    align-items: flex-start;

    flex-direction: column;
  }


  .topic-artifacts {
    grid-template-columns:
      1fr;
  }


  .topic-toggle {
    grid-template-columns:
      minmax(0, 1fr)
      auto;
  }


  .topic-count {
    display: none;
  }


  .artifact-metadata {
    grid-template-columns:
      1fr;
  }

}


@media (max-width: 480px) {

  .topic-list {
    padding: 9px;
  }


  .topic-artifacts {
    padding: 11px;
  }


  .public-artifact-card {
    min-height: 0;

    padding: 23px;
  }


  .artifact-topline {
    align-items: flex-start;

    flex-direction: column;
  }


  .artifact-actions,
  .artifact-footer {
    align-items: stretch;

    flex-direction: column;
  }


  .artifact-open {
    width: 100%;
  }

}