:root {
  /* Base */
  --bg: #0d0f11;
  --surface: #131619;
  --surface-2: #171b1f;
  --surface-3: #1d2227;

  /* Text */
  --text: #f4f4f1;
  --text-soft: #d5d7da;
  --muted: #969ca3;
  --muted-2: #70767d;

  /* Borders */
  --border: #2a3036;
  --border-strong: #383f46;

  /* General UI colours */
  --blue: #3b82f6;
  --blue-soft: rgba(59, 130, 246, 0.12);

  --green: #38b26c;
  --green-soft: rgba(56, 178, 108, 0.12);

  --purple: #8b5cf6;
  --purple-soft: rgba(139, 92, 246, 0.12);

  --amber: #f59e0b;
  --amber-soft: rgba(245, 158, 11, 0.12);

  --red: #ef4444;
  --red-soft: rgba(239, 68, 68, 0.1);

  /* Microsoft product colours */
  --product-entra: #4f6bed;
  --product-intune: #0078d4;
  --product-defender: #7a5af8;
  --product-purview: #00a4a6;
  --product-azure: #0089d6;
  --product-sharepoint: #038387;

  /* Read state */
  --product-read: #242222;
  --product-read-bg: rgba(139, 145, 152, 0.16);
  --product-read-border: rgba(139, 145, 152, 0.32);

  /* Why it matters */
  --why-green: #63c174;
  --why-green-soft: rgba(99, 193, 116, 0.045);
  --why-green-border: rgba(99, 193, 116, 0.42);

  /* Coffee */
  --coffee: #ffcf3f;
  --coffee-hover: #ffda66;

  /* Layout */
  --shadow:
    0 12px 36px rgba(0, 0, 0, 0.22);

  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;

  --content-width: 1120px;
}


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

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;

  min-height: 100vh;

  background:
    radial-gradient(
      circle at top left,
      rgba(59, 130, 246, 0.035),
      transparent 34%
    ),
    var(--bg);

  color: var(--text);

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

  font-size: 16px;
  line-height: 1.6;
}

button,
select,
input {
  font: inherit;
}

button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: inherit;
}

img,
svg {
  display: block;
  max-width: 100%;
}


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

.sr-only {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  padding: 0 !important;
  margin: -1px !important;

  overflow: hidden !important;

  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;

  border: 0 !important;
}


/* =========================================================
   SITE SHELL
   ========================================================= */

.site-shell {
  width: min(
    calc(100% - 32px),
    var(--content-width)
  );

  margin: 0 auto;

  padding:
    28px
    0
    120px;
}


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

.site-header {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 24px;

  padding:
    4px
    0
    28px;
}

.brand {
  display: flex;

  align-items: center;

  gap: 20px;

  min-width: 0;
}
.brand-icon {
  width: 110px;
  height: 82px;

  flex: 0 0 auto;

  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-logo {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;
}

.brand-copy {
  min-width: 0;
}

.brand-copy h1 {
  margin: 0;

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

  font-size:
    clamp(
      2rem,
      4vw,
      3.35rem
    );

  line-height: 1.05;

  font-weight: 700;

  letter-spacing: -0.035em;
}

.brand-copy p {
  margin:
    8px
    0
    0;

  color: var(--muted);

  font-size:
    clamp(
      0.95rem,
      2vw,
      1.08rem
    );
}

.last-updated {
  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex: 0 0 auto;

  padding:
    11px
    15px;

  color: var(--text-soft);

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

  border-radius: 10px;

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

  font-size: 0.9rem;
}

.last-updated-icon {
  color: var(--muted);

  font-size: 1.15rem;
}

.status-dot {
  width: 8px;
  height: 8px;

  margin-left: 2px;

  border-radius: 50%;

  background: var(--blue);

  box-shadow:
    0
    0
    0
    3px
    rgba(
      59,
      130,
      246,
      0.08
    );
}


/* =========================================================
   SUMMARY PANEL
   ========================================================= */

.summary-panel {
  margin-bottom: 24px;

  padding:
    24px
    28px;

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

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

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.015),
      rgba(255, 255, 255, 0.004)
    );

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

.summary-grid {
  display: grid;

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

  gap: 0;
}

.summary-item {
  display: flex;

  align-items: flex-start;

  gap: 15px;

  min-width: 0;

  padding:
    2px
    26px;
}

.summary-item:first-child {
  padding-left: 0;
}

.summary-item:last-child {
  padding-right: 0;
}

.summary-item + .summary-item {
  border-left:
    1px
    solid
    var(--border);
}

