```css
/* =========================================================
   SEVA KENDRA CALCUTTA
   PREMIUM LIQUID GLASS NEWSLETTER ARCHIVE
   FULL-WIDTH VERSION
   ========================================================= */

/* =========================================================
   ROOT
   ========================================================= */

:root {
  --blue: #1677ff;
  --blue-dark: #115bd0;
  --cyan: #00c6ff;
  --violet: #7552ff;
  --pink: #ff4fd8;
  --orange: #ff7a45;
  --red: #ff4f62;

  --text: #13213b;
  --text-soft: #53637d;
  --muted: #78869d;

  --glass:
    rgba(255, 255, 255, 0.45);

  --glass-light:
    rgba(255, 255, 255, 0.64);

  --glass-strong:
    rgba(255, 255, 255, 0.78);

  --border:
    rgba(255, 255, 255, 0.78);

  --shadow:
    0 25px 70px rgba(26, 55, 100, 0.10),
    0 8px 25px rgba(26, 55, 100, 0.055);

  --shadow-hover:
    0 35px 85px rgba(26, 55, 100, 0.15),
    0 10px 28px rgba(22, 119, 255, 0.08);

  --radius-xl: 36px;
  --radius-lg: 28px;
  --radius-md: 22px;
  --radius-sm: 17px;

  --ease:
    cubic-bezier(.2,.8,.2,1);

  --ease-smooth:
    cubic-bezier(.16,1,.3,1);
}


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

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color: var(--text);

  overflow-x: hidden;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(0, 198, 255, 0.19),
      transparent 27%
    ),

    radial-gradient(
      circle at 92% 15%,
      rgba(117, 82, 255, 0.19),
      transparent 28%
    ),

    radial-gradient(
      circle at 58% 96%,
      rgba(255, 79, 216, 0.11),
      transparent 28%
    ),

    linear-gradient(
      135deg,
      #edf8ff 0%,
      #f7f7ff 48%,
      #f3f9ff 100%
    );
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}


/* =========================================================
   APP
   ========================================================= */

#newsletter-app {
  position: relative;

  width: 100%;
  min-height: 100vh;

  isolation: isolate;

  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.06),
      rgba(255,255,255,.02)
    );
}


/* =========================================================
   LARGE AMBIENT LIGHTS
   ========================================================= */

#newsletter-app::before,
#newsletter-app::after {
  content: "";

  position: fixed;

  width: 520px;
  height: 520px;

  border-radius: 50%;

  pointer-events: none;

  z-index: -10;

  filter: blur(25px);

  opacity: .58;
}

#newsletter-app::before {
  top: -230px;
  left: -160px;

  background:
    radial-gradient(
      circle,
      rgba(0,198,255,.58) 0%,
      rgba(22,119,255,.20) 40%,
      transparent 70%
    );

  animation:
    ambientTop 15s ease-in-out infinite;
}

#newsletter-app::after {
  top: 4%;
  right: -230px;

  background:
    radial-gradient(
      circle,
      rgba(117,82,255,.55) 0%,
      rgba(255,79,216,.18) 42%,
      transparent 70%
    );

  animation:
    ambientRight 18s ease-in-out infinite;
}

@keyframes ambientTop {

  0%,
  100% {
    transform:
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      translate(100px,105px)
      scale(1.13);
  }
}

@keyframes ambientRight {

  0%,
  100% {
    transform:
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      translate(-95px,80px)
      scale(1.15);
  }
}


/* =========================================================
   SMALL AMBIENT ORBS
   ========================================================= */

.ambient-orb {
  position: fixed;

  border-radius: 50%;

  pointer-events: none;

  z-index: -5;

  filter: blur(25px);

  opacity: .40;
}

.ambient-orb.one {
  width: 340px;
  height: 340px;

  left: 4%;
  top: 48%;

  background:
    radial-gradient(
      circle,
      rgba(0,198,255,.25),
      transparent 70%
    );

  animation:
    orbOne 12s ease-in-out infinite;
}

.ambient-orb.two {
  width: 480px;
  height: 480px;

  left: 38%;
  bottom: -260px;

  background:
    radial-gradient(
      circle,
      rgba(255,79,216,.17),
      transparent 70%
    );

  animation:
    orbTwo 16s ease-in-out infinite;
}

@keyframes orbOne {

  0%,
  100% {
    transform:
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      translate(65px,-55px)
      scale(1.12);
  }
}

@keyframes orbTwo {

  0%,
  100% {
    transform:
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      translate(80px,-95px)
      scale(1.1);
  }
}


/* =========================================================
   PAGE
   ========================================================= */

.newsletter-page {

  position: relative;

  width: 100%;
  max-width: none;

  min-height: 100vh;

  margin: 0;

  padding:
    38px
    clamp(22px, 5vw, 88px)
    95px;
}


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

.hero {

  position: relative;

  width: 100%;

  min-height: 300px;

  display: flex;

  align-items: center;

  padding:
    42px
    clamp(26px, 4vw, 64px);

  margin-bottom: 20px;

  border-radius: var(--radius-xl);

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.80),
      rgba(255,255,255,.42)
    );

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

  box-shadow:
    var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.95);

  backdrop-filter:
    blur(36px)
    saturate(155%);

  -webkit-backdrop-filter:
    blur(36px)
    saturate(155%);

  animation:
    heroEntrance .9s var(--ease) both;
}

.hero::before {

  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      120deg,
      rgba(255,255,255,.42),
      transparent 22%,
      transparent 70%,
      rgba(255,255,255,.23)
    );
}

.hero::after {

  content: "";

  position: absolute;

  width: 460px;
  height: 460px;

  right: -180px;
  top: -220px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(0,198,255,.19),
      transparent 69%
    );

  filter: blur(7px);

  animation:
    heroGlow 9s ease-in-out infinite;
}

@keyframes heroEntrance {

  from {
    opacity: 0;
    transform:
      translateY(28px)
      scale(.985);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes heroGlow {

  0%,
  100% {
    transform:
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      translate(-30px,35px)
      scale(1.16);
  }
}


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

.hero-content {

  position: relative;

  z-index: 3;

  width: 100%;

  display: grid;

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

  gap: 50px;

  align-items: center;
}

.eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  padding:
    8px
    14px;

  margin-bottom: 16px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.54);

  border:
    1px solid rgba(255,255,255,.85);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 8px 22px rgba(22,119,255,.05);

  color: #53647e;

  font-size: .72rem;

  font-weight: 800;

  letter-spacing: .13em;

  text-transform: uppercase;
}

.eyebrow-dot {

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      var(--blue)
    );

  box-shadow:
    0 0 0 5px rgba(0,198,255,.10),
    0 0 17px rgba(0,198,255,.85);

  animation:
    livePulse 1.8s ease-in-out infinite;
}

@keyframes livePulse {

  0%,
  100% {
    transform: scale(1);
    opacity: .8;
  }

  50% {
    transform: scale(1.45);
    opacity: 1;
  }
}


/* =========================================================
   TITLE
   ========================================================= */

.hero h1 {

  position: relative;

  margin: 0;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    clamp(3rem, 5.9vw, 6rem);

  line-height:
    .90;

  letter-spacing:
    -.07em;

  font-weight:
    800;

  color:
    #122039;
}

.hero h1 span {

  display: inline-block;

  background:
    linear-gradient(
      100deg,
      #1478ff 0%,
      #00afd9 28%,
      #7450ff 64%,
      #ff4fd8 100%
    );

  background-size:
    220% auto;

  -webkit-background-clip:
    text;

  background-clip:
    text;

  color:
    transparent;

  animation:
    movingGradient 7s ease infinite;
}

@keyframes movingGradient {

  0%,
  100% {
    background-position:
      0% 50%;
  }

  50% {
    background-position:
      100% 50%;
  }
}

.hero p {

  width: min(760px, 100%);

  margin:
    19px
    0
    0;

  color:
    #657793;

  font-size:
    clamp(.88rem, 1.15vw, 1rem);

  line-height:
    1.75;
}


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

.hero-stats {

  display: flex;

  flex-direction: column;

  gap: 12px;
}

.stat {

  position: relative;

  width: 154px;

  min-height: 104px;

  display: flex;

  align-items:
    center;

  justify-content:
    center;

  flex-direction:
    column;

  text-align: center;

  padding:
    17px;

  border-radius:
    24px;

  background:
    rgba(255,255,255,.56);

  border:
    1px solid rgba(255,255,255,.87);

  box-shadow:
    inset 0 1px rgba(255,255,255,.98),
    0 15px 32px rgba(31,67,120,.08);

  backdrop-filter:
    blur(22px);

  -webkit-backdrop-filter:
    blur(22px);

  overflow: hidden;

  transition:
    transform .45s var(--ease),
    box-shadow .45s ease;
}

.stat::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(255,255,255,.45) 50%,
      transparent 75%
    );

  transform:
    translateX(-140%);

  animation:
    statShine 5.5s ease-in-out infinite;
}

@keyframes statShine {

  0%,
  55%,
  100% {
    transform:
      translateX(-140%);
  }

  70% {
    transform:
      translateX(140%);
  }
}

.stat:hover {

  transform:
    translateY(-6px)
    scale(1.03);

  box-shadow:
    0 22px 45px rgba(31,67,120,.12),
    inset 0 1px rgba(255,255,255,1);
}

.stat strong {

  position: relative;

  z-index: 2;

  display: block;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    2.25rem;

  line-height:
    1;

  font-weight:
    800;

  color:
    #17253f;
}

.stat small {

  position: relative;

  z-index: 2;

  display: block;

  margin-top: 7px;

  color:
    #7a879a;

  font-size:
    .68rem;

  font-weight:
    800;

  letter-spacing:
    .10em;

  text-transform:
    uppercase;
}


/* =========================================================
   SEARCH TOOLBAR
   ========================================================= */

.toolbar {

  width: 100%;

  display: flex;

  align-items: center;

  gap: 15px;

  padding:
    11px;

  margin-bottom:
    18px;

  border-radius:
    24px;

  background:
    rgba(255,255,255,.40);

  border:
    1px solid rgba(255,255,255,.72);

  box-shadow:
    0 17px 42px rgba(31,67,120,.06),
    inset 0 1px rgba(255,255,255,.92);

  backdrop-filter:
    blur(30px)
    saturate(150%);

  -webkit-backdrop-filter:
    blur(30px)
    saturate(150%);
}

.search {

  position: relative;

  flex: 1;
}

.search i {

  position: absolute;

  left: 18px;
  top: 50%;

  transform:
    translateY(-50%);

  color:
    #71819b;

  font-size:
    .92rem;

  pointer-events:
    none;
}

.search input {

  width: 100%;

  height: 50px;

  padding:
    0
    18px
    0
    45px;

  border-radius:
    17px;

  border:
    1px solid rgba(255,255,255,.88);

  outline:
    none;

  background:
    rgba(255,255,255,.68);

  color:
    var(--text);

  box-shadow:
    inset 0 1px rgba(255,255,255,.92);

  transition:
    .3s ease;
}

.search input::placeholder {
  color:
    #8995a9;
}

.search input:hover {

  background:
    rgba(255,255,255,.78);
}

.search input:focus {

  background:
    rgba(255,255,255,.88);

  border-color:
    rgba(22,119,255,.30);

  box-shadow:
    0 0 0 4px rgba(22,119,255,.07),
    0 12px 30px rgba(22,119,255,.07),
    inset 0 1px rgba(255,255,255,.98);
}

.result {

  padding:
    0
    14px;

  white-space:
    nowrap;

  color:
    #687791;

  font-size:
    .76rem;

  font-weight:
    800;
}


/* =========================================================
   YEAR LIST
   ========================================================= */

.years {

  display: grid;

  width: 100%;

  gap:
    15px;
}


/* =========================================================
   YEAR PANEL
   ========================================================= */

.year {

  position: relative;

  width: 100%;

  border-radius:
    28px;

  background:
    rgba(255,255,255,.42);

  border:
    1px solid rgba(255,255,255,.73);

  box-shadow:
    0 20px 52px rgba(31,67,120,.06),
    inset 0 1px rgba(255,255,255,.94);

  backdrop-filter:
    blur(27px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(27px)
    saturate(145%);

  overflow:
    hidden;

  transition:
    transform .42s var(--ease),
    box-shadow .42s ease,
    background .42s ease;
}

.year:hover {

  transform:
    translateY(-2px);

  box-shadow:
    0 28px 65px rgba(31,67,120,.09),
    inset 0 1px rgba(255,255,255,.98);
}

.year.active {

  background:
    rgba(255,255,255,.50);

  box-shadow:
    0 28px 72px rgba(22,119,255,.09),
    inset 0 1px rgba(255,255,255,1);
}


/* =========================================================
   YEAR BUTTON
   ========================================================= */

.year-button {

  position: relative;

  width: 100%;

  display: grid;

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

  align-items:
    center;

  gap:
    17px;

  padding:
    19px
    23px;

  background:
    transparent;

  border:
    0;

  outline:
    none;

  text-align:
    left;
}

.year-button::before {

  content: "";

  position: absolute;

  left: 0;
  top: 0;
  bottom: 0;

  width: 5px;

  background:
    linear-gradient(
      to bottom,
      var(--cyan),
      var(--blue),
      var(--violet),
      var(--pink)
    );

  transform:
    scaleY(0);

  transform-origin:
    center;

  transition:
    transform .45s var(--ease);
}

.year.active
.year-button::before {

  transform:
    scaleY(1);
}


/* =========================================================
   YEAR ICON
   ========================================================= */

.year-icon {

  width: 57px;
  height: 57px;

  display: grid;

  place-items:
    center;

  border-radius:
    18px;

  color:
    #ffffff;

  background:
    linear-gradient(
      135deg,
      #1677ff 0%,
      #00bada 45%,
      #7650ff 100%
    );

  box-shadow:
    0 13px 29px rgba(22,119,255,.23),
    inset 0 1px rgba(255,255,255,.50);

  transform:
    rotate(-4deg);

  transition:
    transform .45s var(--ease),
    box-shadow .45s ease;
}

.year.active
.year-icon {

  transform:
    rotate(0deg)
    scale(1.07);

  box-shadow:
    0 18px 38px rgba(22,119,255,.28),
    inset 0 1px rgba(255,255,255,.58);
}

.year-icon i {

  font-size:
    1.1rem;
}


/* =========================================================
   YEAR TEXT
   ========================================================= */

.year-title {

  display:
    block;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    1.52rem;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    -.04em;
}

.year-meta {

  display:
    block;

  margin-top:
    6px;

  color:
    #7b899e;

  font-size:
    .76rem;
}


/* =========================================================
   YEAR COUNT
   ========================================================= */

.year-count {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    9px
    13px;

  border-radius:
    999px;

  color:
    #67758d;

  background:
    rgba(255,255,255,.61);

  border:
    1px solid rgba(255,255,255,.85);

  font-size:
    .70rem;

  font-weight:
    800;

  white-space:
    nowrap;
}

.year-count strong {

  color:
    var(--blue);
}


/* =========================================================
   CHEVRON
   ========================================================= */

.chevron {

  width:
    37px;

  height:
    37px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    #64738c;

  background:
    rgba(255,255,255,.61);

  border:
    1px solid rgba(255,255,255,.83);

  transition:
    transform .48s var(--ease),
    color .35s ease,
    background .35s ease;
}

.year.active
.chevron {

  transform:
    rotate(180deg);

  color:
    var(--blue);

  background:
    rgba(255,255,255,.82);
}


/* =========================================================
   ACCORDION ANIMATION
   ========================================================= */

.year-panel {

  display:
    grid;

  grid-template-rows:
    0fr;

  transition:
    grid-template-rows .65s var(--ease-smooth);
}

.year.active
.year-panel {

  grid-template-rows:
    1fr;
}

.year-inner {

  min-height:
    0;

  overflow:
    hidden;
}

.year-content {

  padding:
    0
    23px
    27px;
}


/* =========================================================
   NEWSLETTER GRID
   ========================================================= */

.newsletters {

  display:
    grid;

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

  gap:
    17px;

  width:
    100%;
}


/* =========================================================
   NEWSLETTER CARD
   ========================================================= */

.newsletter {

  --mouse-x: 50%;
  --mouse-y: 50%;

  position:
    relative;

  width:
    100%;

  min-height:
    145px;

  border-radius:
    23px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.81),
      rgba(255,255,255,.45)
    );

  border:
    1px solid rgba(255,255,255,.90);

  box-shadow:
    0 15px 38px rgba(31,67,120,.07),
    inset 0 1px rgba(255,255,255,.97);

  backdrop-filter:
    blur(23px)
    saturate(145%);

  -webkit-backdrop-filter:
    blur(23px)
    saturate(145%);

  overflow:
    hidden;

  transform:
    translateZ(0);

  transition:
    transform .5s var(--ease),
    box-shadow .42s ease,
    border-color .35s ease;
}

.newsletter::before {

  content: "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    radial-gradient(
      230px circle at
      var(--mouse-x)
      var(--mouse-y),
      rgba(0,198,255,.15),
      transparent 48%
    );

  opacity:
    0;

  transition:
    opacity .3s ease;
}

.newsletter:hover::before {

  opacity:
    1;
}

.newsletter::after {

  content: "";

  position:
    absolute;

  top:
    -20%;

  left:
    -80%;

  width:
    45%;

  height:
    150%;

  transform:
    rotate(19deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.50),
      transparent
    );

  pointer-events:
    none;
}

.newsletter:hover::after {

  animation:
    cardSweep .9s ease forwards;
}

@keyframes cardSweep {

  to {
    left:
      145%;
  }
}

.newsletter:hover {

  transform:
    translateY(-8px)
    scale(1.015);

  box-shadow:
    var(--shadow-hover),
    inset 0 1px rgba(255,255,255,1);

  border-color:
    rgba(255,255,255,1);
}


/* =========================================================
   LINK
   ========================================================= */

.newsletter-link {

  position:
    relative;

  z-index:
    2;

  width:
    100%;

  min-height:
    145px;

  display:
    flex;

  align-items:
    center;

  gap:
    14px;

  padding:
    18px;

  text-decoration:
    none;

  color:
    inherit;
}


/* =========================================================
   PDF ICON
   ========================================================= */

.pdf-icon {

  position:
    relative;

  width:
    53px;

  height:
    53px;

  flex:
    0 0 53px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    17px;

  color:
    #ffffff;

  background:
    linear-gradient(
      145deg,
      #ff3f68,
      #ff5e4c 52%,
      #ff8844
    );

  box-shadow:
    0 13px 29px rgba(255,74,92,.20),
    inset 0 1px rgba(255,255,255,.48);

  transition:
    transform .45s var(--ease),
    box-shadow .45s ease;
}

.pdf-icon::after {

  content:
    "";

  position:
    absolute;

  inset:
    1px;

  border-radius:
    inherit;

  border-top:
    1px solid rgba(255,255,255,.55);

  opacity:
    .85;
}

.newsletter:hover
.pdf-icon {

  transform:
    rotate(-8deg)
    scale(1.10);

  box-shadow:
    0 18px 37px rgba(255,74,92,.28),
    inset 0 1px rgba(255,255,255,.58);
}

.pdf-icon i {

  position:
    relative;

  z-index:
    2;

  font-size:
    1.08rem;
}


/* =========================================================
   MONTH INFO
   ========================================================= */

.month {

  min-width:
    0;

  flex:
    1;
}

.month strong {

  display:
    block;

  color:
    #17233b;

  font-family:
    "Outfit",
    sans-serif;

  font-size:
    1rem;

  font-weight:
    800;

  line-height:
    1.2;

  letter-spacing:
    -.02em;
}

.month small {

  display:
    block;

  margin-top:
    6px;

  color:
    #8190a4;

  font-size:
    .70rem;

  line-height:
    1.4;
}


/* =========================================================
   OPEN BUTTON
   ========================================================= */

.open {

  width:
    38px;

  height:
    38px;

  flex:
    0 0 38px;

  display:
    grid;

  place-items:
    center;

  border-radius:
    50%;

  color:
    var(--blue);

  background:
    rgba(255,255,255,.62);

  border:
    1px solid rgba(255,255,255,.87);

  transition:
    transform .45s var(--ease),
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}

.newsletter:hover
.open {

  transform:
    translate(4px,-4px)
    rotate(7deg);

  color:
    white;

  background:
    linear-gradient(
      135deg,
      var(--blue),
      var(--violet)
    );

  box-shadow:
    0 9px 20px rgba(22,119,255,.20);
}


/* =========================================================
   EMPTY YEAR
   ========================================================= */

.empty {

  width:
    100%;

  padding:
    35px
    20px;

  border-radius:
    21px;

  text-align:
    center;

  color:
    #79879b;

  background:
    rgba(255,255,255,.43);

  border:
    1px dashed rgba(255,255,255,.9);

  box-shadow:
    inset 0 1px rgba(255,255,255,.86);
}

.empty i {

  display:
    block;

  margin-bottom:
    10px;

  font-size:
    1.35rem;

  color:
    #8794a8;
}


/* =========================================================
   SEARCH STATES
   ========================================================= */

.search-hidden {

  display:
    none !important;
}

.search-hit {

  animation:
    searchResult .52s var(--ease) both;
}

@keyframes searchResult {

  from {
    opacity:
      0;

    transform:
      translateY(12px)
      scale(.97);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}


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

.footer {

  margin-top:
    24px;

  text-align:
    center;

  color:
    #8190a4;

  font-size:
    .72rem;
}

.footer span {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    10px
    15px;

  border-radius:
    999px;

  background:
    rgba(255,255,255,.37);

  border:
    1px solid rgba(255,255,255,.70);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}

.footer i {

  color:
    var(--blue);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1150px) {

  .newsletter-page {

    padding-left:
      30px;

    padding-right:
      30px;
  }

  .newsletters {

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

  .hero-content {

    gap:
      30px;
  }
}


/* =========================================================
   SMALL TABLET
   ========================================================= */

@media (max-width: 900px) {

  .hero {

    min-height:
      auto;

    padding:
      36px;
  }

  .hero-content {

    grid-template-columns:
      1fr;
  }

  .hero-stats {

    flex-direction:
      row;
  }

  .stat {

    flex:
      1;

    width:
      auto;

    min-height:
      95px;
  }

  .newsletters {

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


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

  #newsletter-app {

    min-height:
      100vh;
  }

  .newsletter-page {

    width:
      100%;

    padding:
      18px
      12px
      70px;
  }

  .hero {

    min-height:
      auto;

    padding:
      27px
      19px;

    margin-bottom:
      14px;

    border-radius:
      25px;
  }

  .eyebrow {

    font-size:
      .65rem;

    padding:
      8px
      12px;
  }

  .hero h1 {

    font-size:
      clamp(2.65rem, 14vw, 4rem);

    letter-spacing:
      -.075em;
  }

  .hero p {

    margin-top:
      17px;

    font-size:
      .86rem;

    line-height:
      1.7;
  }

  .hero-stats {

    display:
      grid;

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

    gap:
      9px;
  }

  .stat {

    min-height:
      91px;

    border-radius:
      19px;
  }

  .stat strong {

    font-size:
      1.8rem;
  }

  .stat small {

    font-size:
      .62rem;
  }


  /* SEARCH */

  .toolbar {

    flex-direction:
      column;

    align-items:
      stretch;

    gap:
      8px;

    padding:
      10px;

    border-radius:
      20px;
  }

  .search input {

    height:
      48px;
  }

  .result {

    padding:
      3px
      5px
      1px;

    font-size:
      .70rem;
  }


  /* YEAR */

  .year {

    border-radius:
      23px;
  }

  .year-button {

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

    gap:
      12px;

    padding:
      16px;
  }

  .year-icon {

    width:
      47px;

    height:
      47px;

    flex-basis:
      47px;

    border-radius:
      15px;
  }

  .year-title {

    font-size:
      1.24rem;
  }

  .year-meta {

    font-size:
      .68rem;

    margin-top:
      4px;
  }

  .year-count {

    display:
      none;
  }

  .chevron {

    width:
      33px;

    height:
      33px;
  }


  /* CONTENT */

  .year-content {

    padding:
      0
      13px
      17px;
  }


  /* CARDS */

  .newsletters {

    grid-template-columns:
      1fr;

    gap:
      10px;
  }

  .newsletter {

    min-height:
      112px;

    border-radius:
      19px;
  }

  .newsletter-link {

    min-height:
      112px;

    padding:
      14px;
  }

  .pdf-icon {

    width:
      47px;

    height:
      47px;

    flex-basis:
      47px;

    border-radius:
      15px;
  }

  .month strong {

    font-size:
      .95rem;
  }

  .month small {

    font-size:
      .67rem;
  }

  .open {

    width:
      34px;

    height:
      34px;

    flex-basis:
      34px;
  }

  .footer {

    margin-top:
      19px;

    font-size:
      .68rem;
  }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

  .newsletter-page {

    padding:
      14px
      9px
      60px;
  }

  .hero {

    padding:
      24px
      16px;
  }

  .hero h1 {

    font-size:
      2.55rem;
  }

  .hero-stats {

    gap:
      7px;
  }

  .stat {

    min-height:
      83px;

    padding:
      12px;
  }

  .stat strong {

    font-size:
      1.65rem;
  }

  .year-button {

    padding:
      14px;
  }

  .year-content {

    padding:
      0
      10px
      14px;
  }

  .newsletter-link {

    padding:
      13px;
  }
}


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

:focus-visible {

  outline:
    3px solid rgba(22,119,255,.35);

  outline-offset:
    3px;
}

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

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

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;
  }
}
```