/* Establish → gather → return. Different silhouettes, one native workspace. */
html[data-paper=cloth][data-editor-view=demo] #unify {
  --surround-fill: #c9beb0;
  --surround-ink: #38332e;
  --surround-secondary: #514a43;
  --surround-quiet: #665d53;
}
#intro { padding-top: 105px; padding-bottom: 100px; }
#intro p { max-width: 49ch; }
.filing-bridge {
  max-width: 1000px; margin: auto; padding: 86px 40px 92px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 70px; align-items: center;
}
.filing-bridge h2 { font: 46px/1.15 var(--serif); letter-spacing: -.025em; margin: 0; }
.filing-bridge p { font: 19px/1.6 var(--serif); margin: 0; }
#filing { width: 80%; max-width: 1240px; margin-left: 5%; margin-right: auto; padding-top: 48px; }
#filing > header { margin-bottom: 32px; }
#filing h2 { font-size: clamp(39px,3.5vw,52px); }
#filing header p { font-size: 19px; }
.filing-layout { grid-template-columns: minmax(0,1fr) 195px; gap: 28px; padding-inline: 32px; }
.filing-window { height: 740px; }
.filing-draft { grid-template-columns: 12px minmax(0,500px) 228px; gap: 24px; padding-inline: 32px; }
.file-existing { margin-top: 34px; color: rgb(29 26 21 / .68); }
.file-existing h4 { white-space: normal; margin-top: 28px; }
.existing-pile { font: 13.86px/1.5 var(--serif); margin: 15px 0 8px 22px; }
.existing-note { display:flex; gap:8.4px; margin:8.4px 0 0 25.2px; font:italic 13.125px/1.5 var(--serif); }
.existing-note i { width:4.2px; flex:none; border-radius:2.1px; background:currentColor; }
.existing-note span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.file-existing small { display:block; margin:14px 0 0 22px; font:11.55px/22px var(--serif); color:rgb(29 26 21 / .35); }

/* Ink responds to the text entering the reading band, not the surrounding
   section's padding. Quiet text stays legible; no opacity or layout shifts. */
:is(.stay,.filing-bridge,.sentence-bridge,.philosophy-inner)[data-attention] {
  --reading-ink: #77736a; --support-ink: #7a756d;
}
:is(.stay,.filing-bridge,.sentence-bridge,.philosophy-inner)[data-attention=present] {
  --reading-ink: #302f29; --support-ink: #555249;
}
:is(.stay,.filing-bridge,.sentence-bridge,.philosophy-inner)[data-attention] :is(h2,p,em,.eyebrow) {
  color:var(--reading-ink); transition:color 550ms ease;
}
:is(.stay,.filing-bridge,.sentence-bridge,.philosophy-inner)[data-attention] p { color:var(--support-ink); }