.summary-icon {
  flex: 0 0 auto;

  min-width: 42px;

  color: var(--muted);

  font-size: 2rem;

  line-height: 1;
}

.summary-icon-updates {
  color: var(--blue);
}

.summary-icon-action {
  color: var(--amber);
}

.summary-icon-unread {
  color: var(--purple);
}

.summary-icon-time {
  color: var(--muted);
}

.summary-icon-read {
  color: var(--product-read);
}

.summary-content {
  display: grid;

  min-width: 0;
}

.summary-number {
  font-size:
    clamp(
      1.8rem,
      3vw,
      2.3rem
    );

  line-height: 1;

  font-weight: 700;

  letter-spacing: -0.04em;
}

.summary-label {
  margin-top: 5px;

  color: var(--text-soft);

  font-size: 0.95rem;

  line-height: 1.2;
}

.summary-detail {
  margin-top: 10px;

  color: var(--muted);

  font-size: 0.78rem;

  line-height: 1.3;
}


/* =========================================================
   SUMMARY FILTER BUTTONS
   ========================================================= */

.summary-filter {
  appearance: none;

  width: 100%;

  text-align: left;

  color: inherit;

  border: 0;

  background: transparent;

  cursor: pointer;

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

.summary-filter:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.018
    );
}

.summary-filter.active {
  background:
    rgba(
      59,
      130,
      246,
      0.055
    );

  box-shadow:
    inset
    0
    -2px
    0
    var(--blue);
}

.summary-filter:focus-visible {
  outline:
    2px
    solid
    var(--blue);

  outline-offset:
    -2px;
}

.summary-filter[data-status="all"].active
.summary-icon {
  color: var(--blue);
}

.summary-filter[data-status="action"].active
.summary-icon {
  color: var(--amber);
}

.summary-filter[data-status="unread"].active
.summary-icon {
  color: #60a5fa;
}

.summary-filter[data-status="read"].active
.summary-icon {
  color: #8f98a3;
}


/* =========================================================
   FILTER BAR
   ========================================================= */

.filter-bar {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;

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

.product-tabs {
  display: flex;

  align-items: center;

  gap: 2px;

  overflow-x: auto;

  scrollbar-width: none;
}

.product-tabs::-webkit-scrollbar {
  display: none;
}

.filter-tab {
  position: relative;

  appearance: none;

  padding:
    14px
    16px;

  color: var(--muted);

  border: 0;

  background: transparent;

  cursor: pointer;

  font-size: 0.95rem;

  transition:
    color 160ms ease,
    background 160ms ease;
}

.filter-tab:hover,
.filter-tab:focus-visible {
  color: var(--text);
}

.filter-tab.active {
  color: var(--blue);
}

.filter-tab.active::after {
  content: "";

  position: absolute;

  left: 12px;
  right: 12px;
  bottom: -1px;

  height: 2px;

  background: var(--blue);
}


/* Product-specific active tab colours */

.filter-tab-entra.active {
  color: var(--product-entra);
}

.filter-tab-entra.active::after {
  background: var(--product-entra);
}

.filter-tab-intune.active {
  color: var(--product-intune);
}

.filter-tab-intune.active::after {
  background: var(--product-intune);
}

.filter-tab-defender.active {
  color: var(--product-defender);
}

.filter-tab-defender.active::after {
  background: var(--product-defender);
}

.filter-tab-purview.active {
  color: var(--product-purview);
}

.filter-tab-purview.active::after {
  background: var(--product-purview);
}


/* =========================================================
   PRODUCT SELECT
   ========================================================= */

.filter-select-wrapper {
  flex: 0 0 auto;

  padding-bottom: 8px;
}

.product-filter {
  min-width: 220px;

  padding:
    11px
    40px
    11px
    14px;

  color: var(--text-soft);

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

  border-radius: 10px;

  background:
    var(--surface);

  cursor: pointer;

  outline: none;
}

.product-filter:hover {
  border-color:
    var(--border-strong);
}

.product-filter:focus {
  border-color: var(--blue);

  box-shadow:
    0
    0
    0
    3px
    rgba(
      59,
      130,
      246,
      0.1
    );
}


/* =========================================================
   ACTIVE FILTER DESCRIPTION
   ========================================================= */

.active-filter-description {
  margin:
    -2px
    0
    14px;

  color: var(--muted);

  font-size: 0.82rem;
}


/* =========================================================
   FEED
   ========================================================= */

.feed,
#feed {
  display: grid;

  gap: 12px;
}


/* =========================================================
   UPDATE CARDS
   ========================================================= */

