:root {
  --bg: #0f100f;
  --frame: #181817;
  --ink: #111111;
  --cream: #f4efe7;
  --paper: #fff8ed;
  --muted: #7c7062;
  --green: #005846;
  --green-deep: #003e34;
  --mint: #8be481;
  --red: #e90808;
  --line: rgba(17, 17, 17, 0.18);
  --radius: 24px;
  --gap: 14px;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: center;
  background: var(--bg);
  color: var(--ink);
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

a {
  color: inherit;
}

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

.page-shell {
  width: min(1220px, calc(100% - 32px));
  margin: 24px auto;
  padding: 28px;
  background: var(--frame);
  border: 1px solid rgba(244, 239, 231, 0.08);
  border-radius: 30px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: repeat(8, 88px);
  grid-template-areas:
    "blog blog blog tools tools tools tools art art art art art"
    "blog blog blog tools tools tools tools art art art art art"
    "blog blog blog logo logo logo logo art art art art art"
    "about about about logo logo logo logo art art art art art"
    "about about about logo logo logo logo contact contact contact contact contact"
    "friends friends friends friends date date date contact contact contact contact contact"
    "friends friends friends friends quote quote quote contact contact contact contact contact"
    "friends friends friends friends quote quote quote contact contact contact contact contact";
  gap: var(--gap);
}

.card {
  position: relative;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid rgba(17, 17, 17, 0.1);
  isolation: isolate;
}

.card-link {
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 320ms ease,
    background-color 320ms ease,
    color 320ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease;
}

.card-link:hover,
.card-link:focus-visible {
  transform: translateY(-6px);
  border-color: rgba(244, 239, 231, 0.35);
  box-shadow: 0 18px 30px rgba(0, 0, 0, 0.25);
  outline: none;
}

.card-link:focus-visible {
  box-shadow:
    0 0 0 3px var(--mint),
    0 18px 30px rgba(0, 0, 0, 0.25);
}

.card-index {
  z-index: 2;
  color: currentColor;
  font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.76;
  transition: opacity 180ms ease;
}

.card h1,
.card h2,
.card p {
  z-index: 2;
  margin: 0;
}

.card h1,
.card h2 {
  max-width: 100%;
  font-family:
    Impact, Haettenschweiler, "Arial Narrow Bold", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: 0;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.card h1 {
  color: var(--green);
  font-size: 4.4rem;
}

.card h2 {
  font-size: 3.6rem;
}

.card h2 span {
  display: block;
  margin-top: 8px;
  font-family:
    "PingFang SC", "Microsoft YaHei", Inter, ui-sans-serif, sans-serif;
  font-size: 1rem;
  line-height: 1.15;
}

.card p {
  max-width: 28ch;
  color: currentColor;
  font-size: 0.96rem;
  font-weight: 700;
  line-height: 1.55;
}

.card-arrow {
  position: absolute;
  z-index: 3;
  right: 18px;
  top: 16px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 900;
  opacity: 0;
  transform: translate(-8px, 8px);
  transition:
    opacity 320ms ease,
    transform 320ms ease;
}

.card-link:hover .card-arrow,
.card-link:focus-visible .card-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.card-blog {
  grid-area: blog;
  --hover-fill: var(--paper);
  justify-content: center;
  gap: 12px;
  background: var(--red);
  color: var(--paper);
}

.card-blog .card-index,
.card-tools .card-index {
  position: absolute;
  top: 14px;
  left: 22px;
}

.card-blog h2 {
  font-size: 4.8rem;
}

.card-blog h2,
.card-tools h2 {
  transition: transform 520ms cubic-bezier(0.18, 0.9, 0.2, 1);
}

.card-blog:hover,
.card-blog:focus-visible {
  color: var(--red);
}

.card-blog:hover h2,
.card-blog:focus-visible h2 {
  transform: translateY(-24px);
}

.card-blog:hover .card-index,
.card-blog:focus-visible .card-index,
.card-tools:hover .card-index,
.card-tools:focus-visible .card-index {
  opacity: 0;
}

.card-blog:hover .ripple-description,
.card-blog:focus-visible .ripple-description {
  color: var(--ink);
}

.doodle {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}

.doodle-arc {
  right: -24px;
  bottom: -34px;
  width: 170px;
  height: 170px;
  border: 11px solid var(--paper);
  border-left-color: transparent;
  border-radius: 50%;
  transform: rotate(-26deg);
  opacity: 0.82;
}

.card-tools {
  grid-area: tools;
  --hover-fill: var(--red);
  justify-content: center;
  gap: 10px;
  background: var(--cream);
  color: var(--red);
}

.card-tools p {
  color: var(--paper);
  max-width: 17ch;
}

.card-tools:hover,
.card-tools:focus-visible {
  color: var(--paper);
}

.card-tools:hover h2,
.card-tools:focus-visible h2 {
  transform: translateY(-42px) scale(0.9);
  transform-origin: left center;
}

.ripple-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: var(--hover-fill);
  clip-path: circle(0 at var(--spot-x, 50%) var(--spot-y, 50%));
  transition: clip-path 1150ms cubic-bezier(0.16, 0.88, 0.22, 1);
}

.ripple-card:hover::before,
.ripple-card:focus-visible::before {
  clip-path: circle(145% at var(--spot-x, 50%) var(--spot-y, 50%));
}

.ripple-description {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 24px;
  max-width: 22ch;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 420ms ease 140ms,
    transform 520ms ease 120ms;
}

.card-tools .ripple-description {
  max-width: 28ch;
  bottom: 22px;
  font-size: 0.9rem;
  line-height: 1.35;
}

.ripple-card:hover .ripple-description,
.ripple-card:focus-visible .ripple-description {
  opacity: 1;
  transform: translateY(0);
}

.card-tools:hover .tool-marks span,
.card-tools:focus-visible .tool-marks span {
  border-color: var(--paper);
}

.tool-marks {
  z-index: 2;
  transition:
    opacity 380ms ease,
    transform 420ms ease;
}

.card-tools:hover .tool-marks,
.card-tools:focus-visible .tool-marks {
  opacity: 0.18;
  transform: translateY(10px);
}

.tool-marks {
  position: absolute;
  right: 26px;
  bottom: 20px;
  display: grid;
  grid-template-columns: repeat(3, 38px);
  gap: 8px;
}

.tool-marks span {
  aspect-ratio: 1;
  border: 5px solid var(--green);
  border-radius: 12px;
}

.tool-marks span:nth-child(2) {
  background: var(--red);
  border-color: var(--red);
}

.tool-marks span:nth-child(3) {
  border-radius: 50%;
  background: var(--mint);
}

.card-art {
  grid-area: art;
  padding: 0;
  background: var(--green-deep);
}

.card-art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.22);
  transform-origin: center;
}