.craft-section { width:92%; max-width:1440px; }
.craft-section header { max-width:1000px; padding-left:24px; }
.craft-gallery { display:flex; gap:28px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; padding:8px 24px 24px; }
.craft-gallery figure { flex:0 0 92%; min-width:0; scroll-snap-align:start; scroll-margin-inline:24px; }
.craft-gallery:focus-visible { outline:2px solid #736447; outline-offset:4px; }
.gallery-controls { display:flex; justify-content:flex-end; align-items:center; gap:18px; padding:0 24px; }
.gallery-controls span { margin-right:8px; font:13px/1.5 -apple-system,sans-serif; color:#696257; }
.gallery-controls button { width:42px; height:42px; border:1px solid #81796660; border-radius:50%; font:22px var(--serif); }
.gallery-controls button:disabled { opacity:.3; cursor:default; }
.gallery-controls button:focus-visible { outline:2px solid #736447; outline-offset:3px; }
@media(max-width:1250px) {
  #filing { width:92%; margin-left:3%; }
  .filing-layout { grid-template-columns:minmax(0,1fr) 175px; gap:24px; padding-inline:28px; }
  .filing-draft { grid-template-columns:0 minmax(0,1fr) 220px; padding-inline:30px; }
}
@media(max-width:900px) {
  .filing-bridge { display:block; padding-inline:8%; }
  .filing-bridge p { margin-top:25px; }
  .filing-layout { grid-template-columns:minmax(0,1fr); }
  .craft-gallery figure { flex-basis:96%; }
}
@media(prefers-reduced-motion:reduce) {
  :is(.stay,.filing-bridge,.sentence-bridge,.philosophy-inner)[data-attention] :is(h2,p,em,.eyebrow) { transition:none; }
}

.recall-outline .file-existing { margin-top: 24px; }
.recall-dock { top:auto; bottom:0; }

/* Taller native-scale writing views: the outer frame stays fixed through each act. */
.centered-frame { height:770px; }
@container first-paper (max-width:1260px) { .centered-frame { height:910px; } }
.recall-editor { height:740px; }
.recall-draft .draft-section { margin-top:32px; font:inherit; }

/* A shared centre; the narrower chapter is a pause, not a displaced object. */
#filing { margin-inline:auto; }
.filing-bridge { padding-top:48px; padding-bottom:116px; }
.sentence-bridge { padding-top:50px; padding-bottom:118px; }
:is(#unify,#filing,#return) :is(.merge-controls,.scene-controls,.recall-controls) { font-size:11px; gap:18px; }
:is(#unify,#filing,#return) :is(.merge-controls,.scene-controls,.recall-controls) button { border-bottom-color:transparent; color:#625a4e; }
:is(#unify,#filing,#return) :is(.merge-controls,.scene-controls,.recall-controls) button:focus-visible { outline:2px solid currentColor; outline-offset:4px; }

/* Cloth around the window should read as a generous border, not a tight mount. */
#filing { width:calc(80% + 64px); max-width:1304px; }
#filing > header { width:100%; max-width:none; box-sizing:border-box; padding-inline:64px; }
.filing-layout { padding-inline:64px; }
@media(max-width:1250px) {
  #filing { width:92%; }
  #filing > header, .filing-layout { padding-inline:48px; }
}
@media(max-width:900px) {
  #filing > header, .filing-layout { padding-inline:32px; }
}
@media(prefers-reduced-motion:no-preference) {
  :is(.stay,.filing-bridge,.sentence-bridge,.philosophy-inner)[data-attention] :is(h2,p,em,.eyebrow) { transition-duration:700ms; }
}

/* Editorial marginalia: the app's note mark accompanies each statement. */
:is(.filing-bridge,.sentence-bridge) h2 {
  position:relative; padding-left:28px;
}
:is(.filing-bridge,.sentence-bridge) h2::before {
  content:''; position:absolute; left:0; top:.13em; bottom:.13em;
  width:4px; border-radius:2px; background:currentColor;
}
.sentence-bridge {
  grid-template-columns:minmax(240px,310px) minmax(0,570px);
}
.sentence-bridge h2 { grid-column:2; }
.sentence-bridge .bridge-thought,.sentence-bridge aside { grid-column:1; }
/* Production AmberScale.middle: equal CIELAB midpoint of floor and ceiling. */
.sentence-bridge { --marginal-amber:color-mix(in lab, rgb(93.69% 71.90% 38.08%), rgb(99.59% 54.72% .39%)); }
#sentence[data-attention] aside em { color:color-mix(in lab,var(--marginal-amber) 35%,#77736a); }
#sentence[data-attention=present] aside em { color:var(--marginal-amber); }
@media(max-width:1199px) {
  .sentence-bridge { grid-template-columns:minmax(240px,1fr) minmax(0,1.5fr); }
}
@media(max-width:760px) {
  .sentence-bridge { display:flex; flex-direction:column; }
  .sentence-bridge h2 { order:-1; }
}

/* Shared chapter edges; the interludes carry the compositional rhythm. */
#filing { width:92%; max-width:1440px; margin-inline:auto; }
@media(max-width:1199px) { #filing { width:calc(100% - 48px); } }