.update-card {
  position: relative;

  overflow: hidden;

  padding:
    24px
    28px
    20px;

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

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

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.012),
      rgba(255, 255, 255, 0.004)
    );

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

.update-card:hover {
  border-color:
    var(--border-strong);

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.022),
      rgba(255, 255, 255, 0.007)
    );
}

.update-card::before {
  content: "";

  position: absolute;

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

  width: 4px;

  background: var(--blue);
}


/* =========================================================
   PRODUCT CARD STRIPES
   ========================================================= */

.update-card.product-entra::before {
  background: var(--product-entra);
}

.update-card.product-intune::before {
  background: var(--product-intune);
}

.update-card.product-defender::before {
  background: var(--product-defender);
}

.update-card.product-purview::before {
  background: var(--product-purview);
}

.update-card.product-azure::before {
  background: var(--product-azure);
}

.update-card.product-sharepoint::before {
  background: var(--product-sharepoint);
}


/* =========================================================
   CARD META
   ========================================================= */

.update-meta {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px;

  margin-bottom: 14px;
}

.badge {
  display: inline-flex;

  align-items: center;

  min-height: 30px;

  padding:
    5px
    11px;

  border:
    1px
    solid
    transparent;

  border-radius: 5px;

  background: var(--surface-3);

  color: var(--text-soft);

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.02em;

  text-transform: uppercase;
}


/* =========================================================
   PRODUCT BADGES
   ========================================================= */

.badge.entra {
  color: #e6ebff;

  background:
    rgba(
      79,
      107,
      237,
      0.26
    );

  border-color:
    rgba(
      79,
      107,
      237,
      0.48
    );
}

.badge.intune {
  color: #e1f2ff;

  background:
    rgba(
      0,
      120,
      212,
      0.27
    );

  border-color:
    rgba(
      0,
      120,
      212,
      0.5
    );
}

.badge.defender {
  color: #ede8ff;

  background:
    rgba(
      122,
      90,
      248,
      0.26
    );

  border-color:
    rgba(
      122,
      90,
      248,
      0.48
    );
}

.badge.purview {
  color: #dfffff;

  background:
    rgba(
      0,
      164,
      166,
      0.23
    );

  border-color:
    rgba(
      0,
      164,
      166,
      0.48
    );
}

.badge.azure {
  color: #e0f4ff;

  background:
    rgba(
      0,
      137,
      214,
      0.25
    );

  border-color:
    rgba(
      0,
      137,
      214,
      0.5
    );
}

.badge.sharepoint {
  color: #dfffff;

  background:
    rgba(
      3,
      131,
      135,
      0.25
    );

  border-color:
    rgba(
      3,
      131,
      135,
      0.5
    );
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.badge.action-required {
  margin-left: auto;

  color: #ff6d6d;

  border-color:
    rgba(
      239,
      68,
      68,
      0.5
    );

  background:
    rgba(
      239,
      68,
      68,
      0.04
    );

  text-transform: none;
}

.badge.preview {
  color: #75b4ff;

  border-color:
    rgba(
      59,
      130,
      246,
      0.45
    );

  background:
    rgba(
      59,
      130,
      246,
      0.05
    );
}


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

.update-title {
  max-width: 860px;

  margin:
    0
    0
    10px;

  color: var(--text);

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

  font-size:
    clamp(
      1.35rem,
      2.4vw,
      1.72rem
    );

  line-height: 1.2;

  font-weight: 700;

  letter-spacing: -0.018em;
}


/* =========================================================
   CARD SUMMARY
   ========================================================= */

.update-summary {
  max-width: 850px;

  margin:
    0
    0
    14px;

  color: var(--text-soft);

  font-size: 0.98rem;

  line-height: 1.55;
}


/* =========================================================
   WHY IT MATTERS
   Always green regardless of product or read state.
   ========================================================= */

.update-why {
  max-width: 760px;

  display: flex;

  align-items: flex-start;

  gap: 6px;

  margin:
    0
    0
    18px;

  padding:
    11px
    14px;

  color: var(--text-soft);

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

  border-left:
    4px
    solid
    var(--why-green);

  border-radius: 8px;

  background:
    var(--why-green-soft);

  font-size: 0.92rem;

  line-height: 1.45;
}

.update-why strong {
  color: var(--why-green);

  white-space: nowrap;
}


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

.update-footer {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 16px;

  color: var(--muted);

  font-size: 0.88rem;
}

.update-footer span {
  position: relative;
}

.update-footer span + a::before {
  content: "•";

  margin-right: 16px;

  color: var(--muted-2);
}

.update-footer a {
  color: var(--blue);

  font-weight: 500;

  text-decoration: none;

  transition:
    color 160ms ease;
}

.update-footer a:hover,
.update-footer a:focus-visible {
  color: #6ca5ff;

  text-decoration: underline;

  text-underline-offset: 3px;
}


/* =========================================================
   READ STATE
   Product identity becomes neutral once read.
   Article content remains full strength.
   Why-it-matters remains green.
   ========================================================= */

.update-card.is-read {
  opacity: 1;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.012),
      rgba(255, 255, 255, 0.004)
    );
}