.card-logo {
  grid-area: logo;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  background: var(--cream);
  color: var(--green);
  border-color: rgba(0, 88, 70, 0.15);
}

.card-logo::before,
.card-logo::after {
  content: "";
  position: absolute;
  z-index: 1;
  border: 3px solid currentColor;
  border-radius: 999px;
  opacity: 0.18;
}

.card-logo::before {
  width: 220px;
  height: 74px;
  top: 28px;
  left: -48px;
  transform: rotate(-9deg);
}

.card-logo::after {
  width: 180px;
  height: 180px;
  right: -70px;
  bottom: -82px;
}

.logo-mark {
  z-index: 2;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--green);
  border: 7px solid var(--ink);
  border-radius: 50%;
  font-family:
    Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 3rem;
  line-height: 1;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.logo-mark.has-image {
  overflow: hidden;
  padding: 0;
  background: var(--paper);
}

.logo-copy {
  z-index: 2;
  display: grid;
  gap: 8px;
  justify-items: center;
}

.logo-copy p {
  color: var(--ink);
}

.logo-foot {
  position: absolute;
  z-index: 2;
  left: 18px;
  right: 18px;
  bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-weight: 800;
}

.card-about {
  grid-area: about;
  --hover-fill: var(--green);
  background: var(--paper);
  color: var(--green);
}

