:root {
  color-scheme: only light;
  --pink: #ff1fa9;
  --ink: #1a1a1a;
  --text: #333333;
  --muted: #555555;
  --line: #eeeeee;
  --pale-pink: #fff0fa;
  --blog-grid: 56px;
  --blog-half-grid: 28px;
  --blog-page-pad: var(--blog-grid);
}

* { box-sizing: border-box; }

html { background: #ffffff; color: var(--text); font-family: "Nunito", sans-serif; }

body { margin: 0; background: #ffffff; }
a { color: inherit; }

.blog-header {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 76px;
  padding: 0 clamp(24px, 5vw, 72px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid var(--line);
}

.blog-wordmark {
  color: var(--ink);
  font-family: "Carter One", cursive;
  font-size: 32px;
  line-height: 1;
  text-decoration: none;
}

.blog-wordmark span { color: var(--pink); }

main { min-height: 100vh; }

.blog-grid-field {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.blog-grid,
.blog-wash { position: absolute; inset: 0; z-index: -2; pointer-events: none; }

.blog-grid {
  background-image:
    linear-gradient(to right, var(--pink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--pink) 1px, transparent 1px);
  background-position: var(--blog-page-pad) var(--breadcrumb-bar-height);
  background-size: var(--blog-grid) var(--blog-grid);
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 58%, transparent 100%);
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 58%, transparent 100%);
}

.blog-wash {
  z-index: -1;
  background: linear-gradient(135deg, rgba(255, 31, 169, 0.05) 0%, rgba(255, 255, 255, 0) 45%);
}

.blog-hero {
  min-height: calc(var(--blog-grid) * 14);
  margin: 0 var(--blog-page-pad);
  display: grid;
  grid-template-columns: repeat(auto-fill, var(--blog-grid));
  grid-template-rows: repeat(14, var(--blog-grid));
  gap: 0;
}

.blog-hero-copy {
  position: relative;
  z-index: 1;
  width: min(600px, calc(100vw - (var(--blog-half-grid) * 2)));
  grid-column: 1 / span 10;
  grid-row: 2 / span 5;
}

h1,
h2 {
  margin-top: 0;
  color: var(--ink);
  font-family: "Carter One", cursive;
  font-weight: 400;
}

h1 {
  max-width: calc(var(--blog-grid) * 10);
  margin-bottom: var(--blog-half-grid);
  font-size: clamp(32px, 3.45vw, 52px);
  line-height: 1.15;
}

.blog-hero-copy p {
  max-width: calc(var(--blog-grid) * 9);
  margin: 0;
  color: var(--muted);
  font-size: clamp(18px, 1.5vw, 21px);
  line-height: 1.55;
}

.blog-hero-copy::before {
  position: absolute;
  z-index: -1;
  inset: -38px -54px;
  content: "";
  pointer-events: none;
  background: radial-gradient(ellipse farthest-side at center, #ffffff 0%, rgba(255, 255, 255, 0.98) 52%, rgba(255, 255, 255, 0.78) 70%, rgba(255, 255, 255, 0) 100%);
}

.blog-hero-mark {
  position: relative;
  width: calc(var(--blog-grid) * 5);
  height: calc(var(--blog-grid) * 5);
  grid-column: 1 / span 5;
  grid-row: 8 / span 5;
}

.blog-hero-mark span {
  position: absolute;
  display: block;
  box-sizing: border-box;
}

.blog-hero-mark span:nth-child(1) {
  inset: 0;
  border: 3px solid var(--pink);
}

.blog-hero-mark span:nth-child(2) {
  top: calc(var(--blog-grid) * 2);
  left: calc(var(--blog-grid) * 2);
  width: calc(var(--blog-grid) * 3);
  height: calc(var(--blog-grid) * 3);
  border: 3px solid var(--pink);
  background: var(--pale-pink);
}

.blog-hero-mark span:nth-child(3) {
  top: calc(var(--blog-grid) * 4);
  left: calc(var(--blog-grid) * 4);
  width: var(--blog-grid);
  height: var(--blog-grid);
  background: var(--pink);
}

@media (min-width: 1000px) {
  .blog-hero {
    min-height: calc(var(--blog-grid) * 9);
    grid-template-rows: repeat(9, var(--blog-grid));
  }

  .blog-hero-copy {
    width: auto;
    grid-column: 1 / span 10;
    grid-row: 3 / span 5;
  }

  .blog-hero-mark {
    grid-column: -6 / -1;
    grid-row: 3 / span 5;
  }
}

@media (max-width: 520px) {
  :root { --blog-page-pad: var(--blog-half-grid); }
  .blog-header { min-height: 76px; padding: 18px var(--blog-half-grid); }
  .blog-header .blog-wordmark { font-size: 27px; }
  .blog-hero-copy { grid-column: 1 / span 6; }
}

.blog-page{--blog-page-pad:max(24px,calc((100vw - 1120px)/2))}.blog-hero{display:grid;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto;align-items:center;gap:56px;min-height:500px;padding:72px 0}.blog-hero-copy{width:auto;min-width:0;grid-column:1;grid-row:1}.blog-hero-mark{grid-column:2;grid-row:1}.blog-articles{padding-top:56px}.blog-article-list{max-width:100%}@media(max-width:900px){.blog-hero{grid-template-columns:minmax(0,1fr);gap:40px;padding:56px 0}.blog-hero-copy{grid-column:1;grid-row:1}.blog-hero-mark{grid-column:1;grid-row:2;width:280px;height:280px}.blog-hero-copy h1{overflow-wrap:break-word}}

/* Layout cells and artwork share the background grid origin. */
.blog-grid-field .blog-hero{width:var(--page-grid-width);margin-inline:auto;min-height:0;padding:var(--blog-grid) 0;gap:var(--blog-grid);align-items:start;grid-template-rows:auto}
.blog-grid-field .blog-hero-copy{grid-column:1;grid-row:1;width:100%}
.blog-grid-field .blog-hero-mark{margin:0;width:calc(5 * var(--blog-grid));height:calc(5 * var(--blog-grid))}
.blog-grid-field .blog-articles{padding-top:var(--blog-grid)}