/*
 * IMPORTANT:
 * This selector deliberately comes AFTER all product stripe
 * rules so the read state always wins.
 */

.update-card.is-read::before {
  background:
    var(--product-read);
}


/*
 * Only the product badge becomes neutral.
 *
 * Status badges such as Action Required, Preview and
 * Upcoming Change retain their own visual meaning.
 */

.update-card.is-read .badge.entra,
.update-card.is-read .badge.intune,
.update-card.is-read .badge.defender,
.update-card.is-read .badge.purview,
.update-card.is-read .badge.azure,
.update-card.is-read .badge.sharepoint {
  color: #e0e3e6;

  background:
    var(--product-read-bg);

  border-color:
    var(--product-read-border);
}


/*
 * Never dim read article content.
 */

.update-card.is-read .update-title,
.update-card.is-read .update-summary,
.update-card.is-read .update-footer,
.update-card.is-read .update-why {
  opacity: 1;
}


/*
 * Why it matters stays green even after reading.
 */

.update-card.is-read .update-why {
  border:
    1px
    solid
    var(--why-green-border);

  border-left:
    4px
    solid
    var(--why-green);

  background:
    var(--why-green-soft);
}

.update-card.is-read .update-why strong {
  color: var(--why-green);
}


/* =========================================================
   READ INDICATOR
   ========================================================= */

.read-indicator {
  display: inline-flex;

  align-items: center;

  gap: 4px;

  color: var(--product-read);

  font-weight: 600;
}


/* =========================================================
   EMPTY / ERROR STATES
   ========================================================= */

.empty-state,
.error-state {
  padding:
    28px;

  color: var(--muted);

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

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

  background: var(--surface);
}

.error-state {
  color: #ff9a9a;

  border-color:
    rgba(
      239,
      68,
      68,
      0.25
    );
}


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

.site-footer {
  padding:
    18px
    4px
    0;
}

.footer-note {
  display: flex;

  align-items: center;

  gap: 12px;

  color: var(--muted);

  font-size: 0.76rem;
}

.footer-note div {
  display: grid;
}

.footer-note strong {
  color: var(--text-soft);

  font-weight: 600;
}

.footer-note span {
  line-height: 1.35;
}

.footer-shield {
  color: var(--muted);

  font-size: 1.5rem;
}


/* =========================================================
   BUY ME A COFFEE
   ========================================================= */

.coffee-button {
  position: fixed;

  right: 24px;
  bottom: 24px;

  z-index: 1000;

  display: inline-flex;

  align-items: center;

  gap: 11px;

  min-height: 58px;

  padding:
    0
    20px;

  color: #151515;

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

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #ffda58,
      var(--coffee)
    );

  box-shadow:
    0
    8px
    26px
    rgba(
      255,
      196,
      0,
      0.18
    ),
    0
    4px
    14px
    rgba(
      0,
      0,
      0,
      0.3
    );

  font-size: 1rem;

  font-weight: 700;

  text-decoration: none;

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

.coffee-button:hover {
  transform:
    translateY(-2px);

  background:
    linear-gradient(
      180deg,
      #ffe37c,
      var(--coffee-hover)
    );

  box-shadow:
    0
    12px
    30px
    rgba(
      255,
      196,
      0,
      0.25
    ),
    0
    6px
    16px
    rgba(
      0,
      0,
      0,
      0.35
    );
}

.coffee-button:focus-visible {
  outline:
    3px
    solid
    rgba(
      255,
      207,
      63,
      0.35
    );

  outline-offset: 4px;
}

.coffee-icon {
  font-size: 1.2rem;
}

.coffee-external {
  font-size: 1rem;
}


/* =========================================================
   FOCUS STATES
   ========================================================= */

.filter-tab:focus-visible,
.update-footer a:focus-visible {
  outline:
    2px
    solid
    var(--blue);

  outline-offset: 3px;
}


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