.card-about .card-description {
  color: var(--ink);
  max-width: 20ch;
  font-size: 0.9rem;
  line-height: 1.45;
  transition:
    color 520ms ease,
    transform 520ms ease;
}

.card-about h2 {
  font-size: 3.15rem;
  transition: transform 520ms cubic-bezier(0.18, 0.9, 0.2, 1);
}

.card-about:hover,
.card-about:focus-visible {
  color: var(--paper);
}

.card-about:hover .card-description,
.card-about:focus-visible .card-description {
  color: var(--paper);
  transform: translateY(-4px);
}

.card-about:hover h2,
.card-about:focus-visible h2 {
  transform: translateY(-8px);
}

.face-doodle {
  position: absolute;
  z-index: 1;
  right: -10px;
  bottom: -10px;
  width: 70px;
  height: 70px;
  border: 5px solid var(--ink);
  border-radius: 48% 52% 45% 55%;
  opacity: 0.34;
}

.face-doodle::before,
.face-doodle::after {
  content: "";
  position: absolute;
  top: 24px;
  width: 9px;
  height: 9px;
  background: var(--ink);
  border-radius: 50%;
}

.face-doodle::before {
  left: 18px;
}

.face-doodle::after {
  right: 18px;
}

.card-friends {
  grid-area: friends;
  --hover-fill: var(--red);
  background: var(--paper);
  color: var(--green);
}

.card-friends .card-description {
  color: var(--ink);
  transition:
    color 520ms ease,
    transform 520ms ease;
}

.card-friends h2 {
  transition: transform 520ms cubic-bezier(0.18, 0.9, 0.2, 1);
}

.card-friends:hover,
.card-friends:focus-visible {
  color: var(--paper);
}

.card-friends:hover .card-description,
.card-friends:focus-visible .card-description {
  color: var(--paper);
  transform: translateY(-6px);
}

.card-friends:hover h2,
.card-friends:focus-visible h2 {
  transform: translateY(-8px);
}

.card-contact {
  grid-area: contact;
  justify-content: center;
  background: var(--red);
  color: var(--paper);
}

.card-contact h2 {
  font-size: 3.4rem;
}

.card-contact p {
  color: var(--paper);
}

.social-grid {
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.social-grid a {
  min-height: 104px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 20px;
  text-decoration: none;
  transition:
    transform 320ms ease,
    background-color 320ms ease,
    color 320ms ease;
}

.social-grid svg {
  width: clamp(34px, 5vw, 48px);
  height: clamp(34px, 5vw, 48px);
  fill: currentColor;
}

.social-grid a:hover,
.social-grid a:focus-visible {
  transform: translateY(-4px);
  background: var(--mint);
  outline: none;
}

.card-date {
  grid-area: date;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  background: var(--ink);
  color: var(--paper);
}

.card-date span {
  font-family:
    Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-size: 2.1rem;
  line-height: 1;
}

.card-date small {
  color: var(--mint);
  font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
}

.card-quote {
  grid-area: quote;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--green-deep);
  color: var(--paper);
}

.card-quote blockquote {
  z-index: 2;
  display: grid;
  gap: 12px;
  margin: 0;
}

.card-quote p {
  max-width: none;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.35;
}

.card-quote cite {
  color: var(--mint);
  font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
}

body.about-open {
  overflow: hidden;
}

.about-view {
  position: fixed;
  z-index: 900;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 6vw, 84px);
  background: var(--paper);
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 220ms ease,
    transform 220ms ease;
}

.about-view.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.about-panel {
  width: min(900px, 100%);
  display: grid;
  gap: 24px;
}

.about-panel h2 {
  margin: 0;
  color: var(--green);
  font-family:
    Impact, Haettenschweiler, "Arial Narrow Bold", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-size: clamp(4rem, 12vw, 9rem);
  line-height: 0.85;
  letter-spacing: 0;
}

