/* The cloth remains the chapter boundary. Give it a considered lower border
   without rescaling any of the app canvases or their typography. */
#unify { padding-top: 30px; padding-bottom: 44px; }
#unify .unify-title { display: block; margin-bottom: 16px; }
#unify .unify-title > em { display: block; margin-top: 8px; }
#filing { padding-top: 30px; padding-bottom: 64px; }
#return { padding-top: 30px; padding-bottom: 72px; }

@media (min-width: 1151px) and (max-height: 840px) {
  #unify { padding-top: 24px; padding-bottom: 40px; }
  #unify .unify-title { display: block; margin-bottom: 10px; }
  #unify .unify-title h2 { font-size: 32px; }
  #unify .unify-title > em { margin-top: 6px; font-size: 23px; line-height: 1.25; }
  #filing { padding-top: 24px; padding-bottom: 60px; }
  #filing > header { margin-bottom: 16px; }
  #return { padding-top: 22px; padding-bottom: 64px; }
  #return > header { margin-bottom: 8px; }
  #return .third-caption-band { margin-bottom: 12px; }
}

/* One expansive painted interval; two small edge notes. Clear paper carries
   the rest of the story, rather than repeating a painted frame for every text. */
html[data-aesthetic=cloud] #intro::after {
  top: auto; bottom: -24px; left: calc(50% - 50vw); right: auto;
  width: clamp(180px, 23vw, 360px); height: clamp(240px, 30.67vw, 480px);
  transform: none;
  background-image: url('assets/aesthetic-cloudlight.webp');
  background-size: 200% auto; background-position: left center;
  opacity: .72;
  -webkit-mask-image: linear-gradient(90deg,#000 45%,transparent), linear-gradient(180deg,transparent,#000 24%,#000 72%,transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,#000 45%,transparent), linear-gradient(180deg,transparent,#000 24%,#000 72%,transparent);
  mask-composite: intersect;
}
html[data-aesthetic=cloud] #sentence::after {
  top: auto; bottom: 24px; left: calc(50% + 50vw); right: auto;
  width: clamp(180px, 25vw, 400px); height: clamp(240px, 33.33vw, 533px);
  transform: translateX(-100%);
  background-image: url('assets/aesthetic-cloudlight.webp');
  background-size: 200% auto; background-position: right center;
  opacity: .8;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 55%), linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent,#000 55%), linear-gradient(180deg,transparent,#000 24%,#000 76%,transparent);
  mask-composite: intersect;
}
html[data-aesthetic=cloud] #philosophy::after { content: none; }

/* Move from a private marginal observation to a centered product composition.
   A single small rule makes this turn legible without adding another panel. */
#philosophy { padding-bottom: 140px; }
#craft { padding-top: 32px; }
#craft .craft-introduction { padding-top: 48px; margin-bottom: 36px; }
#craft .craft-introduction::before {
  content: ''; position: absolute; top: 0; left: calc(50% - 32px);
  width: 64px; height: 1px; background: #7f75634a;
}
#craft .craft-introduction .eyebrow { margin-bottom: 20px; }
#craft h2 { font-size: clamp(38px, 3.35vw, 48px); line-height: 1.16; }
#craft .native-section { margin-top: 22px; }

/* A quiet keyboard cue, without the illustrated, raised keycap. */
#craftEscape { min-height: 44px; gap: 12px; }
#craftEscape kbd {
  padding: 5px 1px; border: 0; border-bottom: 1px solid #81796b80;
  border-radius: 0; background: none; box-shadow: none;
  font: 13px/1.1 -apple-system,BlinkMacSystemFont,sans-serif;
  letter-spacing: .02em;
}
#craftEscape:hover kbd { background: none; border-bottom-color: #36342e; }

@media (max-width: 1150px) {
  html[data-aesthetic=cloud] #intro::after { width: 160px; height: 214px; bottom: -20px; }
  html[data-aesthetic=cloud] #sentence::after { width: 160px; height: 214px; bottom: 4px; }
}
@media (max-width: 760px) {
  #unify { padding-top: 28px; padding-bottom: 40px; }
  #unify .unify-title { padding-inline: 20px; }
  #filing,#return { padding-top: 28px; padding-bottom: 52px; }
  html[data-aesthetic=cloud] #intro::after,
  html[data-aesthetic=cloud] #sentence::after { content: none; }
  #philosophy { padding-bottom: 104px; }
  #craft { padding-top: 16px; }
  #craft .craft-introduction { padding-top: 40px; margin-bottom: 24px; }
  #craft h2 { font-size: clamp(34px, 6.5vw, 42px); }
}