/* Page composition for the landing example (Slowburn). Cross-section pieces – the sloth on the
   window sill, the light through the blinds, the pneumatic pipe – are positioned in rem, so they
   keep their place at every width within a regime. */
@layer page {

  .sb-hero { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 6rem; align-items: end; padding-block: 8rem 0; }
  .sb-hero-text { position: relative; z-index: 2; padding-block-end: 10rem; }
  .sb-hero h1 { font-size: 6.2rem; line-height: 1.06; }
  .sb-window { position: relative; z-index: 1; display: block; inline-size: 100%; block-size: auto; }
  .sb-blinds { position: absolute; z-index: 0; pointer-events: none; inset-block: 30% -22rem; inset-inline-start: 34rem; inline-size: 52rem; clip-path: polygon(74% 0, 100% 0, 46% 100%, 4% 100%); background: repeating-linear-gradient(to bottom, var(--beam) 0 1.2rem, transparent 1.2rem 2.4rem); }
  .sb-sloth { position: absolute; z-index: 3; inline-size: 23rem; block-size: auto; aspect-ratio: 204 / 196; inset-inline-end: 11rem; inset-block-end: -11.84rem; }

  .sb-clients { background: var(--surface); border-block-start: .5rem solid var(--brass); padding-block: 5rem; }
  .sb-quiet { font-size: 2.2rem; color: var(--muted); max-inline-size: 60rem; }
  .sb-redacted { display: flex; flex-wrap: wrap; gap: 2rem 3rem; margin-block: 3rem 2rem; padding: 0; list-style: none; }
  .sb-redacted li { display: flex; align-items: center; gap: 1rem; }
  .sb-logo { inline-size: 3.2rem; block-size: 3.2rem; flex: none; background: var(--muted); }
  .sb-redacted li:nth-child(1) .sb-logo { border-radius: 50%; }
  .sb-redacted li:nth-child(2) .sb-logo { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .sb-redacted li:nth-child(3) .sb-logo { border-radius: 50% 50% 0 50%; }
  .sb-redacted li:nth-child(4) .sb-logo { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  .sb-redacted li:nth-child(5) .sb-logo { border-radius: .6rem; }
  .sb-name { position: relative; font-family: var(--font-display, var(--font)); font-size: 2.2rem; white-space: nowrap; color: var(--ink); user-select: none; }
  .sb-name::after { content: ''; position: absolute; inset-block: .2rem -.1rem; inset-inline: 2.6rem -.3rem; background: var(--city); transform: rotate(-1.5deg); }
  .sb-redacted li:nth-child(even) .sb-name::after { inset-inline-start: 3.4rem; transform: rotate(1deg); }


  .sb-pipe { position: relative; padding-inline-start: calc(var(--space-inline) + 6rem); }
  .sb-pipe::before { content: ''; position: absolute; inset-block: 0; inset-inline-start: 3.6rem; inline-size: 1.8rem; background: linear-gradient(to right, var(--brass-dark), var(--brass) 30%, color-mix(in srgb, var(--brass) 55%, var(--paper)) 48%, var(--brass) 66%, var(--brass-dark)); }
  .sb-pipe::after { content: ''; position: absolute; z-index: 1; inset-block-start: -.8rem; inset-inline-start: 3rem; inline-size: 3rem; block-size: 1.6rem; border-radius: .3rem; background: var(--brass-dark); }
  .sb-pipe-start::before { inset-block-start: 5rem; }
  .sb-pipe-start::after { inset-block-start: 1.6rem; inset-inline-start: 1.6rem; inline-size: 5.8rem; block-size: 3.6rem; border-radius: 0; background: var(--brass); clip-path: polygon(0 0, 100% 0, 66% 100%, 34% 100%); }
  .sb-pipe-end { clip-path: inset(-1rem 0 0 0); }
  .sb-pipe-end::before { content: none; }
  .sb-drop { position: relative; z-index: 2; block-size: 0; margin-block-start: 0; }
  .sb-outlet { position: absolute; inset-block-start: -60rem; inset-inline-start: calc(3.6rem - var(--space-inline) - 6rem); inline-size: 1.8rem; block-size: 52rem; background: linear-gradient(to right, var(--brass-dark), var(--brass) 30%, color-mix(in srgb, var(--brass) 55%, var(--paper)) 48%, var(--brass) 66%, var(--brass-dark)); }
  .sb-shot { position: absolute; inset-block-start: -8rem; inset-inline-start: calc(3.6rem - var(--space-inline) - 6rem); inline-size: 9rem; block-size: 17rem; overflow: visible; pointer-events: none; }
  .sb-capsule { position: absolute; z-index: 1; inset-block-start: 38%; inset-inline-start: 3.8rem; inline-size: 1.4rem; block-size: 3.4rem; border-radius: .7rem; border: .2rem solid var(--brass-dark); background: var(--neon); }


  .sb-price-hit { position: relative; }
  .sb-flying { position: absolute; inset-block-start: .6rem; inset-inline-start: 9rem; inline-size: 9rem; transform: rotate(30deg); pointer-events: none; }
  .sb-flying svg { display: block; inline-size: 100%; block-size: auto; }

  @media (width <= 50em) {
    .sb-hero { grid-template-columns: 1fr; gap: 2rem; padding-block-start: 5rem; }
    .sb-hero-text { padding-block-end: 0; }
    .sb-hero h1 { font-size: 4.2rem; }
    .sb-window { inline-size: 78%; justify-self: end; }
    .sb-blinds { inset-block: 62% -14rem; inset-inline-start: 4rem; inline-size: 44rem; }
    .sb-sloth { inline-size: 18rem; inset-inline-end: 8rem; inset-block-end: -9.26rem; }
    .sb-clients { padding-block-start: 9rem; }
    .sb-name { font-size: 2rem; }
    .sb-logo { inline-size: 2.6rem; block-size: 2.6rem; }
    .sb-pipe { padding-inline-start: calc(var(--space-inline) + 3.4rem); }
    .sb-pipe::before { inset-inline-start: 2.4rem; inline-size: 1.3rem; }
    .sb-pipe::after { inset-inline-start: 1.9rem; inline-size: 2.3rem; block-size: 1.2rem; }
    .sb-pipe-start::after { inset-block-start: 1.6rem; inset-inline-start: 1.1rem; inline-size: 3.9rem; block-size: 3.6rem; }
    .sb-capsule { inset-inline-start: 2.5rem; inline-size: 1rem; block-size: 2.6rem; }
    .sb-outlet { inset-inline-start: calc(2.4rem - var(--space-inline) - 3.4rem); inline-size: 1.3rem; block-size: 54.2rem; }
    .sb-shot { inset-block-start: -5.8rem; inset-inline-start: calc(2.4rem - var(--space-inline) - 3.4rem); inline-size: 6.47rem; block-size: 12.2rem; }
  }
  @media (width >= 125em) {
    .sb-flying { inset-block-start: -7.4rem; inset-inline-start: calc(-1 * var(--card-space) - 8.2rem); transform: rotate(18deg); }
  }
  @media (height <= 30em) {
    .sb-hero h1 { font-size: min(6.2rem, 11vh); }
    .sb-hero { padding-block-start: 2.4rem; }
  }
}