.about-panel p {
  max-width: 68ch;
  margin: 0;
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 800;
  line-height: 1.7;
}

.about-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.about-grid span {
  min-height: 82px;
  display: grid;
  place-items: center;
  color: var(--paper);
  background: var(--green);
  border: 3px solid var(--ink);
  border-radius: 20px;
  font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 900;
}

.about-close {
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 2;
  width: 48px;
  height: 48px;
  color: var(--paper);
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
}

.about-close:hover,
.about-close:focus-visible {
  background: var(--red);
  outline: none;
}

.simple-page {
  width: min(920px, calc(100% - 32px));
  min-height: calc(100vh - 48px);
  margin: 24px auto;
  display: grid;
  align-content: center;
  gap: 20px;
  color: var(--paper);
}

.simple-page h1 {
  margin: 0;
  color: var(--paper);
  font-family:
    Impact, Haettenschweiler, "Arial Narrow Bold", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  font-size: clamp(5rem, 18vw, 12rem);
  line-height: 0.85;
  letter-spacing: 0;
}

.simple-page p {
  max-width: 46ch;
  margin: 0;
  color: var(--cream);
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.7;
}

.back-link {
  width: max-content;
  color: var(--mint);
  font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-weight: 900;
  text-decoration: none;
}

.back-link:hover,
.back-link:focus-visible {
  color: var(--red);
  outline: none;
}

.site-footer {
  width: min(1220px, calc(100% - 32px));
  margin: -8px auto 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  color: rgba(244, 239, 231, 0.64);
  font-family:
    "IBM Plex Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.78rem;
  font-weight: 800;
}

.site-footer a {
  color: var(--mint);
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--red);
  outline: none;
}

body.is-ready .card {
  animation: rise-in 420ms ease both;
}

body.is-ready .card:nth-child(2) {
  animation-delay: 35ms;
}

body.is-ready .card:nth-child(3) {
  animation-delay: 70ms;
}

body.is-ready .card:nth-child(4) {
  animation-delay: 105ms;
}

body.is-ready .card:nth-child(5) {
  animation-delay: 140ms;
}

body.is-ready .card:nth-child(n + 6) {
  animation-delay: 175ms;
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 980px) {
  .page-shell {
    width: min(900px, calc(100% - 24px));
    padding: 18px;
    border-radius: 26px;
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(178px, auto);
    grid-template-areas:
      "logo logo"
      "blog art"
      "tools art"
      "about contact"
      "friends contact"
      "date quote";
  }

  .card {
    min-height: 178px;
  }

  .card-logo {
    min-height: 300px;
  }

  .card-art {
    min-height: 260px;
  }

  .card h1 {
    font-size: 4rem;
  }

  .card h2,
  .card-blog h2 {
    font-size: 3.2rem;
  }

  .tool-marks {
    right: 20px;
    bottom: 18px;
    grid-template-columns: repeat(3, 34px);
  }
}

@media (max-width: 640px) {
  body {
    display: block;
  }

  .page-shell {
    width: min(100% - 18px, 520px);
    margin: 9px auto;
    padding: 10px;
    border-radius: 24px;
  }

  .bento {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(156px, auto);
    grid-template-areas:
      "logo"
      "blog"
      "tools"
      "art"
      "about"
      "friends"
      "contact"
      "date"
      "quote";
    gap: 10px;
  }

  .card {
    min-height: 156px;
    padding: 18px;
    border-radius: 22px;
  }

  .card-logo {
    min-height: 280px;
  }

  .card-art {
    min-height: 260px;
  }

  .card h1 {
    font-size: 3.2rem;
  }

  .card h2,
  .card-blog h2 {
    font-size: 2.8rem;
  }

  .card-contact h2 {
    font-size: 2.8rem;
  }

  .logo-mark {
    width: 82px;
    height: 82px;
    font-size: 2.4rem;
  }

  .logo-foot {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
  }

  .tool-marks {
    grid-template-columns: repeat(3, 28px);
  }

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