@media (max-width: 900px) {
  .site-header {
    align-items: flex-start;
  }

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

    row-gap: 22px;
  }

  .summary-item {
    padding:
      4px
      18px;
  }

  .summary-item:nth-child(3) {
    border-left: 0;
  }

  .summary-item:nth-child(3),
  .summary-item:nth-child(4) {
    padding-top: 20px;

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

  .filter-bar {
    align-items: flex-end;
  }

  .product-filter {
    min-width: 190px;
  }
}


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

@media (max-width: 700px) {
  .site-shell {
    width: min(
      calc(100% - 20px),
      var(--content-width)
    );

    padding:
      20px
      0
      100px;
  }

  .site-header {
    display: grid;

    gap: 18px;

    padding-bottom: 22px;
  }

  .brand {
    gap: 14px;
  }

.brand-icon {
  width: 82px;
  height: 62px;
}

  border-radius: 50%;
}

  .brand-copy h1 {
    font-size: 2rem;
  }

  .brand-copy p {
    font-size: 0.92rem;
  }

  .last-updated {
    width: fit-content;

    padding:
      9px
      12px;

    font-size: 0.8rem;
  }


  /* Summary */

  .summary-panel {
    padding:
      18px
      16px;

    margin-bottom: 18px;
  }

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

    gap: 0;
  }

  .summary-item {
    gap: 10px;

    padding:
      12px
      10px;
  }

  .summary-item:first-child {
    padding-left: 10px;
  }

  .summary-item:last-child {
    padding-right: 10px;
  }

  .summary-item:nth-child(2) {
    border-left:
      1px
      solid
      var(--border);
  }

  .summary-item:nth-child(3) {
    border-left: 0;
  }

  .summary-item:nth-child(3),
  .summary-item:nth-child(4) {
    border-top:
      1px
      solid
      var(--border);
  }

  .summary-filter {
    min-height: 92px;
  }

  .summary-filter.active {
    box-shadow:
      inset
      0
      -2px
      0
      var(--blue);
  }

  .summary-icon {
    min-width: 30px;

    font-size: 1.4rem;
  }

  .summary-number {
    font-size: 1.6rem;
  }

  .summary-label {
    font-size: 0.8rem;
  }

  .summary-detail {
    display: none;
  }


  /* Product filters */

  .filter-bar {
    display: block;

    margin-bottom: 14px;
  }

  .product-tabs {
    width: 100%;
  }

  .filter-tab {
    flex: 0 0 auto;

    padding:
      12px
      13px;

    font-size: 0.88rem;
  }

  .filter-select-wrapper {
    display: none;
  }


  /* Feed */

  .feed,
  #feed {
    gap: 10px;
  }

  .update-card {
    padding:
      18px
      17px
      17px;

    border-radius: 10px;
  }

  .update-meta {
    margin-bottom: 12px;

    gap: 6px;
  }

  .badge {
    min-height: 26px;

    padding:
      4px
      8px;

    font-size: 0.64rem;
  }

  .badge.action-required {
    margin-left: 0;
  }

  .update-title {
    font-size: 1.28rem;

    line-height: 1.22;
  }

  .update-summary {
    font-size: 0.94rem;

    line-height: 1.5;
  }

  .update-why {
    display: block;

    padding:
      10px
      12px;

    margin-bottom: 14px;

    font-size: 0.88rem;
  }

  .update-why strong {
    white-space: normal;
  }

  .update-footer {
    gap: 8px;

    font-size: 0.82rem;
  }

  .update-footer span + a::before {
    margin-right: 8px;
  }


  /* Footer */

  .site-footer {
    padding-top: 14px;
  }


  /* Coffee */

  .coffee-button {
    right: 12px;
    bottom: 12px;

    min-height: 52px;

    padding:
      0
      16px;

    gap: 8px;

    font-size: 0.9rem;
  }
}


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

@media (max-width: 420px) {
  .brand-copy h1 {
    font-size: 1.7rem;
  }

  .brand-copy p {
    font-size: 0.84rem;
  }

  .summary-panel {
    padding:
      12px
      10px;
  }

  .summary-item {
    padding:
      11px
      8px;
  }

  .summary-number {
    font-size: 1.4rem;
  }

  .summary-label {
    font-size: 0.74rem;
  }

  .update-card {
    padding:
      17px
      15px
      16px;
  }

  .update-title {
    font-size: 1.18rem;
  }

  .coffee-button {
    max-width:
      calc(
        100vw - 24px
      );
  }
}


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

@media (
  prefers-reduced-motion:
  reduce
) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;

    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;
  }
}