/* A light common ground links the paintings; cloth colours belong to their
   landscapes. Interludes vary their scale and arrangement, not the app. */
html[data-paper=cloth] {
  --ground: #f1efe8;
}
html[data-paper=cloth][data-editor-view=demo] #unify {
  --surround-fill: #68705f;
}
html[data-paper=cloth] #filing { --surround-fill: #b5a397; }
html[data-paper=cloth] #return {
  --surround-fill: #c4bdaf;
  --surround-ink: #36332d;
  --surround-secondary: #514b41;
  --surround-quiet: #665e51;
}

/* First: a clear, spacious statement after the reader has felt the connection. */
.stay { max-width: 1050px; padding: 118px 30px 130px; }
.stay h2 {
  max-width: 760px; margin: 0 auto;
  font-size: clamp(48px, 4.5vw, 68px); line-height: 1.12;
  letter-spacing: -.03em;
}
.stay p {
  margin-top: 32px; max-width: 460px;
  font: 16px/1.7 -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Second: thought and supporting explanation sit beside one another, like
   the app's composition. It is deliberately shorter than the first pause. */
.sentence-bridge {
  max-width: 1120px; padding: 84px 40px 90px;
  grid-template-columns: minmax(0, 570px) minmax(240px, 310px);
  gap: 24px 80px; align-items: start;
}
.sentence-bridge h2 {
  grid-column: 1; grid-row: 1 / 3;
  font-size: clamp(40px, 3.5vw, 52px); line-height: 1.14;
}
.sentence-bridge .bridge-thought {
  grid-column: 2; grid-row: 1;
  font: 19px/1.55 var(--serif); padding-top: 5px;
}
.sentence-bridge aside { grid-column: 2; grid-row: 2; padding: 0; }
.sentence-bridge aside p { font-size: 14px; line-height: 1.65; }
.sentence-bridge aside p + p { margin-top: 8px; }
.sentence-bridge aside em { font-size: 21px; }

/* Let the quiet final reflection precede the compact platform signature.
   The warmer closing ground starts before the image, not at its top edge. */
.philosophy { padding-top: 125px; padding-bottom: 90px; }
html[data-paper=cloth] .closing-story {
  background: linear-gradient(180deg, var(--ground) 0%, #efede5 38%, #eae6da 73%, #e4dece 100%);
}
.native-section { padding-bottom: 130px; }
.craft-section header { margin-bottom: 54px; }

@media(max-width:1199px) {
  .sentence-bridge { grid-template-columns: minmax(0, 1.5fr) minmax(240px, 1fr); gap: 24px 50px; padding-inline: 7%; }
}
@media(max-width:760px) {
  .stay { padding: 85px 8% 90px; }
  .stay h2 { font-size: 43px; }
  .sentence-bridge { display: block; padding: 70px 8%; }
  .sentence-bridge h2 { font-size: 37px; }
  .sentence-bridge .bridge-thought { margin-top: 25px; }
  .sentence-bridge aside { margin-top: 24px; }
}