@font-face {
  font-family: DEInstrument;
  src: url('/assets/delete-everything/InstrumentSerif-Regular.ttf') format('truetype');
  font-display: swap;
}
@font-face {
  font-family: DEBarlow;
  src: url('/assets/delete-everything/Barlow-Regular.ttf') format('truetype');
  font-display: swap;
}
.delete-showcase { background: #eee7d9; color: #272922; padding: 80px 0; font-family: DEBarlow, Barlow, sans-serif; }
.delete-copy, .de-hero-copy { container-type: inline-size; }
.delete-copy h2, .de-page h1 {
  font-family: DEInstrument, Georgia, serif; font-size: min(140px, 23cqw);
  font-weight: 400; line-height: .9; letter-spacing: -.025em; margin: 0 0 26px;
}
.delete-copy h2 span, .de-page h1 span { white-space: nowrap; }
.delete-copy h2 br { display: block; }
.delete-copy h2 b, .de-page h1 b { color: #a53626; font-weight: 400; }
.delete-showcase .game-tagline { font-family: DEInstrument, Georgia, serif; font-size: 32px; line-height: 1.2; }
.delete-showcase .game-summary { max-width: 45ch; line-height: 1.6; }
.delete-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 48px; padding: 12px 22px; background: #a53626; color: #faf3e5;
  border-radius: 3px; font: inherit; text-decoration: none;
}
.delete-button:hover { background: #82281b; }
.delete-button:active { background: #692116; }
.delete-button svg, .de-link svg {
  width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.delete-showcase .more-link { display: inline-flex; align-items: center; min-height: 44px; }
.delete-art img { width: 100%; height: auto; display: block; }
.delete-art figcaption { font-size: 14px; color: #626254; margin-top: 12px; }
.de-page { margin: 0; background: #eee7d9; color: #272922; font-family: DEBarlow, Barlow, sans-serif; }
.de-page a:focus-visible, .de-page button:focus-visible { outline: 3px solid #a53626; outline-offset: 4px; }
.de-nav, .de-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  max-width: 1250px; margin: auto; padding: 22px 28px;
}
.de-nav { border-bottom: 1px solid #272922; }
.de-brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 13px; letter-spacing: .13em; text-decoration: none; color: inherit; }
.de-hero {
  max-width: 1250px; margin: auto; padding: 64px 28px 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 46px; align-items: center;
}
.de-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; margin: 0 0 24px; }
.de-lead { font-family: DEInstrument, Georgia, serif; font-size: 32px; line-height: 1.25; margin: 0 0 20px; }
.de-description { font-size: 17px; line-height: 1.6; max-width: 45ch; margin-bottom: 28px; }
.de-play-note { font-size: 13px; line-height: 1.6; color: #626254; margin-top: 14px; }
.de-page figure { margin: 0; }
.de-page figure img { display: block; width: 100%; height: auto; }
.de-page figcaption { font-size: 13px; line-height: 1.5; color: #626254; margin-top: 10px; }
.de-key-art > a { display: block; position: relative; }
.de-key-art figcaption { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; }
.de-how { max-width: 1194px; margin: auto; border-top: 1px solid #bcb6a8; padding: 44px 0; }
.de-how h2, .de-motion h2 { font-family: DEInstrument, Georgia, serif; font-weight: 400; font-size: 48px; line-height: 1.1; margin: 0 0 26px; }
.de-how-heading { display: flex; align-items: center; justify-content: space-between; gap: 32px; margin-bottom: 36px; }
.de-how-heading h2 { margin: 0; }
.de-gesture { width: min(100%, 320px); flex-shrink: 0; }
.de-gesture figcaption { text-align: center; }
.de-how ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.de-how li { counter-increment: steps; }
.de-how li::before {
  content: counter(steps); display: flex; align-items: center; justify-content: center;
  width: 37px; height: 37px; border: 1px solid currentColor; border-radius: 50%;
  font-family: DEInstrument, Georgia, serif; font-size: 28px; margin-bottom: 16px;
}
.de-how h3 { font-weight: 400; font-family: DEInstrument, Georgia, serif; font-size: 29px; margin: 0 0 8px; }
.de-how p, .de-motion p { font-size: 16px; line-height: 1.6; max-width: 48ch; }
.de-how .de-note { margin-top: 28px; max-width: 80ch; color: #626254; }
.de-motion { max-width: 1194px; margin: 20px auto 70px; display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 70px; align-items: center; }
.de-motion video { width: 100%; height: auto; max-height: 640px; display: block; background: #eee7d9; }
.de-motion .de-eyebrow { font-size: 12px; letter-spacing: .16em; }
.de-motion .de-fiction-note { font-size: 13px; color: #626254; margin-top: 28px; }
.de-link { display: inline-flex; align-items: center; gap: 12px; color: inherit; min-height: 44px; text-decoration: underline; text-underline-offset: 4px; }
.de-link:hover { color: #a53626; }
.de-footer { font-size: 12px; color: #626254; border-top: 1px solid #bcb6a8; }
.de-footer div { display: flex; gap: 14px; align-items: center; }
.de-footer a { color: inherit; text-decoration: underline; text-underline-offset: 3px; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
@media (max-width: 1250px) and (min-width: 801px) {
  .de-how, .de-motion { margin-inline: 28px; }
}
@media (max-width: 800px) {
  .delete-showcase { padding: 52px 0; }
  .de-nav, .de-footer { padding: 12px 18px; }
  .de-nav .delete-button { padding: 9px 14px; }
  .de-hero { display: flex; flex-direction: column; gap: 30px; padding: 36px 18px; }
  .de-hero-copy { width: 100%; }
  .de-page h1 { font-size: min(106px, 23cqw); }
  .de-eyebrow { margin-bottom: 20px; }
  .de-lead { font-size: 29px; }
  .de-description { font-size: 16px; }
  .de-how { margin: 0 18px; padding: 32px 0; }
  .de-how h2, .de-motion h2 { font-size: 39px; }
  .de-how-heading { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 30px; }
  .de-gesture { align-self: center; }
  .de-how ol { grid-template-columns: 1fr; gap: 20px; }
  .de-how li { position: relative; padding-left: 54px; }
  .de-how li::before { position: absolute; left: 0; top: 1px; }
  .de-how h3 { font-size: 27px; }
  .de-motion { margin: 20px 18px 40px; display: flex; flex-direction: column; gap: 30px; }
  .de-motion figure { max-width: 390px; width: 100%; }
  .de-footer { flex-wrap: wrap; gap: 4px; }
  .de-footer div { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { .de-page { scroll-behavior: auto; } }